李春曉

摘要：網(wǎng)絡(luò)帶寬的不斷增加，智能手機的普及，移動互聯(lián)網(wǎng)的飛速發(fā)展，為我們的生活帶來了諸多便利，也對高校的數(shù)字化建設(shè)產(chǎn)生了深遠(yuǎn)影響。信息的傳遞比以往更加迅速，用戶更加關(guān)心對信息的實時獲取。迎新統(tǒng)計也不例外，傳統(tǒng)迎新統(tǒng)計網(wǎng)站采用普通HTML技術(shù)，不能自適應(yīng)不同的屏幕，存在一定的局限性，而HTML5可以輕松實現(xiàn)優(yōu)美的布局并能適配不同的屏幕，故該研究采用HTML5技術(shù)，對迎新統(tǒng)計數(shù)據(jù)進(jìn)行展示，滿足了該校老師可以通過PC端和移動終端實時查看新生報到統(tǒng)計的需求。

關(guān)鍵詞：響應(yīng)式網(wǎng)站；HTML5；迎新統(tǒng)計

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）21-0028-02

1 背景

一年一度的迎新是我校每年的重點工作，早前的迎新統(tǒng)計工作，通過人工匯報來完成統(tǒng)計，每個院系在新生名單上記錄新生的報到狀態(tài)，每隔一段時間會有工作人員去各個院系報到點匯總。人工統(tǒng)計費時費力，出錯率高，并且不能及時更新實時查看。2007年我校引入了數(shù)字迎新系統(tǒng)，替代人工統(tǒng)計方法，新生在報到時，只需刷一下校園卡，系統(tǒng)就自動的記錄學(xué)生的報到狀態(tài)，然后工作人員通過編寫SQL語句查詢數(shù)據(jù)庫來統(tǒng)計新生報到數(shù)據(jù)。但是此方法存在一定的局限性，首先要求工作人員具備基礎(chǔ)的數(shù)據(jù)庫知識，其次每次查詢均需要不斷的訪問數(shù)據(jù)庫，給數(shù)據(jù)庫增加負(fù)擔(dān)，并且普適性能差，不熟悉迎新系統(tǒng)操作的老師將無法查看新生報到情況?；谝陨蠁栴}，本研究提出采用HTML5技術(shù)，將統(tǒng)計結(jié)果界面化圖形化，同時采用響應(yīng)式布局技術(shù)，使圖形界面同時適配PC端和移動終端，讓我校更多老師方便地實時查看新生報到情況。

2 高校迎新網(wǎng)站建設(shè)現(xiàn)狀

Marcotte1在 2010 年提出響應(yīng)式網(wǎng)頁設(shè)計的概念，Mashable （世界上訪問量最多的互聯(lián)網(wǎng)新聞博客之一，創(chuàng)辦于 2005年）認(rèn)為 2013年是響應(yīng)式網(wǎng)頁的設(shè)計年2。查看世界 500 強企業(yè)的移動門戶網(wǎng)站， 可以發(fā)現(xiàn)有很多企業(yè)采用了響應(yīng)式設(shè)計， 如微軟中國官網(wǎng)（http：//windows.microsoft.com/zh-cn/windows/home）、星巴克（http：//www.starbucks.cn/）等。許多國外知名大學(xué)和圖書館的移動門戶網(wǎng)站也都采用了響應(yīng)式設(shè)計， 如哈佛大學(xué)（http：//www.harvard.edu/）、耶魯大學(xué)（http：//www.yale.edu/）、普林斯頓大學(xué) （http：//www.princeton.edu/main/）等。

在國內(nèi)， 響應(yīng)式網(wǎng)頁設(shè)計還處于起步階段， 據(jù)筆者調(diào)查， 當(dāng)前有少數(shù)高校移動門戶網(wǎng)站開始嘗試響應(yīng)式設(shè)計， 如清華大學(xué)、復(fù)旦大學(xué)、華東師范大學(xué)等正處于研發(fā)階段3。

