翻轉課堂的H5數字資源平臺的設計與實現

黃戌霞 陳明磊 蘇鋒

摘? 要：隨著我國信息化時代的迅速發展，興起了翻轉課堂、創客空間、可穿戴技術、虛擬現實技術、物聯網技術等諸多新技術。為合理運用不斷產生與發展的新興信息技術來提高教學質量，文章以“CSS+DIV網頁設計”課程為例運用軟件開發模型，基于H5技術打造一個數字化教學資源平臺，以此實現在教學領域借助信息技術開展翻轉課堂教學的教學改革實踐，使教師能運用信息技術促進高職院校學生的高水平學習。

關鍵詞：數字化教學資源;設計與制作;教育信息化;翻轉課堂

中圖分類號：TP311.5;TP391.41? ? ? 文獻標識碼：A 文章編號：2096-4706（2020）18-0172-04

Abstract：With the rapid development of my countrys information age，many new technologies such as flipped classrooms，maker spaces，wearable technology，virtual reality technology，and internet of things technology have emerged. In order to rationally use the emerging information technology that is continuously produced and developed in the education field to improve the quality of teaching，this article uses the “CSS+DIV Web Design” course as an example to use the software development model and build a digital teaching resource platform based on H5 technology to achieve the teaching field uses information technology to carry out the teaching reform practice of flipped classroom teaching，so that teachers can use information technology to promote high-level learning of students in higher vocational colleges.

Keywords：digital teaching resource;design and production;education informatization;flipped classroom

0? 引? 言

2019年4月教育部、財政部印發的《教育部、財政部關于實施中國特色高水平高職學校和專業建設計劃的意見》（教職成〔2019〕5號）文件中提出了以“信息技術+”升級傳統專業，及時發展數字經濟催生的新興專業。適應“互聯網+職業教育”需求，推進數字資源、優秀師資、教育數據共建共享，助力教育服務供給模式升級。提升師生信息素養，建設智慧課堂和虛擬工廠，廣泛應用線上線下混合教學，促進自主、泛在、個性化學習的指導思想，本文以“CSS+DIV網頁設計”課程為例，實現課程資源的數字化，遵循軟件開發的過程，嚴格按照計劃、需求分析和軟件設計等流程，基于H5技術打造數字資源平臺，以踐行翻轉課堂教學改革。

1? 建設數字化教學資源平臺的思路

數字化教學資源平臺的搭建的是一個系統工程，與軟件開發的過程有著許多的相似之處，所以在對數字化教學資源進行設計與制作時，延續了軟件工程學中軟件開發的相關流程，包含了如計劃制定、需求分析以及軟件設計等基本活動。在設計數字化教學資源的過程中，軟件系統工程學的思想給予了重要的指導作用，所以在構建時，將其劃分為教學需求分析、教學資源設計、教學資源實現以及教學資源測試與維護四個階段。

1.1? 數字化教學資源平臺功能需求分析

以“CSS+DIV網頁設計”課程為例，該課程理論與實踐結合緊密，在計算機應用專業人才培養體系中起到承上啟下的作用，學生需要具備一定的計算機操作水平，學完后可為后續的其他相關課程打下基礎，是一門專業核心課。但計算機類課程內容更新快，導致紙質教材的內容滯后;學生課堂實踐學時不足，導致操作能力低。針對以上問題將該課程內容進行重構，并打造適合高職學生的數字化教學資源平臺，提升學生的實踐能力，不僅貼合實際，還豐富了校內教學資源，促進了“三教”改革的踐行。

本文選擇目前主流的H5技術搭建一個在線數字資源平臺，H5是一種超文本標記語言，能實現將多種媒體資源信息如文字、圖片、視頻、音頻等進行整合，通過瀏覽器呈現在PC終端或移動終端，實現各種交互、虛擬仿真效果的實現。使用H5技術構建數字化教學資源并應用于教學中，可促進教學信息傳遞與教學評價反饋工作，將學生碎片化時間充分地利用起來，激發學生對學習的興趣，并結合翻轉課堂教學模型對教學環節的精心合理設計，實現課前、課堂、課后三個環節的有機結合。該平臺分為學生平臺、教師平臺、管理員平臺，系統整體功能如圖1所示。其優勢的主要體現：一是學生可以通過該平臺集中獲取到本課程的知識，通過反復學習資源和在線實踐把握重點知識，解決難點;二是教師與學生、學生與學生之間可以通過平臺進行交流互動，為翻轉課堂的實現提供了有力的支持;三是數字化教學資源為教學反饋提供了途徑，可實現以評促教、以評促學。

