田美艳，林宗朝，郑 超，郑 蕊

(1.厦门华天涉外职业技术学院，福建 厦门 361000；2.厦门市同安职业技术学校，福建 厦门 361000)

职业教育越来越被人们重视，人类的生产生活离不开现代信息技术的应用，特别是“互联网+”环境的出现，各种信息化工具层出不穷，《国家职业教育改革方案》的出台，指明了职业教育的改革方向，工作过程导向的课程开发理论已经很成熟了，但在”HTML5 UI设计实训”课程中的应用实践少之又少，因此，结合线上和线下的混合教学在该课程中的应用，促进学生泛在、自主、碎片化、个性化学习[1]。

融合了线上和线下相结合的混合教学在职业院校的课堂教学中应用广泛，广大教师也做了一些尝试和应用型的研究，但还存在一些不足，特别是混合教学设计、规范性、混合性方面的应用较少。因此，本研究以”HTML5 UI设计实训”课程为载体，依托ADDIE教学设计模型和4C/ID教学设计模型，参考国内外的研究现状，设计出以工作过程为导向的课程混合教学设计架构。

一、工作过程导向的”HTML5 UI设计实训”混合教学设计与实践的思路

ADDIE模型共有五个环节，将”HTML5 UI设计实训”课程的混合教学设计分为五个阶段。

(一)分析阶段

按照工作过程导向进行优化设计，从学习情境和学习者分析两个维度出发，融入4C/ID模型进行复杂性技能分解，通过支持性信息分析、非复用性技能分析、复用性技能分析、程序性信息分析四个维度的任务分析形成技能簇和任务组，课堂教学中采用工作过程导向的职业岗位能力点为教学目标，可以促进学生的学习兴趣和积极性，这有别于常规教学中的理实一体化模式。信息化时代，各种教学平台的出现，让教学的时间和空间有了更多的选择，学习可以自由灵活，并且碎片化，课前课中课后，线上线下混合教学，此时的教学内容该如何进行设计，以什么形式呈现，成为了混合教学设计的关键。

(二)设计阶段

教学设计的重点是对学生的学习任务进行设计，设计阶段要对应着分析阶段五个技能分解分析进行的模块设计，通过任务分析形成技能簇或任务组对应着学习任务的设计，支持性信息分析对应精制编码信息呈现形式的设计，主要通过采用促进精制编码的方法，设置情境导入预习，练习前预先提供利用[2]。非复用性技能分析对应归纳训练设计，该训练设计应该要选择促进归纳的方法。复用性技能分析对应汇编训练设计，该训练设计要选择促进汇编的方法。程序性信息分析对应限制性信息呈现形式的设计，主要通过采用促进限制性编码的方法，设置课中练习，让学生在练习过程中直接可用。混合教学设计中的教学环境设计尤其重要，”HTML5 UI设计实训”课程教学环境主要有三种：线上、线上线下、线下，每种教学环境分别设计教师的教学活动和学生的学习活动，最后合成本门课程的混合教学策略。

(三)开发阶段

针对设计阶段最后的混合教学策略开发符合相应的课程资源，以数字资源为主，适合线上线下使用，符合职业教育理念，具体呈现的形式有工作过程导向岗位要求的任务单、知识与技能的微课、各种形式的多媒体课件、以职业素养为内容的动画、以及客观评价的测试习题库等，可以利用网络教学平台、iPad、平板、智能手机等开展”HTML5 UI设计实训”课程技能测试。

(四)实施阶段

该阶段主要是开展混合式教学，分为课前、课中、和课后，在多元化的信息化教学环境中进行教师活动和学生的学习活动，”HTML5 UI设计实训”课程采用项目式教学，将课程的知识点分解为各个子项目，每个子项目采用任务驱动法进行教学，在课堂中采用线上线下的方式，教师在课堂中可以采用子项目任务的问题情景导入，监督学生的自主学习活动，再通过案例的分析，学生分组学习，自主探究，教师引导，将课程子项目的技术点进行讲解，可以采用游戏对战活动的形式呈现，然后教师布置任务并提供导学案，对学生的任务进行指导学习，解决技能难题，最后学生组内交流，组与组之间PK，互相评价，教师点评总结，最后任务完成。课中的教师活动和学生活动能够成功离不开课前的准备，主要以线上为主，教师可以通过学习平台提前发布教学预习视频让学生进行自主学习。课后的提升阶段也是以线上为主，教师可以发布拓展资料让学生进行自主学习，通过线上进行辅导答疑，教师可以布置课后项目任务，提供技术评价指标让学生参考，学生通过平台进行作品展示，学生在线上进行互评，最后教师选出优秀的作品进行点评， 这样通过课前、课中和课后三个教学阶段的混合式教学，产生了良好的效果[3]。

(五)评价阶段

将过程考核的形成性评价与结果考核的终结性评价权重均设为1：1的比例，增加过程考核的形成性评价的比例，随着课程过程性评价的考核实施，我们应当逐步减少期末测试比重，学生自己感受到学习的快乐、就会以主人翁的心态去尝试协同学习和通过各种平台渠道等去获取 知识与课程岗位所需要的的技能。评价贯彻教学过程的始终，评价后教师要对学生的学习情况及时的反馈，并不断完善教学设计与教学实施方案，通过这种不断的迭代，可以促进教学质量的螺旋上升[4]。

二、工作过程导向的”HTML5 UI设计实训”混合教学设计与实践的过程

(一)分析阶段

1.学习情境分析

