高职“Web前端开发基础”精品在线课程建设探索与实践

韦波

（广西机电职业技术学院，广西 南宁 530007）

0 引言

教育部等九部门印发的《职业教育提质培优行动计划（2020—2023年）》明确指出：要鼓励职业学校利用现代信息技术推动人才培养模式改革，满足学生的多样化学习需求，大力推进“互联网+”“智能+”教育新形态，推动教育教学变革创新；面向公共基础课和量大面广的专业（技能）课，分级遴选5000门左右职业教育在线精品课程；提升学生利用网络信息技术和优质在线资源进行自主学习的能力。

在当今的互联网时代，信息技术已经融入社会生活的方方面面，加快信息化时代的教育变革已是大势所趋。精品在线课程的建设，就是利用信息技术构建以学生为中心的网络学习空间，满足学生规模化和多样化的学习需求。Web前端开发能力是软件技术等计算机类专业的核心职业能力，在教育部颁布的计算机类专业教学标准中，软件技术、移动应用开发、软件与信息服务和电子商务技术等专业，均把Web前端开发有关的课程列为专业核心课程。“Web前端开发基础”作为学生掌握Web前端开发技能的入门课程，面向的专业广，在各高职院校的学生受众较多。在分析Web前端开发精品在线课程建设现状的基础上，提出Web前端开发基础精品在线课程的建设路径，为提升计算机类专业在线课程建设质量提供借鉴。

1 Web前端开发精品在线课程的建设现状

1.1 教学内容陈旧，与行业技术发展脱节

随着近几年Web前端技术的发展，IT行业对Web前端开发工程师的能力要求已经有了很大改变，大部分企业在招聘Web前端开发工程师时，都要求应聘者具备HTML5、CSS3、移动端页面设计、前端框架等技术。纵观当前的Web前端开发在线课程，大部分的课程内容都比较陈旧，教授的技术和方法还停留在传统的前端技术阶段，很少涉及当前主流的响应式布局、移动端页面布局、弹性布局、响应式框架等技术，也很少引入真实的Web项目案例。少数课程虽然加入了部分HTML5和CSS3新技术，但是都局限在代码原理的讲解，很少能将新技术融入到完整的项目案例中。

1.2 课程内容结构不合理，没有形成项目化课程

现阶段，大部分Web前端开发在线课程的内容体系仍然没有完全脱离教材知识体系，讲授方式也是传统的知识点讲授，与企业Web前端开发岗位能力需求差距较大。在教学内容设计上，大部分课程仍然采用传统的按照知识点类型划分章节的模式，没有形成项目化的教学内容。在教学视频中，多采用知识点的讲解方式，理论性强，没有对接Web前端开发岗位能力，对学生的编码能力和项目实施能力培养效果欠佳。学生学完课程后，最多只能了解各类技术的原理和简单应用，对于如何从头到尾完成一个Web项目的前端开发过程、如何在真实项目中运用不同HTML+CSS技术，依然知之甚少。

1.3 课程面向专业单一，无法实现不同专业的共享

在教育部颁布的高职专业教学标准中，软件技术、移动应用开发、软件与信息服务和电子商务技术等专业，均把Web前端开发有关的课程列为专业核心课程。但是现阶段的Web前端开发在线课程，普遍是面向某一个专业对课程内容进行设计。由于这些专业面向的职业岗位和人才培养目标存在差异，在Web前端课程的设置与内容选取方面，也需要进行针对性的设计。当前，已经完成建设的Web前端开发在线课程，通常只能满足一个专业学生的需求。很多课程在设计阶段，没有实现合理的模块化建设，无法实现在相近专业的共享。

1.4 课程配套资源不完善，助学功能不强

现阶段，大部分Web前端开发精品在线课程的核心内容还是局限在教学视频和在线题库上，在技术文档、动画、案例视频、虚拟仿真平台等信息技术的建设比较匮乏。在教学视频的呈现上，也普遍采用PPT讲解为主，理论性较强，对学生的吸引力不够，也无法辅助学生进行完整项目的实践训练，教学效果不甚理想。

1.5 课程考核机制不完善，无法保证学习效果

