混合式教学在Web前端开发课程中的应用研究＊

刘蕴涵，杨帆，赵玮，杨冠男

(南京财经大学信息工程学院，江苏 南京 210023)

0 引言

Web 前端开发技术是信息管理与信息系统、计算机类本科专业必修的一门核心课程。该课程以实践能力为导向，注重学生对理论基础知识的理解，教授学生掌握和使用HTML、CSS 和JavaScript 技术，培养团队合作精神。通过对浏览器网页进行布局设计，使学生能够真正掌握Web 前端开发知识在实际场景中的应用。同时为应对当前新冠疫情常态化，以教室为场景的面对面课堂教学时常面临被暂停，全国各高校积极尝试混合式教学及其体系的构建。这一过程中会遇到的重点与难点在于：①面对当前在线教学资源海量化、知识碎片化的特点，教育教学内容的甄选以及在线课程设计耗费教师大量的时间与精力。②多种在线课程学习平台的使用也会给学生在学习过程中造成混乱，反而影响学生的学习效率。③课程开展的过程中，需要充分发挥学生自主学习的能力，克服在线教学的时空限制最大程度地提高学生Web 前端开发的实践应用能力。

本文通过总结各种网络教学平台与工具应用的经验，归纳教学设计与实施体验，结合学生的反馈效果，在解决关键问题基础上提炼出行之有效的线上线下混合式教学模式。线下教学做到让学生自主学习，线上辅导帮学生解决疑问，这种教学模式对于学生的创新能力培养有着重要意义。

1 Web技术混合式教学模式的构建

由于大数据、信息系统与管理等课程随着信息技术的快速发展课程内容具有变化快、时效性强的特点，这不仅要求学生要系统地掌握课程章节的基本原理与方法，还需要匹配与现实专业技术工作相关的典型案例，以培养学生解决实际问题的能力与操作水平。根据这一要求，可以通过充分利用网络教学平台上实时更新的优秀课程资源，将线上与线下教学内容进行设计与融合，充分发挥两者各自优势，形成互补。

1.1 混合式教学资源构建阶段

当代大学生越来越习惯于在线学习的方式，通过多渠道灵活、及时地获取电子资料，这可以大大提高学生对于计算机网络相关专业知识的理解与掌握程度。与此同时，教师合理地、有计划地把集结高校、名师、国家级精品课等优质课程资源用于教学，既能够支持学生的个性化学习，也能够提高教学效率。因此，我们拟制作一个包含在线课程视频、在线章节测试、在线代码源等的Web 技术开发课程资源库。针对编程类课程的特征，教学设计更加注重锻炼学生的计算思维和解决问题的综合能力，包括知识内容方面、学生自主探究任务单、学习资源准备和开发、问题情境设计等多个方面。教学设计步骤如下：①按照课程各章节顺序将所有知识点进行梳理和归纳，根据课程体系的递进层次对每章节知识点的重要性与难易度进行标注；②根据标注知识点甄选“线上”优质教学视频与最新编程案例，将其分为引例与课后案例两类。③结合教学大纲要求，准备“线下”课堂教学资料，包括讲义课件、小组任务协作材料、习题等。最后，创建“线上”教学平台（如南京财经大学网络教学平台、SPOC 等）并上传教学资料。在教学过程中充分利用构建成的课程资源库，随时不断更新代码及课程资源库的内容。这样可以解决传统线下教学资源不足、单一的问题，使学生学到更全面的知识，随时都能够接触到最新的案例代码，练习编写并应用。这样有利于学生对课程内容进行自主探究与共享，从而发挥出学生的主体性。

1.2 混合式教学模式实施阶段

由于教学设计阶段性特征明显，按照教学环节分为课前、课中与课后三个阶段，每个阶段依托教学内容达成各项教学目标。如图1 所示，呈现了不同阶段的主体、任务、活动形式等。

图1 混合式教学Web开发课程总体实施方案

