基于思政教育的迁移性教学在...前端开发》课程中的实践研究_陈苹.pdf

本栏目责任编辑：王力信息化与计算机教育Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)基于思政教育的迁移性教学在 Web前端开发 课程中的实践研究陈苹（南京新港中等专业学校，江苏 南京 210000）摘要：迁移教学旨在培养学生迁移思维和意识的形成，是使得学生学会学习、创新创造的基础条件，是学生专业技能快速与企业岗位需求匹配的重要方法之一。以德树人，是教育的根本，该文以 Web前端开发 课程为例，将课程思政的理念融入具备教育意义的项目任务中，遵循学生的认知规律，创新“MSMA”迁移性教学模式，采取混合式教学拓展教学时空的线上线下教学方法，开展多元化教学评价，提高学生综合素养的养成。关键词：思政教育；迁移性教学；MSMA中图分类号：TP3文献标识码：A文章编号：1009-3044(2022)36-0166-03开放科学（资源服务）标识码（OSID）：“立德树人”是教育的主要目标，“课程思政”是实现立德树人这一目标的重要途径，有效地将课程思政教育与专业课迁移性教学结合，培养学生有效学习、创新、探索的能力，推进课程思政建设，帮助学生塑造正确的世界观、人生观、价值观，在润物细无声的知识学习中融入理想信念层面的精神指引1。1 课程整体概述Web前端开发 课程是计算机专业核心课，在课程建设过程中，构建以学生为主体、教师为主导、技能为主线、融入文化内涵为暗线、创新、创意思维培养为中心，以贯通课前、课中、课下及线上线下的项目迁移式教学模式。迁移性教学采用“项目迁移”课程为基础，如图1所示。以“韵味金陵，云上非遗”一个综合PC前端设计项目贯穿运用CSS3设置网页样式、运用盒子模型划分网页模块等9个章节核心知识，分别输出主题项目的各功能模块，在课程最后一个章节，综合项目实战中进行项目整体策划设计与整合，以任务为驱动，结合实际案例和应用环境对综合项目实战进行迁移应用，将项目再改编成“即用即走，不占内存”微信小程序，培养学生大前端开发奠定基石。将课程思政的理念融入具备教育意义的项目任务中，遵循学生的认知规律，每个模块在不断巩固基础知识，强化基本技能的基础上，难度也逐级递增。通过课程的学习，学生能合理地进行Web前端制作过程中各环节的设计，分组协作完成整个项目的制作，通过知识对比学习，实现项目迁移，完成本主题的微信小程序开发，真正培养学生自主学习的能力，并通过项目的制作，学习了解民族文化，增进爱国情感。图1“项目迁移”课程2 教学对象分析学生前期学习了 图形图像处理 网页制作基础 JavaScript 等专业基础课程，具备了简单的前端设计基础知识，掌握了Hbuild软件的基础操作方法。以第十三章综合项目实战为研究实例，针对Web前端开发和微信小程序开发的知识单元异同将作为重点分析，同时课程开展学习前，对学生Web前端开发基础能力做了一个简单的测试，四组学生自拟主题，制作单个页面，发现页面布局较为混乱、结构分割不清晰，HTML+CSS的应用不熟练，页面表现较弱，所以，图片、文字布局、样式是否能突出主题展开将作为重点考查。3 基于思政教育的迁移性教学设计与实施3.1 构建真实问题情境，实现知识向实践能力迁移教师为学生创设问题情境，以网站形式宣传金陵非物质文化遗产真实问题贯穿整个教学主线，学生先通过六个功能模块开发的学习，参与、体会学习的过收稿日期：2022-04-25基金项目：本文系2022年度江苏省职业教育教学改革研究课题 课程思政视域下中职专业课程教学设计与应用研究(项目编号：ZYB49)的研究成果。作者简介：陈苹（1982），女，江苏南京人，讲师，学士，主要研究方向为计算机专业课程教学等。E-mail：http：/Tel：+86-551-65690963 65690964ISSN 1009-3044Computer Knowledge and Technology电脑知识与技术Vol.18,No.36,December2022166DOI:10.14004/ki.ckt.2022.2271信息化与计算机教育本栏目责任编辑：王力Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)程，利用迁移规律学习知识，根据实践操作过程发现问题、分析问题、解决突破问题。以综合项目应用开发为迁移中介，整合六个模块知识内容为一个完整的PC端Web前端开发项目，增加专业的深度学习，再通过综合拓展项目微信小程序开发为迁移中介，增加专业的广度学习，综合促进学生专业技能以及关键能力的形成,具体的教学迁移过程如图2所示。3.2 工作过程系统化课程采用基于项目、基于功能模块化学习，学生在团队协作中完成项目实践或者解决生活和生产实践中所遇到的问题，融合了“做中学”、建构主义、体验式教学等教学模式。课程实施由情境创设（“韵味金陵，云上非遗”）方案设计（班级学生分成四组，每组选择一个具体的南京非物质文化遗产项目为主题进行网站开发）实践优化（工程制作）展示交流四个阶段组成。学生在独立设计、实施、优化方案，完成项目任务的过程中，发展自身的高阶思维，养成批判性思考及积极学习和通过项目活动解决问题的能力和沟通技巧。邀请下企业回来的教师结合企业工作经验，参与到课堂教学中，最终入选项目需要根据客户修改意见完善作品，如图3所示。图3 教学实施过程3.3 项目迁移，实现增量学习教师的“教”（PC端Web前端开发、Web前端开发与微信小程序知识结构异同对比）是为学生的自主“学”（微信小程序前端开发）服务的，一切教法，都是服从于学生学习迁移的形成，学生具备“大前端”开发能力这一最终目的，教学不是知识的传递，课上的“教”，是为了适应企业前端设计岗位需求而设立的，更是为了课下的“不教”，是使学生具备自主迁移，进行增量学习、自主学习探究前端开发的能力和素养。通过本课程学习，使得学生能够掌握知识迁移规律，从 Web 前端开发入手，自主学习小程序、移动端（IOS、Android）其他开发等。实现增量学习的同时，能真正掌握知识学习密码，形成学生受益终身的学习能力，如图4所示。图4 综合项目拓展开发教学课堂实施、设计3.4 思政课程贯穿工作任务课程项目以“韵味金陵，云上非遗”为大主题，“归宁灯会”“鸡鸣素食”“云想衣裳”“竹坞听琴”四个小组学生完成功能模块分析制作，通过合作形式以“秦淮灯会”“鸡鸣寺素食”“南京云锦”“金陵琴派”四个主题，制作PC端Web前端开发项目，从网站的整体策划方案撰写、修改、调整、汇报交流、修改方案到完成Web前端开发的各环节。结合每个环节的制作要点，设置有针对性的问题串，起到强调知识点、引导设计思路、规范制作细节的作用。学生以思维导图形式进行方案的呈现、人员分工等。各组在项目完成后，形成详细记录团队成长过程的思维导图。将碎片化的记忆进行整合，从接受式转变为自主探究、合作探究的学习方式，完成迁移项目。3.5 在线课程助力学生成长根据项目需要，依托“超星”学习平台，搭建网络课程辅助教学，师生共建教学资源。在学习创建网站、制作网页之前，通过网络资源赏析国内外优秀网站，教师对网站的主页进行分析，解析一些优秀网站的布局结构、文字效果、色彩搭配、导航栏设计、动画效果等，留下直观的印象，为制作网页奠定基础，引导学生体验网站前端开发的职业精神。通过腾讯课堂微课等课程资源，辅助学生系统学习，尤其是JavaScript动画效果制作脚本等，弥补教师课堂教学的有限性和学生个体差异性。由于信息化教学常态化，师生、生生网络交流已经形成习惯，教师形成长期在线答疑和布置作业的习惯，学生课后遇到图2 教学迁移过程167本栏目责任编辑：王力信息化与计算机教育Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)问题可以及时得到解答，通过作业情况及时向教师反馈学习掌握情况，有效地提高了学习积极性。3.6 教学评价真实多元教学评价是一个目标动态调整的过程，教师不能只一味地关注学生单一的作品完成度，而更应该关注学生在整个项目开发过程的参与程度、态度、团队协作能力、动手实践能力、创造能力等方面的综合表现和提升，注重学生整个项目开发过程中的各种表现能力。PC 端 Web 前端开发教学评价首先采用 Lighthouse报告指标分析评价，从性能（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运用，转变为始终围绕制作主题，高效完成网站前端开发制作。图5“MSMA”模式4.3 学生作品进阶图课程开展实施前，通过自拟主题作品对学生网页设计制作水平进行摸底，在综合项目应用开发课程实施时，四组围绕“韵味金陵，云上非遗”主题进行PC端Web前端开发，通过教师指导分析、纠错、学生自主探究，学生对作品再次进行迭代开发，最后，进行项目迁移，引导学生通过知识对比学习，在教师指导下，探索微信小程序开发，最后完成“韵味金陵，云上非遗”的微信小程序开发，宣传推广南京非物质文化遗产，弘扬爱国主义精神，如图6所示。图6 学生作品进阶图4.4 课程实施效果动手操作与创意实践通过迁移性教学，给学生提供创造创意空间，对于学生问题解决过程中多种能力的发展起到推动作用。通过对后测调查问卷中几个问题的梳理，结合前测学生的反馈信息，对教学过程中问题解决方面积累的能力进行效果呈现，如图7所示。图7 课程实施前后学生各种能力的对比（下转第145页）168信息化与计算机教育本栏目责任编辑：王力Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)子任务3子任务4子任务5子任务6子任务7子任务8子任务9子任务10子任务11子任务12子任务13子任务14子任务15子任务16子任务17子任务18子任务19子任务20使用设计视图查询学生的不