冷國(guó)華，蔡志東，許　翊

(鎮(zhèn)江高等專(zhuān)科學(xué)校 丹陽(yáng)師范學(xué)院，江蘇 丹陽(yáng)　212300)

?

HTML5互動(dòng)微課開(kāi)發(fā)與應(yīng)用

冷國(guó)華，蔡志東，許翊

(鎮(zhèn)江高等專(zhuān)科學(xué)校 丹陽(yáng)師范學(xué)院，江蘇 丹陽(yáng)212300)

摘要：移動(dòng)互聯(lián)時(shí)代的學(xué)習(xí)基于多種平臺(tái)，傳統(tǒng)課件對(duì)平臺(tái)要求嚴(yán)格，基于視頻的微課其交互性弱，影響學(xué)習(xí)效果，而基于HTML5的微課(簡(jiǎn)稱(chēng)H5微課)適合多種平臺(tái)，具有強(qiáng)交互性，是移動(dòng)學(xué)習(xí)的最適合資源。可從H5微課及特點(diǎn)、開(kāi)發(fā)技術(shù)及推廣應(yīng)用等方面展開(kāi)討論，提供完整的H5互動(dòng)微課設(shè)計(jì)、制作和應(yīng)用解決方案。

關(guān)鍵詞：HTML5；H5；微課；H5微課；移動(dòng)互聯(lián)

移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和以智能手機(jī)、平板等為主的智能移動(dòng)設(shè)備的普及，使移動(dòng)學(xué)習(xí)逐漸成為一種重要的學(xué)習(xí)方式和常態(tài)，智能設(shè)備的多平臺(tái)性(Android、iOS、Windows、Linux等)需要我們開(kāi)發(fā)出適合多平臺(tái)使用的數(shù)字學(xué)習(xí)資源。

傳統(tǒng)的數(shù)字學(xué)習(xí)資源開(kāi)發(fā)技術(shù)包括PPT、Flash和原生App等，這些種類(lèi)的數(shù)字資源不能跨平臺(tái)使用，在移動(dòng)學(xué)習(xí)時(shí)代存在著很大的局限性。以視頻為載體的微課，雖適合于各種平臺(tái)，但交互性差，缺乏互動(dòng)，影響學(xué)習(xí)者的使用體驗(yàn)，進(jìn)而影響學(xué)習(xí)效果。

HTML5適合于現(xiàn)有的各種平臺(tái)，提供多種交互技術(shù)，開(kāi)發(fā)的網(wǎng)頁(yè)互動(dòng)性強(qiáng)，能夠讓用戶(hù)得到很好的互動(dòng)體驗(yàn)，特別適合移動(dòng)學(xué)習(xí)。2014年HTML5標(biāo)準(zhǔn)的確定，標(biāo)志著該技術(shù)的完善和成熟，近年來(lái)各大網(wǎng)站和公司紛紛拋棄Flash轉(zhuǎn)用HTML5，Web App的普及和流行使HTML5成為潮流。HTML5開(kāi)發(fā)技術(shù)飛速發(fā)展，為開(kāi)發(fā)基于HTML5的跨平臺(tái)互動(dòng)微課(簡(jiǎn)稱(chēng)H5微課)提供了基礎(chǔ)。

本文在簡(jiǎn)介H5的基礎(chǔ)上，從H5微課及特點(diǎn)、開(kāi)發(fā)技術(shù)和推廣應(yīng)用等方面展開(kāi)討論，提供一整套H5互動(dòng)微課的設(shè)計(jì)、制作和應(yīng)用解決方案。

1HTML5簡(jiǎn)介

1.1HTML5技術(shù)的發(fā)展

