(转)体验最新的HTML5技术

by Xiang Zhuyuan

作者：Cameron Laird

转:http://msdn.microsoft.com/zh-cn/ie/hh377875

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

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

稳定的*HTML5*规范

首先，您应该将稳定的技术和新兴技术分开。最稳定且可用于网站的三个规范是Geolocation、Canvas 和 SVG。像 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 是决定您想些什么以及这对您的网站意味着什么的好地方。