基于HTML5技術(shù)下高校移動(dòng)招生網(wǎng)站

徐紹銅 鐘麗花

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

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

1 引言

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

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

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

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

（3） HTML5制作的網(wǎng)頁(yè)具有“一次設(shè)計(jì)，到處適應(yīng)”的特點(diǎn)。傳統(tǒng)HTML4技術(shù)在不同的移動(dòng)設(shè)備上都會(huì)產(chǎn)生不一樣的視覺效果，這樣網(wǎng)站開發(fā)者則需要開發(fā)多個(gè)網(wǎng)站版本。但采用了HTML5技術(shù)，就只需要開發(fā)一個(gè)版本，它能夠自動(dòng)識(shí)別移動(dòng)設(shè)備屏幕的大小并做出相應(yīng)的網(wǎng)頁(yè)調(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編程語(yǔ)言為主，配合HTML5+JSP+Servlet+JDBC等技術(shù)來實(shí)現(xiàn)網(wǎng)站的各項(xiàng)業(yè)務(wù)需求。

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

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

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

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

3.2.2 考生問答模塊

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

3.2.3 招生簡(jiǎn)章模塊

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

3.2.4 留言模塊

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

3.2.5 錄取查詢模塊

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

3.2.6 快遞查詢

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

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

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

如圖2所示。

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

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

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

你的瀏覽器不支持播放視頻，請(qǐng)升級(jí)！

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