H5移動(dòng)微課的創(chuàng)新設(shè)計(jì)與快速開發(fā)*

莫葵鳳 ，鄭小軍 ，朱育賢 ，梁秋遠(yuǎn)

（1.南寧師范大學(xué) 計(jì)算機(jī)與信息工程學(xué)院，廣西 南寧530299；2.南寧師范大學(xué) 職業(yè)技術(shù)教育學(xué)院，廣西 南寧 530001；3.廣西職業(yè)教育發(fā)展研究中心，廣西 南寧 530001）

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展和移動(dòng)終端設(shè)備的迅猛普及，移動(dòng)學(xué)習(xí)成為當(dāng)下流行的學(xué)習(xí)方式之一?；贖TML5技術(shù)開發(fā)H5移動(dòng)微課，以滿足日益增長(zhǎng)的移動(dòng)學(xué)習(xí)需求，提升在線學(xué)習(xí)體驗(yàn)和學(xué)習(xí)效果，成為個(gè)性化、創(chuàng)新型微課開發(fā)的新景觀、新趨勢(shì)。那么，H5移動(dòng)微課的現(xiàn)狀如何？如何創(chuàng)新設(shè)計(jì)和快速開發(fā)H5移動(dòng)微課？

一、H5移動(dòng)微課的現(xiàn)狀

隨著HTML5技術(shù)的發(fā)展，目前涌現(xiàn)了一大批簡(jiǎn)單易學(xué)、效果很好的H5開發(fā)平臺(tái)，用戶只需要簡(jiǎn)單地進(jìn)行模板套用替換，就能輕松設(shè)計(jì)并制作出頁(yè)面效果不錯(cuò)的H5移動(dòng)微課作品。

在教育行業(yè)，H5是一種用來(lái)進(jìn)行宣傳展示的工具和教育教學(xué)的新形式，非常適合于移動(dòng)互聯(lián)網(wǎng)時(shí)代的教育教學(xué)需求。移動(dòng)學(xué)習(xí)是未來(lái)教育的大趨勢(shì)，而掌上微課（如H5移動(dòng)微課）則讓學(xué)生離學(xué)習(xí)更進(jìn)一步。學(xué)生可以利用碎片化時(shí)間，通過移動(dòng)智能終端學(xué)習(xí)H5移動(dòng)微課平臺(tái)的知識(shí)點(diǎn)，延伸了課堂教學(xué)，擴(kuò)展了學(xué)習(xí)時(shí)空。

目前很多平臺(tái)雖然看上去像一款只是制作前端H5的SaaS產(chǎn)品，但事實(shí)上它們集成了“前后端”所需的幾乎所有功能，可實(shí)現(xiàn)零代碼制作各種H5作品，功能非常強(qiáng)大。如：3D游戲、VR場(chǎng)景（全景、一鏡到底）、支持物理引擎（如碰撞游戲）、Web App支持（如手機(jī)應(yīng)用、小產(chǎn)品）、高效渲染引擎、自適應(yīng)網(wǎng)站、自建直播頻道、大屏智強(qiáng)解決方案、支持上千種自定義動(dòng)效、支持Web Socket、支持Web GL、支持PSD直接導(dǎo)入、支持OBJ文件導(dǎo)入等。

這些平臺(tái)又是一個(gè)“云計(jì)算平臺(tái)”，可以根據(jù)用戶的實(shí)際業(yè)務(wù)需求，動(dòng)態(tài)分配計(jì)算、存儲(chǔ)、數(shù)據(jù)庫(kù)、帶寬資源，保證數(shù)據(jù)安全性的同時(shí)，滿足各種突發(fā)流量暴增的需求?？傊?，利用這些優(yōu)勢(shì)可以比較輕松地進(jìn)行作品的創(chuàng)新創(chuàng)意設(shè)計(jì)。

二、H5移動(dòng)微課的創(chuàng)新設(shè)計(jì)

利用H5強(qiáng)大的功能優(yōu)勢(shì)，可以實(shí)現(xiàn)各種類型的場(chǎng)景、效果以及呈現(xiàn)/表現(xiàn)形式，使H5移動(dòng)微課在平臺(tái)、載體和形式上具有一定的創(chuàng)新性。但要設(shè)計(jì)并開發(fā)出優(yōu)秀的H5移動(dòng)微課，仍需要加強(qiáng)選題、創(chuàng)意、教學(xué)設(shè)計(jì)和交互設(shè)計(jì)。

