与职业标准衔接的Web前端开发课程教学探索与实践

龚兰兰,凌兴宏

（1．苏州大学文正学院 计算机工程系，江苏 苏州 215104；2．苏州大学 计算机科学与技术学院，江苏 苏州 215006）

0 引 言

互联网行业发展迅猛,越来越多Web开发技术的应用出现在我们的生活中。Web应用开发技术成为计算机专业学生走上社会、专业对口就业不可或缺的一门知识和技术[1]。目前,国内许多高校将Web 开发技术等相关课程作为计算机专业学生的专业必修课。结合社会职业需求,将职业能力要求融入到课程体系中[2],进行课程建设的探索和实践,是当前应用型本科院校提升学生专业能力的方向之一。

1 Web前端开发课程现存问题

一个完整的Web应用开发所需技术一般涉及前端、服务器端和数据库3部分,因此从应用开发的角度来说,计算机相关专业的课程设置,不可能单靠某一门课程实现Web应用开发所需要的所有知识和技能的学习,而是一个课程体系的前后相辅相成。目前实现Web应用开发至少需要以下几门课程:前端开发技术(html,Css,JavaScript),服务器编程(语言类:C#,php,Java,Python),数据库技术(Mysql,Sqlserver),Web应用综合开发(框架编程)。前后课程的设置顺序和内容,要为最终完成一个Web应用而服务。

目前,许多院校设置的Web开发相关课程,重点放在服务器端编程的教学,忽略了对于前端技术的重点应用。苏州大学文正学院之前在计算机专业的课程设置中,Web开发类只有一门课程Web应用开发,在该门课程内容中综合了前端、asp.net和数据库的技术,学生对于前端技术毫无基础,教学过程中教师大部分的教学重点放在asp.net服务器端编程上,学生虽然能实现一定的功能,但是由于缺少前端课程的学习,最后提交的Web 项目的用户体验感不佳。作为Web应用开发的主要也是首要学习的课程,Web前端开发已经作为一门独立的课程,该课程目前存在以下的问题。

1.1 课程设置

在课程设置上,Web前端开发课程与其他课程教学之间互相独立,不具备前后的连贯性。如前文所说,Web应用开发需要一系列技术,因此相应的一系列课程的安排首先在时间上要具备合理性,前导和后续课程之间要具备连贯性。

1.2 课时安排

课时安排不合理,理论课和实践课的比例最初是3:1,每周3节理论课1节实践课。Web前端开发是一门实践性和应用性极强的课程,学习的主要手段就是需要多做、多练,因此这样的课时安排实践课时明显不足。

1.3 实践环节

在实践教学中,虽然使用了案例演示、任务驱动等教学方式,但案例的选择一方面大部分来源于教材,仅仅是围绕某个知识点进行的,各案例之间互不关联,缺乏连续性;另一方面案例也比较陈旧。此外,布置给所有学生的任务都是相同的,各任务之间也是相互独立的,各任务之前缺乏连贯性和整体性。对学生来说,仅仅是完成了几次分散的作业练习,不能形成一个完整的项目,而且相同的任务很难避免抄袭现象。

1.4 教学内容

课程内容上,主要的还是传统的html、Css和JavaScript技术,缺乏对新功能、新版本以及目前主流框架、工具的引入。

1.5 考核方式

考核方式还停留在以期末笔试为主的方式上,Web前端开发不同于其他语言编程类课程,很多内容需要靠实际运行效果才能判定学生是否掌握了相应的知识和技能,会做题不代表能开发出好的用户界面,不是在纸上写一写就可以下结论的,因此笔试作为主要的考核手段显得不合理。

教学效果无法体现学生动手实践综合能力和水平,只关注投入,缺乏对产出的重视。很多学生在学期结束后还不能做出一个完整、可用的网页;在毕业设计系统的界面设计部分也是无从下手,学生最后提交的Web 项目的用户体验感不佳;进入企业更是如此,基本上课内知识早就忘得差不多,无法满足职业能力需求,必须重新培训上岗。

2 教学探索和实践

Web开发技术的逐渐盛行,也随之引起高校的教学改革,结合社会职业需求,将职业能力要求融入到课程体系中,进行课程建设的探索和实践,是当前应用型本科院校提升学生专业能力的方向之一。

基于产出的教育(OBE)要求根据培养目标实现的条件设定毕业要求,按照毕业要求的达成设置课程体系,教学活动要支持毕业要求的达成[3]。更重要的是,毕业要求主要是要求学生解决问题,特别强调解决复杂工程问题的能力为“主要追求”。

结合社会职业需求和基于产出教育的理念,对Web前端开发课程教学从以下几方面展开探索和实践。

2.1 社会需求的调研

为更好地了解社会职业需求,对苏州22家IT相关企业从Web应用开发所需要的知识、技能和能力方面进行了调研。

(1)从开发类型上,22家企业中有20家企业的进行Web应用的开发,可见Web应用的开发的需求量仍然很大,学习Web开发技能仍旧是计算机专业学生走上社会、专业对口就业不可或缺的知识和技术;

(2)企业的岗位需求量最大的是前端开发工程师(如图1所示),可见Web前端开发课程开设的必要性;

图1 企业岗位需求数据

(3)前端开发技术中需求最大的是 JavaScript、Html5、CSS如图2所示,最流行的前端框架是BootStrap、Jquery、Node.js,这为Web前端开发课程的教学内容调整上提供了很好的参考依据;

(4)开发语言使用最多的是Java语言;

(5)服务器端框架使用较多的还是针对Java的 SpringMvc、SpringBoot和 Mybatis。

除此之外,还对目前企业较流行的开发工具、管理工具以及其他的知识能力等职业素养要求进行了相应的调研和了解。

2.2 思维的改变

教学的改革首先要求从思维上进行改革,对课程有新的认识,才能有新的计划,以及与之配套的具体措施。

作为应用型本科院校,计算机专业人才的培养应借鉴OBE(基于产出的教育)导向的教学理念,以培养满足社会需求的应用型人才为目标,以学生解决问题,特别是解决复杂工程问题的能力为毕业要求,课程设置、教学实践活动都要支持毕业要求的达成。

作为当前计算机专业学生走上社会、专业对口就业不可或缺的知识和技术,Web前端开发课程在被设为计算机专业必修课是非常有必要的。在课程学习伊始,甚至是整个过程中,教师要引导学生对Web应用有清晰、具体的认识,从软件项目开发的角度,让其了解到完成一个应用的开发需要哪些技术和方法,这些知识和技术由哪些课程或者课程的哪部分知识来完成,以及学习该课程后掌握的技能对未来的就业、升学等有哪些帮助,即所学习课程的作用和意义,帮助学生树立起明确的学习目标和动力,摒弃原有的盲目学习和应付交差的学习态度。

互联网思维逐渐兴起,深入各行各业,对年轻人来说具备互联网思维也成为必备职业素质,尤其是IT行业。作为计算机专业的学生,具备互联网思维,不仅能提升学习效率,提高问题解决能力,更是信息技术行业不可或缺的就业必备技能[4]。

目前,互联网思维主要可以包括9个部分[5],在Web前端开发课程中主要引入其中5个思维:用户思维、简约思维、极致思维、迭代思维和社会化思维。

在教学过程中,教师要把互联网思维,潜移默化地灌输给学生,培养他们自己用互联网思维去思考和解决问题的能力。对于计算机专业的学生,这点尤为重要。

2.3 教学内容的重新设计

首先,根据企业调研内容以及当前Web前端开发的主流技术,可进行如下教学内容的调整:①引入Html5的页面元素、多媒体技术、定位技术、本地存储等新功能;②在JavaScript部分加入了BOM、DOM的知识;③加入对Ajax技术、 Jquery的介绍和使用;④对于市场流行的一些前端框架技术,选择了最受欢迎的Bootstrap,引导学生学习和使用框架进行Web开发。

其次,注重课程内部各部分内容的衔接。在不同阶段的教学案例的选择上,选择具有连贯性的案例,经过几个不同案例的完成,最终离一个完整的网站设计越来越近。

第三,加强与其他课程的前后衔接。按照Web前端开发、数据库和Java(或C#、Python)编程语言、Web应用框架开发的顺序设置前导、后续课程,保证学生具备相应的课程知识后能进行Web综合开发,最后能顺利地完成毕业设计的项目。除了时间上的先后顺序,在教学素材上的积累也可以进行前后衔接,比如,Web应用框架开发的课程可以直接在前端开发课程中做好的网站界面的基础上迭代,进行服务器端的开发,进行前后端整合,省去了前端的时间,也实现了前期成果的再利用和优化,最终形成一个完整的Web项目。这就使学生把不同课程的学习连贯起来,学以致用,提升解决问题的能力。

最后,理论实践课时的调整。由于Web前端开发是一门操作性和实践性极强的课程,教师有再多的理论讲解和演示都无法保证学生对知识点和技术的掌握、动手能力的提高,因此可将理论实践比由原来的3:1,先后调整为2:1和1:1,逐步提高实践课时的比例。

2.4 教学方式、手段的改变

关联性案例教学。案例不再局限于教材,而是根据当前大多数网站通用的一些功能和效果(如下拉式菜单、图片轮播等),从网络、企业、个人项目等多方面收集案例资源;不同于以往的多个分散独立的案例,教师选取一些具有关联性的案例(可以来自于同一个项目的不同部分)进行相应知识点的演示教学,当所有的案例完成后,基本可以完成一个Web项目前端的主要部分。

迭代式项目教学以项目为主导,任务为驱动。根据迭代思维,不要求学生一次性做到完美。迭代思维就是一种循序渐进的开发方法,它允许产品有所不足,允许不断试错,在持续迭代中完善产品。在教学任务设计时,可以从简单、基本的任务开始,然后逐步迭代,循序渐进,增加任务难度和复杂度,允许小步、快跑、试错,让学生在循序渐进完成任务的过程中逐步掌握知识和技能。

互联网思维下的任务式驱动,是将一个完整的Web项目拆分成多个子任务,每个任务对应相应的教学知识点,鼓励学生用用户思维,从用户角度去思考需求和功能,进行设计、实现;按照简约思维,用户界面设计要尽量外观简洁,操作流程简化,提高使用效率;用极致思维去完成每一个细节,功能不求多复杂,但是要简约、好用,哪怕一个按钮,也不能随便敷衍了事。

2.5 工程实践

首先,将实践课的上课时间由原来每2周1次、每次2课时调整为集中1周全天实训,便于学生集中精力专注于项目开发。

其次,引入企业讲师,与校内教师联合指导项目开发,同时引入企业真实项目案例作为实训任务:一方面,让学生了解、补充课外的行业一线技术知识,体验企业项目开发流程,加深职业认知,为以后的就业做好准备;另一方面,也能让校内教师及时有效地和企业工程师进行学习交流、掌握当前社会需求,努力做到不与行业脱节。

第三,基于OBE教学理念,目标是培养具有分析问题解决问题能力的应用型人才,实践环节无疑是培养学生全面解决复杂工程问题能力最好的环节。过去,项目实践基本是由教师对整个Web项目进行分析、设计,然后进行某一功能模块的具体操作演示,接下来学生依葫芦画瓢完成剩下的部分,虽然最后能够完成任务,但是学生缺乏对项目整体的分析、设计的锻炼,只能进行执行层面能力的锻炼。

不同于过去的模仿式执行任务,现在在任务驱动的项目化教学下,更多的是给学生布置任务,让学生自己去分析要完成任务必须解决哪些问题,然后进行模块设计,最后具体实施。在整个过程中遇到问题、困难的时候求助于老师。学生最后提交的成果不仅仅有自己的Web项目,更要包含开始的需求分析文档和最后的实践总结报告。这样的实践方式,不仅能够提升学生动手做的能力,更能够锻炼学生的整体设计、解决问题的能力。

2.6 考核方式

鉴于Web前端开发较强的实践性,逐渐降低笔试成绩的比例,以实践考核成绩为主。

考核内容主要是学生的Web项目成果演示和答辩,由实际展示效果和问答情况检测学生对Web前端开发技能的掌握情况。如前文所述,基于OBE教学理念,能够分析问题、设计方案、解决问题的综合应用解决能力的培养是目标。因此,除了考核学生做的成果,需求分析、实践报告也是考核的部分,以此检测学生的整体解决问题的能力。

考核方式不再是期末一锤定音,而是进行迭代式、阶段性考核,根据教学进展,在一个学期不同阶段设置4～5个考核点,每次考核通过一个功能性任务检测学生掌握情况。几次考核任务的选择上,具有关联性和连贯性,经过几次阶段性考核任务的完成,学生基本上也是完成了一个Web项目。这样的考核方式,一方面更加合理,另一方面也能给督促学生注重平时的锻炼和学习,避免期末抱佛脚突击复习过关的侥幸心态。

3 结 语

与职业标准衔接,培养独立解决问题的能力是Web前端开发课程改革的目标,从思维认知、教学内容、教学方式、工程实践和考核方式等多方面进行了探索和实践。

Web前端课程的教学不仅仅是某些语言、工具的使用,更重要的是思维,是解决问题能力的锻炼和提升。不仅要求教师注重自身知识储备、技能的更新,还要求教师自身对课程体系有比较清晰的认识,加强学生对行业的认识、职业认知的引导,同时在教学过程中,不拘泥于现有资源,积极引入其他有效教学资源,如网络在线课程,企业技术人员等,只要有利于学生学习知识,掌握技能,提高解决问题的能力,都可以合理利用。

结合社会职业需求,解决复杂问题能力的培养,还处于探索和初步实践阶段,还需要更多的尝试、努力和实践,笔者接下来会继续从教师和学生以及社会多方面进行继续探索和实践,也期望看到更加有效和实际的改善。