H5在翻轉課堂中的應用實踐

[摘 要] 傳統的翻轉課堂一直以來都跟視頻的使用密不可分，相當一部分的翻轉都要依賴于視頻格式的微課。但隨著移動互聯的發展，視頻的劣勢也逐漸顯現，而新興的HTML5（簡稱H5）技術在移動學習應用方面有著獨特的優勢。從H5的特點、制作技術及推廣應用等方面展開討論，提供完整的H5在翻轉課堂中的應用實踐方案。

[關 鍵 詞] H5；翻轉課堂；移動互聯

[中圖分類號] G712 [文獻標志碼] A [文章編號] 2096-0603（2017）15-0124-02

根據中國互聯網絡信息中心發布的第39次《中國互聯網絡發展狀況統計報告》顯示，截至2016年12月，我國網民規模達7.31億。其中，手機網民6.95億，增長率連續三年超過10%。網民中使用手機上網人群占比由2015年的90.1%提升至95.1%，使用臺式電腦、筆記本上網的人數均呈下降態勢。這表明移動互聯已經占據絕對的主導地位。在這個人手一臺手機的時代，移動互聯為“互聯網+教育”提供一條廣闊的道路，移動學習也將成為主流。

一、翻轉課堂的發展現狀

從2007年誕生至今，翻轉課堂在短短的十年間風靡全球。Khan、Cousera、Edx、中國大學MOOC等用于翻轉課堂的慕課平臺如雨后春筍般涌現，但他們都是利用視頻來實施教學的。這有它的優點，但劣勢也很明顯。首先，現今大部分參與翻轉的人都在移動端進行學習，視頻對流量和電量都是一個考驗。其次，不管相關人士認為視頻是如何容易制作的，但要做出具有吸引力的視頻，尤其是數量較大的時候，基層教師是難以實現的。還有，視頻中就算可以插入測試題，但它卻不能提供完成率、正確率等的重要數據作為教師備課的依據。所以，不利于移動學習，不方便基層教師，不能提供有效互動，這些都成為現今阻礙翻轉課堂大范圍推廣的重要因素。

二、HTML5的概念及其優勢

HTML是一種超文本標記語言，1991年問世，經過多年修訂與完善，已成為網絡應用中描述網頁最通用的語言，目前互聯網上的絕大部分網頁都是使用HTML編寫的。為了適應移動互聯，達到跨平臺使用的目的，由此產生了HTML第5版標準，簡稱HTML5或H5。

H5有以下應用優勢：（1）其傻瓜式的易用性。利用H5制作平臺，普通教師就能像制作PPT一樣制作H5微課，幾乎不用怎么培訓就可以掌握H5的制作技術。效率高，成本低。（2）更好的互動支持。用H5做出來的作品比PPT和視頻等傳統微課有更多的互動，能夠達到Flash效果。（3）容易修改。H5是一種網頁應用，如果發現有問題，只需在相應頁面編輯修改、更新發布即可，不像視頻那樣要重新錄制與輸出。（4）能及時收集數據與反饋。通過H5可以進行多種調查、測試及評價，并能及時反饋給學習者和發布者，有效地為翻轉課堂服務。（5）其針對移動應用開發的技術使其更適合移動學習，例如，它流量耗費低，響應速度快。這降低了學習者在移動端的學習成本，更利于推廣。正因為H5的這些優勢，它已逐漸滲透到人們生活的方方面面，如游戲、視頻播放、Web應用、交互廣告等。未來將是Web的世界，而H5代表Web的未來，HTML5交互技術、硬件訪問能力以及瀏覽器安全等技術發展將滿足萬物互聯的體驗需求。

H5的制作技術可以分成編程、軟件、平臺三大類。作為教師，大可不必深究與編程或軟件相關的知識，只需要用好H5制作平臺即可。這類平臺有很多，如炫頁、初頁、易企秀、百度H5、iH5、Maka等，它們都能使H5制作技術傻瓜化，讓普通人可以像做PPT一樣來做H5作品，更可以套用模板，通過替換內容快速制作H5作品。下面重點闡述如何利用H5制作平臺來制作適用于翻轉課堂的H5作品。

三、H5在翻轉課堂中的應用