iH5微課《填詞猜成語(yǔ)》屬于游戲類微課，主要參考了游戲通關(guān)的思路，提升學(xué)習(xí)參與度，從而帶來(lái)更好的學(xué)習(xí)體驗(yàn)，以增加教學(xué)的趣味性，激發(fā)學(xué)習(xí)動(dòng)機(jī)。其針對(duì)大家都喜歡猜謎語(yǔ)的特點(diǎn)，基于用戶交互體驗(yàn)的理念，利用H5的強(qiáng)交互等功能制作的微課，可點(diǎn)擊查看分?jǐn)?shù)排行榜。學(xué)生在游戲《填詞猜成語(yǔ)》環(huán)境下實(shí)現(xiàn)在線練習(xí)，在潛移默化中感受學(xué)習(xí)的樂趣、學(xué)會(huì)動(dòng)腦積極思考，在一次次的挑戰(zhàn)中感受到成功、體驗(yàn)到快樂，從而提高自主學(xué)習(xí)能力。

在開始游戲后，每道題都設(shè)計(jì)了時(shí)間限制，學(xué)生必須在規(guī)定的時(shí)間內(nèi)完成，短時(shí)間內(nèi)對(duì)觀察力、思考反應(yīng)能力的考驗(yàn)，可以促進(jìn)學(xué)生觀察力、記憶力的發(fā)展。該微課是在一個(gè)數(shù)據(jù)庫(kù)中實(shí)現(xiàn)的，包括用戶數(shù)據(jù)（保留用戶參與數(shù)據(jù)）、文字（隨機(jī)出現(xiàn)的選擇文字）、成語(yǔ)庫(kù)（成語(yǔ)庫(kù)直接添加即可），利用H5強(qiáng)大的功能、零代碼制作實(shí)現(xiàn)。因?yàn)樾枰@取頭像進(jìn)行排名，還需用到數(shù)據(jù)庫(kù)提交、輸出、更新，循環(huán)事件、復(fù)制事件，用數(shù)組進(jìn)行判斷等功能。此類微課還有《你畫我猜》《王者融合》等，其中《王者融合》的制作比較復(fù)雜，主要由微信語(yǔ)音識(shí)別、AI人臉融合、AI聲音融合組成，通過與騰訊AI平臺(tái)對(duì)接，實(shí)現(xiàn)聲貌融合進(jìn)行分享。

iH5微課《銀河系唯美全景》將九大行星的介紹（知識(shí)內(nèi)容）放在銀河系場(chǎng)景里，非常生動(dòng)直觀，知識(shí)內(nèi)容的設(shè)計(jì)、呈現(xiàn)與表達(dá)上都進(jìn)行了大膽創(chuàng)新。它屬于VR場(chǎng)景（全景/3D/一鏡到底）類H5移動(dòng)微課，即可以360°轉(zhuǎn)頭看到不同角度的內(nèi)容，具有景深、動(dòng)態(tài)圖像、聲音等，類似于在電影院看3D電影的感覺。豐富的表現(xiàn)力和良好的交互，極大地激發(fā)了學(xué)生的主動(dòng)參與熱情。

首先，通過動(dòng)態(tài)唯美的銀河系場(chǎng)景激發(fā)學(xué)習(xí)者興趣，根據(jù)點(diǎn)擊星球查看介紹，引導(dǎo)學(xué)習(xí)者進(jìn)行新內(nèi)容（九大行星）的學(xué)習(xí)。通過觸發(fā)器點(diǎn)擊觸發(fā)星球，就會(huì)出現(xiàn)星球的相關(guān)介紹，點(diǎn)擊拖拽實(shí)現(xiàn)星球之間的運(yùn)轉(zhuǎn)，就如鏡頭的推拉搖移，從而實(shí)現(xiàn)一鏡到底的效果，逼真的銀河系讓人在屏幕前有身臨其境的感覺。有些知識(shí)內(nèi)容（如地球、銀河系、宇宙等地理知識(shí)）就是對(duì)三維空間、四維空間的認(rèn)識(shí)，如果通過直觀的視覺化全景/3D場(chǎng)景無(wú)死角、無(wú)縫展示知識(shí)點(diǎn)，可以使知識(shí)得以高效表達(dá)，彌補(bǔ)了傳統(tǒng)微課在二維空間進(jìn)行知識(shí)表達(dá)的不足。它不受時(shí)間、空間和地域的限制，讓人可以左右上下360度任意觀看動(dòng)態(tài)視頻，使人產(chǎn)生一種真正意義上身臨其境的感覺，直接感受與認(rèn)識(shí)降低了認(rèn)知負(fù)荷，使學(xué)生學(xué)得輕松、易于理解和掌握。

