论文部分内容阅读
摘要：传统式的针对PC系统的精品课程、在线学习平台已无法适应以手机用户为代表的移动化学习者。搭建移动化学习平台，需对页面重新部署，使用HTML5语言、jQuery Mobile移动开发框架、Web存储、工作线程、离线存储等技术，高效构建校园移动化学习平台的WebAPP。
关键词：HTML5；jQuery Mobile；移动化学习平台；Web存储；离线存储
中图分类号：G642 文献标识码：A 文章编号：1009-3044（2015）08-0162-02
1 前言
随着校园信息化平台的逐步推进，校园精品课程、公开课、示范课、在线学习平台等教学资源已在校园网站中上线，丰富了学生的课外学习。学生可通过PC终端的浏览器直接打开平台进行学习。但随着移动设备的普及，学生使用手机上网进行网上学习的频繁越来越高，而手机浏览器因为尺寸和分辨率的不同，传统网页已无法适应手机用户的访问。而随着校园无线局域网的普及，以及移动终端对图像、音频视频的强大处理能力，基于智能手机的校园移动化在线学习平台，恰能为学习者提供一个高效、随时、快捷的学习途径。
2 系统分析
校园移动化学习平台作为传统网络学习平台的一种补充，为方便管理，移动学习平台充分利用传统网络学习平台的数据，实现资源统一管理，提高开发效率。移动学习平台的前端设计，只需设计一个提供移动设备访问的访问界面。考虑到手机的性能问题和学习者的时间分散问题，移动学习平台的资源建设需遵守如下原则：一、能适应多种移动化设备，能确保在各种内核的浏览器中浏览出一致的效果；二、能根据学习者的需要提供，和所处的环境选择合适的教学资源，确保资源的多样化，并对资源、网站站点进行实时管理；三、学习平台操作简单明了，方便各种层次的学生和各类型的手机访问；四、平台的资源能在用户离线的情况下，能继续使用。系统的总体架构如图1所示：
3 开发技术
3.1 jQuery Mobile
jQuery Mobile 是一个免费的、开源的、跨平台的移动Web应用轻易级开发框架，是基于HTML5的快速开发工具，具有简单高效的特点。jQuery Mobile是jQuery在手机和平板上的版本，包含创建移动应用的Web UI整体开发框架。它能够让没有美工基础的开发者在短时间内做好完美的界设计，并且支持主流的移动平台。它既包含構建完整WebApp所需要的布局、控件、插件、页面元素，还拥有渐进式增强的主题界面、简单但有条理的标记语言规范和自适应布局等。
3.2 HTML5
HTML5 作为新一代的通用标准标记语言，添加了很多新元素及功能，比如： 图形的绘制、音视频自由嵌入多媒体内容，更好的页面结构有助于小屏幕设备和视障人士使用，API拖放元素、地理位置随时随地定位、网页应用程序缓存，丰富的交互提升了用户体验。
4 平台主要模块的实现
前台页面整体使用jQuery Mobile ，页面必须声明DOCTYPE为HTML5，然后将相关的CSS文件、jQuery类库文件和jQuery Mobile文件引入页面的head中。这三个文件可以下载至本地来引用，也可以使用cdn在线引用。因在不同的尺寸的设备访问，需要设置meta标记的viewport属性来适应不同的移动设备，将width设置为device-width，使页面的宽度与设备的宽度保持一致。各个页面中编写好head区域的代码后，使用data-role即可设置各个元素，用较少的代码即可在移动设备上实现丰富的效果。
4.1 全屏导航栏的实现
在手机屏幕有限的情况下，实现更多的功能效果，使用jQuery Mobile中的navbar控件，即可实现与原生APP类似的头部栏和尾部栏的导航效果。在navbar标签中使用标记，加上一些可选的图标，可以让标签中的内容自动渲染为按钮的效果。然后将属性data-position设备为fixed即可将导航固定，而将data-fullscreen设置为true，可以使页面内其他内容忽略工具栏的存在而实现全屏显示。
4.2 使用Web Storage实现数据本地存储
在HTML4中使用Cookies存储数据存在一些不足，在HTML5中提供了一项新的Web 客户端存储数据的功能，即Web Storage。Web Storage能在客户端保存大量的数据，并且访问速度快，因此在本学习平台中用于在客户端保存学生的个人信息、课程信息和学习状态等。Web Storage有两种形式存储数据：一种将数据临时存储在seesion中的sessionStorage（会话存储）；一种为永久性存在客户端硬件中的localStorage（本地存储）。Web Storage使用“键值对”将数据保存在用户端，当页面重新被加载时，数据即可直接在客户端被读取出来，无需通过服务器的请求，使得操作数据变得更简单。在本系统开发中使用localStorage，将学生的基本信息以JSON的数据形式保存于客户端，浏览器关闭后数据仍然存在，下次打开浏览器时，通过localStorage.getItem即可获得相应数据。
4.3 使用工作多线程实现后台运行
在 HTML5 中提出了工作线程（Web Worker）的概念，并且规范出 Web Worker 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且有浏览器中的 JavaScript 引擎负责管理。在本移动化学习平台上，学生在完成作业或测试的实时分数，以及学生学习课程的进度，需要即时显示。而这些功能需要执行的时间比较长，为不影响用户的操作，这些功能使用Web Worker来完成，从而提高页面的性能。例如，在作业测试功能中，定义两个工作线程，一个负责计算实时分数和正确率，一个线程完成数据的传递，将计算结果传回页面，两个线程同时工作，使到在线测试页面不会中断。在处理多个用户数据时，还可以使用共享线程来实现。
4.4 使用离线存储实现离线学习
HTML5离线存储，以用程序的网络浏览器将从名单文件中读取URL列表，下载这些资源，将他们在本地缓存，并自动在这些本地副本改变时保持他们更新。当尝试在没有网络连接时访问网络应用程序，网络浏览器将自动切换并使用本地资源代替，而不需要再次重复下载这些资源，也可为用户节省数据流量。学生在学习系统中访问某一教学资源时，离线Web应用程序会创建一个文件列表保存于cache-manifest文件。当Web浏览器处于离线状态时，系统将访问缓存于用户本地的资源。需要通过两个步骤将应用程序改为离线应用程序：首先创建一个包括应用程序用到的所有文件的缓存清单（包括图像、HTML、CSS、Javascript）；然后通过将缓存清单添加至每个HTML文件中。其次必须在 web 服务器上进行配置， manifest 文件需要配置正确的 MIME-type。
5 小结
通过本学习系统的建立，教师可以电脑和移动设备完成课程的在线辅助教学，如课程信息的管理、课件的管理、学习资源的管理、学生课后作业的布置与批改、在线答疑等。学生可以在课余时间通过手机来复习自己的课程，在线观看课件和视频来辅导自己的课程，并在线提交自己的作业给老师，有时间时及时在系统中向老师提出。移动化学习平台使得学生可以利用零散的时间来学习自己想学的知识，图2为学生使用三星手机，浏览的课程列表，及自我测验中的效果。
移动互联网永远在线、主动推送、移动设备便于携带的天生优势将重新定义教育行业的未来。移动互联瞬息万变，对于教育来说，未来最重要的是运用全新的技术改变传统的学习方式和教学模式。
参考文献：
[1] 刘宗平.浅析数字化校园建设中的移动校园平台建设[J].科技创新与应用，2013（14）.
[2] 何育朋.基于云计算的移动校园网资源系统的设计[J].金融科技时代，2012（6）.
[3] 朱伯聪，陈惠芬，林逢春.探讨数字化校园背景下的“微门户”建设构想——基于福建电力职业技术学院的数字化校园建设[J].电脑知识与技术，2014（13）.
关键词：HTML5；jQuery Mobile；移动化学习平台；Web存储；离线存储
中图分类号：G642 文献标识码：A 文章编号：1009-3044（2015）08-0162-02
1 前言
随着校园信息化平台的逐步推进，校园精品课程、公开课、示范课、在线学习平台等教学资源已在校园网站中上线，丰富了学生的课外学习。学生可通过PC终端的浏览器直接打开平台进行学习。但随着移动设备的普及，学生使用手机上网进行网上学习的频繁越来越高，而手机浏览器因为尺寸和分辨率的不同，传统网页已无法适应手机用户的访问。而随着校园无线局域网的普及，以及移动终端对图像、音频视频的强大处理能力，基于智能手机的校园移动化在线学习平台，恰能为学习者提供一个高效、随时、快捷的学习途径。
2 系统分析
校园移动化学习平台作为传统网络学习平台的一种补充，为方便管理，移动学习平台充分利用传统网络学习平台的数据，实现资源统一管理，提高开发效率。移动学习平台的前端设计，只需设计一个提供移动设备访问的访问界面。考虑到手机的性能问题和学习者的时间分散问题，移动学习平台的资源建设需遵守如下原则：一、能适应多种移动化设备，能确保在各种内核的浏览器中浏览出一致的效果；二、能根据学习者的需要提供，和所处的环境选择合适的教学资源，确保资源的多样化，并对资源、网站站点进行实时管理；三、学习平台操作简单明了，方便各种层次的学生和各类型的手机访问；四、平台的资源能在用户离线的情况下，能继续使用。系统的总体架构如图1所示：
3 开发技术
3.1 jQuery Mobile
jQuery Mobile 是一个免费的、开源的、跨平台的移动Web应用轻易级开发框架，是基于HTML5的快速开发工具，具有简单高效的特点。jQuery Mobile是jQuery在手机和平板上的版本，包含创建移动应用的Web UI整体开发框架。它能够让没有美工基础的开发者在短时间内做好完美的界设计，并且支持主流的移动平台。它既包含構建完整WebApp所需要的布局、控件、插件、页面元素，还拥有渐进式增强的主题界面、简单但有条理的标记语言规范和自适应布局等。
3.2 HTML5
HTML5 作为新一代的通用标准标记语言，添加了很多新元素及功能，比如： 图形的绘制、音视频自由嵌入多媒体内容，更好的页面结构有助于小屏幕设备和视障人士使用，API拖放元素、地理位置随时随地定位、网页应用程序缓存，丰富的交互提升了用户体验。
4 平台主要模块的实现
前台页面整体使用jQuery Mobile ，页面必须声明DOCTYPE为HTML5，然后将相关的CSS文件、jQuery类库文件和jQuery Mobile文件引入页面的head中。这三个文件可以下载至本地来引用，也可以使用cdn在线引用。因在不同的尺寸的设备访问，需要设置meta标记的viewport属性来适应不同的移动设备，将width设置为device-width，使页面的宽度与设备的宽度保持一致。各个页面中编写好head区域的代码后，使用data-role即可设置各个元素，用较少的代码即可在移动设备上实现丰富的效果。
4.1 全屏导航栏的实现
在手机屏幕有限的情况下，实现更多的功能效果，使用jQuery Mobile中的navbar控件，即可实现与原生APP类似的头部栏和尾部栏的导航效果。在navbar标签中使用标记，加上一些可选的图标，可以让标签中的内容自动渲染为按钮的效果。然后将属性data-position设备为fixed即可将导航固定，而将data-fullscreen设置为true，可以使页面内其他内容忽略工具栏的存在而实现全屏显示。
4.2 使用Web Storage实现数据本地存储
在HTML4中使用Cookies存储数据存在一些不足，在HTML5中提供了一项新的Web 客户端存储数据的功能，即Web Storage。Web Storage能在客户端保存大量的数据，并且访问速度快，因此在本学习平台中用于在客户端保存学生的个人信息、课程信息和学习状态等。Web Storage有两种形式存储数据：一种将数据临时存储在seesion中的sessionStorage（会话存储）；一种为永久性存在客户端硬件中的localStorage（本地存储）。Web Storage使用“键值对”将数据保存在用户端，当页面重新被加载时，数据即可直接在客户端被读取出来，无需通过服务器的请求，使得操作数据变得更简单。在本系统开发中使用localStorage，将学生的基本信息以JSON的数据形式保存于客户端，浏览器关闭后数据仍然存在，下次打开浏览器时，通过localStorage.getItem即可获得相应数据。
4.3 使用工作多线程实现后台运行
在 HTML5 中提出了工作线程（Web Worker）的概念，并且规范出 Web Worker 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且有浏览器中的 JavaScript 引擎负责管理。在本移动化学习平台上，学生在完成作业或测试的实时分数，以及学生学习课程的进度，需要即时显示。而这些功能需要执行的时间比较长，为不影响用户的操作，这些功能使用Web Worker来完成，从而提高页面的性能。例如，在作业测试功能中，定义两个工作线程，一个负责计算实时分数和正确率，一个线程完成数据的传递，将计算结果传回页面，两个线程同时工作，使到在线测试页面不会中断。在处理多个用户数据时，还可以使用共享线程来实现。
4.4 使用离线存储实现离线学习
HTML5离线存储，以用程序的网络浏览器将从名单文件中读取URL列表，下载这些资源，将他们在本地缓存，并自动在这些本地副本改变时保持他们更新。当尝试在没有网络连接时访问网络应用程序，网络浏览器将自动切换并使用本地资源代替，而不需要再次重复下载这些资源，也可为用户节省数据流量。学生在学习系统中访问某一教学资源时，离线Web应用程序会创建一个文件列表保存于cache-manifest文件。当Web浏览器处于离线状态时，系统将访问缓存于用户本地的资源。需要通过两个步骤将应用程序改为离线应用程序：首先创建一个包括应用程序用到的所有文件的缓存清单（包括图像、HTML、CSS、Javascript）；然后通过将缓存清单添加至每个HTML文件中。其次必须在 web 服务器上进行配置， manifest 文件需要配置正确的 MIME-type。
5 小结
通过本学习系统的建立，教师可以电脑和移动设备完成课程的在线辅助教学，如课程信息的管理、课件的管理、学习资源的管理、学生课后作业的布置与批改、在线答疑等。学生可以在课余时间通过手机来复习自己的课程，在线观看课件和视频来辅导自己的课程，并在线提交自己的作业给老师，有时间时及时在系统中向老师提出。移动化学习平台使得学生可以利用零散的时间来学习自己想学的知识，图2为学生使用三星手机，浏览的课程列表，及自我测验中的效果。
移动互联网永远在线、主动推送、移动设备便于携带的天生优势将重新定义教育行业的未来。移动互联瞬息万变，对于教育来说，未来最重要的是运用全新的技术改变传统的学习方式和教学模式。
参考文献：
[1] 刘宗平.浅析数字化校园建设中的移动校园平台建设[J].科技创新与应用，2013（14）.
[2] 何育朋.基于云计算的移动校园网资源系统的设计[J].金融科技时代，2012（6）.
[3] 朱伯聪，陈惠芬，林逢春.探讨数字化校园背景下的“微门户”建设构想——基于福建电力职业技术学院的数字化校园建设[J].电脑知识与技术，2014（13）.