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

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

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

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

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

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

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

利用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元素來為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進(jìn)行播放，瀏覽器的選擇順序?yàn)榇a中的書寫順序，并從上往下判斷瀏覽器本身對(duì)該播放格式是否支持，直到匹配到自己支持的播放格式為止。Source元素具有幾個(gè)屬性：src屬性指播放媒體的URL地址；type表示媒體類型，對(duì)應(yīng)屬性值為播放文件的MIME類型，該屬性中的codes參數(shù)表示所使用的媒體編碼格式。

總之，因?yàn)椴煌瑸g覽器對(duì)于各種媒體的媒體類型及編碼格式的支持情況都各不相同，所以使用source元素來指定各種媒體類型是非常必要的。

（2）前臺(tái)HTML5界面對(duì)本地?cái)?shù)據(jù)庫的調(diào)用與數(shù)據(jù)存儲(chǔ)

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

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

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

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

3 結(jié)語

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

參考文獻(xiàn)：

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

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