《電子技術(shù)應(yīng)用》
您所在的位置:首頁(yè) > 通信與網(wǎng)絡(luò) > 設(shè)計(jì)應(yīng)用 > 基于HTML 5的校園網(wǎng)應(yīng)用系統(tǒng)的探討
基于HTML 5的校園網(wǎng)應(yīng)用系統(tǒng)的探討
來(lái)源:微型機(jī)與應(yīng)用2013年第13期
陳甜遠(yuǎn)
(解放軍外國(guó)語(yǔ)學(xué)院 信息管理中心,河南 洛陽(yáng) 471000)
摘要: 作為下一代Web應(yīng)用標(biāo)準(zhǔn)的HTML 5,更加注重Web應(yīng)用和表現(xiàn)及在移動(dòng)Web平臺(tái)良好的用戶體驗(yàn)。HTML 5的瀏覽器/服務(wù)器的開(kāi)發(fā)模式、對(duì)多媒體標(biāo)簽功能的支持以及在移動(dòng)應(yīng)用跨平臺(tái)性等優(yōu)勢(shì),對(duì)基于傳統(tǒng)技術(shù)的校園網(wǎng)應(yīng)用系統(tǒng)來(lái)說(shuō),在開(kāi)發(fā)和使用中都有了很大改進(jìn)。通過(guò)對(duì)HTML 5新特性和在校園應(yīng)用系統(tǒng)優(yōu)勢(shì)的分析,旨在為校園網(wǎng)應(yīng)用系統(tǒng)的開(kāi)發(fā)提供新思路。
Abstract:
Key words :

摘  要: 作為下一代Web應(yīng)用標(biāo)準(zhǔn)的HTML 5,更加注重Web應(yīng)用和表現(xiàn)及在移動(dòng)Web平臺(tái)良好的用戶體驗(yàn)。HTML 5的瀏覽器/服務(wù)器的開(kāi)發(fā)模式、對(duì)多媒體標(biāo)簽功能的支持以及在移動(dòng)應(yīng)用跨平臺(tái)性等優(yōu)勢(shì),對(duì)基于傳統(tǒng)技術(shù)的校園網(wǎng)應(yīng)用系統(tǒng)來(lái)說(shuō),在開(kāi)發(fā)和使用中都有了很大改進(jìn)。通過(guò)對(duì)HTML 5新特性和在校園應(yīng)用系統(tǒng)優(yōu)勢(shì)的分析,旨在為校園網(wǎng)應(yīng)用系統(tǒng)的開(kāi)發(fā)提供新思路。
關(guān)鍵詞: HTML 5;校園網(wǎng)應(yīng)用系統(tǒng);移動(dòng)Web

 隨著網(wǎng)絡(luò)多媒體技術(shù)的高速發(fā)展和信息社會(huì)的到來(lái),教育信息化正在全球蓬勃發(fā)展。其中,以數(shù)字化校園為代表的校園網(wǎng)應(yīng)用系統(tǒng)在高校中的應(yīng)用最為廣泛。這個(gè)平臺(tái)旨在對(duì)學(xué)校的教學(xué)、科研、管理和服務(wù)等的各項(xiàng)業(yè)務(wù)進(jìn)行數(shù)字化建設(shè),實(shí)現(xiàn)信息資源的全方位獲得和共享及教育過(guò)程的全面信息化。但是隨著高校信息化建設(shè)的深入,開(kāi)發(fā)平臺(tái)混亂、標(biāo)準(zhǔn)不統(tǒng)一、移動(dòng)網(wǎng)絡(luò)應(yīng)用等問(wèn)題也越來(lái)越突出。HTML 5作為下一代網(wǎng)頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn),支持豐富的多媒體標(biāo)簽,為多媒體技術(shù)的可協(xié)同編輯提供了更好的平臺(tái),并且在移動(dòng)互聯(lián)領(lǐng)域,HTML 5基于網(wǎng)頁(yè)應(yīng)用的優(yōu)勢(shì),為用戶提供了更豐富、更智能、更人性化的體驗(yàn)。
1 校園網(wǎng)應(yīng)用系統(tǒng)存在的問(wèn)題
 目前,各個(gè)高校經(jīng)過(guò)多年的建設(shè),均已經(jīng)建立了一系列的校園網(wǎng)應(yīng)用系統(tǒng),按照高校業(yè)務(wù)需求,一般分為行政管理中心、教學(xué)資源管理中心、協(xié)作服務(wù)中心三類。這些平臺(tái)對(duì)高校的業(yè)務(wù)發(fā)展起到了一定的支撐作用,但隨著應(yīng)用范圍的深入和實(shí)際需求的提高,該網(wǎng)絡(luò)應(yīng)用平臺(tái)的瓶頸問(wèn)題也越來(lái)越突出。
