基于H5微場景的微課制作方法探討

劉 云

（海南政法職業(yè)學院信息中心，海南 海口 571000）

當前，伴隨著移動社交網(wǎng)絡的興起，人們獲取知識的方式和途徑與之前的PC互聯(lián)網(wǎng)時代有著明顯區(qū)別。根據(jù)中國互聯(lián)網(wǎng)絡信息中心發(fā)布的第39次《中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》[1]顯示，截至2016年12月，我國網(wǎng)民使用手機接入互聯(lián)網(wǎng)的比例已從2015年的90.1%提升到95.1%，而臺式電腦、筆記本電腦的比例則分別下降至60.1%和36.8%。這些數(shù)據(jù)表明，人們（尤其是年輕群體）更青睞于通過手機來從互聯(lián)網(wǎng)獲取信息，基于智能手機的移動學習正逐步成為年輕人的一種重要學習方式。傳統(tǒng)的微課資源通常為短視頻、Flash等媒體形式，這些類型的資源主要是面向傳統(tǒng)PC平臺使用設計開發(fā)，在兼容性、移動性、交互性等方面存在先天不足，學習者在移動設備上的用戶體驗和學習效果都大打折扣。因此，為微課資源尋找到適于在移動學習場景中使用和傳播的呈現(xiàn)形式勢在必行。

1 H5微場景

1.1 應用背景

HTML5是網(wǎng)際網(wǎng)路聯(lián)盟(World Wide Web Consortium,簡稱W3C）于2014年10月正式發(fā)布并推薦的Web應用開發(fā)標準，使用HTML5開發(fā)的Web應用，可以實現(xiàn)用戶只需通過瀏覽器，在不安裝任何插件的情況下就可以正常使用。因此自正式發(fā)布以來，HTML5技術已普遍應用到互聯(lián)網(wǎng)的各個方面，如Web App，H5微場景廣告、網(wǎng)頁游戲、視頻點播、虛擬展示等。這些應用中以H5微場景廣告最為火爆，它讓人們發(fā)現(xiàn)了一個完美適配手機移動端，既輕量化又能展示豐富效果的媒體形式。

1.2 制作平臺

2015年以來由于商業(yè)化營銷的需要，特別是各類微信公眾號的運營推廣，大量的H5微場景作品在移動社交網(wǎng)絡廣泛傳播，隨之催生了許多H5微場景制作開發(fā)平臺。這些平臺為制作者提供模塊化、模板化、組件式的開發(fā)方式，沒有編程基礎的用戶也能夠利用這些平臺，像制作PPT一樣快速制作出一個H5作品。這些平臺既不需要特定的硬件設備，也無需安裝指定軟件或插件，用戶只需要通過瀏覽器即可使用。這類平臺主要有以下幾種。

1.2.1 秀堂

秀堂是由WPS推出的一款面向普通用戶的H5制作軟件。用戶通過利用秀堂提供的H5模板，經(jīng)過簡單圖文替換，即可實現(xiàn)圖文音樂的自由組合，快速生成具備豐富動畫效果的在線HTML5頁面，一鍵分享到社交網(wǎng)絡。同時，秀堂還可以幫助用戶監(jiān)測傳播效果，滿足用戶的移動傳播需求。

1.2.2 炫課

炫課是由云學堂公司推出的在線H5制作平臺，用戶可利用圖片、文字、音樂、視頻等多媒體素材快速制作出專業(yè)微課。其PC端設計程序，通過多種交互事件、動畫效果、創(chuàng)作模板以及在線素材等功能，使得用戶的微課開發(fā)工作就像制作PPT一樣輕松簡單。

1.2.3 易企秀

用戶只需用瀏覽器登錄易企秀的在線編輯平臺eqxiu.com，即可在線制作H5微場景內(nèi)容，制作完成后可快速分享到自己的微信朋友圈或其他社交媒體。同時，易企秀提供了表單功能，制作者可通過表單收集內(nèi)容使用者的各種反饋信息。

類似的H5微場景快速制作平臺還有初頁，Maka，iH5互動大師等。上述工具中考試及調(diào)查功能都比較弱，可采用問卷星設計制作問卷，通過網(wǎng)址鏈接或二維碼嵌入到 H5 微課中，有效實施教學評價、統(tǒng)計及反饋。

2 H5微課制作

2.1 設計原則

在當前移動互聯(lián)網(wǎng)時代，以微信、微博為代表的社交媒體已成為人們傳播獲取信息的主要途徑，H5微課作為信息的一種，在新的時代必須遵循當前這類社交文化的傳播原則。因此，H5微課設計除必須遵循傳統(tǒng)微課設計的基本原則外，還應注意以下幾點。

2.1.1 交互功能

在移動互聯(lián)網(wǎng)時代，“互動性的強弱決定了信息傳播擴散效率的高低”[2]。因此，從提高微課資源利用率的角度出發(fā)，微課在設計時必須要將交互性放在重要位置。微課制作者在設計時可重點關注以下兩類交互：內(nèi)容交互和行為交互。

（1）內(nèi)容交互。內(nèi)容交互是通過圖文、語音、視頻等媒體形式，借助色彩、形狀、空間變換、音量變換等視聽變化，向?qū)W習者精準傳達信息，并幫助用戶理解其中蘊含的知識。例如：圖文結合、語音錄入、語音識別、語音合成、視頻演示等。在移動微媒體的內(nèi)容交互設計中最為常見的就是圖文交互，如我們現(xiàn)在常常在微信公眾號中看到的各類圖文消息，精美有趣的圖片與精煉的文字相結合，簡明地向用戶傳遞了公眾號所要表達的信息，一些優(yōu)質(zhì)的圖文消息往往能引起讀者廣泛的評論與轉發(fā)。

