開發(fā)者需關(guān)注的幾項Web新技術(shù)

申請免費試用、咨詢電話：400-8352-114

WebGL

WebGL 是一種基于 Web 的 Graphic 庫，由非盈利組織 Khronos 運營，當前連系 HTML5元素普遍使用在 3D 圖形開拓中。

進修 WebGL 比擬堅苦，由于它是底層開拓——它運轉(zhuǎn)在 GPU 上面，并且它實踐上是一個 OpenGL 的 JavaScript port，是一種游戲開拓者運用的曾經(jīng)長時間樹立的 API 集。WebGL 的首要受眾是哪些曾經(jīng)擁有豐厚 OpenGL 經(jīng)歷的游戲開拓者，他們可以經(jīng)過 WebGL 為 web 平臺編寫游戲。

好在有良多資本可以協(xié)助您進修 WebGL，這些資本不只僅是關(guān)于游戲開拓的，還有良多奇幻的圖形、視覺和音樂視頻等方面。作者小我比擬引薦的是：

◆ 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ā)布版和開拓頻道）中都支撐，除了 IE10（微軟透露表現(xiàn)不支撐）。關(guān)于挪動產(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的光環(huán)下顯得有點昏暗，雖然 SVG 和 HTML5是面向不必使用的分歧東西。

Canvas2D 可以敏捷 paint 圖形到屏幕上面，這一點很犀利。然則其悉數(shù)功用就是 paint 了，沒有內(nèi)存來做那些（地位，頂層或其他）其他功用。假如您需求那種 book-keeping 任務(wù)，就只能本人用 JavaScript 完成，由于 Canvas2D 不會把 DOM 保管到內(nèi)存中，也正由于如斯 Canvas2D 速度快，非常合適第一人稱射擊類使用。

與 Canvas2D 分歧，SVG 在您需求保管 DOM 的時分就給力了。運用 JavaScript，一切的 Objects 都可以挪動而且與動畫無關(guān)。您可以嘗嘗 Daniel Davis 做的復(fù)古類 SVG 游戲 Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）來體驗一下，而且看看源代碼來調(diào)查若何完成動畫結(jié)果。

由于 shape 和 path 是用 Markup 來描繪的，所以他們可以用 CSS 來定型。與分歧，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），可所以呼應(yīng)式的，可以依據(jù)分歧的目的設(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/）來調(diào)查二者的區(qū)別。

getUserMedia

不像那些被錯誤地稱為 HTML5 的 API，getUserMeida（鄙人文中簡寫為 gUM）有個相對合理的來由：開初它是 HTML5元素，之后它更名了然后分開了 W3C WebRTC 標準調(diào)集。

gUM 答應(yīng)拜訪用戶的攝像頭和麥克風(fēng)，原本是在 WebRTC 標準中在閱讀器中進行 P2P 視頻會議的，當 gUM 擁有了其他的用處，就分開了 WebRTC。

攝像頭的拜訪最終在 Opera12 安卓版，Opera 桌面實行室和 Google Chrome Canary 里面完成了，但是 Opera 和 Chrome 都還沒有完成麥克風(fēng)的接入。

W3C 標準仍然在用，所以 Opera 和 Webkit 有分歧的語律例范，如許的費事被一個叫做 The gUM Shield（https://gist.github.com/f2ac64ed7fc467ccdfe3）的小 JavaScript 片段搞定了。假如您想更深化地調(diào)查這方面請看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（http://html5doctor.com/getusermedia/）

當視頻從設(shè)備開端傳播輸?shù)臅r分，源數(shù)據(jù)可以被做成釀成了

假如想把 web app 的功用做得像 native app，gUM 需求做良多的任務(wù)。試了一下 Neaver 的 gum 和 WebGL 在 Opera Mobile 12 上面的 demo，覺得和平臺獨有的 app 一樣富有呼應(yīng)式而且很時興。當在閱讀器產(chǎn)物中其功用被普遍使用的時分，作者言語會有良多基于 web 的 QR 代碼閱讀者以及良多加強實際的使用。

File APIs

W3C File APIs 答應(yīng) JavaScript 拜訪當?shù)匚募?，個中最常用的 API 是 FileReader，可以從 Opera，F(xiàn)ireFox，IE10平臺等的預(yù)覽版看到（不包羅 Safari）。

