基于AppCan的移動微課系統(tǒng)設(shè)計與實現(xiàn)

王 莉

(無錫開放大學(xué)機電工程系 江蘇 無錫 214011)

基于AppCan的移動微課系統(tǒng)設(shè)計與實現(xiàn)

王 莉

(無錫開放大學(xué)機電工程系 江蘇 無錫 214011)

通過現(xiàn)狀分析，對移動學(xué)習(xí)資源提出了兩種分類：學(xué)習(xí)積件和學(xué)習(xí)系統(tǒng)，并闡述了它們各自的優(yōu)點和缺點。比較發(fā)現(xiàn)，移動學(xué)習(xí)系統(tǒng)在實踐中發(fā)揮的作用較全面。因此有必要開發(fā)支持課堂內(nèi)外的移動學(xué)習(xí)系統(tǒng)。在用戶體驗?zāi)Ｐ偷幕A(chǔ)上，按教學(xué)設(shè)計、課程內(nèi)容、系統(tǒng)模塊、系統(tǒng)界面、視覺效果五個層次設(shè)計了新的移動學(xué)習(xí)系統(tǒng)結(jié)構(gòu)。在比較各個移動應(yīng)用開發(fā)技術(shù)的特點后，采用AppCan為開發(fā)工具，利用HTML5技術(shù)，以計算機網(wǎng)絡(luò)基礎(chǔ)為案例，開發(fā)了跨平臺的移動微課系統(tǒng)。

移動學(xué)習(xí)資源 移動微課系統(tǒng) AppCan 跨平臺

0 引 言

隨著無線網(wǎng)絡(luò)環(huán)境的改善與上網(wǎng)成本的降低，以及各種移動設(shè)備的日益普及，移動技術(shù)已悄然改變?nèi)藗兊纳罘绞健．?dāng)前高職生多為90后，他們基本人手一個智能手機，有人甚至擁有多個移動工具。平時他們在購物、餐飲、社交、娛樂、閱讀新聞等生活的各個方面都利用智能手機來完成。他們儼然成為地道的移動數(shù)字原住民，甚至在課堂中都不能抵擋智能手機的誘惑。因此充分利用移動學(xué)習(xí)資源為課堂教學(xué)所用，將高職學(xué)生對智能手機的熱情引導(dǎo)到學(xué)習(xí)上來，應(yīng)該成為提高高職生課堂學(xué)習(xí)效果的有效途徑。

1 移動學(xué)習(xí)資源應(yīng)用分析

在移動學(xué)習(xí)中，以功能不同可以劃分為學(xué)習(xí)資源、軟件平臺與移動設(shè)備三個組成部分。其中軟件平臺運行在移動設(shè)備上，是學(xué)習(xí)資源依附的軀殼。而學(xué)習(xí)資源才是學(xué)習(xí)者最關(guān)注的中心。

當(dāng)前移動學(xué)習(xí)資源從規(guī)模大小上可分為兩類:學(xué)習(xí)積件和學(xué)習(xí)系統(tǒng)。(1) 學(xué)習(xí)積件。根據(jù)微型學(xué)習(xí)理論強調(diào)的“在有限時間內(nèi)學(xué)習(xí)相短小、松散連接、自包含的知識內(nèi)容模塊”，在這里把學(xué)習(xí)積件定義為時長在10分鐘左右的微教案、微課件、微習(xí)題、微視頻[1]等。學(xué)習(xí)積件可以靈活地搭載各種平臺出現(xiàn)在學(xué)習(xí)者面前，而常見的平臺有QQ、微信、微博等。學(xué)習(xí)積件的優(yōu)勢很明顯，它具有普適性，可以在多種平臺中反復(fù)利用。與之相隨的缺點也很明顯，它不具備學(xué)科知識的系統(tǒng)性與完整性。(2) 學(xué)習(xí)系統(tǒng)。這里的學(xué)習(xí)系統(tǒng)即指運行在移動終端上各種APP。這樣的APP將學(xué)習(xí)內(nèi)容與軟件平臺整合在一起。這些APP與學(xué)習(xí)積件相比，學(xué)習(xí)內(nèi)容相對完整，使用時不需要搭載其他學(xué)習(xí)平臺。目前很多APP非常適合學(xué)習(xí)者自學(xué),卻對課堂教學(xué)的支撐不足[2]，缺少將課堂學(xué)習(xí)與課后學(xué)習(xí)相聯(lián)系的設(shè)計。

