HTML5 Intro

在Google、Mozilla、Apple等组织的努力下，HTML5标准已经从草案走向实现。目前几个主流浏览器的最新版本均已或多或少支持HTML5的新功能，即使是过时的浏览器也可以通过Javascript和插件来模拟相应的效果。

 

在开发RIA（富互联网应用）的时候，是选择占有率、兼容性、开发效率有限的Flash、SilverLight、Gears、JavaFX等插件，还是选择与Javascpt、HTML、CSS等无缝结合的新Web标准，是值得考虑的。当然也有人会担心IE的顽固。对比十年前，Google也是在AJAX技术不成熟的情况下开发出GMail和Google Maps等新型应用，赢得了用户的认可，说明机会和风险是并存的。在又一次新技术浪潮来临的时候，你能占据先机吗？

 

 

绘制图像

 

HTML5将通过两项图像技术来提供更华丽的界面：SVG 描述矢量图，<canvas>标签和Javascrpt绘制位图。会翻墙的话可以看看Google工程师的视频介绍。

 

兼容性方面，主流浏览器中只有IE不支持，Google的svgweb可以通过VML在IE上模拟SVG，而同样是Google的excanvas可模拟canvas。

 

虽然2D世界还在发展中，OpenGL的WebGL和Opera的3D Canvas已经把手伸向3D，不用太久魔兽世界这样的大型3D游戏也会出现在浏览器上。

 

视频音频

 

使用<video>和<audio>标签即可直接播放视频和音频，并通过Javascript接口控制。目前有争议的是解码格式，至少要支持OGG和H.264两种文件，再加上传统的FLV，视频网站又要多准备很多块硬盘了。不过对于已经支持HTML5的YouTube来说应该不是问题。

 

兼容性方面，html5-nowJavascript库会根据浏览器的不同提供Flash、QuickTime、Java三种播放器作为补丁。

 

地理位置

 

经过用户许可后可获得当前用户的地理坐标，以提供更加本地化的服务。根据使用Android的经验，硬件会尝试电信、WIFI、GPS等尽可能多的手段去定位。

 

访问Google Maps的Where Am I ?就可以知道你的浏览器是否支持，目前好像只有FireFox。Google Gears则是另一种选择。

 

本地存储

 

HTML5提供两种存储方式：key-value方式的Local Storage和数据库方式的Web SQL Database。

 

对于IE8以前的版本，local-storage-js可以在没有Local Storage情况下用cookie去替代。另一个javascript库PersistJS则可从Gears、Local Storage、Web SQL Database、Global Storage、Flash、IE、cookie等多个存储方法逐一尝试，以便最大限度的兼容。

 

离线应用

 

有了本地存储之后，通过html元素的manifest属性中指定哪些程序和资源文件需要缓存下来，结合离线API就可以在没有网络的时候继续运行程序，待网络恢复后再与服务器同步。目前只对非IE的浏览器有效，IE下需要使用Google Gears。

 

后台计算

 

对于计算量较大的程序，由于Javascript单线程执行，容易让浏览器陷入假死状态，Web Worker技术正是为了解决这个问题。每个worker会使用各自的线程在后台运行，与DOM环境完全独立，并通过本地存储交换数据。

 

目前只支持非IE浏览器。如果不能放弃IE的话还是推荐利用Flash计算，性能比Javascript好很多，类库也比较丰富。

 

网络通信

 

Web Sockets可以提供一个socket持久通信连接，以替代问题多多的Comet或是Ajax轮询的方案。同样只支持非IE浏览器，在IE上web-socket-js 利用Flash来实现。

 

DOM5

 

标签增加了更多类型，如<article>、<nav>、<footer>等语义标签，时间、颜色、范围、组合框等<input>类型 ；响应拖拽、onhashchange、onerror等事件。这些特性html5-now通过Javascript进行了模拟。

 

 

 

应用示例

 

画图软件：http://mugtug.com/sketchpad/

 

 

本地化便签：http://htmlfive.appspot.com/static/stickies.html

 

 

反恐精英：http://www.benjoffe.com/code/demos/canvascape/

 

 

LOCOROCO：http://www.blobsallad.se/

 

 

飘动的3D旗帜：http://gyu.que.jp/jscloth/

 

 

 

连连看游戏：http://icefox.net/anigma/

 

 

打鼓机器：http://www.randomthink.net/labs/html5drums/

 

 

某动作游戏：http://www.chromeexperiments.com/detail/another-world-js/

 

 

分形图：http://onecm.com/projects/canopy/

 

 

打砖块：http://billmill.org/static/canvastutorial/

 

 

可以旋转的播放器：http://htmlfive.appspot.com/static/video.html

 

 

图表：http://www.rgraph.net/