基于HTML5的移動學(xué)習(xí)平臺探究

陳保

摘要：文章構(gòu)建了交互式移動學(xué)習(xí)平臺的基本框架，并對其模塊進(jìn)行功能分析與設(shè)計。未來基于HTML5的交互式移動學(xué)習(xí)平臺將得到廣泛應(yīng)用。

關(guān)鍵詞：HTML5；移動學(xué)習(xí)平臺；交互式

1交互式移動學(xué)習(xí)平臺環(huán)境分析設(shè)計

交互式移動學(xué)習(xí)平臺要求學(xué)習(xí)者能夠與學(xué)習(xí)平臺、移動設(shè)備、其他學(xué)習(xí)者以及知識內(nèi)容進(jìn)行信息交流。因此，開展交互式移動學(xué)習(xí)平臺設(shè)計之前需要設(shè)計好交互式學(xué)習(xí)環(huán)境。

1.1設(shè)計原則

交互式移動學(xué)習(xí)平臺是建立在智能手機(jī)的特點以及移動學(xué)習(xí)者需求上的，對此其學(xué)習(xí)環(huán)境的社交需要遵循3個原則。

1.1友好的界面和清晰的導(dǎo)航設(shè)計原則

要提高學(xué)習(xí)者的使用體驗，首先就應(yīng)該做好界面和導(dǎo)航的設(shè)計，其必須符合用戶平時使用智能手機(jī)和相互應(yīng)用平臺的習(xí)慣，即確保平臺的易操作性和界面的友好性。此外，為了學(xué)習(xí)者能有效了解平臺的架構(gòu)，快速跳轉(zhuǎn)到常見的界面，還應(yīng)該保證導(dǎo)航的清晰明確，方便好用，這有利用提高學(xué)習(xí)者的效率。

1.1.2知識內(nèi)容應(yīng)遵循適用性原則

學(xué)習(xí)平臺當(dāng)中的知識應(yīng)該要便于學(xué)習(xí)者學(xué)習(xí)，激發(fā)其學(xué)習(xí)興趣，提高學(xué)習(xí)者的學(xué)習(xí)效率。因此，內(nèi)容設(shè)計要條理清晰，簡潔直觀。

1.1.3用戶操作的便捷性原則

由于是在移動設(shè)備當(dāng)中，因此移動學(xué)習(xí)平臺的內(nèi)容應(yīng)該以展示為主，避免用戶大量輸入操作。此外，為了讓學(xué)習(xí)者清晰掌握學(xué)習(xí)過程，明確下一步的學(xué)習(xí)操作，應(yīng)該為學(xué)習(xí)者提供操作上的響應(yīng)與反饋，把相應(yīng)的處理結(jié)果與提示展示給學(xué)習(xí)者。

1.2交互方式的設(shè)計

在交互式學(xué)習(xí)環(huán)境下，學(xué)生學(xué)習(xí)知識的過程是主動學(xué)習(xí)，并與其他人進(jìn)行交流和共享，對此，在設(shè)計交互方式時，應(yīng)該引導(dǎo)學(xué)生對所學(xué)知識的不斷創(chuàng)新，創(chuàng)造一個良好的交流互動環(huán)境。確保教師、學(xué)生與教學(xué)資源之間的相互融合與促進(jìn)，構(gòu)建和諧的學(xué)習(xí)環(huán)境。交互方式設(shè)計中應(yīng)該注意學(xué)生與教師的交互，學(xué)生與教學(xué)資源的交互，以及學(xué)生之間的交互。

1.3課程資源的設(shè)計

交互式的學(xué)習(xí)資源與普通的學(xué)習(xí)資源在建設(shè)上有很大區(qū)別，交互式的移動學(xué)習(xí)平臺應(yīng)該以問題為導(dǎo)向，通過對知識的模塊化處理，確定好教學(xué)目標(biāo)，結(jié)構(gòu)化組合課程學(xué)習(xí)資源，精簡提煉教學(xué)內(nèi)容。從而構(gòu)建出與學(xué)習(xí)目標(biāo)、學(xué)習(xí)環(huán)境和教學(xué)活動有關(guān)聯(lián)意義的交互學(xué)習(xí)內(nèi)容，從而形成一個良好的具有突出主體的結(jié)構(gòu)化學(xué)習(xí)資源環(huán)境。

