浅谈 HTML 5

当然,我知道,聪明的你肯定也知道,HTML 5只是一个噱头而已,真正讨论的是移动互联网开发。

近几年来,在Web标准沉默了很多 年以及IE 6独占市场很多年以后,HTML 5神话地打破了这个局面,使得Web标准重新成为标准,并不受一家限制。这个主要归功于成功的开源HTML解释引擎Webkit(感谢Webkit、感谢 Apple,不过,其实真正该感谢的还是KDE,因为不是KHTML严格的GPL,Apple不知道会不会把拿KHTML来改造的Webkit开源 呢~)。不受平台限制,所以最终在几乎所有手机浏览器的内核都是Webkit(自带浏览器)。

不过,HTML 5真的还有很长的路要走。

近 几年来,HTML 5标签的变化主要集中在替代Flash的解决方案上,包括Canvas、Video以及Audio标签,至于其他标签,实际上可以通过CSS进行定制来模 拟,甚至很多标签基本没有所谓的式样,只是语义。但语义Web,我觉得是,HTML从创建之初就是用来格式化的,为什么语义?语义也应该是格式化上的语 义。

相比Flash,从设计之处就支持打算支持硬件加速的Canvas、Video以及Audio标签使页面运行更为流畅、自然。三个功能 单一化的标签,使得维护更容易。Video和Audio现在的问题就是如何维持浏览器之间的兼容性。而Canvas,其中一个很严重的缺点就是内容难以描 述,基于位图操作的Canvas对于图表,描述性自然是很差的,但愿SVG动画能够填补这个空白。Canvas的出现大概是为了游戏。但 JavaScript引擎的设计大多数是基于单线程的,对于游戏设计来说性能还是不好。

但HTML 5实际上伴随的变化,还在于CSS 3建立的互动模型。由于Webkit的流行,支持HTML 5就等于支持CSS 3。而CSS 3的动画、过渡、坐标变换等内容大大增强了HTML 5的表现力,实际上从原来基于函数的操作转换为基于模型(利用CSS 3的选择器来建模,然后用JavaScript调用模型之间的变化关系,其余操作由CSS动画过渡模块来解决)。这样,动画交互设计变得容易,静态的内容 真正动态化、互动化,革新了以往对Web纯静态平面设计的概念。但CSS 3现在面临的问题是,缺少对动画状态的描述。

说到CSS 3,不得不提的是硬件加速。相对于用JavaScript来实现的动画来说,CSS 3动画显然会更为流畅(浏览器的绘制的优化)。于是,很多动画框架从CSS 3中寻找解决方案,希望利用CSS 3来实现流畅的动画效果。但由于现阶段的CSS 3还缺少流程控制,还有基于CSS 3本身基于模型的设计。到底应不应该用CSS 3来达到除了互动以外的动画特效目的?还是浏览器应该定义一套支持硬件加速的基本API(WebGL?)来实现?

HTML的设计到现在来说还有一个很严重的问题——页面跳转间没有过渡效果。这个问题在jQuery Mobile中通过AJAX拉取页面然后动态插入DOM来解决,但这样实际上做了很多复杂的工作,代码兼容上也有问题。模拟的就绪事件还是不能和DOM就绪事件相比。

HTML 5还有一个很重要的组成部分就是JavaScript,这个逻辑与表现的桥梁。动态语言的优点或许不用我说了。而JavaScript有着和动态语言的通 病:难以进行静态语法分 析来进行上下文提示(这或许也是JavaScript没有神什么好用的IDE的原因之一)。那么使用这套语言的人必须十分清楚对象是什么,以及类有什么 API,否则,面对一个JS对象将无从下手。动态语言屏蔽了类型差异,为快速开发打下基础,但是模糊的语义在某些情况下又使得开发难度增加。

好了,先说到这里吧,有时难免情绪化,若有些错误,希望大家指出。也希望大家给出自己的意见。感谢收听~

 

一个用Canvas做的“计时器”

很久没有发代码了。发一个用HTML 5 Canvas做的简单计时器……