在高職教學中H5應用的研究

趙宇

（天津海運職業學院 天津 300350）

摘 要：在高職教學中，教師可以借助HTML5技術制作個性化的課件。本文首先介紹了HTML5技術的優勢，接著介紹了HTML5課件的優勢，最后以高職信息技術《數據類型》一課為例，介紹如何制作H5課件。

關鍵詞：課件 HTML5 教學

一、HTML5介紹

HTML5包含了HTML、CSS和JavaScript三個部分，不單單只是HTML部分而已，CSS3和JavaScript也有許多創新，讓整個網頁程序功能更加豐富，彌補了早期版本在多媒體和頁面交互等方面的缺陷。通過HTML5的各種技術以一種前所未有的統一、簡潔、無插件依賴的方式實現復雜的網頁應用，HTML5的優越性已得到廣大開發人員的普遍認可。[1]

1.支持音視頻技術

移動學習常用的學習資料主要是文檔、聲音和視頻文件格式，支持視頻播放是最直觀的學習形式，HTML5標準里提供了新的標簽audio、video，并內置了視頻解碼器，通過這兩個標簽的應用，在網頁里可以直接嵌入播放聲音和視頻文件，而不需要借助播放插件。

2.支持離線存儲

HTML5標準的一個新的特點是支持離線存儲。通過HTML5規范，可以將客戶端的數據資源保存在瀏覽器的緩存當中，也可以將數據存儲在本地存儲器中。[2]

3.支持觸摸操作

過去Web的Flash播放模式并不支持觸控操作，而HTML5技術則完全支持當前所有的觸摸智能手機，能夠進行良好的觸摸控制，

對于本文研究的課程資源移動網站，要實現在移動終端上的顯示，首先要解決跨平臺的問題，而基于HTML5技術進行開發將有效地解決這個問題。

二、H5課件的優勢

H5不僅能夠很好地展示教師的教學內容，還因為其極易共享和傳播，可以輕松地在不同的設備上學習，更能通過信息反饋，很好地與老師產生互動，不受時空限制。可以想象，借助H5課件，老師的教學內容將不僅局限于自己的學生，還能被更多需要的學習者使用，產生教育的最大功效。接下來，筆者將以高職信息技術《數據類型》一課為例，介紹如何制作H5課件。

三、動手制作H5課件

H5的設計開發分原生開發和借助第三方，教師不是專業出身，建議選擇比較成熟的開發工具：如易企秀、兔展、微頁等，這里以易企秀為例。

1.注冊易企秀賬戶

登錄易企秀官網首頁（Chap ：//eqxiu.com /），通過輸入用戶名和手機號碼進行驗證注冊，也可以直接使用微信和QQ進行快速注冊。易企秀賬戶分個人賬戶和企業賬戶，企業賬戶還分免費版和付費版，付費版會帶來更多的高級功能服務。但對于教師制作H5教學課件而言，使用免費版也已經足夠了。

2.創建一個場景

易企秀中的場景相當于一個PPT課件的文件，創建一個場景就是制作一個課件的開始。與等制作課件的軟件一樣，易企秀也提供了很多現成的、不同類別的場景模板供選擇。

3.開始制作H5課件

經過不斷的完善改進，場景的制作工作臺已經比較成熟和方便。制作工作臺的中部是效果展示舞臺，舞臺右邊欄是快速編輯工具；頂部左側是元素欄，可以插入字體、文本、背景、音樂、視頻、圖片、形狀、圖集、互動、表單和特效等元素右側是場景頁面，頁面名稱允許自定義，順序可以自由互換移動。

（1）插入背景和圖片

圖片是H5場景制作過程中的重要素材，圖片類型分背景圖片、素材圖片和圖集圖片等。易企秀的圖片素材也和場景模板一樣，有很多現成的圖片庫供選擇，種類非常豐富。

（2）插入文本

在H5頁面中插入文本的原理和方法與在中插入文本框的方式基本類似，操作也是簡單易懂，插入的文本可以使用鼠標和方向鍵調整位置，也可以調整存放的層次。

（3）插入音樂和視頻

這里介紹的音樂是指打開H5課件場景后的背景音樂。同樣地，也有一個音樂素材庫供選擇。

除了這，還可以通過本地上傳（不超過4M）和添加音樂網址的方式獲取音樂。

（4）插入表單組件

表單是H5課件中實現信息交互的重要途徑。目前易企秀支持的表單組件主要有輸入框、單選、多選、評分等（表2），這些組件都可以轉化為課件中不同的題型，實現不同需求的教學互動。不管使用什么類型的表單組件，都需要添加一個提交按鈕，用于上傳用戶所選擇或輸入的信息。

易企秀為每一個表單組件都設計了數據匯總功能，制作者可以在后臺實時看到用戶提交的數據，還可以將這些數據導出到Excel文件中進行分析。

4.發布和分享H5課件

課件制作完畢之后，先點擊保存，再點擊發布功能即可預覽最終的效果。預覽后需要修改的地方，可以點擊“編輯場景”繼續制作。易企秀提供了多種方式的分享途徑（見圖1），可以借助移動互聯網發揮巨大的傳播功能。

5.統計分析數據

課件制作完成后，筆者利用周末時間，通過微信朋友圈（群）、QQ空間（群）等方式將課件地址分享給學生。除了統計匯總的功能外，易企秀還統計了不同時間段、針對不同的內容，以及客戶端地區和設備的統計情況，有助于制作者對H5場景的效果進行監控。

6.使用APP管理

易企秀不僅可以在電腦端制作場景，還可以通過A PP在移動設備上制作和編輯場景。通過登錄同一個賬戶，內容和信息相互連通，即時更新。

結語

HTML5技術已日趨成熟，瀏覽器對HTML5的支持度日漸提高，基于HTML5的課件學習能夠將豐富的知識內容的呈現形式和互動學習活動更加吸引學習者參與到在線學習中，享受學習的樂趣，提高學習效率，因而未來運用HTML5技術的在線課程建設必將成為教學資源建設中新的熱點。

參考文獻

[1]黃予，莫永華，何良泉，伍艷蘭. 基于HTML5的微格教學視頻標注系統的設計與實現[J]. 電化教育研究，2014，04：66-71.

[2]鄧夢德. HTML5的新特性及其在基于Web的教學平臺開發中的應用前景[J]. 電腦知識與技術，2014，16：3829-3831+3842.