基于HTML5及jQueryMobile移动学习APP设计及实现.docVIP

基于HTML5及jQueryMobile移动学习APP设计及实现 　　摘 要 介绍一种快速开发移动学习APP的方法，其中包括使用jQuery Mobile框架实现UI的设计，使用HTML5技术及其 Web Storage实现数据存储，以及使用PhoneGap编译成Native App等 关键词 HTML5；jQuery Mobile；移动学习；APP 中图分类号：G652 文献标识码：B 文章编号：1671-489X（2017）04-0028-03 Abstract This paper introduces a method of fast development of m- learning APP， including using jQuery mobile framework to achieve the design of UI， using HTML5 technology and Web Storage to achieve data storage， and using Phone Gap compile to Native App etc. Key words HTML5；jQuery Mobile；m-learning；APP 1 引言 随着信息技术和通信技术的快速发展，智能手机的普及率已经非常高，这为移动学习的实现提供了至关重要的前提条件。但是，在当前的数字化学习资源开发方面，针对移动学习而开发的资源却较少。因此，如何为智能手机开发数字化学习资源，为移动学习者创设高效、灵活、可随时随地进行学习的资源和环境，是一个亟待解决的问题 目前，手机平台大多是基于iOS和Android两种系统的，支持的APP（应用程序）可分为Native App和Web App两种 Native App可安装在手机上，并且可以访问手机硬件（如话筒、摄像头等）。iOS的Native App使用Objective- C语言进行开发，Android的Native App则使用Java语言进行开发。Native App移植到不同平台较为麻烦，并且开发难度也较大 Web App就是一个Web网站，它基于智能手机屏幕的特点，对呈现的内容进行优化。它使用相关的Web技术进行开发，无须安装在手机上，具有较好的跨平台性 而基于HTML5和jQuery Mobile等技术，使得Web App的开发变得更加容易，并且还能实现一些原本只有Native App才能实现的功能，比如本地数据的存储、音视频播放等功能；还实现了较多的交互性，使移动学习资源的开发变得更加快捷、方便 2 系统分析与设计 智能手机作为移动学习的工具，其学习内容呈现的方式与知觉特征就显得尤为重要。因为考虑到移动学习的及时性、碎片性的特征，这就要求智能手机应能精炼突出地显示学习内容，有效地促进学习者的认知。因此，本APP在设计学习内容时，使每个页面的学习内容即为一个较为完整的知识点，并用精炼的语言、直观的图片和短小精悍的视频来进行展示，对每个页面持续的学习时间被控制在10分钟以内。在系统设计上也力求简洁高效，并利用Web Storage对系统数据进行本地存储，加快了浏览的速度。另外，考虑到通信网络的不稳定性，为了便于学习者在离线情况下也能?M行学习，本APP使用PhoneGap开发框架，将Web App编译成Native App，从而可以将APP安装在手机上，便于离线浏览 本APP主要有3个功能模块 1）目录导航，呈现了学习内容的目录页，方便学习者快速选择学习内容 2）内容呈现，该页面用于显示学习内容，并嵌入一些简单图片和简短视频，学习内容力求精练，每个页面（知识点）的学习时间控制在10分钟以内。另外，在此页面中还提供了笔记功能，方便学习者随时记录学习心得 3）自我测试，此页面主要用于呈现一些测试题，移动学习者利用此功能可以进行自我测试，提交答案后立即呈现正确答案和解析内容，便于及时发现自己的不足，查漏补缺，适当调整学习策略 3 关键技术介绍 HTML5介绍 HTML5是HTML标准的第五个版本，也是最新的版本，它在2014年10月由W3C（万维网联盟）发布。它提供了新的对富媒体的有效支持，如支持网页端的Audio、Video等多媒体功能；还支持Web App的开发，实现了丰富的网页交互功能和跨平台性，实现了数据的本地存储，提升了浏览的速度，增强了用户体验 jQuery Mobile介绍 jQuery Mobile是一个基于jQuery框架的UI框架，它所提供的UI界面非常有利于在手机上点击、触摸、浏览，具有较好的跨平台性，利用它开发的Web App能够在多种移动平台上运行