基于HTML5的響應式課程教學輔助平臺研究

徐小棟 胡春 韓俊 徐亞

摘? 要：闡述課程教學輔助平臺以基于HTML5、Bootstrap響應式前端開發(fā)框架等新技術條件下的功能規(guī)劃、關鍵數(shù)據(jù)對象，開發(fā)過程中應考慮的關鍵技術點，以及系統(tǒng)建立的目的、系統(tǒng)適用的應用對象。并對系統(tǒng)中未考慮的相關功能做出說明，以及重新增設相關功能的方法。

關鍵詞：HTML5;響應式;教學平臺

中圖分類號：TP393.09;G434? ? ? 文獻標識碼：A 文章編號：2096-4706（2019）20-0093-03

Abstract：This paper explain the function planning and key data objects under the new technology conditions such as HTML5 and Bootstrap responsive front-end development framework，and the key technical points that should be considered in the development process，as well as the purpose of system establishment and the applicable application objects of the system. It also describe the relevant functions not considered in the system and how to re-add related functions.

Keywords：HTML5;responsive;teaching platform

0? 引? 言

自2014年10月29日萬維網(wǎng)聯(lián)盟宣布HTML5標準規(guī)范制定完成以來，Web前端開發(fā)基本上都轉(zhuǎn)到了以HTML5+ CSS3為基礎的新技術平臺，在此基礎上再加之以Bootstrap響應式前端開發(fā)框架等的應用，更使所開發(fā)的Web前端不僅適用于PC客戶端，而且也能適用于移動設備端。在如今移動設備（智能手機、Pad等）隨處可見，幾乎人人持有的年代，所開發(fā)的Web應用系統(tǒng)能適用于移動設備端，既節(jié)省了專門針對移動設備端開發(fā)的費用，又擴展了Web應用系統(tǒng)的適用范圍，使更多的設備能訪問和使用Web應用系統(tǒng)。因此本文所研究的課程教學輔助平臺前端開發(fā)，采用基于HTML5的響應式布局技術，既可方便地使用到HTML5所帶來的新技術、新功能，又可使所開發(fā)的Web應用系統(tǒng)針對不同的終端設備具有良好的適應性。

課程教學輔助平臺實質(zhì)上屬于一種網(wǎng)絡教學平臺，網(wǎng)絡教學平臺的形式多種多樣[1-4]。本文所研究的課程教學輔助平臺是以課程為核心，輔助授課教師圍繞課程建立教學資源、課堂環(huán)境、學生作業(yè)、測試和考評等各種教學環(huán)節(jié)。目的是通過系統(tǒng)收集各種教學資源（教學課件、教學視頻、測試題庫、學生成績等），當各類資源積累到一定程度后，通過系統(tǒng)所能提供的各類教學資源，既可減輕授課教師備課、批改作業(yè)、試卷的工作壓力，又可根據(jù)系統(tǒng)提供的相關數(shù)據(jù)分析教學效果，改進教學方式和方法。

1? 系統(tǒng)功能概述

課程教學輔助平臺的主要作用一是能輔助授課教師完成課堂教學，使授課教師在課前所準備的教學課件、教學視頻等教學多媒體內(nèi)容，在上課時能通過網(wǎng)絡傳送至教室的多媒體教學設備，輔助教師進行課堂教學，或是將授課教師課前準備的課堂練習發(fā)布給學生，在學生完成練習后輔助教師給出評判結(jié)果;二是能在課后向?qū)W生布置作業(yè)，當學生在規(guī)定時間范圍內(nèi)完成作業(yè)后，能輔助教師批改作業(yè)、統(tǒng)計成績;三是能幫助學生對課程學習內(nèi)容進行復習和鞏固;四是能在完成相應教學內(nèi)容后（如某個教學單元，或期中、期末）根據(jù)授課教師的安排，對學生的學習情況進行測試和考評，并根據(jù)測試和考評結(jié)果分析整個課程的教學情況。

由上述分析可知，該系統(tǒng)從使用者的角度來看，可分為教師端、學生端和系統(tǒng)管理員端。授課教師從教師端登入系統(tǒng)，在系統(tǒng)中創(chuàng)建課程（新課），或添加系統(tǒng)中已有課程;為新建課程添加教學內(nèi)容（如教學課件、教學視頻等）、測試內(nèi)容等，或?qū)ο到y(tǒng)已有資源根據(jù)自己的教學需要做出設置和更改;為課程添加教學班級、學生等;為學生布置課堂練習、作業(yè)、測試等;并在學生完成相關練習、作業(yè)或測試后，在系統(tǒng)輔助下完成相關練習、作業(yè)或測試的批閱。學生根據(jù)教師的授權從學生端登入系統(tǒng)，在系統(tǒng)中可觀看教學課件、教學視頻等教學內(nèi)容;可完成教師所布置的課堂練習、作業(yè)、測試等。系統(tǒng)管理員從系統(tǒng)管理員端錄入系統(tǒng)，在系統(tǒng)中完成對教師及其權限的管理，以及對系統(tǒng)數(shù)據(jù)進行維護等操作。因此整個系統(tǒng)功能結(jié)構如圖1所示。

