基于HTML5的交互式移動學習平臺研究*

趙學銘 王 剛

?

基于HTML5的交互式移動學習平臺研究*

趙學銘1王 剛2[通訊作者]

（1．天津醫科大學科學技術處，天津 300070；2．天津醫科大學圖書館，天津 300070）

隨著移動技術的發展，移動學習在數字化學習領域得到了廣泛應用。利用HTML5技術開發的交互式移動學習平臺適配多種操作系統，使用戶在不同類型的智能設備上均可獲得良好的使用體驗，節約了開發和維護成本。該平臺根據實際情況，還為教師和學生兩類用戶分別提供了不同的功能模塊，以保證教學過程中師生之間充分的溝通和交流。該平臺的使用改變了傳統被動式的教學模式，在學生、教師、教學資源之間形成了交互式學習環境。

移動技術；移動學習；HTML5；智能設備；交互式學習

引言

移動學習（Mobile Learning）是指利用無線移動通信網絡技術以及無線移動通信設備，獲取教育信息、教育資源和教育服務的一種新型學習形式[1]，具有“隨時隨地”的特性，是在線數字化學習的無線擴展，被認為是未來學習中不可缺少的一種學習模式[2]。移動學習使得學習者不再被限制在電腦之前，而是可以根據自身的需要基于不同的學習目的和方式開展學習。同時，通過移動學習可以提高學生與教師之間的交互程度，進而提升學習效率。

在移動學習的資源開發方面，國內外相關學者進行了大量的研究工作。但是，目前在移動學習的資源建設和平臺開發上存在以下幾個問題：①移動學習資源的內容單調，主要局限于英語等語言類移動學習資源的開發方面，阻礙了移動學習資源向多樣性和豐富性方面發展[3]，且內容和形式較為單一，不能滿足學習者的個性化需求；②移動學習平臺的可移植性差，基于某種平臺所開發的移動學習資源并不能被完整地移植到其它平臺，造成資源的重復建設，增加了開發和維護成本；③移動學習平臺的設計缺乏交互性，使得學習效果大打折扣[4]。此外，移動學習系統缺乏跟蹤學生學習效果的功能，導致學生借助移動設備進行學習時學習效果不佳。

一交互式學習環境的設計

交互指學習者與移動設備、學習平臺、知識內容、其他學習者等展開的信息交流過程[5]。移動學習平臺與傳統的電子學習網站相比，兩者在交互方式上有很大的區別。設計合理的交互方式，可以提高移動學習平臺的質量，帶給學習者良好的學習體驗。

1 交互式學習環境的設計原則

設計面向移動智能設備的學習平臺時，需要充分遵循智能手機的特點以及采取移動學習方式的學習者的需求[6]。交互式學習環境的設計主要遵循三個原則：①界面友好，導航清晰。界面的友好性和易操作性對于學習者的使用體驗至關重要，因此清晰明確的導航可便于學習者了解整個平臺的架構，并有助于利用移動學習平臺提高學習效率。②知識內容的適用性。遵循適用性原則，知識內容力求簡潔直觀，以幫助學習者激發學習興趣、提升學習效率。③用戶操作的便捷性。在設計移動學習平臺時要以內容呈現的形式為主，避免大量的用戶輸入操作。此外，移動學習平臺需要針對學習者的每一個操作提供及時的響應和反饋，并提供相應的處理結果和提示，以便學習者判斷如何進行下一步的操作。

2 交互式學習環境的課程資源設計

由于移動學習與傳統的課堂教學在知識組織形式上存在很大的差異，因此在學習資源建設方面，移動學習需以問題為中心，將知識內容進行模塊化處理，明確教學目標，精煉教學內容。也就是說，移動學習的課程內容應簡短意賅，將相關學習資源進行結構化組合，建立資源的交互內容與學習目標、教學活動、學習環境之間有意義的關聯，形成一個主題突出的結構化學習資源環境[6]。

3 交互式學習環境的交互方式設計

學生對教學資源的學習，不應是教師通過教學方式方法將教學資源灌輸給學生這樣一個單方面的信息傳送過程，而應該引導學生在學習的過程中將所學的知識不斷創新，形成新的教學資源并與他人共享和交流。學生、教師、教學資源之間的相互融合、促進，形成了一個交互式的學習環境。交互類型大致可分為以下三類：教師—學生交互、學生—學生交互、學生—教學資源交互。

二基于HTML5的交互式移動學習平臺設計

1 HTML5開發移動應用的優勢

使用HTML5開發移動學習平臺，有助于解決移動智能設備上因操作系統的不同，而導致移動學習資源的開發依賴于操作系統類型的問題。為此，本研究構建了基于HTML5的交互式移動學習平臺（下文簡稱“平臺”），它具有以下優勢：可以同時適用于Android、iOS甚至是Windows Phone平臺，適配性和統一體驗較好；移動設備的客戶端和存儲數據較少，節約了用戶的手機空間；技術難度較低，開發工作量小，且開發成本低。

2 平臺功能分析

通過對最常用的教學方法進行分析，發現在絕大多數情況下，教師采用的教學方法是學生們被動地接受教師所傳授的知識。因此，根據目前教學的實際情況，平臺針對教師和學生兩類用戶分別提供了不同的功能模塊。

（1）教師

①備課功能。目前，教師通常使用PPT、Word、PDF或短視頻作為輔助教學的課件。充分考慮教師的教學習慣，平臺在備課功能界面上提供了可利用已有的教學課件、可上傳新教學課件的功能。

②課件分發功能。由于教師習慣性地使用課件來輔助教學，因此平臺為教師提供了課件分發功能，用于分發備課階段所上傳的課件。教師所用的課件主要分為兩種類型：一種是PPT、Word、PDF等格式的文檔類型課件，另一種是短視頻音頻類型的多媒體課件。當課程開始后，平臺服務器根據教師和學生的操作，將相關課件發送至教師和學生的客戶端上。

③演示和教學功能。平臺為教師提供了演示教學課件的功能，具體可分為演示文檔類課件和演示多媒體課件兩種類型。例如，當教師選擇演示幻燈片時，可以通過滑動智能設備屏幕向學生展示幻燈片；當教師選擇演示視頻課件時，可以通過點擊、拖拽進度條來調整視頻順序播放及回放的進度。此外，教師客戶端還提供了基本的工具，方便教師直接在課件文檔進行注釋，以幫助學生在課后進行復習。該功能用于支持教師與學生之間的交互。

④攝像頭及麥克風控制功能。平臺提供給教師啟動學生客戶端攝像頭的功能，使學生端的視頻圖像可回傳給教師。同時，教師還可以向學生端開啟本地攝像頭，用來演示相關實驗操作過程。此外，教師客戶端還能夠自動顯示從學生客戶端收集的問題，便于教師了解學生在課程學習中遇到的問題并作出及時合理的解決。該功能同樣用于支持教師與學生之間的交互。

⑤控制權限指派功能。在教學的過程中，教師可以將平臺的控制權限轉交給學生，以便學生以“小教師”的角色演示課件。教師利用控制權限指派功能，可以充分實現學生—學生交互；學生利用該功能，則可以就學習過程中的具體問題進行深入思考和交流，并提出自己的觀點，以加深學生對具體知識內容的理解。

（2）學生

平臺為學生提供了兩種使用模式：主動模式和被動模式，學生可以根據需要自動切換這兩種模式。當學生選擇被動模式時，可以在客戶端不進行任何操作，其客戶端屏幕顯示的內容與主客戶端保持同步。例如，當教師客戶端播放某個視頻課件時，學生客戶端的播放進度與教師客戶端就會保持一致，教師在其客戶端對課件的標注也會自動地在學生客戶端進行顯示。因此，被動模式用于支持學生與教師之間的交互。當學生選擇主動學習模式時，學生可以根據自己的需要查閱相關的課件。因此，主動模式用于實現學生與教學資源之間的交互。

3 平臺功能設計

目前，移動智能設備上所運行的操作系統主要是Android、iOS和Windows Mobile。開發移動應用程序同時支持多種操作系統，就需要使用多個程序設計語言開發多個操作系統版本的應用程序，因此增加了應用開發成本和程序維護成本。為解決這一問題，本研究設計了基于HTML5的交互式移動學習平臺的整體架構，如圖1所示。

圖1 基于HTML5的交互式移動學習平臺的整體架構

（1）客戶端功能模塊

①交互界面。該模塊的目的在于銜接平臺及其用戶，并通過提供良好的操作界面，一方面實現教師、學生、教學資源三者之間的交互，并確保客戶端屏幕顯示合適的內容；另一方面處理由系統用戶或同步模塊傳來的處理指令。

②同步模塊。該模塊用于實現各客戶端與服務器中教學課件狀態信息保持同步的功能，其狀態信息結構如表1所示。如果客戶端類型為主客戶端，就向服務器發送狀態信息，使其它客戶端與它保持同步。同時，從客戶端接收主客戶端發來的狀態信息通過與自身的狀態信息進行比較，相應的功能模塊根據狀態信息的異同，自動保持客戶端與主客戶端之間狀態信息的同步。

表1 教學課件狀態信息結構

③顯示模塊。HTML5標準的發展，使得瀏覽器對多媒體文件的播放效果良好，并為用戶提供了流暢的使用操作體驗。基于此，該模塊采用最新的HTML5標準進行開發，通過調用客戶端的移動瀏覽器，顯示交互式移動學習平臺的操作界面并播放多媒體課件。

④操作模塊。該模塊在課前支持教師通過客戶端上傳課件，在教學過程中則支持教師選擇、標注使用課件以及通過攝像頭進行教師—學生互動式教學等。此外，該模塊還為實現移動學習平臺向學生提供主動學習和被動學習兩種使用模式提供了支持。

⑤存儲模塊。該模塊用于存儲兩方面的內容：從服務器下載的課件和同步模塊所使用的本地客戶端狀態信息。利用HTML5技術，該模塊為客戶端提供了對離線存儲學習的支持——學生在學習過程中如果突然斷網，平臺可以記錄各個客戶端當時的學習進度，待網絡重新連接后自動與服務器進行同步，同時通過平臺提供的離線存儲功能對課件資源進行緩存，便于學生離線使用；如果發生網絡重新連接的情況，客戶端的瀏覽器僅需從服務器下載更新后的數據。因此，該模塊提高了客戶端的加載速度，進而提高了學生的學習效率。

⑥環境適配模塊。客戶端根據自身的環境條件，開展本地環境適配模塊與服務器環境適配模塊的協同工作，以便獲取適合的服務；客戶端環境適配模塊則收集網絡帶寬、內存容量、屏幕尺寸和分辨率等環境參數，并將這些參數發送至服務器。

⑦數據交換模塊。該模塊用來建立、保持本地客戶端與服務器之間的數據連接。

（2）服務器功能模塊

根據圖1，服務器架構包括數據交換、環境適配、同步等功能模塊，具體如表2所示。

表2 服務器功能模塊列表

三平臺應用及關鍵技術的實現

1 狀態記錄同步實現流程

以天津醫科大學為例，在基于HTML5的交互式移動學習平臺中，假定所有的教學課件都已經通過教師客戶端上傳至服務器，當課程開始后，所有的客戶端（包括教師端和學生端）連接至服務器，并在客戶端屏幕顯示所有教學課件的列表，如圖2所示。

圖2 天津醫科大學交互式移動學習平臺系統界面

當教師選擇一個文檔類型課件后，學生客戶端與教師的操作保持同步的工作流程，其狀態記錄同步實現流程如圖3所示。圖中虛線包含的區域，是實現學生客戶端與教師客戶端保持同步的主要過程。

具體來說，首先，教師通過操作模塊選定某個文檔類型課件，根據表1所示的教學課件狀態信息結構，系統同步模塊修改狀態記錄，即（Document_ID=0，Page_Number=0）變為（Document_ID=1，Page_Number=1）。隨后，教師客戶端數據交換模塊向服務器發送通知，告知服務器該文檔課件對應的狀態記錄發生了變化。接收該通知后，服務器的數據交換模塊將該文檔課件對應的狀態記錄進行修改，即（Document_ID=0，Page_Number=0）變為（Document_ID=1，Page_Number=1），使之與教師客戶端保持一致。

學生客戶端定期向服務器發送請求，用來比較本地文檔課件對應的狀態記錄與服務器的狀態記錄是否一致。當發現狀態記錄不一致時，學生客戶端調用相應的處理辦法，以與服務器保持一致。服務器文檔課件對應的狀態記錄改變后，當學生客戶端的同步模塊發現本地文檔課件對應的狀態記錄與服務器不一致時，學生客戶端的存儲模塊首先檢查Document_ID=1所對應的文檔課件是否已經保存在本地客戶端——如果已經保存，顯示模塊在屏幕顯示文檔首頁，并將該文檔課件的狀態記錄進行相應修改，即（Document_ID=1，Page_Number=1）；如果尚未保存在本地客戶端，則學生客戶端向服務器發送獲取Document_ID=1所對應文檔類型課件的請求，獲取該文檔并顯示，同時修改狀態記錄，以與服務器保持一致。

圖3 狀態記錄同步實現流程

2 視頻課件播放的實現方法

視頻資源的觀看、下載及分享是學生使用在線教育平臺的基本需求，這得益于視頻技術能夠真實、全面、動態地向學生傳達教學內容的優勢。特別是隨著網絡微視頻的廣泛應用以及移動終端便攜攝錄技術的提高，視頻從錄制到傳播的時空局限得以突破[7]。

視頻類型課件的播放主要通過使用HTML5所提供的

四結語

本文提出的交互式移動學習平臺采用最新的HTML5技術進行開發，具備低部署成本、跨平臺、高交互性的特點。文章首先分析了移動學習的特征以及當前移動學習存在的問題，然后探討了移動環境下交互式學習環境設計的依據和方法，最后根據分析設計了基于HTML5的交互式移動學習平臺，并對平臺中的關鍵技術實現進行了詳細說明。伴隨著校園無線網絡的建設和4G LTE覆蓋范圍的擴大，基于HTML5的交互式移動學習平臺將具有廣闊的應用前景。

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

[2]劉清堂,向丹丹.面向3G手機的移動學習資源交互設計與實現[J].中國電化教育,2011,(11):72-75.

[3]喬瓊.美國高校遠程教育辦學特色與經驗探究[J].中國遠程教育,2009,(10):73-78.

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

[5]李翠萍.《計算機網絡》課程移動學習網站的設計與開發[D].武漢:華中師范大學,2015:23.

[6]劉萃.基于智能手機的交互式學習環境設計研究[D].無錫:江南大學,2015:26.

[7]陳明選,劉萃.基于智能手機的交互式學習環境設計[J].中國電化教育,2015,(4):68-73.

編輯：小米

Construction of Interactive Mobile Learning Platform based on HTML5

ZHAO Xue-Min1WANG Gang2[Corresponding Author]

With the development of mobile technology, mobile learning has been widely used in the field of E-learning. The interactive mobile learning platform developed by using HTML5 technology can fit a variety of operating system, which provided favourable experience for users in different types of intelligent devices, and saved development and maintenance costs. Also, according to actual conditions, the platform provided different kinds of functional modules for teachers and students, which ensured adequate communication and exchange between teachers and students during teaching process. The use of this platform transformed the traditional passive teaching mode, and constructed interactive learning environment among students, teachers and teaching resources.

mobile technology; mobile learning; HTML5; smart device; interactive learning

G40-057

A

1009—8097（2016）09—0106—07

10.3969/j.issn.1009-8097.2016.09.016

本文受天津市哲學社會科學規劃一般項目“基于用戶體驗數字化移動教育資源共享平臺的研究”（項目編號：TJJX15-031）資助。

趙學銘，助理研究員，博士，研究方向為教育信息化，郵箱為Prentice2000@163.com。

2016年3月10日