徐紹銅 鐘麗花

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

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

1 引言

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

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

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

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

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

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

3.1 招生網(wǎng)站的體系結(jié)構(gòu)

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

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

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

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

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

3.2.2 考生問答模塊

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

3.2.3 招生簡章模塊

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

3.2.4 留言模塊

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

3.2.5 錄取查詢模塊

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

3.2.6 快遞查詢

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

4 基于HTML5技術(shù)下前端界面設(shè)計

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

如圖2所示。

4.2 招生網(wǎng)站所用到HTML5的關(guān)鍵技術(shù)

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

（2）本地視頻播放技術(shù)。HTML5的

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

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