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

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

WebGL

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

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

好在有良多資本可以協(xié)助您進(jìn)修 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/合適那些不運(yùn)用庫的用戶。

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

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

與 Canvas2D 分歧，SVG 在您需求保管 DOM 的時(shí)分就給力了。運(yùn)用 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)一下，而且看看源代碼來調(diào)查若何完成動(dòng)畫結(jié)果。

由于 shape 和 path 是用 Markup 來描繪的，所以他們可以用 CSS 來定型。與分歧，text 在 SVG 中堅(jiān)持 text 花樣而且愈加的靈敏，愈加可擴(kuò)展，愈加易于拜訪。在 Canvas 中，text 釀成了像素，就像 Photoshop 中的圖形 text。

SVG 最強(qiáng)壯的特征是它基于矢量，如許您的插圖，圖形和 UI 圖標(biāo)等都是矢量圖了，如許無論是在 50 英寸的電視屏照樣手機(jī)屏幕桌面上，看上去覺得都是一樣的明晰。在當(dāng)今如許一個(gè) web 使用無處不在的時(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ù)分歧的目的設(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），作者小我也引薦一本免費(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/）來調(diào)查二者的區(qū)別。

getUserMedia

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

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

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

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

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

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

File APIs

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

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

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

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

還有良多寫文件和操作文件系統(tǒng)的標(biāo)準(zhǔn)，但是這些對(duì)當(dā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（特征檢測，漸進(jìn)式加強(qiáng)和音訊告訴）

固然，在沒有那些奇幻的 API 的時(shí)分，人人老是試圖運(yùn)用漸進(jìn)式加強(qiáng)和 HTML 語義的辦法讓網(wǎng)站照常任務(wù)。但是有時(shí)分卻不克不及如許，例如 Paul Neaver 的《HTML5釀成玩具》中，假如 gUM 和 WebGL 目前不存在的話，其網(wǎng)站不克不及有什么彌補(bǔ)辦法了，整個(gè)網(wǎng)站的中心都沒了。

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

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

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

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

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