基于HTML5的校企合作平台的设计与实现

丁金萍　李岸芩

摘要：为了建设有效的人才培养机制，促进毕业生就业，校企合作是必由之路，该文通过分析校企合作存在的问题，阐述了采用HTML5技术搭建的校企合作系统的设计思想及功能实现，从一定程度上解决了校企合作中沟通不善、缺乏选择机制的问题。

关键词：校企合作；系统；HTML5

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）04-0740-03

1 目前我国校企合作存在的问题

国务院在《关于大力发展职业教育的决定》中指出：“职业教育要改革以学校和课堂为中心的传统人才培养模式，大力推行工学结合、校企合作的培养模式。”校企合作就是在为社会教育和培训合格的劳动者的目标下，开展高职院校与企业、行业、服务部门等校外机构之间合作的标准样式。通过这样的模式，可以将学生的理论知识与实践操作相结合，以提高高职教育的质量与未来劳动者的素质，并且加强企业部门与高职毕业生之间的双向选择的可能性，解决了两者间的问题，最终也促进社会的经济发展。

校企合作是大中专院校实现培养高质量人才的重要举措。然而，目前的校企合作现状却不尽如意：首先，在网络如此发达的时代，企业与学校的沟通渠道却略显单一，大部分都需要经过中间渠道，这样会导致双方因沟通不善而出现信息不对称及消息传递不及时的问题。但是如果每一个项目都需要亲力亲为地去现场勘查与调研的话，成本太高，降低了达成校企合作的效率；其次，学校和企业之间缺乏选择机制，各方面的物质资源和人力资源不能够找到最对口的合作项目，往往调研一番后发现结果都不太合适，难以达成成功的校企合作项目；最后，目前大部分院校和企业的校企合作信息都是相互独立的，仅限于单方面的信息发布并位于不同的站点上，这些站点没有交互和沟通的模块，不利于将不同信息进行比较和整合。

鉴于此，通过翻阅大量文献以及对部分学校和企业的校企合作方式和现状的调查，了解不同学校和企业达成校企合作的方式，并梳理出不同校企合作项目的合作类型，搭建在线的校企合作平台，为学校和企业提供信息发布和管理的平台，将校企合作信息进行整合并呈现给用户，利用网络信息的快速传播的特点，帮助学校适应企业的需求，迅速对企业需求做出反应 []，达到统筹校企合作的资源的目的，从而促进学校和企业间的沟通与交流。

2 本系统的设计思想及技术选择

2.1 本系统的设计思想

系统的设计目的在于搭建一个信息透明的共享平台，能让学校和企业双方通过本平台自由地查找和发布相应的资源，并采用HTML5技术来实现记录用户的使用习惯、异步加载搜索结果等功能，最大程度确保系统的可用性，帮助双方对自己的校企合作项目进行管理，以促进双方达成合作。本系统的建设遵循开放性的原则，双方秉持诚信公开的原则，将各自具有的资源予以一定程度的公开，系统的信息需要学校和企业双方共建共享，才能达到使用系统的最大好处。

为了满足不同用户的需求，本系统主要分为两个模块，分别为查找项目和发布的项目的用户使用，系统整体业务流程如图：

系统前台主要功能在于对不同项目进行分类索引，并在导航处设置“找学校”和“找企业”的两种搜索按钮，根据学校项目和企业项目的差别分别设置筛选条件，通过一定的条件筛选来达到搜索用户期望合作的项目，进入项目的明细页面可以在登陆后使用“一键发送合作意向”和自定义“发送合作意向”的功能来实现向项目发布人发送意向的功能。

本系统面向的用户主要是学校和企业的相关人员，两种角色的权限大致相同，在进行了身份验证之后均可以发布校企合作项目、管理各自的主页上的新闻动态以及相关的联系信息，在功能的设置均可对信息进行新增、删除、修改等操作，但是发布的所有信息需要通过身份认证或管理员的审核才能以网页的形式展示出来，各自的功能说明如图2：

2.2 系统技术选择

系统采用Browser/Server架构，其优点在于可以在任何联网的计算机上访问本系统，而不需要安装任何软件。在系统前端主要采用最新的HTML5的技术来实现，该文谈到的HTML5是广义的HTML5，包含CSS3以及jQuery技术的总和，狭义的HTML5是网页超文本标记语言HTML的第四个版本的增强版本，相比HTML4来说HTML5有很大的改进，比如：更多的描述性标记、采用CSS3实现的更精美的页面以及更强大的表单等 []，虽然W3C组织还未正式发布HTML5的推荐版本，但是其声称“HTML5是开放的Web网络平台的奠基石。”这里正是基于系统在未来十年的可用性的考虑，决定采用HTML5作为基础的技术，服务器端采用是微软公司SQL SERVER以及C#.NET进行数据的操作和管理，为了保证整个系统的数据一致性及完整性，对数据库的处理编写了部分的触发器。

3 采用HTML5的系统功能实现

3.1 采用LocalStorage实现记住用户名的功能

HTML5采用LocalStorage实现数据在客户端的本地存储，相比Cookies具有容量大、永久存储、数据操作方便等特点，另外，本地数据只有当前的地址域能够读取，确保数据的安全性。HTML5的本地存储适用于存取仅用户关心的内容，如：界面风格、菜单的折叠与展开、是否记录用户名以及下次登录等，这一类数据不需要存储到远端服务器中，可以大大节省与服务器的通信消耗。系统采用LocalStorage API实现了记录用户登录名以及对后台系统的使用习惯的功能，数据存储的格式采用的是“键值对”的方式进行存储，然而，针对IE6等低版本浏览器不支持HTML5本地存储，为了确保系统的可用性，系统准备了Cookies的后退方案，采用jQuery的代码实现如下：

3.2 采用jQuery Ajax实现异步搜索

通过结合jQuery Ajax 与Aspx的COM组件的数据读取功能实现搜索的异步加载功能，使用HTML5表单进行前台的搜索条件设置，通过读取用户的搜索条件与关键词后异步加载搜索结果，系统可以在不刷新页面的前提下读取搜索结果并呈现给用户，代码实现如下：

4 总结

本系统在采用了最先进的HTML5的技术进行搭建，使用HTML5的最新功能实现了记录用户使用习惯以及无刷新的搜索等功能，在确保了系统的可用性及良好的交互性的同时，为学校和企业之间进行合作搭建了一个良好的在线筛选和沟通平台，可以有效促使双方达成合作，促进了校企合作资源的统筹和规划。

参考文献：

[1] Hogan B P. HTML5和CSS3实例教程[M]. 李杰，译. 北京：人民邮电出版社，2012.

[2] 张志强. 校企合作存在的问题与对策研究[J]. 中国职业技术教育，2012（4）：62-66.