《计算机的硬件组成》学习工具制作综述

数字化学习工具评优tougao1@chinaitedu.cn

125FEB 2019 NO.03-04

第十六届NOC活动 数字化学习工具评优 一等奖·中学组《计算机的硬件组成》学习工具制作综述张欢 内蒙古包头市第三十五中学

● 特色与亮点本学习工具是采用iH52.0版本在线互动编辑工具制作的H5页面课件。iH5是一款基于云端的网页交互设计工具，国内极客自主开发的多媒体互动设计编辑器，不需要写代码就可以实现交互设计，如互动视频、网站、动画、APP、朋友圈营销活动、H5小游戏、多屏互动等，且一个作品可以兼容所有屏幕与所有浏览器。本学习工具采用交互式的课件形式引导学生学习计算机的硬件组成，通过互动的方式，使学生加强对计算机硬件的认识，进一步了解硬件的作用，并以循序渐进的方式呈现内容，符合学生的认知特点。● 制作背景本学习工具应用的教材内容是人民教育出版社、内蒙古教育出版社七年级上册信息技术第3章计算机系统初步活动1计算机的硬件组成。在课堂教学中，教师在讲述

计算机的硬件知识时，大部分采用的是理论教学和实物观察的教学方法。无论是教学课件，还是实物观察，与学生交互都较少，内容也都枯燥无味，无法激起学生学习硬件的兴趣。鉴于此，设计H5作品，可以让学生进行交互，加强对硬件知识的理解。󰀡● 设计思路及内容结构1.设计思路①学习计算机的硬件内容经常受时间、空间的限制，不能随时随地学习。计算机的硬件系统包括主机和外部设备，主机包括CPU、主板、内存、硬盘、声卡、网卡等。由于这些设备是在主机里，只有在课堂上才可以实物观察，平时生活中无法真正接触，无法实现随时随地观看学习。要打破此限制，可以将硬件设备以H5页面的形式呈现，让学生实现随时随地观看学习。②大部分计算机的硬件课件与学生互动较少，不能有效激发学

生的学习兴趣。网络上关于计算机的硬件课件大部分是以PPT的形式呈现理论知识，属于静态课件。将此课件应用于课堂中，会使课堂枯燥无味，学生只能接受消化一部分知识，同时也不利于激发学生的学习兴趣。而设计H5页面的计算机硬件课件，能增强互动性。2.内容结构（1）计算机的系统组成①以“卡通教师、黑板、课桌和书”的形式呈现本节课的知识内容，是为了更好地贴近课堂教学，营造课堂学习的氛围，使学生尽快地进入学习状态。②内容以“打字机的效果”出现，类似教师粉笔写字，将本节课主要的内容直观地呈现出来，使学生能快速了解本节课的内容。（2）计算机的基本组成计算机的基本组成包括显示器、主机、鼠标、键盘。H5界面中插入包括显示器、主机、鼠标和键盘数字化学习工具评优tougao1@chinaitedu.cn

126中国信息技术教育

的图片，在图片上设置手势图标标识点击的区域，提示学生点击，点击后即可在设备上出现对应的设备名称，以此来认识各个设备的名称。通过“事件”“透明按钮”和“动效”，实现点击出现的效果。（3）主机箱里有什么主机箱里有主板、CPU、内存、显卡、声卡、硬盘、光驱等。将设备图片以两列进行排布，并设置手势“点击图片变大”，提示学生点击图片，点击后会出现设备对应的名称和图片放大的效果，以便学生清晰地观看硬件设备和识记设备名称。通过“容器”“时间轴”和“计数器”实现点击图片放大的效果。（4）主板主板是承载计算机所有硬件设备运行的平台，它既是连接各个部件的物理通路，也是各部件之间数据传输的逻辑通路。对主板的介绍以计算机屏幕的形式出现，采用计算机的界面来介绍计算机的硬件部件。在主板的界面中，主板图片是GIF格式，设置“滑动图片”的提示，拖动鼠标左键，即可显示主板电路的走向，模拟现实电路，让学生更清晰地认识主板的工作原理。（5）CPU、显卡、内存CPU是中央处理器的简称，是计算机的心脏，也是计算机中最重要的组件，它决定计算机的基本性能；显卡和显示器构成个人计算机的显示系统，显卡是显示器与主机通信的控制电路和接口，是个人计

