基于HTML5的响应式课程教学辅助平台研究

徐小栋 胡春 韩俊 徐亚

摘  要：阐述课程教学辅助平台以基于HTML5、Bootstrap响应式前端开发框架等新技术条件下的功能规划、关键数据对象，开发过程中应考虑的关键技术点，以及系统建立的目的、系统适用的应用对象。并对系统中未考虑的相关功能做出说明，以及重新增设相关功能的方法。

关键词：HTML5;响应式;教学平台

中图分类号：TP393.09;G434      文献标识码：A 文章编号：2096-4706（2019）20-0093-03

Abstract：This paper explain the function planning and key data objects under the new technology conditions such as HTML5 and Bootstrap responsive front-end development framework，and the key technical points that should be considered in the development process，as well as the purpose of system establishment and the applicable application objects of the system. It also describe the relevant functions not considered in the system and how to re-add related functions.

Keywords：HTML5;responsive;teaching platform

0  引  言

自2014年10月29日万维网联盟宣布HTML5标准规范制定完成以来，Web前端开发基本上都转到了以HTML5+ CSS3为基础的新技术平台，在此基础上再加之以Bootstrap响应式前端开发框架等的应用，更使所开发的Web前端不仅适用于PC客户端，而且也能适用于移动设备端。在如今移动设备（智能手机、Pad等）随处可见，几乎人人持有的年代，所开发的Web应用系统能适用于移动设备端，既节省了专门针对移动设备端开发的费用，又扩展了Web应用系统的适用范围，使更多的设备能访问和使用Web应用系统。因此本文所研究的课程教学辅助平台前端开发，采用基于HTML5的响应式布局技术，既可方便地使用到HTML5所带来的新技术、新功能，又可使所开发的Web应用系统针对不同的终端设备具有良好的适应性。

课程教学辅助平台实质上属于一种网络教学平台，网络教学平台的形式多种多样[1-4]。本文所研究的课程教学辅助平台是以课程为核心，辅助授课教师围绕课程建立教学资源、课堂环境、学生作业、测试和考评等各种教学环节。目的是通过系统收集各种教学资源（教学课件、教学视频、测试题库、学生成绩等），当各类资源积累到一定程度后，通过系统所能提供的各类教学资源，既可减轻授课教师备课、批改作业、试卷的工作压力，又可根据系统提供的相关数据分析教学效果，改进教学方式和方法。

1  系统功能概述

课程教学辅助平台的主要作用一是能辅助授课教师完成课堂教学，使授课教师在课前所准备的教学课件、教学视频等教学多媒体内容，在上课时能通过网络传送至教室的多媒体教学设备，辅助教师进行课堂教学，或是将授课教师课前准备的课堂练习发布给学生，在学生完成练习后辅助教师给出评判结果;二是能在课后向学生布置作业，当学生在规定时间范围内完成作业后，能辅助教师批改作业、统计成绩;三是能帮助学生对课程学习内容进行复习和巩固;四是能在完成相应教学内容后（如某个教学单元，或期中、期末）根据授课教师的安排，对学生的学习情况进行测试和考评，并根据测试和考评结果分析整个课程的教学情况。

由上述分析可知，该系统从使用者的角度来看，可分为教师端、学生端和系统管理员端。授课教师从教师端登入系统，在系统中创建课程（新课），或添加系统中已有课程;为新建课程添加教学内容（如教学课件、教学视频等）、测试内容等，或對系统已有资源根据自己的教学需要做出设置和更改;为课程添加教学班级、学生等;为学生布置课堂练习、作业、测试等;并在学生完成相关练习、作业或测试后，在系统辅助下完成相关练习、作业或测试的批阅。学生根据教师的授权从学生端登入系统，在系统中可观看教学课件、教学视频等教学内容;可完成教师所布置的课堂练习、作业、测试等。系统管理员从系统管理员端录入系统，在系统中完成对教师及其权限的管理，以及对系统数据进行维护等操作。因此整个系统功能结构如图1所示。

2  系统中的关键数据对象

如上文所述，该平台是以课程为核心，课程是该系统中的关键数据对象之一。教师在创建了新课程，或添加了系统中的已有课程，才能依托课程创建教学资源，或利用已有教学资源;才能创建课堂，课堂是另一个关键数据对象，以课堂对象为容器，加入班级和学生，对班级和学生进行管理;以课程和课堂为基础，完成预习、作业等布置，完成测试或考试的布置。学生在选择了相关课程之后，才能在教师的提前安排下，完成对该课程的学习任务。

教学课件、教学视频、试题库是课程下的几个关键数据对象。在新建课程中，这几个数据对象都是空的，由新建课程的教师负责添加数据。对已有课程，系统中保存有一套系统默认数据，教师可直接使用。系统中的默认数据可由系统管理员根据相关课程的专业教研室意见，将系统中已存在的数据设定为系统默认，或直接将新建课程的数据设为系统默认。教师也可上传自制的课件或视频去覆盖系统默认数据，或添加个人数据（如题库）。为了减轻教师的备课负担，避免备课教师为了网络教学而不得不学习网页设计这种情况，该系统以教师常用的ppt或pptx作为教学课件，接收教师上传的ppt或pptx文件，并能在浏览器中播放上传到服务器端的ppt或pptx课件。为了减轻服务器端的负担，对老师上传的视频文件格式应做适当的要求，如只能上传mp4、OGG和WebM等格式。

教师、班级、学生是该系统中其他几个关键数据对象。教师是授课的主体，班级是授课教师管理学生的容器，也是教师创建课堂的基础，教师在布置预习、作业、考试时，一般是以班级为对象的，很少有直接针对学生个人的情况。学生是教师实施教学的最终对象，教师为教学而设置预习、作业、测试等任务，最终由班级中的每个学生来完成。教师信息及权限由系统管理员创建和设定，班级和学生信息可由系统管理员统一设定，也可由授课教师设定。但系统应对这几种数据进行统一编码和统一管理，避免数据的重复。

系统中所有数据的删除权限归系统管理员所有，严格控制对系统数据资源的清除，以避免由于误操作而损坏系统数据资源。

3  系统建立中的几个关键点

3.1  ppt或pptx教学课件的播放

由于在系统中授课教师上传的教学课件是ppt或pptx文件，而ppt或pptx文件是无法直接在浏览器中播放，如果直接在网页中给出教学课件的链接地址，将会造成学生点击后直接下载文件的情况。这个问题的解决，可以有两种方法，第一种方法是利用对外公开的文档在线预览服务网站，如http：//www.officeweb365.com/。使用这种方法有两个前提条件，一是必须在该网站注册，二是系统的Web服务器必须有外网可访问的域名，即存放ppt或pptx文件的服务器必须是提供文档在线预览服务的服务器可访问得到的，这样文档在线预览服务器才能读取到需要转换的文件，并将转换后的结果发送到客户端。第二种方法是借助于微软公司的Office Web APPs Server软件包，搭建自己的Office Web APPs Server服务器，而Office Web APPs Server服务器并不单独使用，要实现ppt或pptx文件能在浏览器中播放，必须要三台服务器协同工作，三台服务器分别是域控制服务器、Web服务器和Office Web APPs Server服务器，而且Web服务器和Office Web APPs Server服务器必须加入到域控制服务器所控制的域中。有关Office Web APPs Server服务器和域控制服务器的搭建这里不做介绍，可参考微软公司相关技术网页。使用第二种方法的好处是Web服务器和Office Web APPs Server服务器都在自己的局域网内，Web服务器无须对外公开，也不需要申请正式的Internet域名。

3.2  教学视频的管理和分发

系统中的教学视频资源是一类十分消耗系统存储空间的资源，当有多个用户同时访问教学视频资源时，如果Web服务器同时兼做视频分发服务器，可能造成Web服务器负担过重。因此可考虑建立单独的视频存储和分发服务器，以减轻Web服务器负担。实际上，系统中教学视频资源的管理和使用，十分类似于视频点播系统，因此可参照视频点播系统来建立。有关教学视频的管理和分发，以及前端播放功能的实现，可参阅参考文献[5-8]。

4  关于师生在教學过程中的交流互动问题

从图1中可以看出，在该系统中并未考虑在网络教学环境中师生交流互动的情况。这是基于如下所述的考虑：该系统为课程教学辅助平台，是辅助教师以课程为核心，完成相关课程的教学。其并不是远程网络教学系统。也就是说课堂教学仍然以教师授课为主，教学活动过程中教师和学生之间可以直接面对面地交流，教学活动的环境仍然是在学校的教室中。因此在系统中未考虑设置师生交流互动的功能。当然，考虑到课后学生依然有和教师进行交流的需求，可考虑在系统中设置类似于留言板的功能，但与留言板并不完全一致，学生和教师的交流主要是与授课教师，而非系统管理员，不同的课程的教学一般是由不同教师承担的，这是与普通留言板不一致的地方。为了增强师生交流的功能，也可以考虑增加教学论坛等这样的功能。

5  结  论

响应式课程教学辅助平台的建立，一是为了扩展系统的设备适用范围，增强信息化教学的功能;二是为了辅助授课教师完成教学任务，减轻授课教师在备课、作业批改、考试批阅等环节的工作压力。系统建立的目的是收集教学资源，辅助教师教学，教学的主体仍然是授课教师，教学活动仍然是教师和学生之间直接的、面对面的交流。该系统并不是远程网络教学系统，因此未考虑师生之间的交流环节，但可以将此环节增设到系统中。

参考文献：

[1] 蒋东兴，张继才，罗念龙.高校网络教学现状与对策 [J].计算机教育，2004（9）：44-46.

[2] 张庆，管锦亮.基于HTML5的可视化编程教学平台的设计 [J].沈阳师范大学学报（自然科学版），2018，36（2）：163-168.

[3] 刘东，王金社.基于Web的互联网网络在线辅助教学系统设计 [J].现代电子技术，2017，40（20）：28-30.

[4] 蔡华龙，刘挺.基于移动终端的教学互动在线辅助系统研究 [J].无线互联科技，2016（9）：51-53.

[5] 孙丹鹤，王振.基于HTML5的视频网站播控系统 [J].电脑知识与技术，2011，7（36）：9517-9518.

[6] 谢淑丽，徐镇辉.基于HTML5跨平台微课视频系统的设计与实现 [J].陕西理工学院学报（自然科学版），2016，32（5）：63-68.

[7] 吕志钢.支持移动学习的教学视频点播系统设计 [J].电子世界，2014（5）：134-135.

[8] 张文.基于HTML5的视频播控和客户服务系统 [D].西安：西安电子科技大学，2014.

作者简介：徐小栋（1964-），男，汉族，云南曲靖人，副教授，学士，研究方向：计算机应用技术、程序设计与开发;胡春（1982-），男，汉族，云南曲靖人，讲师，硕士，研究方向：计算机应用技术、程序设计与开发;韩俊（1972-），男，汉族，云南曲靖人，讲师，硕士，研究方向：计算机网络技术、程序设计与开发;徐亚（1979-），女，汉族，云南曲靖人，讲师，硕士，研究方向：Web前端设计与制作、数字媒体。