HTML5前瞻与心得：技术与艺术的纠缠。

======================================================
注：本文源代码点此下载
======================================================

1点滴了几滴润洁离开betacafe,1点半到川味观,一盘扬州炒饭继续设计,3点半离开川味观,4点回到家睡觉,5点半醒来,6点坐起来打开电脑,然后纠缠进html5,10点半终于被它搞晕,于是昏昏睡去,14点半起来,整理一下狗窝,泡了一杯咖啡开了一袋饼干继续设计,18点半喝了一碗粥两个翅根几片冬瓜,19点半抵达betacafe和英杰密谋大计,22点半散会,眼看又要1点了,晕晕沉沉的又转完了一个24小时,等着下一个循环……【7.13】

在长久的片面宣传下,说起html5,大都直指video标签,好像html5=video标签一样,但实际上随着我越来越深的陷入html5,越来越深入的应用html5,就越来越强烈的感受到,它带来的远远不止video,真的是web的未来。最重要的是,ie9跟上时代了,微软跟上了。ie9率先实现的硬件加速确实具备相当的前瞻性,而ie9在html5的支持力度上步伐迈得很大,ie8到ie9虽然只是1个数字的分界,但却是一个时代的分界,虽然ie9离发布还有很长一段时间,但必须鼓掌,微软很努力,在奋起直追。

css 3

【ie9 ok】 css3 selectors

ie9的全面支持是最大亮点。选择,是一切的开始。虽然css2的选择基本够用,但让选择又有了更多更好的选择,为什么不呢?我做了一些有趣尝试,很舒服。

【ie9 ok】 css3 colors

无论rgba还是hsla,那个a,太重要了。字体色彩,背景色彩,边框色彩……任何色彩应用中都能引入透明,这能够让让整个设计显得晶莹而透彻,帮助极大。我对a简直爱不释手,已经逐渐抛弃#fff的定义,换成rgba(255,255,255,1),再配合transition……

【ie9 ok】 css3 rounded corners

设计对圆角的渴望不用多说,虽说圆角不万能,但无处不在又不抢眼的圆角设计所带来的一种自然和柔和,会瞬间灭了ie678。想起教主的话:看过视网膜屏,你就再也回不去了。圆角就是这样的,还记得那个叮当猫吗?

【ie9 no】 css3 text-shadow &css3 box-shadow

人要凹凸有致,文字也一样。但和圆角不同的是,文字阴影要适可而止,尽可能的少用、淡用。还有光晕,如果配合transition……盒模型的阴影是层次化设计的条件,在层窗越来越必要和丰富的今天,它在视觉上扮演的角色很重要,更别说内阴影的存在。

之所以把这两个阴影放在一起,因为这是我在css3中除了圆角以外用得最多的两个属性。嗯,color的a带来了光,而shadow就是影,光影光影,页面的饱满与质感就靠他俩了!可是,可是为什么这么重要的属性,在我眼里仅次于圆角,ie9却至今一直未支持,丫给了光不给影,脑袋有包啊!

我不期待ie9发布便能支持transform、transition、gradient还有很多高级属性,因为一些东西比如动画可以放弃,一些东西比如渐变可以找到代替,但是shadow我即不能放弃又找不到代替,用蹩脚的滤镜么?用死板的图片么?再说了,没有shadow,圆角废了一半。ie9 即将走进beta版本了,我希望在beta期间能够给我们带来那重要的影,否则,老子继续略过!

【ie9 ok】 css3 multiple backgrounds

多背景的意义不在于图片上,因为我们通常会把小图合并在一起。多背景的意义更多在于gradient,多层次带着a的渐变,能搞出华丽的背景。ie9不支持gradient,不过我们有替代品。

【ie9 ok】 css3 border images

图片做边框,很漂亮么?从来没过,也从来没想到可用之处。

【ie9 ok】 css3 box-sizing

没有用过,主要是已经很习惯了width、height、margin、padding的配合,这不像之前的那些属性,都属于在现有习惯上的增彩,而这个是要改变现有习惯,不太容易,慢慢来。

【ie9 no】 css3 multiple column layout

同样没有用过,理由也同上,已经习惯了relative、absolute、float。

【ie9 no】 css3 gradient

相对于圆角与阴影的难替代,渐变是最容易被替代的,图片平铺,当然仅限于水平或垂直。如果是斜线或圆形渐变,那就是灾难了。gradient的出现让人省心很多。即便ie9最后不支持,也可以找到替代,嗯,我说几次了,你猜到了吗?