全景視頻對(duì)場(chǎng)景的再現(xiàn)更加全面，使人產(chǎn)生身臨其境的感覺，因此常常用作展示之用途。如用360全景來(lái)展示旅游教學(xué)、數(shù)字展館、數(shù)字城市、文物古跡、室內(nèi)設(shè)計(jì)等。

絢星微課的 《安全生產(chǎn)十大定律——破窗效應(yīng)》非常符合微課教學(xué)設(shè)計(jì)的KFC模型：激發(fā)—引導(dǎo)—強(qiáng)化[1]。首先，通過一個(gè)破窗實(shí)驗(yàn)情境作為導(dǎo)入，順理成章地引出破窗效應(yīng)。其次，講解新知識(shí)，包括破窗效應(yīng)的誘發(fā)因素、后果、預(yù)防、應(yīng)用以及破窗效應(yīng)的破解等。在破窗效應(yīng)的應(yīng)用中，通過實(shí)際生活中的例子“紐約市交通警察局改善地鐵犯罪的視頻”，講解如何消除習(xí)慣性違章的相互模仿，做好安全管理。最后，通過小結(jié)和三道測(cè)試題來(lái)強(qiáng)化、鞏固所學(xué)知識(shí)。小結(jié)破窗效應(yīng)的5S管理，利用H5強(qiáng)交互功能設(shè)計(jì)三道測(cè)試題檢測(cè)學(xué)習(xí)效果，強(qiáng)化、鞏固所學(xué)知識(shí)。同樣，提交后可查看分?jǐn)?shù)和排名以及參與答題人數(shù)，答題過程中，答錯(cuò)了會(huì)跳出正確的選項(xiàng)。

通過以上H5移動(dòng)微課案例分析可以看出，目前H5的功能已經(jīng)強(qiáng)大到能支持一些最新的技術(shù)進(jìn)行二次開發(fā)，實(shí)現(xiàn)零代碼制作各種H5。

三、H5移動(dòng)微課的快速開發(fā)

H5移動(dòng)微課非常適合快速學(xué)習(xí)、隨時(shí)隨地學(xué)習(xí)，以滿足日益增長(zhǎng)的移動(dòng)學(xué)習(xí)需求。目前，通用性移動(dòng)微課資源短缺，企業(yè)和用戶一并參與開發(fā)H5移動(dòng)微課資源才是上上策。那么，如何才能快速、高效地開發(fā)H5移動(dòng)微課？筆者認(rèn)為學(xué)會(huì)H5移動(dòng)微課創(chuàng)作的方法和技巧，配合H5移動(dòng)微課制作的利器（工具/平臺(tái)/技術(shù)），集微課的內(nèi)容創(chuàng)新設(shè)計(jì)與快速開發(fā)于一身，可以迅速開發(fā)出滿足學(xué)習(xí)者所需的微課。H5移動(dòng)微課的開發(fā)大致可分為開發(fā)前期工作、開發(fā)期和開發(fā)后期三個(gè)階段，做足開發(fā)前期工作才能實(shí)現(xiàn)H5移動(dòng)微課的快速開發(fā)。

1.明確設(shè)計(jì)的思路與流程