HTML是一種超文本標(biāo)記語(yǔ)言，1991年問(wèn)世，經(jīng)過(guò)多年修訂與完善，已成為網(wǎng)絡(luò)應(yīng)用中描述網(wǎng)頁(yè)的最通用語(yǔ)言，目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁(yè)都是使用HTML編寫(xiě)的。發(fā)展到HTML第4版標(biāo)準(zhǔn)(HTML4)，遇到了兩種困境：一是瀏覽器為了支持日益豐富的網(wǎng)頁(yè)多媒體和交互的廣泛應(yīng)用，需要許多插件的支持，這帶來(lái)了麻煩和安全性問(wèn)題；二是系統(tǒng)平臺(tái)如微軟、蘋(píng)果、安卓等的不同，需要開(kāi)發(fā)不同的應(yīng)用程序，多次開(kāi)發(fā)造成浪費(fèi)和使用麻煩。由此產(chǎn)生了HTML第5版標(biāo)準(zhǔn)，簡(jiǎn)稱(chēng)HTML5。

HTML5為上述困境提供了良好的解決方案，在與JavaScript、CSS等緊密結(jié)合后，HTML5能使瀏覽器不需要插件(如Flash)也能實(shí)現(xiàn)各種應(yīng)用的交互效果，其跨平臺(tái)可用性更令應(yīng)用的一次開(kāi)發(fā)成為可能，因此逐漸成為Web應(yīng)用開(kāi)發(fā)的新標(biāo)準(zhǔn)。

HTML5草案前身是Web Application1.0，于2004年被網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組(WHATWG)提出，2007年被萬(wàn)維網(wǎng)聯(lián)盟(W3C)接納，2008年1月出臺(tái)第一份草案，2014年10月由W3C發(fā)布正式推薦標(biāo)準(zhǔn)。

HTML5網(wǎng)絡(luò)應(yīng)用有許多優(yōu)勢(shì)：首先是其跨平臺(tái)可用性，其開(kāi)發(fā)的應(yīng)用可以在微軟Windows、蘋(píng)果iOS、Android等系統(tǒng)使用；二是瀏覽器不需要安裝插件就能支持各種媒體，為用戶(hù)省去麻煩，安全也得到保證；如可以通過(guò)HTML5標(biāo)簽

2016年3月18日，白鷺聯(lián)合上方傳媒發(fā)布《2016HTML5移動(dòng)行業(yè)報(bào)告》指出：隨著HTML5行業(yè)基礎(chǔ)設(shè)施建設(shè)逐漸完善，HTML5已逐漸滲透到人們生活的方方面面，如游戲、視頻播放、Web應(yīng)用、交互廣告乃至VR和AR等。未來(lái)將是Web的世界，而HTML5代表Web的未來(lái)，HTML5交互技術(shù)、硬件訪(fǎng)問(wèn)能力以及瀏覽器安全等技術(shù)發(fā)展將滿(mǎn)足萬(wàn)物互聯(lián)的體驗(yàn)需求[2]。

1.2HTML5的流行

2014年下半年，微信捧火了HTML5小游戲；基于HTML5的移動(dòng)端網(wǎng)頁(yè)制作和開(kāi)發(fā)平臺(tái)紛紛出現(xiàn)，如炫頁(yè)、易企秀、百度H5、初頁(yè)、iH5、Maka、Mugeda(木疙瘩)、兔展、云來(lái)、秀米、We+等等，大量H5作品出現(xiàn)在網(wǎng)絡(luò)尤其是移動(dòng)網(wǎng)絡(luò)中，如H5游戲、H5翻頁(yè)、H5調(diào)查、H5邀請(qǐng)、H5廣告、H5站點(diǎn)……，這些讓人們的視線(xiàn)關(guān)注一個(gè)具有中國(guó)特色的新名詞：H5。

對(duì)于H5，狹義的理解是HTML5的簡(jiǎn)稱(chēng)；廣義的說(shuō)就是能夠制作響應(yīng)式網(wǎng)站、WebApp、微信網(wǎng)頁(yè)、交互游戲等網(wǎng)絡(luò)前端應(yīng)用的技術(shù)集合，主要通過(guò)HTML5、JavaScript、CSS等技術(shù)的整合來(lái)實(shí)現(xiàn)，同時(shí)也把這種技術(shù)開(kāi)發(fā)出來(lái)的作品簡(jiǎn)稱(chēng)為H5。

