Web程序员们，你准备好迎接HTML5了吗？

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

html5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的html将会让浏览器不必再依赖flash、quicktime、silverlight等插件,也简化了原来需要大量js才能达到的效果。虽然html5还在讨论过程中,但是其优越的特性已经得到了大家的认可,各大浏览器厂商,一些知名的内容发布网站也都是积极地推动, 尤其是即将发布的ie9会完全支持html5。作为web开发人员的我们,需要做的是:如何把html5转化为各种web应用,如何做到现有的web应用过渡到html5。下面将介绍作为web开发人员必须知道的html5特性,以及各特性可能的应用场景。

1. 用canvas绘制图形

不用怀疑,这张3d的图画就是用canvas画出来的。

canvas的出现颠覆了传统在web应用中画图的方式,传统的画图方式有在服务器端先画好图片,再把图片发到浏览器中,或者用flash,还有用第三方插件。但是这些方法都不是原生的html, html5 canvas提供了通过javascript绘制图形的方法,方法简单但是功能强大,作为开发工程师可以使用canvas api随心所欲地控制图画。

点击这里查看canvas的api:canvas api

创建一个canvas元素非常简单:

canvas id="mycanvas" width="300" height="200">br>

你的浏览器是老古董了,不支持canvas,扔了吧.br>canvas>

点击这里查看一个canvas显示的helloworld:canvas-helloworld

开发人员开发过程中需要注意的是:为了javascript中能应用canvas对象,需要给元素设置id;通常也要设置其高度和宽度;为了网站的友好性,需要给元素中添加不支持的文字说明,在不支持canvas的浏览器中给用户提醒。

canvas是html5中最让人期待的特性之一,目前大部分的web浏览器的支持(chrome,firefox,safari,opera支持,ie8不支持),canvas可以应用于游戏设计、增强图形用户界面。

下面是一些非常cool的canvas应用:

非常cool的游戏应用:best html5 canvas games

令人惊讶的canvas动画效果:8 simply amazing html5 canvas and javascript animations

2. 多媒体音频和视频

和是首批添加到heml5规范中的标记。它们的加入使得web浏览器能够以一种更方便的方式来处理音频和视频文件,结束了在web浏览器中安装播放插件的历史。比较令人头疼的是,各大浏览器厂商对音频和视频格式有重大的分歧,firefox坚持将开放的ogg标准,而safari则希望是mp3和mp4的标准,这就造成了我们开发过程中需要提供多个版本的音频和视频文件来兼容浏览器。

下图中可以看到各大浏览器和多媒体分享站点支持的格式:

目前浏览器对音频文件的支持情况:

目前浏览器对视频文件的支持:

点击这里查看audio和video的属性:html5 audiohtml5 video

创建audio和vedio元素:

audio controls="controls">br>

source src="song.ogg" type="audio/ogg" />br>source src="song.mp3" type="audio/mpeg" />br>

您的浏览器不支持音频标签!br>audio>

video width="320" height="240" controls="controls">br>

source src="movie.ogg" type="video/ogg" />br>source src="movie.mp4" type="video/mp4" />br>

您的浏览器不支持视频标签!br>video>

点击这里查看音频和视频标签在浏览器中的效果:audio - vedio

就开发者而言,目前的情况是,我们需要准备多个版本的音频和视频,并把文件路径都添加到audio和vedio中,web浏览器会跳过不支持的格式,另外,最好添加针对不支持audio和vedio的浏览器的文字提示或者其他多媒体播放方式。

audio和vedio是两个简单而强大的标签,目前国内外已经有多个多媒体分享网站开始支持或测试html5。

如下是一些html5 vedio体验资源:

video showcase from apple

google 联合arcade fire 推出了一个 html5 互动电影: the wilderness downtown,点击这里可以进入其在 chrome experiment 的页面

html5 video player

3. web存储

随着web应用的发展,需要在客户端存储的场景越来越多,传统的客户端存储方式有cookie、firefox下有globalstorage、flash在插件的支持下有其自己的存储方式,但是这几种方式都有其局限性(安全性和兼容性)。html5提供的在客户端存储方式有:web database和web storage,web database适应与客户端复杂数据的存储,其标准还不成熟,浏览器的支持也很有限,需要web开发人员进一步的关注,假如存储的是简单的数据,则可以使用web storage方式,不占用带宽,并且得到了主流浏览器的支持,包括ie8。

web存储有两种方式:localstorage和sessionstorage,参考这里查看详细定义,两者的区别简单来说,localstorage可以永久保存数据,也就是说关闭浏览器,下次打开浏览器还能取得存储的数据,而sessionstorage只在当前的会话中可用。

下面的例子演示统计用户访问网站的次数:

script type="text/javascript">

if (typeof(localstorage) == "undefined") {document.write("你的浏览器不支持web存储");

} else {if (localstorage.pagecount){

localstorage.pagecount=number(localstorage.pagecount) +1;}

else{localstorage.pagecount=1;

}document.write("您已经光临本站 "+ localstorage.pagecount + " 次了.");

}script>

点击这里查看运行效果:demo

开发中需要注意的是,web storage有安全方面的权限的,不要在其中存储私密的数据, 另外,这个存储的数据是不能跨浏览器读取的,也就是说用一种浏览器打开站点保存的数据,用其他浏览器是取不到的。

尽管web存储有这样的缺陷,但是这个特性使得应用程序在离线状态下也可以正常工作,当程序需要处理大量的数据时,可以避免数据频繁地在客户端和服务器端的往来,对移动设备来说,可以极大地减少流量的消耗。

这里有一篇很好的文章介绍web存储:web storage全解析

4. 其他的简化了开发的html5特性

一些常用输入类型:email,url,number,date pickers等;

一些标准属性:contenteditable 等;

一些input属性:placeholder,required,autofocus,min,max,step。

这里推荐两篇介绍这些html5特性的文章,请参考:你必须知道的28个html5特征、窍门和技术和给网页设计师的30个html5学习资源

以上这些html5特性是目前浏览器支持较好的特性,也是关注度非常高的html5特性,本文是从一个web开发人员的角度来理解html5,目的是希望有更多的web开发人员能尽快地融入html5的开发中来,最近优酷已经开始应用html5和http live streaming技术,让更多的用户可以在移动平台分享多媒体,这对国内的html5的推广起到了积极的作用,微软承诺ie9将全面支持html5,这对html5的推广是一个振奋人心的消息。可以预见,未来几年html5将快速地发展,作为web开发人员,我们更应该尽快熟悉html5的各种特性,在项目开发过程中也应该更多考虑如何利用html5的特性加强web应用程序的易用性和可移植性。

原文链接:http://www.cnblogs.com/dangjian/archive/2010/09/07/1820241.html

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