基于HTML5的移動端多媒體教學資源的開發與應用

嚴景文

摘 要：互聯網時代學習方式的轉變使移動端教學資源的開發成為教師備受關注的課題。HTML5技術的飛速發展為開發跨平臺互動多媒體教學資源提供基礎。文章探討如何將HTML5技術與移動端多媒體教學資源開發緊密融合，以移動端物理力學實驗多媒體課件的開發為例，總結出應用HTML5技術制作移動端多媒體教學資源的五個要點并做創新應用的思考。

關鍵詞：H5技術 移動端教學資源 開發 創新應用

中圖分類號：G642 文獻標識碼：A 文章編號：1003-9082（2018）06-00-03

HTML5（簡稱H5）是第五代超文本標記語言，作為當今頗受歡迎的移動網頁開發技術，具有免裝插件、動畫效果和交互性強、簡單易用等突出優勢。依托H5在線制作平臺，教師能輕松開發適用的教學課件、微場景或測試題，提升課堂教學效果，激發學生的學習興趣、鼓勵學生課后的移動學習和個性化學習，并促進教學改革實踐如翻轉課堂。因此，探討如何將H5技術與移動端多媒體教學資源開發緊密融合有其現實意義。

一、HTML5技術的發展與應用

HTML是超文本標記語言，1991年問世。1993年HTML首次以因特網草案的形式發布，經歷了2.0、3.2和4.0，直到1999年的HTML4.01版本穩定下來。由于發展緩慢，逐漸被更加嚴格的XHTML取代。HTML5是繼HTML4.01和XHTML1.0之后的超文本標記語言的最新版本，2014年10月由萬維網聯盟（W3C）發布正式推薦的標準。其主要目標是將互聯網語義化，以便更好地被人類和機器閱讀，同時提供更好地支持各種媒體的嵌入。2015年，基于H5的移動端網頁制作和開發平臺紛紛出現，各類平臺讓H5制作簡單易操作，技術的平民化使得H5很快流行開來。2016年以來，H5技術飛速發展，為開發基于H5的跨平臺互動多媒體教學資源提供基礎。

H5在線制作工具和軟件不斷涌現，比如有MAKA、兔展、iH5和易企秀等在線制作平臺和炫課等H5課件制作軟件。它們提供可視化的操作界面，可以免代碼實現豐富的動畫和交互功能。有些平臺還提供模板資源和參考教程供用戶套用，大大簡化制作流程。所以常在朋友圈看到利用H5制作的活動宣傳單、婚禮請帖、廣告、游戲、美術作品展等。可見，H5頁面正以其強大的傳播效果滲透著生活的方方面面。教師利用簡單的H5頁面制作工具或軟件開發移動端教學資源，用它來傳播知識、輔助教學成為可能。

二、移動端教學資源的開發現狀

目前，微課是教師在信息技術與課程整合實踐過程中較常應用的多媒體教學資源。關于微課的教學設計、資源開發和應用模式的研究不在少數。近年，支持移動設備的平臺越來越多，以微信為代表的通訊社交平臺加入了移動學習資源開發的行列。碼課碼書逐漸成為教學資源的新型呈現方式。碼課碼書是在微信平臺和二維碼技術支持下將教學內容匯集成二維碼，供學習者在手機平板上掃碼看書、上課的一種教學資源。基于微信公眾平臺開發的培訓課程資源也觸手可及。誠然，移動教學資源的開發成為教師備受關注的課題，是值得探討和挖掘的領域。

H5作為近三年興起的技術標準，將其應用于教學資源的開發也有一些案例，包括微場景搭建、小學生課堂游戲開發和古詩詞課件制作等。部分研究重在介紹利用某H5在線制作平臺開發多媒體教學資源的過程，而部分研究聚焦H5教學資源的應用模式。本文將在此基礎上，結合H5移動端物理力學實驗多媒體課件的開發實踐，探究H5移動端多媒體教學資源的制作要點，望能為同類開發提供參考。

三、H5移動端教學資源的開發實踐

HTML5在教學中的應用十分豐富。利用H5在線制作工具或軟件，教師不僅能制作出課件、闖關小游戲等豐富課堂教學的頁面，還能發布H5手機網頁版的校園通知來促進教學管理和家校互動，也可制作線上美術作品展、班級電子相冊和安全知識培訓手冊。使用H5在線制作工具開發多媒體教學資源的四步法為：選題→設計→制作→發布推廣。下面以物理力學《自由落體運動探究實驗》作品的開發為例做進一步闡述。

1.選題

在選題時，首先要明確該H5頁面的主題和用途，判斷該主題的知識點是否適合通過H5網頁呈現。

