基于就业导向的HTML5前端开发课程教学改革实践

陈霞，吴东

（岭南师范学院信息工程学院，湛江 524048）

基于就业导向的HTML5前端开发课程教学改革实践

陈霞，吴东

（岭南师范学院信息工程学院，湛江 524048）

目前就业市场对Web前端开发工程师需求旺盛，但地方高校计算机专业开设的与此岗位需求相关的课程教学内容设置不合理，教学模式与企业需求不匹配，导致一方面是计算机专业毕业生就业不理想，而另一方面企业无法招聘到适合前端开发岗位需求的毕业生。为此，基于CDIO工程教育模式理念提出进行课程就业导向定位、精化教学内容，实施项目驱动的教学，对学生的课程学习实行多元评价的教学改革，在教学实践中构建校企双师共育模式，大幅提升学生的综合工程实践能力和就业竞争力。

前端开发；就业导向；CDIO；教学改革

0 引言

2005年以后，互联网进入Web 2.0时代，网站的前端发生了翻天覆地的变化，前端开发成为一个热门行业，市场需求旺盛。然而，在地方高校计算机专业教学中，系统针对前端开发岗位需求开设的课程不多。绝大部分的普通高校计算机专业仍以学术型人才培养为主，真正实现应用型人才培养的高校很少，导致大量计算机专业毕业生就业难、就业岗位对口率低、平均工资水平不高，而大量的IT企业却招不到符合岗位需求的计算机专业人才[1-2]。

前端开发作为一个新行业，涉及广泛的知识体系结构，相关技术理论知识不断发展更新，市场应用发展迅速，加之区域发展特色不同，各个高校中与前端开发相关的课程开设参差不齐，还存在以下的一些问题：

（1）课程教学内容设置不合理，知识结构零碎，缺乏系统性。

在当前计算机专业本科生教学体系中，系统针对前端开发的课程不多，优秀的教材、教学资源相对较少，一些人简单笼统地将网页设计、网站开发、平面设计、动画设计类课程等同于前端开发，实际上，前端开发涉及综合技术的应用，涵盖了更多的内容。在以往的教学中，与前端开发直接紧密相关的网页设计、平面设计、网站开发等课程通常基于所见即所得的IDE集成环境进行教学。IDE集成环境入门简单、容易实现网页制作及效果，但在教学中过分依赖IDE集成环境将导致学生不清楚页面实现及运行的本质。同时，这些课程在教学内容，教学方法，教学实践等方面相对滞后，学生通过这些课程掌握和学习到的前端开发技术知识相对零散，没有形成完备的前端开发知识体系框架。随着人们对用户体验的要求越来越高，前端开发的技术不断更新，前端开发的难度越来越大，要把学生培养成为一名优秀的前端开发工程技术人员，在课程教学的知识体系上不仅要有广度，还要有深度，前端设计课程教学需要与时俱进，不断革新。

（2）课程教学模式与岗位需求有较大差距。

在应用型人才培养的浪潮下，一些高校计算机专业基于市场前端工程师岗位需求设置了相应的课程，但在课程教学中，未将课程内容与岗位需求紧密结合，课堂教学仍然采用以教师讲授，学生学习为主的传统教学模式，教学侧重学生对知识的记忆和重复应用，学生无法真实有效地参与问题的讨论，缺乏自主学习能力的培养，学习质量不高；在实践教学环节，教学案例过于浅显，验证性的实验项目缺乏与实际需求的有效结合，学生缺乏创新能力和的工程实践能力的培养，导致大多数学生学习完相关课程后，对相应的岗位要求仍无所适从。

针对上述问题，我们在HTML5前端开发课程教学中，根据IT行业前端开发的特点和市场岗位需求，以CDIO工程教育理念为指导进行课程教学改革实践，基于就业导向进行课程定位，精选教学内容，改革教学模式及评价机制，实施了以项目驱动的教学，从传统的以教师为中心“教给学生知识”转变为以学生为中心“教会学生学习知识”，在教学中不仅注重让学生掌握基础理论知识技术，更注重对学生工程实践能力、自学能力、创新能力的培养，使学生成为真正符合市场需求的前端工程技术人才。

