基于HTML5微课平台的开发与实现

李丽平，薛玉倩

（河北软件职业技术学院 软件工程系，河北 保定 071000）

基于HTML5微课平台的开发与实现

李丽平，薛玉倩

（河北软件职业技术学院 软件工程系，河北 保定 071000）

随着信息技术的高速发展，教学方式与学习方式都逐步多元化，传统的大单元、大容量的课程资源已不能满足学习者个性化、碎片化、微型化的学习需求。微课是教育信息化不断发展的产物，其主题明确，内容精炼，符合学习者的学习需求，为高职教育提供了新的教学方式。构建基于HTML5的微课平台能将微课更好地应用到“互联网+教育”的移动学习中，从而提高学生的学习效率，实现教学资源的充分利用。

HTML5；微课；Hybrid APP

0 引言

随着教育信息化的不断深入，教育理念与新技术不断结合，学习者越来越多地通过网络获取知识，教育资源也更加数字化、智能化、多媒体化。随着网络技术与通讯技术的高速发展，“微博”“微信”等新媒体不断涌现，当今时代已成为“微时代”。在教育领域，微课正逐渐兴起，已成为一种新型的教学资源，推进了教学模式的转变。微课是针对某个主题或知识而展开的微型视频教程，其内容呈“点”状、碎片化。微课教学内容精炼、资源容量丰富，适合互联网环境下的传播与共享，加上无线网络的高速发展与智能手机的普及，微课实现了教师“教”的资源与学生“学”的资源在互联网的成功对接。微课作为新的教学资源，在高职教育的课程开发及应用中具有广阔的发展前景。高职教育着重培养高技术技能型人才，所以较为注重操作技能的熟练掌握[1]。但高职教育的实训课面临着师资、实训场地、实训耗材的限制，而微课的出现使这些问题在一定程序上得到缓解。随着4G网络的普及，智能移动终端的应用范围日益扩大，移动学习已成为学习者一种高效、先进、科学的学习手段。通过教育心理学的研究，学习者精神集中持续时间大约为10分钟左右，而微课恰恰符合学习者的这种学习特点。而从学习交流来讲，微课平台为学习者提供了信息共享与交流的平台，激发了学习者的学习动机，促进了其知识的建构。HTML5具有跨平台性等特点，从而摆脱了对操作系统平台的依赖，成为主流Web开发的技术标准之一，Web应用、手机游戏、网页开发带来了新的发展方向。基于HTML5的微课平台通过HTML5技术将客户端界面与网页组合并入同一流程中，以达到信息的交互与共享，实现了页面之间的整合嵌入，不仅更好地满足了学习者自主学习的需求，还辅助教师提高了教学质量[2]。

1 平台开发相关技术

1.1 Hybrid APP

PC端平台的开发有BS与CS两种模式，移动端的开发也可分为直接安装运行在操作系统上的本地应用开发与基于浏览器的Web应用开发。移动端的本地应用有着较好的用户体验，Web应用在部署、更新等方面具有优势。因此综合两种模式的优点整合出了混合模式应用。移动APP开发模式主要包括Native APP（原生开发模式）、Web App（网页开发模式）、Hybrid APP（混合开发模式），三种开发模式特性如表1所示。Hybrid APP开发模式是基于Native APP与Web App两种开发模式综合发展而来的模式，它较好地结合了二者的优势，不仅符合互联网发展的趋势，也体现了体验优势与低成本优势。Hybrid APP由于具有跨平台、低成本开发、良好交互式体验的优点，成为了移动APP开发的首选模式[3]。

表1 开发模式特性比较表

1.2 Ionic Framework

Ionic Framework是用来构建Hybrid APP的HTML5移动应用开发框架之一。混合型的应用是通过一个小型的HTML5网站，使用客户端包裹的shell，来实现访问本地网络层的工作。混合应用程序在实际应用中拥有纯本地应用无法比拟的优势，特别是在网络支持方面，并能获得第三方代码。Ionic不仅能处理各种UI应用程序的前端用户界面，还能对本地移动组件的运作进行支持。Ionic拥有移动UI元素与布局，从而实现在IOS和Android环境中获得原生SDK。Ionic具有构建移动eclipse HTML5开发框架应用程序的固定强大方式[4]。

2 基于HTML5的微课平台

随着4G的普及以及教育学、心理学研究的不断深入，移动学习与课堂学习相结合的学习模式已成为一种教学趋势。在信息化、移动化的大潮下，学习环境、教学环境、教学资源要逐步适应其发展。现今，我国的微课还主要集中在概念、设计与应用层面，但落地实践却是最需要的，基于HTML5的微课平台就是为了满足移动化学习的需要以及相应的信息化教学目标而设计的。

2.1 平台整体设计

为了满足移动化学习的需要以及相应的信息化教学目标，平台由用户管理模块、课程管理模块、资源管理模块、交流学习模块组成。用户管理模块具有用户注册与登录、权限管理、用户使用记录的保存与查询功能；课程管理模块包含创建、订阅课程、课程查询与展示功能；资源管理模块包括教学资源上传与检索功能，教学资源包括微课视频、PPT、相关教学文档；交流学习模块包括发表评论、师生互动功能。平台框架如图1所示。

图1 平台框架图

2.2 前端页面结构设计

基于HTML5的微课平台采用MVC模式设计系统架构。MVC模式由模型、视图、控制器组成，在UI设计中有着重要的作用，它把界面拆分成三种不同的角色，每个角色实现自身的功能。MVC模式可使代码编写更加整洁、直观。MVC更有利于分工开发，前端界面和服务端开发可以同时进行，并且可以使界面程序员（HTML5、CSS3、javascript）集中精力于表现形式，而程序员（C#）可以集中精力处理业务逻辑[5]。基于HTML5的微课平台的开发架构如图2所示。

图2 平台主页结构

（1）平台主页，其内容主要为课程信息。Home－Ctrl控制器通过 CourseService的 getCourseList（）方法从服务器获取课程列表及基本信息，然后通过VideoService的getVideoList（）方法获取每门课程的课程数，再通过TeacherService的getTeachter（）方法获取教师信息。图3为平台主页结构。

（2）视频播放页，其功能主要完成所选视频的播放。VideoCtrl通过CourseService的getCourseList（）方法从服务器获取课程基本信息，通过VideoService的getVideoComment（）方法获取评论列表，通过addComment（）添加评论，通过UserService的getUser（）获得评论者信息。图4为视频播放页结构。

图3 平台主页结构

图4 视频播放页结构

（3）个人主页，主要用来显示用户的相关信息。UserCtrl控制器通过UserService调用getUser（）方法获取用户的基本信息。图5为个人主页结构。

图5 个人主页结构

3 结论

通过对高职教育线上、线下教育运行情况的深入调研，分析了高职教育系统的现实需求，结合当今移动互联网技术、多媒体技术的发展趋势以及高职院校的发展现状，确立了基于HTML5的微课平台的解决方案。基于HTML5的微课平台的浏览器端界面展示通过HTML5语言来实现，应用JavaScript语言来配合HTML5实现逻辑功能；服务器端只提供部分功能与数据库接口，平衡了B/S结构的浏览器端与服务器端压力不平衡的瓶颈。HTML5技术使平台具有较高的工作效率与高可扩展性。基于HTML5的微课平台提高了学生的学习效率，实现了教学资源的充分利用。

［1］刘威.基于HTML5的旅游移动导览系统的研究与实现［D］.广州：华南理工大学，2013.

［2］余胜泉，陈敏.基于学习元平台的微课设计［J］.开放教育研究，2014，20（1）.

［3］陈川.基于微课程的自主学习支持系统设计与开发［D］.武汉：华中师范大学.2014.

［4］涂频.基于 HTML5的网页设计应用［J］.办公自动化：学术版，2013（18）.

［5］周燕，李育泽，徐义东.基于MOOC理念的微课资源网站设计［J］.现代教育技术，2014（1）.

The Development and Implementation of Micro Platform Based on HTML5

LI Li-ping,XUE Yu-qian

(Software Engineering Department,Hebei Software Institute,Hebei Baoding 071000,China)

With the fast development of society and IT,the way of teaching and learning is diversified;the traditional large units and large capacity curriculum resources can not meet the learner's personalized,fragmented and micro learning needs.Micro lecture is the product of the education informatization,it has clear theme and simplified content,and it can meet the needs of the learners and provide the new teaching method to higher vocational education.The platform can apply the micro lecture to m-learning so as to improve the learning efficiency and make full use of teaching resources.

HTML5;micro lecture;Hybrid APP

TP311

A

1673-2022（2017）03-0001-03

2017－04－17

李丽平（1972-），女，河北邯郸人，副教授，研究方向为软件开发与测试；薛玉倩（1978-），女，河北衡水人，副教授，硕士，研究方向为分布计算与并行处理。