工程教育认证下Web前端开发技术课程教学改革的探索

工程教育认证下Web前端开发技术课程教学改革的探索

文琦，翁佩纯，朱秋云，梁宝兰

电子科技大学中山学院，中山，528402

摘要：Web前端开发技术是前端开发工程师必备的核心技能。本文探讨了将成果导向教育理念引入到Web前端开发技术课程，对课程的教学模式、教学方法及手段进行了一系列改革，以激发学生的学习兴趣，提高学生的专业素养及职业技能。

关键字：Web前端开发技术；教学改革；成果导向

Exploration of Teaching Reform of Web Front-End Development Technology Course under Accreditation Standards of Engineering Education

Wen Qi，Weng Pei-chun，Zhu Qiu-yun，Liang Bao-lan

（University Of Electronic Science And Technology Of China，Zhongshan Institute，Zhongshan 528402）

Abstract：Web front-end development technology is a necessary core skill for front-end development engineers. This paper discusses how to introduce the concept of Outcomes-Based Education into the course of Web front-end development technology, a series of reform have been carried out in the teaching mode, teaching methods and means of the course, to stimulate students' interest in learning and improve students' professional quality and vocational skills.

Keywords：Web Front-End Development Technology；Teaching Reform；Outcomes-Based Education

0引言

随着互联网技术不断发展，Web编程在不同行业的渗透，使得它在软件产业中的比重越来越大。“前端工程师”主要职责是利用HTML/CSS/JavaScript等各种技术开发产品界面，增加交互功能，同时结合后台开发技术进行各种Web应用开发。软件产业对Web前端开发人员的需求迅猛上升，使得专业课程《Web前端开发技术》课程日益重要。

1教学现状

我校开设的《Web前端开发技术》课程包括32学时的理论授课和32学时的上机实验。由于课程的实践性较强，为了提高教学效果，所有的课时全部安排在机房完成，在一定程度上加强了学生学习的主动性。

在教学内容方面，现有的《Web前端开发技术》课程教材大多只介绍HTML、CSS、JavaScript等前端开发所需要的基础知识，教学案例涉及的知识点较单一、分散、简单。不少学生在实际Web前端页面开发时无法将知识点进行有效整合，阻碍了知识向能力的转化。

在教学模式方面，由于前端技术内容丰富，有限的课时难以支撑教师将知识“灌输”给学生，传统的教学模式不能适应行业需求。

2教学改革依据

工程教育认证是目前国际通行的工程教育质量评估手段，其中基于成果导向的教育理念（OBE)[1]更关注于学生受教育后获得什么能力和能做什么，越来越多的高校将OBE理念融入到教学改革中，不断探索如何提高课程质量和教学效果。

《Web前端开发技术》课程的教学内容不应拘泥于教材固有的内容进行教学，应围绕学生的“成果”来组织和开展教学，设计教学过程，最终促成学习成果的达成。

将传统教学模式中以“教师”为主体转换成以“学生”为主体，利用线上教学平台将有限的学时充分扩大，即能保证教师完成教学目标，也能让学生根据自己的不同情况和能力期望来选择扩展的教学内容，开拓学生的视野，为后续能力发展奠定基础[2]。

3教学设计方案

利用混合式教学模式开展《Web前端开发技术》课程的教学改革，实现学生从课外获取零碎知识点，到课堂整合知识点，最后得到学生的学习产出。

1. 课外设计——完成预习及复习

本校主要借助两大平台完成课外教学内容设计，实现线上的课前预习和线上的课后复习。超星学习通发布教学辅助资源，如教学课件、教学视频等学习资源，安排学生完成相应的课前预习。EduCoder侧重开展实验等实践教学活动，教师根据课程内容发布相关实验任务，学生既可以课前检验预习效果，也可以课后有针对性地进行知识点复习与整理。EduCoder平台能自动编译、执行和评测代码，并立即反馈评测结果，学生可根据错误信息提示修改代码并继续测试，有效地解决了实践类的作业批改难的情况。

2. 课堂设计——整合知识点

针对《Web前端开发技术》课程知识内容多、操作性强、学时相对较少等问题，通过设计一系列的教学案例，以任务驱动来设计教学课堂[3]，一方面加强学生的学习兴趣，提高学生的实践能力，另一方面把零散的知识点连贯，进行思维拓展，完成知识的内化。

