Web前端技术在开放大学在线学习平台中的应用研究

王运

摘要：该文通过对目前国内外在线学习平台的研究，对在线学习平台的需求进行了分析，针对桌面端和移动端两种学习方式，探讨了Web前端技术在学习平台中不同的实现方式。提出现阶段学习平台的实现应针对桌面端和移动端开发不同的程序，即在桌面端使用HTML5制作可适应性网页，在移动端使用Hybrid App方式制作APP。最后简要的介绍了针对移动端使用Hybrid App方式开发应用程序的过程。

关键词：在线学习平台，HTML5， Hybrid App

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）13-0150-03

Abstract：In this paper，through the research of online learning platform in China and abroad， analyzed the demand for online learning platform， aimed at the two types of learning by desktop and mobile， discussed theImplementation of web front-end technology in learning platform.Put forward the realization of the learning platform should develop different programs for desktop and mobile at the present stage，used HTML 5 web pages to develop desktop pages， and used Hybrid App to make mobile app. Finally briefly introduced the way of Hybrid App for mobile terminal application development process.

Key words： Online Learning Platform； HTML5； Hybrid App

随着国家开放大学及多个省级开放大学的挂牌成立，原广播电视大学的办学形式发生了根本性的转变。开放大学的使命是为学习型社会搭建终身学习“立交桥”，其发展策略是充分利用信息技术创新教育教学模式。在当今社会，随着人们的生活节奏的加快以及网络的普及，在线学习已成为终身学习的重要手段之一，近几年，国内外涌现出一批优秀的在线学习平台，本文将对这些现有的在线学习平台的实现方式进行分析和研究，并探讨Web前端技术在开放大学在线学习平台中实现的思路。

1 国内外在线平台现状

目前，MOOC（大规模开放在线课堂Massive Open Online Course）已成为国内外最常见的在线学习模式。MOOC是一种针对于大众人群的在线课堂，其主要特点是开放共享及可扩张性，是远程教育的最新发展。国内外较著名的MOOC平台有Coursera，edX，Udacity，学堂在线等。

以Coursera为例，其Web网页前端提供了课程浏览，课程搜索，课程报名，个人课程管理，视频浏览及下载，课程论坛讨论，课后作业及考试等功能；同时，Coursera还提供了适用于不同平台的集成了网页端大部分功能的APP供学习者在移动设备上使用。

2 在线学习平台的功能需求

在线学习平台的核心功能是教学资源的展现和教学互动，其首要任务是将各类教学资源提供给学习者，其通常提供的资源类型包括文本，图片，视频，音频，互动多媒体课件等类型，其中，视频是最主要的教学内容承载方式，如Coursera、网易公开课等在线学习平台提供的资源都是以视频课程为主，文本等其他资源为辅。学习者使用视频的方式包括在线观看和下载到本地。因此，如何将视频为主的教学资源提供给学习者是在线学习平台的关键。

在学习过程中，学习者通常无法独立完成所有的学习任务，因此，学习者与教师之间、学习者与学习者之间的互动是在线学习平台必不可少的功能，大多数学习平台都包含在线答疑、论坛讨论以及社交化等互动功能。

在线学习平台的功能一般还包括作业、在线考试、个人信息管理等等。一个合格的学习平台，必须完整的包含这些功能。

3 在线学习的方式

目前，在线学习主要通过桌面端和移动端两种方式来进行。

桌面端学习是传统的在线学习方式，学习者使用桌面端电脑访问学习平台网站，在网站上完成浏览教学资源，与教师互动等相关操作。对于学习者来说，只需要能上网的电脑和浏览器即可进行学习，学习成本较低；但这种学习方式存在着学习时间和地点的限制，无法适应现代社会越来越快的生活节奏。

随着智能手机，平板电脑的普及，以及WIFI、3G、4G等网络接入方式的普及，越来越多的学习者开始使用移动终端进行学习。学习者使用移动终端上的浏览器或APP访问学习平台，完成和桌面端一样的学习行为。这样的学习方式可以充分利用碎片化时间，随时随地进行学习。同时，增加了触摸功能的移动设备的交互模式比使用鼠标的桌面电脑更加丰富，可以实现较桌面端复杂的功能。

