基于HTML5技術的Web監(jiān)控界面開發(fā)

【摘 要】研究了基于HTML5技術的Web監(jiān)控界面開發(fā)。首先對HTML5的新特性進行了分析，在此基礎上給出基于HTML5的Web監(jiān)控開發(fā)平臺，研究了基于HTML5技術的表示層開發(fā)，尤其是監(jiān)控界面中的報警功能模塊開發(fā)進行了深入探討。

【關鍵詞】HTML5；Web；監(jiān)控界面；報警功能

HTML 5是近十年來Web開發(fā)標準最巨大的飛躍。與HTML 4、HTML 3等版本不同，HTML 5并非僅僅用來表示W(wǎng)eb內(nèi)容，它更具有將Web帶入一個成熟的應用平臺，在HTML 5平臺上，實現(xiàn)視頻、音頻、圖象、動畫，以及同電腦的交互的標準化。

一、HTML5特性分析

HTML5的設計宗旨在于減少網(wǎng)絡應用對于瀏覽器插件的需求，給站點帶來更多的媒體元素，為用戶提供友好體驗。HTML5 大大簡化了編程工作，使Web程序更容易的訪問各類設備和應用程序，并且提供了很多重要的新特性。

（一）新的標記語言標準。HTML5比之前的 HTML 版本更新了標記語言及其附屬的標準，包括訪問和操作 HTML 文檔結(jié)構（DOM）的標準；全新的級聯(lián)樣式表（CSS）標準，用于定義 HTML 文檔的外觀和呈現(xiàn)方式以及 JavaScript 腳本語言。

（二）實現(xiàn)基于標準的富Web。HTML 5實現(xiàn)了富應用的新API，諸如圖形、動畫、多媒體，在此之前需要通過Flash等各類插件實現(xiàn)這些功能，使用上述插件技術不僅帶來安全隱患，而且限制了受眾的范圍。HTML 5提供的audio和ideo等標簽為Web開發(fā)者們提供了嵌入媒體方面的極大便利，尤其是采用中立的編碼標準解放了瀏覽器廠商的開發(fā)自主性。

（三）革新的結(jié)構。HTML5標準中引入了一整套新的元素，使建構網(wǎng)頁更變得更容易。使用這些元素具有明顯的優(yōu)點：當與標題元素聯(lián)同使用時，產(chǎn)生了一種使用標題級別標記嵌套章節(jié)的方法，這將超過以前HTML版本的標題級別。

二、基于HTML5的Web監(jiān)控開發(fā)平臺

按照B/S結(jié)構設計的應用程序讓用戶可以隨時隨地的通過網(wǎng)絡實現(xiàn)對系統(tǒng)的操作與管理，而且不需要安裝任何的客戶端或驅(qū)動軟件。作為設計與開發(fā)人員，也可以對軟件的運行和使用情況進行遠程監(jiān)視，并在出現(xiàn)問題是進行遠程維護等操作。同時相對于另外一種常見的C/S結(jié)構，B/S結(jié)構的主要優(yōu)點有一下幾個：（一）B/S結(jié)構的軟件建立在廣域網(wǎng)上，不需要專門的網(wǎng)絡硬件環(huán)境，比C/S模式有更強的適應范圍；（二）B/S結(jié)構要求構件實現(xiàn)相對獨立的功能，能夠相對較好的實現(xiàn)模塊的重用；（三）B/S結(jié)構的軟件一般由多個構件組成，方便個別構件的更換，可以實現(xiàn)系統(tǒng)的無縫升級，系統(tǒng)維護難度??；（四）B/S建立在瀏覽器上，有更加豐富和生動的表現(xiàn)形式與用戶交流；（五）B/S是基于廣域網(wǎng)的，可以面向不同地域的不同用戶群。

基于HTML5的Web監(jiān)控軟件平臺從軟件實體結(jié)構上分為：數(shù)據(jù)采集程序、算法程序和Web服務器主程序三個模塊。

三、Web監(jiān)控軟件架構設計

