基于HTML5的校園網(wǎng)站前端優(yōu)化的軟件工程實踐與研究

（2）將內(nèi)容和展示分離。B類和I類標(biāo)簽依然在前臺代碼中保留，但它們與之前原有的舊界面代碼已有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識出來，而不是為了給它們設(shè)置粗體或斜體樣式。而U、font、center、strike等標(biāo)簽將被完全被HTML5標(biāo)簽替代。

（3）全新的表單輸入對象。包括日期、URL、Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，這一使用機器可以識別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語義Web的處理更為簡單。總而言之，這種與網(wǎng)站前臺結(jié)構(gòu)的改進可視得內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁，從而讓校園網(wǎng)頁對于搜索引擎或智能手機終端讀屏軟件而言更為友好。

（4）多媒體對象在HTML5前臺界面代碼中，不再全部綁定在object或embed Tag中，而是各種多媒體元素擁有獨立的標(biāo)簽。舊版的校園網(wǎng)站在網(wǎng)絡(luò)上展示視頻、音頻和動畫，除了使用第三方自主開發(fā)的播放器外，最為頻繁的軟件工具插件就是FLASH了，使得各種多媒體都需要在瀏覽器中安裝各種插件才能使用，而且有時速度很慢。而在HTML5中，提供了音頻視頻的標(biāo)準(zhǔn)接口，通過HTML5中的相關(guān)技術(shù)，校園網(wǎng)站中的視頻、動畫、音頻等多媒體再也不需要安裝插件，只需要專用的video元素標(biāo)簽與audio元素標(biāo)簽來處理視頻數(shù)據(jù)與音頻數(shù)據(jù)就可以了。

（5）本地數(shù)據(jù)庫優(yōu)化。這個工程方案將內(nèi)嵌一個本地的SQL數(shù)據(jù)庫，已加速交互式搜索、緩存以及索引功能。眾所周知在HTML4時代的網(wǎng)站由于用戶的相關(guān)數(shù)據(jù)等一般只能存儲在cookie中，但是由于瀏覽器基于cookie的限制使得網(wǎng)站存儲數(shù)據(jù)格式應(yīng)盡量精簡。在校園網(wǎng)中使用HTML5結(jié)合JavaScript技術(shù)，使得校園網(wǎng)變成了一個富客戶端。為了破解cookie的一系列原生限制，HTML5通過JavaScript新的API就能直接存儲大量的數(shù)據(jù)到客戶端瀏覽器，進一步支持復(fù)雜的本地數(shù)據(jù)庫，總的來說，HTML5支持兩種WEB存儲格式，分別是永久性的本地存儲（Local Storage）和會話級別的本地存儲（Session Storage）。

2 校園網(wǎng)站多媒體與數(shù)據(jù)庫的工程實現(xiàn)機制

（1）視頻元素與音頻元素的實現(xiàn)機制

利用video元素創(chuàng)建HTML頁面，并設(shè)置video資源和SRC屬性。本文的視頻解決方案支持MP4、webm、3gpp、m4v、mpeg、ogg、quicktime等多種豐富的視頻數(shù)據(jù)格式。接著通過JavaScript腳本添加播放、暫停和聲音調(diào)節(jié)按鈕，并創(chuàng)建JS函數(shù)來控制video播放。音頻元素的操作和視頻元素的操作步驟相同。

另外，本文通過source元素來為同一個媒體數(shù)據(jù)指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放，瀏覽器的選擇順序為代碼中的書寫順序，并從上往下判斷瀏覽器本身對該播放格式是否支持，直到匹配到自己支持的播放格式為止。Source元素具有幾個屬性：src屬性指播放媒體的URL地址；type表示媒體類型，對應(yīng)屬性值為播放文件的MIME類型，該屬性中的codes參數(shù)表示所使用的媒體編碼格式。

總之，因為不同瀏覽器對于各種媒體的媒體類型及編碼格式的支持情況都各不相同，所以使用source元素來指定各種媒體類型是非常必要的。

（2）前臺HTML5界面對本地數(shù)據(jù)庫的調(diào)用與數(shù)據(jù)存儲

在HTML5中增加了一個JS對象：Session Storage。通過此對象可以直接操作存儲在瀏覽器中的會話級別Web存儲數(shù)據(jù)。存儲在Session Storage中的數(shù)據(jù)首先是Key-Value形式的，它跟瀏覽器當(dāng)前會話有關(guān)，當(dāng)會話結(jié)束后，數(shù)據(jù)就會自動清除。

接著在最新的JavaScript的API中增加了Local Storage對象，以便于校園網(wǎng)用戶永久存儲的Web端數(shù)據(jù)，且數(shù)據(jù)不會隨著http請求發(fā)送到后臺服務(wù)器，而且存儲數(shù)據(jù)大小無需在工程開發(fā)中考慮，因為在HTML5的標(biāo)準(zhǔn)中要求瀏覽器至少支持4MB的數(shù)據(jù)。

最后，對于復(fù)雜的Web應(yīng)用數(shù)據(jù)，HTML5提供了一個瀏覽器端的數(shù)據(jù)庫支持，允許直接通過JavaScript的API在瀏覽器端創(chuàng)建一個本地的數(shù)據(jù)庫，而且支持標(biāo)準(zhǔn)的SQL操作，讓離線的Web應(yīng)用更加方便的存儲結(jié)構(gòu)化數(shù)據(jù)。

操作本地數(shù)據(jù)庫的基本步驟是：通過openDatabase方法創(chuàng)建一個訪問數(shù)據(jù)庫的對象；使用所創(chuàng)建的數(shù)據(jù)庫訪問對象來執(zhí)行Transaction方法，通過此方法可以設(shè)置一個開啟事務(wù)成功的事件響應(yīng)方法，在事件響應(yīng)方法中執(zhí)行SQL語句即可；最后可通過executeSql方法完成對數(shù)據(jù)的查詢。

3 結(jié)語

本文通過現(xiàn)代中學(xué)網(wǎng)站在移動互聯(lián)網(wǎng)時代的數(shù)據(jù)與交互需求，利用HTML5結(jié)合JavaScript腳本技術(shù)，研究了多媒體數(shù)據(jù)在網(wǎng)站前臺界面的優(yōu)化方式，并分析了基于前端界面優(yōu)化與原有網(wǎng)站后臺數(shù)據(jù)一致性需求衍生的網(wǎng)站數(shù)據(jù)庫解決方案，為進一步的軟件工程實踐提供了指導(dǎo)與實現(xiàn)機制。

參考文獻：

（1）HTML5——下一代Web開發(fā)標(biāo)準(zhǔn)研究，劉華星、楊庚，《計算機技術(shù)與發(fā)展》， 2011， 21（8）：54-58

（2）HTML5新特性在移動平臺中的應(yīng)用研究，黃磊、張媛，《數(shù)字技術(shù)與應(yīng)用》，2015（9）：102-102