web應(yīng)用程序技術(shù)與標準化的分析

web應(yīng)用程序技術(shù)與標準化的分析

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