基于AppCan的移动微课系统设计与实现

王 莉

(无锡开放大学机电工程系 江苏 无锡 214011)

基于AppCan的移动微课系统设计与实现

王 莉

(无锡开放大学机电工程系 江苏 无锡 214011)

通过现状分析，对移动学习资源提出了两种分类：学习积件和学习系统，并阐述了它们各自的优点和缺点。比较发现，移动学习系统在实践中发挥的作用较全面。因此有必要开发支持课堂内外的移动学习系统。在用户体验模型的基础上，按教学设计、课程内容、系统模块、系统界面、视觉效果五个层次设计了新的移动学习系统结构。在比较各个移动应用开发技术的特点后，采用AppCan为开发工具，利用HTML5技术，以计算机网络基础为案例，开发了跨平台的移动微课系统。

移动学习资源 移动微课系统 AppCan 跨平台

0 引 言

随着无线网络环境的改善与上网成本的降低，以及各种移动设备的日益普及，移动技术已悄然改变人们的生活方式。当前高职生多为90后，他们基本人手一个智能手机，有人甚至拥有多个移动工具。平时他们在购物、餐饮、社交、娱乐、阅读新闻等生活的各个方面都利用智能手机来完成。他们俨然成为地道的移动数字原住民，甚至在课堂中都不能抵挡智能手机的诱惑。因此充分利用移动学习资源为课堂教学所用，将高职学生对智能手机的热情引导到学习上来，应该成为提高高职生课堂学习效果的有效途径。

1 移动学习资源应用分析

在移动学习中，以功能不同可以划分为学习资源、软件平台与移动设备三个组成部分。其中软件平台运行在移动设备上，是学习资源依附的躯壳。而学习资源才是学习者最关注的中心。

当前移动学习资源从规模大小上可分为两类:学习积件和学习系统。(1) 学习积件。根据微型学习理论强调的“在有限时间内学习相短小、松散连接、自包含的知识内容模块”，在这里把学习积件定义为时长在10分钟左右的微教案、微课件、微习题、微视频[1]等。学习积件可以灵活地搭载各种平台出现在学习者面前，而常见的平台有QQ、微信、微博等。学习积件的优势很明显，它具有普适性，可以在多种平台中反复利用。与之相随的缺点也很明显，它不具备学科知识的系统性与完整性。(2) 学习系统。这里的学习系统即指运行在移动终端上各种APP。这样的APP将学习内容与软件平台整合在一起。这些APP与学习积件相比，学习内容相对完整，使用时不需要搭载其他学习平台。目前很多APP非常适合学习者自学,却对课堂教学的支撑不足[2]，缺少将课堂学习与课后学习相联系的设计。

根据以上分析，为了更好地支持课程的课堂与课外教学活动，有必要开发一个完整的移动学习系统。学习系统不仅可以具备学习积件优点，支持移动背景下各种教学模式的开展，还可以记录学生学习过程形成学习档案，更可以存储师生互动痕迹，进而更灵活地支持移动学习与教学。

2 移动微课系统设计

2.1 设计理论基础

在Jesse James Garrett提出的“用户体验”模型中要求把信息资源的开发分为战略层、范围层、结构层、框架层、表现层[3]。分别明确：(1) 开发的目标及用户；(2) 功能与内容需求；(3) 交互设计与框架；(4) 界面设计；(5) 视觉效果。由此本系统设计划分为教学设计、课程内容[4]、模块设计、界面设计、视觉效果设计五部分。

2.2 内容设计

根据移动学习的特点，系统中每个知识点应短小独立。因此选择专题性强的知识点作为微课视频资源，知识点覆盖全课程，通过一个个小知识点架构起整个课程体系。为了强化学生对重点或难点知识的撑握，对这部分内容又以不同的媒体形式呈现知识点。如果课程涉及实验操作，则利用虚拟实验，加深学生对操作过程的印象。同时为了方便检验学习效果，还设计了每章的练习题库。学生练习时同时记录了学习情况。另外为了将学生的学习延伸到课外，需要设计师生互动或者生生互动的环节。

2.3 系统模块设计

整个系统分为登录、微课视频、重点难点、虚拟实验、习题库、学习记录、学习互动等几个模块。其结构如图1所示。系统各个模块的设计体现了对课堂教学的支撑及为课外学习延伸服务的思想。例如，教师可以根据教学设计从微课视频、重点难点、虚拟实验、章节练习模块中抽取内容组织翻转课堂。教师可以在学习互动中根据学生的发言获知课堂中需重点解析的焦点。再如，教师在实验课中指导学生操作，可以借助虚拟实验让学生预热操作流程，也可以通过微课视频提高指导效率。学生利用本系统可以完成学习、检验、复习的自学过程。

图1 系统模块图

2.4 界面与视觉效果设计

由于智能手机的屏幕尺寸有限，因此移动学习资源界面设计强调去繁化简，注重突出核心信息[5]。界面的版面设计要符合学习者在平面内注意力分布的心理学规律，主要的信息可依次分布在左上、左下、右上部[6]，这样符合学习者的视觉与心理习惯。同时还要均衡色彩、图标、比例等要素，充分利用技术手段，提高学习资源视觉质量，开启学习资源新视角[7]。

