基于思政教育的迁移性教学在《Web前端开发》课程中的实践研究

陈苹

关键词：思政教育；迁移性教学；MSMA

中图分类号：TP3 文献标识码：A

文章编号：1009-3044（2022）36-0166-03

“立德树人”是教育的主要目标，“课程思政”是实现立德树人这一目标的重要途径，有效地将课程思政教育与专业课迁移性教学结合，培养学生有效学习、创新、探索的能力，推进课程思政建设，帮助学生塑造正确的世界观、人生观、价值观，在润物细无声的知识学习中融入理想信念层面的精神指引[1]。

1 课程整体概述

《Web前端开发》课程是计算机专业核心课，在课程建设过程中，构建以学生为主体、教师为主导、技能为主线、融入文化内涵为暗线、创新、创意思维培养为中心，以贯通课前、课中、课下及线上线下的项目迁移式教学模式。

遷移性教学采用“项目迁移”课程为基础，如图1所示。以“韵味金陵，云上非遗”一个综合PC前端设计项目贯穿运用CSS3设置网页样式、运用盒子模型划分网页模块等9个章节核心知识，分别输出主题项目的各功能模块，在课程最后一个章节，综合项目实战中进行项目整体策划设计与整合，以任务为驱动，结合实际案例和应用环境对综合项目实战进行迁移应用，将项目再改编成“即用即走，不占内存”微信小程序，培养学生大前端开发奠定基石。

将课程思政的理念融入具备教育意义的项目任务中，遵循学生的认知规律，每个模块在不断巩固基础知识，强化基本技能的基础上，难度也逐级递增。通过课程的学习，学生能合理地进行Web前端制作过程中各环节的设计，分组协作完成整个项目的制作，通过知识对比学习，实现项目迁移，完成本主题的微信小程序开发，真正培养学生自主学习的能力，并通过项目的制作，学习了解民族文化，增进爱国情感。

2 教学对象分析

学生前期学习了《图形图像处理》《网页制作基础》《JavaScript》等专业基础课程，具备了简单的前端设计基础知识，掌握了Hbuild软件的基础操作方法。

以第十三章综合项目实战为研究实例，针对Web 前端开发和微信小程序开发的知识单元异同将作为重点分析，同时课程开展学习前，对学生Web前端开发基础能力做了一个简单的测试，四组学生自拟主题，制作单个页面，发现页面布局较为混乱、结构分割不清晰，HTML+CSS的应用不熟练，页面表现较弱，所以，图片、文字布局、样式是否能突出主题展开将作为重点考查。

3 基于思政教育的迁移性教学设计与实施

3.1 构建真实问题情境，实现知识向实践能力迁移

教师为学生创设问题情境，以网站形式宣传金陵非物质文化遗产真实问题贯穿整个教学主线，学生先通过六个功能模块开发的学习，参与、体会学习的过程，利用迁移规律学习知识，根据实践操作过程发现问题、分析问题、解决突破问题。以综合项目应用开发为迁移中介，整合六个模块知识内容为一个完整的PC端Web前端开发项目，增加专业的深度学习，再通过综合拓展项目——微信小程序开发为迁移中介，增加专业的广度学习，综合促进学生专业技能以及关键能力的形成，具体的教学迁移过程如图2所示。

3.2 工作过程系统化

课程采用基于项目、基于功能模块化学习，学生在团队协作中完成项目实践或者解决生活和生产实践中所遇到的问题，融合了“做中学”、建构主义、体验式教学等教学模式。课程实施由情境创设（“韵味金陵，云上非遗”）——方案设计（班级学生分成四组，每组选择一个具体的南京非物质文化遗产项目为主题进行网站开发）——实践优化（工程制作）——展示交流四个阶段组成。学生在独立设计、实施、优化方案，完成项目任务的过程中，发展自身的高阶思维，养成批判性思考及积极学习和通过项目活动解决问题的能力和沟通技巧。邀请下企业回来的教师结合企业工作经验，参与到课堂教学中，最终入选项目需要根据客户修改意见完善作品，如图3所示。

