摘要：作為新一代網頁語言標準，HTML5為絕大多數瀏覽器和Web應用開發(fā)者提供了強大的技術支持和兼容性。HTML5具備更廣泛的多媒體特性，支持網頁端的Audio、Video播放功能，在圖形及報表展現方面也比原來的HTML標準更勝一籌。設計了基于HTML5的教室信息電子看板實現方案，利用電子看板（網頁看板）實時呈現教學情況，為教務管理提供有效的信息化手段。

關鍵詞：HTML5；看板；SVG；跑馬燈；數據抽取

DOIDOI：10.11907/rjdk.171377

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2017）006-0084-02

0 引言

教室是師生從事教學活動的最重要場所，如何提高教室使用率、改善課堂教學環(huán)境，是考量高校人才培養(yǎng)質量的重要指標?；趥鹘y(tǒng)人工巡查、統(tǒng)計上報的工作模式，對了解和掌握課堂教學信息存在滯后性，當出現教學資源不足、教學事故等有關問題時不能及時進行管理。同時歷史數據難以形成連續(xù)性的統(tǒng)計報表，統(tǒng)計效果不夠直觀。

本文基于HTML5的網頁標準和有關規(guī)范，開發(fā)了一套用于實時展現教室資源使用情況的網頁看板系統(tǒng)（以下稱Kanban系統(tǒng)），為考核部門提供師生到課率等信息，為實訓管理部門提供教室利用率等信息，為教務部門提供教學資源使用率等信息，為學校管理層提供全方位的報表信息，為制訂教學管理制度和基礎設施投入方案提供決策依據。

1 HTML5

相比于以前版本的HTML、XHTML，HTML5是一個更加通用的標準，得到了世界主流軟件提供商和開源組織的支持，具有更強的互聯網交互及展現能力。

（1）采用HTML5標準和規(guī)范開發(fā)的Web應用，可以同時運行在PC機和平板電腦、手機等移動智能終端上。

（2）各大主流瀏覽器均支持HTML5，如Safari、Chrome、Firefox、IE9、Opera等[1]，Web應用開發(fā)可在眾多瀏覽器上重復測試。

（3）增加了全新的標簽，使得動畫效果的網頁界面展現力大大提高，交互性更強。

（4）增加了全新的

（5）HTML5支持視頻和音頻播放功能，均有對應的

（6）HTML5與CSS3完美融合，使網頁展現力更加強大，無論是2D還是3D界面元素都變得富有動感效果[3]。

（7）HTML5對前版本的HTML標簽和語法進行了科學合理的裁剪，摒棄了一些過時的標簽，局部修改和完善了語法規(guī)則，增強了整體代碼的健壯性、一致性，使開發(fā)者更易于掌握其技術特點，開發(fā)效率大大提高。

2 網頁看板

Kanban系統(tǒng)早期應用于生產車間的流水線，在看板顯示屏上顯示投入物料、工位號、生產計劃、生產節(jié)拍、實時產量等數據，在日常生產管理過程中起到監(jiān)督、控制、跟蹤等作用[4]，現廣泛應用于生產管理、金融市場行情、公共服務窗口、客戶等候隊列等。

看板顯示終端硬件采用LED屏、LCD顯示器等。為實現更加豐富的報表及圖形展現功能，本系統(tǒng)采用大屏LCD顯示器作為顯示終端。用戶可通過辦公電腦或手持智能終端打開網頁，或將大屏終端設備安裝在樓宇過道上，方便教務管理者隨時掌握教學場地使用情況。

2.1 看板表格模板設計

教學場地（教室、實訓室、實驗室、實訓車間等）信息一般包括上課時間、上課地點、課程名稱、上課老師、班級、授課內容、到課人數、實訓設備、教學耗材、設備故障等。看板表格按二維表方式呈現，用戶可根據數據的關注維度來設置數據列，如圖1所示。

HTML實現表格及布局的標簽有兩個：和

2.4 數據行分頁顯示

受到屏幕高度限制，教室數量遠遠超出一個屏幕畫面中的數據行數。因此，必須進行分頁顯示，可通過Kanban系統(tǒng)的后臺線程程序定時刷新數據源，將表格中的行號與數據記錄的行號進行動態(tài)綁定，而前端腳本程序則定時按行號去取后臺數據源。分頁停留時間的長短可以根據屏幕數據量的多少來定，通過合理算法智能算出，不需人工設置。

3 實時數據抽取

展現層和需求定制化功能實現后，即可進行原始數據實時更新。

（1）數據來源。有3種方式：①Kanban系統(tǒng)從學校的教務系統(tǒng)數據庫中定時抽取。這種方式最有效，因為可以同步更新因調課而產生的排課變化；②按固定的Excel模板將排課數據導入到Kanban系統(tǒng)中，這種方式存在人工誤操作及信息延時的弊端；③其它人工錄入或自動采集方式，如授課內容、到課人數、教學耗材、設備故障等信息。

（2）實時更新。由于看板屏幕顯示的是當前時刻教室的使用情況，而教室每天每節(jié)次安排的上課數據不一樣，因此Kanban系統(tǒng)的后臺程序必須有相應的線程對數據定時刷新。

（3）展現層數據抽取。后臺的所有教室狀態(tài)數據得到實時更新之后，前端頁面的腳本程序就可以定時抽取后臺數據了，這里的異步交互技術可以采用Ajax技術[6]，做到“頁面不刷新，數據刷新”，為用戶提供舒適的體驗效果。

4 結語

基于HTML5的教室信息Kanban系統(tǒng)具有以下特點：①動態(tài)展現圖形化的教學樓、樓層、教室實時運行狀況，提供所有教室的全方位數據[7]；②實時統(tǒng)計師生到課率，提高教學管理水平；③實時對課堂聲音和視頻進行采樣，為教學評價提供依據；④設計大屏幕實時顯示畫面，可以按需定制形式各樣的報表數據，加強師生自律性；⑤系統(tǒng)不僅能發(fā)布課程安排信息，還能顯示當前無課教室的位置分布，發(fā)布所有教室當前狀況信息，方便管理人員根據教室的使用數據對教學資源進行優(yōu)化配置。

通過運行，Kanban軟件功能穩(wěn)定，可逐步向同類院校推廣。

參考文獻：

[1]劉華星，楊庚.HTML5——下一代Web開發(fā)標準研究[J].計算機技術與發(fā)展，2011 （8）：55-56.

[2]紀陵，蔣衍君，施廣德.基于SVG 的電力系統(tǒng)圖形互操作研究[J].電力自動化設備，2011 （7）：105-107.

[3]石磊.淺談CSS3中的3D動畫技術原理[J].電腦知識與技術，2015 （5）：227-229.

[4]方軒，熊樹平.電子看板在企業(yè)物流管理中的運用[J].物流工程與管理，2009 （10）：59-62.

[5]張淑紅.Javascript跑馬燈效果淺析[J].科技資訊，2012 （35）：22-25.

[6]HAYWARD，JONATHAN.Django JavaScript Integration：AJAX and jQuery[M].Packet Publishing，2011.

[7]沈萍萍.智慧教室監(jiān)控管理架構分析[J].電腦知識與技術，2016 （30）：213-216.

（責任編輯：杜能鋼）