基于H5的互动微课开发与应用

林楠

[摘 要] 基于HTML5的微课具有强交互性，在移动学习上大有用武之地。列举了常用的H5微课制作工具，并以中职《数控加工机械基础》中的《认识液压泵》一课为例，介绍如何制作H5微课。

[关 键 词] H5；微课；H5互动微课；移动学习

[中图分类号] G712 [文献标志码] A [文章编号] 2096-0603（2018）14-0201-01

传统的教学资源无法适应移动学习新潮流。PPT装机量最大，基本只能在电脑上观看。而Flash需插件支持，且制作门槛高。同时以视频为载体的微课，尽管在教育教学上已经炙手可热，但仍存在学习成本高、制作修改繁琐、交互性差的缺陷。

一、什么是H5互动微课

H5指第5代HTML，一种超文本标记语言，适应移动设备的多平台性（安卓、苹果、微软等）。而H5互动微课即利用H5语言编写的一种翻页课件，通过手机终端把文字、图片、音频、视频等以动画的方式展示出来。

二、H5互动微课的优势

（一）制作技术傻瓜化。像制作PPT一样直接套用免费模板，替换页面上的元素即可快速创作H5互动微课。教师还可上传PC端的资源到在线素材库，随时随地都可以在手机上构建。

（二）容易修改。视频微课从PPT设计到录制再到剪辑，中间任何一个环节一旦出错，就得重新录制与输出。而H5互动微课只需替换错误页面上的素材，更新发布即可，使H5互动微课能够根据不同的教学需求及时更新。

（三）更好的互动支持。PPT一旦离开课堂就很难实现师生互动，而完整的微课视频虽包含练习题，却不能提供完成率、正确率等数据。H5微课可以插入表单组件，进行调查、测试及评价，教师在后台实时查看学生提交的数据。

（四）降低了学习成本。在移动端播放视频考验流量和电量，还会出现卡顿，考验学习者的耐心，学习效果大打折扣。而H5互动微课流量耗用小，响应速度快，当网络信号不佳甚至出现断网的情况时，还能继续访问。

三、常用的制作工具

（一）转换类工具。如果有现成的课件，而且时间精力有限，那么可以选用转换类工具，如91速课。它能直接将PPT转换为H5微课，且完美保留所有类型的动画和声音。

（二）场景模板类工具。模板类如炫课，它最新加入的讯飞语音引擎可以将文本转换成多种语音，给H5微课页面快速配音。但是炫课要在PC端下载安装软件。

我们可以用易企秀代替，浏览器登录网站，注册后即可在线创建和编辑H5页面，或者手机安装APP。同类工具还有Maka、百度H5、兔展等。

四、在教学中的应用

接下来，笔者将以职高《数控加工机械基础》中《认识液压泵》一课为例，介绍如何制作H5互动微课。尽管技术方法不同，H5互动微课的制作也同制作视频微课、教学幻灯片一样，要经历从选题、设计、制作到发布的过程。

（一）选题。本文选题时也考虑过同样为核心课程的《机械识图》，但由于画图课件在制作中需要大量動画效果，工作量较大，采用上文所提的转换类工具更为合适。

（二）结构设计。（1）封面和引入。封面和引入在设计时应注意激趣，这决定了学生是否愿意继续浏览，因此可适当设置悬念、引用案例等。液压泵的工作原理与心脏是极其相似的，因此开场我以心脏为引入。（2）新课。新课是整个H5微课的主体，拒绝枯燥乏味，可考虑多样化的表现形式。本课采用游戏闯关形式，由于教学重点是液压泵的种类和工作原理，因此设计了三关，知识点分别为齿轮泵、叶片泵、柱塞泵的工作原理。

（三）练习和小结。练习是检验学习效果的重要依据。通过表单反馈的数据，教师能看清学生存在的易错点和易混淆点。小结部分是对整个H5微课的总结，归纳出“液压泵是利用密封容积的变化来实现吸油和压油的”。学生带着结论在课堂上与其他学生一起验证。

（四）反馈和拓展。课上教师要教什么怎么教，最重要的就是根据学生反馈回来的问题备课。倘若组织者不重视反馈信息的收集与分析，就容易导致与学习者的脱节。

微课的最后以拓展结束，以链接的形式添加下一个微课内容，也可以是本课的深入延伸，形成完整的知识体系。教学大纲对拆装与维修没有要求，但为了理实一体，在微课结尾添加企业专业拆装液压泵视频作为拓展。

五、制作

（一）创建一个场景。易企秀提供了很多场景模板，可按喜好选择。点击“预览”就能看到场景的完整内容。如果实在找不到满意的，也可创建一个空白场景自己设计排版。

（二）建立在线素材库。因为H5互动微课主要在智能手机上使用，搜集的素材需先加工处理再从电脑上传。为节省流量，图片的尺寸一般为640×1010，图片文件大小应小于500kB，音乐控制在1M以内，视频一般采用MP4格式。

（三）开始制作H5微课。基于模板，接下去就是一个“填鸭式”过程，插入素材库内的图片、动画、音频、链接等。这里要注意两点：（1）图文并茂。大篇幅的文字容易造成阅读者的视觉疲劳。因此多用图来表达，再配合转场效果、淡入淡出等动画，提炼文字来最大限度地利用有限的手机屏幕。（2）信息交互。表单是H5微课中实现信息交互的重要途径。目前易企秀支持的表单组件主要有输入框、单选、多选、评分等，采用不同的题型可实现不同需求的教学互动。

（四）发布和分享H5微课。H5互动微课支持在多个系统上浏览，点击发布形成专属链接和二维码，精准投放到微信、QQ等社交平台。教师可以在手机端随时随地关注学生的学习情况，Excel导出的数据是备课依据。

综上所述，H5互动微课更适用于移动学习。实际应用中为避免知识的碎片化，我们应该将H5互动微课体系化、结构化和专题化，将一个个孤立的微课串联起来，帮助学生构建完整的知识体系。

参考文献：

[1]王子文.H5在翻转课堂中的应用实践[J].现代职业教育，2017（15）：124-125.

[2]冷国华，蔡志东，许翊.HTML5互动微课开发与应用[J].镇江高专学报，2016（3）：37-41.

[3]谭敏敏.基于HTML5在线编辑平台的移动学习资源构建与应用研究[J].中国教育信息化，2016（19）：40-43.

[4]倪俊杰.H5课件给教师带来的新机遇[J].浙江教育技术，2016（2）：46-50.