基于HTML5的高校實(shí)驗(yàn)室預(yù)約開放系統(tǒng)的設(shè)計(jì)

蔣旺喜 黨旗 章蘇靜

摘要：本文通過分析高校實(shí)驗(yàn)室傳統(tǒng)預(yù)約開放管理存在的問題，設(shè)計(jì)了基于HTML5的高校實(shí)驗(yàn)室預(yù)約開放管理系統(tǒng)，系統(tǒng)的主要模塊包含實(shí)驗(yàn)室預(yù)約管理和實(shí)驗(yàn)室數(shù)據(jù)統(tǒng)計(jì)管理。本系統(tǒng)能夠?yàn)楦咝熒峁┰诰€預(yù)約服務(wù)，優(yōu)化高校實(shí)驗(yàn)室開放管理，實(shí)時(shí)呈現(xiàn)實(shí)驗(yàn)室開放使用情況及生成教育部實(shí)驗(yàn)室開放數(shù)據(jù)報(bào)表。

關(guān)鍵詞：HTML5;高校實(shí)驗(yàn)室開放;預(yù)約

中圖分類號(hào)：G434? 文獻(xiàn)標(biāo)識(shí)碼：A? 論文編號(hào)：1674-2117（2019）11-0109-04

● 引言

實(shí)驗(yàn)室開放是高校培養(yǎng)創(chuàng)新人才的重要途徑，是提高實(shí)驗(yàn)室利用率、培養(yǎng)學(xué)生創(chuàng)新及實(shí)踐能力的重要手段。[1]從時(shí)間和空間開放程度上來看，實(shí)驗(yàn)室開放可分為完全開放、預(yù)約開放、階段開放和定期開放等[2]，傳統(tǒng)實(shí)驗(yàn)室開放使用預(yù)約主要存在以下幾個(gè)方面的問題：①電話咨詢占用實(shí)驗(yàn)室管理員大量工作時(shí)間，浪費(fèi)人力和財(cái)力[3];②實(shí)驗(yàn)室管理員需要通過查閱紙質(zhì)預(yù)約登記冊(cè)了解實(shí)驗(yàn)室開放預(yù)約情況，查閱預(yù)約記錄耗時(shí)長(zhǎng)且易出錯(cuò)，可能導(dǎo)致實(shí)驗(yàn)室在同一時(shí)間段被多人預(yù)約，影響教師或?qū)W生的實(shí)驗(yàn)安排，造成實(shí)驗(yàn)教學(xué)事故;③教育部每年都要統(tǒng)計(jì)各個(gè)實(shí)驗(yàn)室做過的實(shí)驗(yàn)項(xiàng)目及使用情況，實(shí)驗(yàn)室管理員需要花費(fèi)大量的時(shí)間來完成這項(xiàng)任務(wù)。因此，設(shè)計(jì)一個(gè)能夠滿足多方面需求的實(shí)驗(yàn)室預(yù)約開放系統(tǒng)成為高校實(shí)驗(yàn)室管理的迫切需求。

● 實(shí)驗(yàn)室預(yù)約開放系統(tǒng)

筆者認(rèn)為，實(shí)驗(yàn)室預(yù)約開放系統(tǒng)的首要目的是給高校師生提供一個(gè)既方便又智能的實(shí)驗(yàn)室預(yù)約平臺(tái)，因此該預(yù)約平臺(tái)要滿足以下幾點(diǎn)：①實(shí)驗(yàn)室管理員可設(shè)置每個(gè)實(shí)驗(yàn)室的開放時(shí)段（精確到課時(shí)），如有實(shí)驗(yàn)課的不開放，雙休日不開放;②預(yù)約者在預(yù)約實(shí)驗(yàn)室時(shí)，該實(shí)驗(yàn)室已經(jīng)被預(yù)約過的時(shí)段是被隱藏的;③預(yù)約是否成功需要實(shí)驗(yàn)室管理員審核，審核通過即預(yù)約成功，審核不通過則預(yù)約失敗;④支持使用移動(dòng)智能終端進(jìn)行實(shí)驗(yàn)室預(yù)約和預(yù)約審核。另外，該系統(tǒng)應(yīng)能夠根據(jù)教育部的要求在線查詢高校實(shí)驗(yàn)室開放使用情況，并可導(dǎo)出相應(yīng)的Excel表。查詢功能需滿足如下要求：①支持PC端和移動(dòng)智能終端進(jìn)行查詢;②支持按學(xué)年查詢或按自定義開始日期和結(jié)束日期查詢;③查詢記錄支持多種呈現(xiàn)方式，可根據(jù)每天上課的節(jié)次可視化呈現(xiàn);④根據(jù)教育部的要求導(dǎo)出實(shí)驗(yàn)室開放使用情況數(shù)據(jù)表。