H5移動(dòng)微課創(chuàng)作是在平臺(tái)上進(jìn)行設(shè)計(jì)與開發(fā)，再將其發(fā)布、應(yīng)用于移動(dòng)終端上，其實(shí)質(zhì)還是微課的創(chuàng)作。微課創(chuàng)作有一定的創(chuàng)作流程，包括選題、教學(xué)設(shè)計(jì)、選擇開發(fā)平臺(tái)和技術(shù)、微課資源的開發(fā)和平臺(tái)的實(shí)現(xiàn)、發(fā)布、應(yīng)用和效果評(píng)價(jià)等7個(gè)方面。

2.加強(qiáng)微課選題、內(nèi)容設(shè)計(jì)與呈現(xiàn)等設(shè)計(jì)

對(duì)一個(gè)優(yōu)秀的微課而言，其選題應(yīng)有針對(duì)性，內(nèi)容設(shè)計(jì)要合理，內(nèi)容呈現(xiàn)和表達(dá)要生動(dòng)有趣，技術(shù)應(yīng)用得當(dāng)，應(yīng)用效果好。[2]

圖1 微課教學(xué)設(shè)計(jì)的KFC模型

①選題是微課創(chuàng)作的第一步，恰當(dāng)?shù)倪x題是微課創(chuàng)作成功的基石。[3]②內(nèi)容設(shè)計(jì)（教學(xué)設(shè)計(jì)）是根本，一個(gè)好微課少不了一個(gè)好的教學(xué)設(shè)計(jì)和腳本設(shè)計(jì)。可以依據(jù)教學(xué)目標(biāo)、重難點(diǎn)、教學(xué)方法、教學(xué)步驟和時(shí)間分配等方面進(jìn)行教學(xué)設(shè)計(jì)，注重激發(fā)學(xué)習(xí)興趣；通過提問、討論或案例分析等引導(dǎo)學(xué)習(xí)；通過練習(xí)、測(cè)驗(yàn)檢測(cè)掌握程度、學(xué)以致用。建議采用KFC模型進(jìn)行微課教學(xué)設(shè)計(jì)，如圖1所示。[1]這一模型與首要教學(xué)原理、九大教學(xué)事件、五段教學(xué)法等一脈相承。③內(nèi)容呈現(xiàn)方式和表達(dá)方式要個(gè)性化、新穎、生動(dòng)有趣。④技術(shù)應(yīng)用得當(dāng)。用好技術(shù)表現(xiàn)在技術(shù)應(yīng)用的“量”要適度，過度使用技術(shù)會(huì)喧賓奪主，讓學(xué)生的注意力不自主地轉(zhuǎn)移到表現(xiàn)形式上。

表1 H5移動(dòng)微課開發(fā)平臺(tái)評(píng)級(jí)分析表

3.選擇適合的開發(fā)平臺(tái)和技術(shù)

目前涌現(xiàn)了一大批簡(jiǎn)單易學(xué)、效果好的H5開發(fā)平臺(tái)，例如易企秀、iH5、互動(dòng)大師等。筆者對(duì)8個(gè)常用的H5移動(dòng)微課開發(fā)平臺(tái)進(jìn)行了評(píng)級(jí)分析，見表1。這些平臺(tái)在功能上各有側(cè)重，但都提供了數(shù)量龐大的免費(fèi)和收費(fèi)的H5頁(yè)面模板，界面設(shè)計(jì)精美，交互體驗(yàn)良好，并且提供專業(yè)團(tuán)隊(duì)進(jìn)行設(shè)計(jì)開發(fā)。

4.H5移動(dòng)微課資源的開發(fā)

（1）對(duì)于初學(xué)者來(lái)說(shuō)，用戶只需事先準(zhǔn)備好內(nèi)容、素材，然后登錄開發(fā)平臺(tái)，使用在線編輯工具選擇模板，替換模板的圖片和文字。如果頁(yè)面不夠，在右側(cè)添加頁(yè)，接著在左側(cè)選擇合適的單頁(yè)模板，同樣的方法替換模板的圖片和文字。可在不需要編寫任何代碼的前提下，使用拖拽等所見即所得的手段在線完成場(chǎng)景設(shè)計(jì)，并且可以輕松分享到互聯(lián)網(wǎng)，加速了知識(shí)分享。此外，初學(xué)者還可以通過觀看iH5、Epub360、易企秀等平臺(tái)提供的一整套視頻教程（分基礎(chǔ)、專業(yè)、專業(yè)進(jìn)階），深入學(xué)習(xí)H5移動(dòng)微課的設(shè)計(jì)與開發(fā)。通過視頻教程學(xué)習(xí)可以快速成長(zhǎng)，成為H5移動(dòng)微課開發(fā)高手，設(shè)計(jì)出具有自身個(gè)性特點(diǎn)的H5移動(dòng)微課，同時(shí)可以作為知識(shí)或案例模板分享到互聯(lián)網(wǎng)，加速了知識(shí)分享。