【ie9 no】 css3 transforms

transforms更多的是为transition而存在,独立的transforms几乎没存在价值。

【ie9 no】 css3 3d transforms

别说ie9 no了,迄今为止,只有mac safari 4+和win safari 5支持,win下safari就是一坨屎,一开几百兆内存就没了,不夸张。看起来最华丽又最杯具的属性,但是,ios完美支持,你能错过ios么?前段时间我小试牛刀就被折服了,那体验……请允许我少见多怪一声:额滴神哪,flash一边死去!

【ie9 no】 css3 transitions

变换就是变幻莫测,在我搞懂以后现在是我的动画主力。但是,不得不说应用面相当有限,且不说尚未发布的ff4才刚刚支持,而opera市场份额很少,就性能而言,ff4和opera10.6的transitions性能都很糟糕,糟糕到还不是聊胜于无,而是不如无。性能问题以后再详谈,现在空口无凭,多说无益。

【ie9 no】 css3 animation

在没搞懂tansitions前,从去年中开始,我玩了半年多的animation。“动画”比“变换”文字上显然更动画,对吧,时间线的存在对于动画设计也是亲切的。后来我发现animation有些问题实在难以解决,才憋着去理解transitions,然后今年上半年开始全面转。animation的问题在于它的流程是从时间线起点到终点,但是不是停在终点而是回到起点。虽然可以在特定情况下让它停在终点,但是障碍很多甚至迈不过。即便用js监听事件也是靠不住的,1毫秒误差都会产生闪烁。而transitions不是时间线的起点终点,而是从一个状态到另一个状态并不会返回。

折腾了一年后,我才觉悟,真是名副其实啊。animation就是指一长段动画,基于时间线有始有终还会自动倒带回到初始状态,意思是指重点是产生一段动画,但物体本身没变。而transitions就纯粹是一次变换,从状态a变换到状态b,虽然也有一定意义上的时间线,但重点是改变而不是动画,变都变了,当然不会回头。嗯,这比较绕的两个东西,我觉得我还是说得比较清楚了,怎么选择应该就清楚了,也可能还是晕的,哈哈,那就继续晕。(额滴神啦,3点半了,写不完了,新的24小时都过了,睡觉睡觉,明天继续。)

【ie9 ok】 css3 media queries

这是一个非常好的属性。用户不可控的分辨率已经让设计非常的困难了,全局自适应设计早就不适合时代了,定制才是最好的。我的博客园在高分屏下全屏浏览体验就很不爽。没有办法下,1024定宽居中的设计方式成为唯一选择,于是带来了两边越来越大的空白,字体也越来越小,这还只是电脑上的情况。另外一边,随着ios和android率领移动互联网的高速发展,3寸,3.2寸,3.5寸,4寸,5寸,9寸……320,480,720,768,960……更多的乱七八糟的屏幕大小与分辨率加入进来,怎么办?噢,天啦,iphone 4还带来了精度,可预见的以后精度波及到显示器上,不再统一为72dpi,所有静态图片也将分离出不同规格的设计,前所未有的灾难!

如果你不是完美主义者,这对你没什么影响,你可以继续1024定宽居中。但如果像我这样无穷尽的追逐完美,追求自己的设计能够在任何设备与环境下都带着最佳的用户界面和用户体验,怎么办怎么办怎么办?!css3 media queries!无论在整体还是局部,它都能满足你的完美情结。吓,这怎么有点像白驼山壮骨粉的广告～～～

【ie9 ok】 font linking (@font-face)

对于动不动就几m甚至10+m的中文字体文件来说,这没啥用,而且貌似它并不会让字体从此安装在系统中,这意味着,每次都要下载。不过设想中,它还是有其他的绝妙用处～～～等我以后实验了再说～～～

html 5

【ie9 ok】 video element

嗯,这是最火的东东。仔细想想,它也确实该火。颠覆flash?不限于此,也许还会颠覆premiere等视频编辑软件。现在的视频都是一次成品,无论是flash还是video element都只是播放成品的载体,视频编辑是另一个领域。而video element不仅仅是载体,它将编辑、交互带入了视频。当视频不再是一次成品,不再是从头播放到尾的东西,当视频退为需要再次加工的素材,当视频可被用户操作也就有了流程的设计,一切就变得非常有趣了。网页设计的发展历史恐怕会在视频设计上重演,那就是纯粹的视频设计师将退居为互联网视频设计二线用于提供素材甚至淡出,而基于web标准的视频设计师将站上舞台。也许以后会出现这样的产品设计描述:当用户点击视频中这个人物脑袋时,视频暂停,一个透明的窗口链接facebook获取该人物相关资料并呈现。不继续yy了,平面设计和网页设计最大的不同是什么?平面设计的目标是欣赏眼睛看,而网页设计的目标是交互动手操作,我想,同样的差别和区分会随着video element的出现进入视频设计领域中。

