混合式金课探索与实践——以Web前端开发类课程为例

郑丽萍

(江苏电子信息职业学院, 江苏 淮安 223003)

Web前端开发类混合式金课要承载线上线下全方位传授知识和育人的双重功能, 帮助学生树立正确的人生观和价值观,领会中华优秀传统文化、社会主义核心价值观要义。当前的高职学生从小就接触电脑和网络，绝大部分的高校都具备了完善的校园网络，个性化学习正好适应高职实际情况，与现代职业院校办学目标及“互联网 +”背景下学习者的需求高度契合[1]。课程组以学习者的学习特点分析为出发点，开发精品在线开发课程，顺应时代要求。遵循“一体化设计、结构化课程、颗粒化资源”[2]的建设理念，开发基于项目化的新形态教材。课程采用多元混合教学模式[3]，教学活动上，精品在线课程与项目实战相辅；教学资源上，新形态教材与线上资源相结合；教学环境上，职业体验与虚拟线上课堂的相互联结；评价方式上，采用注重过程评价的多维综合评价。

由于高职学生理论学习兴致不高，部分学生直接理解理论概念有一定困难，课程采用项目教学法，以项目带动理论的学习，让学生清晰地看到所学的知识点能用在哪些项目中，并通过基础项目到拓展项目逐步带动学生进行“学-仿-创”[4]，使得学生的前端开发技能螺旋上升，部分同学能在拓展项目的基础上创新项目，通过学生优秀作品的展示，使他们获得成就感和自豪感，加强学生的实践能力，并为后续的项目申报和技能比赛奠定基础。

1 混合式金课构建基础

Web前端开发类课程是软件技术专业的专业课程。课程组在深入企业一线调查和对高职生源的充分了解的基础上，将知识理解与实际应用有机地融为一体，设定项目教学案例以确保课程内容与职业岗位需求相结合。遵循学生学习认知规律，不断的培养学生的学习自信心、自主性与自学能力，从而提高学生对知识的理解及提高分析问题、解决问题的能力。

课程开发了多个融入思政的综合案例，如：通过红色旅游等Web应用的制作，传承毛泽东、周恩来等伟人精神，进行革命传统教育、红色教育，在传承红色基因的过程中培养有理想、有信仰、有担当的时代新人。

课程内容符合Web前端开发职业技能等级证书的要求，课程根据人才培养方案，按照职业岗位能力需求，采用模块化结构，通过难度螺旋上升的教学项目培养学生掌握Web前端开发知识和技能，具备交互型网站设计、开发、调试、维护等能力。

为了实现信息技术与教育全面“深度融合”，实现以“学生为中心”的教学方式，课程可以采用翻转课堂教学模式，可以弥补传统课堂教学的不足，特别是能够帮助学生进行个性化自主学习，调动学生的学习积极性，遇到难点可以反复的观看，利用简短的教学视频在课下向学生传递新知识，在课堂上让学生开展协作学习，进行一定项目的实践，课程中采用项目化教学从而完成知识的内化。它从根本上改变了传统课堂教学的流程，给学习者带来完全不同的学习体验，培训学生的团队合作意识和创新能力。

2 混合式金课的构建过程

混合式金课的构建过程是由以“教”为主的教学模式向以“学”为主的教学模式转变过程。实现信息技术与教育全面“深度融合”，结合线上线下的优势，弥补传统课堂教学的不足。让学生在线上自主进行MOOC课程学习，教师结合实际案例重点讲解关键技术的应用，并通过一系列前端技术挑战性训练和综合项目实战深化学生对技术知识的理解和运用，实现学生从基础能力向应用能力、分析能力、综合能力的逐步提升。整个构建过程，教师需要做足相关的准备，如图1所示。

图1 多元混合教学准备示意图

这里主要介绍线上资源准备，配套的新形态一体化教材准备和课中的任务准备。

2.1 线上资源准备

为了多元混合教学模式的有效实施，教师负责按照职业能力要求重新梳理课程结构，进行课程的整体设计和知识点拆分，重构课程内容，在线上上传课程的学习资料，包括微课、相关电子文档、实践素材、源程序、教学PPT、教学大纲、考核方式、讨论主题、单元测试、作业、期中与期末考试等丰富的数字化资源，顺应了现代信息技术发展的趋势，适应了学生的自主性、泛在式、碎片化的学习需求，既方便课内教学，又方便学生课外预习与学习；让学习变得更加方便有效。