2? 系統(tǒng)中的關鍵數(shù)據(jù)對象

如上文所述，該平臺是以課程為核心，課程是該系統(tǒng)中的關鍵數(shù)據(jù)對象之一。教師在創(chuàng)建了新課程，或添加了系統(tǒng)中的已有課程，才能依托課程創(chuàng)建教學資源，或利用已有教學資源;才能創(chuàng)建課堂，課堂是另一個關鍵數(shù)據(jù)對象，以課堂對象為容器，加入班級和學生，對班級和學生進行管理;以課程和課堂為基礎，完成預習、作業(yè)等布置，完成測試或考試的布置。學生在選擇了相關課程之后，才能在教師的提前安排下，完成對該課程的學習任務。

教學課件、教學視頻、試題庫是課程下的幾個關鍵數(shù)據(jù)對象。在新建課程中，這幾個數(shù)據(jù)對象都是空的，由新建課程的教師負責添加數(shù)據(jù)。對已有課程，系統(tǒng)中保存有一套系統(tǒng)默認數(shù)據(jù)，教師可直接使用。系統(tǒng)中的默認數(shù)據(jù)可由系統(tǒng)管理員根據(jù)相關課程的專業(yè)教研室意見，將系統(tǒng)中已存在的數(shù)據(jù)設定為系統(tǒng)默認，或直接將新建課程的數(shù)據(jù)設為系統(tǒng)默認。教師也可上傳自制的課件或視頻去覆蓋系統(tǒng)默認數(shù)據(jù)，或添加個人數(shù)據(jù)（如題庫）。為了減輕教師的備課負擔，避免備課教師為了網(wǎng)絡教學而不得不學習網(wǎng)頁設計這種情況，該系統(tǒng)以教師常用的ppt或pptx作為教學課件，接收教師上傳的ppt或pptx文件，并能在瀏覽器中播放上傳到服務器端的ppt或pptx課件。為了減輕服務器端的負擔，對老師上傳的視頻文件格式應做適當?shù)囊?，如只能上傳mp4、OGG和WebM等格式。

教師、班級、學生是該系統(tǒng)中其他幾個關鍵數(shù)據(jù)對象。教師是授課的主體，班級是授課教師管理學生的容器，也是教師創(chuàng)建課堂的基礎，教師在布置預習、作業(yè)、考試時，一般是以班級為對象的，很少有直接針對學生個人的情況。學生是教師實施教學的最終對象，教師為教學而設置預習、作業(yè)、測試等任務，最終由班級中的每個學生來完成。教師信息及權限由系統(tǒng)管理員創(chuàng)建和設定，班級和學生信息可由系統(tǒng)管理員統(tǒng)一設定，也可由授課教師設定。但系統(tǒng)應對這幾種數(shù)據(jù)進行統(tǒng)一編碼和統(tǒng)一管理，避免數(shù)據(jù)的重復。

系統(tǒng)中所有數(shù)據(jù)的刪除權限歸系統(tǒng)管理員所有，嚴格控制對系統(tǒng)數(shù)據(jù)資源的清除，以避免由于誤操作而損壞系統(tǒng)數(shù)據(jù)資源。

3? 系統(tǒng)建立中的幾個關鍵點

3.1? ppt或pptx教學課件的播放

由于在系統(tǒng)中授課教師上傳的教學課件是ppt或pptx文件，而ppt或pptx文件是無法直接在瀏覽器中播放，如果直接在網(wǎng)頁中給出教學課件的鏈接地址，將會造成學生點擊后直接下載文件的情況。這個問題的解決，可以有兩種方法，第一種方法是利用對外公開的文檔在線預覽服務網(wǎng)站，如http：//www.officeweb365.com/。使用這種方法有兩個前提條件，一是必須在該網(wǎng)站注冊，二是系統(tǒng)的Web服務器必須有外網(wǎng)可訪問的域名，即存放ppt或pptx文件的服務器必須是提供文檔在線預覽服務的服務器可訪問得到的，這樣文檔在線預覽服務器才能讀取到需要轉(zhuǎn)換的文件，并將轉(zhuǎn)換后的結(jié)果發(fā)送到客戶端。第二種方法是借助于微軟公司的Office Web APPs Server軟件包，搭建自己的Office Web APPs Server服務器，而Office Web APPs Server服務器并不單獨使用，要實現(xiàn)ppt或pptx文件能在瀏覽器中播放，必須要三臺服務器協(xié)同工作，三臺服務器分別是域控制服務器、Web服務器和Office Web APPs Server服務器，而且Web服務器和Office Web APPs Server服務器必須加入到域控制服務器所控制的域中。有關Office Web APPs Server服務器和域控制服務器的搭建這里不做介紹，可參考微軟公司相關技術網(wǎng)頁。使用第二種方法的好處是Web服務器和Office Web APPs Server服務器都在自己的局域網(wǎng)內(nèi)，Web服務器無須對外公開，也不需要申請正式的Internet域名。

