2012年又有那些Web新興技術(shù)需要開發(fā)者去關(guān)注
分享 2012.03.24 瀏覽次數(shù):8617次
WebGL
WebGL是一種基于Web的Graphic庫,由非盈利組織Khronos運營,目前結(jié)合HTML5元素廣泛應(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ā)的,還有很多奇幻的圖形、視覺和音樂視頻等方面。作者個人比較推薦的是:
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的光環(huán)下顯得有點暗淡,盡管SVG和HTML5是面向不用應(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來定型。與不同,text在SVG中保持text格式并且更加的靈活,更加可擴展,更加易于訪問。在Canvas中,text變成了像素,就像Photoshop中的圖形text。
SVG最強大的特性是它基于矢量,這樣您的插圖,圖形和UI圖標(biāo)等都是矢量圖了,這樣無論是在50英寸的電視屏還是手機屏幕桌面上,看上去感覺都是一樣的清晰。在當(dāng)今這樣一個web應(yīng)用無處不在的時代,SVG圖形甚至可以包括媒體查詢,可以是響應(yīng)式的,可以根據(jù)不同的目標(biāo)設(shè)備做尺寸的調(diào)整。
綜上所述,在最新的桌面瀏覽器中SVG已經(jīng)能被廣泛支持了。在移動產(chǎn)品方面的支持總體上來說也很好,以及預(yù)期在Android 3.0版本之前原生瀏覽器也會支持它了。
getUserMedia
不像那些被錯誤地稱為HTML5的API,getUserMeida(在下文中簡寫為gUM)有個相對正當(dāng)?shù)睦碛桑浩鸪跛荋TML5元素,之后它改名了然后離開了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ī)范依然在用,所以O(shè)pera和Webkit有不同的語法規(guī)范,這樣的麻煩被一個叫做The gUM Shield,的小JavaScript片段搞定了。如果您想更深入地了解這方面請看作者的另一篇文章:It’s Curtains for Marital Strife Thanks to getUserMedia
當(dāng)視頻從設(shè)備開始流傳輸?shù)臅r候,源數(shù)據(jù)可以被做成變成了元素,如果需要的話還可以被定為到屏幕外面,然后拷貝到里面進行所需要的操作。Paul Neave寫的《HTML5變成玩具!》(http://neave.com/webcam/html5/)為了方便操作把流媒體數(shù)據(jù)拷貝到WebGL中。作者在.net雜志的226話有采訪他的報導(dǎo)。
如果想把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)中改變。
您可以通過使用一個普通的開始,然后循序漸進地提高。HTML5 Drag&Drop支持特征檢測,如果存在的話就使用
替換,那就是您的drag圖像目標(biāo)了。當(dāng)圖像被drag到目標(biāo)的時候,使用File Reader API來顯示一個指甲蓋大小的圖像。您可以看一下Remy Sharp的demo。
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回來訪問你的頁面了,這可就真的沒救了。
HTML5 Please API把開發(fā)人員的語言(和特性)翻譯成用戶能理解的語言(瀏覽器)。通過調(diào)用這個API你就可以得到一些HTML返回值來告訴訪問者,或者返回一個帶有相關(guān)數(shù)據(jù)的JSON對象(包括瀏覽器Logo及下載介紹等信息)。這樣您可以根據(jù)不同的客戶來顯示不同的補救信息了。
結(jié)束語:
正如您所看到的,大量的令人驚喜的新技術(shù)正在接踵而至,您著手研究上述某項技術(shù)的時候恐怕又要擔(dān)心更新鮮的技術(shù)到來了吧。希望您開發(fā)得愉快,請記得讓您所開發(fā)的應(yīng)用在盡可能多的瀏覽器上面測試一下。
杭州網(wǎng)站建設(shè)更多:談?wù)凥TML5最突出的特性與功能
- PREV:我們怎么去看待企業(yè)網(wǎng)站推廣
- NEXT:怎么理解-程序員年過三十這道坎
-
杭州網(wǎng)站設(shè)計公司:品牌網(wǎng)站開發(fā)助力企業(yè)成長
日期:2024-12-20瀏覽次數(shù):355次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):446次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):462次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):702次
-
杭州網(wǎng)站設(shè)計公司:數(shù)據(jù)庫在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):673次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
駐馬店企業(yè),如何做一個有美感的網(wǎng)站
日期:2023-02-14瀏覽次數(shù):1424次
-
駐馬店企業(yè)為什么要做網(wǎng)站建設(shè)
日期:2023-02-14瀏覽次數(shù):1539次
-
駐馬店做網(wǎng)站:如何設(shè)計一個漂亮的網(wǎng)站
日期:2020-09-11瀏覽次數(shù):1873次
-
駐馬店網(wǎng)站制作:網(wǎng)站設(shè)計的思考之確定網(wǎng)站的欄目和版塊
日期:2020-09-11瀏覽次數(shù):1932次
最新新聞
與互聯(lián)網(wǎng)同行,實時掌握網(wǎng)建行業(yè)最新動態(tài)
-
微軟本周將面向個人推網(wǎng)絡(luò)股票交易平臺
日期:2010-11-08瀏覽次數(shù):7506次
-
Web標(biāo)準(zhǔn)技術(shù)的構(gòu)成
日期:2017-11-06瀏覽次數(shù):6675次
-
蘋果執(zhí)行最嚴(yán)關(guān)店正常,馬斯克安撫員工別怕疫情
日期:2020-03-16瀏覽次數(shù):5382次
-
媒體營銷的策略和方法
日期:2023-02-07瀏覽次數(shù):2270次
-
如何做好杭州網(wǎng)站圖片優(yōu)化?
日期:2023-08-25瀏覽次數(shù):2173次
隨機新聞
新聞新動態(tài),您需要的新聞管家
洞悉市場趨勢演變讓傳播回歸社會
免費獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報價
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場環(huán)境、衡量與預(yù)測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結(jié)合品牌理念深度挖掘項目優(yōu)勢和產(chǎn)品價值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國內(nèi)外上千家客戶達成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國杭州峰會、科雷機電等,帷拓科技始終堅持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅持“認(rèn)真堅持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號運營以及數(shù)字營銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個客戶量身定制項目整體服務(wù)方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實現(xiàn)從企業(yè)到消費者的價值轉(zhuǎn)換。