在高職教學(xué)中H5應(yīng)用的研究

趙宇

（天津海運(yùn)職業(yè)學(xué)院 天津 300350）

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

關(guān)鍵詞：課件 HTML5 教學(xué)

一、HTML5介紹

HTML5包含了HTML、CSS和JavaScript三個(gè)部分，不單單只是HTML部分而已，CSS3和JavaScript也有許多創(chuàng)新，讓整個(gè)網(wǎng)頁(yè)程序功能更加豐富，彌補(bǔ)了早期版本在多媒體和頁(yè)面交互等方面的缺陷。通過(guò)HTML5的各種技術(shù)以一種前所未有的統(tǒng)一、簡(jiǎn)潔、無(wú)插件依賴的方式實(shí)現(xiàn)復(fù)雜的網(wǎng)頁(yè)應(yīng)用，HTML5的優(yōu)越性已得到廣大開(kāi)發(fā)人員的普遍認(rèn)可。[1]

1.支持音視頻技術(shù)

移動(dòng)學(xué)習(xí)常用的學(xué)習(xí)資料主要是文檔、聲音和視頻文件格式，支持視頻播放是最直觀的學(xué)習(xí)形式，HTML5標(biāo)準(zhǔn)里提供了新的標(biāo)簽audio、video，并內(nèi)置了視頻解碼器，通過(guò)這兩個(gè)標(biāo)簽的應(yīng)用，在網(wǎng)頁(yè)里可以直接嵌入播放聲音和視頻文件，而不需要借助播放插件。

2.支持離線存儲(chǔ)

HTML5標(biāo)準(zhǔn)的一個(gè)新的特點(diǎn)是支持離線存儲(chǔ)。通過(guò)HTML5規(guī)范，可以將客戶端的數(shù)據(jù)資源保存在瀏覽器的緩存當(dāng)中，也可以將數(shù)據(jù)存儲(chǔ)在本地存儲(chǔ)器中。[2]

3.支持觸摸操作

過(guò)去Web的Flash播放模式并不支持觸控操作，而HTML5技術(shù)則完全支持當(dāng)前所有的觸摸智能手機(jī)，能夠進(jìn)行良好的觸摸控制，

對(duì)于本文研究的課程資源移動(dòng)網(wǎng)站，要實(shí)現(xiàn)在移動(dòng)終端上的顯示，首先要解決跨平臺(tái)的問(wèn)題，而基于HTML5技術(shù)進(jìn)行開(kāi)發(fā)將有效地解決這個(gè)問(wèn)題。

二、H5課件的優(yōu)勢(shì)

H5不僅能夠很好地展示教師的教學(xué)內(nèi)容，還因?yàn)槠錁O易共享和傳播，可以輕松地在不同的設(shè)備上學(xué)習(xí)，更能通過(guò)信息反饋，很好地與老師產(chǎn)生互動(dòng)，不受時(shí)空限制?？梢韵胂?，借助H5課件，老師的教學(xué)內(nèi)容將不僅局限于自己的學(xué)生，還能被更多需要的學(xué)習(xí)者使用，產(chǎn)生教育的最大功效。接下來(lái)，筆者將以高職信息技術(shù)《數(shù)據(jù)類型》一課為例，介紹如何制作H5課件。

三、動(dòng)手制作H5課件

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

1.注冊(cè)易企秀賬戶

登錄易企秀官網(wǎng)首頁(yè)（Chap ：//eqxiu.com /），通過(guò)輸入用戶名和手機(jī)號(hào)碼進(jìn)行驗(yàn)證注冊(cè)，也可以直接使用微信和QQ進(jìn)行快速注冊(cè)。易企秀賬戶分個(gè)人賬戶和企業(yè)賬戶，企業(yè)賬戶還分免費(fèi)版和付費(fèi)版，付費(fèi)版會(huì)帶來(lái)更多的高級(jí)功能服務(wù)。但對(duì)于教師制作H5教學(xué)課件而言，使用免費(fèi)版也已經(jīng)足夠了。

