|
|
| 行业新闻 |
| Web程序员们，你准备好迎接HTML5了吗？ |
HTML5作为下一代的web开发标准，其特性已经慢慢地出现在主流的浏览器中，这种新的HTML将会让浏览器不必再依赖Flash、 QuickTime、Silverlight等插件，也简化了原来需要大量JS才能达到的效果。虽然HTML5还在讨论过程中，但是其优越的特性已经得到了大家的认可，各大浏览器厂商，一些知名的内容发布网站也都是积极地推动， 尤其是即将发布的IE9会完全支持HTML5。作为Web开发人员的我们，需要做的是：如何把HTML5转化为各种Web应用，如何做到现有的Web应用过渡到HTML5。下面将介绍作为Web开发人员必须知道的HTML5特性，以及各特性可能的应用场景。
1， 用Canvas绘制图形
Canvas的出现颠覆了传统在Web应用中画图的方式，传统的画图方式有在服务器端先画好图片，再把图片发到浏览器中，或者用Flash，还有用第三方插件。但是这些方法都不是原生的HTML， HTML5 canvas提供了通过javascript绘制图形的方法，方法简单但是功能强大，作为开发工程师可以使用canvas API随心所欲地控制图画。
2，多媒体音频和视频
<audio>和<video>是首批添加到HEML5规范中的标记。它们的加入使得web浏览器能够以一种更方便的方式来处理音频和视频文件，结束了在web浏览器中安装播放插件的历史。比较令人头疼的是，各大浏览器厂商对音频和视频格式有重大的分歧，Firefox坚持将开放的ogg标准，而Safari则希望是MP3和MP4的标准，这就造成了我们开发过程中需要提供多个版本的音频和视频文件来兼容浏览器。
目前浏览器对音频文件的支持情况：
Format IE 8 Firefox 3.6 Opera 10.5 Chrome 5.0 Safari 5.0
Ogg Vorbis No Yes Yes Yes No
MP3 No No No Yes Yes
Wav No Yes Yes No Yes
目前浏览器对视频文件的支持：
Format IE 8 Firefox 3.6 Opera 10.5 Chrome 5.0 Safari 5.0
Ogg No Yes Yes Yes No
MPEG 4 No No No Yes Yes
点击这里查看audio和video的属性：HTML5 Audio HTML5 Video
创建audio和vedio元素：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
您的浏览器不支持音频标签！
</audio>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
您的浏览器不支持视频标签！
</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 的页面。
3，Web存储
随着Web应用的发展，需要在客户端存储的场景越来越多，传统的客户端存储方式有cookie、Firefox下有globalStorage、Flash在插件的支持下有其自己的存储方式，但是这几种方式都有其局限性（安全性和兼容性）。HTML5提供的在客户端存储方式有：Web Database和Web storage，Web Database适应与客户端复杂数据的存储，其标准还不成熟，浏览器的支持也很有限，需要Web开发人员进一步的关注，假如存储的是简单的数据，则可以使用Web storage方式，不占用带宽，并且得到了主流浏览器的支持，包括IE8。
Web存储有两种方式：localStorage和sessionStorage，参考这里查看详细定义，两者的区别简单来说，localStorage可以永久保存数据，也就是说关闭浏览器，下次打开浏览器还能取得存储的数据，而sessionStorage只在当前的会话中可用。
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应用程序的易用性和可移植性。 |
| 发布时间：2015-06-19 15:47:09 |
点击率：0 |
「返回上一页」 |
|
|
|
