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

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

WebGL

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

學(xué)習(xí) WebGL 比較困難，因為它是底層開發(fā)——它運行在 GPU 上面，而且它實際上是一個 OpenGL 的 JavaScript port，是一種游戲開發(fā)者使用的已經(jīng)長期建立的 API 集。WebGL 的主要受眾是哪些已經(jīng)擁有豐富 OpenGL 經(jīng)驗的游戲開發(fā)者，他們可以通過 WebGL 為 web 平臺編寫游戲。

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

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

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

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

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

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

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

SVG

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

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

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

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

SVG 最強大的特性是它基于矢量，這樣您的插圖，圖形和 UI 圖標(biāo)等都是矢量圖了，這樣無論是在 50 英寸的電視屏還是手機屏幕桌面上，看上去感覺都是一樣的清晰。在當(dāng)今這樣一個 web 應(yīng)用無處不在的時代，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)能被廣泛支持了。在移動產(chǎn)品方面的支持總體上來說也很好，以及預(yù)期在 Android 3.0 版本之前原生瀏覽器也會支持它了。

Daniel Davis 有一些 SVG 介紹性的資源（http://my.opera.com/tagawa/blog/learning-svg），作者個人也推薦一本免費的電子書：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

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

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

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

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

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

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

File APIs

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

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

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

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

還有很多寫文件和操作文件系統(tǒng)的規(guī)范，不過這些對目前的跨瀏覽器應(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（特征檢測，漸進式增強和消息通知）

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

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

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

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

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

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

結(jié)束語：

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

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

原文作者：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》。他的個人網(wǎng)站：http://brucelawson.co.uk/

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

【編輯推薦】

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