1.2? 實現H5數字資源平臺的相關技術

要實現資源數字化，需要采用合適的H5制作工具展開對數字資源平臺進行設計與實現。依據不同平臺的制作工具可以將其劃分為四類。

1.2.1? 語言類H5平臺

使用HTML5、JavaScript、CSS等語言進行編寫，這種開發方式可以實現各種教學資源的復雜化交互動作和效果。

1.2.2? 模板類的H5平臺

隨著現今科學技術水平的不斷發展，逐漸出現了易企秀、兔展等H5平臺，可為用戶提供出豐富的文字、圖片、動畫等模板，快速地實現對生成內容的編輯、刪除、替換等，具有操作簡便、動畫交互簡單的特點，比較適合使用在學生成果展示環節中。

1.2.3? 教學類H5平臺

市場上使用較為廣泛的有速課網、絢星微課等，該類平臺專門面向教學活動，既可制作H5數字化教學資源，還能為教師的教學環節開展提供更多的支持，例如班級管理、課件管理等，比較適用于開展線上線下混合式教學。

1.2.4? 專業制作類H5平臺

主要有iH5、Epub360、CoolSITE360等。這些平臺擁有可視化的圖形操作界面，易自學易上手，可以實現各種復雜的交互功能，如教學過程中的小游戲、虛擬化全景體驗。

本文采用網頁制作工具Dreamweaver，結合新一代響應式網站設計工具CoolSITE360平臺和后臺數據庫SQL進行數字化教學資源平臺的開發與實現。

2? H5數字化教學資源平臺設計原則

本平臺可讓教師實現數字化教學資源的分類存放、管理和使用，實現翻轉課堂的教學改革實踐，讓學生通過PC端或移動端輕松獲取學習資源進行在線學習，以提高學習效率，促進學習成效。因此本平臺必須具備良好的可用性、適當性和交互性，在此基礎上還應具備良好的可擴展性，故在設計中應遵循以下原則。

2.1? 簡潔性

在教授學習一些簡單知識或在引進新知識點時，只需要用一種模態類型將其呈現出來即可，可以選擇使用文字或者是短視頻的單視覺模式呈現。有專家學者認為，在同種模態的學習環境之下，所輸入的信息與學生能夠輸出的信息是同質的;但是在多模態學習中，輸入的信息與學生輸出的信息并不是同質的。這就需要學生能夠在學習過程中調用自身的知識，并啟用新的模態，而這樣的過程對學生的認知能力有著嚴重的消耗。因此，該原則應重點應用在學生課前的預學階段，此時的學生對知識的儲備為零，應該構建輕松易懂的單模態學習環境讓其樹立學習的信心。

2.2? 適當性

在翻轉課堂教學工作開展中適當地轉變模態，可以有效地提升學生自身的學習效率。當學習模態進行轉換時，需要學生將新知識與已有知識結合，從而強化學生自身的學習效果。但是在教學過程中過多地使用音視頻材料，會增加學生的認知負擔，反而起到消極的作用。因此，本文在對“CSS+ DIV網頁設計”課程數字化教學資源進行設計時，合理地對媒體的類型與數量進行了選擇，針對一些比較復雜的教學內容就通過文字和音視頻結合的形式，通過多模態互相協調、互相促進。例如，學生課堂環節中學習一些HTML和CSS代碼時，需要使用到教學課件中的文字解釋、圖片說明，并且輔助性的添加一些音頻示范，配以實踐操作和互動等幫助學生從聽覺、視覺等方面實現對代碼的全方位感知。

2.3? 交互性

