HTML5时代,Ajax大行其道,Flash、SilverLight、Gears、JavaFX终结?

作者Kuma 文章分类 分类:About Codes 文章评论 4条评论 阅读次数 已被围观 3499

        最近HTML5吵得沸沸扬扬,据说HTML5标准应用后,构建RIA应用易如反掌,例如视频支持、音频支持、色彩渲染、3D应用、网页游戏等等都可以轻松实现,个人对HTML5持谨慎态度,有点小恐慌,也有点小期待。

        下面转载一篇描写HTML5的文章:

GoogleMozillaApple 等组织的努力下,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-now Javascript库会根据浏览器的不同 提供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/


原文链接:http://www.javaeye.com/topic/603639

分类:About Codes
标签: ajax html5 JavaScript

通告: http://mouselife.net/tb.php?sc=e80ab8&id=99

【上一篇】开始上课了
【下一篇】有点迷茫

评论:

  1. [回复]Mucid发表于 2010-05-30 07:11
    看来到时候因该直接屏蔽IE了
  2. [回复]奇遇发表于 2010-02-27 16:55
    还是一堆红XX
    • [回复]Kuma发表于 2010-02-27 17:57
      @奇遇:红XX的时候就看文字吧,哈哈
  3. [回复]天成发表于 2010-02-27 11:04
    (⊙o⊙)哦我有点+_+了,弄的东东就是不同呀
    • [回复]Kuma发表于 2010-02-27 12:06
      @天成:+_+是什么意思?
  4. [回复]chuaner发表于 2010-02-27 05:10
    友情链接
    贵站链接已经做好
    本站链接
    部落IT
    http://buluoit.com
    描述
    一个IT者的点点滴滴

发表评论: