開發者應該關注的五項Web新興技術
最近一位 HTML5 專家 Rich Clark（作者的好朋友）為大家做了一個 HTML5 APIs 的簡介，在文章中為大家指向了一個令人迷惑的網頁（web 平臺：瀏覽器技術 http://platform.html5.org/），其中包含兩個很長的專欄和小正文并提及到一些讓人感到迷茫的技術，例如“window.crypto.getRandomValues”和“DOM Mutation observer”。
別擔心，咱們不去管那些啦，因為有些還遠遠沒有完成呢，在瀏覽器中見到它們還要等一陣子。然而，其它已經在瀏覽器中，或者距離您很近，或者馬上就要出現。人們可能將稱之為“HTML5”，盡管它們并不是。其實，它們都屬于令人激動的新興 Web 技術（New Exciting Web Technology），值得每個開發者關注。
WebGL
WebGL 是一種基于 Web 的 Graphic 庫，由非盈利組織 Khronos 運營，目前結合 HTML5<canvas>元素廣泛應用在 3D 圖形開發中。
學習 WebGL 比較困難，因為它是底層開發——它運行在 GPU 上面，而且它實際上是一個 OpenGL 的 JavaScript port，是一種游戲開發者使用的已經長期建立的 API 集。WebGL 的主要受眾是哪些已經擁有豐富 OpenGL 經驗的游戲開發者，他們可以通過 WebGL 為 web 平臺編寫游戲。
好在有很多資源可以幫助您學習 WebGL，這些資源不僅僅是關于游戲開發的，還有很多奇幻的圖形、視覺和音樂視頻等方面。作者個人比較推薦的是：
◆ 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/一個非常好的引導網站。
◆ 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 目前在所有桌面瀏覽器（發布版和開發頻道）中都支持，除了 IE10（微軟表示不支持）。對于移動產品來說，已經在 Opera Mobile 12 中發布了，最終會出現在 Android，BlackBerry Playbook 2.0，Nokia N900，SonyEricsson Xpertia Android Phones 等以及 Firefox 移動瀏覽器中。
SVG
SVG（Scalable Vector Graphics）已經在 Opera，Firefox，Chrome 中存在多年了，但是直到 IE9 開始支持它之后才漸漸變得主流一些它在 HTML5<Canvas>的光環下顯得有點暗淡，盡管 SVG 和 HTML5<canvas>是面向不用應用的不同工具。
Canvas2D 可以迅速 paint 圖形到屏幕上面，這一點很犀利。但是其全部功能就是 paint 了，沒有內存來做那些（位置，頂層或其他）其他功能。如果您需要那種 book-keeping 工作，就只能自己用 JavaScript 實現，因為 Canvas2D 不會把 DOM 保存到內存中，也正因為如此 Canvas2D 速度快，十分適合第一人稱射擊類應用。
與 Canvas2D 不同，SVG 在您需要保存 DOM 的時候就給力了。使用 JavaScript，所有的 Objects 都可以移動并且與動畫無關。您可以試試 Daniel Davis 做的復古類 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 圖標等都是矢量圖了，這樣無論是在 50 英寸的電視屏還是手機屏幕桌面上，看上去感覺都是一樣的清晰。在當今這樣一個 web 應用無處不在的時代，SVG 圖形甚至可以包括媒體查詢（http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes），可以是響應式的，可以根據不同的目標設備做尺寸的調整。
綜上所述，在最新的桌面瀏覽器中 SVG 已經能被廣泛支持了。在移動產品方面的支持總體上來說也很好，以及預期在 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/）來了解二者的區別。
getUserMedia
不像那些被錯誤地稱為 HTML5 的 API，getUserMeida（在下文中簡寫為 gUM）有個相對正當的理由：起初它是 HTML5<device>元素，之后它改名了然后離開了 W3C WebRTC 規范集合。
gUM 允許訪問用戶的攝像頭和麥克風，本來是在 WebRTC 規范中在瀏覽器中進行 P2P 視頻會議的，當 gUM 擁有了其他的用途，就離開了 WebRTC。
攝像頭的訪問最終在 Opera12 安卓版，Opera 桌面實驗室和 Google Chrome Canary 里面實現了，不過 Opera 和 Chrome 都還沒有實現麥克風的接入。
W3C 規范依然在用，所以 Opera 和 Webkit 有不同的語法規范，這樣的麻煩被一個叫做 The gUM Shield（https://gist.github.com/f2ac64ed7fc467ccdfe3）的小 JavaScript 片段搞定了。如果您想更深入地了解這方面請看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（http://html5doctor.com/getusermedia/）
當視頻從設備開始流傳輸的時候，源數據可以被做成變成了<video>元素，如果需要的話還可以被定為到屏幕外面，然后拷貝到<canvas>里面進行所需要的操作。Paul Neave 寫的《HTML5 變成玩具！》（http://neave.com/webcam/html5/）為了方便操作把流媒體數據拷貝到 WebGL 中。作者在 .net 雜志的 226 話有采訪他的報導（http://www.netmagazine.com/shop/magazines/april-2012-226）。
如果想把 web app 的功能做得像 native app，gUM 需要做很多的工作。試了一下 Neaver 的 gum 和 WebGL 在 Opera Mobile 12 上面的 demo，感覺和平臺獨有的 app 一樣富有響應式并且很時髦。當在瀏覽器產品中其功能被廣泛應用的時候，作者語言會有很多基于 web 的 QR 代碼閱讀者以及很多增強現實的應用。
File APIs
W3C File APIs 允許 JavaScript 訪問本地文件，其中最常用的 API 是 FileReader，可以從 Opera，FireFox，IE10平臺等的預覽版看到（不包括 Safari）。
這一份 W3C 規范“為了在 web 應用中提供 API 來代表文件對象，以及編程選擇和訪問數據”。例如：你可以上傳文件到瀏覽器中，并本地查找相關信息（例如文件名，尺寸，類型）而不需要到服務器端。您也可以打開文件，操作內容，這樣可以加強基于瀏覽器的應用的交互性，用起來更像是本地應用。
另一個常用的用途是使傳統的圖像上傳兌換狂更具有 Web2.0 特色：通過允許在瀏覽器內部的 Drag and Drop，而不是本地文件系統中改變。
您可以通過使用一個普通的<input type=”file”>開始，然后循序漸進地提高。HTML5 Drag&Drop 支持特征檢測，如果存在的話就使用<div>替換<input>，那就是您的 drag 圖像目標了。當圖像被 drag 到目標的時候，使用 File Reader API 來顯示一個指甲蓋大小的圖像。您可以看一下 Remy Sharp 的 demo（http://html5demos.com/file-api）。
還有很多寫文件和操作文件系統的規范，不過這些對目前的跨瀏覽器應用來說還不太夠：
W3C 文件 API：（http://dev.opera.com/articles/view/the-w3c-file-api/）非常基礎的介紹。
開發文件系統 API：（http://www.html5rocks.com/en/tutorials/file/filesystem/）HTML5 Rocks 文章，（僅限 Chrome）。
Feature-detecting, progressive enhancement and upgrade messages（特征檢測，漸進式增強和消息通知）
誠然，在沒有那些奇幻的 API 的時候，大家總是試圖使用漸進式增強和 HTML 語義的方法讓網站照常工作。然而有時候卻不能這樣，例如 Paul Neaver 的《HTML5變成玩具》中，如果 gUM 和 WebGL 現在不存在的話，其網站不能有什么補救措施了，整個網站的核心都沒了。
在這樣的情況下有兩種典型的慣例：要么是顯示一條消息說“你的瀏覽器太垃圾了，塞油哪啦”或者說“你必須用 Chrome6/Firefox 4/Opera10等[插入能支持你應用的瀏覽器]才能訪問”。第一種方法又沒用又粗魯，沒有建議和補救措施；第二種方法是個臨時辦法，因為六個月之內所有瀏覽器可能都能支持你現在使用的技術了，讓你在網站上留下的信息過時：例如您寫的解決方案是建議使用 Firefox4 來訪問，可是半年后用戶安裝著 Firefox7 回來訪問你的頁面了，這可就真的沒救了。
如果您真的不能使用漸進式增強，那么就用新型的 HTML 5 Please API 吧（http://api.html5please.com/）。這是 Jon Neal，Divya Manian 和其他幾位大蝦創作的。通過使用它，可以先查詢 caniuse.com 然后返回一個最新（能支持你的新特性的）的瀏覽器版本列表。
如果您已經做了一個需要 Canvas 或 WebSQL DB 技術的 DEMO 或者網站，恐怕你已經處在一個這樣的尷尬境地了：您只是在告訴訪問者們他們的瀏覽器不咋地。但是您不能只推薦他們使用一個能支持這些特性的瀏覽器來補救，例如“找個支持 WebRTC 性能的瀏覽器再來吧”，這樣對于大家都沒啥效果。
HTML5 Please API 把開發人員的語言（和特性）翻譯成用戶能理解的語言（瀏覽器）。通過調用這個 API 你就可以得到一些 HTML 返回值來告訴訪問者，或者返回一個帶有相關數據的 JSON 對象（包括瀏覽器 Logo 及下載介紹等信息）。這樣您可以根據不同的客戶來顯示不同的補救信息了。
使用這種方式最令人欣慰的是：如果所有新特性在客戶當前瀏覽器的升級版都能支持的情況下，Please API 值建議訪客對瀏覽器升級，而不是讓訪客單純為了訪問你這個頁面而更換瀏覽器。效果圖如下：
結束語：
正如您所看到的，大量的令人驚喜的新技術正在接踵而至，您著手研究上述某項技術的時候恐怕又要擔心更新鮮的技術到來了吧。希望您開發得愉快，請記得讓您所開發的應用在盡可能多的瀏覽器上面測試一下。
———————————————————————————————
原文作者：Bruce Lawson 2012年 3 月 19 日
圖片整理：Rob Winter ；HTML5闡述： Mike Brennan
原文地址：http://www.netmagazine.com/features/developers-guide-new-exciting-web-technologies
關于 Bruce Lawson ：支持 Opera 開放標準，專注于 HTML5，窗口小部件和接入性。他是一位 HTML5 專家，與 Remy Sharp 共同編寫了《Introducing HTML5》。他的個人網站：http://brucelawson.co.uk/
譯文出自：http://www.webapptrend.com/2012/03/2234.html
【編輯推薦】
