web前端应用开发技术课程混合式教学探索与实践

摘  要：web前端应用开发技术是计算机类专业重要的核心课程，课程所包含的教学内容多，实践性强，并且相关技术更新快。传统的课堂讲授模式以教师为中心，学生被动式接收，难以调动学生学习的积极性和主动性。混合式教学结合线上线下教学模式，以学生为中心，变被动为主动，充分调动学生学习的积极性，提升课程的教学效果。该文以web前端应用开发技术课程为基础，结合线上线下混合教学模式进行探索与实践，从课程资源建设、课程思政元素引入到教学内容、教学方式和考核方式等方面尝试改革，并针对所取得的教学效果展开分析和总结。

关键词：web前端;线上线下教学;混合式教学;应用开发;探索与实践

中图分类号：G642.3      文献标志码：A          文章编号：2096-000X（2022）30-0121-04

Abstract： Web Front-end Technology of Development and Application is an important core course for computer majors. The course contains a lot of teaching content， strong practicality， and related technologies are updated quickly. The traditional classroom teaching mode is teacher-centered， and students receive passively， which is difficult to mobilize the enthusiasm and initiative of students to learn. The blended teaching combines the online and offline teaching mode to take students as the center， change from passive to active， fully mobilize the enthusiasm of students in learning， and improve the teaching effect of the course. Based on our school's course of Web Front-end Technology of Development and Application， this paper explores and practices in combination with the online and offline mixed teaching mode， and tries to reform from the construction of curriculum resources， the introduction of ideological and political elements of the curriculum to the teaching content， teaching methods， and assessment methods， and it also analyzes and summarizes the teaching effect obtained.

Keywords： web front-end; online and offline teaching; blended teaching; application development; exploration and practice

随着互联网技术的发展，web（全球广域网或万维网）应用开发分工越来越细，出现了web前端开发、后端应用开发和移动应用开发等工作岗位，其分工明确又紧密配合。伴随着移动互联网技术的普及应用，前端开发工程师的需求越来也大。从当前企业的岗位要求反观，既要求具备web前端技术的基本技能——HTML5、CSS3和JavaScript等，又要求能较熟练地应用Vue、React等主流前端框架，同时还提出了前端工程化、web全栈开发等要求[1]。

目前很多高校都开设了web前端相关的课程，但大多都存在课程体系和教学内容陈旧的问题，难以满足企业对相关人才的需求。近10年移动互联网飞速发展，移动网络用户呈现出爆炸式增长，基于前后端分离的web开发模式得到大量应用，前端框架层出不穷，对前端开发人员也提出了更高的要求[2]。

一、课程教学现状

西南石油大学计算机科学学院（以下称“本校”）计算机类专业开设web前端课程有2018—2022年时间，目前已达到每年选课人数规模超过500人。另外根据对专业学生就业情况的统计发现，有超过30%的学生所从事的工作为web前端方向，还有相当比例的学生会涉及到web前端方面的相关工作，可以看出学生对本课程的重视程度及就业的重要性。因此，在本校计算机类专业中开设本课程也从最初的软件工程专业逐步增加到所有专业，反映出本课程在计算机类专业中占有越来越重要的地位。从近年来的教学情况来看，课程在教学过程中也相应的面临着一些问题，主要体现在以下几方面。

（一）教学方式单一，知识难以内化

课程采用传统教学模式，主要以老师课堂讲授为主，结合知识点讲解，学生被动接受，课堂参与度不够，积极性不高，在课程的学习过程中逐渐失去学习的兴趣。

web前端技术知识点多而零散，并且缺少逻辑关联性。在HTML（超文本标记语言）中包含有大量的标记符号，CSS（层叠样式表）中又存在着各式各样的样式属性，这些内容的熟练使用需要长时间地训练进行内化[3]。在完成课程知识点的学习后不少学生难以完成一个美观的web页面，主要原因在于缺少项目的训练将这些零散知识点梳理成体系，将所学知识内化。

（二）教学内容简单

目前本校的web前端开发技术课程设定为48学时，含实验教学24学时，在有限的课堂教学里重点讲授HTML5、CSS3、JavaScript及JQuery等前端基础知识，教学时间仓促而紧张，大部分是知识点的串讲，缺少整体知识体系的融合，大部分学生难以对所学内容加以实际应用，造成“教”与“学”的脱节。同时前端技术更新快，目前课堂教学内容主要对页面标记、样式属性及Java- Script基础应用展开讲解，并不足以满足当前企业对前端工程师的工作需求。除此以外，还需要掌握前端主流开发框架、版本控制管理工具及浏览器调试技能等。应适应实际工作岗位需求的课程设置，从企业实际需求角度出发，培养企业真正需要的人才。

（三）难以满足不同层次人才的培养要求

