翻转课堂的H5数字资源平台的设计与实现

黄戌霞 陈明磊 苏锋

摘  要：随着我国信息化时代的迅速发展，兴起了翻转课堂、创客空间、可穿戴技术、虚拟现实技术、物联网技术等诸多新技术。为合理运用不断产生与发展的新兴信息技术来提高教学质量，文章以“CSS+DIV网页设计”课程为例运用软件开发模型，基于H5技术打造一个数字化教学资源平台，以此实现在教学领域借助信息技术开展翻转课堂教学的教学改革实践，使教师能运用信息技术促进高职院校学生的高水平学习。

关键词：数字化教学资源;设计与制作;教育信息化;翻转课堂

中图分类号：TP311.5;TP391.41      文献标识码：A 文章编号：2096-4706（2020）18-0172-04

Abstract：With the rapid development of my countrys information age，many new technologies such as flipped classrooms，maker spaces，wearable technology，virtual reality technology，and internet of things technology have emerged. In order to rationally use the emerging information technology that is continuously produced and developed in the education field to improve the quality of teaching，this article uses the “CSS+DIV Web Design” course as an example to use the software development model and build a digital teaching resource platform based on H5 technology to achieve the teaching field uses information technology to carry out the teaching reform practice of flipped classroom teaching，so that teachers can use information technology to promote high-level learning of students in higher vocational colleges.

Keywords：digital teaching resource;design and production;education informatization;flipped classroom

0  引  言

2019年4月教育部、财政部印发的《教育部、财政部关于实施中国特色高水平高职学校和专业建设计划的意见》（教职成〔2019〕5号）文件中提出了以“信息技术+”升级传统专业，及时发展数字经济催生的新兴专业。适应“互联网+职业教育”需求，推进数字资源、优秀师资、教育数据共建共享，助力教育服务供给模式升级。提升师生信息素养，建设智慧课堂和虚拟工厂，广泛应用线上线下混合教学，促进自主、泛在、个性化学习的指导思想，本文以“CSS+DIV网页设计”课程为例，实现课程资源的数字化，遵循软件开发的过程，严格按照计划、需求分析和软件设计等流程，基于H5技术打造数字资源平台，以践行翻转课堂教学改革。

1  建设数字化教学资源平台的思路

数字化教学资源平台的搭建的是一个系统工程，与软件开发的过程有着许多的相似之处，所以在对数字化教学资源进行设计与制作时，延续了软件工程学中软件开发的相关流程，包含了如计划制定、需求分析以及软件设计等基本活动。在设计数字化教学资源的过程中，软件系统工程学的思想给予了重要的指导作用，所以在构建时，将其划分为教学需求分析、教学资源设计、教学资源实现以及教学资源测试与维护四个阶段。

1.1  数字化教学资源平台功能需求分析

以“CSS+DIV网页设计”课程为例，该课程理论与实践结合紧密，在计算机应用专业人才培养体系中起到承上启下的作用，学生需要具备一定的计算机操作水平，学完后可为后续的其他相关课程打下基础，是一门专业核心课。但计算机类课程内容更新快，导致纸质教材的内容滞后;学生课堂实践学时不足，导致操作能力低。针对以上问题将该课程内容进行重构，并打造适合高职学生的数字化教学资源平台，提升学生的实践能力，不仅贴合实际，还丰富了校内教学资源，促进了“三教”改革的践行。

本文选择目前主流的H5技术搭建一个在线数字资源平台，H5是一种超文本标记语言，能实现将多种媒体资源信息如文字、图片、视频、音频等进行整合，通过浏览器呈现在PC终端或移动终端，实现各种交互、虚拟仿真效果的实现。使用H5技术构建数字化教学资源并应用于教学中，可促进教学信息传递与教学评价反馈工作，将学生碎片化时间充分地利用起来，激发学生对学习的兴趣，并结合翻转课堂教学模型对教学环节的精心合理设计，实现课前、课堂、课后三个环节的有机结合。该平台分为学生平台、教师平台、管理员平台，系统整体功能如图1所示。其优势的主要体现：一是学生可以通过该平台集中获取到本课程的知识，通过反复学习资源和在线实践把握重点知识，解决难点;二是教师与学生、学生与学生之间可以通过平台进行交流互动，为翻转课堂的实现提供了有力的支持;三是數字化教学资源为教学反馈提供了途径，可实现以评促教、以评促学。