本案例是一個以自由落體運動探究實驗為主題，用于高中物理力學實驗教學的多媒體課件，它既能夠在課堂教學，又能用于學生課后自主學習。力學是中學物理學習中最重要的板塊之一，但很多物理力學現象或是課本中的力學實驗，由于受到實驗設備和環境的限制，難以直觀、清晰地演示和再現，不利于力學知識的學習與掌握。自由落體運動實驗教學中，我們難以模擬真空環境，也未必保證實驗能精準地控制變量。而H5能夠很好地解決這個問題，H5網頁以音頻、動畫或文字的形式，更生動直觀地演示實驗并解釋其中知識點和原理。線上學習與線下體驗相結合，幫助學習者建構知識。

2.設計

在設計環節中，首先要針對H5頁面的主題和知識點開展教學設計，教學設計應明確具體教學內容和所需的多媒體資源，以便圖片和視音頻素材的搜集與整理；同時要體現計劃使用的教學方法和教學步驟，這影響著H5頁面的結構和功能。之后，我們需要進行頁面結構和功能設計，明確此H5作品的頁面組成、各頁面的功能、頁面間的跳轉方式與使用的些多媒體資源和動效，以及是否包含可輸入文本框和按鈕等用于交互的元素。

2.1教學設計

本課件的教學目標是學生能夠說出自由落體運動的定義、特征和條件；并通過觀察實驗，知道物體的質量不是影響自由落體運動速度的原因，走出常識誤區。課件中的實驗需要相同的小球、羽毛和玻璃管各三個。一個小球、一根羽毛和一支玻璃管為一組，共設置三組，分別代表充滿空氣、抽去部分空氣和真空的情況。讓各組小球和羽毛在同一高度同時下落，進行控制變量，對比落地快慢。

教學過程分為三個部分：問題導入、實驗演示、闡述實驗原理和結論。在課前提出問題“重物和輕物哪個掉落速度快？”，讓學生根據生活中的觀察去思考與猜測，以此激發學習興趣，為下面實驗現象激起學生的認知矛盾做準備。接著，用文字引導學生帶著問題觀看實驗動畫，讓學生通過肉眼觀察對比輕重不同的小球和羽毛是否同時落地，其落地快慢是否和空氣阻力有關。借助實驗現象驗證自己的猜想正確與否，并做出初步的結論。最后，用文字和語音解說闡述自由落體運動的實驗原理和結論。

2.2頁面結構與功能設計

本例把H5課件分為兩個頁面，第1頁用于問題導入，第2頁用于實驗動畫的演示以及實驗原理與結論的講解。

在該課件的首頁，我們用文字拋出問題并提供3個選項，在題干和選項旁邊插入小球、石塊、羽毛和紙團的圖片，啟發學習者結合對生活現象的觀察作答。點擊選項出現彈框，顯示學生點擊的選項，并用文字引導學生進入實驗環節，去驗證自己的答案。下方也需設置“跳過預測”的按鈕，以便直接跳轉到第2頁。

在課件第2頁的頂部，用文字說明實驗的題目和每一組實驗環境，并用不同底色代表“充滿空氣”、“抽出部分空氣”、“真空”的區域；實驗演示以動畫的形式呈現，包括羽毛、小球的圖片素材。該頁面包含兩個功能按鈕：一是“再看一遍”按鈕，點擊可以重新加載頁面并播放動畫；二是“查看知識點”按鈕，點擊出現解說文本和語音講解，再次點擊隱藏文本。在知識點文字旁，設置音頻開關的按鈕，可隨時關掉聲音或再次播放。

值得一提的是，在選題和設計上，應充分考慮學生的認知特點與需求，選取出重點、難點、疑點、易錯點、易混淆點、考點、熱點、擴展點等作為選題，但選題不宜過大，還需注意前后知識點的銜接[1]；教學設計應體現教師為主導、學生為主體的教學思想，遵循層層遞進的原則；設計思路以簡要明快、功能齊全為基調，除具有良好的交互性外，還應考慮具有直觀性、使用簡便等特點。

3.制作

3.1制作工具選擇和素材準備

能夠實現上述動效和功能的H5制作工具還不少，iH5在線制作平臺就是其中的一種。制作本例前需搜集羽毛、小球的圖片素材。素材來源包括千圖網、昵圖網、花瓣網等，可以直接下載背景透明的PNG格式的圖片。同時也可使用平臺自帶的繪圖工具繪制小球等素材。

3.2設置頁面

在iH5中新建工程，新建兩個頁面。分別在第1頁和第2頁導入或繪制所需圖片。插入文本和提前錄好的解說音頻，注意為素材命名。

