APP下载

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

2019-03-08莫葵凤郑小军朱育贤梁秋远

中国教育信息化 2019年4期
关键词:模板微课设计

莫葵凤 ,郑小军 ,朱育贤 ,梁秋远

(1.南宁师范大学 计算机与信息工程学院,广西 南宁530299;2.南宁师范大学 职业技术教育学院,广西 南宁 530001;3.广西职业教育发展研究中心,广西 南宁 530001)

随着移动互联网技术的快速发展和移动终端设备的迅猛普及,移动学习成为当下流行的学习方式之一。基于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]

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

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

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

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

目前涌现了一大批简单易学、效果好的H5开发平台,例如易企秀、iH5、互动大师等。笔者对8个常用的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还会继续升级,将给移动学习带来更多的便利。

猜你喜欢

模板微课设计
铝模板在高层建筑施工中的应用
高层建筑中铝模板系统组成与应用
铝模板在高层建筑施工中的应用
初中数学课堂教学中如何有效导入微课
微课在幼儿教育中的应用
微课在高中生物教学中的应用
微课在初中历史教学中的应用
瞒天过海——仿生设计萌到家
设计秀
有种设计叫而专