基于HTML5的移动端多媒体教学资源的开发与应用

严景文

摘 要：互联网时代学习方式的转变使移动端教学资源的开发成为教师备受关注的课题。HTML5技术的飞速发展为开发跨平台互动多媒体教学资源提供基础。文章探讨如何将HTML5技术与移动端多媒体教学资源开发紧密融合，以移动端物理力学实验多媒体课件的开发为例，总结出应用HTML5技术制作移动端多媒体教学资源的五个要点并做创新应用的思考。

关键词：H5技术 移动端教学资源 开发 创新应用

中图分类号：G642 文献标识码：A 文章编号：1003-9082（2018）06-00-03

HTML5（简称H5）是第五代超文本标记语言，作为当今颇受欢迎的移动网页开发技术，具有免装插件、动画效果和交互性强、简单易用等突出优势。依托H5在线制作平台，教师能轻松开发适用的教学课件、微场景或测试题，提升课堂教学效果，激发学生的学习兴趣、鼓励学生课后的移动学习和个性化学习，并促进教学改革实践如翻转课堂。因此，探讨如何将H5技术与移动端多媒体教学资源开发紧密融合有其现实意义。

一、HTML5技术的发展与应用

HTML是超文本标记语言，1991年问世。1993年HTML首次以因特网草案的形式发布，经历了2.0、3.2和4.0，直到1999年的HTML4.01版本稳定下来。由于发展缓慢，逐渐被更加严格的XHTML取代。HTML5是继HTML4.01和XHTML1.0之后的超文本标记语言的最新版本，2014年10月由万维网联盟（W3C）发布正式推荐的标准。其主要目标是将互联网语义化，以便更好地被人类和机器阅读，同时提供更好地支持各种媒体的嵌入。2015年，基于H5的移动端网页制作和开发平台纷纷出现，各类平台让H5制作简单易操作，技术的平民化使得H5很快流行开来。2016年以来，H5技术飞速发展，为开发基于H5的跨平台互动多媒体教学资源提供基础。

H5在线制作工具和软件不断涌现，比如有MAKA、兔展、iH5和易企秀等在线制作平台和炫课等H5课件制作软件。它们提供可视化的操作界面，可以免代码实现丰富的动画和交互功能。有些平台还提供模板资源和参考教程供用户套用，大大简化制作流程。所以常在朋友圈看到利用H5制作的活动宣传单、婚礼请帖、广告、游戏、美术作品展等。可见，H5页面正以其强大的传播效果渗透着生活的方方面面。教师利用简单的H5页面制作工具或软件开发移动端教学资源，用它来传播知识、辅助教学成为可能。

二、移动端教学资源的开发现状

目前，微课是教师在信息技术与课程整合实践过程中较常应用的多媒體教学资源。关于微课的教学设计、资源开发和应用模式的研究不在少数。近年，支持移动设备的平台越来越多，以微信为代表的通讯社交平台加入了移动学习资源开发的行列。码课码书逐渐成为教学资源的新型呈现方式。码课码书是在微信平台和二维码技术支持下将教学内容汇集成二维码，供学习者在手机平板上扫码看书、上课的一种教学资源。基于微信公众平台开发的培训课程资源也触手可及。诚然，移动教学资源的开发成为教师备受关注的课题，是值得探讨和挖掘的领域。

H5作为近三年兴起的技术标准，将其应用于教学资源的开发也有一些案例，包括微场景搭建、小学生课堂游戏开发和古诗词课件制作等。部分研究重在介绍利用某H5在线制作平台开发多媒体教学资源的过程，而部分研究聚焦H5教学资源的应用模式。本文将在此基础上，结合H5移动端物理力学实验多媒体课件的开发实践，探究H5移动端多媒体教学资源的制作要点，望能为同类开发提供参考。

三、H5移动端教学资源的开发实践

HTML5在教学中的应用十分丰富。利用H5在线制作工具或软件，教师不仅能制作出课件、闯关小游戏等丰富课堂教学的页面，还能发布H5手机网页版的校园通知来促进教学管理和家校互动，也可制作线上美术作品展、班级电子相册和安全知识培训手册。使用H5在线制作工具开发多媒体教学资源的四步法为：选题→设计→制作→发布推广。下面以物理力学《自由落体运动探究实验》作品的开发为例做进一步阐述。

1.选题

