最近一位 HTML5 專家 Rich Clark（作者的好朋友）為大家做了一個(gè) HTML5 APIs 的簡(jiǎn)介，在文章中為大家指向了一個(gè)令人迷惑的網(wǎng)頁(yè)（web 平臺(tái)：瀏覽器技術(shù) http://platform.html5.org/），其中包含兩個(gè)很長(zhǎng)的專欄和小正文并提及到一些讓人感到迷茫的技術(shù)，例如“window.crypto.getRandomValues”和“DOM Mutation observer”。

別擔(dān)心，咱們不去管那些啦，因?yàn)橛行┻€遠(yuǎn)遠(yuǎn)沒(méi)有完成呢，在瀏覽器中見(jiàn)到它們還要等一陣子。然而，其它已經(jīng)在瀏覽器中，或者距離您很近，或者馬上就要出現(xiàn)。人們可能將稱之為“HTML5”，盡管它們并不是。其實(shí)，它們都屬于令人激動(dòng)的新興 Web 技術(shù)（New Exciting Web Technology），值得每個(gè)開(kāi)發(fā)者關(guān)注。

WebGL

WebGL 是一種基于 Web 的 Graphic 庫(kù)，由非盈利組織 Khronos 運(yùn)營(yíng)，目前結(jié)合 HTML5<canvas>元素廣泛應(yīng)用在 3D 圖形開(kāi)發(fā)中。

學(xué)習(xí) WebGL 比較困難，因?yàn)樗堑讓娱_(kāi)發(fā)——它運(yùn)行在 GPU 上面，而且它實(shí)際上是一個(gè) OpenGL 的 JavaScript port，是一種游戲開(kāi)發(fā)者使用的已經(jīng)長(zhǎng)期建立的 API 集。WebGL 的主要受眾是哪些已經(jīng)擁有豐富 OpenGL 經(jīng)驗(yàn)的游戲開(kāi)發(fā)者，他們可以通過(guò) WebGL 為 web 平臺(tái)編寫游戲。

好在有很多資源可以幫助您學(xué)習(xí) WebGL，這些資源不僅僅是關(guān)于游戲開(kāi)發(fā)的，還有很多奇幻的圖形、視覺(jué)和音樂(lè)視頻等方面。作者個(gè)人比較推薦的是：

◆ Introduction to WebGL。http://dev.opera.com/articles/view/an-introduction-to-webgl/作者 Luz Caballero，簡(jiǎn)介可以獲得的各種庫(kù)。

◆ Raw WebGL 101。http://dev.opera.com/articles/view/raw-webgl-part1-getting-started/適合那些不使用庫(kù)的用戶。

◆ Learning WebGL。http://learningwebgl.com/一個(gè)非常好的引導(dǎo)網(wǎng)站。

◆ WebGL 101。http://www.youtube.com/watch?v=me3BviH3nZc 一個(gè)由 Erik Moller 制作的介紹視頻（2.5小時(shí)）。

◆ See Emberwind。http://operasoftware.github.com/Emberwind/一個(gè)由 Erik Moller 做的 WebGL 游戲 port，您可以深入 Github 或看代碼。

WebGL 目前在所有桌面瀏覽器（發(fā)布版和開(kāi)發(fā)頻道）中都支持，除了 IE10（微軟表示不支持）。對(duì)于移動(dòng)產(chǎn)品來(lái)說(shuō)，已經(jīng)在 Opera Mobile 12 中發(fā)布了，最終會(huì)出現(xiàn)在 Android，BlackBerry Playbook 2.0，Nokia N900，SonyEricsson Xpertia Android Phones 等以及 Firefox 移動(dòng)瀏覽器中。

SVG

SVG（Scalable Vector Graphics）已經(jīng)在 Opera，F(xiàn)irefox，Chrome 中存在多年了，但是直到 IE9 開(kāi)始支持它之后才漸漸變得主流一些它在 HTML5<Canvas>的光環(huán)下顯得有點(diǎn)暗淡，盡管 SVG 和 HTML5<canvas>是面向不用應(yīng)用的不同工具。