翻轉課堂要的是把新知識的講授放到課前進行，因此，H5作品也應該重點針對這一塊來制作。盡管技術、方法不一樣，但實質上它與視頻微課、多媒體課件的開發與應用相似，一個H5作品也要經過選題、設計、制作、發布等過程。如下圖所示：

（一）選題

因為制作的H5應用在翻轉課堂中，所以一定要面向學生，同時要考慮教學大綱和教學計劃的要求，注意前后知識點的銜接。既要分析學生的學習特點，也要分析教材的教學內容，選題要小而精，盡量選取教學的重點、難點、疑點、易錯點、考點等作為主題，直擊學生的痛處。

（二）設計

與傳統的視頻相比，H5的表現形式更加豐富，它可以是文本、圖片、音頻、視頻、動畫、互動試題、問卷調查等，或以上的元素的組合。它是一種非常個性化的教學展示方式。要做好H5的“私人定制”，就要做好結構設計和腳本設計。

1.結構設計

H5是用來支持課前教學的，要把它的結構設計跟傳統課堂的教學設計區分開來。雖然不像一節課，H5的教學過程很短，但它的結構一定要完整，應包括封面、引入、新課、試題、小結、反饋等。封面是學生決定是否瀏覽下面內容的關鍵，在設計時應該注意激發學生的興趣。精彩的引入可以激發學生學習新課的興趣，可以適當設置懸念、引用案例或故事等。新課是主體，也是最難展示的部分，可考慮表現形式多樣化，例如，深受學生喜愛的漫畫形式。當然這對于大部分教師來說不易做到，但作為教師，我們的資源其實是很豐富的，學生中不乏有一些繪畫高手，而且讓學生參與其中，不也成為翻轉課堂一個很好的組成部分嗎？練習是檢驗學生是否領會新課，并為教師反饋學習數據的重要方法，把它用上，能很好地為翻轉課堂服務。小結部分應該要能引起學生的思考，讓他們帶著問題進入課堂，主動積極地與其他學生一起探尋答案。最后的反饋部分也很重要。翻轉課堂上教師要教授什么內容，很大部分要取決于學生反饋回來的問題。

2.腳本設計

H5跟PPT的表現形式比較接近，由一個個頁面組成。我們可在頁面上嵌入各種可視化元素來展現學習內容。腳本設計包括頁面布局、媒體選擇、出場方式和順序、交互方式、跳轉等設計，一般采用圖片加描述的表達形式。要特別重視H5的交互設計，因為只有H5具備互動性才能讓學生動起來。這也是它區別于視頻的重要特征。因此，在設計時要充分利用制作平臺里的動畫、換頁、跳轉、測試、調查、反饋等功能。

（三）制作

毫不夸張地說，懂得制作PPT就懂得制作H5。只需根據結構設計按順序制作各個場景頁面，并根據腳本在頁面上添加各種元素，如文字、圖片、視頻、動畫等，也可添加一些鏈接、跳轉、測試等交互效果，選擇頁面切換效果和背景音樂，設置H5基本信息等，最后保存預覽，進行適當修改后即可發布。如果覺得這還復雜的話，還可以直接套用H5制作平臺的模板，只需替換其中的頁面元素便可，這樣就進一步降低H5制作的難度，減輕教師的工作量，提高翻轉課堂的效率。

四、發布

H5制作完成后，點擊發布，會出現網址鏈接和二維碼，可以通過微信、QQ等社交平臺來推送。學生只要通過手機點擊鏈接、掃二維碼等便可瀏覽H5，進行各種交互式學習，并及時反饋相關數據。同時教師可以在后臺搜集交互數據，進行統計分析。這些數據不僅能反映出該H5是否適合學生學習，為以后的改進提供參考，還能為教師提供備課基礎，為接下來上的課做好準備。

綜上所述，相對于采用視頻形式實施翻轉課堂，H5具有技術門檻低、互動性能強、數據反饋及時、推廣速度快等優勢。它的多媒體融合性也使它更具吸引力。相信采用了H5以后，翻轉課堂能夠更順利地推行。不過在利用H5來翻轉課堂的時候要注意，一定要讓作品專題化、結構化、體系化。這樣才能幫助學生構建完整的知識體系，才能幫助翻轉課堂發揮它最大的作用。

參考文獻：

冷國華.多媒體CAI課件設計與制作[M].江蘇大學出版社，2010.