基于H5的互動微課開發與應用

林楠

[摘 要] 基于HTML5的微課具有強交互性，在移動學習上大有用武之地。列舉了常用的H5微課制作工具，并以中職《數控加工機械基礎》中的《認識液壓泵》一課為例，介紹如何制作H5微課。

[關 鍵 詞] H5；微課；H5互動微課；移動學習

[中圖分類號] G712 [文獻標志碼] A [文章編號] 2096-0603（2018）14-0201-01

傳統的教學資源無法適應移動學習新潮流。PPT裝機量最大，基本只能在電腦上觀看。而Flash需插件支持，且制作門檻高。同時以視頻為載體的微課，盡管在教育教學上已經炙手可熱，但仍存在學習成本高、制作修改繁瑣、交互性差的缺陷。

一、什么是H5互動微課

H5指第5代HTML，一種超文本標記語言，適應移動設備的多平臺性（安卓、蘋果、微軟等）。而H5互動微課即利用H5語言編寫的一種翻頁課件，通過手機終端把文字、圖片、音頻、視頻等以動畫的方式展示出來。

二、H5互動微課的優勢

（一）制作技術傻瓜化。像制作PPT一樣直接套用免費模板，替換頁面上的元素即可快速創作H5互動微課。教師還可上傳PC端的資源到在線素材庫，隨時隨地都可以在手機上構建。

（二）容易修改。視頻微課從PPT設計到錄制再到剪輯，中間任何一個環節一旦出錯，就得重新錄制與輸出。而H5互動微課只需替換錯誤頁面上的素材，更新發布即可，使H5互動微課能夠根據不同的教學需求及時更新。

（三）更好的互動支持。PPT一旦離開課堂就很難實現師生互動，而完整的微課視頻雖包含練習題，卻不能提供完成率、正確率等數據。H5微課可以插入表單組件，進行調查、測試及評價，教師在后臺實時查看學生提交的數據。

（四）降低了學習成本。在移動端播放視頻考驗流量和電量，還會出現卡頓，考驗學習者的耐心，學習效果大打折扣。而H5互動微課流量耗用小，響應速度快，當網絡信號不佳甚至出現斷網的情況時，還能繼續訪問。

三、常用的制作工具

（一）轉換類工具。如果有現成的課件，而且時間精力有限，那么可以選用轉換類工具，如91速課。它能直接將PPT轉換為H5微課，且完美保留所有類型的動畫和聲音。

（二）場景模板類工具。模板類如炫課，它最新加入的訊飛語音引擎可以將文本轉換成多種語音，給H5微課頁面快速配音。但是炫課要在PC端下載安裝軟件。

我們可以用易企秀代替，瀏覽器登錄網站，注冊后即可在線創建和編輯H5頁面，或者手機安裝APP。同類工具還有Maka、百度H5、兔展等。

四、在教學中的應用

接下來，筆者將以職高《數控加工機械基礎》中《認識液壓泵》一課為例，介紹如何制作H5互動微課。盡管技術方法不同，H5互動微課的制作也同制作視頻微課、教學幻燈片一樣，要經歷從選題、設計、制作到發布的過程。

（一）選題。本文選題時也考慮過同樣為核心課程的《機械識圖》，但由于畫圖課件在制作中需要大量動畫效果，工作量較大，采用上文所提的轉換類工具更為合適。

（二）結構設計。（1）封面和引入。封面和引入在設計時應注意激趣，這決定了學生是否愿意繼續瀏覽，因此可適當設置懸念、引用案例等。液壓泵的工作原理與心臟是極其相似的，因此開場我以心臟為引入。（2）新課。新課是整個H5微課的主體，拒絕枯燥乏味，可考慮多樣化的表現形式。本課采用游戲闖關形式，由于教學重點是液壓泵的種類和工作原理，因此設計了三關，知識點分別為齒輪泵、葉片泵、柱塞泵的工作原理。

（三）練習和小結。練習是檢驗學習效果的重要依據。通過表單反饋的數據，教師能看清學生存在的易錯點和易混淆點。小結部分是對整個H5微課的總結，歸納出“液壓泵是利用密封容積的變化來實現吸油和壓油的”。學生帶著結論在課堂上與其他學生一起驗證。

（四）反饋和拓展。課上教師要教什么怎么教，最重要的就是根據學生反饋回來的問題備課。倘若組織者不重視反饋信息的收集與分析，就容易導致與學習者的脫節。

微課的最后以拓展結束，以鏈接的形式添加下一個微課內容，也可以是本課的深入延伸，形成完整的知識體系。教學大綱對拆裝與維修沒有要求，但為了理實一體，在微課結尾添加企業專業拆裝液壓泵視頻作為拓展。

五、制作

（一）創建一個場景。易企秀提供了很多場景模板，可按喜好選擇。點擊“預覽”就能看到場景的完整內容。如果實在找不到滿意的，也可創建一個空白場景自己設計排版。

（二）建立在線素材庫。因為H5互動微課主要在智能手機上使用，搜集的素材需先加工處理再從電腦上傳。為節省流量，圖片的尺寸一般為640×1010，圖片文件大小應小于500kB，音樂控制在1M以內，視頻一般采用MP4格式。

（三）開始制作H5微課?；谀０?，接下去就是一個“填鴨式”過程，插入素材庫內的圖片、動畫、音頻、鏈接等。這里要注意兩點：（1）圖文并茂。大篇幅的文字容易造成閱讀者的視覺疲勞。因此多用圖來表達，再配合轉場效果、淡入淡出等動畫，提煉文字來最大限度地利用有限的手機屏幕。（2）信息交互。表單是H5微課中實現信息交互的重要途徑。目前易企秀支持的表單組件主要有輸入框、單選、多選、評分等，采用不同的題型可實現不同需求的教學互動。

（四）發布和分享H5微課。H5互動微課支持在多個系統上瀏覽，點擊發布形成專屬鏈接和二維碼，精準投放到微信、QQ等社交平臺。教師可以在手機端隨時隨地關注學生的學習情況，Excel導出的數據是備課依據。

綜上所述，H5互動微課更適用于移動學習。實際應用中為避免知識的碎片化，我們應該將H5互動微課體系化、結構化和專題化，將一個個孤立的微課串聯起來，幫助學生構建完整的知識體系。

參考文獻：

[1]王子文.H5在翻轉課堂中的應用實踐[J].現代職業教育，2017（15）：124-125.

[2]冷國華，蔡志東，許翊.HTML5互動微課開發與應用[J].鎮江高專學報，2016（3）：37-41.

[3]譚敏敏.基于HTML5在線編輯平臺的移動學習資源構建與應用研究[J].中國教育信息化，2016（19）：40-43.

[4]倪俊杰.H5課件給教師帶來的新機遇[J].浙江教育技術，2016（2）：46-50.