在影響學習效率的因素中，情感與動機也是重要的存在，學生在傳統的教學模式下一味被動、填鴨式地學習，并不能激發起自身的學習動機。所以在對“CSS+DIV網頁設計”教學資源展開設計的同時，添加了一些練習題、互動小游戲、評價評學版塊，為學生的學習營造出更多自我反思的時間與氛圍，促進學生與H5教學資源、學生與教師以及學生與學生之間的線下互動，從而激發起學生的學習興趣，切實提高學生的動手實踐能力。

2.4? 可擴展性

教學資源平臺可以長久應用于教學的各個環節，因此平臺的結構和功能必須具有可擴展性，以滿足后續功能需求。

3? 數據庫的搭建

在翻轉課堂教學工作開展中，需要使用先進的教學理念對教學單元展開細致化的分析工作。本平臺基于翻轉課堂教學的基本流程，使用教學過程中總結獲得的項目導向法作為主導思路，對整體的教學單元展開分析設計。項目導向法是將學習內容重構為一個個具體的項目，由教師利用平臺作輔助進行輸入式教學，學生通過線上線下混合式教學逐步對項目進行學習，通過對應項目的測試、反饋等形式，教師有針對性進行輔導，以解決學生在學習過程中的瓶頸。基于以上流程，在數據庫概念模型設計中主要考慮需要使數據庫具有在一定歷史條件下的語義表達能力，能表達用戶的各種需求，易于交流和理解，適應應用環境的變化，具有易更改性。因此，基于E-R模型的一些重點實體定位：用戶、課程實體、課程類型、課程資源等，下面列舉一些實體E-R圖。

3.1? 用戶

屬性有ID、工號、姓名、性別、專業、電話、手機、郵箱、部門號、地址，如圖2所示。

3.2? 課程實體

屬性有課程編號、課程名稱、課程描述、創建人、專業方向，如圖3所示。

3.3? 課程類型

本平臺的實現選用的是SQL Server數據庫管理系統。通過前期的分析，確定各實體關系和屬性，在數據中創建相關數據表。由于篇幅關系，本文以課程類型表的設計為例，其組成的結構為課程編號（CourseID）、課程名（CourseName）、課程描述（CourseDescription）、創建人（CreateUser）、添加時間（AddDate）、專業方向（StudyNum）等，如圖4所示。

4? 平臺的實現

在數據庫搭建、完善的基礎上，進行本平臺的實現。由于篇幅原因，以下只闡述重點模塊的實現。

4.1? 首頁的實現

本平臺基于“以學生為中心，教師為主導”的理念進行設計，即教師對教學單元內容展開分析，并設定出總的目標將細化為一個個具體的項目，學生根據自身需求選擇相應課程和環節進行學習。在使用H5數字資源教學的過程中，教師根據課程教育的目標，為學生設計并規劃出課程開展的細分目標;學生通過教師的相關技術指導進行實踐操作，并將自己的創作作品通過電子稿件的形式上傳;教師則根據學生作品的情況，選擇出一些優秀的、典型的電子作品進行展示。例如教師根據課程要求講解前端頁面的制作，可以將大知識點分解為頁面設計、頁面布局以及優化設計等，并系統化地組織學生開展實操練習。因此首頁上必須具有課程首頁、課程概況、在線學習、教學資源、拓展資源、在線測試等導航信息，如圖5所示。

4.2? 教學資源主頁面

為了在教學開展過程中激發學生的學習興趣，教師需要根據課程教學環節，設計出一些對學生具有挑戰性的驅動場景。在教學資源頁面中，數字資源主要承擔輸出任務，為的是更好地促進學生掌握單元教學中蘊含的知識點，同時，通過操作強化代碼的應用，達到設計實現網頁頁面的目標，經過反復優化頁面代碼，可提升學生的實際應用能力，達到技能目標，如圖6所示。

重要特性的關鍵實現點如下：

（1）支持多文件上傳，方便學生上傳自己的作品，關鍵代碼如下：

//單個重傳

tr.find（'.t-upload-rs-reload'）.on（'click'， function（）{

obj.upload（index， file）;

}）;

//刪除

tr.find（'.t-upload-rs-delete'）.on（'click'， function（）{

delete files[index]; //刪除對應的文件

tr.remove（）;

uploadListIns.config.elem.next（）[0].value = ''; //清空 input file 值，以免刪除后出現同名文件不可選

}）;

