`
t225com
  • 浏览: 660437 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

今年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上实现”。

语义

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应用。

2.Move the Web Forward

Move the Web Forward是由Mat Marquis,Aaron Forsander,Connor Montgomery,Paul Irish,Divya Manian,Nicolas Gallagher,Addy Osmani和一些朋友一起编写的，它告诉人们“如何按照自己的理想打造一个了不起的web”。 里面列举了各种你能够用来优化web的方法。

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

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

3. Boston Globe

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

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

Audio

4.Anatomy of a mashup

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

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

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 Senart和Yves 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版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用，而最终的用户也会从中获益！”

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网页就无法正常显示或变得模糊不清，这就是网站开发者的失职”。

客户端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 Manian，Henri Sivonen,和Lea都表示目前vendor prefixes使用（赋值，粘贴）存在着问题。这不仅仅是HTML5的问题，它还关系到了我们应该如何工作这类原则性的问题，CSS Working Group更青睐于使用www-风格的输入。

因为目标人群是web开发者，所以Lea并不担心向后兼容性的问题，“对技术不太熟悉的用户可能会继续使用IE访问网站，但是在IE上也能使用HTML5，只是需要一些辅助工具并采取降级措施。”关于HTML5，Lea表示“对于开发者来说，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只是简单地表示“它还在计划中”。

SVG

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

9. Slavery Footprint

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

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

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，继续学习forMethod of Action的第一篇“Design for programmers”，你会发现这两个游戏都做很好地到了这一点。

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。

Canvas

12. Peoplemovin

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

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

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

13. Rally Interactive

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

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

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。

15. Sumon

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

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

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

WebGL

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

16. HelloRacer

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

17. WebGL Shader — Travelling wave fronts tech demo

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

18. ROME “3 Dreams of Black”

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

还有记录电影幕后技术的演示和视频也是不容错过的。

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库（还有更多相关的信息和教材）。

20.人脸检测/胡须示例

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

总结

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

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

在2011年，有哪些HTML5技术影响到了你？

文章来源：2011 in review: 20 HTML5 sites that changed the game

译文来源：http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客，关注WebApp前瞻和实践，以及智能浏览器发展

请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的：193775364



分享到：
| 叩开Apple设计奖项大门的7条设计建议
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics