《基于HTML5的交互式课件开发》短学期教学探索与实践

莫小梅

摘要：结合《网页编程基础》的短学期项目开发需求，提出了《基于HTML5的交互式课件开发》这一短学期项目名称。明确了项目的任务、目标及实施步骤。并在项目实践的过程中对项目的引导、过程管理及项目验收都进行了有益地探索。

关键词：HTML5；交互式课件；短学期；教学；实践

中图分类号：G424 文献标识码：A 文章编号：1009-3044（2018）02-0112-03

Exploration and Practice of “HTML5-Based Interactive Courseware Development” Short Term

MO Xiao-mei

（New Media College of Zhejiang Media University， Hangzhou 310018， China）

Abstract： Combined with the Web Programming Basis short term project development needs，proposed the "HTML5-based interactive courseware development" as the short term project name. Identify the tasks， objectives and implementation steps of the project。Made a useful exploration of the project guidance， process management and project acceptance in the course of project practice.

Key words： HTML5； interactive courseware ；short term； teaching； practice

1 概述

《基于HTML5的交互式课件开发》是浙江传媒学院的新媒体学院第一次开设短学期系列项目中的一个项目，所面向的对象是已经学习过《网页编程基础》课程的信息管理与信息系统二年级的学生。如果说《网页编程基础》课程的学习使学生掌握了网页前端编程的基本理论和基本应用，短学期的项目开发则更侧重于从一个完整的案例项目的角度培养学生的综合技能。综合性和完整性是短学期的项目设计时要考虑的两个重要因素。由于传统的网站开发包括网站的前端和后端两个部分，如果直接把传统网站的前端开发作为短学期的实践项目，一方面难以突出和体现网页前端编程的在客户端交互方面的技術优势，另一方面由于网站后端的核心功能无法实现，因此不能形成一个完整的项目。一个不完整的项目会让参与项目的师生都缺乏动力和成就感，因此也得不到充分有效的锻炼。

交互式课件开发是浙江省大学生多媒体设计大赛（以下简称省赛）的一个固定分类，而微课和课件制作也是中国大学生计算机设计大赛（以下简称国赛）的一个固定分类，可见课件开发在各大学生计算机类学科竞赛中的重要地位。交互式课件作为现代信息技术在教学中的运用，由于其更能体现教与学的双向互动，越来越深得人心，而交互性课件也日渐成为了以微课为代表的现代教学改革的重要载体。目前常见的交互式课件开发技术包括Adobe Flash系列、3D场景系列、APP移动平台系列和Web页面系列等。其中Web页面系列课件是一种网页版的课件，它以Web浏览器为运行容器，集成多种网页开发技术（HTML、CSS、JavaScript等）进行交互。 HTML5作为当前Web页面开发的新兴技术，以其可跨平台、实时更新、离线应用以及更高的安全性等特点，还有各种新增元素和特性来增强页面表现能力和用户交互体验，尤其适用于交互式课件的开发。

综合以上背景，提出《基于HTML5的交互式课件开发》这一短学期的项目既能结合学科竞赛，易于激发学生的兴趣和动力；同时又由于其技术上的可行性、完整性和趣味性，可以使学生充满信心和探索精神。此外，借助竞赛的赛项要求、奖励机制和评分标准，对调动学生学习主动性和思维创新性是一种有效补充[1]。学科竞赛所倡导的团队分工和合作精神也可以在短学期的分组实践过程中能得到很好的体现。

2 项目实施的任务与目标[2]

《基于HTML5的交互式课件开发》项目开发可以使学生学习和掌握基于HTML5的前端开发流程及其交互性的应用。通过这个项目的实战训练能够让学生掌握系统的开发技能，意在让学生了解、熟悉、掌握项目的调研设计及前端开发的流程、方法和技巧，并有针对性地加强和提升学生团队协作及项目设计和开发的能力。通过短学期的项目实践，使学生达到以下基本目标：

在短学期的基本目标以外，由于本项目同时切合了国赛和省赛主题的这一特点，学生还可能得到额外收获：第一，可以为国赛和省赛等相关赛事集中发力，累积经验；第二，短学期的优秀作品可以报名参与国赛、省赛及相关的各项大赛竞选。比如，今年课程设计的优秀作品在被学校推荐参与省赛以外，还被进一步推荐参与评选“浙报-阿里”极客计划项目。学生在这个过程中既能体会到好的项目计划的重要性，又能通过对一个好项目的多次打磨和完善，得到有效的锻炼和快速的成长。

3 项目实施概要

3.1 项目周期及主要步骤

项目总的时间为2+1共3周，其中2周为暑假开始前的最后2周，主要用于开发。1周为暑假结束开学后的第一周，主要用于学生汇报、评价及成果收集与展示。学生应利用课余时间加班加点保证项目开发工作的顺利进展，还可以利用暑假时间进一步完善开发成果。

项目开发主要分为以下3个步骤：

（1） 自由选定小组，选定课件内容、设计教学方案

（2） 利用HTML5、CSS3、JavaScript技术完成页面设计和交互功能endprint

（3） 实现作品上线与维护更新。

3.2 项目开发的主要过程

（1） 小组讨论，确定课件的主题及相关的功能，完成教学设计。

学生按每小组1-3人的要求自由结合组队。组队时建议学生结合自己的兴趣、特长和知识面等特点，根据“异质组成，各尽所能，组内合作，组间竞争”的原则[3]，并在组队的同时确定交互式课件项目的选题。通过小组讨论进一步划分功能模块，并结合目标用户的特点（年龄、职业等），明确该课件用于帮助用户解决何种问题。

（2） 明确小组分工，完成页面设计和交互功能。

各小组根据小组成员的能力和特长选定组长，并分配小组成员的分工（如素材收集和美工处理、页面布局和制作、整体规划和编程等）。参考技术方案如下：

l 主要使用的软件：Dreamweaver CC等相关软件

l 主要框架：bootstrap框架

l 主要使用的技术：

a） 通过HTML5标记添加网页元素（如文字、图片、音频、视频、动画等）

b） 通过CSS3样式表控制网页各元素的外观表现（可实现部分的交互功能）

c） 通过JavaScript完成主要的交互功能（如实现页面动画、识别用户操作、即时判断正误等）

（3） 实现作品上线与维护更新。

首先申请免费的网站空间账号，通过ftp传输工具将阶段性的作品及最终的成品在空间上及时进行更新，并通过不同的主流浏览器（如Google Chrome浏览器、Internet Explorer浏览器等）对项目效果进行实测与评估改进。

3.3 学生成绩评价考核方式与评分办法

短学期训练项目的成绩评定根据选题的难易度、完成情况、设计报告、学习态度，结合学生分析问题、解决问题和实际动手能力以及学生在组内所起的作用等方面综合考评。成绩按百分制评定。

考核标准包括：

（1） 项目完成情况（60%）

（2） 实践总结报告（10%）

（3） 平时纪律和完成情况（平时成绩）（10%）

（4） 个人作用系数（20%）

4 项目探索与心得

4.1 充分发挥教师的引路人作用

在短学期的项目确定了以后，教师对整个项目的目的、要求和过程都有较为清晰的思路，而学生在选题之初往往是相对迷茫的，不知道如何选定项目的主题、模块、界面，以及实现的方法。这时候，教师就要及时给出总体方向和过程指导，充分发挥引路人的作用，以尽快把学生领入门，并指出前进的方向。

比如，在第一天的课程中，教师应对项目实施的任务和目标、实施周期、项目概要、开发思路、相关的学习资源、考核的方式及评分要求等方面进行全方位的介绍，使学生对短学期的项目要求有全局性的了解。同时明确首日任务清单（包括项目分组、项目的前期调研工作、素材的准备工作、软件的准备工作，以及项目规划书的要求等）。

在指导学生如何进行教学设计时，教师通过给学生提供相关的大赛网址，引导学生多观摩获奖作品的演示文件，并从中总结交互式课件中常见的功能模块（如学习内容、疑点难点、知识拓展、练习反馈等）及表现方法，以及总体设计和布局特点等。

在项目开发初期，教师为学生提供主要的软件（Dreamweaver CC等）及相关素材和学习资源的网址，明确项目的主要技术方案；在作品制作阶段，明确作品的规范，并及时指出和纠正学生常见的典型错误及解决思路。并做好过程管理，帮助学生把控项目的总体进度，提供现场的答疑和辅导；在作品的维护与更新阶段，教师为学生介绍2个免费的网站空间资源，提供ftp传输工具软件，并为学生演示申请空间及作品上传的相关步骤和方法。

通过及时有效的引导，使学生尽快理解项目的目的和方法步骤，并减少失误，少走弯路，工作效率得到较好的保障和提高。

4.2 结合工作文档的形式做好过程管理

由于短学期项目是一个综合性的项目，除了对技术的掌握和运用以外，还要重视相关文档（如项目策划书、暑期计划书及实践总结报告）的编写工作。其中一个好的项目策划书至关重要！它相当于一份较完善的项目蓝图，能让学生从一开始就用心调研，慎重選定项目主题，明确选题目标及重点和难点，并对项目的各部分组成结构和交互特色作出清晰的规划，为后续的实际开发指明方向；同时对组内成员合理分工，为整个团队工作的顺利开展打下扎实的基础。

