“双高”建设背景下“1+X web前端开发方向集中性实训”课程教学改革与实践

“双高”建设背景下“1+Xweb前端开发方向集中性实训”课程教学改革与实践为落实《国家职业教育改革实施方案》，带动职业教育持续深化改革，强化内涵建设，实现高质量发展，2019年3月教育部、财政部发布《关于实施中国特色高水平高职学校和专业建设计划的意见》，明确了“双高”建设的总体要求、改革发展任务和组织实施。“双高”建设为职业教育服务国家战略、融入区域发展、促进产业升级，为建设教育强国、人才强国作重要贡献，为职业教育推进产教融合、校企合作，聚焦高端产业和产业高端指明了方向[1]。为深化复合型技术技能人才培养培训模式改革，借鉴国际职业教育培训普遍做法，2019年4月国务院关于印发《国家职业教育改革实施方案》（简称“职教20条”），提出构建职业教育国家标准，明确启动1+X证书制度试点工作[2]。实训课程在整个高职教育中举足轻重，1+Xweb前端开发作为“双高”校—福建船政交通职业学院软件技术专业群的一个方向，其下集中性实训课程在夯实学生可持续发展基础，鼓励高职学生在获得学历证书的同时，积极获得相关职业技能等级证书，拓展就业创业本领，缓解结构性就业矛盾方面起着重要作用。集中性实训课作为福建船政交通职业学院软件技术专业1+Xweb前端开发方向人才培养的核心课程的组成部分，已经进入一个全新的发展阶段，内容更加丰富：从理论到实践、从基础走向综合项目、从静态到动态、从需求描述推进到网站开发、从网站开发拓宽到综合项目开发。因此，在教学内容、方法和手段上必须与时俱进，深入研究并开展课程创新设计与教学方法改革。1学情分析福建船政交通职业学院的软件技术专业人才培养目标是：培养理想信念坚定，德、智、体、美、劳全面发展，具有一定科学文化水平，良好的人文素养、职业道德、质量意识和创新意识，精益求精的工匠精神，较强的就业能力和可持续发展能力。2019年6月，教育部职业技术教育中心研究所发布《关于首批1+X证书制度试点院校名单的公告》（教职所〔2019〕141号）。web前端开发作为福建船政交通职业学院入选项之一赫然在列。1+Xweb前端开发方向集中性实训课程在人才培养方案中属于核心课程的组成部分。在大一学年第二学期学习完web编程基础、JavaScript程序设计、数据库原理与设计的基础上，开设为期2周的集中性实训课程—前端基础实训；在大二学年第一学期学习完JavaScript高级应用、响应式布局、PHP程序设计之后，开设为期2周的集中性实训课程—网站开发项目实训；在大二学年第二学期学习完微信小程序开发、Node.js后端开发之后，开设为期4周的集中性实训课程—全栈网站交互实训；在大三学年第一学期，学习完前端框架设计后开设为期4周的集中性实训课程—综合项目实训。在整个培养方案设计中，通过三年的学习，学生已经具有一定的知识储备和思考、解决问题的能力。但要提高学生理论与实际的联系程度、加强创新意识、提高自学能力等方面，集中性实训课程的教学策略与实施方法则起着举足轻重的作用。针对web前端开发的课程特点及学生情况，我们进行了集中性实训课程改革，在教学策略和逻辑上从学生知识掌握情况出发，对学生知识吸收和巩固过程进行揣摩，力使每个学生都能达到培训目标，将来胜任相应工作岗位。2集中性实训课程改革措施我们坚持“以学生为中心，以目标为导向”的教学理念，坚持“实践中学习，应用中创新”教学原则。以学生为中心，以目标为导向，就是以学生能力发展为中心，以学生实训、实训效果为中心，实现具有较强的就业能力、可持续发展能力及精益求精的工匠精神的人才培养目标；实践中学习，应用中创新，就是根据人才培养方案制定课程实践指导书，明确实训的目标、意义，让学生在完成目标（项目）的过程中巩固课堂上学过的知识，通过自学及教师指导学习课堂上没有讲，但实践中要用到的知识，在实践过程中培养、体现学生的创新思维及创建能力。具体来讲，就是实训课开始前在网络教学平台发布实训指导书，学生充分利用我校的网络教师资源平台的优质资源，进行自主学习，必要时填写不明白问题问卷，让教师提前了解学情，哪些知识点需要重点指导，教师在实训过程中能做到精准指导；指导学生分析讨论实训项目，培养学生融会贯通、解决问题的能力；指导学生查阅前沿性的实用文档、开源代码等，培养学生崇尚科学、创新意识及团队协作精神；撰写实训日志、周报，使学生零散知识系统化，以巩固并提升；实训项目完成，撰写实训报告，培养学生软件文档写作及科学语言论述问题的能力。以前端基础实训为例，此实训为巩固JavaScript基础知识而设计，为了引起学生的好奇性，激发学习兴趣，选取了实训任务：开发前端游戏—飞机大战，整个过程采用任务驱动式教学，步步推进。教学设计[3]如图1所示。实训实训前自主学习内容导学了解学情布置任务发布问卷自主学习自测自评自主学习发现问题实训开始游戏显示实际项目步步引导引起好奇积极思考探究意识分析问题游戏控制突出重点深入浅出传授方法掌握知识学习方法夯实基础专业素养游戏动画融入思政问题导向引导分析学以致用解决问题融会贯通解决问题游戏逻辑学科发展讲解历史分析发展科学思维启发思考开拓视野创新意识巩固练习了解前沿步步追问讨论指导团队协作创新思考创新意识协作精神前端基础实训课程设计（飞机大战）实训中探究拓展实训后巩固提升实训报告总结提升日志周报辅导答疑知识梳理系统掌握发散思维综合应用图1“飞机大战”实训设计实训环节教师活动学生活动培养目标实训教学过程中，学生是一个积极的探究者，要激发学生的好奇心、上进心、同学（朋友）之间的相互作用。实训的主要目的不是记住教师和教材上所讲的内容并完成实训项目（任务），而是要学生参与该学科知识体系的建立过程，以使将来轻松胜任工作中的各种任务。2.1任务驱动式教学任务驱动式教学法是教师根据学习内容及知识点提出实训任务，引导学生完成该任务的教学方法。具体表现在，教师为学生提出能体验实践和感悟问题的情境任务，学生围绕任务开展学习，以任务的完成结果检验和总结学习过程。任务驱动教学法相比传统的讲授法能改变学生的学习状态，使学生主动建构探究、实践、思考、运用、解决高智慧的学习体系。如“飞机大战”具体任务驱动教学设计如表1所示。表1“飞机大战”任务驱动区教学设计任务1：游戏显示教师形为提出任务：1.1完成“飞机大战”游戏主界面1.2在页面指定位置添加指定的飞机（图片）1.3将指定位置的资源添加到游戏页面分析任务：1.1所需主要知识点：添加显示元素1.2所需主要知识点：显示元素的属性1.3所需主要知识点：图片路径与资源商城效果演示：借助合作企业平台演示各任务的实现过程及最终效果学生形为完成任务：1.1完成“飞机大战”游戏主界面1.2在页面指定位置添加指定的飞机（图片）1.3将指定位置的资源添加到游戏页面巩固练习：1.1完成：屏幕保护系统、拼竹子、制作赛车游戏界面1.3完成：巩固练习：植物大战僵尸、跑酷游戏任务总结：撰写实训日志及周报任务2：游戏控制教师形为提出任务：2.1鼠标控制事件2.2获取鼠标位置、鼠标跟随2.3图片图层分析任务：2.1所需主要知识点：鼠标click事件2.2所需主要知识点：鼠标mousemove事件及PIXI下获取鼠标x、y坐标2.3所需主要知识点：后面添加的图片将显示在“前面”效果演示：借助合作企业平台演示各任务的实现过程及最终效果学生形为完成任务：2.1完成飞机随鼠标的单击而移动2.2完成飞机跟随鼠标而移动2.3将飞机显示在背景的前面巩固练习：2.1完成：植物大战僵尸—收阳光、恐龙快打、斗地主手牌选择2.2完成：大鱼吃小鱼、反恐重击2.3完成：弹出界面制作、合金弹头人物移动任务总结：撰写实训日志及周报任务3：游戏动画教师形为提出任务：3.1动画实现3.2飞机位置判断3.3制作子弹动画3.4使用函数优化程序分析任务：3.1所需主要知识点：PIXI.ticker的使用3.2所需主要知识点：垂直位置y坐标、水平位置x坐标3.3所需主要知识点：飞机发射子弹—将子弹位置设置现飞机设置相同3.4所需主要知识点：多函数使用效果演示：借助合作企业平台演示各子任务的实现过程及最终效果学生形为完成任务：3.1完成：移动飞机3.2完成：当飞机从上到下移出边界时，重新从上往下移动3.3完成：飞机移动并发射子弹3.4完成：增加敌机巩固练习：3.1完成：三架飞机移动、植物大战僵尸—僵尸旋转消失3.2完成：打砖块—横杆移动、半地主—选择/取消出牌3.3完成：点击接鸡蛋、植物大战僵尸—发射子弹3.4完成：飞机大战—关卡提示信息、小球动画任务总结：撰写实训日志及周报任务4：游戏逻辑教师形为提出任务：4.1变量逻辑4.2使用数学公式4.3变量类型4.4飞机移动4.5使用帧频控制元素4.6碰撞判断4.7多飞机、多子弹碰撞分析任务：所需主要知识点：变量的定义及使用、Math.random()、Math.round()函数、数组的定义与使用等效果演示：借助合作企业平台演示各子任务的实现过程及最终效果学生形为完成任务：4.1完成：鼠标每点击一次，页面显示数值添加14.2完成：当一架飞机“飞出”画面，新的飞机出现在最上方国边界的随机位置4.3完成：说明文档阅读及使用4.4完成：创建六架飞机并移动4.5完成：飞机随鼠标移动而移动、移动子弹并删除超出边界的子弹4.6完成：子弹由下方射击敌机，每打中一次敌机往上移一次，直到移出边界4.7完成：随着鼠标的移动发身设子弹并打击随机出现的敌机巩固练习：4.1完成：游戏倒计时、游戏暂停/开始、赛车游戏—车辆加速、屏幕保护、两个小球左右移动、找头像（倒计时设置）、保卫萝卜Ⅱ4.2完成：降落的小球、找头像（屏幕抖动）4.3完成：画线、画圆、画矩形、飞翔的小鸟、跑酷游戏—人物跳起4.4完成：打砖块—添加砖块、赛车游戏—多车辆移动、大鱼吃小鱼Ⅱ4.5完成：一秒发射两个子弹、随机移动的小球、飘落的雪花4.6完成：屏幕保护系统、打砖块4.7完成：小球碰撞、打砖块—多小球任务总结：撰写实训日志及周报任务5：逐帧动画教师形为提出任务：5.1逐帧动画原理5.2快速实现逐帧动画分析任务：5.1所需主要知识点：PIXI之加载纹理贴图5.2所需主要知识点：PIXI之纹理切换实现逐帧动画效果演示：借助合作企业平台演示各子任务的实现过程及最终效果学生形为完成任务：5.1完成：实现随着鼠标的点击蝴蝶飞舞5.2完成：蝴蝶飞舞巩固练习：5.1完成：选择战机、跑酷游戏—角色跳起、找头像（反转头像）、植物大战僵尸—僵尸移动5.2完成：跑酷游戏、飞机爆炸任务总结：撰写实训日志及周报任务总结：撰写实训日志及周报任务6：撰写实训报告教师形为分析实训报告的撰写方法、格式等学生形为完成实训报告的撰写通过这些任务的实训操作完成、巩固练习与总结，学生清晰地了解了阅读任务、分析任务、解决任务的方式方法，并掌握了web前端开发之基础篇—JavaScript程序设计的基本应用，更能感知从理论学习到实践操作、从课堂知识到课外拓展的过程转换及知识进阶，从而给学生以思维能力与科学方法层面的启迪。2.2线上线下混合教学模式高水平课程建设需要高水平的课程资源。福建船政交通职业学院的web前端课程建设资源相对是比较丰富的。我们从教学内容的前沿性、高阶性、与相关学科的融合性、教学思想的先进性、教学形式的创新性与可塑性等方面全方位进行设计和视频录制，在学校网络教学资源平台上线。为了培养学生的自学能力、团结协作精神，提高实训课的实操效果，我们利用合作企业的实训平台，将一些难度较低和应用性较强的内容安排学生利用课外时间通过学校网络资源台及企业实训平台自学，节约出来的时间进行重、难点的详解及指导，以更好的培养学生的创新能力。为了保证自学效果，我们设计了先让学生阅读实训平台的示例代码，再模拟完成类似功能操作，最后再进行拓展巩固练习及总结。通过模拟以促进学生思考，通过拓展巩固练习帮助学生更深入地理解及掌握核心知识点及其实际应用。每次课后都能看到