?。?)應(yīng)用系統(tǒng)缺乏統(tǒng)一標(biāo)準(zhǔn)、傳統(tǒng)技術(shù)架構(gòu)增加了開(kāi)發(fā)成本
 由于各種網(wǎng)絡(luò)應(yīng)用系統(tǒng)開(kāi)發(fā)缺乏統(tǒng)一而具體的標(biāo)準(zhǔn)和規(guī)范,系統(tǒng)開(kāi)發(fā)平臺(tái)混亂、信息標(biāo)準(zhǔn)不統(tǒng)一、數(shù)據(jù)格式各不相同、部分應(yīng)用系統(tǒng)功能交叉重疊,致使資源利用率低。傳統(tǒng)網(wǎng)絡(luò)應(yīng)用系統(tǒng)技術(shù)架構(gòu)多為客戶端/服務(wù)器(C/S)模式,大多數(shù)軟件只需在本地執(zhí)行,與遠(yuǎn)程服務(wù)器進(jìn)行簡(jiǎn)單的數(shù)據(jù)交互即可。這使得應(yīng)用程序與操作系統(tǒng)之間的互操作標(biāo)準(zhǔn)性差,接口復(fù)雜。同時(shí),由于其對(duì)客戶端的軟、硬件要求都很高,多數(shù)應(yīng)用程序的開(kāi)發(fā)必須由訓(xùn)練有素的專業(yè)人員來(lái)實(shí)施,開(kāi)發(fā)后的維護(hù)升級(jí)等問(wèn)題也很復(fù)雜,且隨著軟件的不斷更新?lián)Q代,C/S模式中的種種矛盾日益凸現(xiàn)。
?。?)應(yīng)用系統(tǒng)安裝各種瀏覽器插件,給用戶造成諸多不便
 目前,各種網(wǎng)絡(luò)應(yīng)用系統(tǒng)通常要用到音頻、視頻、交互技術(shù)等多媒體技術(shù)。用戶通過(guò)校園門戶網(wǎng)站進(jìn)入相關(guān)應(yīng)用系統(tǒng)時(shí),不同的系統(tǒng)平臺(tái)會(huì)要求用戶安裝相關(guān)多媒體插件才能正常使用。例如用戶在使用視頻點(diǎn)播系統(tǒng)前,需要下載安裝Flash插件或RealPlayer插件,安裝后用戶才能觀看視頻。這就增加了系統(tǒng)運(yùn)行的條件,同時(shí)也給用戶的操作帶來(lái)難度,尤其是對(duì)于計(jì)算機(jī)水平不高的人可能不知如何下手。而對(duì)于校園網(wǎng)上日益增多的應(yīng)用系統(tǒng),需要用戶安裝的插件也越來(lái)越多,使得系統(tǒng)資源占用增大,運(yùn)行風(fēng)險(xiǎn)加大,一旦系統(tǒng)崩潰,重裝系統(tǒng)后還要面臨安裝許多插件的麻煩。
?。?)在校園網(wǎng)移動(dòng)Web應(yīng)用開(kāi)發(fā)和使用中出現(xiàn)的兼容性問(wèn)題
 近些年隨著網(wǎng)絡(luò)通信技術(shù)的日漸發(fā)達(dá),傳統(tǒng)的計(jì)算機(jī)網(wǎng)絡(luò)由有線網(wǎng)絡(luò)趨向無(wú)線網(wǎng)絡(luò)、由固定趨向移動(dòng)、由單一業(yè)務(wù)趨向多媒體,發(fā)展至今,移動(dòng)技術(shù)已日漸成熟。同時(shí),網(wǎng)絡(luò)客戶端也由傳統(tǒng)的個(gè)人PC發(fā)展為功能強(qiáng)大的智能手機(jī)、平板電腦、筆記本等移動(dòng)網(wǎng)絡(luò)終端。因此,許多學(xué)校啟用了無(wú)線校園計(jì)劃,建成高效率、廣覆蓋、易管理的安全校園無(wú)線網(wǎng)絡(luò)。面對(duì)各種系統(tǒng)平臺(tái),對(duì)于開(kāi)發(fā)者來(lái)說(shuō),在開(kāi)發(fā)網(wǎng)絡(luò)應(yīng)用系統(tǒng)的同時(shí)還要花費(fèi)許多時(shí)間來(lái)研究各個(gè)移動(dòng)平臺(tái)上的兼容性問(wèn)題,例如開(kāi)發(fā)者要開(kāi)發(fā)一款安裝在智能手機(jī)上校園網(wǎng)即時(shí)通信工具,還要考慮它在不同智能手機(jī)系統(tǒng)上的兼容性,分別開(kāi)發(fā)Android、iOS、Symbian等多個(gè)版本的應(yīng)用系統(tǒng),這將大大增加開(kāi)發(fā)成本。而用戶需要選擇相應(yīng)系統(tǒng)版本對(duì)應(yīng)下載安裝才能使用,如果應(yīng)用系統(tǒng)需要升級(jí)時(shí),用戶還要及時(shí)安裝升級(jí)包更新軟件,在安裝過(guò)程中還有可能因?yàn)榕c其他軟件不兼容,出現(xiàn)安裝失敗。這勢(shì)必會(huì)額外增加用戶的使用負(fù)擔(dān),移動(dòng)無(wú)線網(wǎng)絡(luò)的靈活、便捷優(yōu)勢(shì)將不再突顯。