2.創(chuàng)建一個(gè)場(chǎng)景

易企秀中的場(chǎng)景相當(dāng)于一個(gè)PPT課件的文件，創(chuàng)建一個(gè)場(chǎng)景就是制作一個(gè)課件的開(kāi)始。與等制作課件的軟件一樣，易企秀也提供了很多現(xiàn)成的、不同類別的場(chǎng)景模板供選擇。

3.開(kāi)始制作H5課件

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

（1）插入背景和圖片

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

（2）插入文本

在H5頁(yè)面中插入文本的原理和方法與在中插入文本框的方式基本類似，操作也是簡(jiǎn)單易懂，插入的文本可以使用鼠標(biāo)和方向鍵調(diào)整位置，也可以調(diào)整存放的層次。

（3）插入音樂(lè)和視頻

這里介紹的音樂(lè)是指打開(kāi)H5課件場(chǎng)景后的背景音樂(lè)。同樣地，也有一個(gè)音樂(lè)素材庫(kù)供選擇。

除了這，還可以通過(guò)本地上傳（不超過(guò)4M）和添加音樂(lè)網(wǎng)址的方式獲取音樂(lè)。

（4）插入表單組件

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

易企秀為每一個(gè)表單組件都設(shè)計(jì)了數(shù)據(jù)匯總功能，制作者可以在后臺(tái)實(shí)時(shí)看到用戶提交的數(shù)據(jù)，還可以將這些數(shù)據(jù)導(dǎo)出到Excel文件中進(jìn)行分析。

4.發(fā)布和分享H5課件

課件制作完畢之后，先點(diǎn)擊保存，再點(diǎn)擊發(fā)布功能即可預(yù)覽最終的效果。預(yù)覽后需要修改的地方，可以點(diǎn)擊“編輯場(chǎng)景”繼續(xù)制作。易企秀提供了多種方式的分享途徑（見(jiàn)圖1），可以借助移動(dòng)互聯(lián)網(wǎng)發(fā)揮巨大的傳播功能。

5.統(tǒng)計(jì)分析數(shù)據(jù)

課件制作完成后，筆者利用周末時(shí)間，通過(guò)微信朋友圈（群）、QQ空間（群）等方式將課件地址分享給學(xué)生。除了統(tǒng)計(jì)匯總的功能外，易企秀還統(tǒng)計(jì)了不同時(shí)間段、針對(duì)不同的內(nèi)容，以及客戶端地區(qū)和設(shè)備的統(tǒng)計(jì)情況，有助于制作者對(duì)H5場(chǎng)景的效果進(jìn)行監(jiān)控。

6.使用APP管理

易企秀不僅可以在電腦端制作場(chǎng)景，還可以通過(guò)A PP在移動(dòng)設(shè)備上制作和編輯場(chǎng)景。通過(guò)登錄同一個(gè)賬戶，內(nèi)容和信息相互連通，即時(shí)更新。

結(jié)語(yǔ)

HTML5技術(shù)已日趨成熟，瀏覽器對(duì)HTML5的支持度日漸提高，基于HTML5的課件學(xué)習(xí)能夠?qū)⒇S富的知識(shí)內(nèi)容的呈現(xiàn)形式和互動(dòng)學(xué)習(xí)活動(dòng)更加吸引學(xué)習(xí)者參與到在線學(xué)習(xí)中，享受學(xué)習(xí)的樂(lè)趣，提高學(xué)習(xí)效率，因而未來(lái)運(yùn)用HTML5技術(shù)的在線課程建設(shè)必將成為教學(xué)資源建設(shè)中新的熱點(diǎn)。

參考文獻(xiàn)

[1]黃予，莫永華，何良泉，伍艷蘭. 基于HTML5的微格教學(xué)視頻標(biāo)注系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 電化教育研究，2014，04：66-71.

[2]鄧夢(mèng)德. HTML5的新特性及其在基于Web的教學(xué)平臺(tái)開(kāi)發(fā)中的應(yīng)用前景[J]. 電腦知識(shí)與技術(shù)，2014，16：3829-3831+3842.