【ie9 ok】 audio element

同上,音频和视频同根生。

wysiwyg editable elements

我一直没搞懂,这么好的东西,全浏览器兼容的东西,却用得那么少。我也没用过,不知道有什么障碍,正在尝试使用。

【ie9 ok】 new, stylable html5 elements

在class命名替代和强大的css3 selector光环下,还没有感觉到非常必要的应用面。

【ie9 ok】 svg & canvas

正在学的两个东东,说不了多少东西,而且也纠结于很多阻碍。之前我说的替代就是指svg,ie9不支持渐变,但支持svg做背景,就可以用svg来代替gradient。

圆角,投影,发光,透明,渐变,svg,canvas……你发现什么没?在网页上,高弹性的矢量化设计是大势所趋,而死板的位图设计即将走下舞台成为历史。这完全适应时代的发展,因为iphone、ipad、android已经拉动各大厂家,将社会推进到多设备的广义互联网时代。在这个混乱的广义互联网时代,设计的宽容性就变得极其重要,位图的死板显然远不及代码矢量的灵活。从这点上来说,flash也是比不上html5的,因为flash中的矢量设计是局限的,甚至,是固定的图片矢量。

我现在图片的使用量越来越少,fw打开的机会也越来越少,越来越多的设计转移到直接写代码了。因为个人形象问题,很多次别人问我是不是搞艺术的,我说我是做网页设计的,算沾艺术一点儿边吧,然后他把脑袋伸到我屏幕前一晃期待看见一个华美的设计,结果全是代码,哈哈哈哈。说到这里,我又想起了设计师的转型问题。用代码去完成矢量设计,圆角圆多少,投影偏移多少模糊多少,发光的范围角度,渐变……这些东西都是纯平面设计的东西,如果一个web标准设计师不会平面设计怎么玩?

css2时代,已经引发了一次设计师的转型,如果说只是排版被转移了,还不够彻底设计师还可以依赖输出设计稿独立在团队中,那么正在进入的css3时代,设计稿用处还剩多少?而输出设计稿的设计师,逃向何处?无处可逃。

如果说css2时代,用于页面排版设计的dw被记事本废除,那么css3时代,fw、ps、cd等等绘图软件将被步入dw后尘,同样被记事本所取代。设计一个矢量图标,不是ai,而是svg。设计一个水晶按钮,不是图片而是纯css3矢量按钮。习惯了在可视化软件的设置面板中配置各项参数的平面设计师,如何习惯在代码中去配置?难道你给我一个设计稿附带文案:这个地方的渐变从哪里到哪里,那个地方的阴影左偏移1px右偏移2px模糊5px,哦,还有各种色彩的参数等等,以便web标准设计师用css3还原?

那么为什么不直接用代码来设计呢?结果就是:平面设计师必学代码,web标准设计师必学设计,无处可逃。合作?想想这两者现在合作的障碍在哪里,未来只会更加艰难。而我一直的观点就是:css和设计密不可分。

写烦了写烦了,很多没写清楚还有很多没写,但我不想写了咋办呢。锤子,不写了。没有实例空口说白话不安逸没信服力,干活去了,等英来网正式版发布后,我一个一个的给大家指着案例,慢慢啰嗦。嗯,《重构之美》又将新生,无穷无尽,生生不息啊～～～

ps: 昨天开会的时候,说到各浏览器页面解析性能问题,我就去试ie9 pre3,结果异常惊喜的发现了box-shadow的存在,只在一个地方出现了,其他我应用了shadow的地方依旧空白。虽然我还不明白ie9怎么解析shadow的,显示有点奇怪,但box-shadow并不在ie9目前的宣传中。这个发现,说明ie9团队在测试对box-shadow的支持,那么text-shadow肯定不会落下,shadow在ie9的开发计划中,这太好了!!!我对ie9充满了希望,哈哈哈哈哈!

ps:ps:玩星际2的,台服切磋:zhengminlive@hotmail.com

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/