2011年回顾:改变游戏的20个HTML5网站

英文原文:2011 in review: 20 HTML5 sites that changed the game,编译:webapptrend

今年HTML5确实给我们带来了很大的冲击。HTML5 Doctors,Oli Studholme评选出了20个最佳网站,它们涵盖了语义、音频、客户端web apps、canvas以及SVG和WebGL,这些网站预示了未来web的发展方向。

对HTML5和web来说,今年是收获丰富的一年。HTML5在不断成熟,今年5月HTML5进入了Last Call阶段,并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能,还加入了诸如WebVTT这样的一些新功能。在浏览器上的进展也在逐步推进,目前正与五大提供商积极推进相关工作。还有很多的工作需要去做!

在内容方面,你能深切感受到这一年似乎真的就是HTML5的一年,CSS3和JavaScript web stack的时代已经到来。HTML5现在已经成为许多开发者的首选,有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native web上实现”。

2011年回顾:改变游戏的20个HTML5网站

语义

1. HTML5的Web开发人员版本

HTML5的Web开发人员版本列举在这可能有点奇怪,因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解,因为它是为web浏览器开发人员编写的,而不是网站。但是HTML5标准出人意外的具有非常好的可读性,并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历,或许HTML5的标准会让你喜出望外。

HTML5的Web开发人员版本是由Ben Schwarz 和同行一起制定的,诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改,更适合web开发人员阅读。除了印刷风格具有更好地可读性外,还提供了许多HTML5的附件。它使用了Offline Cache,能够支持浏览器使用<progress> 和AppCache API。search-as-you-type功能也支持离线访问,搜索框使用type="search"

它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目,并且可以在GitHub上找到所有的资源。web开发人员能够借助这些资源开发各种HTML5应用。

2011年回顾:改变游戏的20个HTML5网站2. Move the Web Forward

Move the Web Forward是由Mat MarquisAaron ForsanderConnor MontgomeryPaul Irish,Divya ManianNicolas GallagherAddy Osmani和一些朋友一起编写的,它告诉人们“如何按照自己的理想打造一个了不起的web”。 里面列举了各种你能够用来优化web的方法。

网站陈列了HTML5代码,使用data-* 属性能够实现Twitter中的hashtag搜索功能。里面还有一些方便阅读但是没有实际意义的申明:

2011年回顾:改变游戏的20个HTML5网站<!DOCTYPE html是一个重要的位,可以触发标准模式。)总之,所有的这些资源都诣在帮助开发者打造更加优秀的HTML5网站,Move the Web Forward中的信息是非常有用的。Beyond the Blue Beanie?Stephanie (Sullivan) Rewis评论说:“俗话说得好,众人拾柴火焰高。有这么多人参与,必然能够推动web快速发展。现在大家应该团结起来,让web的风潮来得更猛烈些!”在Addy OsmaniThe Smashing Guide To Moving The Web Forward中有更多相关讯息。

2011年回顾:改变游戏的20个HTML5网站3. Boston Globe

Boston Globe是一个典型的完美商业“响应web设计”网站。遵循移动优先的原则,即使是在不支持媒体库查询或是JavaScript的老版本浏览器上,它也依然能够正常运行。Filament Group的Scott Jeh表示“网站的所有功能都特意被设计为不依赖JavaScript,但是在支持JavaScript的浏览器上,它可以利用各种丰富的JavaScript驱动接口提升应用的功能”。

Scott还指出“我们选择HTLM5主要是出于几点考虑。其中最重要的一点就是,它是面向未来友好型的协议,它提供了丰富的功能能够满足我们的各种需要。例如,我们大量使用了data-属性,用来配置行为选项或是融入内容的增强功能,当然,HTML5能够使用新的语义元素代替以往的div/p/span,这些元素非常有用,对我们很有帮助”。

2011年回顾:改变游戏的20个HTML5网站Audio

4. Anatomy of a mashup

Anatomy of a mashup中融入了他对音乐的热爱,DJing,datavis以及很酷的web技术。

混搭的Definitive Daft Punk音频利用了<audio> API和<canvas>,以及CSS3的变形和效果转换功能,将音乐变得可见。Cameron表示“所有的波形和光谱都是根据音乐实时变化的,这样你就能够在你的浏览器上看到音乐的变化了!”未来证明Flash还有市场,Cameron使用了一个自定义的Flash app采集音频数据。关于HTML5,Cameron表示“我热衷于HTML5开发最重要的原因就是开发的直接性;我能够编辑一个JavaScript文件,刷新一下,我立即就能看到修改的效果。不需要编译,也无需额外的插件。一切就是这么简单直接。”

