基于HTML5技术的Web监控界面开发

【摘 要】研究了基于HTML5技术的Web监控界面开发。首先对HTML5的新特性进行了分析，在此基础上给出基于HTML5的Web监控开发平台，研究了基于HTML5技术的表示层开发，尤其是监控界面中的报警功能模块开发进行了深入探讨。

【关键词】HTML5；Web；监控界面；报警功能

HTML 5是近十年来Web开发标准最巨大的飞跃。与HTML 4、HTML 3等版本不同，HTML 5并非仅仅用来表示Web内容，它更具有将Web带入一个成熟的应用平台，在HTML 5平台上，实现视频、音频、图象、动画，以及同电脑的交互的标准化。

一、HTML5特性分析

HTML5的设计宗旨在于减少网络应用对于浏览器插件的需求，给站点带来更多的媒体元素，为用户提供友好体验。HTML5 大大简化了编程工作，使Web程序更容易的访问各类设备和应用程序，并且提供了很多重要的新特性。

（一）新的标记语言标准。HTML5比之前的 HTML 版本更新了标记语言及其附属的标准，包括访问和操作 HTML 文档结构（DOM）的标准；全新的级联样式表（CSS）标准，用于定义 HTML 文档的外观和呈现方式以及 JavaScript 脚本语言。

（二）实现基于标准的富Web。HTML 5实现了富应用的新API，诸如图形、动画、多媒体，在此之前需要通过Flash等各类插件实现这些功能，使用上述插件技术不仅带来安全隐患，而且限制了受众的范围。HTML 5提供的audio和ideo等标签为Web开发者们提供了嵌入媒体方面的极大便利，尤其是采用中立的编码标准解放了浏览器厂商的开发自主性。

（三）革新的结构。HTML5标准中引入了一整套新的元素，使建构网页更变得更容易。使用这些元素具有明显的优点：当与标题元素联同使用时，产生了一种使用标题级别标记嵌套章节的方法，这将超过以前HTML版本的标题级别。

二、基于HTML5的Web监控开发平台

按照B/S结构设计的应用程序让用户可以随时随地的通过网络实现对系统的操作与管理，而且不需要安装任何的客户端或驱动软件。作为设计与开发人员，也可以对软件的运行和使用情况进行远程监视，并在出现问题是进行远程维护等操作。同时相对于另外一种常见的C/S结构，B/S结构的主要优点有一下几个：（一）B/S结构的软件建立在广域网上，不需要专门的网络硬件环境，比C/S模式有更强的适应范围；（二）B/S结构要求构件实现相对独立的功能，能够相对较好的实现模块的重用；（三）B/S结构的软件一般由多个构件组成，方便个别构件的更换，可以实现系统的无缝升级，系统维护难度小；（四）B/S建立在浏览器上，有更加丰富和生动的表现形式与用户交流；（五）B/S是基于广域网的，可以面向不同地域的不同用户群。

基于HTML5的Web监控软件平台从软件实体结构上分为：数据采集程序、算法程序和Web服务器主程序三个模块。

三、Web监控软件架构设计

基于HTML5的Web监控软件平台中WEB服务器设计采用软件体系架构设计中常用的分层的设计方法，分层的设计方法是软件体系结构设计中最为常见也最重要的一种方法，从上到下分别是：表示层（UI）、业务逻辑层（BLL）、数据访问层（DAL）和数据层（DL）。

四、基于HTML5技术的表示层开发

表示层位于整个软件体系的最上层，也是和用户关系最紧密的一层，主要用于接收用户的输入数据、页面操作等请求，并把后台程序返回的数据和结果以适当的形式反馈给用户，其主要作用是为用户提供一个友好的交互式操作界面。

由于Web监控软件采用B/S的设计模式，所以系统中的表现层的主要形式是WEB页面，而在程序中的表现形式是ASPX文件。在Web监控系统中需要通过大量的图表和曲线对生产运行数据进行显示，因此采用最新的超文本标记语言版本HTML5和SVG （Scalable Vector Graphics可缩放矢量图形）实现了更加良好的曲线与图表的显示效果，同时为进一步的增加交互界面的可操作性，可以选用第三方控件Highcharts和jqGrid来实现软件平台中实时动态曲线和各种图表的显示。下图1为Web监控界面显示。

在Web监控界面设计与开发，重要的一项内容就是报警功能开发。报警模块的作用需要实现报警设置、报警监测和报警信息管理的平台。而报警管理模块也根据这三个功能分为三个功能子模块。其功能框图如图2所示：

（一）报警监测。报警监测功能是实时的从数据库中读取报警设置信息，并按照每一条数据对应的实时过程或者累计数据进行处理，以判断生产运行参数是否超限。为保证报警监测的实时性，在数据采集程序向服务器模块发送数据时，对实时数据进行分析和监测。

（二）报警设置。报警设置功能，让管理人员可以针对需要设置报警条件，也可以对现有的报警设置信息进行修改、删除、查询等操作。

（三）报警信息管理。报警信息管理包括报警信息显示、报警信息查询和报警信息确认。报警信息的显示要求管理人员在使用系统软件的任何模块都能看到现有的报警信息。报警信息的确认则是在管理者已经发现问题，并做出处理后，对该条报警信息进行确认。同时用户可以选择是否显示确认的报警信息。

五、结论

采用最新的超文本标记语言版本HTML5技术开发了Web监控界面。首先对HTML5新特性进行了分析，在此基础上给出基于HTML5的Web监控开发平台，研究了基于HTML5技术的表示层开发，尤其是监控界面中的报警功能模块开发进行了深入探讨。

参考文献：

[1]王晓.基于HTML5的矢量地图关键技术研究[D]，南京：南京师范大学，2011

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

[3]钱俊.一种监测数据显示的简单方法及应用[J]， 中国无线电，2012，1（12）：55-57

作者简介：郭严友，男，1980年8月，广东肇庆 ，本科，计算机网络、软件工程，计算机讲师，肇庆市工程技术学校。