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

　　關(guān)鍵詞： Android；移動學(xué)習(xí)；HTML5

0 引言

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

1 相關(guān)工作

　　1.1 移動學(xué)習(xí)現(xiàn)狀分析

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

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

　　1.2 移動學(xué)習(xí)資源的種類分析

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

2 移動學(xué)習(xí)資源的開發(fā)

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

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

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

　　2.2 傳統(tǒng)學(xué)習(xí)資源的缺點

　　對一個學(xué)習(xí)知識點的講解，僅通過文字講解比較難以理解，傳統(tǒng)的動畫型學(xué)習(xí)資源大多基于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播放器的設(shè)備也能夠享受Flash視頻內(nèi)容。雖然Google發(fā)布的Swiffy插件也可以將SWF轉(zhuǎn)換為HTML，但是Swiffy存在一定的局限性，例如不支持音頻流，不支持位圖緩存等。

　　2.3 關(guān)鍵技術(shù)分析

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

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

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

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

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

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

　　}

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

　　該類型資源在技術(shù)實現(xiàn)上應(yīng)著重于交互以及移動平臺對用戶操作的判斷處理。目前交互技術(shù)既能使用Javascript也可以借助Flash來實現(xiàn)。但是傳統(tǒng)的Flash實現(xiàn)對移動端兼容性不好，Javascript是用來向Html頁面中添加交互行為的，比如響應(yīng)用戶的各種操作，它是一種動態(tài)的、基于對象和事件驅(qū)動的、相對安全的語言[5]。本文交互型網(wǎng)頁也將基于Html5+jQuery技術(shù)來實現(xiàn)。關(guā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 移動學(xué)習(xí)平臺測試

　　3.1演示型素材

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

　　3.2 交互型素材

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

　　3.3 視頻型素材

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

4 結(jié)論

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

參考文獻

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

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

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

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

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

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