1 以就业为导进行课程定位和教学内容改革

计算机行业的快速发展提升了IT就业市场对求职人员的专业技术水平和综合素质的要求。在提升学生就业率及培养应用型计算机人才的背景下，计算机专业的教学应从就业需求出发，在要求学生掌握必要的理论知识的基础上，需要加强实践教学环节以提高学生实践能力和就业竞争力[3]。在HTML5前端开发课程教学中，通过分析市场对前端开发岗位的职业技能需求，认清当前的课程教学与企业用人需求之间的差距，从前端开发就业需求出发，以就业为导向进行课程定位，基于CDIO理念合理组织、安排、优化教学内容，在教学中与东软睿道教育信息技术有限公司合作，引入企业实际运行的项目案例进行教学，企业工程师直接参与课程的实践教学环节，对学生进行校企联合培养，针对前端开发项目在企业工作环境下面临的现实问题，引导学生有效解决问题，有效调动了学生的学习积极性、主动性，激发了学生的学习兴趣，通过培养学生自主学习、创新实践的工程技术能力，使学生掌握的知识技能满足企业前端开发岗位要求，有效提高学生的就业竞争力。同时，在教学中积极引导学生参与IT科技节、蓝桥杯、ACM比赛等校内外的比赛，在比赛中锻炼学生的工程实践能力。

在前端项目开发中涉及基础理论知识（如：HTTP标准、W3C标准和ECMAScript标准HTML5、CSS3、JavaScript、设计结构、设计模式等），类库及框架（JavaScript、jQuery、jQuery Mobile、Bootstrap、Pure、Se-mantic UI等），编码开发环境、构建工具及包管理器（如：Hbuilder、WebStorm、Sublime、Atom、VS Code、Node JS、NPM、Bower、Git、Grunt等），运行环境（如：浏览器兼容性、响应式布局、Web安全性、性能优化）等广泛的内容，在有限的教学学时内，要有效的教授学生学会灵活掌握运用这些知识技能，教学内容必须进行精简和取舍，有所侧重，不能面面俱到。通过分析目前前端项目开发中采用到的重要核心技术，结合学生已有的专业技能基础，确定本课程的教学内容分为以下3个层次：

（1）前端开发基础知识。此部分介绍前端开发环境、测试、运行环境的搭建和配置，重点讲授HTML5、CSS3，通过这一部分内容的学习，学生掌握前端页面制作的基础知识，可实现在前端开发、测试、运行环境中完成页面的编码、测试、运行，为下一层次内容的学习打好基础。

（2）脚本及类库框架的学习。此部分重点讲授JavaScript、jQuery、jQuery Mobile、Bootstrap框架4个主要内容。在这一阶段的学习中，学生掌握面向PC及移动端的不同平台实现前端项目的设计开发、测试、运行，掌握响应式布局、页面的性能优化实现、浏览器兼容性问题的解决机制。

（3）前端开发应用。此部分基于已学的内容实现构造App和移动网站，这部分内容将界面设计、框架布局、开发环境、运行环境、性能优化等内容结合在一起，引导学生开发出综合性较强的应用系统，培养学生的工程实践能力和综合运用知识的能力。

2 改革教学模式，提高学生的就业竞争力

CDIO分别代表构思（Conceive）、设计（Design）、实现（Implement）和运作（Operate），它以产品研发到产品运行的生命周期为载体,让学生以主动的、实践的、课程之间有机联系的方式学习工程。CDIO工程教育理念倡导以综合的培养方式使学生具备工程基础知识、个人能力、人际团队能力和工程系统能力。近年来，基于CDIO理念的项目驱动教学模式已成为工程教育领域公认的发展方向，得到了广泛的应用[4-7]。HTML5前端开发课程在课堂理论教学和实践教学中，基于CDIO工程教育理念实施项目驱动的教学。在课堂教学中，引入实际的企业项目作为教学案例实施教学，在实践教学环节通过任课教师和企业工程师共同指导学生实施完成项目培养学生的协作创新、自主学习的能力和综合的工程实践能力。

