基于H-TML5的移动端微课设计分析以"PS图像处理"课程为例

袁 芳

(宁夏警官职业学院 信息与安防工程系,宁夏 银川 750021)

基于H-TML5的移动端微课设计分析以"PS图像处理"课程为例

袁 芳

(宁夏警官职业学院 信息与安防工程系,宁夏 银川 750021)

当前,蓬勃发展的微课作为一种重要的教育教学资源和手段,已经不再局限于传统模式,正向着移动互联领域发展.文章以"PS图像处理"课程为例,从基于HTML5技术的移动端微课设计的可行性、具体设计方法、实施步骤等方面展开论述.

移动端微课;HTML5技术;PS图像处理

微课作为近年来教育信息化领域研究的热门方向,有着深刻的社会背景、理论基础和技术支持.微课作为一种重要的教育教学资源和手段,在各种各类教育教学活动中得到了广泛的重视和应用.终身教育和个性化学习等社会需求,要求人们借助现代信息技术开发更多优质的、形式丰富、跨平台的微课资源.

近年来在国内蓬勃发展的微课模式,较为广泛的形式是以CamtasiaStudio软件进行录制的视频,虽然适合于多平台播放,但在制作方式、传播途径方面面临着一系列困境,如微课内容呈现单一,多以视频为主;不利于用户交互、检索和反馈;对微课制作者的技术要求较高,更新繁琐;限于视频的体积,传统微课不利于在移动端学习等[1].

目前,对于传统微课的研究很多,但是关于移动学习应用以及移动端微课的研究较少,移动端微课资源、平台开发建设还不完善.在移动学习越来越普及的大环境下,把移动端学习方式与微课教学结合起来,不但能够搭建出一个形式多样、便捷个性化的移动学习平台,更能打破以视频为主的微课所面临的困境,是一个值得探索的研究领域.

1 研究现状

近年来兴起的HTML5技术,是在传统超文本标记语言(HyperText Markup Language,HTML)基础上的最新版本,是Web端全新的规范化标准.基于HTML5技术的微课(简称 H5微课)适合多种平台,能有效弥补传统微课作为视频形式在移动端的缺陷,更重要的是HTML5技术有丰富的交互效果,能够开发互动体验更好的网页,趣味性强,能让用户得到更好的学习体验.

基于微课的基本理念,HTML5微课也是集中围绕某一具体知识点或教学环节来开展的,是适合自主学习、短小精悍、跨平台的教学资源,特点如下[2]:(1)H5微课具有丰富生动的交互功能,有利于学习者自主学习;(2)H5微课易于修改,能够根据不同的需求和教学变化及时更新;(3)使用H5组件有利于数据的收集与及时反馈,有效地实施教学评价;(4)H5场景式平台工具广泛,制作效率高,技术门槛低;(5)H5微课响应速度快,有利于学习者获得更好的学习体验.

目前HTML5技术较为成熟,主流的开发工具有如下几种类型:(1)搭建开发环境,进行专业的HTML5和JavaScript代码开发;(2)选用现成的H5工具平台,制作交互场景式页面,对于没有编程专业基础的教师来说,这种方法最易上手;(3)软件类工具,如iSpring,FlipHTML5等转换类工具,Articulate Storyline,Lectora 等课件类开发工具,问卷星、问卷网等测试调查类工具[3].

2 "PS图像处理"移动端微课的设计

为了打破传统教学的桎梏,探索一套行之有效的微课教学应用模式,本研究拟利用HTML5技术、辅以社交分享等手段,针对形式多样、趣味性强的移动端微课的设计与开发问题开展具体研究,探索一系列完整的HTML5互动微课设计、制作和应用解决方案.本研究拟选取宁夏警官职业学院信息与安防工程系的基础必修课、具有可视化特点的"PS图像处理"课程,来进行若干案例设计.此课程知识点繁杂、实操内容多、强调学生的综合应用能力,学习难度较大.基于此,鼓励学生在课下开展移动端微课学习是对课堂教学的有机补充,有利于提升教学效果.

2.1 "PS图像处理"课程

"PS图像处理"作为众多计算机专业的必修专业课,是一门尤其突出应用性和实操性软件类课程,强调学生的实战能力.课程内容由浅入深,覆盖了Photoshop的基础知识、使用方法、应用技能,除课堂讲授、演示外,学生往往不容易在短时间内理解和掌握其精髓,容易失去耐心和兴趣.将"PS图像处理"课程按照微课的模式进行教学设计重构,形成若干短小、有针对性的小片段或专题,可以避免软件说明或案例罗列式的生硬.同时,HTML5微课富交互性,容易与学生建立良好的互动,激发其学习兴趣.

2.2 "PS图像处理"移动端微课设计的可行性

目前移动端开发技术及平台成熟,如炫页、易企秀和iH5等交互式场景平台,iSpring,FlipHTML5等转换类工具,Articulate Storyline,Lectora 等课件类开发工具,测试调查类工具等,都可以开发出形式丰富的符合网络课程标准的交互式HTML5微课.

信息与安防工程系智能终端技术与应用专业开设有"PS图像处理""网页制作""UI设计""移动公众平台开发""移动终端开发""flash动画制作"等系列课程群,这些为本研究的开展提供了强大的专业及课程群支持.