由于商業(yè)營(yíng)銷(xiāo)、自媒體及移動(dòng)應(yīng)用等的需求，H5迅速發(fā)展。2015年是H5的發(fā)展元年，其標(biāo)志是涌現(xiàn)出更多H5制作平臺(tái)、更多的H5作品、更廣泛的H5應(yīng)用場(chǎng)合和人群，甚至有人還提出：2016年H5將井噴[3]。各類(lèi)平臺(tái)讓H5制作技術(shù)傻瓜化，普通人可以像做PPT一樣來(lái)做H5作品，更可以快速套用模板通過(guò)替換內(nèi)容快速制作H5作品，技術(shù)的平民化使得H5很快流行開(kāi)來(lái)。

1.3HTML5制作技術(shù)

H5的制作技術(shù)可以分成三類(lèi)：

一是直接用HTML5、JavaScript、CSS等進(jìn)行編程和編碼，適用于專(zhuān)業(yè)開(kāi)發(fā)人員。

二是H5工具平臺(tái)，這類(lèi)平臺(tái)無(wú)需掌握復(fù)雜的編程技術(shù)，就能簡(jiǎn)單、輕松制作基于HTML5的交互式場(chǎng)景頁(yè)面。大部分平臺(tái)能與主流社交媒體如微博、QQ、微信、論壇等打通，讓用戶(hù)通過(guò)自身的社會(huì)化媒體賬號(hào)進(jìn)行廣泛傳播，并提供統(tǒng)計(jì)功能，讓用戶(hù)隨時(shí)了解傳播效果、搜集與分析數(shù)據(jù)，及時(shí)反饋。

H5平臺(tái)可分為場(chǎng)景模板類(lèi)、功能引擎類(lèi)和基礎(chǔ)工具類(lèi)三種(詳見(jiàn)表1)：

1) 場(chǎng)景模板類(lèi)：提供類(lèi)似PPT頁(yè)面切換的H5制作工具，主要面向個(gè)人用戶(hù)，部分為企業(yè)用戶(hù)。該類(lèi)平臺(tái)種類(lèi)繁多，使用簡(jiǎn)單，交互方式少，主要用于內(nèi)容可視化展示，適用于普通用戶(hù)。

2) 基礎(chǔ)工具類(lèi)：提供用于頁(yè)面交互的HTML5可視化編輯工具，主要面向企業(yè)用戶(hù)，部分為個(gè)人用戶(hù)。

3) 功能引擎類(lèi)：提供HTML5網(wǎng)頁(yè)開(kāi)發(fā)引擎，面向企業(yè)用戶(hù)。它提供基于多交互如Canvas(畫(huà)布)的游戲引擎，適用于輕游戲的開(kāi)發(fā)，面向開(kāi)發(fā)者。

表1　H5工具平臺(tái)類(lèi)型和特點(diǎn)

三是軟件類(lèi)工具，包括網(wǎng)頁(yè)制作工具如Dreamweaver；轉(zhuǎn)換類(lèi)工具，如iSpring可以將PPT轉(zhuǎn)換為H5網(wǎng)頁(yè)，F(xiàn)lipHTML5可以將PDF、PPT、DOC、圖片等轉(zhuǎn)換為翻頁(yè)式H5網(wǎng)頁(yè)；專(zhuān)業(yè)課件類(lèi)開(kāi)發(fā)工具，如Articulate Storyline、Lectora等，這類(lèi)工具功能強(qiáng)大，可以開(kāi)發(fā)適合多個(gè)平臺(tái)使用的符合網(wǎng)絡(luò)課程的交互式H5課件；測(cè)試調(diào)查類(lèi)工具，如問(wèn)卷星、問(wèn)卷網(wǎng)等。

2HTML5微課

2.1HTML5微課及特點(diǎn)

微課的概念于2010年提出。2013年以來(lái)，翻轉(zhuǎn)課堂、MOOCs、SPOC等教學(xué)形式促進(jìn)了微課的應(yīng)用，微課逐漸成為熱點(diǎn)。微課現(xiàn)已廣泛應(yīng)用于各級(jí)各類(lèi)教育教學(xué)及教研培訓(xùn)中，成為重要的信息化教育教學(xué)資源形式和手段之一。