由于短学期采用2+1共3周的项目周期，其中前2周与后1周之间有一个暑假的缓冲期。一般情况下要求学生在暑假前的2周内基本完成项目开发，并鼓励学生合理利用暑假时间进一步完善开发成果。但由于暑假时间较长，所处的环境一般也较为休闲宽松，加上假期亲友之间各种社交活动的影响，学生在没有计划的情况下很容易产生拖延和懈怠的情况；此外，小组成员一般也都分散各地，不再具备当面交流讨论的条件。因此，一个合理可行的暑期工作计划是很有必要的！它能够让整个小组认真总结已完成的工作和未完成的内容，并结合各成员的暑期安排对小组工作和各组员的分工及合作形成合理的统筹计划，明确各阶段的工作内容和目标，为按时保质完成工作提供了有效的保障。

实践项目总结书是短学期的最后一个文档，也是最重要的、需要存档备案的文档。它体现了学生对短学期项目开发作品的系统说明、重点提炼和心得总结，为今后的论文写作，以及各种工作报告的撰写提供了很好的训练，打下了良好的基础。

4.3 以答辩的形式进行项目验收

本项目以答辩的形式进行演示和评分。组长负责介绍和演示整个项目情况，包括自己所做的工作，各小组成员则重点讲解自己的工作及在小组写作中所发挥的作用。演示的过程一方面可以锻炼小组成员在实际操作及语言表达方面的项目输出能力，另一方面教师通过观看、聆听和提问的过程可以了解和检验项目的完成情况，以及学生在项目实践过程中所发挥的作用、所取得的进步和存在的问题，从而对项目的完成情况和学生在项目开发过程中的个人作用系数做出较为客观合理的评价。endprint

5 总结

《基于HTML5的交互式课件开发》是《网页编程基础》课程第一次开展的短学期项目。我们在项目的选定和目的、项目的流程安排以及对学生的有效引导和过程管理等方面都做了有益地探索。学生在整个短学期的过程中对项目的开发非常投入，学习和实践的气氛融洽且热烈，自主学习的能力和团队协作的精神得到了有效的提高，这在最后的项目验收阶段及学生的总结报告中也得到了很好的反应。

由于本项目紧密结合相关竞赛，且有较明显的应用价值。在最后的成果展示中出现了一批从选题、创意及艺术性和交互性都较为优秀的作品。部分作品先在浙江省多媒体设计大赛的校级选拔赛中获得前几名的优异成绩，并代表学校被推荐到省里参加竞赛，接着又被推荐参与评选“浙报-阿里”极客计划项目。还有部分优秀作品因为选题不在省赛的范围内，但符合国赛的要求，也可以在来年报名参与国赛的选拔。

不仅参与竞赛的学生在在各项选拔赛中收获满满，每位參与本项目的同学都在不同的角度和不同程度上得到了较全面的锻炼，收获到了在课堂学习中无法得到的成就感；同时结合自己的不足，更找到了下一步努力的方向和动力。这就是我们在本次课程短学期项目开设之初和整个过程中用心思考，认真探索和实践所得到的最好的肯定和回报！同时，我们也将会在总结经验的基础上继续思考和提高，以利益更多的学生。

参考文献：

[1] 程琳，张晶晶，范严，郭攀. 基于“案例教学，竞赛驱动”的《网页网站技术》课程教学改革探究[J]. 电脑知识与技术，2015，11（27）：84-85.

[2] 张赵辉. 《网页前端技术》的课程设计[J]. 山东工业技术，2015（3）：310.

[3] 董晨，李继芳. “分组竞赛式教学法”在网页设计课程中的探索与实践[J]. 计算机教育，2007（10）：113-114+15.

[4] 叶银兰. 以多媒体竞赛项目为导向，培养高职生网页设计创新能力的研究[J]. 科技信息，2010，（16）：27+29.

[5] 李勇. 以学科竞赛促进《网页设计与制作》课程教学改革与创新的思考——以参加中国大学生（文科）计算机设计大赛为例[J]. 价值工程，2010，29（31）：262-263.

[6] 程代娣. “网页设计与制作”课赛融合教学模式研究[J]. 安庆师范学院学报：自然科学版，2016，22（1）：142-145.

[7] 王立伟. 将技能竞赛形式引入《网页制作》教学[J]. 天津职业院校联合学报，2011，13（8）：118-119+122.

[8] 朱喜基. 网页制作技术基础课程的教学实践研究[J]. 电脑与电信，2016（Z1）：60-61.endprint