2基于HTML5的交互式移動學(xué)習(xí)平臺的功能分析

HTML5即是第五代超文本語言，利用HTML5開發(fā)移動學(xué)習(xí)平臺具有很大優(yōu)勢，其能適應(yīng)不同操作系統(tǒng)的不同移動智能設(shè)備，避免因用戶操作系統(tǒng)的問題而出現(xiàn)移動學(xué)習(xí)平臺兼容性的問題。無論是Windows Phone，iOS還是安卓系統(tǒng)，基于HTML5開發(fā)出來的移動學(xué)習(xí)平臺的體驗感和適配性都很好，且不占用用戶移動設(shè)備的儲存空間，并且平臺的開發(fā)成本低，工作量也相對較小。移動學(xué)習(xí)平臺的使用用戶為教師和學(xué)生，二者在使用目的和功能方面都不相同，因此有必要區(qū)分對象對其所需的功能進(jìn)行分析。

2.1面向教師的功能分析

2.1.1備課功能

備課功能是教師采用移動學(xué)習(xí)平臺所需要的基本功能，通常教師在授課時會使用PPT，PDF，Word以及一些短視頻資源來作為輔助教學(xué)資源，對此，平臺應(yīng)該提供上傳、刪除、移動等管理教學(xué)課件資源的功能，讓教師能夠隨時了解己有的教學(xué)資源。

2.1.2課件分發(fā)功能

教學(xué)平臺還應(yīng)該具有收發(fā)文件的功能，特別是分發(fā)課件的功能，這樣便于教學(xué)在授課過程中，根據(jù)需要隨時向?qū)W生客戶端傳送相關(guān)教學(xué)文件。

2.1.3教學(xué)與演示功能

移動學(xué)習(xí)平臺應(yīng)該能夠具有演示教學(xué)的功能，包括演示多媒體課件和演示文件課件的兩種類型。教師能通過界面拖動文件來控制文件的播放順序和播放進(jìn)度等。此外，還應(yīng)該提供一些課件標(biāo)注等功能，這樣可以有利于教師與學(xué)生之間的互動，幫助學(xué)生進(jìn)行課后復(fù)習(xí)。

2.1.4麥克風(fēng)和攝像頭控制功能

交互式的移動學(xué)習(xí)平臺的一個重要功能就是提供學(xué)生之間、學(xué)生與教師的互動，因此，無論是學(xué)生端還是教師端都應(yīng)該配有麥克風(fēng)和攝像頭的功能，為了教師授課方便，教師應(yīng)該能夠控制這些功能。如可以主動向?qū)W生端開啟本地攝像頭展示操作過程，還可以通過學(xué)生端的攝像頭查看學(xué)生學(xué)習(xí)情況等。

2.1.5控制權(quán)限指派功能

教師在教學(xué)過程中除了具有控制權(quán)限外，還可以將控制權(quán)臨時轉(zhuǎn)給學(xué)生，這樣學(xué)生可以向其他同學(xué)展示學(xué)習(xí)成果等，此外，教師可以通過該功能實現(xiàn)學(xué)生之間的交互等。

2.2面向?qū)W生的功能分析

學(xué)生利用交互式移動教學(xué)平臺學(xué)習(xí)的模式包括主動和被動兩種模式，學(xué)生可以靈活地進(jìn)行切換。在被動學(xué)習(xí)模式下，學(xué)生的客戶端內(nèi)容與主客戶端保持一致，通常被動模式用于教師與學(xué)生之間的交互學(xué)習(xí)。而主動學(xué)習(xí)模式則用于學(xué)生自主查閱相關(guān)課程資源，主要用于學(xué)生與教學(xué)資源的交互。

3基于HTML5的交互式移動學(xué)習(xí)平臺的功能設(shè)計

3.1基于HTML5交互式移動學(xué)習(xí)平臺整體框架結(jié)構(gòu)設(shè)計基于HTML5的交互式移動學(xué)習(xí)平臺的框架包括服務(wù)器和客戶端兩個部分，具體的框架如圖1所示。

