web應(yīng)用程序技術(shù)與標(biāo)準(zhǔn)化的分析

web應(yīng)用程序技術(shù)與標(biāo)準(zhǔn)化的分析

移動(dòng)應(yīng)用市場(chǎng)的必要性2010年9月，w3c正式發(fā)布了html5標(biāo)準(zhǔn)。該標(biāo)準(zhǔn)的強(qiáng)大交互、多媒體和可視化技術(shù)滿(mǎn)足了人們?cè)诨ヂ?lián)網(wǎng)應(yīng)用程序上日益增長(zhǎng)的需求。現(xiàn)今,移動(dòng)互聯(lián)網(wǎng)應(yīng)用如火如荼地高速增長(zhǎng),電子商務(wù)、社交媒體、網(wǎng)絡(luò)游戲等應(yīng)用更是加速了HTML5技術(shù)的發(fā)展。據(jù)悉,中國(guó)最早從事HTML5商業(yè)游戲開(kāi)發(fā)的創(chuàng)新工廠旗下磊友科技公司推出了全球首款完全HTML5的大型網(wǎng)絡(luò)游戲《黎明帝國(guó)》。為了給人們更靈活,更具有互操作性,能有更多的交互性并令人振奮的web應(yīng)用,HTML5標(biāo)準(zhǔn)中的關(guān)鍵技術(shù)(包括:網(wǎng)頁(yè)存儲(chǔ)、離線網(wǎng)頁(yè)應(yīng)用、音頻視頻、圖像動(dòng)畫(huà)和地理位置定位等)的應(yīng)用都進(jìn)行了標(biāo)準(zhǔn)化,并且HTML5通過(guò)增加更多API來(lái)改變用戶(hù)對(duì)互聯(lián)網(wǎng)使用方式和開(kāi)發(fā)者的建網(wǎng)需求,滿(mǎn)足用戶(hù)對(duì)互聯(lián)網(wǎng)應(yīng)用的體驗(yàn)要求這促使HTML5關(guān)鍵技術(shù)在互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)過(guò)程中顯得尤為重要。如今移動(dòng)終端的網(wǎng)絡(luò)業(yè)務(wù)越來(lái)受到用戶(hù)的關(guān)注。本文重點(diǎn)闡述了存儲(chǔ)技術(shù)在校園網(wǎng)路中的應(yīng)用,分析了HTML5的存儲(chǔ)技術(shù)在校園管理系統(tǒng)中的優(yōu)勢(shì),對(duì)于學(xué)生的學(xué)習(xí)和生活所帶來(lái)的便捷,另外也簡(jiǎn)單介紹了HTML5圖形圖像技術(shù)在2D和3D中的應(yīng)用和視頻技術(shù)的應(yīng)用。1在東南角設(shè)計(jì)中生成3d圖像HTML5的canvas是最強(qiáng)大的API之一,可以動(dòng)態(tài)生成圖形,圖像和動(dòng)畫(huà),在HTML5的游戲中使用的非常普遍。以前在制作網(wǎng)頁(yè)的圖像時(shí),直接將圖片嵌入或通過(guò)動(dòng)借助畫(huà)技術(shù)來(lái)完成,現(xiàn)在web開(kāi)發(fā)者可以使用原生的JavaScript語(yǔ)言在canvas畫(huà)圖,能直接在頁(yè)面使用這一標(biāo)簽來(lái)制作2D圖像或者通過(guò)腳本語(yǔ)言和JavaScript調(diào)用OpenGL或DriectX來(lái)3D渲染效果和作用,所以這一標(biāo)簽的應(yīng)用在瀏覽器中的應(yīng)用顯得尤為重要。對(duì)于使用canvas來(lái)創(chuàng)建2D圖像相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,僅僅需要在HTML頁(yè)面中添加<canvas>標(biāo)簽并且給元素設(shè)置ID,給出高度和寬度,這樣一個(gè)畫(huà)布的內(nèi)容就基本畫(huà)好了。如果在畫(huà)布上畫(huà)一幅圖,需要用JavaScript來(lái)描述,通過(guò)“getElementById(‘myCanvas’)”函數(shù)來(lái)找到想要使用的canvas元素進(jìn)行初始化,并且可以使用API來(lái)畫(huà)各種各樣的2D圖像。目前創(chuàng)建2D圖像的canvas的API有:canvas狀態(tài)API、簡(jiǎn)單形狀的API,填充,畫(huà)筆,檫除等等,這些API定義了基本的繪畫(huà)方法,相應(yīng)的畫(huà)布元素有更復(fù)雜的API,比如:“insertimagetocanvas”的API對(duì)于HTML5嵌入圖像就更加復(fù)雜。還有一些類(lèi)似的API都是在canvas中創(chuàng)建2D圖像使用的API,比如,“pixel-leveloperations”API,“shadow”API和“colorgradient”API等等。然而在HTML5上創(chuàng)建3D圖像的方法就變得很復(fù)雜,在過(guò)去的幾年的研究中,大致使用三種模型來(lái)創(chuàng)建3D圖像。第一種是使用標(biāo)準(zhǔn)低級(jí)API(諸如,OpenGLES),這種方法被稱(chēng)之為“WebGL”。第二種是在HTML5中使用DOMtree,并且在X3D場(chǎng)景樹(shù)之間進(jìn)行DOMtree映射,這種被稱(chēng)之為X3DOM模式。這種模型已經(jīng)有了開(kāi)發(fā)者聯(lián)盟,這個(gè)聯(lián)盟被叫做“Web3D”。第三種是O3D模式,是Google研發(fā)的一個(gè)模型。O3D是3D應(yīng)用程序的一個(gè)接口,該應(yīng)用程序是Google引進(jìn)的網(wǎng)頁(yè)基性開(kāi)源程序。一旦canvas元素在移動(dòng)瀏覽器中被廣泛應(yīng)用,移動(dòng)用戶(hù)對(duì)在終端上網(wǎng)頁(yè)游戲?qū)?huì)有極致的體驗(yàn),并能夠在無(wú)線終端上體驗(yàn)到3D的動(dòng)畫(huà)效果。2在線存儲(chǔ)技術(shù)及其在電子學(xué)習(xí)中的應(yīng)用2.1在線時(shí)長(zhǎng)為6個(gè)月的狀態(tài)在用戶(hù)沒(méi)有網(wǎng)絡(luò)連接離線的情況下,使用HTML5的離線網(wǎng)頁(yè)應(yīng)用的技術(shù)使離線網(wǎng)頁(yè)更好的運(yùn)行,它允許HTTP目標(biāo)進(jìn)行設(shè)置,使網(wǎng)頁(yè)能在沒(méi)有網(wǎng)絡(luò)連接情況下進(jìn)行訪問(wèn),HTTP目標(biāo)的設(shè)置包含在HTML文件配置中,開(kāi)發(fā)者將文件配置進(jìn)行特殊化,來(lái)達(dá)到離線訪問(wèn)的目的。在開(kāi)發(fā)支持離線的Web應(yīng)用程序時(shí),開(kāi)發(fā)者通常需要使用以下三個(gè)方面的功能:(1)離線資源緩存:需要一種方式來(lái)指明應(yīng)用程序離線工作時(shí)所需的資源文件。這樣,瀏覽器才能在在線狀態(tài)時(shí),把這些文件緩存到本地。此后,當(dāng)用戶(hù)離線訪問(wèn)應(yīng)用程序時(shí),這些資源文件會(huì)自動(dòng)加載,從而讓用戶(hù)正常使用。HTML5中,通過(guò)cachemanifest文件指明需要緩存的資源,并支持自動(dòng)和手動(dòng)兩種緩存更新方式。(2)在線狀態(tài)檢測(cè):開(kāi)發(fā)者需要知道瀏覽器是否在線,這樣才能夠針對(duì)在線或離線的狀態(tài),做出對(duì)應(yīng)的處理。在HTML5中,提供了兩種檢測(cè)當(dāng)前網(wǎng)絡(luò)是否在線的方式。(3)本地?cái)?shù)據(jù)存儲(chǔ):離線時(shí),需要能夠把數(shù)據(jù)存儲(chǔ)到本地,以便在線時(shí)同步到服務(wù)器上。為了滿(mǎn)足不同的存儲(chǔ)需求,HTML5提供了DOMStorage和WebSQLDatabase兩種存儲(chǔ)機(jī)制。HTML5推出的“WebStorage”(Web存儲(chǔ))API,它包括localStorage和sessionStorage,可以存儲(chǔ)簡(jiǎn)單對(duì)象(如應(yīng)用程序狀態(tài)),使用本地和會(huì)話(huà)存儲(chǔ)能夠很好地完成,但是對(duì)大量的結(jié)構(gòu)化數(shù)據(jù)進(jìn)行處理時(shí),需要用到HTML5的“WebSQLDatabase”API接口。在HTML5中網(wǎng)絡(luò)存儲(chǔ)按照生命周期分為2種,一種是基于會(huì)話(huà)(session),這種存儲(chǔ)周期只是當(dāng)前會(huì)話(huà),當(dāng)網(wǎng)頁(yè)被關(guān)被后,或者被轉(zhuǎn)到其他網(wǎng)站后,存儲(chǔ)也就被銷(xiāo)毀。另外一種是本地存儲(chǔ),當(dāng)網(wǎng)頁(yè)下次被打開(kāi)的時(shí)候,你仍然可以訪問(wèn)上次打開(kāi)該網(wǎng)頁(yè)時(shí)存儲(chǔ)的數(shù)據(jù),比如本地存儲(chǔ)的網(wǎng)站用戶(hù)名就可以使用這種方式。而兩者的最大區(qū)別在于關(guān)掉標(biāo)簽頁(yè)瀏覽前重啟這個(gè)存儲(chǔ)還在不在。LocalStorage的技術(shù)與cookies類(lèi)似,但它存儲(chǔ)網(wǎng)頁(yè)的數(shù)據(jù)量是目前cookies的1000倍,并且它是將網(wǎng)站的信息存儲(chǔ)在電腦上,在用戶(hù)訪問(wèn)web站點(diǎn)進(jìn)行數(shù)據(jù)加載后,對(duì)LocalStorage的數(shù)據(jù)通過(guò)JavaScript進(jìn)行訪問(wèn),但cookies存儲(chǔ)的信息則不同,當(dāng)訪問(wèn)網(wǎng)頁(yè)時(shí),需要將cookies中的數(shù)據(jù)信息返回到web服務(wù)器。正是由于LocalStorage的技術(shù)的這個(gè)特點(diǎn),實(shí)現(xiàn)了離線網(wǎng)頁(yè)的應(yīng)用,它不但在本地設(shè)置了大的緩存,而且內(nèi)嵌了一個(gè)本地的SQL數(shù)據(jù)庫(kù),這種本地存儲(chǔ)和SQL數(shù)據(jù)庫(kù)加速了web應(yīng)用的運(yùn)行,還使用戶(hù)在網(wǎng)絡(luò)斷開(kāi)的情況下能夠繼續(xù)訪問(wèn)網(wǎng)頁(yè)。縱使本地存儲(chǔ)的信息量再大,也不可能將網(wǎng)絡(luò)的所有數(shù)據(jù)信息全部存儲(chǔ),本地存儲(chǔ)只是將客戶(hù)端瀏覽器需要的文件進(jìn)行緩存,當(dāng)進(jìn)行離線訪問(wèn)時(shí)web服務(wù)器會(huì)告知客戶(hù)端在什么條件下才可以離線訪問(wèn),離線訪問(wèn)需要哪些文件,當(dāng)客戶(hù)端完成了相應(yīng)的工作后才可以離線訪問(wèn),故網(wǎng)頁(yè)的離線應(yīng)用是基于在線的web應(yīng)用。當(dāng)訪問(wèn)一個(gè)網(wǎng)站時(shí),它會(huì)根據(jù)用戶(hù)的設(shè)置需求下載瀏覽器需要的文件,比如圖片和視頻等,當(dāng)這些文件下載完畢之后,會(huì)存儲(chǔ)在本地緩存中,一旦網(wǎng)絡(luò)斷開(kāi)用戶(hù)如果還想繼續(xù)瀏覽網(wǎng)頁(yè)中的數(shù)據(jù)或者重新訪問(wèn)該web站點(diǎn)時(shí),用戶(hù)同樣可以在離線的情況下訪問(wèn),但相應(yīng)的瀏覽器會(huì)提示,當(dāng)前的訪問(wèn)是在離線情況的訪問(wèn)并且使用的數(shù)據(jù)是本地?cái)?shù)據(jù)。2.2系統(tǒng)的搭建和應(yīng)用在現(xiàn)今電子學(xué)習(xí)活動(dòng)越來(lái)越盛行的時(shí)代,基于學(xué)習(xí)管理系統(tǒng)的網(wǎng)頁(yè)Moodle(模塊化面向?qū)ο蟮膭?dòng)態(tài)學(xué)習(xí)環(huán)境)在學(xué)術(shù)環(huán)境中對(duì)于支持學(xué)習(xí)活動(dòng)和允許教師給出在線測(cè)試已經(jīng)受到了很大的歡迎。然而一些學(xué)校不能支付昂貴的基礎(chǔ)設(shè)施把他們的學(xué)習(xí)管理系統(tǒng)帶入因特網(wǎng)。另外,一些學(xué)生,在家上網(wǎng)也存在困難,為了解決諸如此類(lèi)的問(wèn)題,HTML5的離線應(yīng)用和網(wǎng)頁(yè)存儲(chǔ)起了關(guān)鍵的作用。通過(guò)設(shè)計(jì)一個(gè)系統(tǒng)將能夠使移動(dòng)瀏覽器把一個(gè)離線的用戶(hù)接口帶給學(xué)生使用這個(gè)系統(tǒng),學(xué)生們?cè)趯W(xué)校期間和在家沒(méi)有網(wǎng)絡(luò)情況下做作業(yè),可以在校園moodle上對(duì)任務(wù)的回收和提交在移動(dòng)手機(jī)上進(jìn)行同步。系統(tǒng)概況如圖1所示。學(xué)生們通過(guò)系統(tǒng)進(jìn)入一個(gè)課程并且他們被分配一個(gè)測(cè)試任務(wù),他們能選擇在線做(在學(xué)校的期間)也可以選擇用它們的移動(dòng)電話(huà)離線做(不在學(xué)校期間)。假設(shè)他們的電話(huà)能通過(guò)WIFI設(shè)備訪問(wèn)學(xué)校的網(wǎng)絡(luò),那么學(xué)生們將能夠通過(guò)所謂的測(cè)試點(diǎn)(測(cè)試點(diǎn)(quizpoint)是一個(gè)訪問(wèn)點(diǎn),在這個(gè)訪問(wèn)點(diǎn)上試圖把測(cè)試帶回家的學(xué)生們能夠從中下載。)的應(yīng)用同步他們的測(cè)試,并帶回家,如圖2所示。在家里,學(xué)生們能夠?yàn)g覽并完成他們的測(cè)驗(yàn)。學(xué)生們能夠在他們被允許的時(shí)間內(nèi)進(jìn)測(cè)試或下載測(cè)試。學(xué)生們從測(cè)試點(diǎn)中得到唯一的ID,然后將會(huì)通過(guò)在桌面端的測(cè)試點(diǎn)中的URL得到離線網(wǎng)頁(yè)應(yīng)用。一旦訪問(wèn)了這個(gè)URL,移動(dòng)電話(huà)將會(huì)下載所有相關(guān)的應(yīng)用文件,在下載完成后,應(yīng)用就可以離線運(yùn)行了,圖3所示是學(xué)生通過(guò)選擇相應(yīng)的測(cè)試ID,圖4所示是通過(guò)選擇第一個(gè)測(cè)試ID下載了某一階段英語(yǔ)測(cè)驗(yàn)的的文件。3兩種類(lèi)型視頻編碼譯碼器的選擇提及網(wǎng)頁(yè)中的視頻無(wú)疑會(huì)想到flash技術(shù),那么HTML5需要直面的是與flash的競(jìng)爭(zhēng)關(guān)系,然而在PC端HTML5技術(shù)暫時(shí)還不能動(dòng)搖flash的霸主地位,但在移動(dòng)設(shè)備上flash的執(zhí)行效率是最大的問(wèn)題,這卻是HTML5的優(yōu)勢(shì),比如手機(jī)使用HTML5技術(shù)看視頻時(shí)其電池續(xù)航能力是flash的一倍。在該技術(shù)上,HTML5增加了<video>標(biāo)簽,通過(guò)使用該標(biāo)簽,在網(wǎng)頁(yè)中無(wú)需嵌入flash插件而達(dá)到播放視頻的目的。Video標(biāo)簽包含了src(視頻的URL)、poster(視頻封面,沒(méi)有播放時(shí)顯示的圖片)、preload(預(yù)加載)、autoplay(自動(dòng)播放)、loop(循環(huán)播放)、controls(瀏覽器自帶的控制條)、width(視頻寬度)、height(視頻高度)等幾個(gè)屬性,以及一個(gè)內(nèi)部使用的標(biāo)簽<source>,通過(guò)這些屬性對(duì)待播放的視頻進(jìn)行設(shè)置,舉例如下所示:<videoposter=”/2012/01/25sintel/poster.pgn”controls=”controls”preload=”metadata”loop=”loop”autoplaywidth=”800”height=”250”><sourcesrc=”/2012/01/25/sintel/trailer.ogv”type=video/ogg;codecs=”theor,vorbis”media=”screen”/>。然而,不同瀏覽器支持的視頻類(lèi)型又有些不同,特別的iPhone,iPad,Android他們支持的情況也有區(qū)別,導(dǎo)致了本來(lái)簡(jiǎn)簡(jiǎn)單單的<video>變得復(fù)雜,video元素支持兩種視頻格式的表格如表1所示:其中Ogg=帶有Thedora視頻編碼和Vorbis音頻編碼的Ogg文件MPEG4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件。因此不僅瀏覽器需要理解<video>標(biāo)簽,而且需要一個(gè)必要的編碼譯碼器來(lái)播放視頻,故HTML5規(guī)范需要選擇一個(gè)視頻編碼譯碼器,并且讓每一個(gè)瀏覽器制造商執(zhí)行。目前,在HTML5中使用使用<video>標(biāo)簽,需要考慮三種情況:一是支持OggTheora或者VP8的Opera瀏覽器、Mozilla瀏覽器和Chrome瀏覽器;二是支