這一份 W3C 標準“為了在 web 使用中供應(yīng) API 來代表文件對象，以及編程選擇和拜訪數(shù)據(jù)”。例如：你可以上傳文件到閱讀器中，并當?shù)夭檎蚁嚓P(guān)信息（例如文件名，尺寸，類型）而不需求到效勞器端。您也可以翻開文件，操作內(nèi)容，如許可以增強基于閱讀器的使用的交互性，用起來更像是當?shù)厥褂谩?/p>

另一個常用的用處是使傳統(tǒng)的圖像上傳兌換狂更具有 Web2.0 特征：經(jīng)過答應(yīng)在閱讀器內(nèi)部的 Drag and Drop，而不是當?shù)匚募到y(tǒng)中改動。

您可以經(jīng)過運用一個通俗的開端，然后按部就班地進步。HTML5 Drag&Drop 支撐特征檢測，假如存在的話就運用

還有良多寫文件和操作文件系統(tǒng)的標準，但是這些對當前的跨閱讀器使用來說還不太夠：

W3C 文件 API：（http://dev.opera.com/articles/view/the-w3c-file-api/）十分根底的引見。

開拓文件系統(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)站照常任務(wù)。但是有時分卻不克不及如許，例如 Paul Neaver 的《HTML5釀成玩具》中，假如 gUM 和 WebGL 目前不存在的話，其網(wǎng)站不克不及有什么彌補辦法了，整個網(wǎng)站的中心都沒了。

在如許的狀況下有兩種典型的常規(guī)：要么是顯示一條音訊說“你的閱讀器太渣滓了，塞油哪啦”或許說“你必需用 Chrome6/Firefox 4/Opera10等[刺進能支撐你使用的閱讀器]才干拜訪”。第一種辦法又沒用又鹵莽，沒有建議和彌補辦法；第二種辦法是個暫時方法，由于六個月之內(nèi)一切閱讀器能夠都能支撐你目前運用的技能了，讓你在網(wǎng)站上留下的信息過時：例如您寫的處理方案是建議運用 Firefox4 來拜訪，可是半年后用戶裝置著 Firefox7 回來拜訪你的頁面了，這可就真的沒救了。

假如您真的不克不及運用漸進式加強，那么就用新型的 HTML 5 Please API 吧（http://api.html5please.com/）。這是 Jon Neal，Divya Manian 和其他幾位大蝦創(chuàng)作的。經(jīng)過運用它，可以先查詢 caniuse.com 然后返回一個最新（能支撐你的新特征的）的閱讀器版本列表。

假如您曾經(jīng)做了一個需求 Canvas 或 WebSQL DB 技能的 DEMO 或許網(wǎng)站，生怕你曾經(jīng)處在一個如許的為難境地了：您只是在通知拜訪者們他們的閱讀器不咋地。然則您不克不及只引薦他們運用一個能支撐這些特征的閱讀器來彌補，例如“找個支撐 WebRTC 功能的閱讀器再來吧”，如許關(guān)于人人都沒啥結(jié)果。

HTML5 Please API 把開拓人員的言語（和特征）翻譯成用戶能了解的言語（閱讀器）。經(jīng)過挪用這個 API 你就可以獲得一些 HTML 返回值來通知拜訪者，或許返回一個帶有相關(guān)數(shù)據(jù)的 JSON 對象（包羅閱讀器 Logo 及下載引見等信息）。如許您可以依據(jù)分歧的客戶來顯示分歧的彌補信息了。

運用這種方法最令人欣喜的是：假如一切新特征在客戶當時閱讀器的晉級版都能支撐的狀況下，Please API 值建議訪客對閱讀器晉級，而不是讓訪客純真為了拜訪你這個頁面而改換閱讀器。