H5移动微课的创新设计与快速开发*

莫葵凤¹,郑小军^{2, 3通讯作者}朱育贤¹梁秋远¹

（1.南宁师范大学计算机与信息工程学院教育技术系,广西 南宁,530299;

2. 南宁师范大学 职业技术教育学院,广西 南宁,530001;3.广西职业教育发展研究中心,广西 南宁，530001) 

（《中国教育信息化》2019年第4期第34-36页，封面文章）

摘 要：H5移动微课是一种支持移动学习的微学习资源，带给学习者良好的学习体验和学习效果。基于大量H5移动微课的观摩、考察和案例研究，本文阐述H5移动微课的现状及创新设计与快速开发的方法，并且从素材库、收费情况、效果、操作难易程度（专业、非专业）和推荐等级等五个维度，对易企秀、绚星微课等8款H5移动微课开发工具（平台）进行具体评级分析。

关键词：H5；移动微课；创新设计；快速开发；移动学习；工具（平台）评级

中图分类号：G434  文献标识码：A 文章编号：1673-8454（2019）04-0034-03 

随着移动互联网技术的快速发展和移动终端设备的迅猛普及，移动学习成为流行的学习方式之一。基于HTML5技术开发H5移动微课，以满足日益增长的移动学习需求，提升在线学习体验和学习效果，成为个性化、创新型微课开发的新景观、新趋势。那么，H5移动微课的现状如何？如何创新设计和快速开发H5移动微课？

一、H5移动微课的现状

随着HTML5技术的发展，目前涌现了一大批简单易学、效果很好的H5开发平台，用户只需要简单地进行模板套用替换，就能够轻松设计并制作出展示页面效果不错的H5移动微课作品。

在教育行业，H5是一种用来进行宣传展示的工具和教育教学的新形式，同时也给科学知识的普及提供了新的途径和方式，非常适合于移动互联网时代的教育教学需求。移动学习是未来教育的大趋势，而掌上微课（如H5移动微课）则让学生离学习更进一步。学生可以利用碎片化时间，通过移动智能终端学习H5移动微课平台的知识点，延伸了课堂教学，扩展了学习时空。

目前很多平台虽然看上去像一款只是制作前端H5的SaaS产品，但事实上，它们集成了“前后端”所需的几乎所有功能，可实现零代码制作各种H5作品，功能非常强大。如：3D游戏、VR场景（全景、一镜到底）、支持物理引擎（如碰撞游戏）、Web APP支持（如手机应用、小产品）、高效渲染引擎、自适应网站、自建直播频道、大屏智强解决方案、支持上千种自定义动效、支持Web Socket、支持Web GL、支持PSD直接导入、支持OBJ文件导入等。

这些平台又是一个“云计算平台”，可以根据用户的实际业务需求，动态分配计算、存储、数据库、带宽资源，保证数据安全性的同时，满足各种突发流量暴增的需求。总之，利用这些优势可以比较轻松地进行作品的创新创意设计。

二、H5移动微课的创新设计

利用H5强大的功能优势，可以实现各种类型的场景、效果以及呈现/表现形式，使H5移动微课在平台、载体和形式上具有一定的创新性。但要设计并开发出优秀的H5移动微课，仍需要加强选题、创意、教学设计和交互设计。

iH5微课《填词猜成语》属于游戏类微课，主要参考了游戏通关的思路，提升学习参与度，从而带来更好的学习体验，以增加教学的趣味性，激发学习动机。其针对大家都喜欢猜谜语的特点，基于用户交互体验的理念，利用H5的强交互等功能制作的微课，可点击查看分数排行榜。学生在游戏《填词猜成语》环境下实现在线练习，让学生在潜移默化中感受学习的乐趣、学会动脑积极思考，在一次次的挑战中感受到成功、体验到快乐，从而提高自主学习能力。

在开始游戏后，每道题都设计了时间限制，学生必须在规定的时间内完成，短时间内对观察力、思考反应能力的考验，可以促进学生观察力、记忆力的发展。该微课是在一个数据库中实现的，包括用户数据（保留用户参与数据）、文字（随机出现的选择文字）、成语库（成语库、直接添加即可），利用H5强大的功能、零代码制作实现。因为需要获取头像进行排名，还需用到数据库提交、输出、更新，循环事件、复制事件，用数组进行判断等功能。此类微课还有《你画我猜》、《王者融合》等，其中《王者融合》的制作比较复杂，主要由微信语音识别、AI人脸融合、AI声音融合组成，通过与腾讯AI平台对接，实现声貌融合进行分享。

