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

趙學銘 王 剛

?

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

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

（1．天津醫(yī)科大學科學技術(shù)處，天津 300070；2．天津醫(yī)科大學圖書館，天津 300070）

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

移動技術(shù)；移動學習；HTML5；智能設備；交互式學習

引言

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

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

一交互式學習環(huán)境的設計

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

1 交互式學習環(huán)境的設計原則

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

2 交互式學習環(huán)境的課程資源設計

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

3 交互式學習環(huán)境的交互方式設計

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

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

1 HTML5開發(fā)移動應用的優(yōu)勢

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

2 平臺功能分析

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

（1）教師

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

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

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

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

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

（2）學生

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

3 平臺功能設計

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

圖1 基于HTML5的交互式移動學習平臺的整體架構(gòu)

（1）客戶端功能模塊

①交互界面。該模塊的目的在于銜接平臺及其用戶，并通過提供良好的操作界面，一方面實現(xiàn)教師、學生、教學資源三者之間的交互，并確?？蛻舳似聊伙@示合適的內(nèi)容；另一方面處理由系統(tǒng)用戶或同步模塊傳來的處理指令。

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

表1 教學課件狀態(tài)信息結(jié)構(gòu)

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

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

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

⑥環(huán)境適配模塊。客戶端根據(jù)自身的環(huán)境條件，開展本地環(huán)境適配模塊與服務器環(huán)境適配模塊的協(xié)同工作，以便獲取適合的服務；客戶端環(huán)境適配模塊則收集網(wǎng)絡帶寬、內(nèi)存容量、屏幕尺寸和分辨率等環(huán)境參數(shù)，并將這些參數(shù)發(fā)送至服務器。

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

（2）服務器功能模塊

根據(jù)圖1，服務器架構(gòu)包括數(shù)據(jù)交換、環(huán)境適配、同步等功能模塊，具體如表2所示。

表2 服務器功能模塊列表

三平臺應用及關(guān)鍵技術(shù)的實現(xiàn)

1 狀態(tài)記錄同步實現(xiàn)流程

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

圖2 天津醫(yī)科大學交互式移動學習平臺系統(tǒng)界面

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

具體來說，首先，教師通過操作模塊選定某個文檔類型課件，根據(jù)表1所示的教學課件狀態(tài)信息結(jié)構(gòu)，系統(tǒng)同步模塊修改狀態(tài)記錄，即（Document_ID=0，Page_Number=0）變?yōu)椋―ocument_ID=1，Page_Number=1）。隨后，教師客戶端數(shù)據(jù)交換模塊向服務器發(fā)送通知，告知服務器該文檔課件對應的狀態(tài)記錄發(fā)生了變化。接收該通知后，服務器的數(shù)據(jù)交換模塊將該文檔課件對應的狀態(tài)記錄進行修改，即（Document_ID=0，Page_Number=0）變?yōu)椋―ocument_ID=1，Page_Number=1），使之與教師客戶端保持一致。

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

圖3 狀態(tài)記錄同步實現(xiàn)流程

2 視頻課件播放的實現(xiàn)方法

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

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

四結(jié)語

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

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

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

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

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

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

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

[7]陳明選,劉萃.基于智能手機的交互式學習環(huán)境設計[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

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

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

2016年3月10日