基于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）离线应用技术

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

（3）响应式布局技术

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

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

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

2.HTML5应用

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

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

1.系统总体框架设计

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

2.实验室预约流程分析

实验室预约开放的依据有两个方面：一是按照教师提供的实验教学计划进行开放，实验室管理员在学期正式上课之前把教师的实验教学计划导入系统;二是在日常教学过程中教师或学生预约实验室，经实验室管理员审核进行开放。实验教学计划先由教师提交到学校教务部门，经学校教育部门审核通过之后移交至实验室管理部门，实验室管理员把实验教学计划导入系统。实验室开放安排如上页图2所示。

本系统给师生提供的预约方式有两种，一种是在平台中选择相应的实验室进行预约，另一种是应用智能移动终端扫描实验室的二维码进行预约。实验室预约业务流程如上页图3所示。为了减少实验室管理员的预约审核工作量，本系统通过程序控制实验室预约过程：①某实验室在某时间段已经被预约了，是不能被重复预约，确保实验室所有的预约不会有时间冲突;②限制实验室的预约权限，如某些实验室是学生不能预约的，在学生的预约界面是不会显示这些实验室。为了让管理员能及时审核师生的预约情况，教师或学生预约提交后系统会自动发送手机短信至管理员手机，管理员即刻知晓谁在某时段预约了某实验室。管理员预约审核流程如上页图4所示。

3.实验室统计报表设计与分析

根据教育部的要求，高校每学年都要上交实验室实验项目统计表、实验室开放情况表和实验室开放使用情况数据统计表。本系统支持两种方式检索实验室的数据报表：方式一，根据不同的时间段检索数据报表（如图5）;方式二，根据学年检索数据报表。另外，本系统支持多条件检索实验室数据报表，条件主要有预约者的身份（教师或学生）、预约方式（实验教学计划或日常预约）等。

● 系统的优势分析

1.采用HTML5响应式页面设计

在信息技术飞速发展的今天，智能移动终端成为我们生活中不可缺少的伙伴。为了同时支持PC端和各类移动智能终端的使用，本系统采用HTML5响应式页面设计。

2.与高校实验室预约开放管理业务无缝对接

本系统的设计要求：一是与高校实验室开放管理密切整合，管理更加细致简单;二是师生能随时随地预约，并能及时得到反馈;三是确保实验室开放数据准确无误，并与教育部要求上交的数据一致。

3.按教育部要求随时导出实验室开放数据报表

本系统可随时随地查询导出实验室实验项目统计表和实验室开放使用情况数据统计表。这些数据报表不但可视化呈现了各个实验室的使用情况，而且可直接作为教育部要求的实验室开放数据统计报表。

● 总结展望

本系统设计的目的是信息化管理高校实验室预约开放业务，提高实验室的使用率和及时掌握实验室的实际使用情况。为了能跨平台使用，本系统采用了HTML5响应式页面设计，支持各种智能移动终端使用。管理员可根据实验室的开放情况设置实验室的开放时间和使用人数等，使实验室在某时段不存在重復预约，避免不必要的实验教学事故。

但是，本系统目前尚未与门禁系统相结合，师生预约成功后需要管理员在预约使用前开放实验室。今后，笔者还将继续改进本系统，使之能与门禁系统进行对接，实现师生预约成功后，通过输入密码或刷脸等方式在有效时间内自行开门。

参考文献：

[1]刘兴华，王方艳.以创新人才培养为核心的实验室开放模式探索[J].实验技术与管理，2016，33（01）.

[2]贺建武，麻明友，陈斌，等.地方高校教学型实验室开放管理存在问题及对策[J].实验室研究与探索，2014，33（04）：241.

[3]张婷婷.实验室预约系统的设计与实现[D].大连：大连海事大学，2015.

[4]钱海军.基于HTML5移动Web页面开发技术研究[J].电脑与信息技术，2013，21（01）：51.

[5]黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志，2014，33（07）：74-75.

作者简介：蒋旺喜（1986—），男，工作单位为杭州师范大学信息化中心，研究方向为数字媒体开发;党旗（1994—），女，杭州师范大学在读研究生，研究方向为游戏化学习;章苏静（1961—），女，杭州师范大学教育学院教授，研究生导师，研究方向为游戏化学习。

基金项目：本文受到浙江省高校信息化教学系列精品课程建设项目（项目编号：2017-XXHGC-4B）的支持。