目前流行的微課主要是視頻形式的，雖適合于多平臺(tái)應(yīng)用，但存在著交互性弱、反饋難、數(shù)據(jù)搜集與分析難、檢索難、流量大、制作更新繁瑣等缺陷；而H5微課彌補(bǔ)了視頻微課的這些缺陷，尤其是能在移動(dòng)端設(shè)備上使用，讓用戶(hù)得到更好的學(xué)習(xí)體驗(yàn)和效果。

H5微課，指基于HTML5及相關(guān)技術(shù)制作的微課。與視頻微課一樣，H5微課都是圍繞某一知識(shí)點(diǎn)或教學(xué)環(huán)節(jié)開(kāi)發(fā)的適合自主學(xué)習(xí)、短小精悍、跨平臺(tái)的教學(xué)資源。與其它形式的教學(xué)資源相比，它具有以下特點(diǎn)：

1) 多媒體融合：H5微課是多種媒體的有機(jī)組合，包括文本、圖片、音頻、視頻、動(dòng)畫(huà)等，這使得H5微課可以多種形式展現(xiàn)教學(xué)內(nèi)容，從而具有更好的表現(xiàn)力，利于自主學(xué)習(xí)。

2) 交互性：H5微課可加入多種交互，使得學(xué)習(xí)者可以與教學(xué)內(nèi)容互動(dòng)，和PC端的課件相比，H5微課的移動(dòng)端交互能使學(xué)習(xí)者可以像玩游戲一樣進(jìn)行互動(dòng)學(xué)習(xí)。

3) 修改容易：與原生App、視頻微課等相比，H5微課是一種Web App，如果發(fā)現(xiàn)有問(wèn)題，只需在后臺(tái)進(jìn)行編輯修改，更新發(fā)布即可，這使得H5微課能夠根據(jù)不同的需求和教學(xué)變化及時(shí)更新，以適應(yīng)不同的教學(xué)需求。

4) 數(shù)據(jù)收集與及時(shí)反饋：通過(guò)H5組件如各種表單、測(cè)試等，可以進(jìn)行多種調(diào)查、測(cè)試及評(píng)價(jià)，并能及時(shí)反饋給學(xué)習(xí)者。發(fā)布者可以在后臺(tái)搜集到相關(guān)數(shù)據(jù)，進(jìn)行統(tǒng)計(jì)分析，有效地實(shí)施教學(xué)評(píng)價(jià)。

5) 技術(shù)門(mén)檻低：近年來(lái)大量出現(xiàn)的H5制作平臺(tái)，能夠讓用戶(hù)像操作PPT一樣制作H5微課，普通教師幾乎不用培訓(xùn)就可以掌握H5微課的制作技術(shù)。許多平臺(tái)都是免費(fèi)使用，提供模板，因此H5微課制作效率高，制作成本低。

6) 流量?。撼褂靡曨l以外，其它媒體組成的交互式H5微課流量耗用低，響應(yīng)速度快，這使得學(xué)習(xí)者在移動(dòng)設(shè)備上學(xué)習(xí)成本低，從而得到良好的學(xué)習(xí)體驗(yàn)。

2.2HTML5微課制作技術(shù)

上述所有的H5制作技術(shù)都可以制作H5微課。對(duì)普通教師來(lái)說(shuō)，可以采用簡(jiǎn)單快捷的H5微課制作技術(shù)。選用轉(zhuǎn)換類(lèi)工具，能直接將PPT或其它文檔素材轉(zhuǎn)換為H5網(wǎng)頁(yè)；選用場(chǎng)景模板類(lèi)和基礎(chǔ)工具類(lèi)H5制作平臺(tái)，可以像做PPT一樣制作H5微課；選用測(cè)試類(lèi)工具，可以快速做調(diào)查、測(cè)試等教學(xué)評(píng)價(jià)。下面推薦一些易用、功能強(qiáng)大的適合做H5微課的軟件或平臺(tái)：