3.2服務(wù)器功能模塊設(shè)計

交互式移動學(xué)習(xí)平臺的服務(wù)器功能模塊可以包括環(huán)境適配、數(shù)據(jù)交換、課件管理、圖像視頻反饋模塊、存儲以及同步模塊共6個模塊。數(shù)據(jù)交換模塊是實現(xiàn)客戶端與服務(wù)器之間的通信模塊；環(huán)境適配模塊用于收集客戶端環(huán)境適配模塊發(fā)出的信息，了解客戶端系統(tǒng)運行環(huán)境狀況，并為客戶端提供相關(guān)的服務(wù)；同步模塊用于保存并比較主客戶的狀態(tài)記錄信息，確保主客戶端與服務(wù)器的狀態(tài)記錄情況保持一致；課件管理模塊用于課件的上傳、壓縮、獲取、儲存等；圖像視頻反饋模塊主要用于接收視頻與圖像，同時控制客戶端的麥克風(fēng)和攝像頭；存儲模塊則用于儲存教師上傳的教學(xué)資源。

3.3客戶端功能模塊設(shè)計

客戶端功能模塊包括交互界面的設(shè)計、同步模塊、顯示模塊、操作模塊、存儲模塊、環(huán)境適配模塊和數(shù)據(jù)交換模塊。其中數(shù)據(jù)交換模塊需要與服務(wù)器數(shù)據(jù)交換模塊協(xié)調(diào)工作；環(huán)境適配模塊可以根據(jù)用戶設(shè)備配置情況來確定參數(shù)，以確保本地設(shè)備與服務(wù)器之間的適應(yīng)配置；同步模塊可以有效確保服務(wù)器與客戶端狀態(tài)信息的同步；存儲模塊則用于下載服務(wù)器中的課件，并同步客戶端狀態(tài)信息。基于HTML5的存儲模塊設(shè)計可以提高客戶端對信息的加載速度，支持學(xué)生離線儲存學(xué)習(xí)，當(dāng)再次聯(lián)網(wǎng)后即可完成與服務(wù)器的同步。因此，基于HTML5的移動學(xué)習(xí)平臺設(shè)計可以大大提高學(xué)生的學(xué)習(xí)效率；顯示模塊采用的是HTML5標(biāo)準(zhǔn)編譯，可以根據(jù)客戶端的瀏覽器狀態(tài)適應(yīng)顯示移動學(xué)習(xí)平臺的操作界面，并確保課件良好的播放效果；交互界面主要是有效連接教師、資源與學(xué)生，確保學(xué)生之間、學(xué)生與資源以及學(xué)生教師的交互。

4結(jié)語

基于HTML5的交互式移動學(xué)習(xí)平臺的開發(fā)成本低、難度小，且終端適配性能高，對移動終端的要求相對較低，學(xué)習(xí)平臺的內(nèi)容展示形式多樣，交互性強(qiáng)，是當(dāng)前移動應(yīng)用開發(fā)的重要發(fā)展趨勢。隨著移動互聯(lián)網(wǎng)的快速發(fā)展，校園無線網(wǎng)絡(luò)的快速建設(shè)，微信小程序的深度應(yīng)用，未來基于HTML5的交互式移動學(xué)習(xí)平臺將得到廣泛的應(yīng)用。

[參考文獻(xiàn)]

[1]葉成林，徐福蔭，許駿.移動學(xué)習(xí)研究綜述[J].電化教育研究，2004（3）：12-19.

[2]趙愛美.基于HTML5和.NET的移動學(xué)習(xí)平臺研究與實現(xiàn)[J].河南科技學(xué)院學(xué)報（自然科學(xué)版），2013（4）：62-66.

[3]謝淑麗，徐鎮(zhèn)輝.基于HTML5跨平臺微課視頻系統(tǒng)的設(shè)計與實現(xiàn)[J].陜西理工學(xué)院學(xué)報（自然科學(xué)版），2016（5）：63-68.

[4]陳明選，劉萃.基于智能手機(jī)的交互式學(xué)習(xí)環(huán)境設(shè)計[J].中國電化教育，2015（4）：68-73.endprint