基于移動平臺的學習資源設計與開發

尤丹妹，魏慧琴

（北京交通大學 計算機與信息技術學院，北京 100044）

0 引言

傳統教學和網絡教學（E-Learning）局限于書本、課堂、PC端等媒介，隨著無線網絡的迅速發展，越來越多的用戶選擇通過移動終端來獲取所需的知識。移動學習（M-Learning）就是用戶基于手機、iPad等小型化移動設備，充分利用碎片化時間進行的隨時、隨地、隨設備的新型學習模式。移動學習平臺在給用戶提供多種多樣學習資源的同時，也帶來了更全新的體驗。主要體現在三個方面：（1）在時間安排上更加靈活，可以重復地學習，用戶可以自主地掌握學習進度；（2）學習場所不再局限，無論身處何處，只要有手機或平板等終端設備，就可以隨時隨地學習；（3）方式新穎，基于移動設備的課件可以通過滑屏達到翻頁的效果，對知識點的講解不僅限于文字性描述，更多的通過動畫或者視頻來展示。新的學習方式、新的學習工具往往能帶給用戶更強的新鮮感，從而促進學習，增強學習效果[1]。

1 相關工作

1.1 移動學習現狀分析

美國新媒體聯盟（NMC）發布的《地平線報告》指出，未來一年甚至更短時間內，移動應用程序和平板電腦在教育中的應用將成為主流[2]。國內外移動學習研究經歷了可行性分析、資源整合及終端軟件的研發和推廣應用三個階段，并取得了一定的研究成果[3]。達芬奇計劃項目從制作適用于智能手機、iPad和移動學習的一系列課程開始，并將這些融入到學校支持服務體系中，為學生營造舒適的學習環境；南京大學和日本松下通信公司合作的CALUMET項目，通過移動通信的無線接入實施網絡多媒體教學功能。

目前移動端的操作系統比較常見的是Android、Apple iOS、Symbian等。這些操作系統給應用程序提供了多樣性的開發平臺和運行環境，同時這些多樣性也為移動設備學習資源的開發帶來了困難。

1.2 移動學習資源的種類分析

多種多樣的學習資源是優質教學的基礎。在移動學習資源的開發過程中，應提供多樣化的學習資源而不僅限于文字內容，并充分考慮各種終端的不同，設計出友好的、滿足相應設備的資源形式。主流的學習資源主要有動畫、網頁和音視頻等，其優缺點如表1所示。

表1 學習資源現狀

2 移動學習資源的開發

2.1 平臺的體系結構

本文依托愛課程網《大學計算機基礎》網頁版，設計基于Android平臺的移動學習軟件。該軟件主要歸類為基礎篇、應用篇和實訓篇。對于教師，可以進行學習指導、授課教案、素材資源、習題解析等內容的管理。對于學生，除了可以瀏覽教師發布的內容，還可以選擇與教師的互動，如在線答疑和疑難解答等。對于系統管理員，可以對課程進行內容更新和課程上線等管理。該平臺的功能用例圖如圖1所示。

圖1 功能用例圖

本文主要針對素材資源模塊，根據不同的學習資源，將傳統的Flash動畫素材設計為友好兼容Android移動設備的演示型學習資源、交互型學習資源。

2.2 傳統學習資源的缺點

對一個學習知識點的講解，僅通過文字講解比較難以理解，傳統的動畫型學習資源大多基于Flash實現，用Flash動畫的形式形象地展現出來。隨著Andriod、iOS操作系統手機的大量涌現，越來越多的Flash視頻資源與手機操作系統都存在兼容性問題。封閉的Flash必須要Flash播放器或容器才能播放，如果手機、iPad等移動終端不裝瀏覽器插件，Flash視頻資源可能會存在無法播放的問題。日前，Google發布的一套基于網頁的工具Swiffy，能夠將.SWF格式的 Flash文件轉化為 HTML5，讓沒有Flash播放器的設備也能夠享受Flash視頻內容。雖然Google發布的Swiffy插件也可以將SWF轉換為HTML，但是Swiffy存在一定的局限性，例如不支持音頻流，不支持位圖緩存等。

2.3 關鍵技術分析

HTML5在平臺上具有明顯優勢，Andriod、iOS支持幾乎所有的HTML5 API和CSS3屬性，大多數移動瀏覽器都是基于HTML5支持良好的webkit內核。HTML5文檔在Android手機、平板和現代瀏覽器上的顯示效果是一樣的。采用HTML5技術，文件體積將減小40%，文檔加載速度提升30%。

但是HTML5只是一個語義化的標簽語言，實現編程還要靠Javascript，現行的開發框架多種多樣，但是根據CSDN和HTML5中國產業聯盟發起的調查[4]，超過半數的HTML5開發者認為最好的HTML5前端開發框架是 jQuery，如圖2所示。

圖2 前端開發框架調查

根據傳統資源的缺陷和先進的移動開發技術，本文在素材資源這一模塊，設計演示型資源和交互型資源時將采用HTML5+jQuery技術。

2.4 基于移動平臺學習資源改進優化