1) 炫頁(yè)。江蘇云學(xué)堂網(wǎng)絡(luò)科技有限公司推出的PC端H5制作工具，號(hào)稱(chēng)中國(guó)第一個(gè)HTML5微課制作工具，炫頁(yè)網(wǎng)上提供免費(fèi)的軟件下載(http://www.xuanyes.com/download.html)，軟件安裝后有兩個(gè)工具：一是炫課(基礎(chǔ)版)，可以快速將PPT或圖片組轉(zhuǎn)換并配音發(fā)布為H5微課；二是炫課(專(zhuān)業(yè)版)，能靈活制作多種形式的H5微課，支持圖文、音樂(lè)、視頻等全媒體集成，最新加入的訊飛語(yǔ)音引擎可以將文本轉(zhuǎn)換成多種語(yǔ)音，給 H5微課頁(yè)面快速配音。提供模板方便快速制作，也可以根據(jù)需要自由進(jìn)行頁(yè)面排版；專(zhuān)業(yè)的動(dòng)畫(huà)、事件支持、測(cè)評(píng)題和高級(jí)部件等，能很好地滿(mǎn)足動(dòng)畫(huà)制作和各種交互制作需求；導(dǎo)出SCORM、支持?jǐn)?shù)字簽名、私密密鑰授權(quán)瀏覽、二維碼等功能更好地支持e-Learning；發(fā)布的H5微課成品具有低流量、極速展示的特性，可以跨平臺(tái)(支持IOS、Android、Windows、Mac)學(xué)習(xí)和瀏覽[4]。同類(lèi)的工具還有米鼠—微課開(kāi)發(fā)工具等。

2) 易企秀。不需安裝軟件，用瀏覽器登陸網(wǎng)站可在線(xiàn)創(chuàng)建編輯H5頁(yè)面的工具，制作的H5成品可以快速分享到社交網(wǎng)絡(luò)(網(wǎng)址鏈接或二維碼)，通過(guò)表單收集各種反饋信息。同類(lèi)工具還有百度H5、Maka、兔展等。

3) 初頁(yè)。除提供網(wǎng)頁(yè)版在線(xiàn)制作外，還提供手機(jī)端應(yīng)用(iOS和Android版)，這樣在手機(jī)端也可以快速制作H5頁(yè)面并發(fā)布，手機(jī)中制作優(yōu)勢(shì)是馬上可以看到效果，其特有的接龍功能可以很好地實(shí)現(xiàn)師生交互，教師提出任務(wù)，讓學(xué)生將完成的作業(yè)用接龍方式展示。同類(lèi)工具還有小圖等。

4) iH5。專(zhuān)業(yè)的H5在線(xiàn)制作工具。原為VXPLO互動(dòng)大師，提供H5編輯、效果監(jiān)測(cè)和平臺(tái)社交功能，包括事件控制、時(shí)間軸、多屏控制和數(shù)據(jù)庫(kù)等高級(jí)功能，無(wú)需代碼編程便可實(shí)現(xiàn)復(fù)雜的交互。工具可免費(fèi)使用，教程和幫助詳細(xì)，能搜索案例。同類(lèi)工具還有Epub360、木疙瘩等。

上述工具中考試及調(diào)查功能都比較弱，可采用問(wèn)卷星設(shè)計(jì)制作問(wèn)卷，通過(guò)網(wǎng)址鏈接或二維碼嵌入到H5微課中，有效實(shí)施教學(xué)評(píng)價(jià)、統(tǒng)計(jì)及反饋。

3HTML5微課的開(kāi)發(fā)與應(yīng)用

與微課、多媒體課件的開(kāi)發(fā)與應(yīng)用相似[5]，一個(gè)H5微課從選題到設(shè)計(jì)、制作、應(yīng)用推廣的過(guò)程如圖1所示。

圖1　H5微課開(kāi)發(fā)與應(yīng)用過(guò)程

3.1選題

H5微課面向?qū)W習(xí)者，它的應(yīng)用對(duì)象是學(xué)習(xí)者，因此在選題和設(shè)計(jì)上要根據(jù)學(xué)習(xí)者的需求與特點(diǎn)，通過(guò)對(duì)學(xué)習(xí)者與教學(xué)內(nèi)容的分析，選取出重點(diǎn)、難點(diǎn)、關(guān)鍵點(diǎn)、疑點(diǎn)、易錯(cuò)點(diǎn)、易混淆點(diǎn)、考點(diǎn)、熱點(diǎn)、擴(kuò)展點(diǎn)等作為選題，直擊學(xué)習(xí)者的價(jià)值點(diǎn)、痛點(diǎn)、癢點(diǎn)和興奮點(diǎn)。選題不宜太大，還應(yīng)注意前后知識(shí)點(diǎn)的銜接。