3 Html5應(yīng)用現(xiàn)狀

經(jīng)過八年的發(fā)展，W3C的HTML工作在2014年10月28日正式發(fā)布了HTML5的正式標(biāo)準(zhǔn)。即使在正式標(biāo)準(zhǔn)發(fā)布之前，HTML5已經(jīng)被各大瀏覽器廣泛支持，并得到了廣大用戶的喜愛。與傳統(tǒng)的HTML相比，HTML5增加了websocket通信協(xié)議，可以實現(xiàn)實時通信，增加canvas繪圖功能，可以實現(xiàn)各種復(fù)雜的畫面展示，增加了響應(yīng)式布局，可以針對不同尺寸的屏幕自適應(yīng)，此外HTML5還增加了許多新特性，而且HTML5對系統(tǒng)資源的占用很少，HTML5的這些特性可以很好的替代FLASH。越來越多的網(wǎng)站為了適應(yīng)資源比較緊缺的移動端放棄了FLASH，轉(zhuǎn)而使用HTML5。

4 響應(yīng)式網(wǎng)頁設(shè)計簡介

響應(yīng)式布局是EthanMarcotte在2010年提出的，簡而言之就是一個網(wǎng)站能夠兼容多個終端 而不是為每個終端做一個特定的版本。因此，響應(yīng)式布局面對不同終端設(shè)備靈活性強，能夠快速解決不同終端的顯示適應(yīng)問題。常見的框架有bootstrap，UIkit，Base等，其中bootstrap是有Twitter的兩名工程師編寫的，是一款知名度高，上手容易的框架。

5 系統(tǒng)的設(shè)計與實現(xiàn)

5.1 前期調(diào)研

學(xué)校已有迎新系統(tǒng)與學(xué)生數(shù)據(jù)庫，但是沒有做圖形化的統(tǒng)計功能，所有的統(tǒng)計結(jié)果都是通過查詢數(shù)據(jù)庫獲取的。

5.2 網(wǎng)站架構(gòu)

本文所述統(tǒng)計網(wǎng)站是基于現(xiàn)有學(xué)生數(shù)據(jù)庫建立的，采用MVC三層架構(gòu)的方式構(gòu)建，如圖1所示，圖中虛線框中的部分為本文所述網(wǎng)站。

5.3 HTML5的應(yīng)用

服務(wù)器端采用PHP語言編寫，由于學(xué)校已經(jīng)建立了離校系統(tǒng)，學(xué)生數(shù)據(jù)庫，所以本網(wǎng)站后臺不涉及數(shù)據(jù)庫的建立，只需要讀取數(shù)據(jù)庫視圖，然后傳遞給前端，前端獲取到數(shù)據(jù)之后通過HTML5的方式展現(xiàn)出來。

服務(wù)端首先連接數(shù)據(jù)庫，并讀取相應(yīng)的數(shù)據(jù)視圖，以讀取全體新入學(xué)研究生為例，代碼如下：

[$db = "（DESCRIPTION=（ADDRESS_LIST = （ADDRESS = （PROTOCOL = TCP）（HOST = 10.12.13.183）（PORT = 1521）））（CONNECT_DATA=（SID=yx）））"；

$conn = OCILogon（'username'， 'password'， $db， 'utf8'）；

if （！$conn） {

print_r（oci_error（））；

echo "erro1"；

$e = oci_error（）；

print htmlentities（$e['message']）；

exit；

}

$sql = "select * from HY_REGISTER_XJ_YJS_TJ"；

$stmt = OCIParse（$conn， $sql）；

OCIExecute（$stmt）；]將代碼傳遞到瀏覽器端HTML5頁面中，本網(wǎng)站使用的是將數(shù)據(jù)存放到隱藏的表格中。代碼如下

