Web前端开发的项目化课程教学实践

霍文英 王振辉 白鸽

[ 作者简介 ]

霍文英，女，河南洛阳人，洛阳科技职业学院，助教，硕士，研究方向：计算机应用技术。

王振辉，男，河南洛阳人，洛阳科技职业学院，助教，本科，研究方向：计算机应用技术。

白鸽，男，河南洛阳人，洛阳科技职业学院，助教，本科，研究方向：计算机网络技术、数据库应用。

[ 摘要 ]

互联网技术的发展推动了各行各业的发展，特别是随着移动智能终端的普及和使用，让各类购物网站、小程序等得到了广泛应用。在这些应用中前端技术起着重要作用。因此，我国Web前端人才需求激增，这也为职业院校专业开设和人才培养提出了新要求。根据教育部要求，要针对职业技术院校，将学历证书和职业技能等级证书有效结合，探索实施“1+X”证书制度。本文以Web前端开发专业课程教学实践为例，阐述Web前端开发职业资格证书标准，项目化课程设计、教学方法与手段、课证融合、有效的评价机制等，对Web前端课程教学情况进行探索，旨在为社会培养更多的实用性人才。

[ 关键词 ]

Web前端开发;课证融合;项目化课程

近年来，社会对职业教育发展广泛关注，特别是中国在从制造大国向制造强国迈进的过程中，需要更多技能型的高素质劳动工人。“职教一人，就业一人，脱贫一家”，高职院校就是为社会发展培养各类技能人才，培养“先会后懂”人才，提倡“校—企—校”模式，坚持产教融合、协同育人。因此，在国家新一轮改革发展过程中，高职院校大有可为。Web前端开发是当前计算机应用专业的热门就业方向。Web前端开发技术具有更新速度快、市场人才需求量大等特点。对于高职学生来说，Web前端开发接受度高，具有高薪吸引力，能够很好地服务本地产业。因此，高职院校的Web前端开发职业教育，从专业设定到课程建设再到课堂实施，都应紧密围绕当前社会企业实际需求和IT行业技术发展水平，紧密结合一线企业技术规范，以达到为企业输送“毕业就能上岗”的Web前端开发人才。

从国家当前的制造业发展趋势来看，对于技能型人才需求量大，高职院校也结合社会实际不断更新专业内容和方向，以期适应经济社会的发展。但在实际工作中发现，一些高职院校虽然有较为前沿的专业，但是缺少对应的熟练的教师。比如高职院校开设了Web前端开发专业，但是熟悉专业核心课程的教师很少，基本都是从计算机其他专业转任过来的，基本的理论教学还能应付，但是一些实践教学很难指导。再如，由于专业新，发展时间短，也缺少相应的高质量教材。此外，从学生就业情况看，学生的技能水平还达不到一毕业就能上岗的标准。因此，从社会和企业需求来看，需要掌握相关专业知识，并具备一定前沿实践技能的大学生才是企业需要的毕业生。因此，加强高职院校在校生的技能培养是关键。教育部提出了“1+X”证书制度的要求，各地开展了“1+X”证书制度试点工作，在人才培养过程中对学校教师和学生都提出了明确要求。比如，对于高职院校要求双师型教师不低于50 %;并要求加强校企合作，发挥企业专业技术人才的优势，在学生实习实训、技能培训、教材编写等方面要吸纳企业技能人才参与。同时对学生提出了“1+X”证书的要求，这在政策上为高职学生技能的提高提出了明确方向。与此相关的职业技能等级证书也在持续发布，其中就包含Web前端开发证书。Web前端开发证书是对计算机专业学生Web前端开发能力的判断依据，对于学生来说是证明自己学有所成的有力方式，对于教师来说，统一了教学评价的标准，也能够有效提升教学的效果。

1 Web前端开发课程教学现状分析

1.1 在教学目标设计上，课程教学目标多以“掌握、理解、了解”等进行描述，注重对知识掌握程度的要求，弱化了对学生能力培养的要求。

1.2 在教学模式上，不少教师仍然按照传统“填鸭式”开展教学，课堂还是以教师为中心，注重教师教了多少而忽视学生学了多少，重知识的传授和获取，轻知识的加工和问题的思考，学生只需按部就班地“依葫芦画瓢”，就可以完成相应的学习。