（2）自適應布局，學生、教師在PC和手機上均可進行數字化教學資源的制作、學習，需在head標簽里增加如下代碼：

4.3? 拓展資源頁面

教師需要將教學目標作為學生開展學習的重要導向，在課前明確需要輸入的知識內容范圍，將一些與課堂內容產出并沒有太大關聯的學習內容，整理歸類后放入拓展資源中，供學生自主學習。例如，教師在課堂中講解了關于前端頁面的性能優化，主要圍繞反應速度以及整體頁面美觀設計等，需要學生在課后通過動手實踐，不斷地優化頁面登錄性能與外觀的營造。因此，教師可以根據實際情況設計出H5小游戲，對課堂教學內容進行補充，將一些常用的元素、標簽以及偽代碼等作為拓展知識，歸類放置在課后的知識拓展中。學生根據自身情況進行自主學習，教師可以在后臺管理中看到學生的學情反饋，及時調整教學設計以達到教學目標。

4.4? 評學評教頁面

及時有效地教學評價對教師的教學和學生的學習都能起到正向激勵的作用。本平臺在評學評教環節對所有使用H5數字資源的活動數據均進行了記錄。平臺通過對教師和學生的活動數據分析，反饋學生學習活動的過程、階段性評價等信息，便于后續教學評價工作的開展。將評價工作納入學習過程中，作為學生進一步開展學習的契機，也是H5數字資源平臺實現診斷與改進的一種發展依據。

5? H5數字化教學資源平臺測試與維護

所有的系統平臺制作之后都需要經過測試才能夠使用，即通過發布或者預覽測試資源在不同設備中呈現出的表現成果及各項功能的使用，從而及時地對存在問題進行修改。在教學開展的過程中也可以實現對教學資源平臺的測試，通過觀察學生的使用情況和反饋，對教學資源中存在的不足之處進行修改。在經歷了一系列的測試工作與維護后，才能夠打造出高品質的數字化教學資源平臺。

6? 結? 論

教育的信息化改革是現今教育領域的一種趨勢，而建設并應用數字資源平臺更是教育信息化中必不可少的一部分，如何才能打造出高品質的數字資源平臺，是所有教育工作者共同面臨的一個問題。本文從軟件工程學的角度出發，基于翻轉課堂模式，分析了數字資源平臺需求，闡述了平臺的制作過程。目前基于本數字資源平臺的應用成果“CSS+DIV網頁設計”課程獲批福建省精品在線開放課程，并通過省廳驗收;本數字資源平臺的應用也使本人在2019年福建省教師教學能力比賽中獲得三等獎。希望以此拋磚引玉，為高等職業教育的教學改革實踐提供更多借鑒。

參考文獻：

[1] 李勝華.數字化教學資源在高職教學課堂中的應用——以網頁設計制作為例 [J].信息化建設，2015（8）：230.

[2] 劉芳.動漫設計與制作中數字媒體技術的應用 [J].藝術大觀，2020（18）：37-38.

[3] 付琳.視覺化思維在計算機教學中的應用研究——以“網頁設計與制作”為例 [J].現代信息科技，2019，3（21）：73-75.

[4] 王成玥.基于視覺信息傳達的網頁廣告智能推送系統設計 [J].現代電子技術，2020，43（20）：160-163.

[5] 曹景凱，馬強.H5數字化教學資源的設計與制作 [J].冶金管理，2019（15）：133+135.

[6] 毛寧國.基于ASP校園網站的研究與設計 [J].現代電子技術，2005（16）：87-88+91.

作者簡介：黃戌霞（1983—），女，漢族，福建霞浦人，講師，碩士，研究方向：網頁設計;陳明磊（1984—），男，漢族，福建霞浦人，技術總監，工程師，工程碩士，研究方向：大數據系統研發、大規模非結構化數據業務模型構建、大數據存儲、數據庫構架、數據集群審計監測等;通訊作者：蘇鋒（1965—），男，漢族，福建福安人，信息技術與工程系主任，副教授，理學學士，研究方向：多媒體技術。