线上资源经过不断的补充和完善，Web前端开发类课程《JavaScript及框架应用》在线课程已于2019年立项为江苏省精品在线开放课程，面向社会学习者、高职学生、专接本学生及应用型本科学生开放，目前开课到第6轮，选课人次数万，人员覆盖全国31个省、自治区和直辖市。线上内容由浅入深，每讲内容都与案例紧密结合，有助于学习者理解知识、应用知识。所选案例具有极强的扩展性，能够给学习者以启发，举一反三，实现非常实用的效果。线上目前有微课资源150个，包含微课获奖资源，相关文档等其他资源180个，发布讨论主题近百个，15个单元测试，主观大作业若干，期中期末考试等。课程资源应用面广，对各层次的学习者都有选择空间，能够很好地实现分层教学。为确保在线开放课程的有效实施，团队成员设置了近百个讨论主题和问题引导，主讲教师积极参与在线课程的运行，在线答疑和讨论等活动。

课程中的专业知识与意识形态教育有机结合。把工匠精神培养、立德树人教育“融入”到教学场景设计和教学资源开发过程中。在知识学习的同时培养学生树立正确的人生观、价值观。帮助学生在收获学术知识、理解研究方法、熟练掌握开发技巧的同时，引导他们在专业发展道路上立下鸿鹄之志，成为有理想、有本领、有担当的新时代青年。

2.2 配套的新形态一体化教材准备

在课程教学改革的过程中边探索、边研究、边实践、边完善，逐步开发了在线课程配套的教材《JavaScript与jQuery案例教程》，既实现了学生碎片化的学习，又满足了系统化、结构化学习的需要。

考虑到JavaScript应用领域的不同(PC端或移动端)以及不同框架支撑(如jQuery、jQuery UI、MUI、Bootstrap等)，我们编写了多部JavaScript及框架应用相关的基于项目化的新形态一体化教材，以满足各方面的需求。

2.3 课中任务准备

真实课堂中在强调基础理论学习的基础上，结合前端技术的不断发展，通过相关项目案例详细介绍JavaScript及其框架的实践运用，既实现了理论学习的体系化，又与实践应用进行了结合，强化了对相关知识的理解、应用和巩固。教师选取既通用又典型的项目案例，能够给学生以启发，具有极强的扩展性，可以举一反三，实现非常实用的效果。并且注重案例的趣味性，激发学生学习的积极性。

课程德树人为根本宗旨，通过提升教师思政育人能力、修订课程标准等手段加强课程思政教育，在教学中适时融入课程思政要素，有机涵盖爱国、敬业、诚信、友善等社会主义核心价值观，精忠报国、孝悌忠信、礼义廉耻等中华传统美德，习近平新时代中国特色社会主义理论，思政项目如：个人事务管理系统提高个人自律，社会主义核心价值观基本内容的动态展示；奥运项目图片动态切换来感受奥运健儿的拼搏精神；红色景区轮播图，红色景区列表页及详情页面制作；思政新闻选项卡动态实现等等，既学习了课程相关的知识点，又融入了思政内容，并收集思政专题网站，作为和学生一起研究学习的素材。

在课中项目任务熟悉的基础上，准备多个拓展方案供课中引导学生对基础项目进行拓展，并准备整个课程的大纲、教学计划及教案等文档材料。

3 混合式金课的实施

3.1 课前活动：教师布置预习作业，学生自主学习探索

预习是学习中很重要的一种学习习惯，是进行独立学习和思考的过程[5]。在预习过程中学习新知识和弥补薄弱环节，做一些基础的知识点应用练习，预习后可以带着问题线上向老师发出提问，为课中综合项目实践作何准备。

教师QQ群中发布预习任务(也可以在上节课的末尾来布置)、线上发布公告，对学生的线上提问及时辅导答疑，批阅主观作业及单元测试，同时收集学生的易错点和难点，记录作业比例，标注优秀拓展性主观作业，供线下课堂展示和引导；收集反馈信息，及时完善修改资源，完善课程。

3.2 课中活动：教师创设工作情境，学生综合项目实践