根據(jù)以上分析，為了更好地支持課程的課堂與課外教學(xué)活動，有必要開發(fā)一個完整的移動學(xué)習(xí)系統(tǒng)。學(xué)習(xí)系統(tǒng)不僅可以具備學(xué)習(xí)積件優(yōu)點，支持移動背景下各種教學(xué)模式的開展，還可以記錄學(xué)生學(xué)習(xí)過程形成學(xué)習(xí)檔案，更可以存儲師生互動痕跡，進(jìn)而更靈活地支持移動學(xué)習(xí)與教學(xué)。

2 移動微課系統(tǒng)設(shè)計

2.1 設(shè)計理論基礎(chǔ)

在Jesse James Garrett提出的“用戶體驗”模型中要求把信息資源的開發(fā)分為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層[3]。分別明確：(1) 開發(fā)的目標(biāo)及用戶；(2) 功能與內(nèi)容需求；(3) 交互設(shè)計與框架；(4) 界面設(shè)計；(5) 視覺效果。由此本系統(tǒng)設(shè)計劃分為教學(xué)設(shè)計、課程內(nèi)容[4]、模塊設(shè)計、界面設(shè)計、視覺效果設(shè)計五部分。

2.2 內(nèi)容設(shè)計

根據(jù)移動學(xué)習(xí)的特點，系統(tǒng)中每個知識點應(yīng)短小獨立。因此選擇專題性強的知識點作為微課視頻資源，知識點覆蓋全課程，通過一個個小知識點架構(gòu)起整個課程體系。為了強化學(xué)生對重點或難點知識的撐握，對這部分內(nèi)容又以不同的媒體形式呈現(xiàn)知識點。如果課程涉及實驗操作，則利用虛擬實驗，加深學(xué)生對操作過程的印象。同時為了方便檢驗學(xué)習(xí)效果，還設(shè)計了每章的練習(xí)題庫。學(xué)生練習(xí)時同時記錄了學(xué)習(xí)情況。另外為了將學(xué)生的學(xué)習(xí)延伸到課外，需要設(shè)計師生互動或者生生互動的環(huán)節(jié)。

2.3 系統(tǒng)模塊設(shè)計

整個系統(tǒng)分為登錄、微課視頻、重點難點、虛擬實驗、習(xí)題庫、學(xué)習(xí)記錄、學(xué)習(xí)互動等幾個模塊。其結(jié)構(gòu)如圖1所示。系統(tǒng)各個模塊的設(shè)計體現(xiàn)了對課堂教學(xué)的支撐及為課外學(xué)習(xí)延伸服務(wù)的思想。例如，教師可以根據(jù)教學(xué)設(shè)計從微課視頻、重點難點、虛擬實驗、章節(jié)練習(xí)模塊中抽取內(nèi)容組織翻轉(zhuǎn)課堂。教師可以在學(xué)習(xí)互動中根據(jù)學(xué)生的發(fā)言獲知課堂中需重點解析的焦點。再如，教師在實驗課中指導(dǎo)學(xué)生操作，可以借助虛擬實驗讓學(xué)生預(yù)熱操作流程，也可以通過微課視頻提高指導(dǎo)效率。學(xué)生利用本系統(tǒng)可以完成學(xué)習(xí)、檢驗、復(fù)習(xí)的自學(xué)過程。

圖1 系統(tǒng)模塊圖

2.4 界面與視覺效果設(shè)計

由于智能手機的屏幕尺寸有限，因此移動學(xué)習(xí)資源界面設(shè)計強調(diào)去繁化簡，注重突出核心信息[5]。界面的版面設(shè)計要符合學(xué)習(xí)者在平面內(nèi)注意力分布的心理學(xué)規(guī)律，主要的信息可依次分布在左上、左下、右上部[6]，這樣符合學(xué)習(xí)者的視覺與心理習(xí)慣。同時還要均衡色彩、圖標(biāo)、比例等要素，充分利用技術(shù)手段，提高學(xué)習(xí)資源視覺質(zhì)量，開啟學(xué)習(xí)資源新視角[7]。

2.5 開發(fā)技術(shù)的比較與選擇