1.2  实现H5数字资源平台的相关技术

要实现资源数字化，需要采用合适的H5制作工具展开对数字资源平台进行设计与实现。依据不同平台的制作工具可以将其划分为四类。

1.2.1  语言类H5平台

使用HTML5、JavaScript、CSS等语言进行编写，这种开发方式可以实现各种教学资源的复杂化交互动作和效果。

1.2.2  模板类的H5平台

随着现今科学技术水平的不断发展，逐渐出现了易企秀、兔展等H5平台，可为用户提供出丰富的文字、图片、动画等模板，快速地实现对生成内容的编辑、删除、替换等，具有操作简便、动画交互简单的特点，比较适合使用在学生成果展示环节中。

1.2.3  教学类H5平台

市场上使用较为广泛的有速课网、绚星微课等，该类平台专门面向教学活动，既可制作H5数字化教学资源，还能为教师的教学环节开展提供更多的支持，例如班级管理、课件管理等，比较适用于开展线上线下混合式教学。

1.2.4  专业制作类H5平台

主要有iH5、Epub360、CoolSITE360等。这些平台拥有可视化的图形操作界面，易自学易上手，可以实现各种复杂的交互功能，如教学过程中的小游戏、虚拟化全景体验。

本文采用网页制作工具Dreamweaver，结合新一代响应式网站设计工具CoolSITE360平台和后台数据库SQL进行数字化教学资源平台的开发与实现。

2  H5数字化教学资源平台设计原则

本平台可让教师实现数字化教学资源的分类存放、管理和使用，实现翻转课堂的教学改革实践，让学生通过PC端或移动端轻松获取学习资源进行在线学习，以提高学习效率，促进学习成效。因此本平台必须具备良好的可用性、适当性和交互性，在此基础上还应具备良好的可扩展性，故在设计中应遵循以下原则。

2.1  简洁性

在教授学习一些简单知识或在引进新知识点时，只需要用一种模态类型将其呈现出来即可，可以选择使用文字或者是短视频的单视觉模式呈现。有专家学者认为，在同种模态的学习环境之下，所输入的信息与学生能够输出的信息是同质的;但是在多模态学习中，输入的信息与学生输出的信息并不是同质的。这就需要学生能够在学习过程中调用自身的知识，并启用新的模态，而这样的过程对学生的认知能力有着严重的消耗。因此，该原则应重点应用在学生课前的预学阶段，此时的学生对知识的储备为零，应该构建轻松易懂的单模态学习环境让其树立学习的信心。

2.2  适当性

在翻转课堂教学工作开展中适当地转变模态，可以有效地提升学生自身的学习效率。当学习模态进行转换时，需要学生将新知识与已有知识结合，从而强化学生自身的学习效果。但是在教学过程中过多地使用音视频材料，会增加学生的认知负担，反而起到消极的作用。因此，本文在对“CSS+ DIV网页设计”课程数字化教学资源进行设计时，合理地对媒体的类型与数量进行了选择，针对一些比较复杂的教学内容就通过文字和音视频结合的形式，通过多模态互相协调、互相促进。例如，学生课堂环节中学习一些HTML和CSS代码时，需要使用到教学课件中的文字解释、图片说明，并且辅助性的添加一些音频示范，配以实践操作和互动等帮助学生从听觉、视觉等方面实现对代码的全方位感知。

2.3  交互性

