HTML5互動網頁在教育教學中的應用探討

劉勇 鄒碩

● HTML5互動網頁及制作工具簡介

近年來，隨著移動互聯網的發展，HTML5技術變得越來越成熟，由于其具有良好的跨平臺性，對移動設備支持性好，逐漸受到了用戶的關注和接受。現在微信中傳播的很多邀請函、小游戲、產品介紹和活動宣傳網頁等都是HTML5網頁作品。

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

1.簡單易用，技術門檻低

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

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

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

3.使用免費，傳播方便

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

● HTML5互動網頁在教育教學中的應用策略與案例

目前，教育領域的HTML5互動網頁主要應用在以下三個層面，在此筆者以長沙市雨花區楓樹山大橋小學為例，從這些層面探討HTML5互動網頁在教育教學中的應用。

1.教學教研——基于移動終端的學習資源開發

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

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

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

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

除了資源開發方面的應用，教師也可以使用HTML5互動網頁開展教研工作，如利用HTML5互動網頁來進行交流和匯報自己的學習和研究成果等。

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

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

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

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

3.家校互動——學校宣傳與教育理念傳播

在“微時代”，很多學校都與時俱進地申請了微信公眾號，并且在學校的品牌推廣、教育教學理念傳播、家校互動等方面發揮了重要的作用。HTML5互動網頁與微信公眾平臺的結合，為基于微信公眾平臺的家校互動增添了新的活力。在微信公眾平臺中群發的消息雖然可以整合文字、圖片、視音頻等多種媒體形式，但其內容是靜態的。而HTML5互動網頁則可以以動態的形式傳播學校的校園文化、教育理念、各項規章制度等，更具表現力和感染力。

案例3：《楓橋周報》。

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

● 結論

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