基于OBE教育理念的“Web前端开发”课程项目贯穿式教学设计

钱欣丽 王瑜琳 宋涛 刘学虎 徐晓灵

摘 要：针对当下Web前端开发课程教学滞后于行业发展的问题，提出了基于OBE教育理念指导，以职业活动为导向重构教学内容，以“逆向设计、正向实施”推进教学改革，以“学生中心，任务驱动”组织教学实施，以达到“专业对接职业岗位、课程内容与对接职业标准”的目的。

关键词：Web前端开发；OBE教育理念；教学设计

Abstract：Aiming at the problem that the teaching of Web frontend development courses lags behind the development of the industry，this paper proposes to reconstruct the teaching content based on the OBE education philosophy guidance，reconstruct the teaching content guided by vocational activities，promote the teaching reform with "reverse design and positive implementation"，and organize the teaching implementation with "studentcentered，taskdriven" to achieve the purpose of "professional docking of professional positions，course content and docking professional standards".

Keywords：Web frontend development；OBE education philosophy；Instructional design

一、概述

随着互联互通的快速发展，Web应用不断推陈出新，Web前端技术发挥着举足轻重的作用。Web前端技术成为计算机、人工智能专业学生走上社会、专业对口就业不可或缺的一门知识和技术。目前，国内许多高职院校将Web前端技术等相关课程作为计算机、人工智能专业学生的专业必修课。

如今，智能化设备全面普及使Web前端页面越来越复杂，从视觉体验到对用户的友好交互、技术特效等的要求越来越高，系统的维护要求不断提升。一方面，前端技术的不断演进带来了前端开发模式的不断改进，在基于前端开发逐渐趋于复杂性的背景下，如何对Web前端开发课程进行内部的教学改革探索使其适应企业的外部需求也成了我们关注的焦点。另一方面，高职教育作为该类人才培养的重要基地，现阶段其毕业生在市场上较难找到满意的专业对口工作，出现学校人才供给滞后于企业需求的现状。究其原因，高职学生在校期间学习的内容与市场存在脱节，学生“学非所用”较为普遍，因此导致高职毕业生在企业招聘中无法体现自身应有优势。唯有改良高职学校课程内容设置，促进其与企业职业标准、生产过程对接，达到与时俱进的效果，才能有效解决新一代信息技术领域的人力资源市场中技术技能型人才急缺的现状。

传统教育教学中，该课程通常采取教学设计为课程导向的正向设计，即学生学完本课程后，被动地适应社会及企业等的外部需求，无法实现职业岗位零距离对接。现流行于高等工程教育的OBE教育理念，因其聚焦学生通过学习最终可以达到的学习成果，并据此对教学进行反向设计，对于只注重“教育投入”而不注重“教育产出”的传统教学而言，是一种教学的根本性变革，为高职课程教学改革带来了灵感与启发。

介于此，本课题试将OBE教育理念应用于Web前端开发课程教学中，结合社会市场职业需求，将职业能力要求融入课程体系中，培养适合当下行业发展的技术技能人才。

二、教学现状分析

目前，许多院校设置的Web开发相关课程，教学过程中教师大部分的教学重点放在前端开发技术（html、Css、JavaScript）的教学，忽略了对于前端技术的框架应用，学生虽然能实现一定的功能，但大部分課程体系与教学资源都比较陈旧，没有跟上前端技术发展与企业用人需求的变化。Web前端开发已经作为一门独立的课程，从成果导向教育角度来看，该课程目前存在以下的问题。

（一）教学理念

当下该课程对成果导向教育的教学理念应用缺乏，制约其学生观、教师观、课程观、课堂观的发展；教学模式缺乏创新，教学内容更新不及时；学生创新与时间能力及分析、解决问题能力无法满足现代企业对人才的需求。

（二）教学内容

课程内容上，主要还是传统的html、css和JavaScript技术，缺乏对新功能、新版本以及目前主流框架、工具的引入。讲授课程内容陈旧老化，不能及时适应社会需求的变化。

（三）教学模式

课程往往采用传统的以教师为中心、书本为中心、课堂为中心的教学模式，授课方式以平铺直叙式、集中注入式为主，形成了教师单向灌输、学生被动接受的局面，教师忽视学生学习成果。

（四）考核机制

在考核评价方面，仍然采用“课堂授课—考前复习—试卷笔试”为主的自上而下的对学生“定性”评价的传统考核模式，评价内容统一，评价标准统一，只注重学生最终对知识的掌握程度，缺乏了对学生的多元、动态评价，往往忽视了对学生各方面能力的培养，导致学生高分低能，未能适应企业职业需要。

三、解决思路和方法

在OBE教育理念的指导下，对高职Web前端开发教学进行改革与实践。研究的具体思路如下：

（1）针对课程教学存在的问题，根据前期调研的结果，以OBE教育理念为指导，遵循其四个基本实施原则，围绕预期学习成果对Web前端开发课程教学进行设计。该设计具体过程为：①从知识、能力、素质三方面入手，确定Web前端开发课程的教学目标。②以知识点相互衔接且具有实际功能意义为宗旨，构建与教学目标相匹配的教学内容。③为实现学生个性化学习，充分锻炼学生实践动手能力，选择有利于教学目标实现的任务驱动式教学模式。④从关注学生的学习成长、尊重学生的学情差异、注重多方参与出发，开展过程性与终结性相结合的多元教学评价，对教学的达成度进行监测与评估。

