基于HTML5的移動(dòng)端多媒體教學(xué)資源的開(kāi)發(fā)與應(yīng)用

嚴(yán)景文

摘 要：互聯(lián)網(wǎng)時(shí)代學(xué)習(xí)方式的轉(zhuǎn)變使移動(dòng)端教學(xué)資源的開(kāi)發(fā)成為教師備受關(guān)注的課題。HTML5技術(shù)的飛速發(fā)展為開(kāi)發(fā)跨平臺(tái)互動(dòng)多媒體教學(xué)資源提供基礎(chǔ)。文章探討如何將HTML5技術(shù)與移動(dòng)端多媒體教學(xué)資源開(kāi)發(fā)緊密融合，以移動(dòng)端物理力學(xué)實(shí)驗(yàn)多媒體課件的開(kāi)發(fā)為例，總結(jié)出應(yīng)用HTML5技術(shù)制作移動(dòng)端多媒體教學(xué)資源的五個(gè)要點(diǎn)并做創(chuàng)新應(yīng)用的思考。

關(guān)鍵詞：H5技術(shù) 移動(dòng)端教學(xué)資源 開(kāi)發(fā) 創(chuàng)新應(yīng)用

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1003-9082（2018）06-00-03

HTML5（簡(jiǎn)稱H5）是第五代超文本標(biāo)記語(yǔ)言，作為當(dāng)今頗受歡迎的移動(dòng)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，具有免裝插件、動(dòng)畫(huà)效果和交互性強(qiáng)、簡(jiǎn)單易用等突出優(yōu)勢(shì)。依托H5在線制作平臺(tái)，教師能輕松開(kāi)發(fā)適用的教學(xué)課件、微場(chǎng)景或測(cè)試題，提升課堂教學(xué)效果，激發(fā)學(xué)生的學(xué)習(xí)興趣、鼓勵(lì)學(xué)生課后的移動(dòng)學(xué)習(xí)和個(gè)性化學(xué)習(xí)，并促進(jìn)教學(xué)改革實(shí)踐如翻轉(zhuǎn)課堂。因此，探討如何將H5技術(shù)與移動(dòng)端多媒體教學(xué)資源開(kāi)發(fā)緊密融合有其現(xiàn)實(shí)意義。

一、HTML5技術(shù)的發(fā)展與應(yīng)用

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

H5在線制作工具和軟件不斷涌現(xiàn)，比如有MAKA、兔展、iH5和易企秀等在線制作平臺(tái)和炫課等H5課件制作軟件。它們提供可視化的操作界面，可以免代碼實(shí)現(xiàn)豐富的動(dòng)畫(huà)和交互功能。有些平臺(tái)還提供模板資源和參考教程供用戶套用，大大簡(jiǎn)化制作流程。所以常在朋友圈看到利用H5制作的活動(dòng)宣傳單、婚禮請(qǐng)?zhí)?、廣告、游戲、美術(shù)作品展等。可見(jiàn)，H5頁(yè)面正以其強(qiáng)大的傳播效果滲透著生活的方方面面。教師利用簡(jiǎn)單的H5頁(yè)面制作工具或軟件開(kāi)發(fā)移動(dòng)端教學(xué)資源，用它來(lái)傳播知識(shí)、輔助教學(xué)成為可能。

二、移動(dòng)端教學(xué)資源的開(kāi)發(fā)現(xiàn)狀

目前，微課是教師在信息技術(shù)與課程整合實(shí)踐過(guò)程中較常應(yīng)用的多媒體教學(xué)資源。關(guān)于微課的教學(xué)設(shè)計(jì)、資源開(kāi)發(fā)和應(yīng)用模式的研究不在少數(shù)。近年，支持移動(dòng)設(shè)備的平臺(tái)越來(lái)越多，以微信為代表的通訊社交平臺(tái)加入了移動(dòng)學(xué)習(xí)資源開(kāi)發(fā)的行列。碼課碼書(shū)逐漸成為教學(xué)資源的新型呈現(xiàn)方式。碼課碼書(shū)是在微信平臺(tái)和二維碼技術(shù)支持下將教學(xué)內(nèi)容匯集成二維碼，供學(xué)習(xí)者在手機(jī)平板上掃碼看書(shū)、上課的一種教學(xué)資源?；谖⑿殴娖脚_(tái)開(kāi)發(fā)的培訓(xùn)課程資源也觸手可及。誠(chéng)然，移動(dòng)教學(xué)資源的開(kāi)發(fā)成為教師備受關(guān)注的課題，是值得探討和挖掘的領(lǐng)域。