3.2? 教學視頻的管理和分發(fā)

系統(tǒng)中的教學視頻資源是一類十分消耗系統(tǒng)存儲空間的資源，當有多個用戶同時訪問教學視頻資源時，如果Web服務器同時兼做視頻分發(fā)服務器，可能造成Web服務器負擔過重。因此可考慮建立單獨的視頻存儲和分發(fā)服務器，以減輕Web服務器負擔。實際上，系統(tǒng)中教學視頻資源的管理和使用，十分類似于視頻點播系統(tǒng)，因此可參照視頻點播系統(tǒng)來建立。有關教學視頻的管理和分發(fā)，以及前端播放功能的實現(xiàn)，可參閱參考文獻[5-8]。

4? 關于師生在教學過程中的交流互動問題

從圖1中可以看出，在該系統(tǒng)中并未考慮在網(wǎng)絡教學環(huán)境中師生交流互動的情況。這是基于如下所述的考慮：該系統(tǒng)為課程教學輔助平臺，是輔助教師以課程為核心，完成相關課程的教學。其并不是遠程網(wǎng)絡教學系統(tǒng)。也就是說課堂教學仍然以教師授課為主，教學活動過程中教師和學生之間可以直接面對面地交流，教學活動的環(huán)境仍然是在學校的教室中。因此在系統(tǒng)中未考慮設置師生交流互動的功能。當然，考慮到課后學生依然有和教師進行交流的需求，可考慮在系統(tǒng)中設置類似于留言板的功能，但與留言板并不完全一致，學生和教師的交流主要是與授課教師，而非系統(tǒng)管理員，不同的課程的教學一般是由不同教師承擔的，這是與普通留言板不一致的地方。為了增強師生交流的功能，也可以考慮增加教學論壇等這樣的功能。

5? 結(jié)? 論

響應式課程教學輔助平臺的建立，一是為了擴展系統(tǒng)的設備適用范圍，增強信息化教學的功能;二是為了輔助授課教師完成教學任務，減輕授課教師在備課、作業(yè)批改、考試批閱等環(huán)節(jié)的工作壓力。系統(tǒng)建立的目的是收集教學資源，輔助教師教學，教學的主體仍然是授課教師，教學活動仍然是教師和學生之間直接的、面對面的交流。該系統(tǒng)并不是遠程網(wǎng)絡教學系統(tǒng)，因此未考慮師生之間的交流環(huán)節(jié)，但可以將此環(huán)節(jié)增設到系統(tǒng)中。

參考文獻：

[1] 蔣東興，張繼才，羅念龍.高校網(wǎng)絡教學現(xiàn)狀與對策 [J].計算機教育，2004（9）：44-46.

[2] 張慶，管錦亮.基于HTML5的可視化編程教學平臺的設計 [J].沈陽師范大學學報（自然科學版），2018，36（2）：163-168.

[3] 劉東，王金社.基于Web的互聯(lián)網(wǎng)網(wǎng)絡在線輔助教學系統(tǒng)設計 [J].現(xiàn)代電子技術，2017，40（20）：28-30.

[4] 蔡華龍，劉挺.基于移動終端的教學互動在線輔助系統(tǒng)研究 [J].無線互聯(lián)科技，2016（9）：51-53.

[5] 孫丹鶴，王振.基于HTML5的視頻網(wǎng)站播控系統(tǒng) [J].電腦知識與技術，2011，7（36）：9517-9518.

[6] 謝淑麗，徐鎮(zhèn)輝.基于HTML5跨平臺微課視頻系統(tǒng)的設計與實現(xiàn) [J].陜西理工學院學報（自然科學版），2016，32（5）：63-68.

[7] 呂志鋼.支持移動學習的教學視頻點播系統(tǒng)設計 [J].電子世界，2014（5）：134-135.

[8] 張文.基于HTML5的視頻播控和客戶服務系統(tǒng) [D].西安：西安電子科技大學，2014.

作者簡介：徐小棟（1964-），男，漢族，云南曲靖人，副教授，學士，研究方向：計算機應用技術、程序設計與開發(fā);胡春（1982-），男，漢族，云南曲靖人，講師，碩士，研究方向：計算機應用技術、程序設計與開發(fā);韓?。?972-），男，漢族，云南曲靖人，講師，碩士，研究方向：計算機網(wǎng)絡技術、程序設計與開發(fā);徐亞（1979-），女，漢族，云南曲靖人，講師，碩士，研究方向：Web前端設計與制作、數(shù)字媒體。