在影响学习效率的因素中，情感与动机也是重要的存在，学生在传统的教学模式下一味被动、填鸭式地学习，并不能激发起自身的学习动机。所以在对“CSS+DIV网页设计”教学资源展开设计的同时，添加了一些练习题、互动小游戏、评价评学版块，为学生的学习营造出更多自我反思的时间与氛围，促进学生与H5教学资源、学生与教师以及学生与学生之间的线下互动，从而激发起学生的学习兴趣，切实提高学生的动手实践能力。

2.4  可扩展性

教学资源平台可以长久应用于教学的各个环节，因此平台的结构和功能必须具有可扩展性，以满足后续功能需求。

3  数据库的搭建

在翻转课堂教学工作开展中，需要使用先进的教学理念对教学单元展开细致化的分析工作。本平台基于翻转课堂教学的基本流程，使用教学过程中总结获得的项目导向法作为主导思路，对整体的教学单元展开分析设计。项目导向法是将学习内容重构为一个个具体的项目，由教师利用平台作辅助进行输入式教学，学生通过线上线下混合式教学逐步对项目进行学习，通过对应项目的测试、反馈等形式，教师有针对性进行辅导，以解决学生在学习过程中的瓶颈。基于以上流程，在数据库概念模型设计中主要考虑需要使数据库具有在一定历史条件下的语義表达能力，能表达用户的各种需求，易于交流和理解，适应应用环境的变化，具有易更改性。因此，基于E-R模型的一些重点实体定位：用户、课程实体、课程类型、课程资源等，下面列举一些实体E-R图。

3.1  用户

属性有ID、工号、姓名、性别、专业、电话、手机、邮箱、部门号、地址，如图2所示。

3.2  课程实体

属性有课程编号、课程名称、课程描述、创建人、专业方向，如图3所示。

3.3  课程类型

本平台的实现选用的是SQL Server数据库管理系统。通过前期的分析，确定各实体关系和属性，在数据中创建相关数据表。由于篇幅关系，本文以课程类型表的设计为例，其组成的结构为课程编号（CourseID）、课程名（CourseName）、课程描述（CourseDescription）、创建人（CreateUser）、添加时间（AddDate）、专业方向（StudyNum）等，如图4所示。

4  平台的实现

在数据库搭建、完善的基础上，进行本平台的实现。由于篇幅原因，以下只阐述重点模块的实现。

4.1  首页的实现

本平台基于“以学生为中心，教师为主导”的理念进行设计，即教师对教学单元内容展开分析，并设定出总的目标将细化为一个个具体的项目，学生根据自身需求选择相应课程和环节进行学习。在使用H5数字资源教学的过程中，教师根据课程教育的目标，为学生设计并规划出课程开展的细分目标;学生通过教师的相关技术指导进行实践操作，并将自己的创作作品通过电子稿件的形式上传;教师则根据学生作品的情况，选择出一些优秀的、典型的电子作品进行展示。例如教师根据课程要求讲解前端页面的制作，可以将大知识点分解为页面设计、页面布局以及优化设计等，并系统化地组织学生开展实操练习。因此首页上必须具有课程首页、课程概况、在线学习、教学资源、拓展资源、在线测试等导航信息，如图5所示。

4.2  教学资源主页面

为了在教学开展过程中激发学生的学习兴趣，教师需要根据课程教学环节，设计出一些对学生具有挑战性的驱动场景。在教学资源页面中，数字资源主要承担输出任务，为的是更好地促进学生掌握单元教学中蕴含的知识点，同时，通过操作强化代码的应用，达到设计实现网页页面的目标，经过反复优化页面代码，可提升学生的实际应用能力，达到技能目标，如图6所示。

重要特性的关键实现点如下：

（1）支持多文件上传，方便学生上传自己的作品，关键代码如下：

//单个重传

tr.find（'.t-upload-rs-reload'）.on（'click'， function（）{

obj.upload（index， file）;

}）;

//删除