H5作為近三年興起的技術(shù)標(biāo)準(zhǔn)，將其應(yīng)用于教學(xué)資源的開(kāi)發(fā)也有一些案例，包括微場(chǎng)景搭建、小學(xué)生課堂游戲開(kāi)發(fā)和古詩(shī)詞課件制作等。部分研究重在介紹利用某H5在線制作平臺(tái)開(kāi)發(fā)多媒體教學(xué)資源的過(guò)程，而部分研究聚焦H5教學(xué)資源的應(yīng)用模式。本文將在此基礎(chǔ)上，結(jié)合H5移動(dòng)端物理力學(xué)實(shí)驗(yàn)多媒體課件的開(kāi)發(fā)實(shí)踐，探究H5移動(dòng)端多媒體教學(xué)資源的制作要點(diǎn)，望能為同類開(kāi)發(fā)提供參考。

三、H5移動(dòng)端教學(xué)資源的開(kāi)發(fā)實(shí)踐

HTML5在教學(xué)中的應(yīng)用十分豐富。利用H5在線制作工具或軟件，教師不僅能制作出課件、闖關(guān)小游戲等豐富課堂教學(xué)的頁(yè)面，還能發(fā)布H5手機(jī)網(wǎng)頁(yè)版的校園通知來(lái)促進(jìn)教學(xué)管理和家?；?dòng)，也可制作線上美術(shù)作品展、班級(jí)電子相冊(cè)和安全知識(shí)培訓(xùn)手冊(cè)。使用H5在線制作工具開(kāi)發(fā)多媒體教學(xué)資源的四步法為：選題→設(shè)計(jì)→制作→發(fā)布推廣。下面以物理力學(xué)《自由落體運(yùn)動(dòng)探究實(shí)驗(yàn)》作品的開(kāi)發(fā)為例做進(jìn)一步闡述。

1.選題

在選題時(shí)，首先要明確該H5頁(yè)面的主題和用途，判斷該主題的知識(shí)點(diǎn)是否適合通過(guò)H5網(wǎng)頁(yè)呈現(xiàn)。

本案例是一個(gè)以自由落體運(yùn)動(dòng)探究實(shí)驗(yàn)為主題，用于高中物理力學(xué)實(shí)驗(yàn)教學(xué)的多媒體課件，它既能夠在課堂教學(xué)，又能用于學(xué)生課后自主學(xué)習(xí)。力學(xué)是中學(xué)物理學(xué)習(xí)中最重要的板塊之一，但很多物理力學(xué)現(xiàn)象或是課本中的力學(xué)實(shí)驗(yàn)，由于受到實(shí)驗(yàn)設(shè)備和環(huán)境的限制，難以直觀、清晰地演示和再現(xiàn)，不利于力學(xué)知識(shí)的學(xué)習(xí)與掌握。自由落體運(yùn)動(dòng)實(shí)驗(yàn)教學(xué)中，我們難以模擬真空環(huán)境，也未必保證實(shí)驗(yàn)?zāi)芫珳?zhǔn)地控制變量。而H5能夠很好地解決這個(gè)問(wèn)題，H5網(wǎng)頁(yè)以音頻、動(dòng)畫(huà)或文字的形式，更生動(dòng)直觀地演示實(shí)驗(yàn)并解釋其中知識(shí)點(diǎn)和原理。線上學(xué)習(xí)與線下體驗(yàn)相結(jié)合，幫助學(xué)習(xí)者建構(gòu)知識(shí)。

