Web前端开发课程思政教学设计与实施

王黎，袁礼，吕殿基

(北京经济管理职业学院信息学院，北京100102)

为落实为谁培养人、培养什么样的人以及如何培养人的教育战略目标，大学所有课程都应充分发挥传授知识、培育能力及思想政治教育双重功能。课程思政建设就是要用好课堂教学这个主渠道，确保各门课都要守好一段渠、种好责任田，使各类课程与思想政治理论课同向同行、形成协同效应，充分发挥好专业课教学“主战场”、专业课课堂“主渠道”、专业课教师“主力军”的作用。专业教师在培养学生专业知识和实践技能的同时，必须以立德树人为中心环节，把社会主义核心价值观、家国情怀、工匠精神、法治意识、社会责任、职业素养等思政元素融入专业课堂中，引导学生将个人成长与祖国前途命运和人民幸福的伟大“中国梦”紧密相连，培育有理想、有信念的社会主义合格建设者和可靠接班人。

Web 前端开发课程是高职院校计算机专业人才培养课程体系中的一门专业核心课程，总学时为72学时，在大二学期开设，主要讲解Web 前端开发领域的关键技术(HTML、CSS 和Ja‐vaScript 等)，重在培养学生实践能力和综合能力。目前，Web前端开发方面的人才市场需求量大幅提升，具有良好的就业前景。在尊重课程建设规律的基础上，依据课程本身的特点，发挥专业学科优势，通过对课程教学内容和教学设计的创新和改进，采用“润物无声”的方式将思政教育全过程全方位融入教学过程，深度拓展教学内容，实现专业课程的育人功能。

课程开始之前需要对每位学生进行学情分析，了解他们的学习能力、起点差异、知识获取过程和方法的异同、自律情况、思想状况等。为思政教育的融入选择合适的教学设计途径，使得思政教育有的放矢。

1 利用好“第一堂课”，融入思政教育

1.1 从细节之处入手，渗透德育教育

本课程在机房上课，要求学生遵守机房的规章制度，维护环境卫生，规范使用和操作电脑。下课时正确关机，将键盘、鼠标、显示器、座椅归位。细节之处见人的品行，细节决定成败，伟大源于平凡。通过每次课前、课后不厌其烦地提醒，让学生养成习惯、注重细节，意识到细节是一种习惯，是一种积累，也是一种品德。

1.2 进行岗位需求分析，让学生了解从事该行业所应具备的职业素养

目前，网站开发行业中岗位分工越来越明确，例如网站结构规划、网站美工设计、前端开发、后台开发、系统测试等岗位。而前端开发工程师作为独立存在的岗位，是公认的入门简单、就业前景广阔的行业之一。据统计，Web前端开发岗位目前的人才缺口接近50万。信息化时代下的Web前端开发对技能型人才的综合素质提出了较高要求。因此，通过分析企业对相关人才的工作领域、岗位任务、技能要求和知识要求，让学生知道企业对人才的考察，不仅要有扎实的知识储备，还需要较高的实践能力，还要具备吃苦耐劳精神、团队合作的能力。同时，让学生了解行业内必须需要遵循的行为标准、价值观念及职业道德规范的重要性。

1.3 了解前端开发技术的发展史，树立民族自信心

介绍网站前端开发的发展历程，以“人类命运共同体”为落脚点，对比世界前端技术现状，我国前端开发起步晚，但是发展势头迅猛，在各种新技术、新标准的推动下，国内各大互联网公司也都开始重视Web产品的前端重构，如腾讯、新浪、淘宝等网站都对自己的前端进行了重建并采用了新技术。引导学生确立竞争意识，激发学生的爱国情怀和民族自豪感，激励他们奋发图强，为我国前端技术的创新发展而努力。

2 精选和甄别优良素材，坚定“四个自信”

Web 前端开发课程需要大量的实例和素材，选择、加工有价值的教学素材是课程思政教育很好的切入点，也是思想宣传工作的重要组成部分。通过精选包含中国传统文化和充满正能量的案例素材，学生在学习和操作过程中，感受到了传统文化的魅力，接受了传统文化的熏陶，培养文化自信。选取新闻类网站做案例，带领学生关注时事热点，了解国家大事，提高他们的政治意识、坚定“四个自信”。精选素材时需要注意素材的时效性，进行动态调整，例如今年的案例素材中可以引入新冠肺炎防控方面的感人事迹，增强学生的民族自豪感和大局意识等。

3 渲染网页实操中，提升审美能力

Web前端开发是以增强用户体验为中心的，用户第一眼看到的就是页面，页面设计好坏直接影响到用户对网站的兴趣。美观的页面，可以吸引用户关注、提升用户的体验感。一名合格的前端工程师，需具有较强的审美能力，才能高精度地还原UI给出的设计稿，甚至可将设计稿中无法呈现的部分有效地展现出来，省去了后期再进行调整所占用时间和精力，让网页体现出美学的力量。审美和设计能力不是天生就有的，要通过不断积累才会慢慢提高。因此在教学过程中，通过让学生欣赏各类主题中的优秀网站，分析其色彩搭配、排版设计的特色，思考这类主题网站为什么这样搭配色彩？换一种色彩效果又如何？介绍其设计过程中使用的方法，来提高他们对美的认知。鼓励学生多看、多思考，把握细节方面，优秀作品反复欣赏，审美能力就会慢慢得到提高。另外，还需要多加训练，一个主题的网页，可以尝试使用不同风格进行设计，然后进行对比，找出每版的优劣，再进行整合和修改。通过对比、分析，从多个角度、多个层次提高学生审美的范围和质量。

4 在能力训练项目中，培养工匠精神