針對(duì)以上要求，筆者根據(jù)所在學(xué)校實(shí)際情況，設(shè)計(jì)了一個(gè)實(shí)驗(yàn)室預(yù)約開放系統(tǒng)，該系統(tǒng)采用HTML5響應(yīng)式布局來設(shè)計(jì)平臺(tái)的前端。

● HTML5的核心技術(shù)及應(yīng)用

1.HTML5核心技術(shù)

（1）2D圖像繪制技術(shù)

Canvas是用于在網(wǎng)頁中繪制位圖的技術(shù)，是HTML5中最受關(guān)注的功能之一。本系統(tǒng)可利用Canvas繪制實(shí)驗(yàn)室二維碼、統(tǒng)計(jì)圖表。

（2）離線應(yīng)用技術(shù)

離線應(yīng)用是指在脫離網(wǎng)絡(luò)連接的環(huán)境下，Web APP依然能夠進(jìn)行數(shù)據(jù)存儲(chǔ)與交換業(yè)務(wù)，從而保證程序的正常運(yùn)行。這項(xiàng)技術(shù)使得Web APP克服了過去離線即癱瘓的局限，應(yīng)用適應(yīng)性更強(qiáng)。

（3）響應(yīng)式布局技術(shù)

不同類型的設(shè)備，如手機(jī)、平板、筆記本電腦、觸控一體機(jī)等，它們的屏幕大小、分辨率、鍵盤類型都存在巨大差異。HTML5響應(yīng)式布局技術(shù)使得瀏覽器針對(duì)不同的設(shè)備輸出相應(yīng)的網(wǎng)頁布局。HTML5標(biāo)準(zhǔn)為移動(dòng)Web應(yīng)用程序提供了優(yōu)秀的頁面體驗(yàn)，而且Android Browser及iOS對(duì)Webkit的良好支持，同時(shí)使用CSS3等功能實(shí)現(xiàn)原生應(yīng)用程序的UI界面。[4]

（4）提供豐富的支持Web應(yīng)用擴(kuò)展的API

HTML5提供了操作移動(dòng)設(shè)備硬件的API，包括地理位置感知API、運(yùn)動(dòng)感應(yīng)事件、通用感應(yīng)器API、觸控交互事件、WebSocket API、Messaging API等。[5]

2.HTML5應(yīng)用

HTML5的優(yōu)勢(shì)是兼容性好，用HTML5技術(shù)開發(fā)的應(yīng)用能跨平臺(tái)使用，并且可以在網(wǎng)頁上直接進(jìn)行調(diào)試和修改，且開發(fā)和維護(hù)的成本較低。HTML5的應(yīng)用主要有以下幾方面：①游戲開發(fā)，如微信小游戲;②輕應(yīng)用、Web APP、微站;③基于微信平臺(tái)的開發(fā)，實(shí)現(xiàn)掃一掃、微信支付等操作;④WebVR讓虛擬現(xiàn)實(shí)大眾化，通過HTML5把虛擬現(xiàn)實(shí)內(nèi)容嵌入到Web頁面中。

● 實(shí)驗(yàn)室預(yù)約開放系統(tǒng)的設(shè)計(jì)與分析

1.系統(tǒng)總體框架設(shè)計(jì)

總體框架由五個(gè)層次和一個(gè)信息安全保障體系組成。底層是網(wǎng)絡(luò)層，包括校園內(nèi)部網(wǎng)絡(luò)和互聯(lián)網(wǎng)。服務(wù)器包含數(shù)據(jù)庫(kù)服務(wù)器和應(yīng)用服務(wù)器。為了方便師生預(yù)約實(shí)驗(yàn)室，本系統(tǒng)支持PC端和移動(dòng)端接入訪問。本系統(tǒng)功能模塊分為五個(gè)方面，分別是用戶管理、信息管理、實(shí)驗(yàn)室管理、統(tǒng)計(jì)報(bào)表管理和預(yù)約管理，其中主要模塊是統(tǒng)計(jì)報(bào)表管理和預(yù)約管理。信息安全保障體系要保障網(wǎng)絡(luò)安全、服務(wù)器安全、數(shù)據(jù)庫(kù)安全和應(yīng)用程序安全。系統(tǒng)總體框架如圖1所示。