在HTML5前端开发课程教学中以项目驱动来实施教学内容，通过讲解、演示、操作实现一个来自企业实际运营的项目案例，深入分析讲授各个基础知识点的理论及应用，辅以多媒体幻灯片的手段与学生交流、互动，使学生掌握理解基础知识，灵活运用各种技能。项目依据CDIO的思想，按照从构思、设计到开发的工程化过程进行实施，涵盖课程的各个相关知识点，通过项目的教学，重点培养学生对基本知识技能的掌握，避免目前一些开发设计类课程教学重实践、轻讲授的不足。

在HTML5前端开发课程实践教学中实施项目驱动的教学，旨在利用学生已掌握的知识技能有效解决问题，提高学生的学习积极性、主动性和创新能力。实践教学中采用“提出问题→分析问题→解决问题涉及到的知识技能→解决问题可采用的方法与工具→项目具体实施→项目的实践总结→项目的拓展”的框架进行。实践教学环节的项目也来自企业实际项目，由企业工程师和任课教师根据课程教学的需要和学生实际学习进度进行设定并指导学生完成。实践环节注重项目过程的管理，学生按照“构思－设计－实施－运行”的步骤完成项目。项目开发遵循企业实际的开发要求，按照企业工作环境运作，学生分成不同的项目小组，组内设置组长，小组成员以团队的方式运用所学知识进行项目开发；每个小组以实际企业的团队管理方式进行管理和考核。实践教学项目的具体流程实施如下：

（1）明确任务要求。实践教学环节中首先由指导教师讲解项目从提出、立项、需求分析、系统设计、编码到测试、验收、维护过程中所需的规范化文档；代码遵循的统一编码规范；团队需要完成的工作及需要注意的问题。

（2）制定项目任务书。项目小组针对需要完成的项目进行资料收集、内部讨论，制定项目任务书，每个小组分别论述自己的项目分析过程及结果，由指导教师和其他同学提出意见和建议；各项目小组完善修订制定项目任务书后进行项目需求分析，撰写完成需求说明书。

（3）项目设计。各个小组每位成员根据项目的任务书和需求说明书进行独立思考设计，给出项目的实现方案，小组中评选出最优的设计方案作为参考完善设计后进入下一阶段工作。项目设计阶段锻炼每个学生的分析能力，强调独立工作和团队协作的有机结合，力求使学生达到前端工程师应具备的设计能力和自主学习能力。

（4）项目实施。实施环节侧重于项目功能的实现，项目小组团队成员按照预设的目标进行工作量划分，并按照团队管理的基本原则进行人尽其才，公平、透明的原则进行管理。指导教师在实施阶段的工作集中于项目共性问题的分析解决及项目进度的检查督促，针对项目开发中遇到的具体问题，教师给予必要的帮助指导，启发引导学生通过自主学习寻找到解决问题的方法，但不提供问题的具体解决方案。这一阶段培养项目小组团队成员之间有效配合、沟通的能力，学生的自主学习解决问题的能力和团队合作意识将大大增强。

（5）项目测试、运行。此阶段的目的是验证、改进现有的项目，提高优化系统性能。针对测试或运行阶段出现的问题，通过小组讨论或指导教师启发，由学生自己分析错误并找到解决问题的方法。在项目基本功能实现后，教师引导学生进一步拓展系统功能，鼓励学生进行个性化创新设计。