李克强总理曾强调“鼓励企业开展个性化定制、柔性化生产，培育精益求精的工匠精神”，从职业角度上理解，工匠精神是一种职业精神、职业能力、职业品质的体现，是从业人员的在敬业、精益、专注、学习借鉴、创新等方面的表现。高职院校作为培养具有工匠精神技工的主要阵地，需在教学上通过优化课程设计，加入能力训练项目，注重学生工匠精神培育。

4.1 学习借鉴优秀网站的开发经验

由于学生缺乏开发正规网站的经验，在训练项目开始前，通往让学生浏览大量成熟优秀的网站，这些网站都具有结构布局清晰、导航明确，用户体验好以及敏捷的交互效果等特点。借鉴和学习优秀网站的设计理念、流程并加入自己的思考，思考别人是通过什么形式去规划网站内容，以及每一个阶段的表达方式。重点关注网站的结构布局、主题与风格、渲染效果、交互功能，并写出分析报告，归纳总结可为己所用的设计思路，使学生在项目训练过程中就更有方向性和目的性，快速提高自己的技能，丰富自己的想象力，拓宽了思路，激发设计灵感。加强了学生的学习和借鉴能力。

4.2 精益求精，编写规范有效的代码

Web前端开发中使用不规范方式写代码，将会影响网页浏览速度和适应性。例如，框架结构在早期建设网站经常使用，也有一定的优势。如果一个网站过多使用框架结构，会增加服务器的http请求，影响网页加载速度。而且网页中使用框架结构最大的问题是，主流的搜索引擎无法准确识别出框架中的文本、图片、超链接等内容，导致网站中很多内容无法抓取，这对网站来说无异于一场灾难。但如果网站有一些内容不想被搜索引擎抓取，或者不重要，可以利用框架包住这些信息。通过上述分析，让学生认清框架结构的优缺点，合理使用布局结构。在未来独立开发网站时规范编写代码，使代码结构合理、标记有效、注释优良。引导学生把每个当下的事情都做到完美极致，培养他们执着专注，沉下心来对作品不断完善，精益求精、一丝不苟，让自己的作品经得起考验和推敲。

4.3 勤学苦练，提升职业竞争能力

马克·吐温说“只要专注某一项事业，就一定会做出使自己感到吃惊的成绩来”。网站前端开发没有捷径可走，勤学苦练是根本。全身心投入，要不浮不殆、不急不躁。学生阶段要夯实基础知识，不要盲目追求新技术，踏踏实实将前端的核心技术掌握扎实，阅读和书写大量的代码。鼓励学生利用业余时间阅读W3C 的标准文档、ECMAScript 文档，深入研究HTML 结构的语义。为日后成为一名优秀的前端工程师做准备。

4.4 组建团队完成综合实训项目，培养团队合作、交流表达能力

在课程的综合实训教学环节中，根据学生学习能力的不同划分项目团队，组员根据实训项目的内容和个人优势扮演不同角色，各尽其职，分工合作，共同完成项目选题、设计制作、撰写项目报告及答辩。让每个成员都有参与感、价值感和成就感，提高他们探究式学习的兴趣。在各个环节实施过程中，需要调整团队与个人的关系、成员之间的沟通、项目时间分配，以及项目遇到瓶颈时如何解决等一系列问题，在攻克一个个问题中，磨炼他们的意志，强化团队意识，提高沟通交流能力。项目完成后，各团队通过答辩的方式将自己的优秀作品进行展示。通过自评、同学互评、教师评价，对所展示出的精益求精的精神给予积极评价，让职业能力得以深化。

5 充分发挥线上教学资源的思政教育作用

利用网络平台，搭建线上“课程思政”体系，利用线上教学资源进行思政教育。一是借用“职教云”平台，上传高质量、富含思政元素的可视化学习资源，进行知识学习和政治思想的继续教育。弥补课堂教学内容和形式的不足。实行线上线下混合式教学模式，突显了全程育人的必要性。二是开设线上培训讲座，拓展了教学时间与空间，让学生了解当前最前沿的、最实用的技术，关注本行业的发展动态和行业楷模的先进事迹。三是将理论学习时间从课堂教学中分离出来，将课上时间更多地用于学生的实操和实践中。四是组建线上专业社团，突破时间和地点的限制，将志同道合的成员凝聚在一起，不定期开展技术沙龙、设计大赛等活动，让成员之间充分交流，形成思想上的碰触和融合。五是搭建论坛、社区、微信群、QQ群等沟通平台，方便师生交流，为学生提供差异化指导，促进师生感情。

6 考取“1+X”证书，强化学生的职业技能

“1+X”证书制度是高职院校完成立德树人任务的保障，是提高职业教育适应社会发展需要的能力，满足培养德智体美劳全面发展技能人才的需求。考取Web前端开发职业技能等级证书，需要掌握相关技能的基础知识，了解相关的职业技能鉴定标准。教师在授课过程中将这些鉴定标准融入教学中，实现课证融合，使学生在学习实践过程中与岗位标准零距离接触，有利于学生在校期间掌握本行业最新技术，来强化学生的职业能力和实践能力，使学生在就业时能快速适应自己的工作岗位。

7 结束语

总之，结合Web前端开发课程自身的特点，在教学设计中深入挖掘思政元素，不断创新和改进，以隐形的方式潜移默化地对学生开展思政教育，实现专业课程的育人功能。思政元素的融入不能流于形式，脱离课程内容，出现“两张皮”的现象。课程思政教学设计，扩充了课程内容，使专业知识更具有灵魂，也为课堂教学方法的改进提供了新的思路。另外，也为专业课的教学指明了方向，提升了专业教师德育教育的水平，也使学生在课程学习和技能训练中，学会做人做事的道理，提高自身的职业道德素养。