基于HTML5的校園網站前端優化的軟件工程實踐與研究
2017-07-09 11:55:33林健
科學與財富 2017年18期
林健
摘要：本文從軟件工程的角度，針對現代中學網站界面優化的需求分析，分析了相關界面優化的HTML5技術及對應的安全維護解決機制，為后續的網站建設與開發提供理論支持與工程實踐解決方案。
關鍵詞：中學網站 HTML5 Javascript 多媒體數據 工程實踐
0 需求分析概述
隨著移動互聯網的迅速普及，風格得宜的校園網站已成為現代中學對外交流宣傳和對內信息管理的不二選擇，在中學校園信息化建設中的地位舉足輕重。據此，本文以《湛江第一中學原舊版網站》為基礎，提出以下優化需求：
（1） 結構設計需求：采用HTML5技術，結合CSS3與Javascript在Dreamweaver軟件平臺上重構學校網站的前臺，創建現代風格的離線應用和本地存儲結構框架，搭建整個網站的骨架體系。
（2） 多媒體交互設計需求：現代校園網頁對圖片、視覺效果展示、音視頻等多媒體元素都有非常高的要求，特別對于靈活的音視頻技術及平滑的3D視覺效果，對于網站界面的友好性、藝術性及交互性都有較高要求。
（3） 網站安全性能維護需求：校園網站內部承接著校園資訊的傳遞，因原網站后臺與前臺優化方案存在技術性銜接，在銜接過程中需要調整更優的網站架構安全防控方案，以便讓腳本語言在MVC傳統網站架構中得到更平滑的過渡。
1 HTML5校園網站實現方案
眾所周知，相比較傳統的ASP網站技術與FLASH技術，HTML5架構有更成熟的體系，如音頻與視頻元素等，都可以作為移動互聯網下的中學校園網站優化方案被廣泛應用。以HTML5技術做支撐的響應式網站開發，促使網站具備自適應能力，在移動終端下能根據瀏覽用戶的閱讀環境，進行自主適配與適應，從而保證終端瀏覽器的統一風格；同時，HTML5的跨平臺腳本特性，使得新界面與網站的遺留后臺具備流暢的兼容性。
基于HTML5結合JavaScript腳本在軟件工程實踐的新特性，本文提出以下基于前端界面優化的校園網站工程優化方案：
（1）取消部分過時的HTML4標記。包括取消純粹顯示效果的標記，如和
（2）將內容和展示分離。B類和I類標簽依然在前臺代碼中保留，但它們與之前原有的舊界面代碼已有所不同，這些標簽的意義只是為了將一段文字標識出來，而不是為了給它們設置粗體或斜體樣式。而U、font、center、strike等標簽將被完全被HTML5標簽替代。
（3）全新的表單輸入對象。包括日期、URL、Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數據，這一使用機器可以識別的標簽標注內容的方法，使語義Web的處理更為簡單。總而言之，這種與網站前臺結構的改進可視得內容創建者可以創建更干凈，更容易管理的網頁，從而讓校園網頁對于搜索引擎或智能手機終端讀屏軟件而言更為友好。
（4）多媒體對象在HTML5前臺界面代碼中，不再全部綁定在object或embed Tag中，而是各種多媒體元素擁有獨立的標簽。舊版的校園網站在網絡上展示視頻、音頻和動畫，除了使用第三方自主開發的播放器外，最為頻繁的軟件工具插件就是FLASH了，使得各種多媒體都需要在瀏覽器中安裝各種插件才能使用，而且有時速度很慢。而在HTML5中，提供了音頻視頻的標準接口，通過HTML5中的相關技術，校園網站中的視頻、動畫、音頻等多媒體再也不需要安裝插件，只需要專用的video元素標簽與audio元素標簽來處理視頻數據與音頻數據就可以了。
（5）本地數據庫優化。這個工程方案將內嵌一個本地的SQL數據庫，已加速交互式搜索、緩存以及索引功能。眾所周知在HTML4時代的網站由于用戶的相關數據等一般只能存儲在cookie中，但是由于瀏覽器基于cookie的限制使得網站存儲數據格式應盡量精簡。在校園網中使用HTML5結合JavaScript技術，使得校園網變成了一個富客戶端。為了破解cookie的一系列原生限制，HTML5通過JavaScript新的API就能直接存儲大量的數據到客戶端瀏覽器，進一步支持復雜的本地數據庫，總的來說，HTML5支持兩種WEB存儲格式，分別是永久性的本地存儲（Local Storage）和會話級別的本地存儲（Session Storage）。
2 校園網站多媒體與數據庫的工程實現機制
（1）視頻元素與音頻元素的實現機制
利用video元素創建HTML頁面，并設置video資源和SRC屬性。本文的視頻解決方案支持MP4、webm、3gpp、m4v、mpeg、ogg、quicktime等多種豐富的視頻數據格式。接著通過JavaScript腳本添加播放、暫停和聲音調節按鈕，并創建JS函數來控制video播放。音頻元素的操作和視頻元素的操作步驟相同。
另外，本文通過source元素來為同一個媒體數據指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放，瀏覽器的選擇順序為代碼中的書寫順序，并從上往下判斷瀏覽器本身對該播放格式是否支持，直到匹配到自己支持的播放格式為止。Source元素具有幾個屬性：src屬性指播放媒體的URL地址；type表示媒體類型，對應屬性值為播放文件的MIME類型，該屬性中的codes參數表示所使用的媒體編碼格式。
總之，因為不同瀏覽器對于各種媒體的媒體類型及編碼格式的支持情況都各不相同，所以使用source元素來指定各種媒體類型是非常必要的。
（2）前臺HTML5界面對本地數據庫的調用與數據存儲
在HTML5中增加了一個JS對象：Session Storage。通過此對象可以直接操作存儲在瀏覽器中的會話級別Web存儲數據。存儲在Session Storage中的數據首先是Key-Value形式的，它跟瀏覽器當前會話有關，當會話結束后，數據就會自動清除。
接著在最新的JavaScript的API中增加了Local Storage對象，以便于校園網用戶永久存儲的Web端數據，且數據不會隨著http請求發送到后臺服務器，而且存儲數據大小無需在工程開發中考慮，因為在HTML5的標準中要求瀏覽器至少支持4MB的數據。
最后，對于復雜的Web應用數據，HTML5提供了一個瀏覽器端的數據庫支持，允許直接通過JavaScript的API在瀏覽器端創建一個本地的數據庫，而且支持標準的SQL操作，讓離線的Web應用更加方便的存儲結構化數據。
操作本地數據庫的基本步驟是：通過openDatabase方法創建一個訪問數據庫的對象；使用所創建的數據庫訪問對象來執行Transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中執行SQL語句即可；最后可通過executeSql方法完成對數據的查詢。
3 結語
本文通過現代中學網站在移動互聯網時代的數據與交互需求，利用HTML5結合JavaScript腳本技術，研究了多媒體數據在網站前臺界面的優化方式，并分析了基于前端界面優化與原有網站后臺數據一致性需求衍生的網站數據庫解決方案，為進一步的軟件工程實踐提供了指導與實現機制。
參考文獻：
（1）HTML5——下一代Web開發標準研究，劉華星、楊庚，《計算機技術與發展》， 2011， 21（8）：54-58
（2）HTML5新特性在移動平臺中的應用研究，黃磊、張媛，《數字技術與應用》，2015（9）：102-102
