HTML5互動網(wǎng)頁在教育教學(xué)中的應(yīng)用探討

劉勇 鄒碩

● HTML5互動網(wǎng)頁及制作工具簡介

近年來，隨著移動互聯(lián)網(wǎng)的發(fā)展，HTML5技術(shù)變得越來越成熟，由于其具有良好的跨平臺性，對移動設(shè)備支持性好，逐漸受到了用戶的關(guān)注和接受?，F(xiàn)在微信中傳播的很多邀請函、小游戲、產(chǎn)品介紹和活動宣傳網(wǎng)頁等都是HTML5網(wǎng)頁作品。

在HTML5網(wǎng)頁的開發(fā)方面，目前出現(xiàn)了很多專門創(chuàng)作HTML5互動網(wǎng)頁的在線網(wǎng)站和APP軟件。例如，云來（http：//www.liveapp.cn）、初頁（http：//chuye.cloud7.com.cn）、易企秀（http：//www.eqxiu.com）、炫課（http：//www.xuanyes.com）等，它們一般都具有以下一些特點。

1.簡單易用，技術(shù)門檻低

HTML5包括多種相關(guān)技術(shù)，涉及編程代碼，并且發(fā)展（更新）速度很快，學(xué)習(xí)難度大。而普通一線教師平時教學(xué)任務(wù)重，很難全面掌握并應(yīng)用這些技術(shù)。而上述HTML5互動網(wǎng)頁制作工具的一個明顯的特征就是技術(shù)門檻低，簡單易用。教師可以無師自通地插入圖片、音頻、視頻等各種素材，以所見即所得的方式進(jìn)行設(shè)計。這樣，教師完全可以擺脫技術(shù)的束縛，無須接受專門培訓(xùn)就可以創(chuàng)作出自己的作品。

2.有豐富的互動模板和在線素材

以上HTML5互動網(wǎng)頁制作工具的易用性還體現(xiàn)在另外一個方面：提供了大量不同類型的互動模板和在線素材。教師可以根據(jù)需要選擇合適的互動模板，不必從零開始，大大提高了效率，節(jié)約了教師的制作時間和精力。結(jié)合大量在線提供的精美素材，教師可以在短時間內(nèi)制作出精美的HTML5互動網(wǎng)頁作品。

3.使用免費，傳播方便

絕大多數(shù)此類網(wǎng)站和軟件都可以免費使用。制作完成后，又可以將作品免費存在對方的服務(wù)器上。另外，作者可以通過多種方式分享和傳播自己的作品。

● HTML5互動網(wǎng)頁在教育教學(xué)中的應(yīng)用策略與案例

目前，教育領(lǐng)域的HTML5互動網(wǎng)頁主要應(yīng)用在以下三個層面，在此筆者以長沙市雨花區(qū)楓樹山大橋小學(xué)為例，從這些層面探討HTML5互動網(wǎng)頁在教育教學(xué)中的應(yīng)用。

1.教學(xué)教研——基于移動終端的學(xué)習(xí)資源開發(fā)

隨著教育信息化的發(fā)展，iPad、電子書包在教育教學(xué)中的應(yīng)用越來越廣泛。學(xué)習(xí)者使用平板電腦、智能手機已經(jīng)是相當(dāng)普遍的現(xiàn)象。移動學(xué)習(xí)成為基礎(chǔ)教育不可或缺的一部分。教學(xué)實踐對基于移動終端設(shè)備的學(xué)習(xí)資源需求日益增長。HTML5互動網(wǎng)頁創(chuàng)作工具為廣大普通教師清除了技術(shù)障礙，提供了一種低門檻、高效率、大眾化的移動學(xué)習(xí)資源開發(fā)途徑。

案例1：基于微視頻的移動終端課件《揭秘信息技術(shù)——什么是IP地址》。

移動終端課件《揭秘信息技術(shù)——什么是IP地址》是利用HTML5互動網(wǎng)頁制作工具“炫課”制作的一個HTML5互動課件。課件以微視頻為基礎(chǔ)，將學(xué)習(xí)任務(wù)單、微課視頻和練習(xí)題整合成一個以微視頻為中心的、完整的HTML5型移動終端課件。如圖1所示，學(xué)習(xí)者根據(jù)學(xué)習(xí)目標(biāo)，可以自主選擇觀看視頻或者進(jìn)入測試環(huán)節(jié)。課件以知識點為單位，為教師解決教學(xué)過程中的重難點知識、課后輔“差”等提供了便捷的途徑。另外，這種基于現(xiàn)有微課資源的HTML5互動課件使用了已有的微課資源，并且制作工具的使用較簡單，教師制作成本很低。