在选题时，首先要明确该H5页面的主题和用途，判断该主题的知识点是否适合通过H5网页呈现。

本案例是一个以自由落体运动探究实验为主题，用于高中物理力学实验教学的多媒体课件，它既能够在课堂教学，又能用于学生课后自主学习。力学是中学物理学习中最重要的板块之一，但很多物理力学现象或是课本中的力学实验，由于受到实验设备和环境的限制，难以直观、清晰地演示和再现，不利于力学知识的学习与掌握。自由落体运动实验教学中，我们难以模拟真空环境，也未必保证实验能精准地控制变量。而H5能够很好地解决这个问题，H5网页以音频、动画或文字的形式，更生动直观地演示实验并解释其中知识点和原理。线上学习与线下体验相结合，帮助学习者建构知识。

2.设计

在设计环节中，首先要针对H5页面的主题和知识点开展教学设计，教学设计应明确具体教学内容和所需的多媒体资源，以便图片和视音频素材的搜集与整理；同时要体现计划使用的教学方法和教学步骤，这影响着H5页面的结构和功能。之后，我们需要进行页面结构和功能设计，明确此H5作品的页面组成、各页面的功能、页面间的跳转方式与使用的些多媒体资源和动效，以及是否包含可输入文本框和按钮等用于交互的元素。

2.1教学设计

本课件的教学目标是学生能够说出自由落体运动的定义、特征和条件；并通过观察实验，知道物体的质量不是影响自由落体运动速度的原因，走出常识误区。课件中的实验需要相同的小球、羽毛和玻璃管各三个。一个小球、一根羽毛和一支玻璃管为一组，共设置三组，分别代表充满空气、抽去部分空气和真空的情况。让各组小球和羽毛在同一高度同时下落，进行控制变量，对比落地快慢。

教学过程分为三个部分：问题导入、实验演示、阐述实验原理和结论。在课前提出问题“重物和轻物哪个掉落速度快？”，让学生根据生活中的观察去思考与猜测，以此激发学习兴趣，为下面实验现象激起学生的认知矛盾做准备。接着，用文字引导学生带着问题观看实验动画，让学生通过肉眼观察对比轻重不同的小球和羽毛是否同时落地，其落地快慢是否和空气阻力有关。借助实验现象验证自己的猜想正确与否，并做出初步的结论。最后，用文字和语音解说阐述自由落体运动的实验原理和结论。

2.2页面结构与功能设计

本例把H5课件分为两个页面，第1页用于问题导入，第2页用于实验动画的演示以及实验原理与结论的讲解。

在该课件的首页，我们用文字抛出问题并提供3个选项，在题干和选项旁边插入小球、石块、羽毛和纸团的图片，启發学习者结合对生活现象的观察作答。点击选项出现弹框，显示学生点击的选项，并用文字引导学生进入实验环节，去验证自己的答案。下方也需设置“跳过预测”的按钮，以便直接跳转到第2页。

在课件第2页的顶部，用文字说明实验的题目和每一组实验环境，并用不同底色代表“充满空气”、“抽出部分空气”、“真空”的区域；实验演示以动画的形式呈现，包括羽毛、小球的图片素材。该页面包含两个功能按钮：一是“再看一遍”按钮，点击可以重新加载页面并播放动画；二是“查看知识点”按钮，点击出现解说文本和语音讲解，再次点击隐藏文本。在知识点文字旁，设置音频开关的按钮，可随时关掉声音或再次播放。

值得一提的是，在选题和设计上，应充分考虑学生的认知特点与需求，选取出重点、难点、疑点、易错点、易混淆点、考点、热点、扩展点等作为选题，但选题不宜过大，还需注意前后知识点的衔接[1]；教学设计应体现教师为主导、学生为主体的教学思想，遵循层层递进的原则；设计思路以简要明快、功能齐全为基调，除具有良好的交互性外，还应考虑具有直观性、使用简便等特点。

3.制作

3.1制作工具选择和素材准备

能够实现上述动效和功能的H5制作工具还不少，iH5在线制作平台就是其中的一种。制作本例前需搜集羽毛、小球的图片素材。素材来源包括千图网、昵图网、花瓣网等，可以直接下载背景透明的PNG格式的图片。同时也可使用平台自带的绘图工具绘制小球等素材。

3.2设置页面

在iH5中新建工程，新建两个页面。分别在第1页和第2页导入或绘制所需图片。插入文本和提前录好的解说音频，注意为素材命名。