2.設(shè)計(jì)

在設(shè)計(jì)環(huán)節(jié)中，首先要針對(duì)H5頁(yè)面的主題和知識(shí)點(diǎn)開(kāi)展教學(xué)設(shè)計(jì)，教學(xué)設(shè)計(jì)應(yīng)明確具體教學(xué)內(nèi)容和所需的多媒體資源，以便圖片和視音頻素材的搜集與整理；同時(shí)要體現(xiàn)計(jì)劃使用的教學(xué)方法和教學(xué)步驟，這影響著H5頁(yè)面的結(jié)構(gòu)和功能。之后，我們需要進(jìn)行頁(yè)面結(jié)構(gòu)和功能設(shè)計(jì)，明確此H5作品的頁(yè)面組成、各頁(yè)面的功能、頁(yè)面間的跳轉(zhuǎn)方式與使用的些多媒體資源和動(dòng)效，以及是否包含可輸入文本框和按鈕等用于交互的元素。

2.1教學(xué)設(shè)計(jì)

本課件的教學(xué)目標(biāo)是學(xué)生能夠說(shuō)出自由落體運(yùn)動(dòng)的定義、特征和條件；并通過(guò)觀察實(shí)驗(yàn)，知道物體的質(zhì)量不是影響自由落體運(yùn)動(dòng)速度的原因，走出常識(shí)誤區(qū)。課件中的實(shí)驗(yàn)需要相同的小球、羽毛和玻璃管各三個(gè)。一個(gè)小球、一根羽毛和一支玻璃管為一組，共設(shè)置三組，分別代表充滿空氣、抽去部分空氣和真空的情況。讓各組小球和羽毛在同一高度同時(shí)下落，進(jìn)行控制變量，對(duì)比落地快慢。

教學(xué)過(guò)程分為三個(gè)部分：?jiǎn)栴}導(dǎo)入、實(shí)驗(yàn)演示、闡述實(shí)驗(yàn)原理和結(jié)論。在課前提出問(wèn)題“重物和輕物哪個(gè)掉落速度快？”，讓學(xué)生根據(jù)生活中的觀察去思考與猜測(cè)，以此激發(fā)學(xué)習(xí)興趣，為下面實(shí)驗(yàn)現(xiàn)象激起學(xué)生的認(rèn)知矛盾做準(zhǔn)備。接著，用文字引導(dǎo)學(xué)生帶著問(wèn)題觀看實(shí)驗(yàn)動(dòng)畫(huà)，讓學(xué)生通過(guò)肉眼觀察對(duì)比輕重不同的小球和羽毛是否同時(shí)落地，其落地快慢是否和空氣阻力有關(guān)。借助實(shí)驗(yàn)現(xiàn)象驗(yàn)證自己的猜想正確與否，并做出初步的結(jié)論。最后，用文字和語(yǔ)音解說(shuō)闡述自由落體運(yùn)動(dòng)的實(shí)驗(yàn)原理和結(jié)論。

2.2頁(yè)面結(jié)構(gòu)與功能設(shè)計(jì)

本例把H5課件分為兩個(gè)頁(yè)面，第1頁(yè)用于問(wèn)題導(dǎo)入，第2頁(yè)用于實(shí)驗(yàn)動(dòng)畫(huà)的演示以及實(shí)驗(yàn)原理與結(jié)論的講解。

在該課件的首頁(yè)，我們用文字拋出問(wèn)題并提供3個(gè)選項(xiàng)，在題干和選項(xiàng)旁邊插入小球、石塊、羽毛和紙團(tuán)的圖片，啟發(fā)學(xué)習(xí)者結(jié)合對(duì)生活現(xiàn)象的觀察作答。點(diǎn)擊選項(xiàng)出現(xiàn)彈框，顯示學(xué)生點(diǎn)擊的選項(xiàng)，并用文字引導(dǎo)學(xué)生進(jìn)入實(shí)驗(yàn)環(huán)節(jié)，去驗(yàn)證自己的答案。下方也需設(shè)置“跳過(guò)預(yù)測(cè)”的按鈕，以便直接跳轉(zhuǎn)到第2頁(yè)。

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

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