1.3 在教学内容方面，该课程主要包含了HTML语言、CSS样式和Javascript等前端开发基础知识，而目前主流的前端框架技术却很少涉及。此外，Web类课程前后衔接不够，前后端交互开发的教学案例较少，导致前端页面设计和后端功能开发成了“两张皮”，不少学生不能将Web前后端开发技术进行有机整合，Web实际项目开发能力较弱，阻碍了知识向能力的转化。

1.4 在考核方式方面，不少教师仍然采用“课堂授课—考前复习—试卷笔试”为主的传统考核模式，考核标准还是以知识考核为主，缺乏对学生能力达成的考核。

1.5 在课程教学总结中，每次课程结束后虽然也撰寫相关教学总结，但缺乏将总结材料中的教学建议落实在后续教学中的保障机制，没有形成有效的持续改进闭环。

2 Web前端开发职业资格证书标准

Web前端开发专业技术技能人才培养目标分为初级、中级、高级三个等级。其中获得三个等级的证书，必须满足相应课程的学时要求，并达到课程要求的能力，高级证书持有者需具备复杂网页开发和网站架构设计规划的能力;中级证书持有者需具备动态网页设计开发的能力;初级证书持有者需具备静态网页开发的能力。

3 计算机应用技术中的Web前端开发课程体系

Web前端开发课程是计算机应用技术专业的一门专业必修课。通过本课程的学习，学生在项目案例开发过程中掌握并灵活应用HTML5前端技术、PHP的基本语法知识、MySQL数据库基本原理知识，最终以综合项目进行教学效果展示。为进一步学习Web前端开发相关课程打下基础，为学生就业做好知识储备和项目积累。课程的开设依据是计算机专业人才培养目标和相关职业岗位的能力要求，对本专业所面向的PHP开发程序员等岗位所需要的知识、技能、素质目标的达成起支撑作用。在课程的设置上，先修课程有“网页设计基础”与“数据库原理”，本课程为后续课程“HTML5应用高级”“专业技能实训3”打下网页站点管理、基本布局及后台交互方面的基础，并为以后能顺利完成毕业设计做好充分准备，为就业增加成功的因素。

4 教学案例分析

本课程实践性强，教学过程中以学生为主体，教师为主导，讲练结合，在做中教，在做中学。每章每节均有精选案例引入，结合案例介绍相应知识点，提高学生的学习兴趣。以提高课堂教学效果为目的，创建“教学做评”的课堂教学模式，围绕一个个精心设计的案例展开教学，遵从“从实例到理论，从具体到抽象，从个别到一般”的认知规律，在问题的解决中提升学生的成就感和自信心，师生互动，创造快乐课堂氛围。

不同专业的课程教学模式不同，对于Web前端开发课程来说，可以采取任务驱动法教学。通过设定一定的任务，将学生所需要训练的技能融入任务，让学生在完成任务的过程中提高技能。也可以采用问题导入的方式，引导学生回忆旧知识，导入新课程。在分析案例解决问题的过程中可以采用不同的方式。方法一：先由教師分析问题，并做示范演示，然后由学生进行实操，完成案例及知识学习，最后由教师做出评价并对共性问题进行集中讲解，学生反思并对自己在制作过程中遇到的问题进行改进。方法二：教师先对案例稍作分析，由学生直接尝试解决问题，完成案例，学生尝试之后教师再集中进行评价讲解，然后再由学生改进自己制作过程中的问题，进行完善。

“教学做评”属于比较传统的教学方式，但是也能够激发学生的学习热情。从案例的导入、教师的分析、学生的尝试、教师的点评，层层递进，步步深入，逐步完善，不断优化，从而在学习过程中掌握新知识，解决新问题。在提出问题、解决问题的反复过程中，激发学生不断探求知识的兴趣，而问题的逐步解决能够提高学生的学习信心。这样的教学过程能够不知不觉地加深学生对专业知识的掌握，不断提高各项技能的训练，最终达到培养学生熟练技能的目标。

4.1 教学内容设计

融合“1+X”认证标准中Web前端开发证书（中级）考点需求，设定不同难度等级的项目，情境化模拟企业项目，真实体验软件开发的全过程，与实际生产接轨。从PHP开发程序员岗位出发，分析岗位中的典型工作过程，将整个工作过程进行重复训练，设定了三个层级的项目。

