最近一位 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)沒有完成呢，在瀏覽器中見到它們還要等一陣子。然而，其它已經(jīng)在瀏覽器中，或者距離您很近，或者馬上就要出現(xiàn)。人們可能將稱之為“HTML5”，盡管它們并不是。其實(shí)，它們都屬于令人激動(dòng)的新興 Web 技術(shù)（New Exciting Web Technology），值得每個(gè)開發(fā)者關(guān)注。

WebGL

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

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

好在有很多資源可以幫助您學(xué)習(xí) WebGL，這些資源不僅僅是關(guān)于游戲開發(fā)的，還有很多奇幻的圖形、視覺和音樂視頻等方面。作者個(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ā)布版和開發(fā)頻道）中都支持，除了 IE10（微軟表示不支持）。對(duì)于移動(dòng)產(chǎn)品來說，已經(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 開始支持它之后才漸漸變得主流一些它在 HTML5<Canvas>的光環(huán)下顯得有點(diǎn)暗淡，盡管 SVG 和 HTML5<canvas>是面向不用應(yīng)用的不同工具。

Canvas2D 可以迅速 paint 圖形到屏幕上面，這一點(diǎn)很犀利。但是其全部功能就是 paint 了，沒有內(nè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)畫無關(guān)。您可以試試 Daniel Davis 做的復(fù)古類 SVG 游戲 Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）來體驗(yàn)一下，并且看看源代碼來了解如何完成動(dòng)畫效果。

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

SVG 最強(qiáng)大的特性是它基于矢量，這樣您的插圖，圖形和 UI 圖標(biāo)等都是矢量圖了，這樣無論是在 50 英寸的電視屏還是手機(jī)屏幕桌面上，看上去感覺都是一樣的清晰。在當(dāng)今這樣一個(gè) web 應(yīng)用無處不在的時(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)品方面的支持總體上來說也很好，以及預(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/）來了解二者的區(qū)別。

getUserMedia

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

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

攝像頭的訪問最終在 Opera12 安卓版，Opera 桌面實(shí)驗(yàn)室和 Google Chrome Canary 里面實(shí)現(xiàn)了，不過 Opera 和 Chrome 都還沒有實(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è)備開始流傳輸?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，感覺和平臺(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 訪問本地文件，其中最常用的 API 是 FileReader，可以從 Opera，F(xiàn)ireFox，IE10平臺(tái)等的預(yù)覽版看到（不包括 Safari）。

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

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

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

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

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

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

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

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

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

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

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

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

正如您所看到的，大量的令人驚喜的新技術(shù)正在接踵而至，您著手研究上述某項(xiàng)技術(shù)的時(shí)候恐怕又要擔(dān)心更新鮮的技術(shù)到來了吧。希望您開發(fā)得愉快，請(qǐng)記得讓您所開發(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 開放標(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開發(fā)指南：交互設(shè)計(jì)