精品在线课程的建设初衷是实现优质教育资源的开放共享，拓展学生自主学习的时间空间，以此促进职业院校的教学模式改革，提升人才培养质量。然而，当前很多Web前端开发精品在线课程往往存在“重视频轻资源”“重建设轻应用”“重开放轻实施”“重展示轻评价”等问题，导致很多教师只能把精品在线课程的应用作为课堂教学的小小补充，无法发挥在线课程应用的作用，投入产出比较低。由于缺乏有效的过程性评价和深入的师生、生生互动，很多学生也把在线课程的学习当做任务去应付，通过“挂机”刷课、找人代测试等方式去获取课程积分，没有真正利用在线课程平台进行认真有效的学习。

2 “Web前端开发基础”课程的建设途径

2.1 融通岗课赛证重构课程

“Web前端开发基础”课程的教学目标是帮助学生构建Web前端开发基础知识体系，培养学生静态网页编码能力，同时培养学生科学规划、严谨规范、精益求精的职业素养。在课程开发的前期，课程团队决定按照“做中学、做中教”、理实一体化、线上线下相混合的教学理念开展课程重构，强调教学内容的实用性、前沿性。根据“岗课赛证”融通的要求，课程团队认真分析教育部“1+X”证书制度试点的“Web前端开发”职业技能等级标准，依据软件技术等国家专业教学标准、各专业人才培养方案，对接Web前端开发工程师岗位职责，融入“Web应用软件开发”技能大赛标准，重构课程内容体系。依照前端工作流程、遵循技术进阶和职业发展规律，以及从单一到整体、从简单到复杂、从固定到灵活等逻辑安排教学内容（图1）。

图1 课程重构逻辑

2.2 模块化设计满足不同专业需求

课程团队结合软件技术等6个专业人才培养需求与课程标准，对各专业开设的“网页布局”“网页设计与布局”课程内容进行重构，形成包括4大模块、9个项目共41个任务的“Web前端开发基础”课程。课程覆盖了“Web前端开发（初级）”职业技能等级标准中HTML、CSS相关的所有内容。另外，还针对“Web前端开发（中级）”中的Bootstrap前端框架开发等内容，加入了课程拓展内容，满足部分有能力参加Web前端开发（中级）认证的个性化需求（图2）。

图2 课程模块与专业对接关系

2.3 依托真实项目开展项目化教学

在课程设计阶段，课程团队以真实项目“桂云商城”网站为任务主线，体现Web前端开发工作的核心基础技能与职业素质培养，基于任务驱动教学法，将教学内容合理安排到若干个与Web前端开发岗位工作流程对接的教学环节中，环节间逻辑关系清楚，各环节的目标明确、任务具体（图3）。为打破传统Web前端开发在线课程以知识讲解为主的教学模式，课程团队邀请企业骨干Web前端开发工程师共同设计教学内容，以典型的商业网站项目的前端开发任务为载体，将“1+X”证书标准融入项目案例，以“做中教”的模式开展教学，核心教学视频累计时长达到599 min，保证学生既形成必备的Web前端开发基础知识体系，又能够通过项目实战掌握岗位基础核心技能。除此以外，针对学生自主完成实践性任务比较困难和编码出错较多的问题，课程团队还制作了21个实践教学微课视频和6个代码纠错微课视频，进一步支撑实践教学环节。

图3 基于任务驱动教学法的教学活动设计思路

2.4 思政元素与教学内容深度融合

要保证专业知识与思政元素的有机融合，一定不能先完成专业知识与技能的教学内容设计后植入思政元素。要实现思政元素润物无声的教学效果，必须坚持专业知识与思政元素的同步教学设计。因此，课程专业教师与思政教师组建了课程“二次开发”的结构化团队，协作完成“Web前端开发基础”课程的内容重构。在每一个教学项目的设计过程中，从教学目标确定，到教学内容选择、教学案例设计、教学资源制作、评价考核设计、教学过程安排等，均由专业教师和思政教师共同完成。整个过程就像织布一样，专业知识为经、思政元素为纬，通过两类教师的细织密纺，让专业知识与思政元素形成水乳交融、无法分隔的效果，杜绝“大而空”的口号，促进思政元素入脑、入心、入情，通过隐性教育提升学生的显性情怀。课程部分思政教学目标的融入方式与教学设计思路见表1。

表1 课程思政设计概要

2.5 虚拟仿真学习平台提升教学效率

