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

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

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

一、HTML5特性分析

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

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

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

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

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

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

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

三、Web監(jiān)控軟件架構(gòu)設(shè)計(jì)

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

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

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

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

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

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

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

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

五、結(jié)論

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

參考文獻(xiàn)：

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

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

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

作者簡介：郭嚴(yán)友，男，1980年8月，廣東肇慶 ，本科，計(jì)算機(jī)網(wǎng)絡(luò)、軟件工程，計(jì)算機(jī)講師，肇慶市工程技術(shù)學(xué)校。