目前開發(fā)移動學(xué)習(xí)資源的技術(shù)主要有基于SDK方式、基于HTML5、基于Flash Lite[8]。開發(fā)出的APP主有Native APP、Web APP、Hybird APP、Flash Lite四種類型。從用戶體驗角度來看，Native APP、Hybird APP體驗優(yōu)秀，F(xiàn)lash Lite體驗其次，Web APP體驗最次。從跨平臺角度來看，Web APP、Hybird APP、Flash Lite均具有跨平臺的優(yōu)勢，而Native APP最差。而從開發(fā)成本來看，Native APP開發(fā)成最高，Hybird APP、Flash Lite其次，Web APP開發(fā)成本最低。因此綜合以上因素，決定采用HTML5技術(shù)開發(fā)Hybird APP。

3 AppCan實現(xiàn)案例與要點

3.1 開發(fā)案例

現(xiàn)以《計算機網(wǎng)絡(luò)基礎(chǔ)》課程為例具體介紹。運行APP如果用戶為首次使用，將會出現(xiàn)注冊界面，用戶以當(dāng)前手機號注冊即可。以后運行則可以自動登錄。該課程“微課視頻”內(nèi)容主要有網(wǎng)絡(luò)與通信基礎(chǔ)、局域網(wǎng)基本知識、組建局域網(wǎng)、接入因特網(wǎng)、網(wǎng)絡(luò)管理、因特網(wǎng)應(yīng)用等六章內(nèi)容。每章內(nèi)容選取了精簡的專題知識點視頻。視頻格式采用MP4格式，能較好支持HTML5視頻播放[9]。在“重點難點”部分設(shè)置了flash動畫演示知識。在“虛擬實驗”采用交互flash動畫讓用戶操作以此復(fù)習(xí)實驗步驟。“章節(jié)練習(xí)”題型為單選題，當(dāng)用戶做完一題就會當(dāng)即顯示正誤結(jié)果。“正式測試”從數(shù)據(jù)庫中隨機抽取十題單選題組成為簡短試題檢查用戶學(xué)習(xí)情況。“我的樂學(xué)”中顯示正式測式的結(jié)果和用戶的互動信息。

3.2 開發(fā)工具

本系統(tǒng)采用AppCan來開發(fā)。AppCan是基于HTML5技術(shù)的Hybird跨平臺移動應(yīng)用開發(fā)工具。它的優(yōu)勢主要有：可直接采用HTML5技術(shù)開發(fā)；底層原生功能封裝在引擎與插件中；API插件可擴(kuò)展體驗堪比原生；集成開發(fā)提供模板；PC端和移動端同步調(diào)試；本地或云端編譯無需安裝；支持本地打包；可用于IOS及Android手機和平板的跨平臺開發(fā)。

3.3 UI框架box模型

AppCan采用彈性box模型進(jìn)行布局。它是指在固定大小的父容器為子元素分配空間，區(qū)別于常見的流式布局。流式布局由內(nèi)容決定父容器的大小。例如ub元素采用彈性box布局。案例的頁面分為三個區(qū)域，關(guān)鍵代碼如下：

同時UI中間件為不同分辨率的屏幕定義好字體，可以自動適配不同尺寸的屏幕。這樣在開發(fā)過程中就無需為不同的字體引入CSS文件。

3.4 開發(fā)組件化

組件化是對一些重復(fù)率較高的功能代碼進(jìn)行封裝，然后可以快速嵌入需要的地方。這樣可提高開發(fā)效率，簡化代碼。例如在案例中的圖片輪顯功能寫成一個組件：

function adImg() {

var slider = appcan.slider({

selector : ′#slider′, aspectRatio : 8 / 16, hasLabel : false,

hasCircle:true, auto : 3000, index : 0

});

slider.set([{img : ″index/css/myImg/elec-ad1.png″}, {img : index/css/myImg/elec-ad2.png″}, {img : ″index/css/myImg/elec-ad3.png″

}])

slider.on(″clickItem″, function(index, data) {

})

}

然后在需要的地方通過引入組件。

3.5 數(shù)據(jù)交互

案例中用戶在正式測試后提交成績數(shù)據(jù)，并在學(xué)習(xí)記錄中會顯示出近幾次的測試成績，用于跟蹤記錄學(xué)習(xí)情況。這里需要與服務(wù)器有數(shù)據(jù)交互。首先通過JQuery的函數(shù)封裝DOM對象通過getVal()函數(shù)取得屬性，再拼裝成JSON對象，通過Ajax提交至服務(wù)器[10]。反之亦從服務(wù)器獲取數(shù)據(jù)。案例中顯示分?jǐn)?shù)關(guān)鍵代碼如下：