3.2設(shè)計(jì)

與傳統(tǒng)的課堂教學(xué)相比，H5微課從本質(zhì)上說(shuō)屬于一種以視聽(tīng)藝術(shù)方式展示的教學(xué)[6]，因此具有教學(xué)性、結(jié)構(gòu)化、可視化等特點(diǎn)，其設(shè)計(jì)包括教學(xué)設(shè)計(jì)、微課結(jié)構(gòu)設(shè)計(jì)和腳本設(shè)計(jì)[7]。

1) 教學(xué)設(shè)計(jì)。H5微課是用來(lái)支持學(xué)與教的，因此需要精心的教學(xué)設(shè)計(jì)，其內(nèi)容包括學(xué)習(xí)任務(wù)設(shè)計(jì)、情境設(shè)計(jì)、資源設(shè)計(jì)、學(xué)習(xí)方法策略設(shè)計(jì)、管理設(shè)計(jì)和評(píng)價(jià)設(shè)計(jì)等，具體過(guò)程包括學(xué)習(xí)者特征分析(學(xué)情分析)、分析/確定學(xué)習(xí)目標(biāo)、界定問(wèn)題/主題/知識(shí)點(diǎn)(重難點(diǎn)、關(guān)鍵點(diǎn)等)、資源/技術(shù)準(zhǔn)備、設(shè)計(jì)活動(dòng)過(guò)程、評(píng)價(jià)反思等。

2) 結(jié)構(gòu)設(shè)計(jì)。微課的學(xué)習(xí)過(guò)程雖然簡(jiǎn)短但結(jié)構(gòu)應(yīng)相對(duì)完整，一般包括片頭、引入、新課主體、練習(xí)、小結(jié)、擴(kuò)展、片尾等。

片頭和引入是開(kāi)場(chǎng)部分，在設(shè)計(jì)時(shí)應(yīng)注意激發(fā)動(dòng)機(jī)、吸引興趣、抓住眼球?？梢酝ㄟ^(guò)合適的標(biāo)題、情景和任務(wù)再現(xiàn)、設(shè)置懸念、觸動(dòng)學(xué)習(xí)者痛點(diǎn)、精選案例或小故事、回顧舊知等方式實(shí)施。

新課主體、練習(xí)和小結(jié)是微課的主體部分，可根據(jù)微課知識(shí)點(diǎn)不同進(jìn)行結(jié)構(gòu)設(shè)計(jì)：如問(wèn)題型微課結(jié)構(gòu)(問(wèn)題提出、分析問(wèn)題、理論技能講解、解決問(wèn)題、練習(xí)應(yīng)用)；案例型微課結(jié)構(gòu)(案例提出、案例剖析、知識(shí)講解、結(jié)論)；技能型微課結(jié)構(gòu)(真實(shí)情景再現(xiàn)、技能分析、操作流程、操作注意、應(yīng)用)；題解型微課結(jié)構(gòu)(出現(xiàn)題目、解析題目、解題過(guò)程、技巧總結(jié)、測(cè)試練習(xí))等。

擴(kuò)展和片尾是微課的結(jié)束部分，應(yīng)引發(fā)學(xué)習(xí)者思考，可以是本課內(nèi)容的深入擴(kuò)展、下一個(gè)微課內(nèi)容預(yù)告、課后學(xué)習(xí)任務(wù)布置等。

3) 腳本設(shè)計(jì)。H5微課由一個(gè)個(gè)場(chǎng)景頁(yè)面組成，通過(guò)頁(yè)面的多媒體可視化設(shè)計(jì)清晰展現(xiàn)學(xué)習(xí)內(nèi)容。腳本設(shè)計(jì)包括頁(yè)面布局、媒體選擇及出場(chǎng)方式和順序、交互方式、跳轉(zhuǎn)等設(shè)計(jì)，一般采用“草圖+描述”方式表達(dá)。