演示型學習資源在技術實現上應將重點放在資源形象化的展示上。它并不注重與學習者的雙向交互，但是需要通過生動形象的動畫演示，來加強學習者對知識點的理解和掌握。

傳統基于Flash的演示型資源主要靠幀來完成頁面的切換和動畫效果。本文基于Html5+jQuery技術，用hide（）來隱藏某個元素，用 show（）顯示匹配元素，用fadeIn（）和fadeOut（）來實現匹配元素的淡入淡出。在動畫效果上，主要關注兩個控制：一是時間間隔的控制，這里將使用時延函數 delay（）；二是元素位置的控制，這里通過animate（）方法用 top和left參數來定義元素的坐標可以很好地解決此問題。在實際開發中重復多次使用fadeIn（）和 fadeOut（）函數，使過程變得繁瑣，代碼冗余。本文在連貫性動畫處理上，采用opacity控制元素的透明度，隨著animate的動畫效果改變透明度，從而實現淡入淡出，關鍵實現代碼如下所示：

交互型資源不僅要有演示型資源的動畫效果，還需要與學習者在內容上產生一定的交互。如圖3所示，它不再是一個被動的學習工具，移動學習平臺可通過判斷使用者的點擊或者輸入，來反饋相應的信息。

圖3 交互型思維導向

該類型資源在技術實現上應著重于交互以及移動平臺對用戶操作的判斷處理。目前交互技術既能使用Javascript也可以借助Flash來實現。但是傳統的Flash實現對移動端兼容性不好，Javascript是用來向 Html頁面中添加交互行為的，比如響應用戶的各種操作，它是一種動態的、基于對象和事件驅動的、相對安全的語言[5]。本文交互型網頁也將基于Html5+jQuery技術來實現。關鍵代碼如下：

function CheckAnswer（）

{

document.getElementById（“JudgeTwo”）.innerHTML=”；

document.getElementById（“JudgeEight”）.innerHTML”；

document.getElementById（“JudgeSixteen”）.innerHTM；

var checkPlag=true；

var value13=document.getElementById（“two”）.value；

var value23=document.getElementById（“eight”）.value；

var value33=document.getElementById（“sixteen”）.value；

if（value13==“”&& value23==””&&value33==””）

{

document.getElementById（“JudgeTeo”）.innerHTML=”請輸入正確答案！”；

}

}

3 移動學習平臺測試

3.1 演示型素材

在本文設計的移動學習資源HTML5開發中，對于演示型資源，以“IF-ELSE語句流程圖”動態描述來展示。該類型的學習資源要有一個統一規范的格式標準。標題“if-else”在首頁淡入淡出后，將進入流程圖的動態描述。每一步動畫的操作流程，都將顯示其文字描述。演示結束后，標題“謝謝觀看”將以結束語的方式淡入。此時用戶還可以點擊右下角的“Restart”圖標，對動畫進行重復演示。相關過程如圖4所示。

圖4 軟件中演示型資源示例

3.2 交互型素材

在本文設計的移動學習資源HTML5開發中，對于交互型資源，以“非十進制之間的轉換練習”來展示。學習者可以根據題目要求輸入自己的答案，點擊提交，移動學習軟件會根據用戶輸入的內容進行判斷，顯示答案正確還是錯誤。學習者也可點擊“重做”按鈕進行重新提交，或者點擊“答案”按鈕，將顯示答案的解析。答案解析將以生動形象的動畫演示展現給用戶。

3.3 視頻型素材

本文中移動學習平臺相關的視頻資源及素材采用Camtasia Studio 6.0制作。可以方便地進行屏幕操作的錄制和配音、視頻的剪輯和過場動畫、添加說明字幕和水印、制作視頻封面和菜單、視頻壓縮和播放。這部分素材就是開發者通過設計教學案例，來進行屏幕操作的錄制和配音、添加備注、視頻的剪輯。

4 結論

針對未來發展迅速的新型計算環境，移動學習隨著技術和教學理論的不斷發展越來越多地受到人們的青睞[6]。本文從資源開發的角度，深入分析現有移動學習平臺資源兼容性、終端屏幕自適應性等問題，并提出了優化改進方案。目前隨著云計算的普及，手機及平板電腦等移動終端將能夠基于性能強勁的瀏覽器直接訪問云端資源。如何將相關技術和理論相結合，開發成本更低、學習效率更高的移動學習資源是下一步的研究重點。

[1]馬凱.基于Android平臺的移動學習系統的設計與實現[D].北京：北京化工大學，2013.

[2]王佑鎂，王娟，楊曉蘭，等.近二十年我國移動學習研究現狀與未來趨勢[J].現代遠程教育研究，2013（1）：1-7.

[3]郭晶晶.基于J2ME的移動學習系統的研究與實現[D].武漢：武漢理工大學，2012.

[4]楊依帆.HTML5開發者心聲：瀏覽器兼容性成最大問題[N].CSDN，2013-05-03（1）.

[5]范志強.移動學習系統設計思考[N].南京大學教育技術中心，2013-10-08（1）.

[6]焦文華.基于Android的移動互聯網應用的研究和實現[D].北京：北京郵電大學，2013.