2.實(shí)驗(yàn)室預(yù)約流程分析

實(shí)驗(yàn)室預(yù)約開放的依據(jù)有兩個(gè)方面：一是按照教師提供的實(shí)驗(yàn)教學(xué)計(jì)劃進(jìn)行開放，實(shí)驗(yàn)室管理員在學(xué)期正式上課之前把教師的實(shí)驗(yàn)教學(xué)計(jì)劃導(dǎo)入系統(tǒng);二是在日常教學(xué)過程中教師或?qū)W生預(yù)約實(shí)驗(yàn)室，經(jīng)實(shí)驗(yàn)室管理員審核進(jìn)行開放。實(shí)驗(yàn)教學(xué)計(jì)劃先由教師提交到學(xué)校教務(wù)部門，經(jīng)學(xué)校教育部門審核通過之后移交至實(shí)驗(yàn)室管理部門，實(shí)驗(yàn)室管理員把實(shí)驗(yàn)教學(xué)計(jì)劃導(dǎo)入系統(tǒng)。實(shí)驗(yàn)室開放安排如上頁圖2所示。

本系統(tǒng)給師生提供的預(yù)約方式有兩種，一種是在平臺(tái)中選擇相應(yīng)的實(shí)驗(yàn)室進(jìn)行預(yù)約，另一種是應(yīng)用智能移動(dòng)終端掃描實(shí)驗(yàn)室的二維碼進(jìn)行預(yù)約。實(shí)驗(yàn)室預(yù)約業(yè)務(wù)流程如上頁圖3所示。為了減少實(shí)驗(yàn)室管理員的預(yù)約審核工作量，本系統(tǒng)通過程序控制實(shí)驗(yàn)室預(yù)約過程：①某實(shí)驗(yàn)室在某時(shí)間段已經(jīng)被預(yù)約了，是不能被重復(fù)預(yù)約，確保實(shí)驗(yàn)室所有的預(yù)約不會(huì)有時(shí)間沖突;②限制實(shí)驗(yàn)室的預(yù)約權(quán)限，如某些實(shí)驗(yàn)室是學(xué)生不能預(yù)約的，在學(xué)生的預(yù)約界面是不會(huì)顯示這些實(shí)驗(yàn)室。為了讓管理員能及時(shí)審核師生的預(yù)約情況，教師或?qū)W生預(yù)約提交后系統(tǒng)會(huì)自動(dòng)發(fā)送手機(jī)短信至管理員手機(jī)，管理員即刻知曉誰在某時(shí)段預(yù)約了某實(shí)驗(yàn)室。管理員預(yù)約審核流程如上頁圖4所示。

3.實(shí)驗(yàn)室統(tǒng)計(jì)報(bào)表設(shè)計(jì)與分析

根據(jù)教育部的要求，高校每學(xué)年都要上交實(shí)驗(yàn)室實(shí)驗(yàn)項(xiàng)目統(tǒng)計(jì)表、實(shí)驗(yàn)室開放情況表和實(shí)驗(yàn)室開放使用情況數(shù)據(jù)統(tǒng)計(jì)表。本系統(tǒng)支持兩種方式檢索實(shí)驗(yàn)室的數(shù)據(jù)報(bào)表：方式一，根據(jù)不同的時(shí)間段檢索數(shù)據(jù)報(bào)表（如圖5）;方式二，根據(jù)學(xué)年檢索數(shù)據(jù)報(bào)表。另外，本系統(tǒng)支持多條件檢索實(shí)驗(yàn)室數(shù)據(jù)報(bào)表，條件主要有預(yù)約者的身份（教師或?qū)W生）、預(yù)約方式（實(shí)驗(yàn)教學(xué)計(jì)劃或日常預(yù)約）等。

● 系統(tǒng)的優(yōu)勢(shì)分析

1.采用HTML5響應(yīng)式頁面設(shè)計(jì)

在信息技術(shù)飛速發(fā)展的今天，智能移動(dòng)終端成為我們生活中不可缺少的伙伴。為了同時(shí)支持PC端和各類移動(dòng)智能終端的使用，本系統(tǒng)采用HTML5響應(yīng)式頁面設(shè)計(jì)。