2011年回顾:改变游戏的20个HTML5网站5. SoundCloud

SoundCloud 提供了声音录制和共享服务,大受艺术家和DJ们的欢迎,他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web app上通常用Flash播放音频,而现在还可以选择使用HTML5 Audio。这样SoundCloud还能在iPad上运行,最近发布了一个基于HTML5的工具

除了使用<audio> 和 Audio API外,他们还在许多地方使用了data-*属性,以及Canvas,SVG和LocalStorage。Matas Petrikas表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择,相比于Flash,它极大的减轻了CPU的占用率”。不幸的是,还是有一些用户对此嗤之以鼻(虽然确实存在一些客观原因),不愿意使用HTML5的新元素和属性(虽然这一现象正在逐渐改变)。

然而,HTML5音频并不是唯一的选择,正如Matas所说的“HTML5 Media API在web浏览器中的实现状况不佳”。为了解决这个问题,Tomás SenartYves Van Goethem做了一套“Are We Playing Yet?”的音频测试工具。Matas表示“大家的反应非常棒,几乎所有的浏览器提供商都参与了进来,我们对2012年充满信心!”

移动设备上还存在一些其他的问题,如:声音录制问题,缺乏广泛的position:fixed 的UI支持,移动浏览器的更新不够及时——Android WebKit正逐渐变为现代的IE6。因此,SoundCloud大力提升了它在iOS和Android上的native apps。Matas说“我们希望能够尽可能为用户提供最好的体验,但现在移动浏览器还没能跟上”。但是他未来仍然充满信心:“我们非常看好即将推出的设备API(getUserMedia),我们希望将来能够不依赖Flash直接在浏览器上处理声音”。

虽然目前的规范和浏览器还存在这样或是那样的问题,但是毫无疑问,这些问题肯定会很快得到处理。比如Mobile Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题,但Matas认为,与Flash相比,“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用,而最终的用户也会从中获益!”

2011年回顾:改变游戏的20个HTML5网站

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of Steel由两个唱片和一个混音器构成,可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5 Audio,在不支持的环境中它会通过Scott的JavaScript库SoundManager 2使用Flash替代。它还使用了一些其他的有趣元素,包括使用<input type="range"> 实现唱片的平滑转换和本地存储,使用CSS3提升应用的视觉效果。Scott的The Wheels Of Steel: An Ode To Turntables (HTML)介绍了更多细节问题。里面说到“网页能够实现优雅的降级,即使在不支持JavaScript的环境中,应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清,这就是网站开发者的失职”。

2011年回顾:改变游戏的20个HTML5网站客户端web apps

7. Dabblet

Dabblet 席卷了Lea Verou的最新工具——一个完全在客户端运行的CSS sandbox。

它大量采用了HTML5和相关工具,包括CORS (cross-origin resource sharin),localStorage,History API,Selectors API,data-*,contenteditable和内联的SVG。Lea正考虑未来还要使用Drag & Drop API嵌入资源,并利用Offline API,但据说“offline API相当麻烦”。她曾尝试使用Web Workers凸显异步语法,但是这使得应用变得更慢了。她还想使用UndoManager实现“dabblet的代码的Undo/Redo功能”

它还使用了Lea的具有争议的-prefix-free库自动处理CSS vendor prefixes的问题。Lea正考虑提供一个no-prefix-free选择,或是增加一些类似LESS的元素。虽然Eric Meyer曾极力为vendor prefixes辩护,但Divya ManianHenri Sivonen,和Lea都表示目前vendor prefixes使用(赋值,粘贴)存在着问题。这不仅仅是HTML5的问题,它还关系到了我们应该如何工作这类原则性的问题,CSS Working Group更青睐于使用www-风格的输入

因为目标人群是web开发者,所以Lea并不担心向后兼容性的问题,“对技术不太熟悉的用户可能会继续使用IE访问网站,但是在IE上也能使用HTML5,只是需要一些辅助工具并采取降级措施。”关于HTML5,Lea表示“对于开发者来说,HTML5意味着三件事:速度,通用性,以及开放性。开发工作正变得越来越容易了”。

2011年回顾:改变游戏的20个HTML5网站8. Font Dragr

Ryan Seddon开发的font dragr帮助开发者在浏览器中预览自定义字体,用户只用将字体文件拖入font dragr或是在列表中选择一个字体就能直接看到字体的样式了。更棒的是,使用一个CSS选择器选中相应的字体,你就可以用font dragr书签改变任何一个网站的字体了。用户可以快速使用 @font-face 预览和比较各种字体,甚至无需修改代码。