H5微課交互設(shè)計(jì)值得重視，它的目的是為了讓學(xué)習(xí)者動(dòng)起來(lái)，做到心動(dòng)、口動(dòng)、行動(dòng)、手動(dòng)，具體可采用的方式有：動(dòng)畫(huà)設(shè)計(jì)、視線(xiàn)牽引、鏈接跳轉(zhuǎn)、表單、調(diào)查測(cè)試、內(nèi)心激發(fā)、問(wèn)題激發(fā)、游戲互動(dòng)、交流互動(dòng)等。

3.3素材準(zhǔn)備

根據(jù)腳本設(shè)計(jì)搜集相應(yīng)的多媒體素材如圖片、音頻、視頻、鏈接地址、鏈接文件等，并根據(jù)設(shè)計(jì)要求進(jìn)行加工處理，并按H5微課頁(yè)面順序進(jìn)行歸類(lèi)整理。

應(yīng)根據(jù)H5微課特點(diǎn)對(duì)素材進(jìn)行規(guī)范處理。因?yàn)镠5微課主要在移動(dòng)端設(shè)備如智能手機(jī)上使用，需要考慮尺寸和流量問(wèn)題，如背景圖片的尺寸一般為640 px×1 010 px(px：像素)，圖片文件大小應(yīng)小于500 kB，背景音樂(lè)控制在1 M以?xún)?nèi)；視頻一般采用標(biāo)清的MP4格式，最好采用鏈接方式，在第三方平臺(tái)如優(yōu)酷、土豆等發(fā)布后鏈接進(jìn)來(lái)。為保證動(dòng)態(tài)展示的自然性，可以對(duì)圖片進(jìn)行編輯并保存為png透明背景格式；對(duì)于特殊字體的文字，為保證顯示正常，可以轉(zhuǎn)換為透明方式的png格式使用；gif動(dòng)畫(huà)也應(yīng)做成透明方式。

對(duì)于鏈接文件，可以發(fā)布到云盤(pán)，通過(guò)鏈接或二維碼提供閱讀或下載。

3.4HTML5微課制作

H5微課的制作與PPT制作相似。根據(jù)腳本設(shè)計(jì)按順序制作各個(gè)頁(yè)面，在頁(yè)面上可以根據(jù)需要添加多媒體元素并設(shè)置動(dòng)畫(huà)，添加交互組件如鏈接、跳轉(zhuǎn)、測(cè)試、表單、移動(dòng)端的特殊交互及效果等，添加音頻解說(shuō)，設(shè)置頁(yè)面切換效果及背景音樂(lè)、設(shè)置H5微課基本信息等，最后保存預(yù)覽，進(jìn)行適當(dāng)修改后發(fā)布。

許多H5制作平臺(tái)提供了豐富的模板，可以直接套用模板進(jìn)行頁(yè)面元素的替換，這樣可以減輕頁(yè)面排版設(shè)計(jì)和動(dòng)畫(huà)制作的工作量，大大提高制作效率。

3.5發(fā)布、推廣和應(yīng)用

H5微課一般直接發(fā)布到網(wǎng)絡(luò)上，H5制作平臺(tái)在發(fā)布完成后會(huì)出現(xiàn)網(wǎng)址鏈接和二維碼，可以通過(guò)微信、QQ等進(jìn)行推送，通過(guò)論壇、微博、網(wǎng)站、招貼等進(jìn)行宣傳推廣，學(xué)習(xí)者利用各種終端通過(guò)點(diǎn)擊鏈接、掃二維碼等方式學(xué)習(xí)H5微課，進(jìn)行各種交互式學(xué)習(xí)。發(fā)布者可以在后臺(tái)搜集交互數(shù)據(jù)，進(jìn)行統(tǒng)計(jì)分析，及時(shí)反饋。

有些開(kāi)發(fā)平臺(tái)如炫課(專(zhuān)業(yè)版)、iSping等，還可以發(fā)布為符合SCORM標(biāo)準(zhǔn)的學(xué)習(xí)組件，這種標(biāo)準(zhǔn)化的組件可以用于多種e-learning平臺(tái)中，是一種很好的學(xué)習(xí)資源。