基于HTML5的Web監(jiān)控軟件平臺中WEB服務器設計采用軟件體系架構設計中常用的分層的設計方法，分層的設計方法是軟件體系結(jié)構設計中最為常見也最重要的一種方法，從上到下分別是：表示層（UI）、業(yè)務邏輯層（BLL）、數(shù)據(jù)訪問層（DAL）和數(shù)據(jù)層（DL）。

四、基于HTML5技術的表示層開發(fā)

表示層位于整個軟件體系的最上層，也是和用戶關系最緊密的一層，主要用于接收用戶的輸入數(shù)據(jù)、頁面操作等請求，并把后臺程序返回的數(shù)據(jù)和結(jié)果以適當?shù)男问椒答伣o用戶，其主要作用是為用戶提供一個友好的交互式操作界面。

由于Web監(jiān)控軟件采用B/S的設計模式，所以系統(tǒng)中的表現(xiàn)層的主要形式是WEB頁面，而在程序中的表現(xiàn)形式是ASPX文件。在Web監(jiān)控系統(tǒng)中需要通過大量的圖表和曲線對生產(chǎn)運行數(shù)據(jù)進行顯示，因此采用最新的超文本標記語言版本HTML5和SVG （Scalable Vector Graphics可縮放矢量圖形）實現(xiàn)了更加良好的曲線與圖表的顯示效果，同時為進一步的增加交互界面的可操作性，可以選用第三方控件Highcharts和jqGrid來實現(xiàn)軟件平臺中實時動態(tài)曲線和各種圖表的顯示。下圖1為Web監(jiān)控界面顯示。

在Web監(jiān)控界面設計與開發(fā)，重要的一項內(nèi)容就是報警功能開發(fā)。報警模塊的作用需要實現(xiàn)報警設置、報警監(jiān)測和報警信息管理的平臺。而報警管理模塊也根據(jù)這三個功能分為三個功能子模塊。其功能框圖如圖2所示：

（一）報警監(jiān)測。報警監(jiān)測功能是實時的從數(shù)據(jù)庫中讀取報警設置信息，并按照每一條數(shù)據(jù)對應的實時過程或者累計數(shù)據(jù)進行處理，以判斷生產(chǎn)運行參數(shù)是否超限。為保證報警監(jiān)測的實時性，在數(shù)據(jù)采集程序向服務器模塊發(fā)送數(shù)據(jù)時，對實時數(shù)據(jù)進行分析和監(jiān)測。

（二）報警設置。報警設置功能，讓管理人員可以針對需要設置報警條件，也可以對現(xiàn)有的報警設置信息進行修改、刪除、查詢等操作。

（三）報警信息管理。報警信息管理包括報警信息顯示、報警信息查詢和報警信息確認。報警信息的顯示要求管理人員在使用系統(tǒng)軟件的任何模塊都能看到現(xiàn)有的報警信息。報警信息的確認則是在管理者已經(jīng)發(fā)現(xiàn)問題，并做出處理后，對該條報警信息進行確認。同時用戶可以選擇是否顯示確認的報警信息。

五、結(jié)論

采用最新的超文本標記語言版本HTML5技術開發(fā)了Web監(jiān)控界面。首先對HTML5新特性進行了分析，在此基礎上給出基于HTML5的Web監(jiān)控開發(fā)平臺，研究了基于HTML5技術的表示層開發(fā)，尤其是監(jiān)控界面中的報警功能模塊開發(fā)進行了深入探討。

參考文獻：

[1]王曉.基于HTML5的矢量地圖發(fā)布關鍵技術研究[D]，南京：南京師范大學，2011

[2] HE Jie-hui. The Design of Data Access Layer [J]， Modern Computer，2006，1（3）：17-20

[3]錢俊.一種監(jiān)測數(shù)據(jù)顯示的簡單方法及應用[J]， 中國無線電，2012，1（12）：55-57

作者簡介：郭嚴友，男，1980年8月，廣東肇慶 ，本科，計算機網(wǎng)絡、軟件工程，計算機講師，肇慶市工程技術學校。