tr.find（'.t-upload-rs-delete'）.on（'click'， function（）{

delete files[index]; //删除对应的文件

tr.remove（）;

uploadListIns.config.elem.next（）[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

}）;

（2）自适应布局，学生、教师在PC和手机上均可进行数字化教学资源的制作、学习，需在head标签里增加如下代码：

4.3  拓展资源页面

教师需要将教学目标作为学生开展学习的重要导向，在课前明确需要输入的知识内容范围，将一些与课堂内容产出并没有太大关联的学习内容，整理归类后放入拓展资源中，供学生自主学习。例如，教师在课堂中讲解了关于前端页面的性能优化，主要围绕反应速度以及整体页面美观设计等，需要学生在课后通过动手实践，不断地优化页面登录性能与外观的营造。因此，教师可以根据实际情况设计出H5小游戏，对课堂教学内容进行补充，将一些常用的元素、标签以及伪代码等作为拓展知识，归类放置在课后的知识拓展中。学生根据自身情况进行自主学习，教师可以在后台管理中看到学生的学情反馈，及时调整教学设计以达到教学目标。

4.4  评学评教页面

及时有效地教学评价对教师的教学和学生的学习都能起到正向激励的作用。本平台在评学评教环节对所有使用H5数字资源的活动数据均进行了记录。平台通过对教师和学生的活动数据分析，反馈学生学习活动的过程、阶段性评价等信息，便于后续教学评价工作的开展。将评价工作纳入学习过程中，作为学生进一步开展学习的契机，也是H5数字资源平台实现诊断与改进的一种发展依据。

5  H5数字化教学资源平台测试与维护

所有的系统平台制作之后都需要经过测试才能够使用，即通过发布或者预览测试资源在不同设备中呈现出的表现成果及各项功能的使用，从而及时地对存在问题进行修改。在教学开展的过程中也可以实现对教学资源平台的测试，通过观察学生的使用情况和反馈，对教学资源中存在的不足之处进行修改。在经历了一系列的测试工作与维护后，才能够打造出高品质的数字化教学资源平台。

6  结  论

教育的信息化改革是现今教育领域的一种趋势，而建设并应用数字资源平台更是教育信息化中必不可少的一部分，如何才能打造出高品质的数字资源平台，是所有教育工作者共同面临的一个问题。本文从软件工程学的角度出发，基于翻转课堂模式，分析了数字资源平台需求，阐述了平台的制作过程。目前基于本数字资源平台的应用成果“CSS+DIV网页设计”课程获批福建省精品在线开放课程，并通过省厅验收;本数字资源平台的应用也使本人在2019年福建省教师教学能力比赛中获得三等奖。希望以此抛砖引玉，为高等职业教育的教学改革实践提供更多借鉴。

参考文献：

[1] 李勝华.数字化教学资源在高职教学课堂中的应用——以网页设计制作为例 [J].信息化建设，2015（8）：230.

[2] 刘芳.动漫设计与制作中数字媒体技术的应用 [J].艺术大观，2020（18）：37-38.

[3] 付琳.视觉化思维在计算机教学中的应用研究——以“网页设计与制作”为例 [J].现代信息科技，2019，3（21）：73-75.

[4] 王成玥.基于视觉信息传达的网页广告智能推送系统设计 [J].现代电子技术，2020，43（20）：160-163.

[5] 曹景凯，马强.H5数字化教学资源的设计与制作 [J].冶金管理，2019（15）：133+135.

[6] 毛宁国.基于ASP校园网站的研究与设计 [J].现代电子技术，2005（16）：87-88+91.

作者简介：黄戌霞（1983—），女，汉族，福建霞浦人，讲师，硕士，研究方向：网页设计;陈明磊（1984—），男，汉族，福建霞浦人，技术总监，工程师，工程硕士，研究方向：大数据系统研发、大规模非结构化数据业务模型构建、大数据存储、数据库构架、数据集群审计监测等;通讯作者：苏锋（1965—），男，汉族，福建福安人，信息技术与工程系主任，副教授，理学学士，研究方向：多媒体技术。