基于HTML5在線編輯平臺的移動學習資源構建與應用研究

譚敏敏

（南京農業大學 圖書館教育技術中心，江蘇 南京210095）

基于HTML5在線編輯平臺的移動學習資源構建與應用研究

譚敏敏

（南京農業大學 圖書館教育技術中心，江蘇 南京210095）

HTML5在線編輯平臺是非編程人員制作HTML5頁面的利器。HTML5頁面在營銷領域獲得了成功，在教育領域，特別是移動學習，也將大有用武之地。可用于制作微課、數字故事、習題與問卷、課程內容、指導手冊與文化宣傳等。文章介紹了HTM L5在線編輯平臺，并探討了基于其的移動學習資源的構建和應用。

HTML5在線編輯平臺；移動學習；學習資源

一、概述

早在2000年左右，隨著移動通信技術與計算機技術的融合，人們就開始探討移動學習。上世紀末，利用移動通信設備開展學習活動的研究開始興起，短短幾年時間，移動學習成為了遠程教育與數字化學習領域中的一個研究熱點[1]。由于當初移動通信設備本身以及當時環境的種種限制，少數人擁有、屏幕小、存儲空間有限、帶寬小、支持格式不統一以及開發資源困難、周期長等，移動學習發展緩慢，并沒有得到廣泛的認可。2008年以后隨著安卓手機、平板電腦等智能移動設備的出現，移動學習出現迅猛發展之趨勢，特別是2012年以后，各類學習APP層出不窮，支持移動設備的微課平臺也越來越多，以微信為代表的社交平臺也開始加入到移動學習的行列當中。

與移動設備、移動平臺翻天覆地的變化相比，移動學習資源的建設相對緩慢，質量參齊不齊。表現在三個方面：

（1）優良的移動學習資源比較匱乏；

（2）表現形式單調，不足以吸引學習者的興趣；

（3）移動學習資源應該由一線教師建設，而目前大多數的學習APP并非他們開發。

改變現狀的關鍵在于鼓勵與引導一線教師使用免費開源、簡單易用的移動應用平臺構建移動學習資源，例如微信、微博、HTML5在線編輯平臺等。

二、HTML5與HTML5在線編輯平臺

HTML5是萬維網核心語言——超文本標記語言（HTML）的第五次大改版，引入了完全不同的新元素、新功能，幫助網絡應用程序作者進行更有創意的實踐，大大提升用戶訪問與操作的交互式體驗和跨平臺的支持[2]。HTML5作為移動設備支持良好的新技術，與移動設備的關系主要體現在幾方面：

（1）為移動平臺定制專門的表單元素，用戶輸入不同內容時顯示相應的鍵盤，提高用戶輸入效率[3]。輸入電話號碼時只顯示數字鍵盤，輸入Email時顯示帶@和.的鍵盤，輸入URL顯示帶.com和.的鍵盤等。

（2）強大的Canvas繪圖功能，為開發者提供大量的有關動態產出與渲染的圖形、圖表、圖像和動畫的API，結合JavaScript可以實時改變和渲染圖形，不再需要Flash插件的支持，從而實現在移動設備上穩健運行。

（3）新增音頻與視頻元素，無需安裝任何插件，無需對個別素材做特殊處理，便可實現常見音頻與視頻文件在移動設備上流暢播放。

（4）本地存儲，當用戶遇到網絡信號不好甚至沒有網絡的情況，本地存儲功能可以讓用戶繼續訪問Web資源，特別是教學資源更新頻率不高，本地存儲是一種很好的策略。

HTML5是一種標準、一種技術，也是一種編程語言，編程人員可以直接使用HTML5+CSS3+JavaScript開發移動設備支持的平臺，而一線教師為了搭建移動學習資源平臺而學習HTML5等技術是不現實的，但可以使用HTML5在線編輯平臺，不需要任何編程基礎，便可像制作幻燈片一樣制作移動學習資源。目前有不少HTML5在線編輯平臺免費提供給用戶使用。

