《Web前端开发入门》在线开放课程的建设与应用

【摘要】本文以《Web前端开发入门》为例，介绍了在线开放课程在课程标准、教学内容、教学模式、评价方式等方面优化的探索实践。

【关键词】在线开放课程  Web前端开发入门  教学改革  混合式教学

【中图分类号】G642   【文献标识码】A 【文章编号】2095-3089（2022）08-0179-04

一、课程建设背景

2019年上海市教委启动了职业院校在线开放课程的建设，该类课程是在精品课程建设基础上，优化课标设计和教学评价体系，完善并整合在线资源，使其与教学实际需求匹配融合。凝聚提炼经典教学实录与教学案例，发挥优质职业教育教学资源的辐射功能，推动信息技术与教育教学深度融合，促进优质教育资源应用与共享。

我校于2019年申报了《Web前端开发入门》在线开放课程，2020年正式立项。该课程是中等职业学校网站建设与管理专业的一门专业核心课，其功能是使学生掌握使用HTML5+CSS3进行网页制作的基本知识和基本技能，它是一门基础性、实用性都很强的专业课程。在互联网+、新兴技术不断发展的背景下，Web前端开发人才紧缺，从招聘网站需求量可以看出，市场供给严重失衡，2019年教育部等四部委启动了1+X证书的试点工作，工信部的Web前端开发职业技能等级证书成为首批试点培训评价组织及职业技能等级证书，1+X证书制度与 Web 前端开发技术课程的融合势在必行。

二、课程建设目标

重新梳理课程内容和任务要求，建立一套系统完整的课程标准，拓展整合优质课程资源，优化教学模式，完善评价机制，真正做到“课证融通”，全面推进Web前端开发课程的标准化教学。

三、课程建设所面临的问题

（一）教学内容滞后

Web前端开发技术迭代更新速度快，一线教师普遍缺乏企业实战经验，对当下行业内所采用的开发技术并不熟知，教学内容基本还是以教材为主，这就导致了学生所学与市场所需脱节，无法满足企业需求。

（二）教学模式守旧

在教学过程中教师还是习惯于讲授、演示的方式，学生处于被动的接受状态，对于新知往往只知其然不知其所以然，学习的主动性和积极性被抑制，教学效果欠佳。

（三）评价方式片面

过于关注学生对技能点和知识点掌握的結果导向评价，强调学习效果，弱化过程评价、态度评价、能力评价，不利于学生综合素养的塑造，也违背了学生全面发展的初衷。

（四）教学资源单一

教学资源主要还是以文档内容为主，对于知识技能点的讲解较为抽象，不够直观生动，不利于学生理解。

四、课程建设思路

本课程以 OBE 成果导向为指导思想，围绕“文化素质+职业技能”的培养方向，采用项目驱动，任务引领，讲、练、做一体化技能训练式教学。

（一）细化落实课程标准

以行业内相关岗位技能要求为基础，参照Web前端1+X初、中级的课程内容，结合行业专家和课程专家的意见建议，完成本门课程课程标准的开发。

（二）优化调整教学内容

将企业实战项目引入课堂，以典型的工作任务作为知识载体构建教学内容，使得学生的能力更符合岗位要求。

（三）改革创新教学模式

教师的角色由知识的灌输者、守护者转变为学生学习活动的组织者、参与者、共享者，在这个学习过程中，教师以学生为本，依学定教。

（四）丰富完善评价方式

依据课标细化评分标准，做到每课次涉及的知识技能点全覆盖，在此基础上增加职业素养的评价维度，同时注重过程性评价，引入多元评价主体，确保评价的科学、客观、公正，使评价能成为学生认识自我、发展自我、管理自我、激励自我的一种手段，促进学生全面可持续发展。

（五）整合开发优质资源

根据教学内容中的重点与难点、学生的认知规律和兴趣特点，将抽象的知识内容转化为形象演示，让知识易懂，吸引学生的学习兴趣。按照教学内容需要整理和补充微课、多媒体课件以及动画和视频等教学素材。以知识点为单位开发配套的测试练习题，为学生在课前、课中、课后学习测试和评价服务。

五、课程建设成果

（一）“岗课赛证”四位一体，重构教学内容

