面向移动终端的H5课件设计与应用
金 蓉，罗闻泉
（广州民航职业技术学院，广东 广州 510403）
[摘要] 移动互联网技术的发展和智能手机的普及以及新媒体的兴起，为移动学习提供了良好的环境。面向移动终端的H5课件，以其跨平台、融媒体、社交性等特点为学习者带来了良好的学习体验，本文阐述了面向移动终端的H5课件的设计流程与应用场景，为教师开展基于移动教学的课程改革提供了可操作的参考。
[关键词] 移动终端；H5；课件；设计；应用
随着移动互联网技术的发展和智能手机的普及以及新媒体的兴起，人们的学习方式与获取信息的途径均发生了明显的变化。据CNNIC发布的第43次《中国互联网络发展状况统计报告》显示，截止到2018年12月，我国的网民规模达8.29亿，手机网民规模达8.17亿，每周人均上网时间27.6小时，在各类手机应用排行中，手机即时通讯的使用率高达95.5%，位居榜首，在网民的职业结构中，学生占25.4%，是占比最大的群体[1]。这些数据表明，利用智能手机获取知识，已经成为了年轻一代普遍的学习方式。基于HTML5技术开发的面向移动终端的课件，凭借其跨平台、融媒体、社交性等特点，为学习者带来了良好的学习体验，将成为未来移动学习资源建设的新趋势。
采用电流突变量夹角余弦的直流电网线路纵联保护方法//周家培,赵成勇,李承昱,许建中//(14):165
等最难熬。男人还可以抽烟。虚飘飘空捞捞的，简直不知道身在何所。她打开手提袋，取出一瓶香水，玻璃瓶塞连着一根小玻璃棍子，蘸了香水在耳垂背后一抹。微凉有棱，一片空茫中只有这点接触。再抹那边耳朵底下，半晌才闻见短短一缕栀子花香。
1 H5简介与特点
1.1 H5简介
H5 是指第5代HTML，也指用H5语言制作的一切数字产品。HTML是“超文本标记语言”的英文缩写，是网络页面编辑脚本的规范和标准。 “超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素[2]。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，因此，它也构成了互联网兴起的基础。H5之所以能引发如此广泛的关注，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多炫酷而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验[3]。
1.2 H5的特点
移动性：H5资源存放于云端，访问者无需安装下载，即点即用，不占用手机内存，只需扫二维码或者点击链接即可访问，体现“用完即走”的理念。
跨平台性：H5能够自适应不同的移动终端，不受移动操作系统（安卓、IOS）的限制。
制作课件的目的是辅助教与学，并完成特定的教学任务，实现教学目标，突破难点重点[4]。由于H5的传播环境主要是以微信、QQ为代表的社交媒体，所以选题要“轻”，内容不宜过多，可以是一课时、一个教学单元内容或某几个知识点，并根据内容特点采用合适的表现形式。
第二阶段：资料准备。主要进行以下工作，确定整个H5的风格、调性、创意、主色调，展现哪些素材，如何展现，寻找合适的配乐和声效，文字、图片、视频、动图、试题等素材要提前准备好。
社交性：H5特别适合在社交媒体上传播，只需一个二维码或者链接，即可实现一键转发，而且便于收藏，利于留存，易于再次访问。
数据分析：H5被传播和阅读过程均可被服务器记录下来，这些数据将有助于对访问者的行为进行分析，同时也是设计者对H5进行优化的重要依据。
2 H5课件的设计
2.1 设计原则
融媒体性：H5页面中融合了文字、图片、动画、声音、视频等媒体元素，访问者无需安装任何插件即可访问。
本刊讯 2016年6月13日，北京市“东四——朝阳门——建国门”学区“读红色经典 铸理想信念”——纪念建党95周年诵读活动在北京史家小学高年级部礼堂举行。北京市东城区委宣传部副部长王铁峰、东城区委教育工委书记冯洪荣、东城区教委主任周玉玲、东城区政府教育督导室主任付葵、东城区委教工委副书记刘藻、东城区教育纪工委书记刘宏明、东城区教委副主任尤娜、东城区政府教育督导室副主任段勇、东城区教委副处级调研员王守仙出席活动。来自北京市东城区委宣传部理论科，东城区委教育工委、东城区教委的领导以及东朝建学区内的16个单位的党员教师400余人参加活动。
呈现合理：采用合适的方式对学习内容进行呈现，语言简洁生动，文字规范，素材选用恰当，整体结构合理。图文并茂比单纯的文字，信息量更大，效果更好。适度的动画可以增加学习者的兴趣，但过于华丽的动效反而可能带来视觉上的困扰。
编辑音乐：除了选用平台提供的音乐之外，还可以上传本地音乐，一般采用MP3格式，不同的平台对音频大小有不同的要求，学习课件的背景音乐，宜选用舒缓类型，这有助学习者静下心来学习。为了更好地辅助学习，还可以把页面内容的讲解录成MP3上传，也可以利用平台的AI功能把详细的解说文字自动转为音频，边看画面边听语音，学习效果更佳。
加载快速：页面加载速度越快越好，否则容易造成学习者跳出和流失。据统计，加载时间超过3秒就会有57%的用户离开。因此页面设计时，大图片、大视频等素材，最好先压缩一下，尤其是第一页不要做的太大。
体验良好：课件不但要追求良好的教学效果，还应该有良好的视觉体验，所以在色彩、布局、构图、字体等方面都应该保持风格一致，和谐自然，背景音乐适合主题。
如图2实线为s的p属性的有效时间，虚线是要插入数据的有效时间。情况1：在[start，t2]和[t3，end]有两个p属性值，存在发散性属性的不一致性，但[t2+1，t3+1]有间隔，将插入的数据的有效时间修改为[t2+1，t3+1]；2：p 属性一致性；3：在[start，end]内s有两个p属性值，存在不一致性，不执行插入操作。
2.2 设计流程
一般来说，一个H5移动课件的设计流程分四个阶段，分别是了解需求、资料准备、页面设计、数据收集，见下图1所示。
图1 H5移动课件的设计流程
编辑视频：平台都支持本地上传视频和外链视频两种方式，视频一般采用mp4等常用格式。平台对上传的视频大小有限制，如果超过，可先把视频传到腾讯视频等平台，再根据H5平台提示插入视频的通用代码即可。建议不要在第一页加载视频，影响加载速度。
案例教学方法并不是将多个案例简单罗列起来，而是一套完整系统的教学模式。教学案例的设立不能单纯地为了提高教学趣味，而应该有明确的教学目的、教学安排等，即案例配合哪些章节和知识点，用于验证或运用哪些概念，强调掌握哪些知识和技能等[9]。
医用耗材尤其是高值耗材的管理一直是各家医院重点关注的领域，也是管理痛点所在。大多数医院在医用耗材管理上都面临以下几方面困境，比如系统缺失，跨职能部门之间沟通缺少先进的物流信息系统；物质流转全程各岗位手工操作，出错率高；物资管理信息化技术相对落后；管理物资种类多、数量大；医院供应商数量多，信息无法及时传达到位；消耗物品种类多、品牌品规型号多；库房管理难度大；等等。以全程追溯、闭环管理为目标，就必须克服以上难点。
第三阶段：页面设计。第一步：注册登录：首先选择一个H5制作平台，比如易企秀、兔展、意派、91速课等，注册并登录。
第二步：新建页面，H5平台会提供一些页面模板，如果有合适可以直接使用，如果没有，则需要自己制作，内容不多的，可选用常规页面，若内容较多可选长页面，它比较适合展示叙事性内容，内容都处于同一级别，而且可以线性排布。例如有些知识点内容比较多，且前后关联性强，若分页展示容易给学习者的理解带来障碍。页面切换可以设置手动翻页或者自动翻页，大多数用户习惯向上滑动。另外，H5课件的首页不要做的太大，加载太久将导致学习者失去耐心。
第三步：页面元素编辑
文本：可以利用平台提供的文本样式或者图文模板，也可自行插入文本对象，然后在属性框中设置字体、大小、行距、动画等属性。文本的行距和段距可适当加宽，密密麻麻的文字容易让人产生焦虑感，大段的文字最好提炼简洁一些，也可以用表格或图形来展现，比起需要阅读理解的文字，图形化表达更加直观且富有感染力。
总之，班主任在建班育人过程中，要善于寻找推动家校有效沟通的积极因素，变被动为主动，以自己独特的人格魅力、学识魅力和工作能力赢得家长的信任与支持。只有重视与家长的协作，始终让家庭教育和班级教育保持一致，才能真正达到家校协同、家校共育、让孩子健康成长的目的。
操作简单：课件的操作要尽量简便、灵活、可靠，如果稍微复杂一些的操作，可适当增加一些提示信息，操作的设置要遵循大多数人的使用习惯，慎用复杂的键盘操作。
图片：可以选用平台提供的图片，也可自行上传本地图片。一般背景不要选择太花哨的图片，如果要使用带动效图片做背景，最好选择动效缓慢一些的，因为动效太快容易给学习者造成视觉困扰。同类图片较多的情况下也可以利用图集功能做成轮播图。一些案例可以做成动图，这样展示起来更生动。为了不影响加载速度，图片太大要先压缩，色彩单一时用png8，色彩丰富时用jpg，追求精度用png24。由于手机屏幕尺寸的限制，建议把图片设置为点击可变大，这样更有利于用户浏览。
第一阶段：了解需求。目的是要准确了解该H5课件制作的意图、内容特点、学习人群偏好及认知特点、学习目的、如何与学习者互动、是否需要收集互动信息、是否需要学习测验等内容。
交互有趣：在课件中，交互活动是教师、媒体和学习者之间的信息传递，交互性的设计能让学习者在学习过程中更加专注，对学习产生激励作用。因此，在交互设计环节要注意体现教学目标，交互方式尽量简单，交互操作层次不应太多。
编辑交互对象：根据H5制作内容进行设置，比如，可以插入试题让学生测验，了解学生对知识的掌握情况；为了让学生回答问题，插入表单收集学生的答案，为了减少输入太多的信息，也可以把一些字段做成选择项，还可以设置投票功能则可以让学习者投票，等等。
第四步：发布应用。在完成所有页面设计并测试后就可以发布使用，平台会生成二维码和课件链接供用户选择，只要把二维码和课件链接转发到社交媒体上，就可以访问了。为了获得更好的访问效果，可以在发布环节做一些改进，例如，为了让二维码更加美观，可以复制链接到草料网等平台进行美化再替换进来，另外，做好H5的缩略图（可以去创客贴等网站利用模板生成）、起一个吸引人H5的标题、选合适的发布时间，这些做法都可以引发学生关注，提高点击率、转发率。
第四阶段：数据收集。数据包括两方面，一方面是H5课件运营的数据，服务器能监控到H5在运营过程中的各种数据，包括PV（浏览数）、UV（访客数）、跳出率、平均访问时长、分享数、IP分布、使用设备等，来显示课件的使用效果，这些数据也可为课件优化提供指导。另一方面是学习者学习结果的数据，比如互动数据、测验结果、信息收集等，这些数据能为教师改进教学策略提供参考。
3 H5课件的应用
在移动互联网和智能手机的支持下，使学生进行移动学习和教师实施翻转课堂教学成为可能。课前导学环节，教师提前发布H5课件，让学生课前自学并测验，教师根据后台数据了解学生学习情况，以学定教。另外，H5课件也便于学生留存，随时随地进行学习。H5课件的使用场景主要有以下两种：
第一，单独使用，通过微信群、QQ群、朋友圈等社交媒体进行发布，让学习者点击阅读，这种方式是最简单，也是当前H5最流行的传播方式，但带来的问题就是难以监控具体学生的学习情况，因为访问者的网名与实名无法关联，太多的H5课件链接难以管理。
第二，微信公众号平台。 利用微信公众号平台配合H5课件的使用，例如91速课，教师在公众号平台建立班级，学生关注公众号，设置个人信息，即可实现课堂的信息化管理，对学生学习H5课件过程进行全面的跟踪和分析。
老陈坐了半个小时才走，等他走出门，我发现自己出了一身汗。关上门，直到老陈的脚步声再也听不到了，我的心才平静下来。老陈留下三个烟头，每个烟头都抽到过滤嘴他才按灭。老陈真的能唠叨，也不管别人爱不爱听，他自顾自地说着。老陈不仅能说，还喜欢多管闲事。老陈就是这么说的，还故作神秘地压低了声音：过去，这房子里曾住过一个女人。那个女人，是干那个的。
4 结语
综上所述，面向移动终端的H5课件，以其跨平台、融媒体、社交性、交互性等特性为学习者提供了良好的学习体验，为教师提供更加科学的学习行为分析数据。面向移动终端的H5课件，将成为新媒体环境下开展移动学习和信息化教学改革的重要支撑。
【参考文献】
[1]中国互联网信息中心．第43次中国互联网发展状况统计报告[EB/OL]．http：//www．cnnic．com．cn/hlwfzyj/hlwxzbg/hlwtjbg/201902/P020190318523029756345．pdf．
[2]张璇．解读微信H5传播模式新特征[J]．今传媒,2016(8)：58-60．
[3]王刚．浅析HTML5对移动互联网的影响[J]．科学与财富 ,2013(2)：45-46．
[4]赵俊峰．浅析课件的类型及其应用[J]．太原大学教育学院学报 ,2010（4）：92-94．
[中图分类号] C41
[文献标识码] C
[文章编号] 2096-1995(2019)30-0025-02
基金项目： 基于移动学习的H5教学资源开发及应用——以《网络营销》为例（JG201809）；2017年省高职教育精品在线开放课程建设项目--《网络营销》。
作者简介： 金蓉（1974-），女，广东汕头人，硕士，副教授，研究方向为信息技术、电子商务。