4結(jié)束語(yǔ)

綜上所述，相對(duì)于其它形式的微課，H5微課更適合于移動(dòng)端的在線(xiàn)學(xué)習(xí)，而普通教師幾乎不用培訓(xùn)就可以掌握H5微課的基本開(kāi)發(fā)技術(shù)。值得注意的是，孤立的微課作用是有限的，在具體應(yīng)用時(shí)，我們應(yīng)該根據(jù)知識(shí)體系開(kāi)發(fā)系列微課，將微課體系化、結(jié)構(gòu)化和專(zhuān)題化，就如將一顆顆珍珠串起來(lái)成為美麗的項(xiàng)鏈一樣，這樣才能有效避免知識(shí)碎片化。同時(shí)應(yīng)將微課作為信息化教學(xué)系統(tǒng)的“細(xì)胞”，讓微課成為微課程、新型網(wǎng)絡(luò)課程、慕課、專(zhuān)業(yè)教學(xué)資源庫(kù)的基本單位，這樣才能有效發(fā)揮微課的作用。

參考文獻(xiàn)：

[1] 網(wǎng)易科技.Flash已死，Adobe鼓勵(lì)開(kāi)發(fā)人員使用HTML5[EB/OL].[2015-12-02].http://tech.163.com/15/1202/05/B9QC8E2G000915BF.html.

[2] 莫昌佑.白鷺聯(lián)合上方傳媒發(fā)布《2016HTML5移動(dòng)行業(yè)報(bào)告》[EB/OL].[2016-03-18].http://it.sohu.com/20160318/n440959000.shtml.

[3] 孫大寧.2016年H5將井噴，新傳播途徑是突破口[EB/OL].[2016-01-05]. http://tech.huanqiu.com/business/2016-01/8319207.html.

[4] 炫頁(yè)網(wǎng). 炫頁(yè)網(wǎng)，做自己的微課[EB/OL].[2015-05-05].http://www.xuanyes.com/course/detail/5539ad9c0-cf24331ca4e8767.html.

[5] 冷國(guó)華.多媒體CAI課件設(shè)計(jì)與制作[M].鎮(zhèn)江:江蘇大學(xué)出版社,2010:7-9.

[6] 中國(guó)高校微課大賽網(wǎng).從熱點(diǎn)中孕育新生態(tài)：高校微課發(fā)展報(bào)告(2016年)[EB/OL].[2016-02-01].http://weike.enetedu.com/weike2016/Report.

[7] 鄭小軍.微課發(fā)展誤區(qū)再審視[J].現(xiàn)代遠(yuǎn)程教育研究,2016(2):61-66.

〔責(zé)任編輯： 胡菲〕

收稿日期：2016-04-27

基金項(xiàng)目：江蘇省現(xiàn)代教育技術(shù)課題(2015-R 41185)；鎮(zhèn)江高等專(zhuān)科學(xué)校2015年度校級(jí)課題(GZ2015120707)

作者簡(jiǎn)介：冷國(guó)華(1964—)，男，江蘇丹陽(yáng)人，副教授，從事多媒體和教育技術(shù)的教學(xué)和研究；蔡志東(1962—)，男，江蘇常州人，教授，主要從事學(xué)習(xí)理論研究。

中圖分類(lèi)號(hào)：G423.06

文獻(xiàn)標(biāo)志碼：C

文章編號(hào)：1008-8148(2016)03-0037-05

Development and application of HTML5 interactive micro lesson

LENG Guohua, CAI Zhidong, XU Yi

(Danyang Normal School, Zhenjiang College, Danyang 212300,China)

Abstract:Learning in mobile internet era is based on a variety of platforms, and the traditional courseware needs a demanding Platform. Micro lesson based on video has the weak interaction and affects learning effect, but micro class based on HTML5 (H5 micro class) suitable for a variety of platforms, with strong interactivity, is the most suitable resources for mobile learning. Discussing from the H5 introduction, H5 micro class and characteristics, development technology and application and other aspects, this thesis provides a complete H5 interactive micro lesson design, production and application solutions.

Key words:HTML5; H5; micro class; H5 micro class; mobile internet