根据线上单元测试的效果以及主观作业效果进行评价，对难点进行讲解，拓展代码功能，引领学生根据自身情况和兴趣点完善拓展或改版项目案例，激发学生的学习动力,引导学生积极开发自我潜力, 注重培训学生的团队合作意识和创新能力。

所选案例通过创设情境、设计学习任务、学生自主探究几个环节，实现“做中学、学中做”，真正做到学以致用。项目驱动理论学习，解决课堂重点难点；提高学生的学习兴趣和课堂参与度。案例贴切，易懂又有拓展性，学生很容易上手，动手后会很有成就感，经过逐步的项目完善，很多学生会感觉到在我们的课程中得到了升华。

真实课堂会先通过项目基础案例启发诱导，指导学生初步探究，实现项目基础功能，再逐步拓展实现更复杂的功能和技能点。比如表格操作的实现删除行的功能，这样的功能可以运用到很多领域，比如社团成员信息管理，社团活动信息管理，学员成绩信息管理等等，核心知识点都是deleteRow(index)用来删除指定行，要实现删除当前行，有多种方案可行。

(1)线上虚拟课堂中微课上的方案：单元格里面放“删除”按钮

单击事件绑定在“删除”按钮上，通过“删除”按钮向上两层访问到行对象，也就是使用2次parentNode属性。

(2)真实课堂中的基础版方案：单元格里面放“删除”文字

这时要明白和微课上方案的区别：由于文字不是元素节点，单击事件绑定在单元格上，在访问行对象时，要向上少访问1层，也就是使用1次parentNode属性。两种方案的对比使学生明晰文档的DOM结构及其元素的遍历方法。

(3)真实课堂中的仿做方案：单元格里面放“删除”图标

使用立体感的图标会使整个页面效果亮色不少，但功能上的实现方法类似，单击事件既可以绑定在单元格上也可以绑定在“删除”图标上。

(4)真实课堂中的拓展方案：前面几种方案都是通过直接在HTML代码里定义了一个onclick的属性触发自定义函数del()，这样的事件处理程序最大的缺点就是HTML于JavaScript强耦合，一旦需要修改函数名就得修改两个地方。其优点是不需要操作DOM来完成事件的绑定，而且这种方式学生很容易理解和普遍接受。在掌握此种方式之后，可以考虑使用事件的动态绑定，将一个函数赋值给一个事件处理属性的方式绑定事件，实现JavaScript代码和布局代码的分离，为后续的功能拓展奠定基础。

在上面的每一个环节对一些普遍的问题进行集中讲解，一起发现bug和修复bug，注重界面的审美，对个别学生进行指导，鼓励进展快的学生自我创新，学生通过实践，不断反思、学习和总结的过程逐步提高了编程和调试能力。并且通过完成的项目成果及时去反馈学习的成效，是一种“做中学、学中做”的体验教学方式，为后续的项目创新打下良好基础。

3.3 课后活动：教师教学反思，学生巩固拓展提高

学生根据教师布置的作业完成线上任务和项目拓展任务，教师查看和批改线上测试及作业，根据线上单元测试效果，加强相关知识点的讲解，不断丰富网络教学资源或适当调整教学计划。

鼓励每位学生自我创新，根据自己感兴趣的主题改版项目，并根据改版的程度给学生打分。项目功能拓展或改版包括：界面创新，能根据自己的兴趣创新改版教材中的页面，设计友好美观页面；技术创新，能实现代码的优化和封装，或扩展新的功能。对于优秀的同学引导他们申报项目和参加技能比赛，激发学生的潜能。

4 结 语

混合式金课的建设和实践让学生获取知识的手段更丰富，方式更便捷，充分调动与发挥学生的积极性与主动性，课程紧跟岗位需求与“1+X”证书[6]，目标定位准确。课程思政采用显性隐性相结合、线上线下相结合、课内课外相契合、内容与思政相融合等路径；选择模块化设计理念，通过递进式的项目实战强化知识应用和技能培养，适应不同层次学生需求；开发配套基于项目化的新形态教材，满足师生混合式教学需要。经过几年的实践表明该模式可以使学生真正成为学习的主人，提高学习效率，深化项目的学习和实践，从而提高学生的前端综合开发能力。