算机操作中实现人机交互的重要设备；随机存储器在CPU运行期间既可读出信息又可写入信息，但在断电后所存的信息就会丢失，只读存储器，关电后存储器里的信息不会消失。“CPU、显卡、内存”内容以文字和图片相结合的形式呈现。CPU配图是Intel中央处理器的正反面；“显卡”内容以打字机的效果呈现；随机存储器和只读存储器图片是根据随机存储器的读写功能和只读存储器的只读功能的含义进行配图。（6）输入设备、输出设备输入设备包括鼠标、手写板、键盘、数码相机等图片，设置“点击图像”提示按钮，三秒后消失，点击图片，设备对应的设备名称在图片下方相对应地显示出来。输出设备包括显示器、打印机、音响等，以图片和文本的形式呈现。（7）考眼力“说一说，硬件名称分别是什么？”六个硬件图片以三排两列的形式呈现，学生观看图片思考该硬件是什么。为了验证是否正确，设置了“点击图片看对错”按钮，三秒后消失，点击图片，即可出现图片背后的“硬件名称”，类似猜卡片游戏的形式答题，增加了趣味性。（8）测一测“测一测”用于检验学生掌握知识的情况，通常以选择题的形式出现。本学习工具的“测一测”环

节共有三个选项，当选择答案后，选中的答案会上下弹跳，以表示此选项为选择的答案。若选择的答案是正确的，右下角会出现“√”的标志，若选择的答案是错误的，右下角出现“×”的标志，以此帮助学生判断正误。● 关键技术处理1.展示效果（1）文本打字效果通过“文本工具”和“事件”相结合实现“文本打字效果”。利用文本工具将内容输入，添加事件，当触发条件为“对象出现”时，目标对象“文本”的目标动作为“打字效果出现”，时长“2s”（如图1）。（2）图片放大展示效果通过“时间轴”“计数器”“轨迹”和“事件”相结合实现“图片放

图1

图2数字化学习工具评优tougao1@chinaitedu.cn

127FEB 2019 NO.03-04

大显示效果”。图片要实现点击一次放大、再次点击缩小的目的，需要添加时间轴，设置直线轨迹，为计数器和图片自身添加事件。图片添加事件，触发对象“图片”，当触发条件为“手指按下”时，目标对象“计数器”的目标动作为“加1”（如上页图2）。计数器添加事件1，触发对象“计数器”，当触发条件“为奇数”时，目标对象“时间轴”的目标动作为“从头播放”（如图3）；再次添加事件2，触发对象“计数器”，当触发条件“为偶数”时，目标对象“时间轴”的目标动作为“反向播放”（如图4）。（3）猜卡片游戏效果要实现“猜卡片游戏”效果，需事先准备卡片的正反面图片，并将两个图片叠放在一起。为顶层的图片添加事件，触发对象“顶层图片”，当触发条件为“手指按下”时，目标对象“图片”的目标动作为“隐藏”（如图5）。（4）测试题效果通过“透明按钮”“动效”“事件”相结合实现“测试题”效果。当点击正确答案时，题目下方显示“√”，点击错误答案时，题目下方显示“×”。在点击正确答案前，“对或错”图片要隐藏，设置透明按钮“遮罩”将“对或错”图片的区域选中，并隐藏。当点击选项时，为选项添加事件组，事件1“选择弹跳”，目标对象“动效”的目标动作为“开始”（如图6），目的是显示出选择的答案；事件2“显示打叉”，目标对象“对或错”图片的目标动作为“显示”（如图7），目的是显示出“对或错”图片；事件3“显示遮罩”，目标对象“遮罩”的目标动作“显示”（如图8），将“遮罩”显示出来。（5）提示按钮闪烁2秒效果要实现“提示按钮闪烁2秒”效果，需应用“透明按钮”“事件”和“动效”。为提示按钮图片设置动效，动效类型“闪烁”，时长“2s”。为透明按钮设置区域，添加事件，触发条件“点击（PC中）”，目标对象“提示按钮图片”的目标动作为“隐藏”（如图9）。提示按钮图片闪烁2秒后隐藏。2.应用的组件（1）素材组件（透明按钮、中文字体、图片、文本等）透明按钮：透明按钮为iH5工具中专门用于承担交互功能的透明组件，由于其具有完全透明的外观，可覆盖在任意图文对象上方，充当交互按钮使用。对于某些尺寸较小、不便触控的交互组件，通过添加透明按钮可以扩大交互区域，优化交互体验。中文字体：中文字体对象是

