基于HTML5的高校实验室预约开放系统的设计.docx

?

?

基于HTML5的高校实验室预约开放系统的设计

?

?

蒋旺喜党旗章苏静

摘要：本文通过分析高校实验室传统预约开放管理存在的问题，设计了基于HTML5的高校实验室预约开放管理系统，系统的主要模块包含实验室预约管理和实验室数据统计管理。本系统能够为高校师生提供在线预约服务，优化高校实验室开放管理，实时呈现实验室开放使用情况及生成教育部实验室开放数据报表。

关键词：HTML5;高校实验室开放;预约

中图分类号：G434?文献标识码：A?论文编号：1674-2117（2019）11-0109-04

●引言

实验室开放是高校培养创新人才的重要途径，是提高实验室利用率、培养学生创新及实践能力的重要手段。[1]从时间和空间开放程度上来看，实验室开放可分为完全开放、预约开放、阶段开放和定期开放等[2]，传统实验室开放使用预约主要存在以下几个方面的问题：①电话咨询占用实验室管理员大量工作时间，浪费人力和财力[3];②实验室管理员需要通过查阅纸质预约登记册了解实验室开放预约情况，查阅预约记录耗时长且易出错，可能导致实验室在同一时间段被多人预约，影响教师或学生的实验安排，造成实验教学事故;③教育部每年都要统计各个实验室做过的实验项目及使用情况，实验室管理员需要花费大量的时间来完成这项任务。因此，设计一个能够满足多方面需求的实验室预约开放系统成为高校实验室管理的迫切需求。

●实验室预约开放系统

笔者认为，实验室预约开放系统的首要目的是给高校师生提供一个既方便又智能的实验室预约平台，因此该预约平台要满足以下几点：①实验室管理员可设置每个实验室的开放时段（精确到课时），如有实验课的不开放，双休日不开放;②预约者在预约实验室时，该实验室已经被预约过的时段是被隐藏的;③预约是否成功需要实验室管理员审核，审核通过即预约成功，审核不通过则预约失败;④支持使用移动智能终端进行实验室预约和预约审核。另外，该系统应能够根据教育部的要求在线查询高校实验室开放使用情况，并可导出相应的Excel表。查询功能需满足如下要求：①支持PC端和移动智能终端进行查询;②支持按学年查询或按自定义开始日期和结束日期查询;③查询记录支持多种呈现方式，可根据每天上课的节次可视化呈现;④根据教育部的要求导出实验室开放使用情况数据表。

针对以上要求，笔者根据所在学校实际情况，设计了一个实验室预约开放系统，该系统采用HTML5响应式布局来设计平台的前端。

●HTML5的核心技术及应用

1.HTML5核心技术

（1）2D图像绘制技术

Canvas是用于在网页中绘制位图的技术，是HTML5中最受关注的功能之一。本系统可利用Canvas绘制实验室二维码、统计图表。

（2）离线应用技术

离线应用是指在脱离网络连接的环境下，WebAPP依然能够进行数据存储与交换业务，从而保证程序的正常运行。这项技术使得WebAPP克服了过去离线即瘫痪的局限，应用适应性更强。

（3）响应式布局技术

不同类型的设备，如手机、平板、笔记本电脑、触控一体机等，它们的屏幕大小、分辨率、键盘类型都存在巨大差異。HTML5响应式布局技术使得浏览器针对不同的设备输出相应的网页布局。HTML5标准为移动Web应用程序提供了优秀的页面体验，而且AndroidBrowser及iOS对Webkit的良好支持，同时使用CSS3等功能实现原生应用程序的UI界面。[4]

（4）提供丰富的支持Web应用扩展的API

HTML5提供了操作移动设备硬件的API，包括地理位置感知API、运动感应事件、通用感应器API、触控交互事件、WebSocketAPI、MessagingAPI等。[5]

2.HTML5应用

HTML5的优势是兼容性好，用HTML5技术开发的应用能跨平台使用，并且可以在网页上直接进行调试和修改，且开发和维护的成本较低。HTML5的应用主要有以下几方面：①游戏开发，如微信小游戏;②轻应用、WebAPP、微站;③基于微信平台的开发，实现扫一扫、微信支付等操作;④WebVR让虚拟现实大众化，通过HTML5把虚拟现实内容嵌入到Web页面中。

●实验室预约开放系统的设计与分析

1.系统总体框架设计

总体框架由五个层次和一个信息安全保障体系组成。底层是网络层，包括校园内部网络和互联网。服务器包含数据库服务器和应用服务器。为了方便师生预约实验室，本系统支持PC端和移动端接入访问。本系统功能模块分为五个方面，分别是用户管理、信息管理、实验室管理、统计报表管理和预约管理，其中主要模块是统计报表管理和预约管理。信息安全保障体系要保障网络安全、服务器安全、数据库安全和应用程序安全。系统总体框架如图1所示。

2.实验室预约流程分析

实验室预约开放的依据有两个方面：一是按照教师提供的实验教学计划进行开放，实验室管理员在学期