2014年以來，HTML5頁面成為了營銷界的新寵兒，“多快好省”的杰出代表，其靈活性高、開發成本低及制作周期短的種種特性使其在移動營銷領域大放異彩。不需要懂編程，任何懂得操作計算機的人都可以通過HTML5在線編輯平臺實現制作。HTML5頁面在營銷界獲得了成功，其在教育領域同樣有用武之地，特別是移動學習，HTML5頁面就是移動終端的幻燈片，比傳統幻燈片具備更強的表現能力。目前，最受用戶歡迎而且提供免費功能的HTML5在線編輯平臺主要有易啟秀、Make、初頁、點點客海報和兔展等。它們都是簡單、免費、好用的HTML5頁面微場景制作工具，移動場景自營銷管家。可以用于制作企業推廣手冊、宣傳海報、招聘啟事、意見收集、報名表、邀請函、相冊、賀卡、簡歷等社會化應用微場景。使用簡單，只需一臺普通計算機、一個支持HTML5的現代瀏覽器，如Chrome、Firefox、IE11等，就可以零代碼、極速制作，并且可以多渠道發布與推廣。提供多種不同行業、不同風格的模板給用戶免費使用，即使沒有設計基礎，也可以做出漂亮的HTML5頁面。以易企秀為例，模板中心提供了圖文混排、海報、招聘、表格等用途類模板，表單、互動、事件等功能型模板，以及懷舊、現代、中國風、扁平化等風格型模板。懂得設計的用戶可以自己設計模板，并保存到個人模板庫中。大多數的HTML5在線編輯平臺提供文本、圖片、形狀、音樂、視頻、互動、表單、特效等多種多媒體元素組件，用戶可以根據需求上傳本地音頻與圖片等素材，并自動存儲到個人素材庫中，方便重復使用。HTML5在線編輯平臺的強大之處還在于其分享渠道便捷和精確的數據統計分析以及匯總功能。最簡單的分享方式是識別二維碼或QQ、微信等社交平臺群發URL；數據統計與分析功能可以統計用戶訪問情況，如總訪問數、平均值與峰值，訪問用戶地域分布，使用設備情況，新老用戶情況，性別比例，年齡、學歷、職業分布，交互次數等；數據匯總功能用于收集并保存用戶提交的表單數據和留言內容等，這在移動學習中，對學習者反饋信息的收集起到重要的作用。

三、各類移動平臺在移動學習應用的狀況

移動學習是一種特殊的學習，它極大地依賴于技術、設備和平臺，已經經歷了較長發展時期，且其發展主要以設備與技術的發展為導向，其發展趨勢是，從基于手機短消息服務SMS和多媒體短信MMS業務的移動學習，基于WAP瀏覽的移動學習，基于移動博客的移動學習，到基于Android、iOS平臺的學習類APP和移動社交平臺以及基于HTML5平臺的移動學習。總之，移動學習的應用模式呈現多樣化的發展趨勢[4]。目前支撐移動學習發展的技術、設備和平臺越來越成熟，普及率越來越高，第四代移動通信技術（4G）、WIFI技術、大屏幕智能手機的出現與普及將移動學習推向了新的高地。

技術與設備已經相當成熟，但平臺和資源的研究與建設相對落后。基于SMS和MMS推送、基于WAP瀏覽方式的移動學習已經落伍，基于Android、iOS平臺學習類APP和基于以微信為代表的移動社交平臺的研究正方興未艾。微信公眾平臺具有信息群發推送、自動回復、一對一交流互動等功能，為用戶提供更多定制化、更創新和便捷的移動互聯網服務體驗[5]。由此可見微信公眾平臺作為移動學習平臺是適合的，對應的研究也絡繹不斷，近兩年來也涌現出來一大批學習平臺公眾號，例如，口袋英語公眾號，每天向關注用戶推送英語美文、英文歌曲和電影、口語詞匯等內容；希沃學院公眾號，主要是向一線教學工作者教受使用何種技術與工具來提高教學效果，推送內容主要是圖文和視頻教程；等等。

筆者以中國知網（CNKI）全文數據庫為樣本，以“移動學習+平臺”為主題關鍵詞進行精確檢索，文章發表時間限制在2000年1月1日至2016年3月31日，總共得到樣本1213篇，剔除不相關文章后，得到基于WAP瀏覽方式的有26篇，基于移動博客的17篇，基于Android平臺的104篇，基于iOS平臺的16篇，基于智能手機的41篇，基于微信平臺的119篇。基于Android、智能手機和微信平臺的研究占了大部分，而Android、智能手機和微信正是近幾年最普及的移動設備和最流行的移動社交平臺。