针对课程中的教学重难点，课程团队自主开发虚拟仿真学习平台“弹性布局实验场”，学生可以进行弹性布局自主练习、布局模拟测试、CSS编码优化模拟、作业上传与扫码浏览、作业点赞评价等自主学习活动，有效解决了弹性布局属性多、易混淆、难记忆的问题，有效提升了教学效率。平台还具备实时评价功能，根据每个学生的模拟练习给出个性化的反馈指导。教师通过平台可以实时掌握全班学生的测试情况，并据此及时调整教学策略。

2.6 注重IT工匠职业素养的提升

依托二级学院与企业共建的人工智能产业学院平台，校企合作开展课程重构。引入企业典型项目并根据教学实际优化形成主要教学内容载体。结合IT行业技术标准与项目开发规范对教学内容进行标准化、规范化处理，使教学内容更突显对学生IT职业素养的培养。企业工程师积极参与教学评价与实践性教学活动，以评促学，确保教学活动紧扣企业需求。以“响应式布局”项目为例，安排学生课前自学媒体查询语句语法，引导学生利用在线课程配套资源和互联网资源开展自主学习，课堂上教师分享全国最美公务员、“健康码”幕后英雄、科技警察钟毅的事迹，激励学生养成吃苦耐劳的工作作风，努力提升技能回报社会、服务群众。在学习“移动优先策略”时，安排学生在仿真学习平台中实验对比两种布局策略，并对比两种编码策略的代码量的明显差异，教师引导学生在编码过程中注意提升效率、完善用户体验，强调IT从业者必须注重用户体验、提升编码效率的要求。

2.7 健全综合评价体系

为了使在线课程的教学评价更加科学合理，实现“以评促学”，课程团队采用过程性评价与结果性评价结合、理论知识评价与实践性作品评价结合的方式，利用课程平台对学生的过程性学习数据进行采集，分析学生的学习规律与习惯，利用课程平台和虚拟仿真学习平台进行理论知识评价，通过学习过程的任务作品与期末实践性考核对学生进行技能评价。

首先，在理论测试方面，学生的成绩由平时成绩、项目测试成绩、期末考试成绩三部分构成：（1）平时成绩占比50%：平时成绩=学习进度分（15.0分）+学习行为分（35.0分）。学习进度分是指学生观看视频的时长，累计观看时长达到85%以上，才具备参加期末考试资格。学习行为是规律的学习天数及无灌水或者违规操作等行为，规律学习天数越多，分数越高。除此以外，为了防止学生“挂机”刷视频，在每段视频中均嵌入了测试题，评价5分钟弹出一道题，学生必须答题正确，视频才能继续播放。（2）项目测试成绩占比10%：本课程在每章（项目）结束后安排5-10题的测试，完成测试后才能参加期末考试。（3）期末考试成绩占比40%：从题库的256道题中，按题目所属章节、题目类型、难易度等规则，抽取65道题组成一张试卷，其中：单选题30分（30道题）、多选题40分（20道题）、判断题30分（15道题）。

其次，为了更好地提升学生的编码技能，课程团队在利用课程平台完成对学生的理论知识考核以外，还增加了实践性作品评价的环节。在课程的41个学习任务中，有12个任务安排了课后实践性作业，要求学生完成相应网页的编码，教师对学生的网页作品效果与编码质量进行评价。

最后，在期末还通过机试的方式对学生的实践能力进行考核，要求学生在2个小时内完成一个完整页面的HTML、CSS编码，形成终结性实践考核成绩。

3 结语

“Web前端开发基础”精品在线课程的建设与实践为软件技术等专业学生的在线自主学习提供了有效的支撑，对接Web前端开发工程师岗位能力要求和“1+X”证书标准，融入“Web应用软件开发”技能大赛标准，重构了教学内容，形成了从单一到整体、从简单到复杂、从固定到灵活的教学内容体系。通过模块化课程结构和充实丰富的教学内容，满足了多个相近专业的选课需求。依托真实项目开展项目化教学，通过项目实战使学生快速掌握岗位核心技能。针对课程教学重难点，开发了虚拟仿真学习平台，实现了学生的自主训练、智能指导和交互式模拟。建立健全了综合评价体系，既通过过程性评价有效控制学生的学习深度，又通过实践性评价促进学生职业技能的熟练。课程自2019年上线运行以来，已经运行了5个学期。经过近几年的实践表明，该在线课程有效提升了学生参与式学习的深度和差异化学习的自由度，学习效率显著提高，学生对Web项目的前端开发体验明显增强，编码能力与职业素养有效提升。