基于HTML5在线编辑平台的移动学习资源构建与应用研究

谭敏敏

摘 要：HTML5在线编辑平台是非编程人员制作HTML5页面的利器。HTML5页面在营销领域获得了成功，在教育领域，特别是移动学习，也将大有用武之地。可用于制作微课、数字故事、习题与问卷、课程内容、指导手册与文化宣传等。文章介绍了HTML5在线编辑平台，并探讨了基于其的移动学习资源的构建和应用。

关键词：HTML5在线编辑平台；移动学习；学习资源

中图分类号：G43 文献标志码：A 文章编号：1673-8454（2016）19-0040-04

一、概述

早在2000年左右，随着移动通信技术与计算机技术的融合，人们就开始探讨移动学习。上世纪末，利用移动通信设备开展学习活动的研究开始兴起，短短几年时间，移动学习成为了远程教育与数字化学习领域中的一个研究热点[1]。由于当初移动通信设备本身以及当时环境的种种限制，少数人拥有、屏幕小、存储空间有限、带宽小、支持格式不统一以及开发资源困难、周期长等，移动学习发展缓慢，并没有得到广泛的认可。2008年以后随着安卓手机、平板电脑等智能移动设备的出现，移动学习出现迅猛发展之趋势，特别是2012年以后，各类学习APP层出不穷，支持移动设备的微课平台也越来越多，以微信为代表的社交平台也开始加入到移动学习的行列当中。

与移动设备、移动平台翻天覆地的变化相比，移动学习资源的建设相对缓慢，质量参齐不齐。表现在三个方面：

（1）优良的移动学习资源比较匮乏；

（2）表现形式单调，不足以吸引学习者的兴趣；

（3）移动学习资源应该由一线教师建设，而目前大多数的学习APP并非他们开发。

改变现状的关键在于鼓励与引导一线教师使用免费开源、简单易用的移动应用平台构建移动学习资源，例如微信、微博、HTML5在线编辑平台等。

二、HTML5与HTML5在线编辑平台

HTML5是万维网核心语言——超文本标记语言（HTML）的第五次大改版，引入了完全不同的新元素、新功能，帮助网络应用程序作者进行更有创意的实践，大大提升用户访问与操作的交互式体验和跨平台的支持[2]。HTML5作为移动设备支持良好的新技术，与移动设备的关系主要体现在几方面：

（1）为移动平台定制专门的表单元素，用户输入不同内容时显示相应的键盘，提高用户输入效率[3]。输入电话号码时只显示数字键盘，输入Email时显示带@和.的键盘，输入URL显示带.com和.的键盘等。

（2）强大的Canvas绘图功能，为开发者提供大量的有关动态产出与渲染的图形、图表、图像和动画的API，结合JavaScript可以实时改变和渲染图形，不再需要Flash插件的支持，从而实现在移动设备上稳健运行。

（3）新增音频与视频元素，无需安装任何插件，无需对个别素材做特殊处理，便可实现常见音频与视频文件在移动设备上流畅播放。

（4）本地存储，当用户遇到网络信号不好甚至没有网络的情况，本地存储功能可以让用户继续访问Web资源，特别是教学资源更新频率不高，本地存储是一种很好的策略。

HTML5是一种标准、一种技术，也是一种编程语言，编程人员可以直接使用HTML5+CSS3+JavaScript开发移动设备支持的平台，而一线教师为了搭建移动学习资源平台而学习HTML5等技术是不现实的，但可以使用HTML5在线编辑平台，不需要任何编程基础，便可像制作幻灯片一样制作移动学习资源。目前有不少HTML5在线编辑平台免费提供给用户使用。

