基于HTML5技术下高校移动招生网站

2018-05-08 13:20徐绍铜钟丽花

电子技术与软件工程 2018年22期

徐绍铜钟丽花

摘要目前大多数高校的招生站网都是采用原有的HTML4技术进行前端页面交互，其应用已经无法满足用户在移动终端设备进行浏览的高质量要求。因此新一代跨平台、跨浏览器，最适合用于移动Web前端技术的HTML5应运而生。本文首先对HTML5 Web前端技术进行研究，然后通过我院招生网站的设计与实现来阐述HTML5在移动终端展示其强大的一面。

【关键词】HTML5 JAVA 分层架构移动互联

1 引言

随着4G网络的普及，用户使用智能手机和平板电脑等移动设备已经超越桌面设备，成为访问互联网最常用的终端。传统的HTML4技术虽然在电脑桌面设备取得重大的成就，但其缺乏对移动设备的支持，逐渐地会被新一代的前端技术HTML5所取代。HTML5改变了Web开发标准，其新增加的功能及新特性为移动Web提供一个崭新的应用平台，给用户带来一种全新的用户体验，未来10年将会是移动互联领域的主宰者。

2 移动招生网站采用HTML5技术的原因

（1） HTML5是由全球几百家公司共同开发出来的技术，其本身就是W3C制定出来的标准，各浏览器厂商想要占领浏览器市场就必须遵循HTML5标准。

（2） HTML5天生具有跨平台的特性。只要采用了HTML5技术制作的网站，而且浏览器支持HTML5，那么它就能够在各种移动开放平台进行移植。

（3） HTML5制作的网页具有“一次设计，到处适应”的特点。传统HTML4技术在不同的移动设备上都会产生不一样的视觉效果，这样网站开发者则需要开发多个网站版本。但采用了HTML5技术，就只需要开发一个版本，它能够自动识别移动设备屏幕的大小并做出相应的网页调整。

3 招生网站的整体解决方案

3.1 招生网站的体系结构

本网站采用的是三层分层结构的架构模式，从底层往高层分别是数据访问层、业务逻辑层、表示层。并采用MVC框架为指导思想（图1所示），以JAVA编程语言为主，配合HTML5+JSP+Servlet+JDBC等技术来实现网站的各项业务需求。

3.2 招生网站的功能模块

根据用户需求规格说明书和系统采用的体系结构特性，本网站按功能模块分为招生动态模块、考生问答模块、招生简章模块、留言模块、录取查询模块、快递查询等。

3.2.1 招生动态模块

本模块的功能类似其它CMS系统一样，它可以在后台由管理员对招生动态的内容进行管理，主要包括内容的发布、内容的修改、内容的查询、内容的删除等内容管理。而在前台内容的显示方式也在多种多样的，主要包括内容重点推荐、内容搜索、内容详情查看等功能。

3.2.2 考生问答模块

本模块集中了考生在报读我校时遇到的各种问题而设定的问题解答模式。它的主要目的是为了方便学生在报读我校时，遇到一些常见的问题能够很容易就找到答案。系统管理员可以通过后台灵活对考生问答的内容进行增加、删除、修改等操作，以适应不同时期的问題答复。

3.2.3 招生简章模块

本模块是对学校的招生简章进行展示，为了能够更好地体现招生简单的内容，采用电子杂志的方式对招生简章进行浏览。通过插件的形式，将做好的招生简章电子版重新整理，用户可以像平时阅读杂志一样，在手机上阅读。

3.2.4 留言模块

本模块的作用是增强考生与老师之间的沟通，它的主要功能是针对个别学生想了解到不同的内容，老师可以做出不同的回复。学生可以通过移动终端打开前台留言界面，输入要提问的内容，提交到后台管理员的留言答复列表。管理员则可以对学生提出的问题进行一一答复，审核通过后会直接显示在前台留言列表界面。

3.2.5 录取查询模块

本模块作为学生最为关注的功能，学生可以通过考生号或者身份证号查询自己是否已经被本校录取，同时也可以知道是被哪个专业录取。通过录取查询可以让学生最早知道录取的情况，也能够让学生能够更早去了解我校的情况，为入学做好充分的准备。

3.2.6 快递查询

本模块主要是考生已经被我校录取了，大多数的学生都会急于电话咨询招生办的老师录取通知书寄出了没有，为减轻老师的工作量，特意开放快递查询入口。待招生办已经通过快递方式给考生发放通知书后，由管理员在后台批量导入快递信息，这时学生可以通过手机快递查询功能，输入自己的身份证号或准考证号查询快递信息。

4 基于HTML5技术下前端界面设计

4.1 招生网站移动端首页内容展示设计界面

如图2所示。

4.2 招生网站所用到HTML5的关键技术

（1） HTML5支持更多的表单特性技术。该技术引入了多种输入类型，主要有calendar、date、time、email、number、range、search等输入类型，方便用户在输入和验证方面的应用，大大减少了开发人员的工作量，简化移动端开发。

（2）本地视频播放技术。HTML5的

你的浏览器不支持播放视频，请升级！

（3）语义化标签技术。HTML5新增了语义化区块标签如：

、