它使用了HTML5的最新元素:Drag和Drop API,the History API,contenteditable属性,以及localStorage。它还准备支持Google Web Fonts。Ryan表示localStorage用于“在交互式请求中获取视图html,在DOM中替换它,并在localStorage中缓存视图HTML”。关于HTML5,Ryan只是简单地表示“它还在计划中”。

 

2011年回顾:改变游戏的20个HTML5网站SVG

虽然这不是HTML5标准的一部分,但是许多很棒的网站都大量使用了这个矢量绘图标准

9. Slavery Footprint

Slavery Footprint是一个互动的问卷调查,用于测试“你拥有多少个奴隶?”,帮助人们提升现代的奴隶意识。

它在JavaScript中使用了HTML5元素、GeoLocation和SVG延迟下载以及制作动画内容。尽管在现代的浏览器中这个网站效率很高并且页面相当精致,但是它并没能提供最好的用户体验。因为在不支持JavaScript的浏览器中,这个调查几乎无法展开,并且关于奴隶的信息(“What? Slaves work for me?”)是一些服务访问的文本图片。或许它一开始就没有考虑“内容优先”的原则,Slavery Footprint与生俱来就有一些缺陷,比如在对旧版本浏览器的支持上就存在问题——他的客户端是USA State Department,他们还在使用IE7。尽管存在这些问题,但是它的确在提升大家对现代奴隶的认识方面取得了巨大的成功。

2011年回顾:改变游戏的20个HTML5网站10. Kern Type

Kern Type是Mark MacKay开发的一个调整字体距离的小游戏,它很奇怪地容易让人上瘾。你可以调整一个单词中各个字母的距离,程序会根据你的表现给出平分。每个单词的字体也有所不同。

除了使用JavaScript library Raphaël 的SVG设计字体外,它还使用了data-* 属性设置字体数据(初始位置信息以及水平向量),使用了Raphaël的 drag-n-drop增加交互性。

Mark表示“最初我并没有打算支持平板电脑。当Kern Type几近完成的时候,我惊奇地发现我能在iPad上打开它,并且运行得相当不错:功能上几乎没有任何损失,动画也相当流畅,拖拉动作都执行得很好。”他放弃了Raphaël drag-and-drop,因为如果继续使用它,那必须在Raphaël和自定义的javascript之间定义一个接口。在访问对象的时候使用HTML5的drag-and-drop,这些都是相当麻烦的。

当你完成了这个游戏以后,你可以继续尝试挑战它的姊妹篇Shape Type,继续学习for Method of Action的第一篇“Design for programmers”,你会发现这两个游戏都做很好地到了这一点。

2011年回顾:改变游戏的20个HTML5网站11. SVG Girl

SVG Girl是一个为IE9版本开发的演示网站。它展示了IE9强大的SVG功能,里面使用日式风格的动画形式,每秒运行10个SVG帧,并且通过<audio> 元素和<video>为网站的增添声音。

它是由jsdo.it的核心成员开发的,jsdo.it是一个开发、分享、分支JavaScript的社交编码社区网站。Kayac是网站的负责人,他形容这个团体为“全日本最好玩的社区”(正如他们的‘data-*’和SVG-powered团队的网页所看到的)。

目前还没有发现日本的在校女生在使用Windows Phone 7.5体验这种转变,但这只是时间的问题。还有一个有趣的日本案例——The Shodo,它是一个基于<canvas>的传统书法web app,里面也使用了SVG。

2011年回顾:改变游戏的20个HTML5网站Canvas

12. Peoplemovin

PeoplemovinCarlo Zapponi开发的一个个人项目,网站中使用了大量的图表(受到Sankey图表的启发)来展示世界各地的移民情况。全世界有超过3%的人口,也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以方便地查到各个国家的移民状况,可以非常直观地看到各种统计数据。

Carlo说到“这个网站的基础元素就是canvas,所有的交互和可视化都是用canvas实现的,并且能够方便地勾画出各个国家之间的连接路线。在网站中还采用了CSS3实现一些圆角、阴影、光效和字体的风格设置。”它不仅能在最新的浏览器上运行,还能在智能手机和平板电脑上运行。Carlo最后使用了一个自定义的开源工具包实现了这些效果,他将这个工具命名为DataMovin,并打算后期发布这个工具(在此期间会对代码做进一步的检查)。

Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个滋生创造性的平台。你有了一个非常疯狂的新想法?那太好了!你能以前所未有的速度将这个想法在浏览器中实现,而不用另起炉灶。”

2011年回顾:改变游戏的20个HTML5网站

13. Rally Interactive

Rally Interactive网站使用canvas开发了一些非常有创意的东西,它使用canvas完成网站的交互功能。选中网页中的三角形后图形会做出反应,当点击它以后,也会出现动画,以前实现这些动画可能需要加入类似Flash这类的插件。

