徐小棟 胡春 韓俊 徐亞

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

關(guān)鍵詞：HTML5;響應(yīng)式;教學(xué)平臺

中圖分類號：TP393.09;G434? ? ? 文獻(xiàn)標(biāo)識碼：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標(biāo)準(zhǔn)規(guī)范制定完成以來，Web前端開發(fā)基本上都轉(zhuǎn)到了以HTML5+ CSS3為基礎(chǔ)的新技術(shù)平臺，在此基礎(chǔ)上再加之以Bootstrap響應(yīng)式前端開發(fā)框架等的應(yīng)用，更使所開發(fā)的Web前端不僅適用于PC客戶端，而且也能適用于移動設(shè)備端。在如今移動設(shè)備（智能手機(jī)、Pad等）隨處可見，幾乎人人持有的年代，所開發(fā)的Web應(yīng)用系統(tǒng)能適用于移動設(shè)備端，既節(jié)省了專門針對移動設(shè)備端開發(fā)的費(fèi)用，又?jǐn)U展了Web應(yīng)用系統(tǒng)的適用范圍，使更多的設(shè)備能訪問和使用Web應(yīng)用系統(tǒng)。因此本文所研究的課程教學(xué)輔助平臺前端開發(fā)，采用基于HTML5的響應(yīng)式布局技術(shù)，既可方便地使用到HTML5所帶來的新技術(shù)、新功能，又可使所開發(fā)的Web應(yīng)用系統(tǒng)針對不同的終端設(shè)備具有良好的適應(yīng)性。

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

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

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

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

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

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

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

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

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

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

3.1? ppt或pptx教學(xué)課件的播放

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

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

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

4? 關(guān)于師生在教學(xué)過程中的交流互動問題

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

5? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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