所以，学习平台的建设必须同时考虑桌面端和移动端的需要，以适应学习者的不同需求。

4 在线学习平台web前端技术

在实现方式上，在线学习平台web前端技术使用了网页和app两种方式。

4.1 网页方式

网页方式是指学习者通过浏览器访问在线学习平台网站，在网页上进行相关学习操作，此方式是桌面端最常使用的学习方式。

这种方式的优点主要有：（1）学习者的学习成本较低：学习者只要能上网就可进行学习，无需添加其他设备。（2）平台无关：浏览器方式不受学习设备的系统限制，无论学习者的操作系统是Windows，Linux或MAC OS X，或移动设备是iOS，Android或Windows Phone，只需浏览器就能进行学习。（3）开发成本低，维护方便：开发者只需要开发一两套网页即可适应不同学习者需求，同时维护和升级工作主要集中在服务器上，学习者能及时收到响应。

但是，这种方式也存在一些缺点：（1）学习过程中必须始终保持在线：但对于移动端的学习者来说，虽然目前移动网络和WIFI的普及度较高，但仍无法确保学习者可以随时随地接入网络，使得学习者的学习场景受到一定限制。（2）浏览器兼容性：目前常用浏览器种类复杂，以桌面端为例，常见的浏览器有IE系列、Chrome，Firefox以及国内软件商重新打包的360浏览器，猎豹浏览器等等，由于这些浏览器使用的内核各不相同，而不同内核对于网页元素的标准不一，为了确保大多数浏览器都能正常使用学习平台的功能，要求开发者必须进行大量的针对性测试和修改。（3）影响学习者的专注度：在使用浏览器访问学习平台进行学习的同时，学习者可以在其他网页进行其他活动，如进行访问社交网站、阅读新闻、网购等等操作；同时，学习平台网页中所包含的非学习内容也可能分散学习者的注意力。

目前，学习平台的网页的制作方式主要有以下两种：

1）传统HTML+Flash方式

这种方式是以传统的HTML为基础构成网页，而使用Flash表现多媒体和交互内容，在早期的在线学习平台得到广泛使用。其优点有：（1）HTML和Flash技术的发展已有多年历史，技术比较成熟，拥有众多的设计和开发人员；（2）网络上存在大量Flash素材和资源，只要得到授权即可使用，降低了开发成本。

但随着技术的发展，Flash的问题逐渐凸显，具体有：（1）Flash是使用控件方式实现，在Windows系统上的浏览器一般自带或可以安装Flash Player控件，但并不是所有的浏览器都可以使用控件，特别是在移动设备上，绝大多数浏览器都无法加载控件，这限制了Flash的使用场景；（2）Flash的互动模式最初是为鼠标设计，针对移动设备的触摸操作支持不是很完善；这些问题导致了越来越多的开发者选择放弃Flash而使用新的技术。

2）HTML5技术

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定，是包括HTML、CSS和JavaScript在内的一套技术组合。HTML5具有以下优点：（1）可用性的提高和学习者体验的改进；（2）增加了一些新的功能标签；（3）更多的视音频多媒体元素；（4）可以以非控件的方式替代Flash等技术；（5）网站的抓取和索引变的更加容易；（6）对移动应用和游戏的支持良好；（7）可移植性好。

这些优点使得使用HTML5技术开发的网站能够良好的被桌面端和移动设备所兼容，特别是与响应式网络设计方式相结合，制作出的网站可以被两者同时适配。所以，在线学习平台应使用HTML5方式开发适应于桌面端学习的网页。

4.2 移动APP方式

移动APP方式指的是学习者使用学习平台开发的应用程序进行学习，这些应用程序一般集成了学习平台网站全部或大部分的功能，使学习者可以在应用程序内完成整个学习过程。

