2010年最受关注的HTML 5 应用

摘要

2010年是 HTML5 开始爆发的一年,HTML5 的各种新特性获得了越来越多浏览器开发商的支持,目前包括IE在内的所有主流浏览器对 HTML5 都具有良好的支持。我们对2010年里一些最引人注目的 HTML5 应用进行回顾,希望在新的一年里能有更多吸引人的应用出现。

header

HTML5 是HTML的下一代修订版本,目前还处于草案阶段。新版本的目标主要是确立一个在当前迅猛发展的互联网环境下能得到广泛支持的网络标准,对过去版本进行了大幅度的整理,废除了HTML中的表现元素,真正实现页面的内容、样式、动态效果的分离,同时引入了许多新的功能以适应现代的网络需求。

一般谈到 HTML5 时实际包括了HTML、CSS和JavaScript在内的一整套技术,试图减少浏览器在实现丰富性网络应用服务(Rich Internet Application)时对第三方插件的依赖,在浏览器框架内实现原生的丰富应用。

2010年是 HTML5 开始爆发的一年,在这一年里, HTML5 的各种新特性获得了越来越多浏览器开发商的支持,目前包括IE在内的所有主流浏览器对 HTML5 都具有良好的支持。

HTML5 的各种新特性日益被开发者发掘出来,使得新的网络应用可以实现很多过去只有用 Flash 才能实现的交互功能,包括原生的视频、音频播放,动画,文件拖放,本地存储,数据库,地理标签等功能, HTML5 的应用日渐开始成熟。

随着移动设备在人们网络生活中所占比例的日渐增大,Flash在移动平台的缺失和桌面平台依然没有改善的性能和安全问题,越来越多的开发者们也开始关注起 HTML5 的开发,Google开发中的Chrome Web Store也加速了 HTML5 的发展,互联网上涌现了很多优秀的 HTML5 应用,其中既包括游戏,也包括效率软件,图片工具,文档处理,社交等各种类型。

我们对2010年里一些最引人注目的 HTML5 应用进行一次回顾和总结,希望在新的一年里能有更多吸引人的应用出现。

一、新闻类

1、New York Times

NYTimes

纽约时报有两个 HTML5 的版本,其中之一是在Chrome Web Store 发布时一起发布的Web App, 另外一个则是测试了很久的Time Skimmer。两个版本的界面和功能都比较类似,Chrome Web App版在界面上明显更加精致,也具有更多功能。

类似于杂志的清爽界面对读者来说少了一份压迫感,使得读者不会有在传统新闻门户页面上存在的信息繁杂的感觉。浏览者在页面上完全可以只用键盘进行导航,而无需鼠标进行费劲的点击,简化了阅读与内容之间的步骤,另外很明显的是,这个界面对触摸进行了特别的优化,在支持的设备上,浏览者可以通过简单滑动或触摸进行阅读和交互。如果浏览者对默认的页面布局不是很满意,网站提供了十种不同风格和配色的页面,包括杂志风格、画报风格、文字风格等,总有一种能够让浏览者满意。同时,该应用也拥有离线功能,可以将文章本地保存,浏览者在暂时没有网络连接的情况下也能进行阅读。

2、NPR

NPR

NPR的 HTML5 应用也是随着Chrome Web Store一起亮相的,NPR Web App提供了新闻、广播节目和其他内容的便捷入口,浏览者可以方便的将广播节目加入播放列表,在浏览其他新闻条目的同时可以收听播放列表里的各个节目。其界面相比纽约时报更加偏重图像和音频,整体风格更加明快,在导航和播放方便也很方便。

二、游戏类

1、Pirate Love Daisies

Pirate Love Daisies

想必大家都玩过著名的植物大战僵尸,如果将植物换成海盗,僵尸换成雛菊会是什么样呢,Pirate Love Daisies就是答案。这是前不久推出的一个完全基于 HTML5 和 Javascript 的塔防游戏,被誉为目前最好的一款 HTML5 网页游戏,从画面的精致度,游戏的流畅度等方面都可以与其Flash的对手相抗衡,而在对系统资源的占用方面也具有其优势,不过由于各个浏览器对 HTML5 的支持度不同,目前在不同浏览器平台上表现还有一定差异。从这个小游戏里面可以看到 HTML5 技术在网页游戏方面的潜力。值得说的一点是,游戏的开发者GrantSkinner是业界知名的Flash开发者,这也可以看出业界技术风向标的转向。

2、Agent 008 Ball

Agent 008 Ball

这是一个鲜有人知的桌球游戏,游戏的目标是在规定时间内将尽量多的桌球击入洞中,游戏本身并不复杂,也只有一个关可玩,不过重点是游戏效果和桌面游戏已经比较接近,这个游戏相当于只是一个演示,但我们也可以看到未来HTML的网页游戏发展的前景。

三、媒体类

1、AviaryFeather

Aviary Feather

