HTML5开发:原理与实现

<![CDATA[

在这篇文章中, W3C浏览器技术核心标准工作成员Mike Smith谈论了HTML5到底是什么,并给出了一些对开发人员有用的资源,可以让他们跟进不断演化的标准。

我们正处于Web平台更新换代的过程之中。HTML5通常被用来描述这一过程,尽管更新换代中的技术并不局限于HTML5标准所定义的特性。

我使用了“Web平台”(Web platform)这个术语,代指能被Web浏览器支持的一系列协议、格式以及APIs。开发者使用这些特性来构建时新的一些应用,这些应用支持社会交互,并且充分利用了设备的能力,比如照相功能、麦克风功能以及GPS功能。HTTP、TLS以及WebSockets是Web平台中的一部分协议;HTML、CSS以及Javascript是Web平台格式中的一些例子。Web平台中的APIs包括Geolocation API以及针对<canvas> 元素的2D drawing API等。

最终,如果一个特性能被广泛实现,并且开发人员经常使用它来创建稳定的用户体验,那么这个特性就成为了Web平台的一部分。World Wide Web Consortium (W3C)功不可没,它让股东们坐到一起,统一开发一些免费标准,并创建配套资源,如测试集以及验证程序。

标准作为一个共享协议来说,是非常有用的,但是Web平台包括大量不同成熟度的技术,这些技术并没有都标准化。当开发者使用这些技术的时候,就会遇到一些实际的问题了,其中包括:

  • 我该如何减少special-case code?
  • 哪些代码现在是足够稳定可以让我使用的?
  • 对于那些没有最新浏览器的用户,我该如何处理?

这些问题的答案随着时间发生变化,因此开发者已经制定了切实可行的解决方案,如fallback和“polyfills”(这将在稍后进一步解释)这些方案能让内容在老的浏览器以及最新的浏览器中都可用。在这篇文章中,我并没有关注HTML5标准的状态,而是探讨了一些有用资源,这些资源可用帮助开发者开始使用现在的开放Web平台技术(Open Web Platform technology)。这些资源阐明了使用HTML5的“原理与实现方法”,对标准进行了补充,并最终能加快部署。

platform.html5.org

对一个忙碌的开发人员来说,他该如何跟进最新的特性,了解什么fallbacks 以及、polyfills(如果有的话)是可以用的?我编辑了一个网站,platform.html5.org,它可以让你了解构成Web平台的最新技术。(它是由github repository支持的,我非常鼓励你来帮助维护这个站点,只需要使用forking the repo 就可以了,并发送更新请求)。

这个站点将技术进行了分类,如绘图和排版、多媒体以及存储。站点上的图标代表了每个技术的成熟度。绿色的小旗帜表示一个特性可以使用了。黄色闪电代表“需要谨慎使用”。然而,这些都只是很粗略的指示;要想真正了解这些特性,你需要点击后面的一些有用的链接,如下所示:

特别的,HTML5 Please site值得作进一步的评论。它是由H5BP  developer collective(HTML5 Boilerplate背后的开发者小组)创建的。它根据名字列出了各个特性,并对每个特性的成熟度做出了高屋建瓴的描述。它还展现了一个状态面板,其中显示了各个特性的状态信息(可以使用/小心使用/避免使用,use/caution/avoid)。在某些情况下,”caution” 和”use”关键字后附加了”with fallback” 或 “with polyfill”。在有”with fallback”的情况下,你可以扩大该面板查看究竟如何为该特性提供fallback。

polyfill 是指一段Javascript代码,作为一个特性的某种shim;也就是说,它模拟了一个将来的API,这个API为老的浏览器提供fallback功能。

HTML5 Please的站点管理者让任何人都可以很容易为这个站点做贡献,他们在每个面板上都提供了一个“编辑该信息”(”Edit this info”)的链接,让你可以创建页面内容的副本,并将其提交给该站点。(该机制是由a github repository支持的,任何人对内容的修改都会作为pull requests提交)。该站点的维护者将会对内容进行审查并合并内容。

有时候你希望能看到比HTML5 Please所提供的信息更详细的一些状态信息。例如,你也许想确切知道哪些浏览器支持某个特定的浏览器,以及每个浏览器的哪些版本支持它,或者在移动浏览器中,特性受到什么程度的支持,以及那些浏览器的OS版本是什么。这时候,你就需要查看When Can I Use…站点了。

When Can I Use是由Alexis Deveria维护的。他跟进大量特性的状态,并在新版本的浏览器发布时更新站点。如果有某种特性是你想要了解但When Can I Use站点上还没有的,你可以建议该站点加上

现在记录在When Can I Use上的每一个特性都有一个表,表中有一列是主流的桌面浏览器(IE, Firefox, Chrome, Safari以及Opera),一列是主流的移动浏览器(iOS Safari, Opera Mini, Opera Mobile以及 Android Browser),每一行是每个浏览器的版本号。和其他站点一样,用颜色标明了每个特定浏览器版本对一个特性的支持度(support/partial(部分支持), support/no(不支持), support/unknown(不确定是否支持))。

例如,可以看看 CSS Counters受到的支持程度。充满绿色条目的表说明该特性受到很好的支持。其他支持不是很好的特性是用红色标出的。

When Can I Use站点中的每个特性表都提供了一个”see-also”链接到相关特性的表,还有到第三方站点的链接,这些第三方站点提供了这些特性的使用信息,教会你如何使用这些特性进行开发。

MDN (Mozilla Developer Network)是platform.html5.org 和When Can I Use都加了链接的站点。可以将MDN看作”how can I use”特性使用指南。例如,如果你想要实现Web Workers,需要一些代码示例以及链接到有详细信息的资源,那么,MDN上就有个页面是关于 使用Web Workers的,它对于入门非常有帮助。

和HTML5 Please, When Can I Use以及platform.html5.org一样,MDN也是非常欢迎大家做贡献的,并让这个过程比其他站点更快捷简单:整个站点就是一个wiki,所以一旦你创建了一个账户,你就能编辑任何页面。

测试集(Test Suites)

<

p >对于评估一个特性的成熟度来说,没有什么方法比拥有一个完整的测试集更好了。你可以自己运行测试集,并分析结果。对于Web]
]>