基于HTML5的教室信息電子看板設計
2017-07-12 19:51:01俞新凱
軟件導刊 2017年6期
摘要：作為新一代網頁語言標準，HTML5為絕大多數瀏覽器和Web應用開發者提供了強大的技術支持和兼容性。HTML5具備更廣泛的多媒體特性，支持網頁端的Audio、Video播放功能，在圖形及報表展現方面也比原來的HTML標準更勝一籌。設計了基于HTML5的教室信息電子看板實現方案，利用電子看板（網頁看板）實時呈現教學情況，為教務管理提供有效的信息化手段。
關鍵詞：HTML5；看板；SVG；跑馬燈；數據抽取
DOIDOI：10.11907/rjdk.171377
中圖分類號：TP319
文獻標識碼：A 文章編號：1672-7800（2017）006-0084-02
0 引言
教室是師生從事教學活動的最重要場所，如何提高教室使用率、改善課堂教學環境，是考量高校人才培養質量的重要指標?；趥鹘y人工巡查、統計上報的工作模式，對了解和掌握課堂教學信息存在滯后性，當出現教學資源不足、教學事故等有關問題時不能及時進行管理。同時歷史數據難以形成連續性的統計報表，統計效果不夠直觀。
本文基于HTML5的網頁標準和有關規范，開發了一套用于實時展現教室資源使用情況的網頁看板系統（以下稱Kanban系統），為考核部門提供師生到課率等信息，為實訓管理部門提供教室利用率等信息，為教務部門提供教學資源使用率等信息，為學校管理層提供全方位的報表信息，為制訂教學管理制度和基礎設施投入方案提供決策依據。
1 HTML5
相比于以前版本的HTML、XHTML，HTML5是一個更加通用的標準，得到了世界主流軟件提供商和開源組織的支持，具有更強的互聯網交互及展現能力。
（1）采用HTML5標準和規范開發的Web應用，可以同時運行在PC機和平板電腦、手機等移動智能終端上。
（2）各大主流瀏覽器均支持HTML5，如Safari、Chrome、Firefox、IE9、Opera等[1]，Web應用開發可在眾多瀏覽器上重復測試。
（3）增加了全新的
（4）增加了全新的
（5）HTML5支持視頻和音頻播放功能，均有對應的
（6）HTML5與CSS3完美融合，使網頁展現力更加強大，無論是2D還是3D界面元素都變得富有動感效果[3]。
（7）HTML5對前版本的HTML標簽和語法進行了科學合理的裁剪，摒棄了一些過時的標簽，局部修改和完善了語法規則，增強了整體代碼的健壯性、一致性，使開發者更易于掌握其技術特點，開發效率大大提高。
2 網頁看板
Kanban系統早期應用于生產車間的流水線，在看板顯示屏上顯示投入物料、工位號、生產計劃、生產節拍、實時產量等數據，在日常生產管理過程中起到監督、控制、跟蹤等作用[4]，現廣泛應用于生產管理、金融市場行情、公共服務窗口、客戶等候隊列等。
看板顯示終端硬件采用LED屏、LCD顯示器等。為實現更加豐富的報表及圖形展現功能，本系統采用大屏LCD顯示器作為顯示終端。用戶可通過辦公電腦或手持智能終端打開網頁，或將大屏終端設備安裝在樓宇過道上，方便教務管理者隨時掌握教學場地使用情況。
2.1 看板表格模板設計
教學場地（教室、實訓室、實驗室、實訓車間等）信息一般包括上課時間、上課地點、課程名稱、上課老師、班級、授課內容、到課人數、實訓設備、教學耗材、設備故障等?？窗灞砀癜炊S表方式呈現，用戶可根據數據的關注維度來設置數據列，如圖1所示。
HTML實現表格及布局的標簽有兩個：和
，顯示靜態數據沒有問題，但單元格中的寬度不足以顯示全部文本時，就要以走字方式實現，有時表格的布局和樣式不規則，
均難以實現。所以，本系統采用基于矢量圖形的
（4）為滿足用戶不同的報表需求，看板顯示屏的表格模板必須定制，即用戶可以在軟件界面上對表格模板按需設計，如畫線、分區域、拖放等，并將模板數據保存到數據庫中。
2.2 跑馬燈控制
在單元格區域無法完全顯示文本內容時，則需要用跑馬燈式的走字方式。文字跑馬燈的控制通過JavaScript腳本程序來實現[5]。
（1）對看板表格中所有實時數據，根據字體大小和內容長度，判斷其是否完全容納于單元格區域中，如果長度超出，則需要顯示為跑馬燈。
（2）為所有內容長度超出單元格區域的
（3）網頁看板的所有元素加載完畢后，啟動所有跑馬燈函數，顯示屏開始走字。
2.3 數據列篩選
受到屏幕寬度限制，無法在一個畫面中同時顯示所有數據項（上課時間、上課地點、課程名稱、上課教師、班級、授課內容、到課人數、實訓設備、教學耗材、設備故障等）。因此，在Kanban系統中要提供數據定制功能，允許用戶將其關心的主要數據顯示在看板上，其它則不顯示。用戶對數據項進行篩選，以可視化的方式在看板模板設計界面中操作，并保存到數據庫中，由看板展現層和程序功能模塊在數據庫中自動抽取。
2017年06期
- 軟件理論與方法
- 基于多核屬性學習的視頻多概念檢測研究
- 基于本地代理和索引信息的代碼侵權檢測方法
- 基于測試需求的持續集成環境研究與實踐
- 一種基于支持向量機的場景標注方法
- 基于無線傳感網絡分簇結構的軟件架構
- 基于ASP.NET的頁面靜態化實現方法研究
- 軟件設計與開發
- 基于RFID的室內無線定位實驗教學系統設計
- 基于Modbus通信協議的油田RTU調試軟件設計與實現
- 離散型制造業進銷存管理信息系統設計與實現
- 基于4G物聯網技術的無人船云控制系統設計與實現
- 醫療保險數據可視化系統設計與實現
- 融合文化和時間的學習資源推薦研究
- 基于自動組卷與判卷的在線考試系統設計
- 全國大學英語等級考試成績定制查詢系統設計與實現
- 基于Android的停車位與充電柱預約系統設計與實現
- 數字信號處理教學輔助軟件設計與實現
- 基于RoR的高校畢業審核系統設計與實現
- 基于HTML5的教室信息電子看板設計
- 深井應變地震儀一體化軟件設計
- 基于物聯網的沿海濕地環境監測系統設計與實現
- “二十四節氣養生”科普系統APP設計與開發
- 基于分布式思維的云計算數據挖掘平臺設計
- 基于云存儲和Android平臺的汽車銷售管理APP設計
- 基于模糊PID控制器的葉菜溫室測控系統設計
- 基于Bootstrap的響應式網頁設計
- 基于移動終端的多元立體資源包設計與實現
- 基于北斗衛星的手機定位跟蹤系統設計與實現
公司地址: 北京市西城區德外大街83號德勝國際中心B-11
客服熱線：400-656-5456??客服專線：010-56265043??電子郵箱：longyuankf@126.com
電信與信息服務業務經營許可證：京icp證060024號
Dragonsource.com Inc. All Rights Reserved
2.4 數據行分頁顯示
受到屏幕高度限制，教室數量遠遠超出一個屏幕畫面中的數據行數。因此，必須進行分頁顯示，可通過Kanban系統的后臺線程程序定時刷新數據源，將表格中的行號與數據記錄的行號進行動態綁定，而前端腳本程序則定時按行號去取后臺數據源。分頁停留時間的長短可以根據屏幕數據量的多少來定，通過合理算法智能算出，不需人工設置。
3 實時數據抽取
展現層和需求定制化功能實現后，即可進行原始數據實時更新。
（1）數據來源。有3種方式：①Kanban系統從學校的教務系統數據庫中定時抽取。這種方式最有效，因為可以同步更新因調課而產生的排課變化；②按固定的Excel模板將排課數據導入到Kanban系統中，這種方式存在人工誤操作及信息延時的弊端；③其它人工錄入或自動采集方式，如授課內容、到課人數、教學耗材、設備故障等信息。
（2）實時更新。由于看板屏幕顯示的是當前時刻教室的使用情況，而教室每天每節次安排的上課數據不一樣，因此Kanban系統的后臺程序必須有相應的線程對數據定時刷新。
（3）展現層數據抽取。后臺的所有教室狀態數據得到實時更新之后，前端頁面的腳本程序就可以定時抽取后臺數據了，這里的異步交互技術可以采用Ajax技術[6]，做到“頁面不刷新，數據刷新”，為用戶提供舒適的體驗效果。
4 結語
基于HTML5的教室信息Kanban系統具有以下特點：①動態展現圖形化的教學樓、樓層、教室實時運行狀況，提供所有教室的全方位數據[7]；②實時統計師生到課率，提高教學管理水平；③實時對課堂聲音和視頻進行采樣，為教學評價提供依據；④設計大屏幕實時顯示畫面，可以按需定制形式各樣的報表數據，加強師生自律性；⑤系統不僅能發布課程安排信息，還能顯示當前無課教室的位置分布，發布所有教室當前狀況信息，方便管理人員根據教室的使用數據對教學資源進行優化配置。
通過運行，Kanban軟件功能穩定，可逐步向同類院校推廣。
參考文獻：
[1]劉華星，楊庚.HTML5——下一代Web開發標準研究[J].計算機技術與發展，2011 （8）：55-56.
[2]紀陵，蔣衍君，施廣德.基于SVG 的電力系統圖形互操作研究[J].電力自動化設備，2011 （7）：105-107.
[3]石磊.淺談CSS3中的3D動畫技術原理[J].電腦知識與技術，2015 （5）：227-229.
[4]方軒，熊樹平.電子看板在企業物流管理中的運用[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]沈萍萍.智慧教室監控管理架構分析[J].電腦知識與技術，2016 （30）：213-216.
（責任編輯：杜能鋼）