（2）选取开设该门课程的两个平行班级，任选其中一个班作為实验班，将基于OBE教育理念设计的教学新模式应用于该班。另一个班作为对照班，仍沿用现行传统模式进行教学。经过一段时间的教育实践，从两个班的教学效果对比，实验班学生就教学方法、教学过程、学习效果、课堂氛围设计问卷调查四个指标来探究基于OBE教育理念设计的教学新模式的教学效果。

四、教学实施过程

（一）教学过程对接岗位流程

依据人培规格达成要求、完善后的课程标准、学生学情和岗位能力要求，确定三维教学目标。依据企业Web前端开发工作流程组织教学，在教学上采用具体的、真实的企业项目，任务要求和项目工作过程紧密联系实际。

（二）课程内容与对接职业标准

课程内容对接Web前端开发职业技能等级标准，将职业技能等级证书中与课程内容相关的考核内容纳入课程教学内容中，按照具体的职业标准来进行课程的教学设计，优化课程教学内容。

围绕“内化于心，外化于行”进行思政教学设计，将思政元素浸润四个教学任务的教学过程，创建情感共鸣和价值融通，潜移默化中帮助学生培养职业能力。

（三）教学模式采用任务驱动式

任务驱动式教学本质上就是完成任务的过程，在认识、分析、解决问题过程中使学生实现探究式、体验式学习，学生学习由接受式向自主建构转变，教师教学由灌输式向引导转变。因此，采用任务驱动式教学模式贯穿课前、课中、课后教学，其基本流程为如下图。

教学流程图

课前教师发布该节课教学内容，学生自主学习。课中教师发布任务案例，对任务进行分解分析，学生依据课前预习内容执行相应任务，采用师生互评、生生互评方式检验任务。课后学生根据教师要求进行教学内容规律总结并反馈。

（四）教学评价实施多维评价

Web前端开发是一门实践性较强的课程，单纯的闭卷考试方式不能客观地评价学生的知识掌握情况及学生的知识运用能力。引入职业鉴定，根据相关概念和实施要点，采用形成性评价模式和持续改进模式，创建多元评价。通过诊断和评估检查学生的先验知识，分析学情；采用过程化阶段性考核方式，从考核学生对知识的记忆转为考核学生的应用能力，着重考查学生的表达设计能力；通过总结性评价，确认每个学生已获得的内容掌握程度。评价活动贯穿课前、课中、课后三个阶段，将评价重点放在学生的能力指标上，通过多方面评价确保学生达成预期学习目标。

五、教学效果

采用教育对照实验的方式，选取开设该门课程的两个平行班级，各班抽取24名专业能力、学习能力相当的学生，随机将其中一个班级设置为实验班，另一个班级设置为对照班。实验班采用OBE教育理念设计的教学模式进行教学，对照班仍采用现行的教学传统模式，但两个班教学内容所含的知识点一致。经过一段时间的教育实践，对比两个班学生的学习成果，实验班的学生对本课程的对知识构建能力及掌握程度均高于对照班。对教学方法、教学过程、学习效果、课堂氛围四个指标制定相应的问卷内容，使用SPSS2.0对数据进行差异性分析如表3。

表3数据显示，实验班与对照班教学效果评价数据存在较为明显的差异，从四个指标差异性结果显示，P值均小于0.05，表明基于OBE教育理念的教学设计教学效果更好。

结语

针对当前高职Web前端开发教学中存在的问题，根据调研所得的企业、师生等教育利益相关者的实际需求，基于OBE教育理念，根据其反向设计、正向实施原则，在教学组织、教学内容、教学模式、教学评价方面设计了Web前端开发课程的教学改革方案，构建一种有着持续改进功能的教学反思闭环系统，进而改变该课程教学的现状并提升教学的质量。后续将推进建设线上课程资源，构建出与时俱进的优质教学资源。

参考文献：

［1］罗剑，邢翠，聂鑫.混合式教学模式下Web前端技术教学资源建设研究［J］.软件导刊，2021，20（07）：198201.

［2］任倩，姚光顺，胡晓静，等.基于OBE理念的“Web前端开发”课程教学改革与实践［J］.滁州学院学报，2021，23（05）：126130.

［3］刘鑫，杜宇恒，李曰阳.基于OBE理念的“机器人操作与编程”课程项目贯穿式教学设计［J］.南方农机，2023，54（08）：183185+198.

［4］黄院芳，宁善平，龙庆文，等.基于OBE理念的专业教育和思政教育协同育人实施路径研究［J］.广东交通职业技术学院学报，2023，22（01）：7276.

［5］严筱永，孙涵，胡夏芸，等.OBE理念下任务驱动式网站原理与设计课程教学研究［J］.软件导刊，2023，22（04）：198202.

项目基金：重庆公共运输职业学院科研项目，基于OBE理念的Web前端开发课程教学探索与实践（YSKY202212）；重庆市教育科学规划课题：基于“1+X”证书制度的高职交通智能化专业群课证融通课程体系研究（K22YG 331369）；重庆公共运输职业学院教育教学改革研究项目：“1+X证书”制度下人工智能技术服务专业课证融通课程体系研究（YSJG202101）

作者简介：钱欣丽（1996— ），女，汉族，云南曲靖人，本科，助教，研究方向：交通数据、图像处理。