（1）基于HTML的淘宝商品信息展示页面。

（2）基于HTML5+PHP+MySQL的淘宝商品信息展示平台客户端制作。

（3）基于HTML5+PHP+MySQL的淘宝商品信息展示平台管理端制作。

项目内容上紧密衔接，难度递增，能充分涵盖本课程的全部知识点。在教学中，项目化贯穿，任务性驱动，提高学生的实战能力及学习成就感，最终提升对学生学习的兴趣。本课程贯彻“做—演—用—学”一体化教学理念，学生课前做，课中演，课后用，学习贯穿始终。以学生为主体，教师为主导，充分利用在线优质资源，最终实现教学目的。

4.2 教学方法与手段

本课程主要采取任务驱动教学法、课堂讨论法、合作学习法、教师讲演法、情景教学法。本课程以淘宝商品信息展示平台作为贯穿项目，以子任务方式实现每堂课的教学目标。每个子项目开发背景中，课程采用情景引入法，客户提出软件需求，学生作为客户经理进行软件产品需求分析，并模拟企业PHP开发程序员全程跟踪软件开发的全过程。主题讨论、合作学习，促进生生之间友好竞争，共同进步。课中，针对重难点，采用教师讲演法，学生认真做好笔记。

4.3 教学载体设计

以淘宝商品信息展示平台为贯穿项目，分三个子项目，子项目一：基于HTML5的淘宝商品信息展示页面制作;子项目二：基于HTML5+PHP+MySQL的淘宝商品信息展示平台（用户端）制作;子项目三：基于HTML5+PHP+MySQL的淘宝商品信息展示平台（管理端）制作。子项目之间关联紧密，能力螺旋递进，涵盖Web应用系统开发的综合知识和技能点。

5 结束语

对标“1+X”Web前端开发（中级）认证考试其中对PHP技术的掌握与应用要求，融入项目教学中，涵盖完整的考试知识要点，有利于帮助学生顺利通过Web前端开发中级证书考试。教学项目从实际项目中来，情景化模式导入，学生有代入感，作为一名企业程序员的角色来完成学习任务，有利于学生提前进入工作角色，对自己提高要求。在教学中，邀请企业工程师为学生讲解企业软件开发的典型过程、技术发展趋势，拓宽学生的技术视野。项目安排难度由简单到复杂，帮助学生获得学习的乐趣与成就感。

参考文献

[1]郑根让，史志强，何成，等. 1+X证书制度下以书证融通重构专业核心课程体系：以WEB前端开发证书与软件技术专业为例[J]. 职业教育研究，2020（1）：12-17.

[2]肖静. “1+X”证书背景下中职信息专业教学内容的优化：以Web前端开发证书和网页设计与开发课程为例[J]. 西部素质教育，2020，6（11）：124-125.

[3]李斌. “1+X证书”育人机制下高职教师职业能力提升策略研究：以Web前端开发为例[J]. 当代教育实践与教学研究，2020（13）：134-135.

[4]赵革委，闫军. “1+X”证书制度下继续教育人才培养模式探析：以陕西工业职业技术学院软件技术专业Web前端开发证书为例[J]. 陕西教育（高教），2020（9）：54-56.

[5]李月峰. “1+X”证书制度下专业课程体系融合与重构探索：以软件技术“Web前端开发”专业为例[J]. 电脑知识与技术，2020，16（28）：134-135，150.

[6]刘德阳，刘奎，王广军. Web前端开发课程项目化教学改革与实践[J]. 智库时代，2019（36）：181-182.

[7]任远. “1+X证书”背景下的Web前端开发教学实践[J]. 网络安全技术与应用，2021（2）：85-86.

[8]魏欢. 前端开发，数字媒体应用技术：浅析互联网下教学一体化Web前端开发课程的教学模式[J]. 科学咨询，2020（7）：38.

[9]王婷. 《前端开发框架》课程项目式教学的改革与实践[J]. 数码世界，2020（8）：135-136.

[10]宋丽萍. 互联网+视域下C-PBL混合式教学方式的实践应用分析[J]. 北京印刷学院学报，2020，28（3）：128-131.