appcan.request.ajax({

url : api+′info′,

data:{tel:.trim(appcan.locStorage.getVal(′tel′))},

type :′POST′,

dataType : ′json′,

success : function(data) {

console.info(data);

if(data){

showListView(data);

}

},

error : function(errMessage) {

uexWindow.toast(″0″, ″5″, ″″, ″1500″);

}

});

在最新版的AppCan4.0中提出了MVVM框架，主要有ViewModel視圖模型、Model和Collection數(shù)據(jù)模型、Service服務(wù)四個部分構(gòu)成。其中ViewModel是Model、Collection與View的中間處理機，它完成了數(shù)據(jù)與界面的相互操作，同時也是用戶交互行為事件的處理中心。Model是處理用戶提交數(shù)據(jù)或服務(wù)器返回數(shù)據(jù)，而Collection是維護(hù)一個Model的集合。Service處理與服務(wù)器通信。

4 結(jié) 語

以《計算機網(wǎng)絡(luò)基礎(chǔ)》課程為主體的移動微課系統(tǒng)現(xiàn)已投入教學(xué)實踐中。為教學(xué)中探索移動背景的教學(xué)模式提供了資源支撐。本文采用HTML5技術(shù)、選用AppCan工具開發(fā)移動學(xué)習(xí)資源，正是因為它們開發(fā)成本低、效率高的特點符合高職教學(xué)實踐的需求。隨著移動跨平臺技術(shù)的進(jìn)一步發(fā)展，HTML5日益成為關(guān)注熱點，各種基于HTML5技術(shù)的IDE工具升級必將會降低跨平臺移動資源開發(fā)的難度，提高移動應(yīng)用的用戶體驗，為開發(fā)者帶來福音。

[1] 溫川雪,周洪建.面向智能手機與Web平臺的微課移動教學(xué)系統(tǒng)的設(shè)計[J].中國遠(yuǎn)程教育:綜合版,2014(12):60-66.

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

[3] Garrett J J.用戶體驗的要素[M].機械工業(yè)出版社,2008.

[4] 楊葉,陳琳,董啟標(biāo).基于PhoneGap的跨平臺移動學(xué)習(xí)資源設(shè)計與開發(fā)探究[J].現(xiàn)代教育技術(shù),2014,24(2):100-107.

[5] 沈暉,SHENHui.藝術(shù)符號學(xué)視角下的移動學(xué)習(xí)客戶端GUI設(shè)計[J].現(xiàn)代教育技術(shù),2015,25(11):100-105.

[6] 馬建華.版式設(shè)計中的視覺流程[J].包裝工程,2008,29(6):191-193.

[7] 張舒予.視覺文化研究與教育技技術(shù)創(chuàng)新[J].中國電化教育,2006(4):10-12.

[8] 俞志堅.移動學(xué)習(xí)資源開發(fā)技術(shù)分析[J].中國農(nóng)業(yè)銀生武漢培訓(xùn)學(xué)院學(xué)報,2013(6):62-63.

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

[10] 單東林,張曉菲,魏然.鋒利的jQuery[M].北京:人民郵電出版社,2012:188-190.

DESIGNANDIMPLEMENTATIONOFMOBILEMICROLECTURESYSTEMBASEDONAPPCAN

Wang Li

(DepartmentofMechanicalandElectricalEngineering,WuxiOpenUniversity,Wuxi214011,Jiangsu,China)

Mobile learning resources are divided into two categories according to analysis of the situation. They are mobile integral ware and mobile learning system. And they have its advantage and drawback severally. After comparison, mobile learning system plays a more comprehensive role in practice. Therefore, it is necessary to develop mobile learning systems that support both inside and outside the classroom. On the basis of user experience model, a new mobile learning system structure is designed according to five levels of teaching design, curriculum content, system module, system interface and visual effect. After comparing various mobile development technical characteristics, a cross-platform mobile microlecture system based on computer network course is developed by using HTML5 technology and taking AppCan as developing tool.

Mobile learning resources Mobile microlecture system AppCan Cross-platform

TP3

A

10.3969/j.issn.1000-386x.2017.09.018

2017-02-15。第三期江蘇省職業(yè)教育教學(xué)改革研究課題(ZYB76)；江蘇開放大學(xué)(江蘇城市職業(yè)學(xué)院)“十二五”規(guī)劃2015年度課題(15SEW-Y-026)。王莉，講師，主研領(lǐng)域：計算機科學(xué)教育。