徐紹銅 鐘麗花

摘要 目前大多數(shù)高校的招生站網(wǎng)都是采用原有的HTML4技術進行前端頁面交互，其應用已經無法滿足用戶在移動終端設備進行瀏覽的高質量要求。因此新一代跨平臺、跨瀏覽器，最適合用于移動Web前端技術的HTML5應運而生。本文首先對HTML5 Web前端技術進行研究，然后通過我院招生網(wǎng)站的設計與實現(xiàn)來闡述HTML5在移動終端展示其強大的一面。

【關鍵詞】HTML5 JAVA 分層架構 移動互聯(lián)

1 引言

隨著4G網(wǎng)絡的普及，用戶使用智能手機和平板電腦等移動設備已經超越桌面設備，成為訪問互聯(lián)網(wǎng)最常用的終端。傳統(tǒng)的HTML4技術雖然在電腦桌面設備取得重大的成就，但其缺乏對移動設備的支持，逐漸地會被新一代的前端技術HTML5所取代。HTML5改變了Web開發(fā)標準，其新增加的功能及新特性為移動Web提供一個嶄新的應用平臺，給用戶帶來一種全新的用戶體驗，未來10年將會是移動互聯(lián)領域的主宰者。

2 移動招生網(wǎng)站采用HTML5技術的原因

（1） HTML5是由全球幾百家公司共同開發(fā)出來的技術，其本身就是W3C制定出來的標準，各瀏覽器廠商想要占領瀏覽器市場就必須遵循HTML5標準。

（2） HTML5天生具有跨平臺的特性。只要采用了HTML5技術制作的網(wǎng)站，而且瀏覽器支持HTML5，那么它就能夠在各種移動開放平臺進行移植。

（3） HTML5制作的網(wǎng)頁具有“一次設計，到處適應”的特點。傳統(tǒng)HTML4技術在不同的移動設備上都會產生不一樣的視覺效果，這樣網(wǎng)站開發(fā)者則需要開發(fā)多個網(wǎng)站版本。但采用了HTML5技術，就只需要開發(fā)一個版本，它能夠自動識別移動設備屏幕的大小并做出相應的網(wǎng)頁調整。

3 招生網(wǎng)站的整體解決方案

3.1 招生網(wǎng)站的體系結構

本網(wǎng)站采用的是三層分層結構的架構模式，從底層往高層分別是數(shù)據(jù)訪問層、業(yè)務邏輯層、表示層。并采用MVC框架為指導思想（圖1所示），以JAVA編程語言為主，配合HTML5+JSP+Servlet+JDBC等技術來實現(xiàn)網(wǎng)站的各項業(yè)務需求。

3.2 招生網(wǎng)站的功能模塊

根據(jù)用戶需求規(guī)格說明書和系統(tǒng)采用的體系結構特性，本網(wǎng)站按功能模塊分為招生動態(tài)模塊、考生問答模塊、招生簡章模塊、留言模塊、錄取查詢模塊、快遞查詢等。

3.2.1 招生動態(tài)模塊

本模塊的功能類似其它CMS系統(tǒng)一樣，它可以在后臺由管理員對招生動態(tài)的內容進行管理，主要包括內容的發(fā)布、內容的修改、內容的查詢、內容的刪除等內容管理。而在前臺內容的顯示方式也在多種多樣的，主要包括內容重點推薦、內容搜索、內容詳情查看等功能。

3.2.2 考生問答模塊

本模塊集中了考生在報讀我校時遇到的各種問題而設定的問題解答模式。它的主要目的是為了方便學生在報讀我校時，遇到一些常見的問題能夠很容易就找到答案。系統(tǒng)管理員可以通過后臺靈活對考生問答的內容進行增加、刪除、修改等操作，以適應不同時期的問題答復。

3.2.3 招生簡章模塊

本模塊是對學校的招生簡章進行展示，為了能夠更好地體現(xiàn)招生簡單的內容，采用電子雜志的方式對招生簡章進行瀏覽。通過插件的形式，將做好的招生簡章電子版重新整理，用戶可以像平時閱讀雜志一樣，在手機上閱讀。

3.2.4 留言模塊

本模塊的作用是增強考生與老師之間的溝通，它的主要功能是針對個別學生想了解到不同的內容，老師可以做出不同的回復。學生可以通過移動終端打開前臺留言界面，輸入要提問的內容，提交到后臺管理員的留言答復列表。管理員則可以對學生提出的問題進行一一答復，審核通過后會直接顯示在前臺留言列表界面。

3.2.5 錄取查詢模塊

本模塊作為學生最為關注的功能，學生可以通過考生號或者身份證號查詢自己是否已經被本校錄取，同時也可以知道是被哪個專業(yè)錄取。通過錄取查詢可以讓學生最早知道錄取的情況，也能夠讓學生能夠更早去了解我校的情況，為入學做好充分的準備。

3.2.6 快遞查詢

本模塊主要是考生已經被我校錄取了，大多數(shù)的學生都會急于電話咨詢招生辦的老師錄取通知書寄出了沒有，為減輕老師的工作量，特意開放快遞查詢入口。待招生辦已經通過快遞方式給考生發(fā)放通知書后，由管理員在后臺批量導入快遞信息，這時學生可以通過手機快遞查詢功能，輸入自己的身份證號或準考證號查詢快遞信息。

4 基于HTML5技術下前端界面設計

4.1 招生網(wǎng)站移動端首頁內容展示設計界面

如圖2所示。

4.2 招生網(wǎng)站所用到HTML5的關鍵技術

（1） HTML5支持更多的表單特性技術。該技術引入了多種輸入類型，主要有calendar、date、time、email、number、range、search等輸入類型，方便用戶在輸入和驗證方面的應用，大大減少了開發(fā)人員的工作量，簡化移動端開發(fā)。

（2）本地視頻播放技術。HTML5的

你的瀏覽器不支持播放視頻，請升級！

（3）語義化標簽技術。HTML5新增了語義化區(qū)塊標簽如：