Canvas2D 可以迅速 paint 圖形到屏幕上面，這一點(diǎn)很犀利。但是其全部功能就是 paint 了，沒(méi)有內(nèi)存來(lái)做那些（位置，頂層或其他）其他功能。如果您需要那種 book-keeping 工作，就只能自己用 JavaScript 實(shí)現(xiàn)，因?yàn)?Canvas2D 不會(huì)把 DOM 保存到內(nèi)存中，也正因?yàn)槿绱?Canvas2D 速度快，十分適合第一人稱射擊類應(yīng)用。

與 Canvas2D 不同，SVG 在您需要保存 DOM 的時(shí)候就給力了。使用 JavaScript，所有的 Objects 都可以移動(dòng)并且與動(dòng)畫無(wú)關(guān)。您可以試試 Daniel Davis 做的復(fù)古類 SVG 游戲 Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）來(lái)體驗(yàn)一下，并且看看源代碼來(lái)了解如何完成動(dòng)畫效果。

因?yàn)?shape 和 path 是用 Markup 來(lái)描述的，所以他們可以用 CSS 來(lái)定型。與<canvas>不同，text 在 SVG 中保持 text 格式并且更加的靈活，更加可擴(kuò)展，更加易于訪問(wèn)。在 Canvas 中，text 變成了像素，就像 Photoshop 中的圖形 text。

SVG 最強(qiáng)大的特性是它基于矢量，這樣您的插圖，圖形和 UI 圖標(biāo)等都是矢量圖了，這樣無(wú)論是在 50 英寸的電視屏還是手機(jī)屏幕桌面上，看上去感覺(jué)都是一樣的清晰。在當(dāng)今這樣一個(gè) web 應(yīng)用無(wú)處不在的時(shí)代，SVG 圖形甚至可以包括媒體查詢（http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes），可以是響應(yīng)式的，可以根據(jù)不同的目標(biāo)設(shè)備做尺寸的調(diào)整。

綜上所述，在最新的桌面瀏覽器中 SVG 已經(jīng)能被廣泛支持了。在移動(dòng)產(chǎn)品方面的支持總體上來(lái)說(shuō)也很好，以及預(yù)期在 Android 3.0 版本之前原生瀏覽器也會(huì)支持它了。

Daniel Davis 有一些 SVG 介紹性的資源（http://my.opera.com/tagawa/blog/learning-svg），作者個(gè)人也推薦一本免費(fèi)的電子書：Learn SVG（http://www.learnsvg.com/book-learnsvg/），您也可以看看《SVG or Canvas？Choosing Between the Two》（http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/）來(lái)了解二者的區(qū)別。

getUserMedia

不像那些被錯(cuò)誤地稱為 HTML5 的 API，getUserMeida（在下文中簡(jiǎn)寫為 gUM）有個(gè)相對(duì)正當(dāng)?shù)睦碛桑浩鸪跛?HTML5<device>元素，之后它改名了然后離開(kāi)了 W3C WebRTC 規(guī)范集合。

gUM 允許訪問(wèn)用戶的攝像頭和麥克風(fēng)，本來(lái)是在 WebRTC 規(guī)范中在瀏覽器中進(jìn)行 P2P 視頻會(huì)議的，當(dāng) gUM 擁有了其他的用途，就離開(kāi)了 WebRTC。

攝像頭的訪問(wèn)最終在 Opera12 安卓版，Opera 桌面實(shí)驗(yàn)室和 Google Chrome Canary 里面實(shí)現(xiàn)了，不過(guò) Opera 和 Chrome 都還沒(méi)有實(shí)現(xiàn)麥克風(fēng)的接入。

W3C 規(guī)范依然在用，所以 Opera 和 Webkit 有不同的語(yǔ)法規(guī)范，這樣的麻煩被一個(gè)叫做 The gUM Shield（https://gist.github.com/f2ac64ed7fc467ccdfe3）的小 JavaScript 片段搞定了。如果您想更深入地了解這方面請(qǐng)看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（http://html5doctor.com/getusermedia/）