3.3制作動畫

首先制作充滿空氣環境下的實驗動畫。該實驗的動畫分兩個階段：

第一階段——豎直加速運動

選中羽毛1，在右側點擊小人跑步的圖標，為其添加【運動】的方法。在運動屬性面板，將移動速度設置為0，加速度設為58.1，速度方向設為正90度。

注意：在iH5中加速度的單位和現實運動中加速度的單位不一樣；規定水平向右為0度，順時針累加，因此豎直向下就是正90度。同樣的，為小球設置運動，加速度為118.1。

第二階段——碰撞停止

構建物理世界：在舞臺上添加一個畫布作為物理引擎的載體。在畫布下添加【物理世界】，命名為“物理世界1”，并將其它元素依次拖動到它的下面。

添加物體：為使羽毛和小球能模擬真實世界中的物體，產生碰撞效果，我們要對碰撞的羽毛、小球和板添加【物體】這一屬性。在物體的屬性面板中點擊【編輯碰撞邊界】，分別為它們描繪邊界，用來判斷何時發生碰撞。為了避免玻璃管的底板在物理世界中受到重力下落，需要在【物理世界】的屬性面板中關閉【自動播放】。

設置碰撞事件：選中底板，點擊對象樹右側的感嘆號圖標，設置碰撞事件。在事件屬性面板中，選擇觸發條件為“開始碰撞”，碰撞對象是“羽毛1”，目標對象是羽毛1下的“運動1”，其目標動作是“暫停”。同理設置碰撞對象為“小球”的事件。

制作完一組動畫后，對“物理世界1”進行復制，對元素重命名并調整位置。羽毛2、羽毛3運動加速度分別設置為98.1和118.1，而小球2、小球3的速度無需改變。

3.4制作交互

在左上角的【小模塊】選擇兩個按鈕拖至頁面中，將按鈕文字分別改為“再看一遍”和“查看知識點”。

“再看一遍”按鈕：對“再看一遍”按鈕作添加事件，觸發對象為點擊，目標對象和目標動作分別是舞臺和重新加載。

“跳過預測”按鈕：對按鈕設置事件，滿足觸發條件點擊時，舞臺跳轉至下一頁。

“查看知識點”按鈕：首先，在知識點文本的屬性面板中，關閉文本的初始可見。其次，在舞臺下添加計數器1，用于統計點擊的次數。接著，對該按鈕設置事件，每點擊一次，就觸發目標對象計數器1產生加1的動作。最后，對計數器添加兩個事件，觸發條件都是計數器為奇數。第一個事件觸發知識點文本顯示。第二個事件觸發音頻播放。同樣的，再添加兩個事件判斷偶數的情況。

音頻開關按鈕：在舞臺下添加計數器2。與 “查看知識點”按鈕的制作步驟相似，對音頻按鈕和計數器2添加事件，使得點擊次數為奇數時觸發音頻播放，偶數時音頻暫停。

4.發布推廣

H5課件制作完畢后，經過預覽和多次調試，再發布至H5平臺上，平臺便會生成二維碼和網址鏈接，作品大功告成。教師將二維碼或鏈接然后通過微信、QQ、論壇、貼吧等社交媒體進行分享傳播，學生便能在不同終端通過點擊鏈接或掃二維碼等方式觀看H5課件，實現隨時隨地的個性化與交互式學習。

四、H5移動端多媒體教學資源的制作要點

現在教師使用信息技術手段輔助教學的形式多是錄制微課、制作傳統課件，步驟比較繁瑣。不斷涌現的H5工具平臺和制作軟件降低了技術門檻，它允許教師在可視化界面操作，遠離繁雜代碼，將多媒體教學內容匯集于一個網頁中，添加課堂互動測試、創設情境、開發游戲等。精心打造微場景、充分利用物理引擎和運動屬性、合理設置事件、巧用計數器和變量則是制作H5移動端多媒體教學資源的關鍵。

1.打造微場景，生動導入

一個好的H5教學資源需在一開始就抓住學生的眼球，激發學習興趣。正如課堂中，為了介紹某個知識點，教師需要生動有趣的課堂導入，講一個故事，創設一個場景、分配一項小任務、組織課堂游戲或是拋出一個問題。因此，教師可利用H5搭建微場景，讓生活中某個典型的場景鮮活地呈現在學生面前，將他們帶入社會、帶入大自然。用動畫講故事以交代背景，讓學生通過H5頁面中人物的語言、動作更快對課文中的角色產生親切感。在H5頁面中加入音樂和語音渲染氛圍，或是通過設置課前思考題，鼓勵學生在往后的學習中帶著問題找答案（如圖1）。當然也可制作小游戲熱身，提高課堂活躍度與學習積極性。