[echo ""；

while （$row = oci_fetch_array （$stmt ， OCI_BOTH）） {

echo ""；

}

echo "

".$row[0]."

".$row[1]."

" .$row[3]."

".$row[2]."

".$row[4]."

"；]瀏覽器端采用HTML5語言編寫，并運用了jQuery，bootstrap2.0框架，ichart圖表控件。主要統(tǒng)計以下五方面的數(shù)據(jù)：

1） 報到人數(shù)統(tǒng)計

展示已完成報到的人數(shù)和尚未報到的人數(shù)，采用餅圖的方式展示，分為全體研究生人數(shù)統(tǒng)計圖、學(xué)術(shù)碩士人數(shù)統(tǒng)計圖、專業(yè)碩士人數(shù)統(tǒng)計圖、博士人數(shù)統(tǒng)計圖4個子圖，如圖2所示：

2） 應(yīng)報到男女比例統(tǒng)計，采用餅圖的方式展示，分為全體研究生男女比例統(tǒng)計圖、學(xué)術(shù)碩士男女比例統(tǒng)計圖、專業(yè)碩士男女比例統(tǒng)計圖、博士男女比例統(tǒng)計圖4個子圖。

3） 注冊完成男女比例統(tǒng)計，采用餅圖的方式展示，分為全體研究生注冊完成男女比例統(tǒng)計圖、學(xué)術(shù)碩士注冊完成男女比例統(tǒng)計圖、專業(yè)碩士注冊完成男女比例統(tǒng)計圖、博士注冊完成男女比例統(tǒng)計圖4個子圖。

4） 交費情況統(tǒng)計，采用餅圖的方式展示，分為全體研究生交費情況統(tǒng)計圖、學(xué)術(shù)碩士交費情況統(tǒng)計圖、專業(yè)碩士交費情況統(tǒng)計圖、博士交費情況統(tǒng)計圖4個子圖。

5） 各院系報到統(tǒng)計，如圖3所示。

HTML5頁面先引入框架與圖表控件所需要的外部文件，并啟用響應(yīng)式支持，代碼如下：

[

]

在body標(biāo)簽中寫好網(wǎng)頁的結(jié)構(gòu)，為統(tǒng)計圖寫好占位符，占位符代碼如下：

通過javascript獲取后臺傳過來的數(shù)據(jù)，并在占位符出繪圖，代碼如下：

[$（"#quanti tr"）.each（function（i）{

if（i < 2）{

$this = $（this）；

$name = $this.children（）.eq（0）.text（）；

$val_quanti = $this.children（）.eq（1）.text（）；

$quanti.push（{name： $name + $val_quanti + '人'， value ： $val_quanti， color：colors[i % 6]}）；

$xueshu.push（{name： $name + $val_xueshu + '人'， value ： $val_xueshu， color：colors[i % 6]}）；

$zhuanye.push（{name： $name+ $val_zhuanye+ '人'， value ： $val_zhuanye， color：colors[i % 6]}）；

$boshi.push（{name： $name+ $val_boshi+ '人'， value ： $val_boshi， color：colors[i % 6]}）；

}

}）；

progress（'全體研究生'，'canvas_quanti'，0，$quanti）.draw（）；]

6總結(jié)

本文從北京師范大學(xué)迎新統(tǒng)計實際需求出發(fā)，講述了運用HMTL5技術(shù)開發(fā)能同時適PC與移動端的響應(yīng)式網(wǎng)頁，統(tǒng)計結(jié)果通過圖表的形式展現(xiàn)，很好的滿足了全校師生查看新生實時報到數(shù)據(jù)的要求。

參考文獻(xiàn)：

[1] Marcotte E. Responsive Web Design [EB/OL].（2010-05-25）.[2014-07-21]. http：//alistapart.com/article/responsive-web- design/.

[2] Why 2013 is the Year of Responsive Web Design [EB/OL].（2012-12-11）. [2014-07-22]. http：//mashable.com/2012/12/11/responsive-web-design/.

[3] 劉歡，盧蓓蓉. 使用響應(yīng)式設(shè)計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化： 高教職教， 2013 （5）： 71-74.