课前线上预习。给学生分组，三～五位学生为一组，指定一名组长，组织学生团队（即组）通过申请本课程SPOC 并且进入慕课堂，演示完整的项目代码，使学生直观地感受知识点是如何应用到实际浏览器网页设计中的，激发学生的求知欲。在展示的过程中，先介绍网页设计效果，确定项目所要解决的具体问题，让学生带着问题预习。然后教师介绍每一部分功能和所涉及的知识点，布置具体的课前学习任务，并且设计发放调查问卷。教师观察后台学生的学习数据记录，实时监督学生的学习进度。

课中线下教学。教师在教室场景下首先通过抽查提问等方式，及时把握学生对课前项目代码演示的理解程度以及通过课前预习对知识点的掌握情况；其次，教师进一步对各章节知识点和重要理论进行深入分析与归纳总结，对学生在学习过程中遇到的难点疑点问题进行解答。

课后线上拓展与线下讨论。利用线上教学平台发布实践任务，进入学生实践环节。实验过程强调理论与应用相结合，锻炼学生的实际动手能力。学生以小组为单位，由组长给每一位组员分配具体任务，教师及时了解不同小组的任务分工和任务完成进度，与学生讨论实验过程中遇到的问题。对于学生考虑不足之处给予补充，对普遍存在的问题进行统一讲解，对于学生存在的个别问题以一对一的方式讨论解决。小组完成任务后，让每个小组推荐一名学生介绍网页设计的过程及遇到的问题，并重点介绍解决方法，之后进入课堂评价和总结环节。课堂评价采用教师评价和组内互评两种方式。教师按照评分标准打分，并且在学期结束时以调查问卷的方式让小组成员进行互评。教师完成评分之后对课程的总体情况进行分析汇总，总结案例运用的主要知识点和普遍遇到的问题，并提出进一步的改进和完善的方向，引导学生能够自主性深入拓展学习。通过线下课堂讲解串联课前预习与整章节知识；通过小组合作提高学生的团队协作和沟通能力；通过教师评价和学生互评，及时发现并解决问题，从而提高学生的实践能力和表达能力，最终让学生学会应用相关技术，提高综合分析能力、实际操作能力和创新能力。

2 多途径多元化评价考核机制

利用线上线下途径建立多元化的评价体系，如表1所示。该考核机制扩大课程最终成绩中的过程性考核成绩的构成比例，不再将期末考试作为最终总评成绩的关键参考要素。避免传统考核方式中单一僵硬化，有效排除学生突击应对期末考试的弊端，及时考察学生日常学习效果，与监督学生过程化学习形成教学中的一个闭环，最终达到提高教学效果的目的。平时成绩为线上过程性考核，包括线上学习数据记录、小组实验成绩、小组互评、随堂测试、考勤等多项考核指标构成，侧重考察学生对课程知识的理解与应用。期末成绩为线下结果性考核，由传统的线下闭卷考试的方式进行，侧重考核学生对课程知识体系、客观知识点的记忆与综合性运用。总评成绩由平时成绩和期末成绩按适当比例构成。

表1 多途径多元化考核机制的实施

3 结束语

本文以“Web 前端开发技术”课程为例，通过分析在疫情期间设计并实施的以线上为中心的混合式教学模式，结合线下教室为场景的面对面传统教学方式，进一步提炼出线上与线下有机融合的新型教学模式；设计多途径多元化的评价体系，将线上过程化考核与线下结果性考核两者相结合。教学实践表明，该模式的开展推动了各教学环节从以教师传授知识为主导向以学生主动学习为主导转化，体现了教师与学生双主体的混合式教学过程，充分调动学生的学习积极性，提升学生合作探究的能力,以此推进学生计算与编程能力的自主性提高。今后我们会继续探索研究Web 前端开发课程混合式教学创新，不断完善整体性教学流程，推动Web 开发课程教学发展，实现培养变革性交叉学科人才的目标。