1、基于 HTML5 的移动端多媒体教学资源的开发与应用摘 要：互联网时代学习方式的转变使移动端教学资源的开发成为教师备受关注的课题。HTML5 技术的飞速发展为开发跨平台互动多媒体教学资源提供基础。文章探讨如何将HTML5 技术与移动端多媒体教学资源开发紧密融合，以移动端物理力学实验多媒体课件的开发为例，总结出应用 HTML5 技术制作移动端多媒体教学资源的五个要点并做创新应用的思考。关键词：H5 技术 移动端教学资源 开发 创新应用中图分类号：G642 文献标识码：A 文章编号：1003-9082（2018）06-00-03HTML5（简称 H5）是第五代超文本标记语言，作为当今颇受欢迎的移动
2、网页开发技术，具有免装插件、动画效果和交互性强、简单易用等突出优势。依托 H5 在线制作平台，教师能轻松开发适用的教学课件、微场景或测试题，提升课堂教学效果，激发学生的学习兴趣、鼓励学生课后的移动学习和个性化学习，并促进教学改革实践如翻转课堂。因此，探讨如何将 H5 技术与移动端多媒体教学资源开发紧密融合有其现实意义。一、HTML5 技术的发展与应用HTML 是超文本标记语言，1991 年问世。1993 年 HTML 首次以因特网草案的形式发布，经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML4.01 版本稳定下来。由于发展缓慢，逐渐被更加严格的 XHTML 取代。HTML5
3、 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的最新版本，2014 年 10 月由万维网联盟（W3C）发布正式推荐的标准。其主要目标是将互联网语义化，以便更好地被人类和机器阅读，同时提供更好地支持各种媒体的嵌入。2015 年，基于 H5 的移动端网页制作和开发平台纷纷出现，各类平台让 H5 制作简单易操作，技术的平民化使得 H5 很快流行开来。2016 年以来，H5 技术飞速发展，为开发基于 H5 的跨平台互动多媒体教学资源提供基础。H5 在线制作工具和软件不断涌现，比如有 MAKA、兔展、iH5 和易企秀等在线制作平台和炫课等 H5 课件制作软件。它们提供可视化的操作界
4、面，可以免代码实现丰富的动画和交互功能。有些平台还提供模板资源和参考教程供用户套用，大大简化制作流程。所以常在朋友圈看到利用 H5 制作的活动宣传单、婚礼请帖、广告、游戏、美术作品展等。可见，H5 页面正以其强大的传播效果渗透着生活的方方面面。教师利用简单的 H5 页面制作工具或软件开发移动端教学资源，用它来传播知识、辅助教学成为可能。二、移动端教学资源的开发现状目前，微课是教师在信息技术与课程整合实践过程中较常应用的多媒體教学资源。关于微课的教学设计、资源开发和应用模式的研究不在少数。近年，支持移动设备的平台越来越多，以微信为代表的通讯社交平台加入了移动学习资源开发的行列。码课码书逐渐成为教
5、学资源的新型呈现方式。码课码书是在微信平台和二维码技术支持下将教学内容汇集成二维码，供学习者在手机平板上扫码看书、上课的一种教学资源。基于微信公众平台开发的培训课程资源也触手可及。诚然，移动教学资源的开发成为教师备受关注的课题，是值得探讨和挖掘的领域。H5 作为近三年兴起的技术标准，将其应用于教学资源的开发也有一些案例，包括微场景搭建、小学生课堂游戏开发和古诗词课件制作等。部分研究重在介绍利用某 H5 在线制作平台开发多媒体教学资源的过程，而部分研究聚焦 H5 教学资源的应用模式。本文将在此基础上，结合 H5 移动端物理力学实验多媒体课件的开发实践，探究 H5 移动端多媒体教学资源的制作要点，
6、望能为同类开发提供参考。三、H5 移动端教学资源的开发实践HTML5 在教学中的应用十分丰富。利用 H5 在线制作工具或软件，教师不仅能制作出课件、闯关小游戏等丰富课堂教学的页面，还能发布 H5 手机网页版的校园通知来促进教学管理和家校互动，也可制作线上美术作品展、班级电子相册和安全知识培训手册。使用 H5在线制作工具开发多媒体教学资源的四步法为：选题设计制作发布推广。下面以物理力学自由落体运动探究实验作品的开发为例做进一步阐述。1.选题在选题时，首先要明确该 H5 页面的主题和用途，判断该主题的知识点是否适合通过H5 网页呈现。本案例是一个以自由落体运动探究实验为主题，用于高中物理力学实验教
7、学的多媒体课件，它既能够在课堂教学，又能用于学生课后自主学习。力学是中学物理学习中最重要的板块之一，但很多物理力学现象或是课本中的力学实验，由于受到实验设备和环境的限制，难以直观、清晰地演示和再现，不利于力学知识的学习与掌握。自由落体运动实验教学中，我们难以模拟真空环境，也未必保证实验能精准地控制变量。而 H5 能够很好地解决这个问题，H5 网页以音频、动画或文字的形式，更生动直观地演示实验并解释其中知识点和原理。线上学习与线下体验相结合，帮助学习者建构知识。2.设计在设计环节中，首先要针对 H5 页面的主题和知识点开展教学设计，教学设计应明确具体教学内容和所需的多媒体资源，以便图片和视音频素
8、材的搜集与整理；同时要体现计划使用的教学方法和教学步骤，这影响着 H5 页面的结构和功能。之后，我们需要进行页面结构和功能设计，明确此 H5 作品的页面组成、各页面的功能、页面间的跳转方式与使用的些多媒体资源和动效，以及是否包含可输入文本框和按钮等用于交互的元素。2.1 教学设计本课件的教学目标是学生能够说出自由落体运动的定义、特征和条件；并通过观察实验，知道物体的质量不是影响自由落体运动速度的原因，走出常识误区。课件中的实验需要相同的小球、羽毛和玻璃管各三个。一个小球、一根羽毛和一支玻璃管为一组，共设置三组，分别代表充满空气、抽去部分空气和真空的情况。让各组小球和羽毛在同一高度同时下落，进行
9、控制变量，对比落地快慢。教学过程分为三个部分：问题导入、实验演示、阐述实验原理和结论。在课前提出问题“重物和轻物哪个掉落速度快？”，让学生根据生活中的观察去思考与猜测，以此激发学习兴趣，为下面实验现象激起学生的认知矛盾做准备。接着，用文字引导学生带着问题观看实验动画，让学生通过肉眼观察对比轻重不同的小球和羽毛是否同时落地，其落地快慢是否和空气阻力有关。借助实验现象验证自己的猜想正确与否，并做出初步的结论。最后，用文字和语音解说阐述自由落体运动的实验原理和结论。2.2 页面结构与功能设计本例把 H5 课件分为两个页面，第 1 页用于问题导入，第 2 页用于实验动画的演示以及实验原理与结论的讲解。
10、在该课件的首页，我们用文字抛出问题并提供 3 个选项，在题干和选项旁边插入小球、石块、羽毛和纸团的图片，启發学习者结合对生活现象的观察作答。点击选项出现弹框，显示学生点击的选项，并用文字引导学生进入实验环节，去验证自己的答案。下方也需设置“跳过预测”的按钮，以便直接跳转到第 2 页。在课件第 2 页的顶部，用文字说明实验的题目和每一组实验环境，并用不同底色代表“充满空气”、“抽出部分空气”、“真空”的区域；实验演示以动画的形式呈现，包括羽毛、小球的图片素材。该页面包含两个功能按钮：一是“再看一遍”按钮，点击可以重新加载页面并播放动画；二是“查看知识点”按钮，点击出现解说文本和语音讲解，再次点击
11、隐藏文本。在知识点文字旁，设置音频开关的按钮，可随时关掉声音或再次播放。值得一提的是，在选题和设计上，应充分考虑学生的认知特点与需求，选取出重点、难点、疑点、易错点、易混淆点、考点、热点、扩展点等作为选题，但选题不宜过大，还需注意前后知识点的衔接1；教学设计应体现教师为主导、学生为主体的教学思想，遵循层层递进的原则；设计思路以简要明快、功能齐全为基调，除具有良好的交互性外，还应考虑具有直观性、使用简便等特点。3.制作3.1 制作工具选择和素材准备能够实现上述动效和功能的 H5 制作工具还不少，iH5 在线制作平台就是其中的一种。制作本例前需搜集羽毛、小球的图片素材。素材来源包括千图网、昵图网、
12、花瓣网等，可以直接下载背景透明的 PNG 格式的图片。同时也可使用平台自带的绘图工具绘制小球等素材。3.2 设置页面在 iH5 中新建工程，新建两个页面。分别在第 1 页和第 2 页导入或绘制所需图片。插入文本和提前录好的解说音频，注意为素材命名。3.3 制作动画首先制作充满空气环境下的实验动画。该实验的动画分两个阶段：第一阶段竖直加速运动选中羽毛 1，在右侧点击小人跑步的图标，为其添加【运动】的方法。在运动属性面板，将移动速度设置为 0，加速度设为 58.1，速度方向设为正 90 度。注意：在 iH5 中加速度的单位和现实运动中加速度的单位不一样；规定水平向右为 0度，顺时针累加，因此竖直向
13、下就是正 90 度。同样的，为小球设置运动，加速度为118.1。第二阶段碰撞停止构建物理世界：在舞台上添加一个画布作为物理引擎的载体。在画布下添加【物理世界】，命名为“物理世界 1”，并将其它元素依次拖动到它的下面。添加物体：为使羽毛和小球能模拟真实世界中的物体，产生碰撞效果，我们要对碰撞的羽毛、小球和板添加【物体】这一属性。在物体的属性面板中点击【编辑碰撞边界】，分别为它们描绘边界，用来判断何时发生碰撞。为了避免玻璃管的底板在物理世界中受到重力下落，需要在【物理世界】的属性面板中关闭【自动播放】。设置碰撞事件：选中底板，点击对象树右侧的感叹号图标，设置碰撞事件。在事件属性面板中，选择触发条件
14、为“开始碰撞”，碰撞对象是“羽毛 1”，目标对象是羽毛 1 下的“运动 1”，其目标动作是“暂停”。同理设置碰撞对象为“小球”的事件。制作完一组动画后，对“物理世界 1”进行复制，对元素重命名并调整位置。羽毛2、羽毛 3 运动加速度分别设置为 98.1 和 118.1，而小球 2、小球 3 的速度无需改变。3.4 制作交互在左上角的【小模块】选择两个按钮拖至页面中，将按钮文字分别改为“再看一遍”和“查看知识点”。“再看一遍”按钮：对“再看一遍”按钮作添加事件，触发对象为点击，目标对象和目标动作分别是舞台和重新加载。“跳过预测”按钮：对按钮设置事件，满足触发条件点击时，舞台跳转至下一页。“查看知
15、识点”按钮：首先，在知识点文本的属性面板中，关闭文本的初始可见。其次，在舞台下添加计数器 1，用于统计点击的次数。接着，对该按钮设置事件，每点击一次，就触发目标对象计数器 1 产生加 1 的动作。最后，对计数器添加两个事件，触发条件都是计数器为奇数。第一个事件触发知识点文本显示。第二个事件触发音频播放。同样的，再添加两个事件判断偶数的情况。音频开关按钮：在舞台下添加计数器 2。与“查看知识点”按钮的制作步骤相似，对音频按钮和计数器 2 添加事件，使得点击次数为奇数时触发音频播放，偶数时音频暂停。4.发布推广H5 课件制作完毕后，经过预览和多次调试，再发布至 H5 平台上，平台便会生成二维码和网
16、址链接，作品大功告成。教师将二维码或链接然后通过微信、QQ、论坛、贴吧等社交媒体进行分享传播，学生便能在不同终端通过点击链接或扫二维码等方式观看 H5 课件，实现随时随地的个性化与交互式学习。四、H5 移动端多媒体教学资源的制作要点现在教师使用信息技术手段辅助教学的形式多是录制微课、制作传统课件，步骤比较繁琐。不断涌现的 H5 工具平台和制作软件降低了技术门槛，它允许教师在可视化界面操作，远离繁杂代码，将多媒体教学内容汇集于一个网页中，添加课堂互动测试、创设情境、开发游戏等。精心打造微场景、充分利用物理引擎和运动属性、合理设置事件、巧用计数器和变量则是制作 H5 移动端多媒体教学资源的关键。1.打造微场景，生动导入一个好的 H5 教学资源需在一开始就抓住学生的眼球，激发学习兴趣。正如课堂中，为了介绍某个知识点，教师需要生动有趣的课堂导入，讲一个故事，创设一个场景、分配一项小任务、组织课堂游戏或是抛出一个问题。因此，教师可利用 H5 搭建微场景，让生活中某个典型的场景鲜活地呈现在学生面前，将他们带入社会、带入大自然。用动画讲故事以交代背景，让学生通过 H5 页面中人物的语言、动作更快对课文中的角色产生亲切感。在 H5 页面中加入音乐和语音渲染氛围，或是通过设置课前思考题，鼓励学生在往后的学习中带着问题找答案（如图 1）。当然也可制作小游戏热身，提高课堂活跃度与学习积极性。