计算机应用技术专业”HTML5 UI设计实训”课程是一门专业核心课，面向计算机信息类、网络互联网类企业培养学生规划网站、建设网站及网页设计的能力，参照工作过程导向的的课程设计理念，提炼出了9个学习情境，分别是：HTML5离线应用；HTML5 Web Workers多线程处理；HTML5 Geolocation地理位置；CSS3概述；CSS3选择器；文本字体与颜色；背景与边框；2D变形；设计动画。

2.学习者分析

以“学习情境CSS3选择器”为例，学习者已经学习了CSS3的编码规范、新增特性和应用CSS3设计网页界面等内容，但未接触具体企业的工作场景，不了解选择器的基本概念，CSS3选择器的分类和使用方法等；学生对企业的真实项目的实践学习有很浓厚的兴趣，通过企业的项目任务具体工作过程导向，能够提升学生解决问题的能力。

(二)设计阶段

1.学习任务设计

以工作过程为导向，结合4C/ID理论，我们设计4个项目学习任务，分别是：项目1企业宣传类网站设计以实现，该项目主要是可以通过学生制作个人主页形式的网站、学校的招生宣传网站、公司的产品介绍类网站等形式来完成；项目2视频音频类网站，具体就是通过HTML5音视频的制作来呈现网站的宣传，主要涉及到界面的设计、页面的布局规划、测试与运行；项目3学生成绩管理系统，该项目主要运用HTML5本地的数据库功能来完成学生的成绩管理系统，主要涉及到需求分析、数据库设计、单元测试和系统测试；项目4坦克大战游戏，本项目主要通过HTML5的绘图功能综合应用来完成小游戏的制作，主要涉及到游戏总计架构的搭建、游戏模型的构建、编码实现与测试。

2.学生的角色设计

成立项目组，每组有自己的团队名称，成员构成6到7人为宜，每个学生都有自己的岗位职责，整组的任务安排以工作过程为导向，按照岗位要求，学生各司其职，教师给每个学生下具体的工作任务单[5]。

3.教师的角色设计

教师的角色不固定，可以根据教学设计的不同阶段担任不同的岗位职责，配合学生的项目任务的完成，可以出任项目经理，对各个项目组提要求，下达工作过程导向任务单，即对学生提出学习目标的要求，并设置时间节点，定期检查任务成果；教师还可以出任客户的角色，将学生的项目任务作为“业务”，学生完成任务后，有客户验收，是否满足业务功能需求，教师的角色由教转变为导。

(三)开发阶段

本阶段主要为数字化资源的开发，信息化时代各种教学平台层出不穷，例如：超星泛雅教学平台、学习通、云班课、雨课堂、i博导、爱课程等等，我们可以以其中的一种教学平台为依托来构建框架模型，呈现数字化资源的展示形式，平台必须具备交互性好、功能稳定流畅、线上线下相结合，可以记录学习痕迹，并最终形成课程评价分析报告等报表，为混合教学策略的实施奠定基础。

(四)实施阶段

计算机应用技术专业学生入学时会进行分班，在第1学期开设”HTML5 UI设计实训”课程，我们分别从2018级学生中选择5个班级按照传统的教学方式进行考核、2019级学生中选择3个班级进行传统+过程性教学的考核评价方式和2020级学生中选择3个班级进行工作过程导向的混合式教学考核。

(五)评价阶段

借助泛雅网络教学平台实现了课程技能测试信息化、标准化、无纸化。将超星泛雅网络教学平台的线上测试比例设置为四分之三，利用学校机房、实训室等线下测试比例设置为四分之一，除了实训室机房上机实训 ( 课内实训 ) 为线下测试外， 其他的七种要素项均在泛雅平台线上由任课教师根据课程性质和平台功能版面模块进行考核测试，自动记录产生形成性评价的结果，最终导出文件。

经过对”HTML5 UI设计实训”课程的工作过程导向混合教学实施过程实践，结果表明，师生对该课程混合教学方法比较满意，大部分学生觉得操作规范、评价合理，在学生中产生了积极的效果。很多学生从排斥到喜欢这种工作导向课程教学方法，学生的主动性提高了，学生的成绩自然也就提高了。从学校当中随机抽取11个班级，以”HTML5 UI设计实训”同一门课程为例，以工作过程导向混合教学与传统教学的考核配对样本进行检验，考核结果见表1。

表1 “HTML5 UI设计实训”工作过程导向混合教学与传统教学的考核配对样本检验

不同班级采用不同的教学方法后的考核评价数据图例见图1，采用工作过程导向混合教学方式后，教师根据主观喜好随意送分的现象减少了，使优秀和良好比例的学生有所下降，成绩常态化分布，中等和及格比例的学生有所上升，临时抱佛脚等平时不认真学习的学生成绩回归常态、期末突击、死记硬背的学生也因为考核方法的实施逐渐较少，这样导致了图例中不及格比例略有升高，真正体现了学生的学习情况。

图1 课程不同教学方式实施效果比照

三、结束语

本研究以”HTML5 UI设计实训”课程为例，以工作过程导向为主线，结合经典的教学设计模型：ADDIE模型和4C/ID模型，进行”HTML5 UI设计实训”混合式教学设计，依托超星泛雅网络教学平台开展混合式教学实践。通过”HTML5 UI设计实训”线上和线下的混合教学，工作过程岗位能力融入课程教学中，学生的学习兴趣提高了，满意度和自主学习能力等各种综合素质得到了质的提升。