本课程以职业能力和岗位需求为核心，以Web前端开发世界技能大赛技术文档和1+X Web 前端开发证书职业标准为依据，重新制定了课程标准，优化了课程内容[1]，重构后的内容涵盖了网页内容的创建、网页的基本美化、网页的基础布局、CSS3变形和动画的应用，CSS3新增布局方式的应用和响应式页面的开发6大部分。

课程内容的组织颠覆了传统的以知识结构体系串联，而是以Web前端开发典型工作项目为主线，将知识点打散到每个任务中，让学生在完成工作任务的过程中逐渐加深对专业知识、技能的理解和应用，培养学生的综合职业能力，满足学生职业生涯发展的需要[2]。

本课程分为基础篇和进阶篇，通过基础篇项目——《英语培训网站开发》的学习，学生能达到1+X Web 前端开发证书初级HTML+CSS3部分的职业能力要求。

通过进阶篇项目——《Bootstrap开发工业设备企业首页》的学习，学生达到1+X Web前端开发证书中级使用Bootstrap前端框架开发响应式页面的要求。

（二）线上线下混合式教学，凸显学生主体地位，促进有效深度学习

利用在线平台的优势，教师课前将学习资料和配套测试题发布供学生预习。学生通过线上预习对新知有了基本的了解，也为线下的课堂学习做好了铺垫。同时，教师可根据平台统计的学生数据收集共性问题及时调整教学方案，使得课堂教学更有针对性。

在线下课堂教学中，教师针对学生预习环节出现的共性问题进行深入讲解，并以项目任务为载体，组织学生把在线所学到的基础知识进行巩固与灵活应用。在教学实施过程中，教师不再是课堂的主体，而是扮演着组织者、引导者的角色，通过创建情境，巧妙设疑，适当点拨，充分调动学生的主观能动性，鼓励学生利用课程资源包完成知识点的自主学习，通过小組讨论，同伴互助的形式尝试解决任务中的难点，通过展示交流点评取长补短，潜移默化中提升了学生的探究学习、团队协作、交流表达等能力。

课后学生根据教师发布的作业和拓展资料对知识进行进一步思考、巩固、拓展与提升。同时，学生可以线上分享学习体会和学习经验。此外，教师通过在线平台可对学生学习情况进行深度挖掘，掌握学生在线学习的访问内容及频率、学习路径、学习偏好等。结合分析结果，有针对性地进行学习引导和监管，对学习有困难的学生进行个别辅导。

通过线上线下，课前、课中、课后有效融合形成学习闭环，提升教学效果[3-4]。

（三）采用多维度、多元化的评价方式，实现以评促教，以评促学

1.细化评价标准

课程的课次任务评价参照了1+X  Web前端开发等级考证和世界技能大赛“网站设计与开发”项目的评价标准，根据课次任务所涉及的知识技能点，设置相应的评分项目，做到全覆盖不遗漏。明确、细化的评价标准使教师对每一位学生的评价都能有理有据，标准一致，学生也能根据评价表清晰地了解自己对本课次学习内容的掌握情况，便于他们更有针对性地查缺补漏。

课次评价方案中除了对学生知识技能进行评价之外，还引入了职业素养的评分项目。考查学生代码命名是否规范，结构是否清晰，能否添加合适的注释，代码是否符合W3C标准，使学生从一开始就养成代码编写规范的习惯，从而推动他们全面可持续的发展。

2.评价主体多元化

课程贯彻以教师为主导、学生为主体的教学理念。除了将教师作为权威评价主体之外，充分发挥学生的主观能动性，鼓励他们积极参与到自我评价和同伴评价过程中，引导他们反思、总结学习过程中的不足，明确努力的方向，提升学习效率。

3.引入信息化手段助推过程性评价

借助在线开放课程平台的技术优势，使评价贯穿于教学活动课前、课中、课后的各环节。课前记录学生视频观看的时间和预习测试的分数，课中统计学生的考勤和课堂互动的情况，课后统计学生的作业提交和扩展资源查看情况。通过后台生成的精准数据可以第一时间掌握学生的学习情况，使得过程性评价有据可依[5]。

（四）教学资源整合联动