iH5微课《银河系唯美全景》将九大行星的介绍（知识内容）放在银河系场景里，非常生动直观，知识内容的设计、呈现与表达上都进行了大胆创新。它属于VR场景（全景/3D/一镜到底）类H5移动微课，即可以360°转头看到不同角度的内容，具有景深、动态图像、声音等，类似于在电影院看3D电影的感觉。丰富的表现力和良好的交互，极大激发学生的主动参与热情。

首先，通过动态唯美银河系场景激发学习者兴趣，根据点击星球查看介绍的说明引导学习者进行新内容（九大行星的介绍）的学习。通过触发器点击触发星球，就会出现星球的相关介绍，点击拖拽实现星球之间的运转，就如镜头的推拉摇移，从而实现一镜到底的效果，逼真的银河系让人在屏幕前有身临其境的感觉。有些知识内容（如地球、银河系、宇宙等地理知识）就是对三维空间/四维空间的认识，如果通过直观的视觉化全景/3D场景展示知识点、无死角/无缝展示，可以使知识得以高效表达，弥补了传统微课在二维空间进行知识表达的不足。它不受时间、空间和地域的限制，让人可以左右上下360度的任意观看动态视频，使人产生一种真正意义上身临其境的感觉，直接感受与认识降低了认知负荷，使学生学得轻松、易于理解和掌握。

全景视频对场景的再现更加全面，使人产生身临其境的感觉，因此常常用作展示之用途。如用360全景来展示旅游教学、数字展馆、数字城市、文物古迹、室内设计等。

 绚星微课的《安全生产十大定律——破窗效应》非常符合微课教学设计的KFC模型：激发—引导—强化^[1]。首先，通过一个破窗实验情境作为导入，顺理成章地引出破窗效应。其次，讲解新知识，包括破窗效应的诱发因素、后果、预防、应用以及在破窗效应的破解等。在破窗效应的应用中，通过实际生活中的例子“纽约市交通警察局改善地铁犯罪的视频”，讲解如何消除习惯性违章的相互模仿，做好安全管理。最后，通过小结和三道测试题来强化、巩固所学知识。小结破窗效应的5S管理，利用H5强交互功能设计三道测试题检测学习效果，强化、巩固所学知识。同样，提交后可查看分数和排名以及参与答题人数，答题过程中，答错了会跳出正确的选项。

通过以上H5移动微课案例分析可以看出，目前H5的功能已经强大到能支持一些最新的技术进行二次开发，实现零代码制作各种H5。

三、H5移动微课的快速开发

H5移动微课非常适合快速学习、随时随地学习，以满足日益增长的移动学习需求。目前，通用性移动微课资源短缺，企业和用户一并参与开发H5移动微课资源才是上上策。那么，如何才能快速、高效地开发H5移动微课？笔者认为学会H5移动微课创作的方法和技巧，配合H5移动微课制作的利器（工具/平台/技术），集微课的内容创新设计与快速开发于一身，迅速开发出满足学习者所需的微课。H5移动微课的开发大致可分为开发前期工作、开发期和开发后期三个阶段，做足开发前期工作才能实现H5移动微课快速开发。

1.明确设计的思路与流程

H5移动微课创作是在平台上进行设计与开发，再将其发布，应用于移动终端上，其实质还是微课的创作。微课创作有一定的创作流程，包括选题、教学设计、选择开发平台和技术、微课资源的开发和平台的实现、发布、应用和效果评价等7个方面。

2.加强微课选题、内容设计与呈现等设计

对一个优秀的微课而言，其选题应有针对性，内容设计要合理，内容呈现和表达要生动有趣，技术应用得当，应用效果好^[2]。

选题是微课创作的第一步，恰当的选题是微课创作成功的基石。^[3]内容设计（教学设计）是根本，一个好微课少不了一个好的教学设计和脚本设计。可以依据教学目标、重难点、教学方法、教学步骤和时间分配等方面进行教学设计，注重激发学习兴趣；通过提问、讨论或案例分析等引导学习；通过练习、测验检测掌握程度、学以致用。建议采用KFC模型进行微课教学设计，如图1所示^[1]。这一模型与首要教学原理、九大教学事件、五段教学法等一脉相承。内容呈现方式和表达方式要个性化、新颖、生动有趣。技术应用得当。用好技术表现在技术应用的“量”要适度，过度使用技术会喧宾夺主，让学生的注意力不自主地转移到表现形式上。