（2）行為交互。行為交互是指學習者通過與微課資源的直接交互行為引發(fā)其內(nèi)容呈現(xiàn)的改變，從新的形態(tài)中獲取相關知識。例如：通過智能設備屏幕的多點觸控激發(fā)各類展示動畫、利用各類傳感器獲取用戶學習狀態(tài)、利用攝像頭麥克風接受學習者指令等。這些交互行為會產(chǎn)生相應的觸、視、聽感官體驗，可以為學習者提供更好的學習體驗。而這種由行為交互引導內(nèi)容變化的模式，也使得微課個性化學習成為可能。

2.1.2 數(shù)據(jù)采集分析功能

大數(shù)據(jù)是移動互聯(lián)網(wǎng)的主要支撐技術，通過數(shù)據(jù)采集、語義分析、數(shù)據(jù)挖掘等技術可實現(xiàn)信息的精準投遞、智能進化。大數(shù)據(jù)是建設整合優(yōu)質(zhì)數(shù)字學習資源，提高資源利用率的最有力的科學力量。利用大數(shù)據(jù)可以全面、深度地了解學習者的需求，避免微課資源盲目建設；實現(xiàn)資源的個性化定制；通過對采集反饋信息的分析，可幫助資源建設者優(yōu)化資源，實現(xiàn)微課的可持續(xù)進化；通過智能推送，可實現(xiàn)可定制的個性化學習。為此，微課在設計時必須為后續(xù)的大數(shù)據(jù)分析提供各類數(shù)據(jù)來源。例如，利用智能設備的各類傳感器采集學習者在使用過程中的數(shù)據(jù)、為用戶提供必要的數(shù)據(jù)錄入環(huán)節(jié)（在線測試或反饋調(diào)查）、分析統(tǒng)計功能等。

2.2 H5微課“冒泡排序”設計方法和步驟

下面以數(shù)據(jù)結構中“冒泡排序”微課為例，具體開發(fā)步驟如下。

2.2.1 教學設計

教學設計包括學習任務設計、教學情境設計、學習方法策略設計、評價設計教學和管理設計等，具體包括：分析學習者學情、確定學習目標、確定教學重難點、準備教學資源、確定教學步驟、分配教學時間等環(huán)節(jié)。在本例中，確定以“冒泡排序”算法實現(xiàn)為重點，設計了微信簽到、交互式動畫演示、短視頻、小測驗、在線留言等教學環(huán)節(jié)。

2.2.2 腳本設計

腳本設計是將教學設計轉換成立體視聽形象的中間媒介，主要任務是根據(jù)教學設計方案來設計微課各場景相應布局結構，確定教學資源的媒體呈現(xiàn)形式及動畫效果，把握作品整體的節(jié)奏和風格等。

2.2.3 素材準備

按照腳本設計的要求準備腳本所需的各類多媒體素材，如：文本、圖片、聲音、短視頻等，有媒體處理基礎的教師可利用Photoshop、格式工廠、AE等多媒體處理軟件對相應素材進行進一步加工處理，優(yōu)化圖片尺寸大小。其中，本地的視頻資源可提前上傳至優(yōu)酷或土豆等第三方視頻網(wǎng)站平臺。如在本例中，根據(jù)教學設計需要在第一個小測驗環(huán)節(jié)后加入一個不到1 min的短視頻激發(fā)學生興趣，但原始視頻為完整的排序過程，時長超過5 min。為此，使用視頻分割軟件從原始視頻文件中截取一段，既能展示排序的過程又能保證時間不會過長。

2.2.4 利用“秀堂”平臺制作和發(fā)布

使用瀏覽器登錄“秀堂”平臺（https://s.wps.cn），按照腳本設計思路，分頁面實現(xiàn)各環(huán)節(jié)教學場景。

作品制作完成后會自動生成二維碼和超鏈接，作者填寫好朋友圈分享相關信息即可一鍵轉發(fā)至微信朋友圈。

2.2.5 數(shù)據(jù)采集分析

在“秀堂”平臺中，每個作品都有“統(tǒng)計分析”入口，可以統(tǒng)計作品的表單數(shù)據(jù)、訪問量等。在本例中，根據(jù)教學設計學習者需要提交姓名、小測驗答案和課后留言等，圖1為相關數(shù)據(jù)統(tǒng)計情況。

3 結語

H5微課相較于傳統(tǒng)視頻類微課更適于移動互聯(lián)網(wǎng)環(huán)境，H5微課所具備的強交互性、社交性、移動性以及數(shù)據(jù)統(tǒng)計分析功能可提高微課的學習體驗和利用率。