2012年又有那些Web新興技術(shù)需要開發(fā)者去關(guān)注
分享 2012.03.24 瀏覽次數(shù):8668次
WebGL
WebGL是一種基于Web的Graphic庫,由非盈利組織Khronos運(yùn)營(yíng),目前結(jié)合HTML5元素廣泛應(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è)人比較推薦的是:
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的光環(huán)下顯得有點(diǎn)暗淡,盡管SVG和HTML5是面向不用應(yīng)用的不同工具。
Canvas2D可以迅速paint圖形到屏幕上面,這一點(diǎn)很犀利。但是其全部功能就是paint了,沒有內(nèi)存來做那些(位置,頂層或其他)其他功能。如果您需要那種book-keeping工作,就只能自己用JavaScript實(shí)現(xiàn),因?yàn)镃anvas2D不會(huì)把DOM保存到內(nèi)存中,也正因?yàn)槿绱薈anvas2D速度快,十分適合第一人稱射擊類應(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)閟hape和path是用Markup來描述的,所以他們可以用CSS來定型。與不同,text在SVG中保持text格式并且更加的靈活,更加可擴(kuò)展,更加易于訪問。在Canvas中,text變成了像素,就像Photoshop中的圖形text。
SVG最強(qiáng)大的特性是它基于矢量,這樣您的插圖,圖形和UI圖標(biāo)等都是矢量圖了,這樣無論是在50英寸的電視屏還是手機(jī)屏幕桌面上,看上去感覺都是一樣的清晰。在當(dāng)今這樣一個(gè)web應(yīng)用無處不在的時(shí)代,SVG圖形甚至可以包括媒體查詢,可以是響應(yīng)式的,可以根據(jù)不同的目標(biāo)設(shè)備做尺寸的調(diào)整。
綜上所述,在最新的桌面瀏覽器中SVG已經(jīng)能被廣泛支持了。在移動(dòng)產(chǎn)品方面的支持總體上來說也很好,以及預(yù)期在Android 3.0版本之前原生瀏覽器也會(huì)支持它了。
getUserMedia
不像那些被錯(cuò)誤地稱為HTML5的API,getUserMeida(在下文中簡(jiǎn)寫為gUM)有個(gè)相對(duì)正當(dāng)?shù)睦碛桑浩鸪跛荋TML5元素,之后它改名了然后離開了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ī)范依然在用,所以O(shè)pera和Webkit有不同的語法規(guī)范,這樣的麻煩被一個(gè)叫做The gUM Shield,的小JavaScript片段搞定了。如果您想更深入地了解這方面請(qǐng)看作者的另一篇文章:It’s Curtains for Marital Strife Thanks to getUserMedia
當(dāng)視頻從設(shè)備開始流傳輸?shù)臅r(shí)候,源數(shù)據(jù)可以被做成變成了元素,如果需要的話還可以被定為到屏幕外面,然后拷貝到里面進(jìn)行所需要的操作。Paul Neave寫的《HTML5變成玩具!》(http://neave.com/webcam/html5/)為了方便操作把流媒體數(shù)據(jù)拷貝到WebGL中。作者在.net雜志的226話有采訪他的報(bào)導(dǎo)。
如果想把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í)候,作者語言會(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è)普通的開始,然后循序漸進(jìn)地提高。HTML5 Drag&Drop支持特征檢測(cè),如果存在的話就使用
替換,那就是您的drag圖像目標(biāo)了。當(dāng)圖像被drag到目標(biāo)的時(shí)候,使用File Reader API來顯示一個(gè)指甲蓋大小的圖像。您可以看一下Remy Sharp的demo。
Feature-detecting,progressive enhancement and upgrade messages(特征檢測(cè),漸進(jìn)式增強(qiáng)和消息通知)
誠(chéng)然,在沒有那些奇幻的API的時(shí)候,大家總是試圖使用漸進(jìn)式增強(qiáng)和HTML語義的方法讓網(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回來訪問你的頁面了,這可就真的沒救了。
HTML5 Please API把開發(fā)人員的語言(和特性)翻譯成用戶能理解的語言(瀏覽器)。通過調(diào)用這個(gè)API你就可以得到一些HTML返回值來告訴訪問者,或者返回一個(gè)帶有相關(guān)數(shù)據(jù)的JSON對(duì)象(包括瀏覽器Logo及下載介紹等信息)。這樣您可以根據(jù)不同的客戶來顯示不同的補(bǔ)救信息了。
結(jié)束語:
正如您所看到的,大量的令人驚喜的新技術(shù)正在接踵而至,您著手研究上述某項(xiàng)技術(shù)的時(shí)候恐怕又要擔(dān)心更新鮮的技術(shù)到來了吧。希望您開發(fā)得愉快,請(qǐng)記得讓您所開發(fā)的應(yīng)用在盡可能多的瀏覽器上面測(cè)試一下。
杭州網(wǎng)站建設(shè)更多:談?wù)凥TML5最突出的特性與功能
- PREV:我們?cè)趺慈タ创髽I(yè)網(wǎng)站推廣
- NEXT:怎么理解-程序員年過三十這道坎
-
杭州網(wǎng)站設(shè)計(jì)公司:品牌網(wǎng)站開發(fā)助力企業(yè)成長(zhǎng)
日期:2024-12-20瀏覽次數(shù):438次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):511次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計(jì)與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):518次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):730次
-
杭州網(wǎng)站設(shè)計(jì)公司:數(shù)據(jù)庫在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):699次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
杭州帷拓詳解岳陽網(wǎng)站建設(shè)做好用戶體驗(yàn)提高瀏覽量轉(zhuǎn)化率
日期:2023-02-09瀏覽次數(shù):1602次
-
湛江企業(yè)的網(wǎng)站設(shè)計(jì)流程需要注意的地方有哪些呢?
日期:2023-02-09瀏覽次數(shù):1642次
-
湛江定制app的成本為什么那么高?
日期:2020-10-12瀏覽次數(shù):2124次
-
湛江app開發(fā):電商app的開發(fā)功能
日期:2020-10-12瀏覽次數(shù):2082次
-
獨(dú)具創(chuàng)新的網(wǎng)站設(shè)計(jì)正是互聯(lián)網(wǎng)需要的
日期:2020-09-10瀏覽次數(shù):2026次
最新新聞
與互聯(lián)網(wǎng)同行,實(shí)時(shí)掌握網(wǎng)建行業(yè)最新動(dòng)態(tài)
-
企業(yè)網(wǎng)站建設(shè)中,“顏值”有多重要?
日期:2019-12-31瀏覽次數(shù):4228次
-
論三種常見的APP開發(fā)定制模式的區(qū)別
日期:2020-04-21瀏覽次數(shù):5076次
-
安陽網(wǎng)站建設(shè):如何用CMS系統(tǒng)快速防站?
日期:2020-10-14瀏覽次數(shù):1927次
-
是否需要語音聊天類杭州app開發(fā)?
日期:2021-01-16瀏覽次數(shù):4017次
-
杭州餐飲商家的預(yù)約小程序制作步驟
日期:2023-05-29瀏覽次數(shù):2985次
隨機(jī)新聞
新聞新動(dòng)態(tài),您需要的新聞管家
洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)
免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。