Web程序员们,你准备好迎接HTML5了吗?

标签: web 程序员 html5 | 发表时间:2010-09-07 01:44 | 作者:dangjian 小伟
出处:http://www.cnblogs.com/


作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37

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">
你的浏览器是老古董了,不支持canvas,扔了吧.
</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,多媒体音频和视频

<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 的页面

HTML5 Video Player
YouTube - Broadcast Yourself(哦,对不起,这是个不存在的网站)

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应用程序的易用性和可移植性。

评论: 37 查看评论 发表评论

程序员找工作,就在博客园


最新新闻:
· 环球企业家:亚马逊出手(2010-09-07 21:39)
· Google 代码搜索升级,新增 Chromium 订制版(2010-09-07 21:31)
· 福布斯:3PAR的真正价值(2010-09-07 21:20)
· 原谷歌中国高管陶宁已加盟创新工场(2010-09-07 21:19)
· 谷歌Chrome 6提速17% 仍逊于Opera和Safari(2010-09-07 21:18)

编辑推荐:博客园电子期刊2010年8月刊发布

网站导航:博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

相关 [web 程序员 html5] 推荐:

Web程序员们,你准备好迎接HTML5了吗?

- 小伟 - 博客园-首页原创精华区
作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37. HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件,也简化了原来需要大量JS才能达到的效果.

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

Web 开发程序员招聘

- GLORY - 云风的 BLOG
前两天在 blog 里提到了 web 前端程序员招聘的消息 , 结果这两天收到了好多热情洋溢的 email , 真是受宠若惊. 上次说的不详细,其实也没完全想好,只是之前在讨论公司架构的时候提到了这个岗位. 昨天晚上又讨论了一下,把需求细化了一些. 我个人,作为程序员,对 web 前端开发领域没有太多了解,很惭愧.

[程序员] Web开发入门(原创)

- Xinyu - V2EX
这篇文章最早发在水木web开发和IT业界板,都加精了. 原文在我的博客上,不定期会更新下内容. 顺便说下我创建的喜分分 http://www.xifenfen.com 也公测了,是一个个性化阅读,分享与收藏社区. 我读过的相关书籍发布在豆列(已更新):程序员的自我修养 http://book.douban.com/doulist/1268022/.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.