除此之外,研究团队师资力量强大,具有丰富的教学改革经验及实际开发技术经验.团队成员前期在Web前端技术及微课教学方向有大量研究,具有学院信息管理系统、分类招生考试系统等多个项目的开发经验,为本研究的开展提供了丰富的理论经验及实践素材.这些无论是从技术层面,还是师资层面,都为本研究奠定了坚实的基础,从而能够从基础层面保证研究自上而下的实施.

2.3 "PS图像处理"移动端微课的设计方法和步骤

"PS图像处理"微课的具体开发步骤,可以分为如下几个阶段.

(1)在文献查询、经验对比总结的基础上,系统研究HTML5微课的特点.针对"PS图像处理"课程展开研究,梳理课程知识体系结构,进行关键知识点提取,重构课程教学设计,形成典型案例.

(2)与传统微课设计制作的过程类似,HTML5微课同样需要一个良好的教学设计.在全面分析课程特点和学习者特征、继而提炼出关键知识点的基础上,选定具体的知识点,确定学习目标,精心设计场景、教学过程、教学资源、各个教学环节后,进行微课脚本设计.值得注意的是,HTML5微课强调的是交互性,所以在设计脚本的过程中应当适时加入合理的动画、测试表单、课后练习、游戏、链接跳转等内容,这样才能给学习者带来丰富的动态效果.

(3)采用合适的技术手段方法,开发微课案例.以简易的HTML5平台工具为例,选择合适的模板,根据微课设计脚本的提示制作各个场景页面.需要交互的内容可以根据整体页面布局的情况,选择合适的组件,如链接、测试、跳转、表单等.除此之外,可以录制配音在有需要的位置添加,或者整体添加背景音乐.初步完成整个微课场景后还需要进行测试,及时发现问题,并进行优化完善.

(4)将微课案例应用到具体教学过程中.HTML5微课完成后,将网址和二维码复制,发送到学生的QQ群、微信群以及网络教学平台,使学生随时随观看移动端微课.此时可以辅以一定的作业和任务,激励学生课下自主学习.

(5)通过教学实践,来检验"PS图像处理"HTML5微课的效果.通过比较研究、分析调查等方法,检验项目成效,归纳总结经验.初期以信息与安防工程系信息技术类专业一年级学生(约150人)为试点,来小范围实施并检验成效,项目成熟后可推广至更多的学科,面向全院师生,受益学生数量也将随之覆盖全院.

3 设计创新及意义

本研究基于微课理念而来,与时俱进地契合移动学习趋势,同时贴合大学生的兴趣特点,呈现出一种让学生容易接受的新型便捷的移动学习形式,有效带动学生的关注点,提高其自我学习和接受知识的能力,从而提高课程的学习效率.

3.1 创新之处

作为微课资源的一种延伸形式,HTML5微课在本质上依然保留了微课本身的教学特点的同时,其自身也有一些鲜明的特点与创新之处:HTML5微课具备更加生动的视觉听觉效果,能够最大限度地提供新媒体控件下的生动的教学体验;基于HTML5技术制作的微课,更易在社交平台、SNS社交网络中进行传播,具有更大的共享可能;对比"只能看不能交互"的单一形式的视频微课来说,HTML5微课的场景化模式、富交互特性,有着很大的优势.

3.2 研究意义

"PS图像处理"移动端微课的研究,首先对于课程本身而言,作为课堂教学的补充,在未来有很大发展空间.其次,在本研究的典型HTML5微课案例的基础上,进一步系列化、规范化,形成微课程体系,不仅能激励教师自身创新和职教能力的发展,而且对于其他学科和课程而言,也有非常广阔的推广借鉴意义.

4 结语

基于HTML5的互动微课与移动端的有机结合,打破了传统视频微课交互功能弱的局面,将进一步活化教学内容,带给人丰富的互动体验,在很大程度上能激发学生自主学习的兴趣和信心,有利于促进学生学习方法的转变,同时对教师自身的成长也是一种极好的锻炼.

[1]冷国华,蔡志东,许翊.HTML5互动微课开发与应用[J].镇江高专学报,2016(3):37-41.

[2]周媛媛.浅谈基于H5工具的课件制作[J].科技风,2017(4):12.

[3]邹瑾.HTML5技术微课资源建设初探[J].西部学刊,2017(4):80.

[4]张博,刘云.基于HTML5的视频监控微课设计浅析[J].电脑知识与技术,2016(24):208-209.

Analysis on the design of mobile terminal microlecture based on HTML5:taking "PS Image Processing" course as an example

Yuan Fang
(Information and Security Engineering Department of Ningxia Police Vocational College, Yinchuan 750021, China)

At present, the booming microlecture as an important educational and teaching resource and means, is no longer limited to the traditional mode, and is developing towards the field of mobile Internet. In this paper, taking "PS Image Processing" course as an example,discusses the feasibility, concrete design methods, implementation steps of the design of mobile terminal microlecture based on HTML5.

mobile terminal microlecture; HTML5 technology; PS image processing

袁芳(1984- ),女,宁夏银川人,助教,硕士;研究方向:图形图像处理,网页制作,微课教学等.