课程教学资源丰富，内含一整套标准化的顶层课程文件（课程标准，授课计划，评价方案，教学流程），18个课次文件，10个教学视频，7个教辅材料，411个媒体资源，161道题库，7套考核测试。

六、课程实施成效

（一）以课程建设为切入点构建“三教”改革生态

在课程建设中，以“双向双融通”为主要途径，校企双方师资互兼互聘，提升了教师能力，形成了结构化的教师团队。课程内容设计对接行业标准、1+X证书标准，技能大赛标准，校企共建“学校课程+企业课程”的数字化资源包;课程实施泛在PBL、翻转课堂和线上线下混合教学模式，构建以能力为中心的“动态、多元”课程评价体系，推进了“行动导向教学法”改革[6]。

（二）课程资源促进学生“碎片化”学习

2020学年第二学期网站建设与管理专业的18名学生进行了在线开放课程的学习，相较于传统的学习方式，在线平台打破了时空的限制，学生可随时随地通过在线平台获取丰富的课程资源从而进行“碎片化”学习，并根据个人情况，对于重点、难点进行巩固强化，学生学习的积极性得到了提升。

（三）在线平台加强了师生沟通，实现了精准教学

通过在线测试、网上辅导、互动讨论、网上作业提交和批改、网上社区讨论等，促进了师生之间、学生之间进行资源共享、问题交流和协作。

平台全程跟踪和记录学生的学习过程、学习内容、学习效果、学习反馈，掌握每个学生的学习行为，运用大数据分析诊断生成的图形化和可视化的分析结果，教师能清晰地了解学生的薄弱环节，从而对症下药，达到教学效率最大化。

（四）增加单元考核，融入1+X考核标准，推进“1”和“X”的有机衔接

除了传统的期中、期末考核外，课程还增加了阶段性的单元考核作为学生过程性评价的重要组成部分，单元考核的内容、形式、评分标准参照了1+X Web等级证书的要求，从而推进了“1”和“X”的有机衔接，提升了学生的职业能力。

七、建设反思

（一）建立激励机制，加强引导管理

在《Web 前端开发入门》课程的教学过程中，项目驱动、任务载体的教学模式将知识融入项目，改变了过去学科式的知识传授模式，对学生的主观能动性提出了更高的要求，中职学生的自主学习兴趣、能力存在差异，在开发课程资源的同时，应考虑建立激励机制，加强引导管理提升学生的积极性还需要更多的尝试、努力和实践。

（二）紧跟行业动态，及时更新课程内容

Web 前端开发技术迭代更新速度快，几乎每6个月就会有一次变革，这就要求教师紧跟行业动态，不断学习新技术，并根据岗位要求及时优化调整课程内容，使学生能在课堂上学习到前沿和实用的知识技能，为今后就业打下扎实的基础。

（三）进一步优化丰富课程资源

虽然课程资源建设已初见成效，但题库、试卷库、媒体库的资源还需进一步的优化和丰富，加大微课和动画资源的比重，以增加趣味性，降低知识理解难度。

参考文献：

[1]张莉.1+X证书制度与Web前端课程教学融合创新探索[J].电脑知识与技术，2021（17）：90-92.

[2]张春玉，孙百虎，梁英武，耿敏，李国庆.精品在线开放课程建设的探索与实践——以吉林省生物化学精品在线开放课程为例[N].石家庄职业技术学院学报，2021（33）：17-21.

[3]李珍琦，王召阳.线上线下相融合的混合式教学模式探究——基于“智慧学伴”平台的课堂教学结构变革[J].中国教育信息化，2021（13）：82-87.

[4]赵彦，吴莉，周玉珍，杜娟，陆蔚，邓小龙，许若波.国家精品在线开放课程程序设计基础混合式教学改革[J].计算机教育，2022（1）：111-114

[5]周红芳.高职在线开放课程建设及应用探究——以“仓储与配送管理实务”课程为例[N].湖北广播电视大学学报，2021（41）：33-38.

[6]李玉清.对国家精品在线开放课程《网络营销》的建设、应用与申报[J].办公自动化杂志，2022（2）：6-8.

作者简介：

何烨（1984年7月-），女，汉族，浙江萧山人，本科学历，讲师，研究方向：Web前端开发。