3.3制作动画

首先制作充满空气环境下的实验动画。该实验的动画分两个阶段：

第一阶段——竖直加速运动

选中羽毛1，在右侧点击小人跑步的图标，为其添加【运动】的方法。在运动属性面板，将移动速度设置为0，加速度设为58.1，速度方向设为正90度。

注意：在iH5中加速度的单位和现实运动中加速度的单位不一样；规定水平向右为0度，顺时针累加，因此竖直向下就是正90度。同样的，为小球设置运动，加速度为118.1。

第二阶段——碰撞停止

构建物理世界：在舞台上添加一个画布作为物理引擎的载体。在画布下添加【物理世界】，命名为“物理世界1”，并将其它元素依次拖动到它的下面。

添加物体：为使羽毛和小球能模拟真实世界中的物体，产生碰撞效果，我们要对碰撞的羽毛、小球和板添加【物体】这一属性。在物体的属性面板中点击【编辑碰撞边界】，分别为它们描绘边界，用来判断何时发生碰撞。为了避免玻璃管的底板在物理世界中受到重力下落，需要在【物理世界】的属性面板中关闭【自动播放】。

设置碰撞事件：选中底板，点击对象树右侧的感叹号图标，设置碰撞事件。在事件属性面板中，选择触发条件为“开始碰撞”，碰撞对象是“羽毛1”，目标对象是羽毛1下的“运动1”，其目标动作是“暂停”。同理设置碰撞对象为“小球”的事件。

制作完一组动画后，对“物理世界1”进行复制，对元素重命名并调整位置。羽毛2、羽毛3运动加速度分别设置为98.1和118.1，而小球2、小球3的速度无需改变。

3.4制作交互

在左上角的【小模块】选择两个按钮拖至页面中，将按钮文字分别改为“再看一遍”和“查看知识点”。

“再看一遍”按钮：对“再看一遍”按钮作添加事件，触发对象为点击，目标对象和目标动作分别是舞台和重新加载。

“跳过预测”按钮：对按钮设置事件，满足触发条件点击时，舞台跳转至下一页。

“查看知识点”按钮：首先，在知识点文本的属性面板中，关闭文本的初始可见。其次，在舞台下添加计数器1，用于统计点击的次数。接着，对该按钮设置事件，每点击一次，就触发目标对象计数器1产生加1的动作。最后，对计数器添加两个事件，触发条件都是计数器为奇数。第一个事件触发知识点文本显示。第二个事件触发音频播放。同样的，再添加两个事件判断偶数的情况。

音频开关按钮：在舞台下添加计数器2。与 “查看知识点”按钮的制作步骤相似，对音频按钮和计数器2添加事件，使得点击次数为奇数时触发音频播放，偶数时音频暂停。

4.发布推广

H5课件制作完毕后，经过预览和多次调试，再发布至H5平台上，平台便会生成二维码和网址链接，作品大功告成。教师将二维码或链接然后通过微信、QQ、论坛、贴吧等社交媒体进行分享传播，学生便能在不同终端通过点击链接或扫二维码等方式观看H5课件，实现随时随地的个性化与交互式学习。

四、H5移动端多媒体教学资源的制作要点

现在教师使用信息技术手段辅助教学的形式多是录制微课、制作传统课件，步骤比较繁琐。不断涌现的H5工具平台和制作软件降低了技术门槛，它允许教师在可视化界面操作，远离繁杂代码，将多媒体教学内容汇集于一个网页中，添加课堂互动测试、创设情境、开发游戏等。精心打造微场景、充分利用物理引擎和运动属性、合理设置事件、巧用计数器和变量则是制作H5移动端多媒体教学资源的关键。

1.打造微场景，生动导入

一个好的H5教学资源需在一开始就抓住学生的眼球，激发学习兴趣。正如课堂中，为了介绍某个知识点，教师需要生动有趣的课堂导入，讲一个故事，创设一个场景、分配一项小任务、组织课堂游戏或是抛出一个问题。因此，教师可利用H5搭建微场景，让生活中某个典型的场景鲜活地呈现在学生面前，将他们带入社会、带入大自然。用动画讲故事以交代背景，让学生通过H5页面中人物的语言、动作更快对课文中的角色产生亲切感。在H5页面中加入音乐和语音渲染氛围，或是通过设置课前思考题，鼓励学生在往后的学习中带着问题找答案（如图1）。当然也可制作小游戏热身，提高课堂活跃度与学习积极性。