2 HTML 5的發(fā)展歷程及特點(diǎn)
 HTML標(biāo)準(zhǔn)自1999年12月發(fā)布HTML 4.01后,后繼的HTML 5和其他標(biāo)準(zhǔn)被束之高閣,為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展,一些公司聯(lián)合起來(lái),成立了一個(gè)叫做Web超文本應(yīng)用技術(shù)工作組(WHATWG)的組織。WHATWG致力于Web表單和應(yīng)用程序,而萬(wàn)維網(wǎng)聯(lián)盟(W3C)專注于XHTML 2.0。在2006年,雙方?jīng)Q定進(jìn)行合作,來(lái)創(chuàng)建一個(gè)新版本的HTML。2008年1月22日W3C公布HTML 5的第一份正式草案。2012年12月17日,W3C正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML 5規(guī)范已經(jīng)正式定稿。目前,雖然HTML 5仍處于完善之中,然而,大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML 5支持[1]。
 HTML 5和以前的版本不同,它不僅成為HTML、XHTML以及HTML.DOM的新標(biāo)準(zhǔn),而且它的使命并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容,而是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)。在這個(gè)平臺(tái)上,視頻、音頻、圖像、動(dòng)畫(huà)以及同電腦的交互都將被標(biāo)準(zhǔn)化。因此,HTML 5不僅僅是一個(gè)技術(shù)點(diǎn)的發(fā)展,而是整個(gè)Web開(kāi)發(fā)標(biāo)準(zhǔn)的平臺(tái)革新。HTML 5具有以下優(yōu)點(diǎn)。
2.1 網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)記語(yǔ)義化,網(wǎng)頁(yè)布局更簡(jiǎn)潔
 在之前版本中的頁(yè)面結(jié)構(gòu),一般使用div元素加上描述id或class來(lái)標(biāo)記,而HTML 5中增加了語(yǔ)義化標(biāo)簽,如header、nav、section、article、aside、footer,可以更方便、快捷地實(shí)現(xiàn)網(wǎng)頁(yè)布局。同時(shí)在HTML 5中提供了語(yǔ)義化的Tag,可以通過(guò)相關(guān)的標(biāo)記輕松實(shí)現(xiàn),而且這種標(biāo)簽將有利于搜索引擎的索引整理[2]。兩個(gè)版本的頁(yè)面結(jié)構(gòu)對(duì)比如圖1和圖2所示。

2.2 網(wǎng)頁(yè)多媒體特性
 支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能,與網(wǎng)站自帶的APPS、攝像頭、影音功能相得益彰。
2.3 離線存儲(chǔ)與本地?cái)?shù)據(jù)庫(kù)
 在HTML 5中可以很方便地實(shí)現(xiàn)離線存儲(chǔ),在用戶沒(méi)有與因特網(wǎng)連接時(shí),照樣可以訪問(wèn)站點(diǎn)或應(yīng)用,在用戶與因特網(wǎng)連接時(shí),自動(dòng)更新緩存數(shù)據(jù)。
2.4 設(shè)備兼容特性
 HTML 5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者提供了更多功能上的優(yōu)化選擇,具備更多體驗(yàn)功能的優(yōu)勢(shì)。HTML 5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口,使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連。
