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

杨 云，张 剑

（西南石油大学 计算机科学学院，成都 610500）

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

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

一、课程教学现状

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

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

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

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

（二）教学内容简单

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

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

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

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

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

（一）课程资源建设

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

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

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

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

（二）引入课程思政元素

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

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

（三）教学内容改革

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

表1 web 前端混合式教学内容

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

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

（四）教学方式改革

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

1.课前

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

2.课中

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

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

贯穿始终的项目案例讲解。案例可将所学知识内化，典型通用的项目案例能突出知识的重点和应用。在课程实施中较难做到贯穿始终的项目案例，往往仅针对单一的知识点进行案例讲解，缺乏系统性和完整性，学生们在完成课程知识的学习后并不能有效地整合内化，形成自己的知识。因此在课堂教学中以一个整体项目结合课程的主要知识点，循序渐进形成完整的小型项目，并模拟完成，实现知识点的系统化应用，提升学生的学习兴趣和自信心。

3.课后

课后老师通过课程中查看学生所完成的作业，跟踪了解学生的学习情况。针对学习中的问题可在课程中心进行答疑，也可在课程钉钉群进行解答。同时对每次的优秀作业选取部分进行展示，提升学生的成就感。

（五）实验教学改革

web 前端应用开发技术课程实践性强，为强化学生动手能力，本校课程设置实验上机学时为24 学时，占总课时的50%。以前实验上机以学生个人为单位，独立完成实验项目，实验内容更多侧重于验证型及少量综合型，对于知识的综合应用能力稍显欠缺。

企业对于人才除了有专业能力上的需求以外，往往对沟通、团队协作等方面也有着较高的要求。为了更全面地培养学生各方面的能力，针对课程的实验教学进行了改革探索，主要包含两个方面。一是实验内容不再基于知识点的验证，通过设计综合型实验项目，整合课程所有知识点，以项目形式驱动实验，通过完成实验理解和掌握相关课程内容，最终完成项目开发。二是实验以小组为单位，每组不超过4 人，针对实验项目进行分工，充分使用项目开发和管理工具，协作完成项目开发。

实验成绩从两个方面进行衡量，一是个人所承担的工作和完成的质量，二是小组工作完成的质量，各占50%。既考查了专业知识的掌握程度，又兼顾了团队协作能力的培养和考查。

（六）课程考核改革

传统课程考核方式单一，主要由平时成绩（30%）+期末考试（70%）构成，在混合式教学中已不再适合。为了公平公正地进行考核，合理地反映出学生的真实情况，课程考核转变为学习过程的考核，考核的方式直接作用于教学效果，在考核过程中发现问题可持续进行改进和优化教学方式，不断完善和提升教学过程，形成良性循环。

目前本校web 前端应用开发技术课程考核成绩主要由四部分组成，分别为平时成绩、实验成绩、期末成绩及附加成绩，见表2。

表2 考核标准

平时成绩主要是学习过程的反映，以课前、课中和课后三个不同阶段，涉及到学生的课程资源学习、课堂出勤、作业完成情况、课堂互动、课堂小测试及问题反馈交流等多个方面，共占40%。实验成绩主要针对课程的实验练习，分小组进行完成，每个组3～5 人，共同完成一个前端项目，每人在小组中承担不同的工作任务，最后根据成员或团队的工作量和完成质量进行评分，实验成绩共占30%，个人与团队成绩各占15%。期末成绩占30%，考核方式不再拘泥于考试，也可采用大作业等方式。同时为了鼓励学生学以致用，将所学知识用以解决实际问题，考虑了20%的附加分，课程总成绩100，超过100 记为100 分。

（七）教学效果

web 前端应用开发技术课程混合式教学的实施对象是计算机科学与技术2019 级专业的学生，两个教学班级共124 人，与前期相比成绩有不同程度提升，平均成绩提升4.87%；及格率达到97.5%，提升约8%。除了课程成绩和及格率的提升以外，另一个明显的改变体现在随着课堂互动的增加，学生较以前更活跃，跟老师、同学的感情也日益深厚，课堂也不再像以前过于沉闷，真正践行了“在快乐学习，在快乐中成长”的教学目标。实施结果反应出混合式教学效果明显，也更能提升学生学习的兴趣，促进其自主学习的积极性和主动性。

三、结束语

互联网技术的深入应用使得线上线下混合教学得以实现，线上教学可实现教学过程的记录，实时跟踪学习过程，全程掌握学习情况，并能及时汇总统计教学过程的数据，发现存在的教学问题，实现有效的教学质量把控。在新型的教学模式下，老师和学生的角色发生了转变，老师从传统的知识讲授、管理者转换为学习指导、促进者；学生则从被动接受者转变为主动学习者，充分发挥出学生学习的积极性和主动性，激发其学习的兴趣。

混合式教学模式在本校web 前端应用开发技术课程中得以应用，展现出了其优越性的一面，相较于传统的课堂教学，学生的成绩和综合能力均有一定程度的提升。但也存在一些问题，主要表现在学生能力的差异对课程资源的建设和教学过程的要求不同，需要有针对性地因材施教，避免打击自学能力强的学生的学习兴趣，或造成学习能力弱的学生懈怠；线上学习的实时跟踪，做到随时掌握学生的具体情况，需要投入较多的时间和精力；多门课程同时采用混合式教学可能造成教学安排的混乱。以上所遇到的问题，在今后的教学过程中值得进一步改进。