OBE 与项目驱动在Web 前端课程改革中的应用

朱红斌 丽水学院

1 引言

自2006 年，全面工程教育理念提出后，各个高校已逐渐在相当多专业中引入，培养实用技能型人才也逐渐写入各专业的培养方案中，成为大家的共识。具备相当职业技能的毕业生普遍在用人单位受到好评。在高校专业教育中引入项目驱动式教学方法，符合工程教育理念，将恰当的实用项目贯穿于整个教学过程之中，培养学生解决问题的能力及团队合作精神，符合用人单位的需求。

Web 前端课程作为Web 应用开发学科群的基础及先修课程，在计算机专业及数字媒体专业的课程教育中，具有非常重要的作用，是后续相关课程的理论及技能基础。

2 课程现状分析

Web 前端课程在目前的“大前端”背景下，所涵盖的课程内容是非常丰富的，现有的传统教学方法、教学内容及成绩评定方式等方面都存在着较大的弊端。

(1) 传统教学方法安装授课教师选定的教材，按部就班，以讲授课本的章节知识点为主，碎片化，填鸭式教学。学生学习的主观能动性较差，学习效果欠佳；

(2) 缺乏系统项目训练，就算学生学完了课程，也完成了实验，貌似掌握了相关的前端技能，但是终归是纸上谈兵，缺少足够系统的项目训练，不能融会贯通，很少能解决实际问题。

(3) 前端课程知识体系更新很快，基本上没有一本能完全满足前端教学需求的好的教材，部分授课教师自身也存在知识更新滞后问题，教给学生“过期”的知识，实际应用开发上也捉襟见肘。

(4) 成绩评定方法单一。现有的学生课程成绩的给出，无外乎“平时+作业+实验+期末”，参照一定的百分比，打出最后的总成绩。这一成绩评定方式缺乏激励作用，学生得过且过，也无法对学生技能的掌握程度进行测定。

3 项目驱动式教学

项目驱动式教学法是在教学过程中以一个个项目作为主体，把相关的知识点融入到项目的各个环节中去的一种高效教学方法，它以项目为主线、实践为导向、任务为载体，把开发技术的原理、方法和技能内化在整个项目开发过程中，通过团队协作的方式来解决实际问题，从而培养学生处理复杂项目问题的能力。在教学设计上，以实际项目的开发作为学习载体，将知识的拓展于项目研究开发过程的迭代相结合，用项目研发的渐进思想，与知识构建的思路相对应地组织课程的教学内容。

4 OBE 理念

基于学习产出的教育模式（Outcomes-based Education，OBE），美国学者斯派帝把OBE 定义为“清晰地聚焦和组织教育系统，使之围绕确保学生获得在未来生活中获得实质性成功的经验。在OBE 教育模式中，学生学到了什么和是否成功远比怎样学习和什么时候学习重要。在OBE 教育系统中，教育者必须对学生毕业时应达到的能力及其水平有清楚的构想，然后寻求设计适宜的教育结构来保证学生达到这些预期目标。

所以基于项目驱动式教学方法我们对Web 前端的课程内容进行了重塑，基于OBE 理念，我们对成绩评定的方法进行了重塑。

5 具体改革措施

5.1 Web 前端课程内容的重塑

原有的Web 前端课程内容基本上由HTML+CSS+JavaScript等几个方面构成，然后课程的实验或者实训项目内容基本上以完成一个简单网站的页面为主，再加上一些简单的js 脚本完成交互。这样的内容安排，已经远远满足不了现在的前端开发要求。

我们与企业对接，深挖企业需求，并对接后续课程安排，以课内48 学时和课外64 学时的方式，其中课外学时部分，由授课教师完成视频录制后上传教学平台，由学生自学完成，将Web 前端课程内容重塑如下：

(1) HTML+CSS，因为学生前期已经开了网页制作基础课程，所以对于HTML4+CSS3 这一部分内容我们列入课外学时，主要是针对这一部分内容的回顾和增强，计16 个学时。

(2) javaScript 部分，主要讲述js 的相关基础语法，DOM 操作，BOM 操作，以及引入最新的ES6 规范。其中ES6 部分作为课外学时，计16 学时，其他部分为课内学时，计16 学时。

(3) jQuery 部分，在js 内容之后引入jQuery，引导学生对于前端框架的学习兴趣，为课内学时，计16 学时。

(4) HTML5 部分，主要讲述HTML5 的新特性，因HTML5 的内容较多，我们将多媒体、表单新元素、画布、地理定位、本地存储等内容作为课内学时，计16 学时，其他诸如地理定位等内容作为课外学时，计16 学时。

(5) 移动端开发，主要涉及到弹性布局和微信小程序，全部为课外学时，计16 学时。

(6) 在各个阶段，我们引入了相适应的具体实用案例，加强学生技能训练。在HTML+CSS 部分我们引入了慕课手机页面和京东首页，javaScript 部分我们引入了2048 网页版游戏，jQuery+HTML5部分我们引入了TodoList 代办事项列表，移动端开发部分我们引入了仿携程旅游App 项目。其他的串并知识点的小的案例项目就更多了。通过项目的引入加深了学生对前端知识的理解，锻炼的团队合作精神，提高了学生的实际开发技能。

5.2 Web 前端成绩评定的重塑

引入OBE 理念后，我们对于学生成绩的评定不在完全基于原有的作业、实验等方面，我们将项目实训过程中学生表现出的理论知识掌握程度、分析问题能力、团队合作精神、开发技能掌握程度，项目管理及完成度进行了0-100 的评分，划分不同的目标等级，设立了成绩与能力评价对照表，综合学生在项目中的表现进行综合评分。

这一评分方式大大激活了学生的学习主动性，激发了学生在项目开发中的创新及协作精神，实行以来，效果良好。

6 结束语

我们在Web 前端课程中引入项目驱动式教学，对接企业，参照目前的主流前端技术对课程内容进行了重塑，并引入了众多的适宜项目，大大丰富了教学和实训内容，增加了学生的理论深度及技能水平。在成绩评定中引入OBE 理念，重塑了成绩评价体系，激发了学生的学习热情。自课程改革以来，学生在Web 前端相关技能竞赛中取得了良好的成绩，学生在企业实习，反馈良好。