CDIO模式下要求将学生的基本个人能力、人际能力、产品、过程和系统构建能力，以及学科知识纳入专业考核之中，实现对学生全面的综合评价。在HTML5前端开发课程教学中，对学生的课程学习成绩评价机制进行改革和优化，从“闭卷笔试＋平时成绩”转变为多元化的考核，课程的成绩由平时成绩和期末成绩两部分构成。平时成绩部分侧重考核学生对基础知识技能的熟练掌握程度，突出个人技术能力的考核，平时成绩占30%，平时成绩由任课教师评定。项目完成后的成绩作为期末成绩，实施项目过程考核+行为考核的综合评价模式，期末成绩占70%。过程考核参照企业的管理方式，进行项目工作总结和评比，采用项目作品评价+答辩评价的形式，使学生在工程基础知识、个人能力、人际团队能力和工程系统能力各方面达到课程教学目标的要求，缩短学校教学与企业实际就业岗位要求的差距。项目作品评价采用企业工程师+任课教师+小组互评相结合的方式实现。评价给出的指导性的意见将反馈给学生，以促进项目的完善改进。答辩评价是指导教师对小组成员掌握的基本理论知识技术及项目开发中采用的知识技术进行提问，根据学生的回答情况进行评价考核。行为考核针对学生在项目开发过程中的团队合作交流、沟通能力、出勤及文档、代码规范性的评价考核。

3 结语

本院通过与东软睿道合作，在2013级、2014级计算机专业及软件外包专业本科生的教学中开展实施基于就业导向的HTML5前端开发课程教学改革实践，现已取得初步成效，与2012级、2011级相比，学生参与与本课程直接相关的各类比赛的比例提升了49.7%，获奖率提升了21.5%，学生在企业的实习平均成绩高了10%，学生的自主学习能力、创新能力、前端开发的工程实践能力大大提高，市场就业竞争力大幅提升。

实践证明，基于就业导向进行课程定位，实施校企双师共育，实践CDIO工程教育理念的项目驱动教学和多元课程评价机制，学生能有效掌握前端开发的相关知识和技术，具备分析问题、解决问题的综合实践能力。

前端开发岗位要求将随着技术进步和市场的需求不断变化，因此，在今后的HTML5前端开发课程教学中必须紧跟技术发展前沿和市场需求，不断完善、优化课程教学，进行课程改革探索实践。

[1]张仕学,王力,张明富等.基于就业质量的计算机专业人才培养评价模式[J].计算机教育，2015(10):14-17.

[2]麦可思研究院.2015年中国本科生就业报告[M].北京:社会科学文献出版社，2015:97-98.

[3]马晓梅,张剑飞,乔付.CDIO模式下高等工程教育的改革与探索[J].计算机教育，2010(12):132-134.

[4]郭小勤，曹广忠.基于项目的CDIO理念在课程教学中的应用[J].实验科学与技术，2010,8(3):83-85.

[5]邵欣欣,王晓煜,蒋晶晶.CDIO理念下的Java课程项目改革研究[J].计算机教育,2013(12):26-32.

[6]袁嵩,彭冰冰.基于CDIO的软产人才培养模式研究[J].现代计算机(专业版)，2016(16):13-15.

[7]崔亚楠,胡艳华,韦灵.CDIO模式下计算机专业实践教学改革策略研究[J].现代计算机(专业版)，2016(12):7-9.

Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Em p loyment Orientation

CHEN Xia，WU Dong

（School of Information Science and Technology，Lingnan Normal University，Zhanjiang 524048）

TheWeb front-end development engineers are in great demand in today's jobmarket,however,the teaching contentof the HTML5Web front-end development courses in local universities computer professional is unreasonable,teachingmode and the enterprise requirements do notmatch,resulting in the graduate studentsmajoring in the computer is difficult to find suitable jobs after they have graduated from colleges,but the enterprises don’t recruit suitable for front-end developmentneeds of the postgraduates.Therefore,based on the concept of CDIO educationmodel,proposes the employmentorientation of the course,refine teaching content,implement project-driven teaching, carries out themulti-evaluationmechanism of curriculum,and constructs themodel of enterprise and college dual teacher education to enhance students'comprehensive engineering practice ability and employment competitiveness.

Front-End Development;Employment Orientation;CDIO;Teaching Reformation

1007-1423（2017）12-0029-05

10.3969/j.issn.1007-1423.2017.12.008

陈霞（1976-），女，贵州六盘水人，硕士研究生，讲师，研究方向为移动应用开发、数据挖掘

2017-02-28

2017-04-15

广东省高等学校教学质量与教学改革工程项目（No.ZSJG1205）

吴东（1981-），男，广西北海人，硕士研究生，副教授，研究方向为计算机网络、数据挖掘