當(dāng)視頻從設(shè)備開(kāi)始流傳輸?shù)臅r(shí)候，源數(shù)據(jù)可以被做成變成了<video>元素，如果需要的話還可以被定為到屏幕外面，然后拷貝到<canvas>里面進(jìn)行所需要的操作。Paul Neave 寫的《HTML5 變成玩具！》（http://neave.com/webcam/html5/）為了方便操作把流媒體數(shù)據(jù)拷貝到 WebGL 中。作者在 .net 雜志的 226 話有采訪他的報(bào)導(dǎo)（http://www.netmagazine.com/shop/magazines/april-2012-226）。

如果想把 web app 的功能做得像 native app，gUM 需要做很多的工作。試了一下 Neaver 的 gum 和 WebGL 在 Opera Mobile 12 上面的 demo，感覺(jué)和平臺(tái)獨(dú)有的 app 一樣富有響應(yīng)式并且很時(shí)髦。當(dāng)在瀏覽器產(chǎn)品中其功能被廣泛應(yīng)用的時(shí)候，作者語(yǔ)言會(huì)有很多基于 web 的 QR 代碼閱讀者以及很多增強(qiáng)現(xiàn)實(shí)的應(yīng)用。

File APIs

W3C File APIs 允許 JavaScript 訪問(wèn)本地文件，其中最常用的 API 是 FileReader，可以從 Opera，F(xiàn)ireFox，IE10平臺(tái)等的預(yù)覽版看到（不包括 Safari）。

這一份 W3C 規(guī)范“為了在 web 應(yīng)用中提供 API 來(lái)代表文件對(duì)象，以及編程選擇和訪問(wèn)數(shù)據(jù)”。例如：你可以上傳文件到瀏覽器中，并本地查找相關(guān)信息（例如文件名，尺寸，類型）而不需要到服務(wù)器端。您也可以打開(kāi)文件，操作內(nèi)容，這樣可以加強(qiáng)基于瀏覽器的應(yīng)用的交互性，用起來(lái)更像是本地應(yīng)用。

另一個(gè)常用的用途是使傳統(tǒng)的圖像上傳兌換狂更具有 Web2.0 特色：通過(guò)允許在瀏覽器內(nèi)部的 Drag and Drop，而不是本地文件系統(tǒng)中改變。

您可以通過(guò)使用一個(gè)普通的<input type=”file”>開(kāi)始，然后循序漸進(jìn)地提高。HTML5 Drag&Drop 支持特征檢測(cè)，如果存在的話就使用<div>替換<input>，那就是您的 drag 圖像目標(biāo)了。當(dāng)圖像被 drag 到目標(biāo)的時(shí)候，使用 File Reader API 來(lái)顯示一個(gè)指甲蓋大小的圖像。您可以看一下 Remy Sharp 的 demo（http://html5demos.com/file-api）。

還有很多寫文件和操作文件系統(tǒng)的規(guī)范，不過(guò)這些對(duì)目前的跨瀏覽器應(yīng)用來(lái)說(shuō)還不太夠：

W3C 文件 API：（http://dev.opera.com/articles/view/the-w3c-file-api/）非常基礎(chǔ)的介紹。

開(kāi)發(fā)文件系統(tǒng) API：（http://www.html5rocks.com/en/tutorials/file/filesystem/）HTML5 Rocks 文章，（僅限 Chrome）。

Feature-detecting, progressive enhancement and upgrade messages（特征檢測(cè)，漸進(jìn)式增強(qiáng)和消息通知）

誠(chéng)然，在沒(méi)有那些奇幻的 API 的時(shí)候，大家總是試圖使用漸進(jìn)式增強(qiáng)和 HTML 語(yǔ)義的方法讓網(wǎng)站照常工作。然而有時(shí)候卻不能這樣，例如 Paul Neaver 的《HTML5變成玩具》中，如果 gUM 和 WebGL 現(xiàn)在不存在的話，其網(wǎng)站不能有什么補(bǔ)救措施了，整個(gè)網(wǎng)站的核心都沒(méi)了。