目前，網(wǎng)絡(luò)上的微課資源非常豐富，并且一線教師的教育技術(shù)能力有了明顯提高，已經(jīng)具備了微課的設(shè)計與制作能力。利用已有的微課資源，制作HTML5互動網(wǎng)頁形式的移動終端課件一方面可以充分提高資源的使用效率，另一方面可以通過手機、iPad、二維碼等設(shè)備和技術(shù)快速傳播，為學(xué)生隨時隨地進(jìn)行碎片化學(xué)習(xí)，解決教學(xué)中的重難點知識提供方便，是課堂教學(xué)的有益補充。

除了資源開發(fā)方面的應(yīng)用，教師也可以使用HTML5互動網(wǎng)頁開展教研工作，如利用HTML5互動網(wǎng)頁來進(jìn)行交流和匯報自己的學(xué)習(xí)和研究成果等。

2.班級管理——班級活動展示與匯報

對于班上開展的重要活動和事情，如活動宣傳、展示班級活動的過程照片等，班主任老師一般通過班級QQ群或微信群與學(xué)生、家長們互動。然而，這種在班級QQ群和微信群中傳播的信息只是零散的文字、圖片等，缺乏整體性和情境感，可讀性不強。而HTML5互動網(wǎng)頁作品則可以將文字、圖片、聲音、視頻等多種媒體融合在一起，作為一個完整的作品通過微信群、二維碼或鏈接地址等傳播。

案例2：《二（1）班美術(shù)作品展》。

二（1）班美術(shù)老師創(chuàng)新性地將學(xué)生美術(shù)作品以HTML5互動網(wǎng)頁的形式向?qū)W生家長匯報（如圖2）。作品使用在線工具“初頁”制作而成，圖文聲并茂地展示了美術(shù)課堂上孩子們的表現(xiàn)及作品，極具觀賞性和情境感。更重要的是，瀏覽者還可以給作品點贊，進(jìn)行評論，有效地促進(jìn)了學(xué)生家長積極參與班級活動和建設(shè)。

3.家?；印獙W(xué)校宣傳與教育理念傳播

在“微時代”，很多學(xué)校都與時俱進(jìn)地申請了微信公眾號，并且在學(xué)校的品牌推廣、教育教學(xué)理念傳播、家?；拥确矫姘l(fā)揮了重要的作用。HTML5互動網(wǎng)頁與微信公眾平臺的結(jié)合，為基于微信公眾平臺的家?；釉鎏砹诵碌幕盍?。在微信公眾平臺中群發(fā)的消息雖然可以整合文字、圖片、視音頻等多種媒體形式，但其內(nèi)容是靜態(tài)的。而HTML5互動網(wǎng)頁則可以以動態(tài)的形式傳播學(xué)校的校園文化、教育理念、各項規(guī)章制度等，更具表現(xiàn)力和感染力。

案例3：《楓橋周報》。

楓樹山大橋小學(xué)有通過“楓橋周報”向家長、社會發(fā)布一周活動總結(jié)的慣例。隨著信息技術(shù)的發(fā)展，“楓橋周報”的形式由最初的手機短信，發(fā)展到微信公眾平臺信息，再到目前的HTML5互動網(wǎng)頁（如圖3），由單純的文字信息，發(fā)展成了集文、圖、聲、像于一體的多媒體信息，由靜態(tài)的頁面變成了交互式的動態(tài)頁面。瀏覽者觀看HTML5互動網(wǎng)頁形式的學(xué)校一周總結(jié)時，可以自主控制瀏覽進(jìn)度，可以開展點贊和評論等互動活動，提高了參與度。

● 結(jié)論

當(dāng)前，移動終端設(shè)備在教育教學(xué)中的應(yīng)用已經(jīng)是不可避免的趨勢，為教育教學(xué)帶來了新的機遇和挑戰(zhàn)。而基于移動終端的資源建設(shè)方面，曾經(jīng)一統(tǒng)天下的Flash局限性日益明顯，逐漸失去了往日的霸主地位。HTML5互動網(wǎng)頁則具有多設(shè)備跨平臺性、瀏覽器兼容性等優(yōu)勢，在教育教學(xué)方面有廣闊的應(yīng)用前景。相信隨著HTML5相關(guān)技術(shù)和創(chuàng)作平臺的日益成熟和發(fā)展，將會有越來越多的一線教師和學(xué)校使用HTML5互動網(wǎng)頁為教育教學(xué)服務(wù)。