基于H5的互動微課開發(fā)與應(yīng)用

林楠

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

[關(guān) 鍵 詞] H5；微課；H5互動微課；移動學(xué)習(xí)

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

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

一、什么是H5互動微課

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

二、H5互動微課的優(yōu)勢

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

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

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

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

三、常用的制作工具

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

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

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

四、在教學(xué)中的應(yīng)用

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

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

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

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

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

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

五、制作

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

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

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

（四）發(fā)布和分享H5微課。H5互動微課支持在多個系統(tǒng)上瀏覽，點擊發(fā)布形成專屬鏈接和二維碼，精準投放到微信、QQ等社交平臺。教師可以在手機端隨時隨地關(guān)注學(xué)生的學(xué)習(xí)情況，Excel導(dǎo)出的數(shù)據(jù)是備課依據(jù)。

綜上所述，H5互動微課更適用于移動學(xué)習(xí)。實際應(yīng)用中為避免知識的碎片化，我們應(yīng)該將H5互動微課體系化、結(jié)構(gòu)化和專題化，將一個個孤立的微課串聯(lián)起來，幫助學(xué)生構(gòu)建完整的知識體系。

參考文獻：

[1]王子文.H5在翻轉(zhuǎn)課堂中的應(yīng)用實踐[J].現(xiàn)代職業(yè)教育，2017（15）：124-125.

[2]冷國華，蔡志東，許翊.HTML5互動微課開發(fā)與應(yīng)用[J].鎮(zhèn)江高專學(xué)報，2016（3）：37-41.

[3]譚敏敏.基于HTML5在線編輯平臺的移動學(xué)習(xí)資源構(gòu)建與應(yīng)用研究[J].中國教育信息化，2016（19）：40-43.

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