冷國華，蔡志東，許　翊

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

?

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

冷國華，蔡志東，許翊

(鎮(zhèn)江高等?？茖W(xué)校 丹陽師范學(xué)院，江蘇 丹陽212300)

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

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

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

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

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

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

1HTML5簡介

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

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

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

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

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

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

1.2HTML5的流行

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

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

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

1.3HTML5制作技術(shù)

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

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

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

H5平臺可分為場景模板類、功能引擎類和基礎(chǔ)工具類三種(詳見表1)：

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

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

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

表1　H5工具平臺類型和特點(diǎn)

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

2HTML5微課

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1選題

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

3.2設(shè)計(jì)

與傳統(tǒng)的課堂教學(xué)相比，H5微課從本質(zhì)上說屬于一種以視聽藝術(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微課是用來支持學(xué)與教的，因此需要精心的教學(xué)設(shè)計(jì)，其內(nèi)容包括學(xué)習(xí)任務(wù)設(shè)計(jì)、情境設(shè)計(jì)、資源設(shè)計(jì)、學(xué)習(xí)方法策略設(shè)計(jì)、管理設(shè)計(jì)和評價設(shè)計(jì)等，具體過程包括學(xué)習(xí)者特征分析(學(xué)情分析)、分析/確定學(xué)習(xí)目標(biāo)、界定問題/主題/知識點(diǎn)(重難點(diǎn)、關(guān)鍵點(diǎn)等)、資源/技術(shù)準(zhǔn)備、設(shè)計(jì)活動過程、評價反思等。

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

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

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

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

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

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

3.3素材準(zhǔn)備

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

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

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

3.4HTML5微課制作

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

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

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

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

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

4結(jié)束語

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

參考文獻(xiàn)：

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

[2] 莫昌佑.白鷺聯(lián)合上方傳媒發(fā)布《2016HTML5移動行業(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] 炫頁網(wǎng). 炫頁網(wǎng)，做自己的微課[EB/OL].[2015-05-05].http://www.xuanyes.com/course/detail/5539ad9c0-cf24331ca4e8767.html.

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

[6] 中國高校微課大賽網(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)江高等專科學(xué)校2015年度校級課題(GZ2015120707)

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

中圖分類號：G423.06

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

文章編號：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