摘  要： 移動學習是指利用無線移動通信網(wǎng)絡技術，以無線移動通信設備隨時隨地獲取學習信息,、學習資源和學習服務的一種學習方式,。隨著研究的深入，現(xiàn)存的移動學習資源兼容性差,、交互性差等缺陷也顯現(xiàn)出來,。針對這些問題，本文基于HTML5,、jQuery框架等技術,，設計出適合Android、iOS操作系統(tǒng)的移動學習資源,。該類資源可廣泛應用于手機,、平板電腦以及其他移動終端，并為今后移動學習的研究提供有價值的參考,。

　　關鍵詞： Android,；移動學習；HTML5

0 引言

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

1 相關工作

　　1.1 移動學習現(xiàn)狀分析

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

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

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

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

2 移動學習資源的開發(fā)

　　2.1 平臺的體系結(jié)構(gòu)

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

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

　　2.2 傳統(tǒng)學習資源的缺點

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

　　2.3 關鍵技術分析

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

　　但是HTML5只是一個語義化的標簽語言,，實現(xiàn)編程還要靠Javascript,，現(xiàn)行的開發(fā)框架多種多樣，但是根據(jù)CSDN和HTML5中國產(chǎn)業(yè)聯(lián)盟發(fā)起的調(diào)查[4],，超過半數(shù)的HTML5開發(fā)者認為最好的HTML5前端開發(fā)框架是jQuery,，如圖2所示。

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

　　2.4 基于移動平臺學習資源改進優(yōu)化

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

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

　　$（“#background2”）.hide（）,；

　　$（“#book”）.animate（{opacity：′1′},，1000）.delay（2400）.animate（{opacity：′1′}，1000）；

　　$（“#background”）.animate（{opacity：′1′},，1000）.delay（2400）.animate（{opacity：′1′},，1000）；

　　$（“#blue1”）.delay（1000）.animate（{top：′190px′,，opacity：′1′）.delay（2000）.animate（{top：′190px′,，opacity：′0′，1000）,；

　　$（“.title”）.delay（5500）.fadeIn（）,；

　　Function play（）

　　{

　　Location.reload（）；//重復播放

　　}

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

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

　　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開發(fā)中,，對于演示型資源，以“IF-ELSE語句流程圖”動態(tài)描述來展示,。該類型的學習資源要有一個統(tǒng)一規(guī)范的格式標準,。標題“if-else”在首頁淡入淡出后，將進入流程圖的動態(tài)描述。每一步動畫的操作流程,，都將顯示其文字描述,。演示結(jié)束后，標題“謝謝觀看”將以結(jié)束語的方式淡入,。此時用戶還可以點擊右下角的“Restart”圖標,，對動畫進行重復演示。相關過程如圖4所示,。

　　3.2 交互型素材

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

　　3.3 視頻型素材

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

4 結(jié)論

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

參考文獻

　　[1] 馬凱.基于Android平臺的移動學習系統(tǒng)的設計與實現(xiàn)[D]．北京：北京化工大學,，2013.

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

　　[3] 郭晶晶．基于J2ME的移動學習系統(tǒng)的研究與實現(xiàn)[D]．武漢：武漢理工大學，2012.

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

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

　　[6] 焦文華．基于Android的移動互聯(lián)網(wǎng)應用的研究和實現(xiàn)[D]．北京：北京郵電大學，2013.