这种方式的优点有：（1）学习者专注于学习：APP中只提供关于学习的内容，在不关闭APP的情况下，学习者只能将全部注意力集中在学习上，从而获得较高的专注度和学习效率。（2）离线学习：APP可以学习内容保存到本地，即使离线亦可使用，这对于移动设备来说非常重要。（3）针对平台定制：开发者针对各平台的特性进行不同的开发，如充分利用iOS和Android的特点设计不同的操作方式，以提升不同系统的学习者的学习者体验，同时减少兼容性问题。（4）应用响应速度快：由于APP在使用时大部分数据保存在本地，学习者无需等待数据下载即可使用，同时APP在与服务器进行交互时只需传输必须的学习数据，相对于网页方式无需下载如页面元素等其他数据，在相同网络情况下传输速度较快。（5）学习状态保存方便：学习者的状态数据同时保存在本地和服务器端，再次使用时APP可以直接读取本地的数据，而网页方式往往需要重新登录认证。

但是，APP的开发维护成本较高，开发者需要针对多个平台进行开发不同的版本，不同平台之间的差异会提升开发的复杂度，发布更新后也必须由学习者自动或手动的进行更新操作，增加了使用成本。这一问题可通过使用Hybrid App方式解决，Hybrid制作的APP使用一套UI WebView将网页包含起来组成一个APP程序，程序的主要功能由网页完成。这样，开发者可以先开发一套通用的网页，然后根据不用平台将其封装起来制作成为APP程序。这种方式具有开发成本低、轻松跨平台、迭代更新快等优点。

5 在线学习平台的实现

学习平台为了支持多种学习方式，应针对桌面端和移动端开发不同的程序。桌面端使用HTML5开发网页，同时使用响应式设计方式，使制作的网页同时也能够兼容移动端。针对移动端，先使用HTML5开发网页，然后使用Hybrid App方式针对不同平台打包发布。如下图：

目前，国内外有众多的开发框架，如PhoneGap、Titanium、Salama等，下面以PhoneGap框架为例演示一个Hybrid App方式的学习平台的开发流程。

1）构建前端应用网页

前端应用网页基于HTML5开发，以实现与学习者的各类交互行为，同时可利用jQuery Mobile等前端框架，框架中包含了各种移动应用常用的页面主题与元素，将其直接使用或修改后使用将有效的提高开发效率。

2）构建后端功能，并实现离线功能

编写代码以实现和后台数据库的通信功能，实现内容的动态更新，同时，为保证离线时的使用，使用HTML的应用缓存（Application Cache）机制将一些Web资源保存在本地调用，并使用HTML5的Web Storage功能在本地保存学习者的数据。

3）使用PhoneGap将制作好的网站封装成应用程序

以Android平台为例：（1）打开Eclipse，新建一个Android Project，在根目录下建立两个文件夹：/libs，/assets/www；（2）将PhoneGap压缩包里的phonegap.js，phonegap.jar等必要文件拷贝到对应位置；（3）将工程里自动生成的java文件进行对应修改，并修改 AndroidManifest.xml中的内容；（4）打包生成apk文件。

6 总结

本文通过对目前国内外在线学习平台的研究，对在线学习平台的需求进行了分析，针对桌面端和移动端两种学习方式，探讨了学习平台不同的实现方式。提出现阶段学习平台的实现应针对桌面端和移动端开发不同的程序，即在桌面端使用HTML5制作可适应性网页，在移动端使用Hybrid App方式制作APP。最后简要的介绍了针对移动端使用Hybrid App方式开发应用程序的过程。

参考文献：

[1] 张璇. MOOC在线教学模式的启示与再思考[J]. 江苏广播电视大学学报，2013（5）：5-10.

[2] 赵国海，张岩. 基于HTML5开发跨平台在线教育系统[J]. 科技创业家，2013（8）：46.

[3] 张幸芝，徐东东，贾菲. 基于响应式Web设计的教务系统移动平台研究与建设[J]. 软件，2013（6）：5-7.

[4] 刘春华. 基于HTML5的移动互联网应用发展趋势[J]. 移动通信，2013（09）：64-68.

[5] 赵爱美. 基于HTML5和_NET的移动学习平台研究与实现[J]. 河南科技学院学报，2013（8）：62-66.

[6] 潘志宏，罗伟斌，柳青. 基于HTML5跨平台移动应用的研究与实践[J]. 电脑知识与技术，2013（6）：3992-3995.