3.制作

3.1制作工具選擇和素材準(zhǔn)備

能夠?qū)崿F(xiàn)上述動(dòng)效和功能的H5制作工具還不少，iH5在線制作平臺(tái)就是其中的一種。制作本例前需搜集羽毛、小球的圖片素材。素材來(lái)源包括千圖網(wǎng)、昵圖網(wǎng)、花瓣網(wǎng)等，可以直接下載背景透明的PNG格式的圖片。同時(shí)也可使用平臺(tái)自帶的繪圖工具繪制小球等素材。

3.2設(shè)置頁(yè)面

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

3.3制作動(dòng)畫(huà)

首先制作充滿空氣環(huán)境下的實(shí)驗(yàn)動(dòng)畫(huà)。該實(shí)驗(yàn)的動(dòng)畫(huà)分兩個(gè)階段：

第一階段——豎直加速運(yùn)動(dòng)

選中羽毛1，在右側(cè)點(diǎn)擊小人跑步的圖標(biāo)，為其添加【運(yùn)動(dòng)】的方法。在運(yùn)動(dòng)屬性面板，將移動(dòng)速度設(shè)置為0，加速度設(shè)為58.1，速度方向設(shè)為正90度。

注意：在iH5中加速度的單位和現(xiàn)實(shí)運(yùn)動(dòng)中加速度的單位不一樣；規(guī)定水平向右為0度，順時(shí)針累加，因此豎直向下就是正90度。同樣的，為小球設(shè)置運(yùn)動(dòng)，加速度為118.1。

第二階段——碰撞停止

構(gòu)建物理世界：在舞臺(tái)上添加一個(gè)畫(huà)布作為物理引擎的載體。在畫(huà)布下添加【物理世界】，命名為“物理世界1”，并將其它元素依次拖動(dòng)到它的下面。

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

設(shè)置碰撞事件：選中底板，點(diǎn)擊對(duì)象樹(shù)右側(cè)的感嘆號(hào)圖標(biāo)，設(shè)置碰撞事件。在事件屬性面板中，選擇觸發(fā)條件為“開(kāi)始碰撞”，碰撞對(duì)象是“羽毛1”，目標(biāo)對(duì)象是羽毛1下的“運(yùn)動(dòng)1”，其目標(biāo)動(dòng)作是“暫?！薄Ｍ碓O(shè)置碰撞對(duì)象為“小球”的事件。

制作完一組動(dòng)畫(huà)后，對(duì)“物理世界1”進(jìn)行復(fù)制，對(duì)元素重命名并調(diào)整位置。羽毛2、羽毛3運(yùn)動(dòng)加速度分別設(shè)置為98.1和118.1，而小球2、小球3的速度無(wú)需改變。

3.4制作交互

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

“再看一遍”按鈕：對(duì)“再看一遍”按鈕作添加事件，觸發(fā)對(duì)象為點(diǎn)擊，目標(biāo)對(duì)象和目標(biāo)動(dòng)作分別是舞臺(tái)和重新加載。

“跳過(guò)預(yù)測(cè)”按鈕：對(duì)按鈕設(shè)置事件，滿足觸發(fā)條件點(diǎn)擊時(shí)，舞臺(tái)跳轉(zhuǎn)至下一頁(yè)。

“查看知識(shí)點(diǎn)”按鈕：首先，在知識(shí)點(diǎn)文本的屬性面板中，關(guān)閉文本的初始可見(jiàn)。其次，在舞臺(tái)下添加計(jì)數(shù)器1，用于統(tǒng)計(jì)點(diǎn)擊的次數(shù)。接著，對(duì)該按鈕設(shè)置事件，每點(diǎn)擊一次，就觸發(fā)目標(biāo)對(duì)象計(jì)數(shù)器1產(chǎn)生加1的動(dòng)作。最后，對(duì)計(jì)數(shù)器添加兩個(gè)事件，觸發(fā)條件都是計(jì)數(shù)器為奇數(shù)。第一個(gè)事件觸發(fā)知識(shí)點(diǎn)文本顯示。第二個(gè)事件觸發(fā)音頻播放。同樣的，再添加兩個(gè)事件判斷偶數(shù)的情況。