Aviary Feather是一款基于 HTML5 的在线图片处理工具,用户可以自己上传图片在Web App中进行各种编辑,包括翻转、调整大小、裁减、修红眼、抹除杂斑、调整色彩对比、绘制线条、输入文字等等,另外还包括了四种滤镜效果可以让用户简单的做出如Instagram那样效果的图片出来。

同时Aviary Feather支持嵌入到第三方网站,用户可以将编辑器嵌入到自己的网站使用,而不用到Aviary网站上使用。当然,相比专业的图片处理工具,这款Web App的功能是比较简单的,但是用户无需安装直接使用的便捷是显然的好处,而且随着 HTML5 的进一步发展,可以想见未来会有更强大的工具出现。

2、Mugtug

Mugtug

Mugtug是一款基于 HTML5 的在线图片编辑软件。其包括三个模块:Darkroom模块提供了全功能的图片处理功能,可以对图片的各种参数进行调整和剪裁;在Sketchpad模块里用户可以自行绘制和渲染图片,对Darkroom里处理过的图片进行进一步处理;社区功能可以让用户分享自己的图片并查看好友的分享。Mugtug整体都采用了HTML 5功能构架,功能十分全面。界面也十分美观。

3、Youtube,Vimeo,Youku,Tudou

这几个站点都利用了 HTML5 的视频播放功能,使得用户在没有Flash的情况下也能正常观看网络视频,这对于手机、平板电脑等没有Flash的设备来说尤为方便。但由于 HTML5 目前视频编码还未统一,目前在不同设备上的体验还不够一致。

Sublime Video

Sublime Video是一个有趣的产品,其本身是一个方便美观的 HTML5 视频播放器,网站主可以利用其实现在网站上实现视频的完全 HTML5 代码布置,而在用户浏览器不支持 HTML5 视频的情况下,页面上的视频则会自动调用Flash为用户播放,保证了最大的兼容性。同时,其 HTML5 播放器还具有很多特色功能,如视频进度的拖动、不同浏览器下的统一外观、无Cookie的音量控制、剩余时间查看、全窗口或全屏播放等。

四、社交类

1、Tweetdeck

Tweetdeck

TweetDeck的 HTML5 版也是和Chrome Web Store一起推出的,目前还只能在Chrome上使用,用 HTML5 对原先的Adobe Air应用进行了完全的重写,保留了所有的功能, Tweetdeck的Chrome Web App版还加入了浏览器原生的提醒功能,可以设置对各种更新进行提醒并直接进行相关的回复等操作。

2、Hootsuit

Hootsuit

Hootsuit也是比较受欢迎的一个第三方Twitter应用,以其多用户和多个列表同时呈现的功能和界面见长,最近推出的推出的新版Web App除了拥有Web版的功能外,还加入了一些特有的 HTML5 功能,包括利用浏览器的地理标签功能为发布的Tweet添加地理信息,利用本地存储技术加速应用的速度等等,官方也宣布将在未来为Web App添加更多特有的功能。

五、办公类

1、LucidChart

LucidChart

LucidChart是一个基于 HTML5 的功能完善的在线流程图绘制和协作应用,可以方便快速的实现流程图表的绘制,同时还可以和他人进行实时的流程图绘制和修改,所有的变动都会实时的同步,对于群组协作来说是很方便的工具。

2、Scribe

Scribe

Scribe是互联网上最流行的在线文档分享网站,今年五月开始,网站上的数百万份文档不再使用Flash播放,而是被转化为本地 HTML5 网页。这样这些文档不仅可以在没有Flash的谁被,如iPad上完美显示,而且还可以把文档的丰富字体和图片带到网页上,同时也便于对文档内容进行索引和搜索。

3、Springpad

Springpad

Springpad是一款免费的全功能跨平台在线笔记服务,支持传统的文字、图片资料的收集,同时还包含日程管理、待办事项、购物列表、书签等功能。最新的 HTML5 网页客户端在速度和界面方面都比过去版本有了较大进步,是Evernote之外一个理想的选择。

4、Gmail, Google Docs etc

Google的大量应用都广泛利用了 HTML5 技术,目前在Gmail和Google Docs中,文件上传都可以直接拖拽入浏览器进行,预计在2011年,Gmail和Google Docs都将实现以 HTML5 为基础的离线功能。

在这些应用中,我们发现了两个比较有意思的趋势,其一是很多 HTML5 的Web App都采用了和iPad应用类似的设计风格,平板对于整个互联网设计方面的影响可见一斑。

另外,Chrome Web Store的出现也吸引了不少优秀的 HTML5 应用的涌现,毕竟对于网络应用来说如何进行推广是一个大问题,Chrome Web Store如果发展的好确实对于Web App的发展会有较大的推动作用。

国内网站的缺失是一大遗憾,希望在新的一年里能看到国内开发者的优秀作品出现。

最新文章

极客公园

用极客视角,追踪你不可错过的科技圈.

极客之选

新鲜、有趣的硬件产品,第一时间为你呈现。

张鹏科技商业观察

聊科技,谈商业。