校企合作创新人才培养教学改革
来源:用户上传
作者:白丽瑞 张翠英 李敬辉
摘要：当前Web前端工程师高级人才依然紧缺，但是高校Web前端相关课程对学生的开发技能提升效果一直不是很理想，针对这一状况，我校特别开设了“WebuI设计（HTML5）”课程，并积极探索教学改革方式，将学校和企业所授知识相融合，进一步增加实践教学比例和难度，并且混合使用了多种教学方法，比如MOOC与项目案例实践相结合，以期为独立学院计算机专业教学提供新的思路和模式。
关键词：SPOC;Web uI设计;HTML5;教学改革
中图分类号：TP391 文献标识码：A
文章编号：1009-3044（2020）01-0088-02
1Web前端及课程现状
目前，HTML5+CSS3技术已经成了计算机行业Web前端网页设计的主流技术。据调查可知目前国内的软件开发人才存在数量和结构上的双重缺口，尤其是关于前端开发行业，近五年内被各大企业推上计算机专业人才就业的热潮尖端。但是，一方面，企业一般不愿意在培训技能人才上花费太多人力、物力;另一方面，当前开设Web uI设计（HTML5）课程的高校还非常少，学校教授知识相对滞后，因此，当前拥有熟练前端技能的创新人才非常短缺。
Web前端开发的主要工作是把uI（用户界面）的设计图按照W3C标准做成HTML页面，用CSS进行布局，并且用JavaScfipt脚本语言实现页面上的前端互动。HTML5技术的简易性、可拓展性、平台无关性等特点使其备受移动应用开发商与移动应用开发程序员的热爱和追捧。HTML5技术能够使用主流浏览器原生支持视频、音频、动画与图片等元素的交互，并具有跨平台特性，不需要安装插件，也提高了安全性和稳定性。
Web uI设计（HTML5）课程是计算机系专业选修课，主要讲授使用HTML5技术进行Web前端的用户界面设计与开发。通过对HTML5全新语法和页面架构、表单、多媒体、图像及动画、元素拖拽、数据存储及幾个常用API的介绍，再加上部分CSS3与JavaScript基础知识的学习，希望能够提高学生掌握和运用网页前端设计和开发的能力。
2MooC思想及“课堂派”引入
慕课，（大规模开放在线课程，是以在线网络课程为基础，吸纳不同领域的学习者参与一个共同的学习社区，通过网络实现在不同时空的知识建构传统的方式是通过架设好的平台，公众可以观看国内外高水平的课程内容，这样学习者便可以通过网络就能学习到最顶尖的课程和知识。但是大多数“慕课”内容都是偏理论化的，对于教授更侧重技术和实践能力的Web前端课程而言，可能直接照搬，优势不能完全体现出来，因此考虑一部分基础理论知识用MOOC上现有的资源，另一部分视频教师与企业工程师来自行录制。自己录制部分，暂时只考虑校内授课使用，一般针对选课的学生，因此只需要将视频发布给选课学生即可，但是直接发送信息不方便随时下载学习，自己搭建平台，开发和维护代价又比较大，因此选用现有的辅助教学网站“课堂派”作为工具。
“课堂派”允许将选课学生建立班级群、课程群，之后课程相关的视频、试题、作业等资源都通过班级推送给学生端。学生在手机端就可以方便地学习、测试、提交作业等。教师也可以更方便地通过“课堂派”记录学生考勤、备课、发布公告、线上批改作业等。
3校企合作与案例实践教学模式
Web uI设计（HTML5）课程本身就是针对当前的形势开设的，并且目的就是为了应用，因此教学方式应当更偏重实践。并且提高学生编写程序的能力是开展程序设计实践课程的目的，也是开设程序设计实践课程最根本的宗旨嘲。但是教师自身一方面实践经验偏少，另一方面对行业前沿技术掌握滞后，由于教师角色决定的局限性，因此如果要切实提高学生的开发能力，必然要借助企业的力量，因此校企合作是必然的选择。具体合作方案如下：
与一些擅长Web前端开发的企业合作，教师深入企业，分析总结当前市场普遍前端需求，观摩，实地考察企业工作和实训方式，提取、借鉴一些教学可用方法，提升教师自身能力。
可从企业项目案例中总结、整理一些网站前端网页以及小游戏、微信开发等更贴近实际、更接近当前前端开发市场、甚至企业的实际项目作为课程教学资源，从而增加案例获取渠道。
采用项目案例驱动的教学方法，课堂教学以完成项目实践为主要目的，其间穿插一些基础知识的讲解，当然这些知识需要将课本知识融合之后重新整合，重新编排，按照“开发过程中用到什么，再学什么”的思路进行课程资源和进度的安排。一部分教学视频录制邀请与学校合作的有经验的企业工程师来完成，更能提高学生的学习兴趣。学生课上在开发过程中遇到解决不了的bug，可以请企业经验丰富的工程师来远程协助。
4结合MooC与案例实践的Web UI设计（HTML5）课程的知识结构
4.1授课内容
案例教学法融入Web uI设计（HTML5）课程教学内容中，将HTML5的每个特点或技术划分为一个章节，并且用一两个案例来重点阐述，之后布置作业练习，巩固知识点，主要内容如下安排：
1）知识点：HTML5语法及页面架构，案例：基础页面设计，作业练习：练习导航、页面布局等基本页面元素;
2）知识点：HTML5表单，案例：设计注册页面，作业练习：练习个人简历页面;
3）知识点：HTML5多媒体，案例：视频播放器制作，作业练习：制作音频播放器;
4）知识点：HTML5图像及动画，案例：超级玛丽动画，绘制时钟，作业练习：绘制组合图形，小动画游戏制作;
5）知识点：HTML5元素拖拽，案例：拖拽点餐页面，作业练习：照片分组排序页面;
6）知识点：HTML5数据存储，案例：注册与登录数据库设计，作业练习：学生信息管理页面;
7）知识点：HTML5地理位置应用，案例：在地图中定位，作业练习：与同学共享位置信息; 8）知识点：CSS基础，案例：购物页面样式实现，作业练习：基本新闻页面样式设计。
除此之外，JavaScript基本使用方法也应该做简略讲解;一些当前企业常用框架技术（比如React+Redux，Gtm）的使用也应该做一些展示等。
4.2授课方式
视频可以分两类，一类主要讲基础知识点、语法等偏理论的知识;另一类是讲知识点使用的实际操作过程（即用法）。视频可以通过“课堂派”课前就发给学生学习，一上课先做关于视频内容的几个简单测试题目，测试学生的课前对本章节内容的自学情况，之后教师针对错误较多的题目涉及的内容进行简单讲解。
教师先展示本堂课要完成的项目成品效果，然后一步步演示案例编写过程，学生跟着一同操作，边编写代码，边讲解，用到什么，再解释讲授什么，这样，学生听课的目的性更明确，针对性也更强，案例中用到哪些新的知识点只做主要原理及使用方法的说明，其他注意事项及使用细节等问题，通过提前录制的视频让学生自己学习。做完一个案例，做简要总结。然后布置与案例难度近似的练习作业，让学生分组完成，可以讨论，可以查阅相关资料，如果有必要，也可以寻求教师指导或企业工程师网络远程协助。作业完成后提交到“课堂派”。其间要注重对学生自己分析问题、解决问题、自主学习、沟通交流和团队协作的能力。
4.3过程示例展示
以HTML5数据存储知识授课为例，过程如下：
提前录制视频一用于讲解Web storage与cookie的区别，Web storage的两种存储方式——sessionStorage和localStorage及它们不同的使用场景，包括分别如何保存数据、读取数据、清除数据等方法，Web SQL数据库如何创建、如何打开一个现有的Web SQL数据库，怎样建立数据表，怎样插入数据、删除数据、更新数据以及查询数据的语法定义;
录制视频二具体演示以上提到的各个功能如何使用及运行效果。
课上先发布HTML5数据存储的测试题（比如sessionStorage如何读取数据的选择题，Web SQL创建数据库时指定数据库名称参数位置的填空题等），给几分钟时间完成，根据测试分数，讲解得分率偏低的题目。
先向学生展示即将要做的页面注册、登录功能完成效果，然后从空文档开始一步步设计和编写代码及从旁解释说明，直到完成要达到的预期效果，其间，用到创建数据库、添加数据、查询数据的地方，做简要提示。
之后布置學生信息管理页面制作作业，让学生完成指定效果，可略作改动或增加功能。两人一组可适当讨论或分工合作，教师和企业工程师做指导。
学生提交作业，互相评阅给出分数，并选择一组进行答辩。
4.4评价方式
学生提交作业后，将信息发送到各组，各组之间互相学习并评分，每次抽取一到两组进行答辩，答辩时简要说明作业的设计实现思路和方法，其他同学可以直接提出问题或建议，互相督促、共同进步。教师只充当“催化剂”及“主持人”角色。每次课上练习作业完成情况计入总成绩。
布置课程设计综合大作业，学生分组完成，完成之后将运行效果及制作细节录制成答辩视频，供教师评阅给分。
成绩计算方式=课上测试20%+历次作业40%+综合大作业40%。
5总结
本文提出了一种将校企合作思路运用到Web uI设计（HT-ML5）课程教学，授课过程中将“MOOC”思想与案例实践教学模式相结合，使用了“课堂派”等工具的教学改革方法，通过在计算机系的实施，取得了较好的效果。
转载注明来源:https://www.xzbu.com/8/view-15144551.htm
