王古森

摘要：随着信息化、网络化时代的发展，多样化的信息化教学模式逐渐深入我们的课堂。该文通过引入目前较流行的HTML5（简称H5）技术，充分利用H5的互动性强、分享便捷、兼容性好、打开方式简单、效果反馈及时等特点，探索HTML5在信息化教学中的应用，让教学不但具有趣味化、移动化，更具有智能化的特征。

关键词：HTML5；信息化教学；智能化

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）33-0142-02

Abstract： With the development of information and network， diversified information-based teaching mode gradually penetrates into the classroom. This article explores the application of HTML5（H5 for short） in the information-based teaching by introducing the popular technology of H5 at current. By taking full advantage of its characteristics such as strong activity， easy to share， easy to use and effective feedback， the technology of H5 makes the teaching not only more interesting and more convenient but also more intelligent.

Key words： HTML5；information-based teaching；intelligence

1 前言

根据CNNIC发布的2018年第41次《中国互联网络发展状况统计报告》显示，截至2017年12月，我国网民规模达到7.72亿，其中使用手机上网的比例高达97.5%，即7.53亿。同时报告还显示出中国网民职业结构中学生的占比达到25.4%，是所有职业中群体规模最大的。因此在传统教育的基础上，利用网络互联平台进行移动式、碎片式的信息化教学也将是未来发展的一个主流趋势。

2 HTML5技术及其特点

HTML（HyperText Mark-up Language）是1991年问世的超文本标记语言，为了顺应信息化时代的发展，经过多次修订和完善，衍生出了HTML第5版，即HTML5简称H5[1]，现已成为网络应用中描述网页最常用的语言，同时基于H5技术制作的交互融媒体网页应用也支持在移动设备上进行播放和浏览，并且其优越的跨平台性可以根据不同的终端设备自动调节浏览页面，这就显得曾经在交互式动画设计制作方面一统天下的FLASH局限性越发明显。H5除了跨平台性优势外，还有以下几点应用优势。

1）可以不通过编程来实现动画交互[2]

教师可以通过H5制作平台（如易企秀、木疙瘩、iH5、北测等），利用搜集或自制的图片、音频、视频等通过对关键帧动画，动画关联、图层设计等操作制作出符合课堂教学内容的网页应用。当然若要继续深入制作更加精美的网页应用，仍然需要通过编程来实现，但目前来看在无需编程的情况下，北测的H5制作平台已基本可以满足教师日常的课堂教学。

2）互动性强

与PPT和视频等传统微课相比，利用H5制作出来的课堂教学网页应用更具有互动性，学生可以在自己的手机上通过点击、拖拽等操作与网页应用进行交互。将原本枯燥乏味的理论知识通过H5制作出具有故事性、趣味性、互动性强的教学应用。

3）分享便捷

通过H5制作的网页形式的移动终端课件，学生只要通过手机、平板等移动设备扫描二维码或点击分享链接就可直接进行趣味化、碎片化、智能化学习。

3 HTML5制作平台及其操作介绍

3.1 平台介绍

本文使用的H5制作平台为“北测-H5交互融媒体内容制作实训平台”（www.5irmt.com），该平台是基于国内主流的专业级H5内容设计与制作软件技术构建的教学实训技术平台。平台支持图文、音视频、全景、数据图表等多种媒体形式，支持触控、陀螺仪、定位、表单、拍照等交互行为，支持基于时间轴的关键帧、滤镜、进度、变形、关联等专业动画模式，支持智能渲染、自动适配技术，同时具有加载快，跨平台兼容性好等优点，支持账号间协同协作、素材共享、作品管理、脚本设计等功能。

3.2 操作介绍

在使用北测教育的H5制作平台时，教师首先需要进行用户登录，其次将本次需要制作的网页应用所需素材上传至素材管理，可上传的素材包括视频（.mp4）、音频（.mp3）、图片（.png），前期准备工作完成后，即可点击创建作品进入舞台编辑界面，界面如图1所示。在该舞台上教师可以充分利用平台的控件和上传的素材按照前期设计思路制作一个完整的教学课件。在制作完毕后，教师需要将作品保存后進行预览，若符合教师预期设计，则可将作品通过二维码或者URL进行发布，在发布的同时也可以备注一些相关信息，例如内容的主题、适用的班级、发布者的相关信息等。若预览后发现逻辑错误、控件使用不当、动画交互混乱等问题，可以再次进入舞台编辑界面进行修改优化直至发布。以二维码形式发布的作品学生可通过微信中的扫一扫直接在其手机上观看，通过URL发布的作品，学生可以点击链接自动跳转至播放页面。具体的操作流程如图2所示。

4 H5在信息化教学中的应用

案例：基于H5的单向桥式整流电路网页应用设计

本课程设计包含的主要内容有知识回顾、新课预览、课堂测试三个部分。如图3所示，这三个部分之间是相互独立的，学生可依据自身的学习情况通过点击操作在移动终端上对学习内容进行自由选择。知识回顾包括旧知识的讲解以及新课的引入，新课讲解主要以动画的形式进行设计，这样更容易吸引高职学生的学习兴趣，课堂测试主要目的是为了了解学生对于本节课知识点的掌握程度，测试结果会通过优、良、及格、不合格这四种表现形式反馈给学生。同时学生的测试结果会以表单的形式提交，教师可以通过后台查看统计结果。根据统计的结果教师再进行课堂反思或总结。此种教学方式较为灵活，可以用于翻转课堂也可以用于课堂上的信息化教学。

5 总结

基于H5的网页应用教学模式会由于其本身趣味性和互动性的增强，从而提高上课效率，同时也更好地激发学生的学习兴趣和学习主动性，为学生利用课余时间进行碎片化学习提供了有力保障。与此同时，也提高了教师信息化教学的水平，引领电子信息大类专业的教育教学改革与专业建设。

参考文献：

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

[2] 麻荔波.HTML5在高职院校教学中的应用[J].天津职业院校联合学报，2017（6）.

【通联编辑：代影】