摘 要：移动学习是指利用无线移动通信网络技术，以无线移动通信设备随时随地获取学习信息、学习资源和学习服务的一种学习方式。随着研究的深入，现存的移动学习资源兼容性差、交互性差等缺陷也显现出来。针对这些问题，本文基于HTML5、jQuery框架等技术，设计出适合Android、iOS操作系统的移动学习资源。该类资源可广泛应用于手机、平板电脑以及其他移动终端，并为今后移动学习的研究提供有价值的参考。
关键词： Android；移动学习；HTML5
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所示。
2 移动学习资源的开发
2.1 平台的体系结构
本文依托爱课程网《大学计算机基础》网页版，设计基于Android平台的移动学习软件。该软件主要归类为基础篇、应用篇和实训篇。对于教师，可以进行学习指导、授课教案、素材资源、习题解析等内容的管理。对于学生，除了可以浏览教师发布的内容，还可以选择与教师的互动，如在线答疑和疑难解答等。对于系统管理员，可以对课程进行内容更新和课程上线等管理。该平台的功能用例图如图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所示。
根据传统资源的缺陷和先进的移动开发技术，本文在素材资源这一模块，设计演示型资源和交互型资源时将采用HTML5+jQuery技术。
2.4 基于移动平台学习资源改进优化
演示型学习资源在技术实现上应将重点放在资源形象化的展示上。它并不注重与学习者的双向交互，但是需要通过生动形象的动画演示，来加强学习者对知识点的理解和掌握。
传统基于Flash的演示型资源主要靠帧来完成页面的切换和动画效果。本文基于Html5+jQuery技术，用hide（）来隐藏某个元素，用show（）显示匹配元素，用fadeIn（）和fadeOut（）来实现匹配元素的淡入淡出。在动画效果上，主要关注两个控制：一是时间间隔的控制，这里将使用时延函数delay（）；二是元素位置的控制，这里通过animate（）方法用top和left参数来定义元素的坐标可以很好地解决此问题。在实际开发中重复多次使用fadeIn（）和fadeOut（）函数，使过程变得繁琐，代码冗余。本文在连贯性动画处理上，采用opacity控制元素的透明度，随着animate的动画效果改变透明度，从而实现淡入淡出，关键实现代码如下所示：
$（“#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（）；//重复播放
}
交互型资源不仅要有演示型资源的动画效果，还需要与学习者在内容上产生一定的交互。如图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所示。
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.