下面介绍JavaScript实现动态效果内容其中的一个教学案例来展示教学课堂的设计。

(1)展示效果

本案例实现的是放大镜效果，实际应用场景可用于商城的商品展示。课堂对案例进行简单描述，如当将鼠标移到一张图片上时，旁边会显示其局部放大的图片（效果如图1所示），说明应用场景可以增加学生的学习兴趣，营造一个好的学习氛围。

图1 放大镜效果

(2)分解任务

将此案例分解成6个子任务，上个任务为下个任务做准备，这种闯关形式更好地调动了学生能动性，具体如下：

问题一：如何处理缩略图、放大镜、原图之间的位置关系？

问题二：何时放大镜及原图隐藏，何时显示？

问题三：如何处理放大镜的中心点为当前鼠标位置？

问题四：如何处理放大镜超出缩略图范围？

问题五：如何实现当鼠标移动时放大镜跟随？

问题六：如何根据放大镜区域显示原图的相对位置？

递进式的教学方式也能更好地让学生明白每个阶段应具备的能力，让学生更专注地查漏补缺。

(3)任务实现

将各个子任务实现应将相关的知识点贯穿于任务中，达到一种温故而知新的效果。本案例中几个问题的实现可以渗透以下知识点。

问题一涉及到局部页面的结构。透过此问题引导学生掌握两个重要的知识点：一、盒子模型及布局，掌握盒子之间的正确包裹。二、CSS层定位，理解何时需要进行层定位，掌握不同定位之间的区别，能够将页面元素正确定位。

问题二引入人机交互的概念，激发学生主动思考人机交互体验。该任务既检验了学生线上学习的效果，如脚本的引入、常见事件等，也将JavaScript中的重难点知识，如DOM对象使用、常见的DOM操作等进行解析，使线上线下知识点串连。

问题三带入JavaScript中的BOM对象，让学生体验利用浏览器对象如何改变窗口位置、执行其他与页面内容不直接相关的一些动作，强化学习基于对象的编程。

问题四进行越界处理，回顾ECMAScript的语法，了解JavaScript中ECMAScript、DOM、BOM之间的关联。

问题五及六考察学生应用数学知识解决综合性、复杂性信息问题的能力。

(4)任务调试

作为前端开发的初学者，利用浏览器内置的调试工具可以完成大部分网页的基本调试，不需要再额外去安装其他插件。F12打开调试工具，利用工具中的元素面板（Elements）可以完成布局、定位和样式等设置；利用源代码面板（Source）可以完成脚本的调试，帮助初学者对脚本的检查，如问题四中判断放大镜是否超出缩略图范围，通过调试工具让学生更容易理解；利用其它面板可以模拟终端设备查看页面请求、显示日志/警告/错误信息等功能。

通过这样的课堂教学手段，促使学生的理解力及实践力得到提升。

4结束

本次教学改革是基于OBE理念为基础，更关注学生“学到了什么”、“获得了什么”，通过学生“学得怎样”的反馈评价教学，并将教学持续改进。通过混合式教学手段隐形调整教学学时，通过任务驱动解决学生学习目的性不强、兴趣不高的问题，通过任务分解将知识点分解到各个章节。但要持续将课程改进，仍有很多点、面可以深究，如科学地制定知识架构、合理地设计评量标准等。因此，坚持以“能力培养为核心”持续地进行课程改革，将更有效地促进素质教育的发展和教学质量提高。

参考文献：

[1]范圣法，黄婕，张先梅，徐立功.基于“产出导向（OBE）”理念的本科教学培养体系探究[J].教育理论与实践，2019，39（24）:6-8.

[2]张男星. 以 OBE 理念推进高校专业教育质量提升[J]. 大学教育科学，2019（02）:11-13+122.

[3]黄展鹏, 黄益栓, 张琦. 融合OBE理念的《Web前端开发》课程教学改革与实践[J]. 现代计算机，2020(28): 62-64.

作者简介：

文琦（1981—），女，江西吉安人，硕士研究生，讲师，研究方向为人工智能、机器学习

翁佩纯（1982—），女，广东潮安人，硕士研究生，讲师，研究方向为人工智能、机器学习

朱秋云（1979—），女，湖南郴州人，硕士研究生，讲师，研究方向为数据挖掘、云计算技术

梁宝兰（1979—），女，广东中山人，硕士研究生，讲师，研究方向为人工智能、机器学习

非公开发表部分：

姓名：文琦