体验最新的HTML5技术

作者:Cameron Laird

尽管很多关于 HTML5 的文章都隐藏了这一点,但是 HTML5 更多的是一系列项目,而非完备的单一标准,至少现在如此。HTML5 是多种技术的集合,其中大多数技术都在不断发展。早在 Web 开发社区认识到 HTML4 和关联的 XHTML 有很多不足之处时人们便已开始酝酿 HTML5,这些不足之处包括从小小的句法不连贯到对多媒体演示的支持不足。HTML5 旨在解决广泛的缺陷问题。然而,为了尽快取得最大的进步,HTML5 被分成多个小部分进行标准化:首先是较简单、争议较少的部分,如新的输入定义,然后是更复杂(更有争议性的)的部分,如 WebSockets 和视频。

如果您是 Web 开发人员,希望采用新兴标准进行试验,则需要可靠指导告诉您什么最适合您的网站。

稳定的HTML5规范

首先,您应该将稳定的技术和新兴技术分开。最稳定且可用于网站的三个规范是GeolocationCanvasSVG。像 Chrome、Internet Explorer 9 和 Firefox 等现代浏览器都支持这些规范。以下网站正在使用这些技术:

  1. World's Biggest Pacman
  2. Disney Tron Legacy
  3. The Killers Music
  4. HTML5 Web Camps

或者阅读关于如何为您的网站创建它们的一些技术文章,如:

  1. HTML5 Behind the Scenes of Disney Tron Legacy
  2. How to Create a Location-Aware Page
  3. How to Use Canvas to Create Games

其次,再次退回到将 HTML5 作为一个整体的广泛视图,并且要认识到每个浏览器都以不同的方式进行标准化。例如,即使标准草案仍然处于审查阶段并且可能发生变更,但有些浏览器已经宣传了 IndexedDB 的可用性。其他浏览器采用了更为保守的方式。它们可能会冒险“不在”早期采用这些规范,但是开发人员可以确信不断变化的规范不会破坏他们的网站。因此,开发人员应根据其客户使用的浏览器进行试验和测试,选择何时实现这些规范。

早期和试验性的HTML5规范

一组新兴的 HTML5 标准打破了开发人员可以在 Web 上实现什么的限制。IndexedDB(浏览器数据存储)、WebSockets(高性能网络)、FileAPI(文件系统 ops)和 Media Capture(集成语音)等功能不久即可在 Web 上提供。您可以学习如何使用 HTML5Labs 来进行试验,HTML5Labs 是在 2010 年底开通的网站,为早期 Web 标准用户提供支持。下面介绍您能够获得什么。

IndexedDB:用于Web更简单的数据库

假设您是一线设计人员,致力于需要管理客户事务(订单、付款、查询等)的应用程序。要想操作所需的数据集,您可以编写自己的 AJAXy 代码,与服务器端的主数据库同步,也许要结合使用 cookies 和会话变量。您可能会使用很多出色的 JavaScript 框架之一,至少使用一部分。很可能发现您仍然需要解决至少几个棘手的问题,其中涉及事务回滚或可伸缩性。

有一个更好的方法:IndexedDB万维网联盟的资深分析师仔细考虑了 Web 应用的典型客户端侧数据管理挑战,并起草了称为"IndexedDB" 的应用编程接口,它很好地组织了各种解决方案。您现在就可以依靠createIndex()、transaction() 及此处定义的其他接口来编写 HTML。

如果您已准备好使用该功能,很多浏览器已经实现了 IndexedDB,预计在短期内也会为其他浏览器提供运行时兼容库。在最坏的情况下,您的代码将读取一些额外的 JavaScript 库并执行 IndexedDB,以实现所需的结果。读取这些兼容库的代价相对于能够用最智能的 API 进行编码所带来的优势来说非常低,这些 API 旨在实现高速客户端侧异步数据查询。

WebSockets:一个有争议的API

WebSockets 是 HTML5 的一部分,特别说明了 HTML5Labs 的重要性。要理解这一点,需要一些背景知识。

Web 的基本体系结构中要有一个浏览器,向服务器发出页面显示请求。“需要更多数据?请求一个页面。”这种“拉”的方法具有明显的局限性,最明显的是服务器无法宣布:“嘿,浏览器!我这儿有些你可能会喜欢的东西。”没有“推”操作。

Web 客户端与浏览器之间的通信定义在过去 20 年中以多种方式进行了扩展,以满足更复杂的信道的要求。最近,WebSockets 定义引入了双向全双工功能,使客户端或浏览器能够随时高效地发送或接收数据。

可以预知几个后果。首先会根据 WebSockets 为游戏发烧友编写内容,因为它开辟了多玩家互动游戏的新机遇。安全漏洞几乎以同样的速度在迅猛发展。WebSockets“让传统网络更进一步”,但错误不可避免。

最终结果是:一些浏览器从不支持 WebSockets,一些浏览器一直支持某种形式的 WebSockets,几个浏览器曾经支持过该接口,然后停止了对它的支持。

在本例中,HTML5 Labs 将 WebSockets 视为开发人员获取以下各项的“原型”:

  • 表示草案标准的代码示例
  • 正确解析代码示例的可执行环境
  • 相关规范文档和规范稳定性的时间表

“可执行环境”的范围包括任何浏览器至少在原则上都可以加载的小型 JavaScript 库,一直到部分内容只能用 CSS 和 ActiveX 编写的复杂安装程序。

FileAPI连接了Web与桌面世界

HTML5 的 FileAPI 在撰写本文时仍处于试验阶段。您可能期望文件规范易于理解;桌面计算几十年来一直依靠常规的文件夹和文件结构。然而,Web 浏览器的上下文为正确定义文件接口带来了新的安全挑战,特别是当人们认为 FileAPI 对象在线程化 Web 应用的不同线程之间必须表现一致时。除了其他优势,定义良好的 FileAPI 能够让最终用户更平稳、更快速地上传到 Web 应用。

已公布的 FileAPI 已经改变过一次,最终版本尚未确定。但可使用其原型,这样,开发人员可使用这一重要的新接口进行试验。

媒体捕获API

这 4 种接口中最为“绿色”的是媒体捕获 API。HTML5Labs 在本例中甚至没有提供原型库,尽管可能发布一个只支持音频功能的原型库。

媒体捕获能做些什么?想一想Web 应用中的一种典型形式。您可能需要提供地址,包括选择州(或省等)。到目前为止,我们都是通过“点击”屏幕上的正确位置或相近的位置来完成该工作。通过媒体捕获和一点简单的编程工作,最终用户将能够说出“田纳西”或“古吉拉特”,而浏览器能够根据麦克风转换的信号正确对选择进行解码。

从试验到网站就绪

开发人员需要一个像 HTML5 Labs 那样的网站来学习、试验,并确定何时可将规范用于网站。浏览器制造商通过选择何时采用标准,能够在确定规范稳定性方面发挥其作用。正如 Microsoft 互操作性战略总经理 Jean Paoli 所述:“开发人员应确信浏览器基于稳定的 HTML5。”HTML5 Labs 是决定您想些什么以及这对您的网站意味着什么的好地方。