正如Wes Pearce所说的“如果没有HTML5 canvas,我们的网站根本就不可能达到我们想要的效果。最新的浏览器几乎都支持canvas。我们还充分利用了最新的History API,它的实现出人意料的高效。”

2011年回顾:改变游戏的20个HTML5网站14. Up and Down the Ladder of Abstraction

Bret Victor开发的Up and Down the Ladder of Abstraction为如何使用交互提供了一个很好的示范。

在示例中加入了<canvas>实例,让你能够通过交互的方式了解各个点。作者认为这种方式能够应用到未来的教科书中,使用ePUB 3和HTML替代原来的PDF,ePUB 2和 Kindle Format 8。

2011年回顾:改变游戏的20个HTML5网站15. Sumon

Sumon 是一个细节设计得相当不错的加法小游戏。Ludei最初开发这个游戏的目的是想用它展示他们的CAAT框架,里面可以演示Canvas,WebGL和DOM/CSS。

从2010年推出Agent 008 BallPirates Love Daisies开始,将canvas和audio结合起来就成为了一种倍受推崇的开发方法——能够开发出在浏览器中运行的各种有趣的小游戏。它们能够在iTunes,Chrome和Android上访问,包括Facebook游戏在内的许多浏览器游戏都是基于同一个代码库。这有点像是native apps。

Iker Jamardo表示“JavaScript和HTML5非常适合开发游戏。我们发现它的唯一缺点就是在移动设备浏览器上性能不够理想。”但Ludei相信这一点一定能够得到解决,他们开发的Cocoon and CocoonJS frameworks在移动设备上的性能与native apps性能相当。Iker总结到“我们都相信JavaScript和HTML5是一个非常理想的游戏开发和跨平台开发工具”。

2011年回顾:改变游戏的20个HTML5网站WebGL

HTML5标准又将WebGL单独分离出来了——它是一组单独的标准API,用来在<canvas>中加入3D图形。本节不会具体介绍其中的信息,而仅仅是给出一些示例:

16. HelloRacer

HelloEnjoy开发的HelloRacer,是一个可驾驶的F1赛车。

2011年回顾:改变游戏的20个HTML5网站17. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech demo是一个“有规则的8bit扩散系统,里面加入了波形动画和像素衰退效果”。看起来相当迷幻。

2011年回顾:改变游戏的20个HTML5网站18. ROME “3 Dreams of Black”

ROME “3 Dreams of Black”是Chris Milk和朋友一起开发的一个音乐录音带交互网站,里面有Danger Mouse,Danielle Luppi和Norah Jones的音乐。

2011年回顾:改变游戏的20个HTML5网站还有记录电影幕后技术的演示和视频也是不容错过的。

Dev.Opera的“An introduction to WebGL”(以及“Porting 3D graphics to the web”,都是由Luz Caballero编写的)中有更多关于WebGL的介绍,里面还有许多精彩的示例。Opera还预备发布一个更加全面的WebGL教程,并且即将面世。

将来/现在

Web中还加入了许多了不起的元素。WebRTC (实时通讯) 标准 (getUserMedia)就是其中之一。它能够实现“交换实时的交互多媒体信息,其中包括音频和视频”,常被用于浏览器上的视频聊天。Opera还尝试在桌面和移动设备的开发工具中加入对getUserMedia 的支持

19. 浏览器上的视频聊天

Ericsson Labs已经在这个方面开发了一段时间了,并且提供了一个可下载的WebKit库(还有更多相关的信息和教材)

 

2011年回顾:改变游戏的20个HTML5网站20.人脸检测/胡须示例

Opera还试图提供对WebRTC以及DeviceOrientation Event标准的支持,自定义了一个Opera Labs Camera and PagesRich Tibbett使用这两个标准编写了一个Native网络摄像头驱动和取向事件,并且用WebRTC实现了一个在在线视频中检测人脸的演示示例。如果这还不够,你还可以在浏览器中视频添加一个胡须。

2011年回顾:改变游戏的20个HTML5网站

总结

你可能已经发现了,虽然这里的网站是按照HTML5的技术进行分类的,但是他们不止使用了一种技术。尽管HTML5标准(和其他的web技术标准,比如SVG和WebGL)中还有一些内容不够完善,但是它里面确实有许多你现在就能用得上的好技术。要想了解HTML5的最新进展和更多讯息,可以查看HTML5 DoctorW3C’s Planet HTML5和Twitter @HTML5

希望你能够回到文章开篇介绍的那两个网站,继续推动HTML5的前景并使它更加完善!

在2011年,有哪些HTML5技术影响到了你?

 

收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部