2014年以来，HTML5页面成为了营销界的新宠儿，“多快好省”的杰出代表，其灵活性高、开发成本低及制作周期短的种种特性使其在移动营销领域大放异彩。不需要懂编程，任何懂得操作计算机的人都可以通过HTML5在线编辑平台实现制作。HTML5页面在营销界获得了成功，其在教育领域同样有用武之地，特别是移动学习，HTML5页面就是移动终端的幻灯片，比传统幻灯片具备更强的表现能力。目前，最受用户欢迎而且提供免费功能的HTML5在线编辑平台主要有易启秀、Make、初页、点点客海报和兔展等。它们都是简单、免费、好用的HTML5页面微场景制作工具，移动场景自营销管家。可以用于制作企业推广手册、宣传海报、招聘启事、意见收集、报名表、邀请函、相册、贺卡、简历等社会化应用微场景。使用简单，只需一台普通计算机、一个支持HTML5的现代浏览器，如Chrome、Firefox、IE11等，就可以零代码、极速制作，并且可以多渠道发布与推广。提供多种不同行业、不同风格的模板给用户免费使用，即使没有设计基础，也可以做出漂亮的HTML5页面。以易企秀为例，模板中心提供了图文混排、海报、招聘、表格等用途类模板，表单、互动、事件等功能型模板，以及怀旧、现代、中国风、扁平化等风格型模板。懂得设计的用户可以自己设计模板，并保存到个人模板库中。大多数的HTML5在线编辑平台提供文本、图片、形状、音乐、视频、互动、表单、特效等多种多媒体元素组件，用户可以根据需求上传本地音频与图片等素材，并自动存储到个人素材库中，方便重复使用。HTML5在线编辑平台的强大之处还在于其分享渠道便捷和精确的数据统计分析以及汇总功能。最简单的分享方式是识别二维码或QQ、微信等社交平台群发URL；数据统计与分析功能可以统计用户访问情况，如总访问数、平均值与峰值，访问用户地域分布，使用设备情况，新老用户情况，性别比例，年龄、学历、职业分布，交互次数等；数据汇总功能用于收集并保存用户提交的表单数据和留言内容等，这在移动学习中，对学习者反馈信息的收集起到重要的作用。

三、各类移动平台在移动学习应用的状况

移动学习是一种特殊的学习，它极大地依赖于技术、设备和平台，已经经历了较长发展时期，且其发展主要以设备与技术的发展为导向，其发展趋势是，从基于手机短消息服务SMS和多媒体短信MMS业务的移动学习，基于WAP浏览的移动学习，基于移动博客的移动学习，到基于Android、iOS平台的学习类APP和移动社交平台以及基于HTML5平台的移动学习。总之，移动学习的应用模式呈现多样化的发展趋势[4]。目前支撑移动学习发展的技术、设备和平台越来越成熟，普及率越来越高，第四代移动通信技术（4G）、WIFI技术、大屏幕智能手机的出现与普及将移动学习推向了新的高地。

技术与设备已经相当成熟，但平台和资源的研究与建设相对落后。基于SMS和MMS推送、基于WAP浏览方式的移动学习已经落伍，基于Android、iOS平台学习类APP和基于以微信为代表的移动社交平台的研究正方兴未艾。微信公众平台具有信息群发推送、自动回复、一对一交流互动等功能，为用户提供更多定制化、更创新和便捷的移动互联网服务体验[5]。由此可见微信公众平台作为移动学习平台是适合的，对应的研究也络绎不断，近两年来也涌现出来一大批学习平台公众号，例如，口袋英语公众号，每天向关注用户推送英语美文、英文歌曲和电影、口语词汇等内容；希沃学院公众号，主要是向一线教学工作者教受使用何种技术与工具来提高教学效果，推送内容主要是图文和视频教程；等等。

笔者以中国知网（CNKI）全文数据库为样本，以“移动学习+平台”为主题关键词进行精确检索，文章发表时间限制在2000年1月1日至2016年3月31日，总共得到样本1213篇，剔除不相关文章后，得到基于WAP浏览方式的有26篇，基于移动博客的17篇，基于Android平台的104篇，基于iOS平台的16篇，基于智能手机的41篇，基于微信平台的119篇。基于Android、智能手机和微信平台的研究占了大部分，而Android、智能手机和微信正是近几年最普及的移动设备和最流行的移动社交平台。