3.3 项目迁移，实现增量学习

教师的“教”（PC端Web前端开发、Web前端开发与微信小程序知识结构异同对比）是为学生的自主“学”（微信小程序前端开发）服务的，一切教法，都是服从于学生学习迁移的形成，学生具备“大前端”开发能力这一最终目的，教学不是知识的传递，课上的“教”，是为了适应企业前端设计岗位需求而设立的，更是为了课下的“不教”，是使学生具备自主迁移，进行增量学习、自主学习探究前端开发的能力和素养。通过本课程学习，使得学生能够掌握知识迁移规律，从Web 前端开发入手，自主学习小程序、移动端（IOS、Android）其他开发等。实现增量学习的同时，能真正掌握知识学习密码，形成学生受益终身的学习能力，如图4所示。

3.4 思政课程贯穿工作任务

课程项目以“韵味金陵，云上非遗”为大主题，“归宁灯会”“鸡鸣素食”“云想衣裳”“竹坞听琴”四个小组学生完成功能模块分析制作，通过合作形式以“秦淮灯会”“鸡鸣寺素食”“南京云锦”“金陵琴派”四个主题，制作PC端Web前端开发项目，从网站的整体策划方案撰写、修改、调整、汇报交流、修改方案到完成Web前端开发的各环节。

结合每个环节的制作要点，设置有针对性的问题串，起到强调知识点、引导设计思路、规范制作细节的作用。学生以思维导图形式进行方案的呈现、人员分工等。

各组在项目完成后，形成详细记录团队成长过程的思维导图。将碎片化的记忆进行整合，从接受式转变为自主探究、合作探究的学习方式，完成迁移项目。

3.5 在线课程助力学生成长

根据项目需要，依托“超星”学习平台，搭建网络课程辅助教学，师生共建教学资源。在学习创建网站、制作网页之前，通过网络资源赏析国内外优秀网站，教师对网站的主页进行分析，解析一些优秀网站的布局结构、文字效果、色彩搭配、导航栏设计、动画效果等，留下直观的印象，为制作网页奠定基础，引导学生体验网站前端开发的职业精神。

通过腾讯课堂微课等课程资源，辅助学生系统学习，尤其是JavaScript动画效果制作脚本等，弥补教师课堂教学的有限性和学生个体差异性。由于信息化教学常态化，师生、生生网络交流已经形成习惯，教师形成长期在线答疑和布置作业的习惯，学生课后遇到问题可以及时得到解答，通过作业情况及时向教师反馈学习掌握情况，有效地提高了学习积极性。

3.6 教学评价真实多元

教学评价是一个目标动态调整的过程，教师不能只一味地关注学生单一的作品完成度，而更应该关注学生在整个项目开发过程的参与程度、态度、团队协作能力、动手实践能力、创造能力等方面的综合表现和提升，注重学生整个项目开发过程中的各种表现能力。

PC端Web 前端开发教学评价首先采用Light⁃house报告指標分析评价，从性能（Performance），访问无障碍（Accessibility），最佳实践（Best Practice），搜索引擎优化（SEO），PWA（Progressive Web App）五个部分，对PWA（Progressive Web App）和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助学生们改进网站的质量。其次，使用项目反馈评价表从项目分工、学科知识融合、解决问题能力、团队合作、创造意识与创造能力、作品艺术性审美六个维度展开学生自评、组评、师评和客户多方面评价组成。

微信小程序前端开发教学评价首先采用微信小程序开发平台自带的Adubits测试工具，方便学生对小程序项目进行性能，体验，实践三个方面的评估修改，再采用项目评价反馈表进行评价。

4 研究成效

4.1 构建学习共同体

