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