与Android、iOS和微信平台相反，HTML5在线编辑平台在移动学习中的研究与应用还是一片空白，而基于HTML5的移动学习平台方面的研究与应用却很常见，绝大多数参与者是软件开发人员，从技术层面上探讨基于HTML5的移动学习平台设计与开发。例如，陈楠楠[6]的硕士毕业论文探讨了基于HTML5的移动学习资源设计原则，利用HTML5关键的音视频技术和知识地图等完成了资源平台的建设。郑巍[7]利用HTML5技术设计和开发了课程资源管理的移动平台，实现教师随时随地管理课程资源。赵爱美[8]利用HTML5对传统.NET架构的学习资源站点进行改进，实现传统Web学习资源的移动客户端访问。以上的研究对移动学习平台设计与开发的技术人员有一定的参考价值，而对一线教师构建移动学习资源平台意义不大。移动学习资源平台的构建不仅仅是平台开发人员的事，一线教师也应该积极参与，创造更多、更高质量的移动学习资源，解决目前国内移动学习资源匮乏、质量参齐不齐的问题。

四、基于HTML5在线编辑平台移动学习资源构建与应用

移动学习资源是新一代的数字化学习资源。数字化学习资源依托信息技术的优势，较传统学习资源具有多样性、共享性、互动性、扩展性、再生性等特点[9]。移动学习资源除了有这些特点之外，还具有内容碎片化、跨平台支持、呈现区域有限、图片视频为主文字为辅、更强的视觉效果、更便捷的交互等特点。移动学习的过程是一种短时的、沉浸度不大的过程，周围环境可能是混乱嘈杂的，期间随时可能被自身或者外界因素影响而打断，并且之后可以迅速恢复。一线教师利用HTML5在线编辑平台创建移动学习资源时，应该遵循移动学习的规律与移动学习资源的特点。

HTML5在线编辑平台具有零代码、零设计、极速制作、便捷分享、幻灯片式展示、跨平台支持等优点，十分适合一线教师用于构建移动学习资源。一线教师可以像操作各类幻灯片制作工具一样操作HTML5编辑平台，无论是文本、图形、图片，还是视频、表单输入框、互动元素等，都是可操控组件，不需要任何代码控制，可以使用鼠标任意拖放，是一种所见即所得的体验。像幻灯片一样分页制作，用户可以任意添加、删除和复制页，每一页上的元素可以自由布置。

1.建立在线素材库

HTML5在线编辑平台一个最主要的特点是在线编辑、在线存储，因此，首先需要建立一个在线素材库，将本地计算机的文本文档、图形图片、音频、视频等资源上传到线上，无论何时何地都可以构建移动学习资源。目前大多数的HTML5在线编辑平台都提供了用户上传图片和音频并自动保存到我的图片和我的音频库的功能，但不支持本地视频文件的上传，只能嵌入优酷、土豆与腾讯视频。一个可行的方法是用户注册一个优酷、土豆或者腾讯视频账号，将本地制作的微视频上传至这三大视频分享网站上，然后便可以直接嵌入HTML5在线编辑平台。

除了短视频，图片与文字是移动学习资源最主要、最重要的元素。跟传统的书本和电子书不同，移动学习资源不应该是大篇幅的文字描述，而是要类似幻灯片一样图文混排，有合适的转场效果、淡入淡出等其他动画。移动设备，无论是手机还是平板电脑，屏幕大小是有限的，在有限的屏幕上放置文字内容越多，段落跃密、字号越小，显示效果越差，容易造成阅读者视觉疲劳，严重影响阅读心情。一种理想的方案是，尽量提炼、精简文字内容，多使用图像表达，一幅好的图像能比密密麻麻的文字传递更多的信息。HTML5在线编辑平台允许用户上传本地图片到我的图片库，可以在线管理图片，对图片进行分类，还可以在线作图，这得力于HTML5 Canvas技术的支持。

2.与微信结合，实现资源的快速、广泛传播与互动

HTML5在线编辑平台可以制作出海报级的、超强视觉效果的移动学习资源，可以实现幻灯片式的浏览，很大程度上改善了学习者的阅读体验。但它本质还是H5页面制作与内容呈现平台，不是一个传播、分享平台，实时互动性也有所欠缺。移动学习资源需要靠移动设备与移动平台传播与分享才能发挥其价值。微信是一款非常好的传播、分享社交软件，腾讯公司公布了2016年一季度业绩报告，其注册用户数量已经突破7亿大关，月活跃用户5.49亿；现在的年轻人几乎人手一部智能手机，每人一个微信账号，可以借助微信传播与分享移动学习资源。HTML5页面制作好之后便可以进行设置和发布，可以起一个吸人眼球的标题和概括资源主要内容的描述。页面发布后生成一张二维码和URL地址，移动学习活动组织者或移动学习资源提供者将二维码或URL地址发布到微信公众平台上，学习者就能轻松访问基于HTML5页面的高质量学习资源。