在信息技术与教育教学深度融合的时代大背景下，“课前学、课上做”“做中学，学中做”改变了传统课堂学习方式[2]。在每个项目的制作过程中，师生在学习过程中沟通、交流，分享各种学习资源，构建学习共同体，共同完成PC端和微信小程序的前端设计制作。

4.2“MSMA”模式，提升专业素养

“MSMA”是模块化学习+系统性学习+迁移性学习到能力提炼的一种教学模式。如图5所示，模块化学习（Modular），在“线上线下”学习环境下，通过功能模块化学习与练习，使学生具备HTML开发、CSS设置、JavaScript交互设计基础应用的实践操作能力。系统化（Systematize），通过综合项目的应用开发，巩固Web前端开发基础知识的同时，具备网页设计、开发、调试、维护等综合能力。迁移（Migrate），通过微信小程序前端开发和Web前端开发的高度相似度以知识迁移的方法进行转化，培养学生自主探究能力。能力（Ability），构建PC端和微信小程序前端开发知识对比思维导图，引导学生自主学习微信小程序开发、制作、反思专业技能，掌握自主探究学习的方法，为大前端开发自主学习奠定基础，快速提升专业素养。由重点关注制作过程中HTML标记、CSS样式、JavaScript运用，转变为始终围绕制作主题，高效完成网站前端开发制作。

4.3 学生作品进阶图

课程开展实施前，通过自拟主题作品对学生网页设计制作水平进行摸底，在综合项目应用开发课程实施时，四组围绕“韵味金陵，云上非遗”主题进行PC端Web前端开发，通过教师指导分析、纠错、学生自主探究，学生对作品再次进行迭代开发，最后，进行项目迁移，引导学生通过知识对比学习，在教师指导下，探索微信小程序开发，最后完成“韵味金陵，云上非遗”的微信小程序开发，宣传推广南京非物质文化遗产，弘扬爱国主义精神，如图6所示。

4.4 课程实施效果——动手操作与创意实践

通过迁移性教学，给学生提供创造创意空间，对于学生问题解决过程中多种能力的发展起到推动作用。通过对后测调查问卷中几个问题的梳理，结合前测学生的反馈信息，对教学过程中问题解决方面积累的能力进行效果呈现，如图7所示。

5 创新与特色

5.1“MSMA”模式

“MSMA”模式，迁移教学方式，引导学生自主探究式学习，“授人以鱼不如授人以渔”方式培养学生自主学习、创造性学习能力，延伸专业深度和广度的学习奠定基础。

构建以学生为主体、教师为主导、技能为主线、创新创意思维培养为中心，以贯通课前、课中、课下及线上线下，充分发挥课堂效率的教、学、做、创合一的理实一体化为主要教学模式。

5.2 课程思政全面融入

将课程思政融入专业人才培养方案的课程设置中，采用网站和微信小程序数字技术，让学生制作开发过程中，走进非遗、研究非遗，通过网络形式向人们宣传非物质文化遗产保护，利于展示中华民族悠久的历史文化，激扬民族精神，也帮助摆脱空间局限性和地理位置的限制导致非遗的保护和活态继承的困难，推动南京非遗的保护和传承。汇报交流时学习共同体的创设，互助互学，立德树人融入教学的各环节中。从学生参与的积极性以及汇报、讨论过程中的情绪表达中能够看出，切实地提高了学生的文化自信和爱国之情。

6 教学反思

本项目教学采取多元化过程性评价和软件测试评价，弥补了传统《Web前端开发》课程的单一主观评价的局限性，提高了评价的效度及信度。评价方式设置的合理性，会直接影响学生的学习积极性。鼓励学生将专业知识与思政元素结合，与现实生活结合，丰富基于思政教育[3]的课程教学内容，探究专业课程内容与思政教育的契合点，而不是生搬硬套地强行加入思政教育元素，使用迁移性教学方式，摒弃学生学习的依赖性，挖掘内在自主学习的动力，提高学生学习能力[4]，培养学生思政素养，培养学生传承非遗继承人的匠心精神，弘扬爱国主义精神。