图3图4

图5

图6图7图8图9数字化学习工具评优tougao1@chinaitedu.cn

128中国信息技术教育

iH5工具中专门用于插入中文文本的特殊字体工具。其原理是将添加的中文数据转化为图片，从而避免因为不同设备环境不同、字库缺失等问题所造成的显示差异。图片：图片对象用于在iH5工具中插入单一图片，支持JPG、JPEG、PNG、GIF格式的图形素材。文本：文本对象用于在iH5工具中插入一段文本，并可动态记录和显示系统运行时所产生的文本数据。（2）容器组件（页面、容器和对象组）页面：页面工具为案例添加页面，可实现翻页的效果。容器和对象组：容器可作为对象管理的工具，同时容器下允许添加子对象。容器和对象组的区别在于，容器默认创建为宽高都为1，而对象组需要用户绘制区域添加。（3）交互组件（计数器、事件）计数器：计数器可用于数值的记录、分数的记录等，也可以作为辅助对象实现其他效果。事件：事件用于对象之间的控制方式。事件是通过控制A让B做某件事情。事件的四要素分别是触发对象、触发条件、目标对象、目标动作。（4）动画组件（时间轴、滑动时间轴、动效、轨迹等）时间轴：时间轴不是媒体素材，它被创建时不可见，也没有大

小。时间轴内可控制多个对象的播放过程。滑动时间轴：滑动时间轴可以添加滑动区域，可通过滑动控制其他对象的播放过程。动效：动效可为对象添加动态效果，动效的本质是轨迹，因此可以进行编辑，自定义动效。轨迹：轨迹可以理解为在时间坐标内为对象添加控制点，使对象添加动画效果。轨迹可单独添加至对象下，也可配合时间轴、滑动时间轴使用。● 幕前幕后在制作“计算机的硬件组成”H5作品时，前期对教学过程中遇到的重点、难点知识进行梳理，最终将“计算机的硬件组成”作为本学习工具的知识点，主要是由于计算机的硬件组成受到多方面的限制，包括计算机的硬件资源和课件资源等限制，而且内容较晦涩难懂，较难掌握。为了突破此壁垒，设计H5交互页面，使学生在H5页面上能够实现随时随地进行交互式

学习，进一步加强对计算机的硬件组成的理解。本学习工具应用iH5在线编辑工具制作，iH5无需下载，在线即可编辑，而且零代码。为了更好地进行交互式的设计，笔者学习了此网站中的案例教学，包括各个组件的应用、案例以及iH5特效，如文本打字效果出现、照片放大展示效果、360度物体展示、物理引擎、720全景&地图、拖动物品等。将计算机的硬件组成知识与iH5的交互式效果相结合，制作出适合学生学习的交互式课件。在之后的教学中，可以采用iH5在线编辑工具设计教学课件，寓教于乐，使学生能够进行交互式的学习，这样有利于学生对知识的掌握，也能够吸引学生的注意力和提升学生的学习兴趣。