（2）對(duì)于熟練者或高手來(lái)說(shuō)，以易企秀為例，①登錄開發(fā)平臺(tái)創(chuàng)建一個(gè)新的空白場(chǎng)景，即開始制作H5移動(dòng)微課。②編輯場(chǎng)景，有點(diǎn)類似PPT，在上方菜單欄插入文本、圖片、背景、音樂特效等基本設(shè)計(jì)元素，每個(gè)元素下面都有豐富的素材供使用；左側(cè)是模板中心，有單頁(yè)模板、功能模板、VIP模板。主要是封面、尾頁(yè)、圖文、圖集、時(shí)間軸這五個(gè)部分。這些都可以根據(jù)設(shè)計(jì)者的需求，通過所見即所得的手段拖拽進(jìn)來(lái)使用即可。③設(shè)置場(chǎng)景，可以方便和提高用戶瀏覽體驗(yàn)。包括封面、名稱、場(chǎng)景描述、場(chǎng)景類型、翻頁(yè)方式等基本設(shè)置。④發(fā)布場(chǎng)景。點(diǎn)擊“保存和分享”，支持微信掃碼、網(wǎng)絡(luò)一鍵轉(zhuǎn)發(fā)以及網(wǎng)絡(luò)鏈接。

（3）與傳統(tǒng)微課相比，H5移動(dòng)微課有“四快”：①在線H5開發(fā)平臺(tái)配備相關(guān)的一站式精準(zhǔn)服務(wù)、極簡(jiǎn)操作、海量模版，輕松快速設(shè)計(jì)，并且能立即看到微課效果、能快速發(fā)布分享。②開發(fā)過程中，能快速嵌入試題、測(cè)驗(yàn)、問答等交互式組件，簡(jiǎn)單、易用、易上手，非常方便快捷。③更適合互聯(lián)網(wǎng)快速傳播?？梢栽谌魏纹脚_(tái)中運(yùn)行，如：PC、Android、iOS 智能手機(jī)、平板、瀏覽器、App 或嵌入到網(wǎng)頁(yè)等。文件相對(duì)傳統(tǒng)微課（如拍攝類）較小，能在手機(jī)中很好地運(yùn)行。④后期維護(hù)修改快。只需在相應(yīng)頁(yè)面編輯修改、更新發(fā)布即可，無(wú)需重新錄制與輸出。

5.H5移動(dòng)微課的應(yīng)用和效果評(píng)價(jià)

H5移動(dòng)微課資源可以通過QQ、微信等方式進(jìn)行傳播與共享，學(xué)生利用手機(jī)掃碼即可進(jìn)行學(xué)習(xí)；也可以將文件發(fā)布到云空間，然后用戶通過掃描條碼進(jìn)行下載安裝觀看。同時(shí)，傳播共享方便快捷，與社交化學(xué)習(xí)深度融合，同時(shí)還兼具數(shù)據(jù)搜集、分析、統(tǒng)計(jì)與及時(shí)反饋功能，有助于更好地進(jìn)行教學(xué)診斷與評(píng)價(jià)。

移動(dòng)互聯(lián)網(wǎng)時(shí)代的學(xué)習(xí)必然要向移動(dòng)互聯(lián)、多屏互動(dòng)、社交化學(xué)習(xí)等方式轉(zhuǎn)變?；贖TML5技術(shù)開發(fā)H5移動(dòng)微課，是未來(lái)微課開發(fā)的主流方向，具有廣闊的應(yīng)用前景。未來(lái)的H5還會(huì)繼續(xù)升級(jí)，將給移動(dòng)學(xué)習(xí)帶來(lái)更多的便利。