2.利用物理引擎和运动属性，增添炫酷的动画效果

物理引擎便于再现和放大宇宙万物中的科学现象。本案例就是利用iH5中物理引擎的功能，模拟了真实的物理世界，把羽毛和小球設置为其中具有碰撞效果的物体，又为其设置运动的属性以实现下落的动画演示（如图2）。此外，还可为文字和图片添加运动属性，让它们的入场效果更加富有动感，或者制作体验太空等小游戏来增强趣味性。

3.设置事件，增强页面交互性和功能性

事件是指在一定的触发条件下（如点击、场景加载或跳转页面），对某个物体产生的动作。合理设置事件能增强页面的交互性和功能性。在《自由落体运动探究实验》课件中，通过设置点击选项时触发弹框出现的事件，实现了答题功能；通过设置点击按钮时页面重新加载的事件，实现了多次查看的功能；通过设置事件，实现了跳过预测按钮和声音开关按钮的功能。可见，善用事件能够为该H5页面增加更多个性化功能。它允许学习能力不同、基础不同的学生在观看教学资源时，根据自身需求，点击按钮跳过某些页面或多次查看同一页面，弹出或隐藏使用帮助，播放或暂停解说音频，或完成知识问答（如图3）。依托交互性强和功能性强的教学资源，学生能进行更加个性化的学习，提高学习效率和效果。

4.利用计数器，实现交替出现和隐藏

利用计数器，可以实现文本、图片或音频的交替出现和隐藏，为个性化学习提供方便。本案例是通过事件的设置，让“查看知识点”按钮每被点击一次，计数器就加1。然后对计数器里存放的数字进行判断，当它是奇数时知识点显示，为偶数时知识点隐藏。如此实现了点击一次出现，再次点击隐藏的效果。这么做的好处是让一个按钮实现两种功能，便于教师的课堂演示与讲解，更加符合人们的使用习惯，并且节省页面位置。此外，计数器还可实现游戏或测试计时、计算角速度和线速度等功能。

5.利用变量，记录数值或文本

当学生在选择题中点击选项，弹框中便会出现“你的选择是____”的字样。下划线中填写的就是学生选择的选项序号，这就是通过变量实现的。我们可以对选项按钮设置事件，点击时就将按钮代表的序号赋值给变量。于是在整个作品的任何页面中，我们都可以获取该变量中的值，并将它显示出来。巧用变量，学生输入角速度大小，页面便能及时呈现摆锤以用户设置的速度作圆周运动的效果。我们还可将利用变量记录姓名学号等信息、收集学生的反馈意见，让页面更智能。

利用H5开发的教学资源能克服其他形式的课件或微课在交互性上的不足和单向传播、功能较少的局限性，帮助学习者提高学习效果和体验。[2]故H5工具平台或制作软件很适合教师做优质教学资源的开发。

五、H5多媒体教学资源创新应用的思考

在手机、平板和网络走进课堂的未来教育中，H5多媒体教学资源能便捷地应用于课前、课中和课后。在课前，教师通过发放二维码或网页链接，要求学生利用H5教学资源提前进行某个知识点的学习。教师在课堂中可以将手机连接到多媒体设备中，现场演示H5教学资源，利用多媒体手段辅助课堂中某个环节的教学。授课结束后，教师将这些H5教学资源的二维码分享给学生，让学生在课后拿起手机即可复习并参与教师组织的H5线上测试。可见H5多媒体教学资源能够贯穿教学全过程，助力翻转课堂和移动学习的开展。

为了更好地实现H5技术与学科教学的融合，首先，教师在开发H5教学资源前应思考学科和授课年级是否适用；做好教学设计，明确H5教学资源计划用于哪个环节，才能开发实用且符合学生认知水平和需求的多媒体教学资源。其次，利用H5移动端教学资源进行移动学习具有碎片化的特征，碎片化学习和系统性学习的平衡需要教师把控，把学生课外单个知识点的学习和课内知识体系的构建整合起来。同时，教师应关注学生学习习惯的转变，及时获取教学效果反馈并不断作调整，帮助师生共同适应互联网时代下新的教学方式。

参考文献

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

[2]张年逢.高中生物H5交互微课制作实践[J].中学生物教学，2017（17）：29-31.