2.5 开发技术的比较与选择

目前开发移动学习资源的技术主要有基于SDK方式、基于HTML5、基于Flash Lite[8]。开发出的APP主有Native APP、Web APP、Hybird APP、Flash Lite四种类型。从用户体验角度来看，Native APP、Hybird APP体验优秀，Flash Lite体验其次，Web APP体验最次。从跨平台角度来看，Web APP、Hybird APP、Flash Lite均具有跨平台的优势，而Native APP最差。而从开发成本来看，Native APP开发成最高，Hybird APP、Flash Lite其次，Web APP开发成本最低。因此综合以上因素，决定采用HTML5技术开发Hybird APP。

3 AppCan实现案例与要点

3.1 开发案例

现以《计算机网络基础》课程为例具体介绍。运行APP如果用户为首次使用，将会出现注册界面，用户以当前手机号注册即可。以后运行则可以自动登录。该课程“微课视频”内容主要有网络与通信基础、局域网基本知识、组建局域网、接入因特网、网络管理、因特网应用等六章内容。每章内容选取了精简的专题知识点视频。视频格式采用MP4格式，能较好支持HTML5视频播放[9]。在“重点难点”部分设置了flash动画演示知识。在“虚拟实验”采用交互flash动画让用户操作以此复习实验步骤。“章节练习”题型为单选题，当用户做完一题就会当即显示正误结果。“正式测试”从数据库中随机抽取十题单选题组成为简短试题检查用户学习情况。“我的乐学”中显示正式测式的结果和用户的互动信息。

3.2 开发工具

本系统采用AppCan来开发。AppCan是基于HTML5技术的Hybird跨平台移动应用开发工具。它的优势主要有：可直接采用HTML5技术开发；底层原生功能封装在引擎与插件中；API插件可扩展体验堪比原生；集成开发提供模板；PC端和移动端同步调试；本地或云端编译无需安装；支持本地打包；可用于IOS及Android手机和平板的跨平台开发。

3.3 UI框架box模型

AppCan采用弹性box模型进行布局。它是指在固定大小的父容器为子元素分配空间，区别于常见的流式布局。流式布局由内容决定父容器的大小。例如ub元素采用弹性box布局。案例的页面分为三个区域，关键代码如下：

同时UI中间件为不同分辨率的屏幕定义好字体，可以自动适配不同尺寸的屏幕。这样在开发过程中就无需为不同的字体引入CSS文件。

3.4 开发组件化

组件化是对一些重复率较高的功能代码进行封装，然后可以快速嵌入需要的地方。这样可提高开发效率，简化代码。例如在案例中的图片轮显功能写成一个组件：

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 数据交互

案例中用户在正式测试后提交成绩数据，并在学习记录中会显示出近几次的测试成绩，用于跟踪记录学习情况。这里需要与服务器有数据交互。首先通过JQuery的函数封装DOM对象通过getVal()函数取得属性，再拼装成JSON对象，通过Ajax提交至服务器[10]。反之亦从服务器获取数据。案例中显示分数关键代码如下：

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数据模型、Service服务四个部分构成。其中ViewModel是Model、Collection与View的中间处理机，它完成了数据与界面的相互操作，同时也是用户交互行为事件的处理中心。Model是处理用户提交数据或服务器返回数据，而Collection是维护一个Model的集合。Service处理与服务器通信。

4 结 语

以《计算机网络基础》课程为主体的移动微课系统现已投入教学实践中。为教学中探索移动背景的教学模式提供了资源支撑。本文采用HTML5技术、选用AppCan工具开发移动学习资源，正是因为它们开发成本低、效率高的特点符合高职教学实践的需求。随着移动跨平台技术的进一步发展，HTML5日益成为关注热点，各种基于HTML5技术的IDE工具升级必将会降低跨平台移动资源开发的难度，提高移动应用的用户体验，为开发者带来福音。

[1] 温川雪,周洪建.面向智能手机与Web平台的微课移动教学系统的设计[J].中国远程教育:综合版,2014(12):60-66.

[2] 陈明选,刘萃.基于智能手机的交互式学习环境设计[J].中国电化教育,2015(4):68-73.

[3] Garrett J J.用户体验的要素[M].机械工业出版社,2008.

[4] 杨叶,陈琳,董启标.基于PhoneGap的跨平台移动学习资源设计与开发探究[J].现代教育技术,2014,24(2):100-107.

[5] 沈晖,SHENHui.艺术符号学视角下的移动学习客户端GUI设计[J].现代教育技术,2015,25(11):100-105.

[6] 马建华.版式设计中的视觉流程[J].包装工程,2008,29(6):191-193.

[7] 张舒予.视觉文化研究与教育技技术创新[J].中国电化教育,2006(4):10-12.

[8] 俞志坚.移动学习资源开发技术分析[J].中国农业银生武汉培训学院学报,2013(6):62-63.

[9] 谢淑丽,徐镇辉.基于HTML5跨平台微课视频系统的设计与实现[J].陕西理工学院学报(自科版),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。第三期江苏省职业教育教学改革研究课题(ZYB76)；江苏开放大学(江苏城市职业学院)“十二五”规划2015年度课题(15SEW-Y-026)。王莉，讲师，主研领域：计算机科学教育。