2.利用物理引擎和運動屬性，增添炫酷的動畫效果

物理引擎便于再現和放大宇宙萬物中的科學現象。本案例就是利用iH5中物理引擎的功能，模擬了真實的物理世界，把羽毛和小球設置為其中具有碰撞效果的物體，又為其設置運動的屬性以實現下落的動畫演示（如圖2）。此外，還可為文字和圖片添加運動屬性，讓它們的入場效果更加富有動感，或者制作體驗太空等小游戲來增強趣味性。

3.設置事件，增強頁面交互性和功能性

事件是指在一定的觸發條件下（如點擊、場景加載或跳轉頁面），對某個物體產生的動作。合理設置事件能增強頁面的交互性和功能性。在《自由落體運動探究實驗》課件中，通過設置點擊選項時觸發彈框出現的事件，實現了答題功能；通過設置點擊按鈕時頁面重新加載的事件，實現了多次查看的功能；通過設置事件，實現了跳過預測按鈕和聲音開關按鈕的功能。可見，善用事件能夠為該H5頁面增加更多個性化功能。它允許學習能力不同、基礎不同的學生在觀看教學資源時，根據自身需求，點擊按鈕跳過某些頁面或多次查看同一頁面，彈出或隱藏使用幫助，播放或暫停解說音頻，或完成知識問答（如圖3）。依托交互性強和功能性強的教學資源，學生能進行更加個性化的學習，提高學習效率和效果。

4.利用計數器，實現交替出現和隱藏

利用計數器，可以實現文本、圖片或音頻的交替出現和隱藏，為個性化學習提供方便。本案例是通過事件的設置，讓“查看知識點”按鈕每被點擊一次，計數器就加1。然后對計數器里存放的數字進行判斷，當它是奇數時知識點顯示，為偶數時知識點隱藏。如此實現了點擊一次出現，再次點擊隱藏的效果。這么做的好處是讓一個按鈕實現兩種功能，便于教師的課堂演示與講解，更加符合人們的使用習慣，并且節省頁面位置。此外，計數器還可實現游戲或測試計時、計算角速度和線速度等功能。

5.利用變量，記錄數值或文本

當學生在選擇題中點擊選項，彈框中便會出現“你的選擇是____”的字樣。下劃線中填寫的就是學生選擇的選項序號，這就是通過變量實現的。我們可以對選項按鈕設置事件，點擊時就將按鈕代表的序號賦值給變量。于是在整個作品的任何頁面中，我們都可以獲取該變量中的值，并將它顯示出來。巧用變量，學生輸入角速度大小，頁面便能及時呈現擺錘以用戶設置的速度作圓周運動的效果。我們還可將利用變量記錄姓名學號等信息、收集學生的反饋意見，讓頁面更智能。

利用H5開發的教學資源能克服其他形式的課件或微課在交互性上的不足和單向傳播、功能較少的局限性，幫助學習者提高學習效果和體驗。[2]故H5工具平臺或制作軟件很適合教師做優質教學資源的開發。

五、H5多媒體教學資源創新應用的思考

在手機、平板和網絡走進課堂的未來教育中，H5多媒體教學資源能便捷地應用于課前、課中和課后。在課前，教師通過發放二維碼或網頁鏈接，要求學生利用H5教學資源提前進行某個知識點的學習。教師在課堂中可以將手機連接到多媒體設備中，現場演示H5教學資源，利用多媒體手段輔助課堂中某個環節的教學。授課結束后，教師將這些H5教學資源的二維碼分享給學生，讓學生在課后拿起手機即可復習并參與教師組織的H5線上測試。可見H5多媒體教學資源能夠貫穿教學全過程，助力翻轉課堂和移動學習的開展。

為了更好地實現H5技術與學科教學的融合，首先，教師在開發H5教學資源前應思考學科和授課年級是否適用；做好教學設計，明確H5教學資源計劃用于哪個環節，才能開發實用且符合學生認知水平和需求的多媒體教學資源。其次，利用H5移動端教學資源進行移動學習具有碎片化的特征，碎片化學習和系統性學習的平衡需要教師把控，把學生課外單個知識點的學習和課內知識體系的構建整合起來。同時，教師應關注學生學習習慣的轉變，及時獲取教學效果反饋并不斷作調整，幫助師生共同適應互聯網時代下新的教學方式。

參考文獻

[1]冷國華，蔡志東，許翊.HTML5互動微課開發與應用[J].鎮江高專學報，2016，29（3）：37-41.

[2]張年逢.高中生物H5交互微課制作實踐[J].中學生物教學，2017（17）：29-31.