與Android、iOS和微信平臺相反，HTML5在線編輯平臺在移動學習中的研究與應用還是一片空白，而基于HTML5的移動學習平臺方面的研究與應用卻很常見，絕大多數參與者是軟件開發人員，從技術層面上探討基于HTML5的移動學習平臺設計與開發。例如，陳楠楠[6]的碩士畢業論文探討了基于HTML5的移動學習資源設計原則，利用HTML5關鍵的音視頻技術和知識地圖等完成了資源平臺的建設。鄭巍[7]利用HTML5技術設計和開發了課程資源管理的移動平臺，實現教師隨時隨地管理課程資源。趙愛美[8]利用HTML5對傳統.NET架構的學習資源站點進行改進，實現傳統Web學習資源的移動客戶端訪問。以上的研究對移動學習平臺設計與開發的技術人員有一定的參考價值，而對一線教師構建移動學習資源平臺意義不大。移動學習資源平臺的構建不僅僅是平臺開發人員的事，一線教師也應該積極參與，創造更多、更高質量的移動學習資源，解決目前國內移動學習資源匱乏、質量參齊不齊的問題。

四、基于HTML5在線編輯平臺移動學習資源構建與應用

移動學習資源是新一代的數字化學習資源。數字化學習資源依托信息技術的優勢，較傳統學習資源具有多樣性、共享性、互動性、擴展性、再生性等特點[9]。移動學習資源除了有這些特點之外，還具有內容碎片化、跨平臺支持、呈現區域有限、圖片視頻為主文字為輔、更強的視覺效果、更便捷的交互等特點。移動學習的過程是一種短時的、沉浸度不大的過程，周圍環境可能是混亂嘈雜的，期間隨時可能被自身或者外界因素影響而打斷，并且之后可以迅速恢復。一線教師利用HTML5在線編輯平臺創建移動學習資源時，應該遵循移動學習的規律與移動學習資源的特點。

HTML5在線編輯平臺具有零代碼、零設計、極速制作、便捷分享、幻燈片式展示、跨平臺支持等優點，十分適合一線教師用于構建移動學習資源。一線教師可以像操作各類幻燈片制作工具一樣操作HTML5編輯平臺，無論是文本、圖形、圖片，還是視頻、表單輸入框、互動元素等，都是可操控組件，不需要任何代碼控制，可以使用鼠標任意拖放，是一種所見即所得的體驗。像幻燈片一樣分頁制作，用戶可以任意添加、刪除和復制頁，每一頁上的元素可以自由布置。

1.建立在線素材庫

HTML5在線編輯平臺一個最主要的特點是在線編輯、在線存儲，因此，首先需要建立一個在線素材庫，將本地計算機的文本文檔、圖形圖片、音頻、視頻等資源上傳到線上，無論何時何地都可以構建移動學習資源。目前大多數的HTML5在線編輯平臺都提供了用戶上傳圖片和音頻并自動保存到我的圖片和我的音頻庫的功能，但不支持本地視頻文件的上傳，只能嵌入優酷、土豆與騰訊視頻。一個可行的方法是用戶注冊一個優酷、土豆或者騰訊視頻賬號，將本地制作的微視頻上傳至這三大視頻分享網站上，然后便可以直接嵌入HTML5在線編輯平臺。

除了短視頻，圖片與文字是移動學習資源最主要、最重要的元素。跟傳統的書本和電子書不同，移動學習資源不應該是大篇幅的文字描述，而是要類似幻燈片一樣圖文混排，有合適的轉場效果、淡入淡出等其他動畫。移動設備，無論是手機還是平板電腦，屏幕大小是有限的，在有限的屏幕上放置文字內容越多，段落躍密、字號越小，顯示效果越差，容易造成閱讀者視覺疲勞，嚴重影響閱讀心情。一種理想的方案是，盡量提煉、精簡文字內容，多使用圖像表達，一幅好的圖像能比密密麻麻的文字傳遞更多的信息。HTML5在線編輯平臺允許用戶上傳本地圖片到我的圖片庫，可以在線管理圖片，對圖片進行分類，還可以在線作圖，這得力于HTML5 Canvas技術的支持。

2.與微信結合，實現資源的快速、廣泛傳播與互動

