基于HTML5数字迎新统计网站设计与实现.docVIP

基于HTML5数字迎新统计网站设计与实现 　　摘要：网络带宽的不断增加，智能手机的普及，移动互联网的飞速发展，为我们的生活带来了诸多便利，也对高校的数字化建设产生了深远影响。信息的传递比以往更加迅速，用户更加关心对信息的实时获取。迎新统计也不例外，传统迎新统计网站采用普通HTML技术，不能自适应不同的屏幕，存在一定的局限性，而HTML5可以轻松实现优美的布局并能适配不同的屏幕，故该研究采用HTML5技术，对迎新统计数据进行展示，满足了该校老师可以通过PC端和移动终端实时查看新生报到统计的需求。 　　关键词：响应式网站；HTML5；迎新统计 　　中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）21-0028-02 　　1 背景 　　一年一度的迎新是我校每年的重点工作，早前的迎新统计工作，通过人工汇报来完成统计，每个院系在新生名单上记录新生的报到状态，每隔一段时间会有工作人员去各个院系报到点汇总。人工统计费时费力，出错率高，并且不能及时更新实时查看。2007年我校引入了数字迎新系统，替代人工统计方法，新生在报到时，只需刷一下校园卡，系统就自动的记录学生的报到状态，然后工作人员通过编写SQL语句查询数据库来统计新生报到数据。但是此方法存在一定的局限性，首先要求工作人员具备基础的数据库知识，其次每次查询均需要不断的访问数据库，给数据库增加负担，并且普适性能差，不熟悉迎新系统操作的老师将无法查看新生报到情况。基于以上问题，本研究提出采用HTML5技术，将统计结果界面化图形化，同时采用响应式布局技术，使图形界面同时适配PC端和移动终端，让我校更多老师方便地实时查看新生报到情况。 　　2 高校迎新网站建设现状 　　Marcotte1在 2010 年提出响应式网页设计的概念，Mashable （世界上访问量最多的互联网新闻博客之一，创办于 2005年）认为 2013年是响应式网页的设计年2。查看世界 500 强企业的移动门户网站， 可以发现有很多企业采用了响应式设计， 如微软中国官网（http：///zh-cn/windows/home）、星巴克（http：///）等。许多国外知名大学和图书馆的移动门户网站也都采用了响应式设计， 如哈佛大学（http：///）、耶鲁大学（http：///）、普林斯顿大学 （http：///main/）等。 　　在国内， 响应式网页设计还处于起步阶段， 据笔者调查， 当前有少数高校移动门户网站开始尝试响应式设计， 如清华大学、复旦大学、华东师范大学等正处于研发阶段3。 　　3 Html5应用现状 　　经过八年的发展，W3C的HTML工作在2014年10月28日正式发布了HTML5的正式标准。即使在正式标准发布之前，HTML5已经被各大浏览器广泛支持，并得到了广大用户的喜爱。与传统的HTML相比，HTML5增加了websocket通信协议，可以实现实时通信，增加canvas绘图功能，可以实现各种复杂的画面展示，增加了响应式布局，可以针对不同尺寸的屏幕自适应，此外HTML5还增加了许多新特性，而且HTML5对系统资源的占用很少，HTML5的这些特性可以很好的替代FLASH。越来越多的网站为了适应资源比较紧缺的移动端放弃了FLASH，转而使用HTML5。 　　4 响应式网页设计简介 　　响应式布局是EthanMarcotte在2010年提出的，简而言之就是一个网站能够兼容多个终端 而不是为每个终端做一个特定的版本。因此，响应式布局面对不同终端设备灵活性强，能够快速解决不同终端的显示适应问题。常见的框架有bootstrap，UIkit，Base等，其中bootstrap是有Twitter的两名工程师编写的，是一款知名度高，上手容易的框架。 　　5 系统的设计与实现 　　5.1 前期调研 　　学校已有迎新系统与学生数据库，但是没有做图形化的统计功能，所有的统计结果都是通过查询数据库获取的。 　　5.2 网站架构 　　本文所述统计网站是基于现有学生数据库建立的，采用MVC三层架构的方式构建，如图1所示，图中虚线框中的部分为本文所述网站。 　　5.3 HTML5的应用 　　服务器端采用PHP语言编写，由于学校已经建立了离校系统，学生数据库，所以本网站后台不涉及数据库的建立，只需要读取数据库视图，然后传递给前端，前端获取到数据之后通过HTML5的方式展现出来。 　　服务端首先连接数据库，并读取相应的数据视图，以读取全体新入学研究生为例，代码如下： 　　[$db = （DESCRIPTION=（ADDRESS_LIST = （ADDRESS = （PROTOCOL = TCP）（HOST = 83）（PORT = 1521）））（CONNECT_DATA