音頻開(kāi)關(guān)按鈕：在舞臺(tái)下添加計(jì)數(shù)器2。與 “查看知識(shí)點(diǎn)”按鈕的制作步驟相似，對(duì)音頻按鈕和計(jì)數(shù)器2添加事件，使得點(diǎn)擊次數(shù)為奇數(shù)時(shí)觸發(fā)音頻播放，偶數(shù)時(shí)音頻暫停。

4.發(fā)布推廣

H5課件制作完畢后，經(jīng)過(guò)預(yù)覽和多次調(diào)試，再發(fā)布至H5平臺(tái)上，平臺(tái)便會(huì)生成二維碼和網(wǎng)址鏈接，作品大功告成。教師將二維碼或鏈接然后通過(guò)微信、QQ、論壇、貼吧等社交媒體進(jìn)行分享傳播，學(xué)生便能在不同終端通過(guò)點(diǎn)擊鏈接或掃二維碼等方式觀看H5課件，實(shí)現(xiàn)隨時(shí)隨地的個(gè)性化與交互式學(xué)習(xí)。

四、H5移動(dòng)端多媒體教學(xué)資源的制作要點(diǎn)

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

1.打造微場(chǎng)景，生動(dòng)導(dǎo)入

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

2.利用物理引擎和運(yùn)動(dòng)屬性，增添炫酷的動(dòng)畫(huà)效果

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

3.設(shè)置事件，增強(qiáng)頁(yè)面交互性和功能性

事件是指在一定的觸發(fā)條件下（如點(diǎn)擊、場(chǎng)景加載或跳轉(zhuǎn)頁(yè)面），對(duì)某個(gè)物體產(chǎn)生的動(dòng)作。合理設(shè)置事件能增強(qiáng)頁(yè)面的交互性和功能性。在《自由落體運(yùn)動(dòng)探究實(shí)驗(yàn)》課件中，通過(guò)設(shè)置點(diǎn)擊選項(xiàng)時(shí)觸發(fā)彈框出現(xiàn)的事件，實(shí)現(xiàn)了答題功能；通過(guò)設(shè)置點(diǎn)擊按鈕時(shí)頁(yè)面重新加載的事件，實(shí)現(xiàn)了多次查看的功能；通過(guò)設(shè)置事件，實(shí)現(xiàn)了跳過(guò)預(yù)測(cè)按鈕和聲音開(kāi)關(guān)按鈕的功能。可見(jiàn)，善用事件能夠?yàn)樵揌5頁(yè)面增加更多個(gè)性化功能。它允許學(xué)習(xí)能力不同、基礎(chǔ)不同的學(xué)生在觀看教學(xué)資源時(shí)，根據(jù)自身需求，點(diǎn)擊按鈕跳過(guò)某些頁(yè)面或多次查看同一頁(yè)面，彈出或隱藏使用幫助，播放或暫停解說(shuō)音頻，或完成知識(shí)問(wèn)答（如圖3）。依托交互性強(qiáng)和功能性強(qiáng)的教學(xué)資源，學(xué)生能進(jìn)行更加個(gè)性化的學(xué)習(xí)，提高學(xué)習(xí)效率和效果。

4.利用計(jì)數(shù)器，實(shí)現(xiàn)交替出現(xiàn)和隱藏

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

5.利用變量，記錄數(shù)值或文本