在這樣的情況下有兩種典型的慣例：要么是顯示一條消息說(shuō)“你的瀏覽器太垃圾了，塞油哪啦”或者說(shuō)“你必須用 Chrome6/Firefox 4/Opera10等[插入能支持你應(yīng)用的瀏覽器]才能訪問(wèn)”。第一種方法又沒(méi)用又粗魯，沒(méi)有建議和補(bǔ)救措施；第二種方法是個(gè)臨時(shí)辦法，因?yàn)榱鶄€(gè)月之內(nèi)所有瀏覽器可能都能支持你現(xiàn)在使用的技術(shù)了，讓你在網(wǎng)站上留下的信息過(guò)時(shí)：例如您寫的解決方案是建議使用 Firefox4 來(lái)訪問(wèn)，可是半年后用戶安裝著 Firefox7 回來(lái)訪問(wèn)你的頁(yè)面了，這可就真的沒(méi)救了。

如果您真的不能使用漸進(jìn)式增強(qiáng)，那么就用新型的 HTML 5 Please API 吧（http://api.html5please.com/）。這是 Jon Neal，Divya Manian 和其他幾位大蝦創(chuàng)作的。通過(guò)使用它，可以先查詢 caniuse.com 然后返回一個(gè)最新（能支持你的新特性的）的瀏覽器版本列表。

如果您已經(jīng)做了一個(gè)需要 Canvas 或 WebSQL DB 技術(shù)的 DEMO 或者網(wǎng)站，恐怕你已經(jīng)處在一個(gè)這樣的尷尬境地了：您只是在告訴訪問(wèn)者們他們的瀏覽器不咋地。但是您不能只推薦他們使用一個(gè)能支持這些特性的瀏覽器來(lái)補(bǔ)救，例如“找個(gè)支持 WebRTC 性能的瀏覽器再來(lái)吧”，這樣對(duì)于大家都沒(méi)啥效果。

HTML5 Please API 把開(kāi)發(fā)人員的語(yǔ)言（和特性）翻譯成用戶能理解的語(yǔ)言（瀏覽器）。通過(guò)調(diào)用這個(gè) API 你就可以得到一些 HTML 返回值來(lái)告訴訪問(wèn)者，或者返回一個(gè)帶有相關(guān)數(shù)據(jù)的 JSON 對(duì)象（包括瀏覽器 Logo 及下載介紹等信息）。這樣您可以根據(jù)不同的客戶來(lái)顯示不同的補(bǔ)救信息了。

使用這種方式最令人欣慰的是：如果所有新特性在客戶當(dāng)前瀏覽器的升級(jí)版都能支持的情況下，Please API 值建議訪客對(duì)瀏覽器升級(jí)，而不是讓訪客單純?yōu)榱嗽L問(wèn)你這個(gè)頁(yè)面而更換瀏覽器。效果圖如下：

結(jié)束語(yǔ)：

正如您所看到的，大量的令人驚喜的新技術(shù)正在接踵而至，您著手研究上述某項(xiàng)技術(shù)的時(shí)候恐怕又要擔(dān)心更新鮮的技術(shù)到來(lái)了吧。希望您開(kāi)發(fā)得愉快，請(qǐng)記得讓您所開(kāi)發(fā)的應(yīng)用在盡可能多的瀏覽器上面測(cè)試一下。

　　———————————————————————————————

原文作者：Bruce Lawson 2012年 3 月 19 日

圖片整理：Rob Winter ；HTML5闡述： Mike Brennan

原文地址：http://www.netmagazine.com/features/developers-guide-new-exciting-web-technologies

關(guān)于 Bruce Lawson ：支持 Opera 開(kāi)放標(biāo)準(zhǔn)，專注于 HTML5，窗口小部件和接入性。他是一位 HTML5 專家，與 Remy Sharp 共同編寫了《Introducing HTML5》。他的個(gè)人網(wǎng)站：http://brucelawson.co.uk/

譯文出自：http://www.webapptrend.com/2012/03/2234.html

【編輯推薦】

1. 手機(jī)WEBKIT引擎HTML元素定位和事例
2. Node.js vs Opa: Web框架殺手
3. 設(shè)計(jì)好脾氣的Web頁(yè)面
4. 用3個(gè)步驟實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
5. Google Web App開(kāi)發(fā)指南：交互設(shè)計(jì)