冷國華，蔡志東，許　翊

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

?

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

冷國華，蔡志東，許翊

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

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

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

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

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

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

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

1HTML5簡介

1.1HTML5技術的發(fā)展

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

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

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

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

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

1.2HTML5的流行

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

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

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

1.3HTML5制作技術

H5的制作技術可以分成三類：

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

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

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

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

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

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

表1　H5工具平臺類型和特點

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

2HTML5微課

2.1HTML5微課及特點

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

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

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

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

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

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

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

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

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

2.2HTML5微課制作技術

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

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

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

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

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

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

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

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

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

3.1選題

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

3.2設計

與傳統(tǒng)的課堂教學相比，H5微課從本質(zhì)上說屬于一種以視聽藝術方式展示的教學[6]，因此具有教學性、結構化、可視化等特點，其設計包括教學設計、微課結構設計和腳本設計[7]。

1) 教學設計。H5微課是用來支持學與教的，因此需要精心的教學設計，其內(nèi)容包括學習任務設計、情境設計、資源設計、學習方法策略設計、管理設計和評價設計等，具體過程包括學習者特征分析(學情分析)、分析/確定學習目標、界定問題/主題/知識點(重難點、關鍵點等)、資源/技術準備、設計活動過程、評價反思等。

2) 結構設計。微課的學習過程雖然簡短但結構應相對完整，一般包括片頭、引入、新課主體、練習、小結、擴展、片尾等。

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

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

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

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

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

3.3素材準備

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

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

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

3.4HTML5微課制作

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

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

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

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

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

4結束語

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

參考文獻：

[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è)報告》[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課件設計與制作[M].鎮(zhèn)江:江蘇大學出版社,2010:7-9.

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

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

〔責任編輯： 胡菲〕

收稿日期：2016-04-27

基金項目：江蘇省現(xiàn)代教育技術課題(2015-R 41185)；鎮(zhèn)江高等?？茖W校2015年度校級課題(GZ2015120707)

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

中圖分類號：G423.06

文獻標志碼：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