web前端应用开发技术课程在本校目前集中在二年级和三年级开课。这个阶段学生的一个显著特点就是开始“分流”，一些自制力好，学习能力强的学生已逐步建立专业知识体系，提前学习了部分课程的相关内容，课堂教学内容大部分已经掌握，希望通过学习具备更深层次的能力;部分学生缺乏明确目标，完全跟着课堂走。在一个教学班级中针对这些水平迥异的个体难以做到差异化培养，往往采用一致的灌输式教学，对学生来讲不够友好和人性化，也不符合高校培养不同层次人才的目标。

二、混合式教学方案探索与实践

针对上面所总结的本校web前端应用开发技术课程所存在的教学方面的不足，结合教育部高等教育司司长提出的“淘汰‘水课’，打造‘金课’”的要求，经课程组讨论后决定改变传统模式教学，逐步转变为基于互联网教学平台的混合式教学模式，逐步改善和提升课堂教学质量[4]。目前依托超星课程中心建设线上课程资源，实施和开展线上线下教学活动。

（一）课程资源建设

混合式教学需要线上教学资源予以支撑，包括实验库、案例库、教学视频及项目库等。为了解决web前端课程在教学过程中的问题，课程组决定分三步进行实施。

第一步借助于校企合作产学研协同育人项目，引入企业课程教学资源。课程组教师加强与企业的沟通，学习其优秀的教学内容、教学方法及课程案例，加以消化吸收。

第二步结合本校具体情况基于超星课程中心平台建设打造课程教学资源，制定新的教学体系。逐步完成教学课件、教学视频、教学题库、教学项目案例和教学实验指导书等资源的建设，形成自身的教学成果。

第三步丰富和完善web前端知识体系，形成一个完整的大前端课程库，可满足不同层次的学习需要。并基于其形成一批教学成果，为一流课程、金课等课程申报做准备。

（二）引入课程思政元素

课程思政是高校以习近平新时代中国特色社会主义思想为指导，以习近平总书记关于教育工作的重要论述为根本遵循，落实立德树人根本任务的重要举措。

在本课程中切入思政要点，将专业知识与思政元素有机结合，帮助学生树立正确的人生观和价值观。web前端的界面设计，可以美育先行;界面效果可以有多种实现途径，可引导学生多方位多角度思考和分析问题;前端系统的深度迭代可培养学生精益求精的工匠精神;实践中的分工协作可培养相互信任、相互沟通和协同合作的精神和能力。

（三）教学内容改革

web前端所包含的内容多而杂，教学内容过于广泛化，有限的课堂学时限制了教学内容的多样化。线上线下混合式教学模式以线上资源（课件、视频、练习作业和测试）建立课程的相关内容，可充分发挥互联网的优势，不断地建设优化和完善相应的教学资源。教学内容不再局限于课堂，形式多样、层次感强，较好地兼容不同层次的学生需求，因此在web前端应用开发技术课程中对教学内容也做出了相应的改变，见表1。

其中HTML5、CSS3、JavaScript和JQuery是基础内容，要求每位学生都需要学习掌握。同时为了进一步贴近企业对web前端人才的需求，目前课程建设了基于Vue、微信小程序和webpack等知识模块的资源。针对课程内容知识面广，学生水平参差不齐的问题，以混合式模式予以解决。对于学习能力强，水平较高的同学可借助开放的课程资源深入学习，通过线上的教学视频学习并完成配套作业、实验。为了鼓励学生自学，在对可选模块进行学习并完成相关作业和练习后给予一定程度的附加分。

建设项目案例，结合课程知识点逐步完成一个小型前端项目，充分整合HTML5、CSS、JS、JQuery及Vue等技术知识。案例贯穿课程始终，以知识点为基础，内化零散知识点。

（四）教学方式改革

混合式教学不再局限于课堂内教学，因此教学方式相比于传统模式也有了较大的改变，本课程将教学分为课前、课中和课后三个不同的阶段。

1. 课前

学生课前通过线上教学视频、教学课件了解此次课程的学习目标，需要完成相应的学习任务和配套练习作业，记录学习过程中存在的问题及收获，学习平台记录学习的时间。老师通过平台可查看学生的学习时间、学习情况和作业完成情况等，做到课前心里有数。

2. 课中

课堂上不再由老师灌输式讲解知识点，将课堂讲授转变为课堂交流，由老师组织学生进行讨论。将课前学生们所记录和反馈的问题收集，然后讨论解决，针对普遍性的问题有针对性地提出解决方法，经讨论后形成最终解决方案。在实践环节着重编程中典型错误或问题通过代码展示，界面实现效果等展开讨论，形成讨论交流的良好氛围[6]。

讨论过程中以不同方法引导学生思考，并寻求问题的答案。启发式教学是当前课堂教学中常用的方法之一，老师通过某个典型场景提出问题，引导学生一步步解决问题。如在Cookie（储存在用户本地终端上的数据）知识学习时提出，常见的web系统登录中，常常看到“下次自动登录”“7天免登录”等勾选框，在完成选择后如何实现下次不再登录的效果？引出在考试过程中不需要知道考试时间将结束，只需要知道最终结束时间即可，从而引入cookie的过期时间等知识点。