2.與高校實(shí)驗(yàn)室預(yù)約開放管理業(yè)務(wù)無縫對(duì)接

本系統(tǒng)的設(shè)計(jì)要求：一是與高校實(shí)驗(yàn)室開放管理密切整合，管理更加細(xì)致簡(jiǎn)單;二是師生能隨時(shí)隨地預(yù)約，并能及時(shí)得到反饋;三是確保實(shí)驗(yàn)室開放數(shù)據(jù)準(zhǔn)確無誤，并與教育部要求上交的數(shù)據(jù)一致。

3.按教育部要求隨時(shí)導(dǎo)出實(shí)驗(yàn)室開放數(shù)據(jù)報(bào)表

本系統(tǒng)可隨時(shí)隨地查詢導(dǎo)出實(shí)驗(yàn)室實(shí)驗(yàn)項(xiàng)目統(tǒng)計(jì)表和實(shí)驗(yàn)室開放使用情況數(shù)據(jù)統(tǒng)計(jì)表。這些數(shù)據(jù)報(bào)表不但可視化呈現(xiàn)了各個(gè)實(shí)驗(yàn)室的使用情況，而且可直接作為教育部要求的實(shí)驗(yàn)室開放數(shù)據(jù)統(tǒng)計(jì)報(bào)表。

● 總結(jié)展望

本系統(tǒng)設(shè)計(jì)的目的是信息化管理高校實(shí)驗(yàn)室預(yù)約開放業(yè)務(wù)，提高實(shí)驗(yàn)室的使用率和及時(shí)掌握實(shí)驗(yàn)室的實(shí)際使用情況。為了能跨平臺(tái)使用，本系統(tǒng)采用了HTML5響應(yīng)式頁面設(shè)計(jì)，支持各種智能移動(dòng)終端使用。管理員可根據(jù)實(shí)驗(yàn)室的開放情況設(shè)置實(shí)驗(yàn)室的開放時(shí)間和使用人數(shù)等，使實(shí)驗(yàn)室在某時(shí)段不存在重復(fù)預(yù)約，避免不必要的實(shí)驗(yàn)教學(xué)事故。

但是，本系統(tǒng)目前尚未與門禁系統(tǒng)相結(jié)合，師生預(yù)約成功后需要管理員在預(yù)約使用前開放實(shí)驗(yàn)室。今后，筆者還將繼續(xù)改進(jìn)本系統(tǒng)，使之能與門禁系統(tǒng)進(jìn)行對(duì)接，實(shí)現(xiàn)師生預(yù)約成功后，通過輸入密碼或刷臉等方式在有效時(shí)間內(nèi)自行開門。

參考文獻(xiàn)：

[1]劉興華，王方艷.以創(chuàng)新人才培養(yǎng)為核心的實(shí)驗(yàn)室開放模式探索[J].實(shí)驗(yàn)技術(shù)與管理，2016，33（01）.

[2]賀建武，麻明友，陳斌，等.地方高校教學(xué)型實(shí)驗(yàn)室開放管理存在問題及對(duì)策[J].實(shí)驗(yàn)室研究與探索，2014，33（04）：241.

[3]張婷婷.實(shí)驗(yàn)室預(yù)約系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].大連：大連海事大學(xué)，2015.

[4]錢海軍.基于HTML5移動(dòng)Web頁面開發(fā)技術(shù)研究[J].電腦與信息技術(shù)，2013，21（01）：51.

[5]黃悅深.基于HTML5的移動(dòng)Web App開發(fā)[J].圖書館雜志，2014，33（07）：74-75.

作者簡(jiǎn)介：蔣旺喜（1986—），男，工作單位為杭州師范大學(xué)信息化中心，研究方向?yàn)閿?shù)字媒體開發(fā);黨旗（1994—），女，杭州師范大學(xué)在讀研究生，研究方向?yàn)橛螒蚧瘜W(xué)習(xí);章蘇靜（1961—），女，杭州師范大學(xué)教育學(xué)院教授，研究生導(dǎo)師，研究方向?yàn)橛螒蚧瘜W(xué)習(xí)。

基金項(xiàng)目：本文受到浙江省高校信息化教學(xué)系列精品課程建設(shè)項(xiàng)目（項(xiàng)目編號(hào)：2017-XXHGC-4B）的支持。