HTML5在線編輯平臺可以制作出海報級的、超強視覺效果的移動學習資源，可以實現幻燈片式的瀏覽，很大程度上改善了學習者的閱讀體驗。但它本質還是H5頁面制作與內容呈現平臺，不是一個傳播、分享平臺，實時互動性也有所欠缺。移動學習資源需要靠移動設備與移動平臺傳播與分享才能發揮其價值。微信是一款非常好的傳播、分享社交軟件，騰訊公司公布了2016年一季度業績報告，其注冊用戶數量已經突破7億大關，月活躍用戶5.49億；現在的年輕人幾乎人手一部智能手機，每人一個微信賬號，可以借助微信傳播與分享移動學習資源。HTML5頁面制作好之后便可以進行設置和發布，可以起一個吸人眼球的標題和概括資源主要內容的描述。頁面發布后生成一張二維碼和URL地址，移動學習活動組織者或移動學習資源提供者將二維碼或URL地址發布到微信公眾平臺上，學習者就能輕松訪問基于HTML5頁面的高質量學習資源。

目前HTML5在線編輯平臺還不能制作實時互動的H5頁面，但是可以在線留言與提問，組織者通過后臺查看學習者留言內容和所提的問題，并及時作出回復。學習者與組織者之間、學習者與學習者之間也可以通過微信平臺進行學習問題解答、內容探討等互動活動。

3.對學習者反饋信息進行收集與分析

學習反饋是改變學生學習行為、影響學習過程與效果的關鍵因素，是調控網絡學習行為的重要途徑，正確運用反饋，能改善網絡學習過程、優化網絡學習效果等提供支持[10]。無論何種形式的學習，都應該有相應渠道了解學習者的反饋信息，并針對反饋信息作出相應的處理。移動學習是一種特殊網絡學習，學習者自由度較大，因此不少移動學習平臺不注重反饋信息的收集與分析，經常出現學習者與組織者脫節現象。

HTML5在線編輯平臺提供了多種用戶行為數據統計分析功能，劃分不同的時段，統計學習者訪問次數、學習者區域分布、使用設備情況，可以了解不同學習個體積極程度、不同區域學習者的積極性差異、以及使用設備的偏好等。統計訪問者的男女比例、新老用戶比例、年齡分布、學歷于職業分布等，比較新老用戶、不同性別、不同年齡、學歷與職業學習者的學習態度情況，更有針對性的提供學習資源。統計互動次數、電話互動次數和超鏈接點擊次數，互動統計最能體現學習者主動探索的情況，比提供相關學習資料與擴展閱讀的超鏈接，學習者點擊越多，越能說明其學習能動性越大。對表單數據的匯總，可以是對學習者一項調查問卷或者是一次作業的收集，也可以是對學習者疑難問題的解答。所有的數據都將長期保存于HTML5在線編輯平臺賬戶中，結合其他專業數據分析工具，可以挖掘更多更有價值的信息。

五、總結

本文分析了目前移動學習資源平臺的研究、應用情況，認為移動學習的發展與技術、設備、平臺的發展密切相關，移動學習資源的建設可以選擇前沿的、廣泛流行的、并與教育理念不沖突的社會化應用平臺，比如微信和HTML5在線編輯平臺。HTML5是下一代Web技術，未來的Web內容由社會大眾創建，移動學習資源也應該由千千萬萬一線教師創建，HTML5在線編輯平臺給他們提供了便捷、高效的創作平臺。

[1]葉成林,徐福蔭,許駿.移動學習研究綜述[J].電化教育研究,2004(3):12-19.

[2]World W ideW eb Consortium.HTML5[J].W 3C W orking D raft,＜http://www.w3.org/TR/htm l5,2008.

[3]邢曉鵬.HTML5核心技術的研究與價值分析[J].價值工程,2011,30(22):157-158.

[4]郭紹青,黃建軍,袁慶飛.國外移動學習應用發展綜述[J].電化教育研究,2011(5):105-109.

[5]邱炳發,馬燕,李明勇.微信支持下的移動學習資源設計研究[J].現代教育技術,2016(3):114-120.

[6]陳楠楠.基于HTML5的移動學習資源設計及應用研究[D].西安電子科技大學,2013.

[7]鄭巍.基于HTML5的課程資源管理移動網站的設計[D].遼寧：大連理工大學,2014.

[8]趙愛美.基于HTML5和.NET的移動學習平臺研究與實現[J].河南科技學院學報(自然科學版),2013(4): 62-66.

[9]石巧珍,韓陳沖.數字化學習資源的時空特點及作用機理[J].現代教育技術,2007,17(2):30-32.

[10]張貝貝,李玉斌,武小力,劉會宇.網絡學習反饋研究的現狀及分析[J].中國信息技術教育,2015(9):113-115.

（編輯：楊馥紅）

G43

A

1673-8454（2016）19-0040-04