當(dāng)學(xué)生在選擇題中點(diǎn)擊選項(xiàng)，彈框中便會(huì)出現(xiàn)“你的選擇是____”的字樣。下劃線中填寫(xiě)的就是學(xué)生選擇的選項(xiàng)序號(hào)，這就是通過(guò)變量實(shí)現(xiàn)的。我們可以對(duì)選項(xiàng)按鈕設(shè)置事件，點(diǎn)擊時(shí)就將按鈕代表的序號(hào)賦值給變量。于是在整個(gè)作品的任何頁(yè)面中，我們都可以獲取該變量中的值，并將它顯示出來(lái)。巧用變量，學(xué)生輸入角速度大小，頁(yè)面便能及時(shí)呈現(xiàn)擺錘以用戶設(shè)置的速度作圓周運(yùn)動(dòng)的效果。我們還可將利用變量記錄姓名學(xué)號(hào)等信息、收集學(xué)生的反饋意見(jiàn)，讓頁(yè)面更智能。

利用H5開(kāi)發(fā)的教學(xué)資源能克服其他形式的課件或微課在交互性上的不足和單向傳播、功能較少的局限性，幫助學(xué)習(xí)者提高學(xué)習(xí)效果和體驗(yàn)。[2]故H5工具平臺(tái)或制作軟件很適合教師做優(yōu)質(zhì)教學(xué)資源的開(kāi)發(fā)。

五、H5多媒體教學(xué)資源創(chuàng)新應(yīng)用的思考

在手機(jī)、平板和網(wǎng)絡(luò)走進(jìn)課堂的未來(lái)教育中，H5多媒體教學(xué)資源能便捷地應(yīng)用于課前、課中和課后。在課前，教師通過(guò)發(fā)放二維碼或網(wǎng)頁(yè)鏈接，要求學(xué)生利用H5教學(xué)資源提前進(jìn)行某個(gè)知識(shí)點(diǎn)的學(xué)習(xí)。教師在課堂中可以將手機(jī)連接到多媒體設(shè)備中，現(xiàn)場(chǎng)演示H5教學(xué)資源，利用多媒體手段輔助課堂中某個(gè)環(huán)節(jié)的教學(xué)。授課結(jié)束后，教師將這些H5教學(xué)資源的二維碼分享給學(xué)生，讓學(xué)生在課后拿起手機(jī)即可復(fù)習(xí)并參與教師組織的H5線上測(cè)試?？梢?jiàn)H5多媒體教學(xué)資源能夠貫穿教學(xué)全過(guò)程，助力翻轉(zhuǎn)課堂和移動(dòng)學(xué)習(xí)的開(kāi)展。

為了更好地實(shí)現(xiàn)H5技術(shù)與學(xué)科教學(xué)的融合，首先，教師在開(kāi)發(fā)H5教學(xué)資源前應(yīng)思考學(xué)科和授課年級(jí)是否適用；做好教學(xué)設(shè)計(jì)，明確H5教學(xué)資源計(jì)劃用于哪個(gè)環(huán)節(jié)，才能開(kāi)發(fā)實(shí)用且符合學(xué)生認(rèn)知水平和需求的多媒體教學(xué)資源。其次，利用H5移動(dòng)端教學(xué)資源進(jìn)行移動(dòng)學(xué)習(xí)具有碎片化的特征，碎片化學(xué)習(xí)和系統(tǒng)性學(xué)習(xí)的平衡需要教師把控，把學(xué)生課外單個(gè)知識(shí)點(diǎn)的學(xué)習(xí)和課內(nèi)知識(shí)體系的構(gòu)建整合起來(lái)。同時(shí)，教師應(yīng)關(guān)注學(xué)生學(xué)習(xí)習(xí)慣的轉(zhuǎn)變，及時(shí)獲取教學(xué)效果反饋并不斷作調(diào)整，幫助師生共同適應(yīng)互聯(lián)網(wǎng)時(shí)代下新的教學(xué)方式。

參考文獻(xiàn)

[1]冷國(guó)華，蔡志東，許翊.HTML5互動(dòng)微課開(kāi)發(fā)與應(yīng)用[J].鎮(zhèn)江高專學(xué)報(bào)，2016，29（3）：37-41.

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