3 HTML 5在校園網(wǎng)應(yīng)用系統(tǒng)方面的優(yōu)勢(shì)
 HTML 5橫空出世,其新特性為當(dāng)前數(shù)字化校園應(yīng)用系統(tǒng)開(kāi)發(fā)與應(yīng)用中出現(xiàn)的問(wèn)題提供了新思路,具有廣闊的發(fā)展前景。
 首先,HTML 5將成為下一代網(wǎng)頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn),在它引領(lǐng)的應(yīng)用平臺(tái)上,各種多媒體技術(shù)以及同計(jì)算機(jī)的交互技術(shù)都被標(biāo)準(zhǔn)化,這將為應(yīng)用系統(tǒng)開(kāi)發(fā)者提供一個(gè)統(tǒng)一且完整的編程環(huán)境。對(duì)于傳統(tǒng)網(wǎng)絡(luò)應(yīng)用系統(tǒng)(C/S)的開(kāi)發(fā)模式弊端,HTML 5借助瀏覽器/服務(wù)器(B/S)模式從結(jié)構(gòu)上解決了這個(gè)問(wèn)題。它要求客戶端盡量簡(jiǎn)單化和標(biāo)準(zhǔn)化,在操作過(guò)程中,用戶只需要通過(guò)一定格式(HTML)向服務(wù)端發(fā)出請(qǐng)求,大量的運(yùn)算和處理工作即可在服務(wù)端完成,隨后服務(wù)端再以標(biāo)準(zhǔn)格式返回處理結(jié)果。這樣一來(lái),客戶端便轉(zhuǎn)為“輕量級(jí)”運(yùn)行了?;诜?wù)端技術(shù)實(shí)現(xiàn)的封裝使Web應(yīng)用的開(kāi)發(fā)難度迅速下降,應(yīng)用開(kāi)發(fā)基本不再需要和操作系統(tǒng)打交道,而只需集中在應(yīng)用層使用標(biāo)準(zhǔn)化的控件和API,開(kāi)發(fā)者也可以完全將注意力集中到邏輯設(shè)計(jì)上來(lái)[3]。

 


 其次,HTML 5的目標(biāo)是將Web從那些非開(kāi)放性富插件中解放出來(lái),這就意味著很多插件在HTML 5中被扔掉。與傳統(tǒng)瀏覽器通過(guò)安裝“插件”支持兼容性不同,HTML 5對(duì)多媒體標(biāo)簽支持的功能使一些多媒體對(duì)象(如動(dòng)畫(huà)、視頻、音頻等)可以無(wú)需第三方插件而像圖片那樣直接嵌入到網(wǎng)頁(yè)中。其中標(biāo)簽CANVAS可以讓瀏覽器非常方便地繪制圖形,用戶可以像使用本地應(yīng)用一樣去繪制二維圖形和三維圖形。另外它的MEDIA、AUDIO、VIDEO等標(biāo)簽還進(jìn)一步擴(kuò)展了瀏覽器的多媒體能力,用戶可以用這些標(biāo)簽替代瀏覽器原來(lái)需要的各種視頻插件。例如,以往訪問(wèn)搜狐視頻網(wǎng)站時(shí)首先要下載一個(gè)插件,安裝這個(gè)插件后才能看視頻,但現(xiàn)在使用經(jīng)過(guò)HTML 5編程的瀏覽器就可以免去這些麻煩,使用起來(lái)很方便。因此基于HTML 5的校園網(wǎng)應(yīng)用平臺(tái)執(zhí)行效率更高、占用資源更少、消耗電能更少,使Web能夠輕松實(shí)現(xiàn)類似本地的應(yīng)用體驗(yàn),用戶無(wú)需再為安裝各種插件而頭痛。
 最后,HTML 5具有移動(dòng)互聯(lián)網(wǎng)應(yīng)用的技術(shù)性能優(yōu)勢(shì),使其在移動(dòng)校園網(wǎng)應(yīng)用中大展身手。其優(yōu)勢(shì)有以下3個(gè)方面:
?。?)HTML 5具有跨平臺(tái)性,可幫助融合多個(gè)平臺(tái),包括媒體播放器、智能手機(jī)、平板電腦、筆記本電腦、臺(tái)式電腦等各種移動(dòng)終端,從而能為用戶帶來(lái)統(tǒng)一的使用體驗(yàn)??缙脚_(tái)能力也使開(kāi)發(fā)者無(wú)需再投入大量精力面對(duì)目前市場(chǎng)上出現(xiàn)的數(shù)量龐大的終端適配工作。對(duì)于開(kāi)發(fā)者來(lái)說(shuō),只需要使用WebApp,因?yàn)樗墙y(tǒng)一的標(biāo)準(zhǔn),無(wú)需為適應(yīng)不同的移動(dòng)系統(tǒng)平臺(tái)而增加研發(fā)成本,所以如果校園網(wǎng)使用基于HTML 5的應(yīng)用WebApp將遠(yuǎn)遠(yuǎn)優(yōu)于本地應(yīng)用。
 (2)移動(dòng)應(yīng)用系統(tǒng)升級(jí)對(duì)用戶完全透明,不需要讓用戶知道。因?yàn)樗峭ㄟ^(guò)瀏覽器完成,通過(guò)云端、服務(wù)器端實(shí)現(xiàn)的,所以當(dāng)應(yīng)用系統(tǒng)發(fā)現(xiàn)缺陷或更新內(nèi)容時(shí),可以在服務(wù)器端進(jìn)行升級(jí)并很快在客戶端看到效果。這種智能的升級(jí)方式減少了用戶的下載和安裝升級(jí)包的麻煩[4]。
 (3)HTML 5改進(jìn)用戶的諸多友好體驗(yàn)。HTML 5廣義指的是包括HTML 5、CSS 3和JavaScript在內(nèi)的一套技術(shù)組合。HTML 5規(guī)定了網(wǎng)頁(yè)語(yǔ)義結(jié)構(gòu)和網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn),而CSS 3是CSS的升級(jí)版,提供了更多的風(fēng)格和更強(qiáng)的效果,可以輕松實(shí)現(xiàn)圓角、陰影、漸變等效果。例如,以前網(wǎng)頁(yè)上要做個(gè)圓角表格,用CSS要通過(guò)定位事先做好的背景圖片,而現(xiàn)在的CSS 3只需要一個(gè)簡(jiǎn)單的圓角屬性border-radius即可完成。同時(shí),HTML 5基于Web開(kāi)發(fā)的應(yīng)用與云端服務(wù)有著天然的聯(lián)系,這樣可以很便利地提供各種云服務(wù),為移動(dòng)校園網(wǎng)提供最好的服務(wù)體驗(yàn)。
 盡管HTML 5目前還沒(méi)有成為W3C正式的推薦標(biāo)準(zhǔn),其發(fā)展也將面臨著諸如技術(shù)不完善、視頻格式標(biāo)準(zhǔn)分歧等許多挑戰(zhàn),但是這些都不能阻擋HTML 5成為下一代Web開(kāi)發(fā)的標(biāo)準(zhǔn)。而且它作為未來(lái)十幾年內(nèi)Web開(kāi)發(fā)技術(shù)中的最前沿技術(shù)之一,將徹底改變現(xiàn)有的Web應(yīng)用開(kāi)發(fā)模式,并將帶來(lái)更多的便捷和更豐富的應(yīng)用,最終完成將Web帶入一個(gè)成熟應(yīng)用平臺(tái)的使命。HTML 5的強(qiáng)化網(wǎng)頁(yè)應(yīng)用和表現(xiàn)的特點(diǎn)以及在移動(dòng)互聯(lián)網(wǎng)應(yīng)用平臺(tái)的技術(shù)優(yōu)勢(shì),可以改善或解決當(dāng)前校園網(wǎng)應(yīng)用系統(tǒng)出現(xiàn)的各種問(wèn)題,并逐漸成為校園網(wǎng)絡(luò)平臺(tái)建設(shè)的主流技術(shù)。因此,廣大網(wǎng)絡(luò)應(yīng)用系統(tǒng)開(kāi)發(fā)者應(yīng)盡快學(xué)習(xí)并掌握這門新技術(shù),使之更好地為校園信息化發(fā)展服務(wù)。
參考文獻(xiàn)
[1] 百度百科[EB/OL].http://baike.baidu.com/View/951383.htm/.
[2] 宋昭壽,胡忠旭,漆麗娟.HTML5網(wǎng)頁(yè)設(shè)計(jì)探析[J].紅河學(xué)院學(xué)報(bào),2012(2):53-56.
[3] 云晴.HTML 5完勝FlashWeb應(yīng)用開(kāi)發(fā)——推廣門檻進(jìn)一步降低[J].通信界,2011(42):16.
[4] 魏永明.HTML 5:移動(dòng)互聯(lián)行業(yè)的明日之星[J].集成電路應(yīng)用,2011(12):8-10.

此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。