目前HTML5在线编辑平台还不能制作实时互动的H5页面，但是可以在线留言与提问，组织者通过后台查看学习者留言内容和所提的问题，并及时作出回复。学习者与组织者之间、学习者与学习者之间也可以通过微信平台进行学习问题解答、内容探讨等互动活动。

3.对学习者反馈信息进行收集与分析

学习反馈是改变学生学习行为、影响学习过程与效果的关键因素，是调控网络学习行为的重要途径，正确运用反馈，能改善网络学习过程、优化网络学习效果等提供支持[10]。无论何种形式的学习，都应该有相应渠道了解学习者的反馈信息，并针对反馈信息作出相应的处理。移动学习是一种特殊网络学习，学习者自由度较大，因此不少移动学习平台不注重反馈信息的收集与分析，经常出现学习者与组织者脱节现象。

HTML5在线编辑平台提供了多种用户行为数据统计分析功能，划分不同的时段，统计学习者访问次数、学习者区域分布、使用设备情况，可以了解不同学习个体积极程度、不同区域学习者的积极性差异、以及使用设备的偏好等。统计访问者的男女比例、新老用户比例、年龄分布、学历于职业分布等，比较新老用户、不同性别、不同年龄、学历与职业学习者的学习态度情况，更有针对性的提供学习资源。统计互动次数、电话互动次数和超链接点击次数，互动统计最能体现学习者主动探索的情况，比提供相关学习资料与扩展阅读的超链接，学习者点击越多，越能说明其学习能动性越大。对表单数据的汇总，可以是对学习者一项调查问卷或者是一次作业的收集，也可以是对学习者疑难问题的解答。所有的数据都将长期保存于HTML5在线编辑平台账户中，结合其他专业数据分析工具，可以挖掘更多更有价值的信息。

五、总结

本文分析了目前移动学习资源平台的研究、应用情况，认为移动学习的发展与技术、设备、平台的发展密切相关，移动学习资源的建设可以选择前沿的、广泛流行的、并与教育理念不冲突的社会化应用平台，比如微信和HTML5在线编辑平台。HTML5是下一代Web技术，未来的Web内容由社会大众创建，移动学习资源也应该由千千万万一线教师创建，HTML5在线编辑平台给他们提供了便捷、高效的创作平台。

参考文献：

[1]叶成林，徐福荫，许骏.移动学习研究综述[J].电化教育研究，2004 （3）： 12-19.

[2] World Wide Web Consortium. HTML5[J]. W3C Working Draft，< http：//www. w3. org/TR/html5， 2008.

[3]邢晓鹏. HTML5核心技术的研究与价值分析[J].价值工程，2011，30（22）： 157-158.

[4]郭绍青，黄建军，袁庆飞.国外移动学习应用发展综述[J].电化教育研究， 2011（5）：105-109.

[5]邱炳发，马燕，李明勇.微信支持下的移动学习资源设计研究[J].现代教育技术，2016（3）：114-120.

[6]陈楠楠.基于HTML5的移动学习资源设计及应用研究[D].西安电子科技大学，2013.

[7]郑巍.基于HTML5的课程资源管理移动网站的设计[D].辽宁：大连理工大学，2014.

[8]赵爱美.基于HTML5和.NET的移动学习平台研究与实现[J].河南科技学院学报（自然科学版），2013（4）：62-66.

[9]石巧珍，韩陈冲.数字化学习资源的时空特点及作用机理[J].现代教育技术，2007，17（2）： 30-32.

[10]张贝贝，李玉斌，武小力，刘会宇.网络学习反馈研究的现状及分析[J].中国信息技术教育，2015（9）：113-115.

（编辑：杨馥红）