图1 微课教学设计的KFC模型

3.选择适合的开发平台和技术

目前涌现了一大批简单易学、效果好的H5开发平台，例如易企秀、iH5、互动大师等。笔者对8个常用的H5移动微课开发平台进行了评级分析，见表1。这些平台在功能上各有侧重，但都提供了数量庞大的免费和收费的H5页面模板，界面设计精美，交互体验良好，并且提供专业团队进行设计开发。

表1 H5移动微课开发平台评级分析表

4.H5移动微课资源的开发

（1）对于初学者来说，用户只需事先准备好内容、素材，然后登录开发平台，使用在线编辑工具选择模板，替换模板的图片和文字。如果页面不够，在右侧添加页，接着在左侧选择合适的单页模板，同样的方法进行替换模板的图片和文字。可在不需要编写任何代码的前提下，使用拖拽等所见即所得的手段在线完成场景设计，并且可以轻松分享到互联网，加速了知识分享。此外，初学者还可以通过观看iH5、Epub360、易企秀等平台提供的一整套视频教程（分基础、专业、专业进阶），深入学习H5移动微课的设计与开发。通过视频教程学习可以快速成长、快速晋级成为H5移动微课开发的高手，设计出具有自身个性特点的H5移动微课，同时可以作为知识或案例模板分享到互联网，加速了知识分享。

（2）对于熟练者或高手来说，以易企秀为例，登录开发平台创建一个新的空白场景，即开始制作H5移动微课。编辑场景，有点类似PPT，在上方菜单栏插入文本、图片、背景、音乐、形状、图集、组件、表单、特效等基本设计元素，每个元素下面都有丰富的素材供使用；左侧是模板中心，有单页模板、功能模板、VIP模板。主要是封面、尾页、图文、图集、时间轴这五个部分。这些都可以根据设计者的需求，通过所见即所得的手段拖拽进来使用即可。设置场景，可以方便和提高用户浏览体验。包括封面，名称、场景描述、场景类型、翻页方式等基本设置。发布场景。点击“保存和分享”，支持微信扫码、网络一键转发以及网络链接。

（3）与传统微课相比，H5移动微课有“四快”：在线H5开发平台配备相关的一站式精准服务、极简操作、海量模版，轻松快速设计，并且能立即看到微课效果、能快速发布分享。开发过程中，能快速嵌入试题、测验、问答等交互式组件，简单、易用、易上手，非常方便快捷。更适合互联网快速传播。可以在任何平台中运行，如：PC、Android、iOS智能手机、平板、浏览器、App或嵌入到网页等。文件相对传统微课（如拍摄类）小，能在手机中很好地运行。后期维护修改快。只需在相应页面编辑修改、更新发布即可，无需重新录制与输出。

5.H5移动微课的应用和效果评价

H5移动微课资源可以通过QQ、微信等方式进行传播与共享，学生利用手机扫码即可进行学习；也可以将文件发布到云空间，然后用户通过扫描条码进行下载安装观看。同时，传播共享方便快捷，与社交化学习深度融合，同时还兼具数据搜集、分析、统计与及时反馈功能，有助于更好地进行教学诊断与评价。

   移动互联网时代的学习必然要向移动互联、 多屏互动、社交化学习等方式转变。基于HTML5技术开发H5移动微课，是未来微课开发的主流方向，具有广阔的应用前景。未来的H5还会继续升级，将给移动学习带来更多的便利。

参考文献：

[1] [4]唐绪莹,熊洁.微课：快学、快用、快设计[M].北京:机械工业出版社,2017:137-138.

[2]胡小勇.设计好微课[M].北京：机械工业出版社,2017.3

[3]郑小军.例谈微课选题的误区、原则与方法[J].中国教育信息化,2017(04):43-46.

*基金项目：广西高等学校人文社会科学重点研究基地基金资助“微课发展研究基本框架与微课理论体系建构”（项目编号2017GXOUWT05）；2017年度广西职业教育教学改革研究重点项目“职业教育微课可持续发展研究与实践”（项目编号GXZZJG2017A127）；广西教育科学“十二五”规划2015年度教育信息化工作专项课题“广西职业教育数字化校园建设与应用策略研究”（项目编号2015ZKY14）。