基于Web標準的校園活動預約平臺的設計與實現(xiàn)

李 成

（長沙民政職業(yè)技術學院，湖南長沙410004）

立足于學生素質全面發(fā)展的教與學是現(xiàn)代職業(yè)教育的一個基本特點。校園活動不僅能豐富大學生課余生活，而且對大學生素質的全面提高也有著極其重要的意義。它是學生接觸服務社會的通道，是學生觀察了解社會的窗口，是學生社會意識形成的催化劑。通過內(nèi)容豐富、形式多樣的校園社團活動,能促進校園文化建設向深層次、高質量方向發(fā)展,從而給學生的課余生活提供了活潑、高雅、寓教于樂的新天地，形成校園濃厚的學術氛圍、多層次的社會服務體系和活潑健康的校園文化氣息[1]。

隨著校園活動的蓬勃發(fā)展，校園活動高效管理與人員參與合理性成為目前校園活動管理的新挑戰(zhàn)。本系統(tǒng)的開發(fā)主要以校園活動網(wǎng)上預約與報名等形式，實現(xiàn)校園活動舉辦的公開化、透明化。校園活動預約平臺對校園活動開展進行預約制與信息化管理，一方面提高了校園活動舉行的透明度與公開度，另一方面可以很大程度地減輕活動管理人員的工作壓力，提高工作效率，使校園活動的開展更加合理，對全面提升學生素質有著重要意義。

一、WEB標準

1、WEB標準簡介

WEB標準是由W3C、ECMA等機構聯(lián)合起草與發(fā)布的一系列標準的集合，如：CSS、HTML、XHTML、Javascript等，目的是對WEB表現(xiàn)層的技術標準進行統(tǒng)一，通過不同瀏覽器或終端向用戶展示同一效果的信息內(nèi)容[2]。WEB標準是由表現(xiàn)（Presentation）、結構（Structure）和行為（Behavior）三部分組成標準集，如下圖所示:

圖1.web標準結構

（1）表現(xiàn)：主要對結構化信息進行版式、字體、顏色與大小等樣式控制，用于表現(xiàn)的WEB標準技術主要就是CSS技術，目前遵循的就是W3C推出的CSS2.0，其目的是為了實現(xiàn)表現(xiàn)與結構分離。

（2）結構：主要用于WEB結構化設計，WEB標準技術中主要對HTML(超文本標記語言)、XHTML（可擴展超文本標記語言）、XML（可擴展標記語言）進行了定義。

（3）行為：對WEB文檔內(nèi)部的模型與交互行為進行定義，主要包括DOM(文檔對象模型)與ECMAscript（由CMA制定的JAVASCRIPT標準）。

2、WEB標準優(yōu)點

WEB標語主要優(yōu)勢是對WEB內(nèi)容進行表現(xiàn)、結構與行為的分離。主要體現(xiàn)如下：

（1）文件下載與頁面瀏覽速度更快，比傳統(tǒng)WEB設計至少節(jié)省50%的代碼與流量；

（2）表現(xiàn)與結構分離的方法使改版更容易，只需要修改CSS文件就可以從版式、顏色等對網(wǎng)站進行改版，煥然一新；

（3）符合SEO要求，更容易被搜索引擎訪問、收錄；

（4）更多的瀏覽器與終端兼容，提供優(yōu)質的用戶訪問體驗；

（5）更多的用戶樣式體驗。用戶可以根據(jù)WEB提供的多樣式、多風格來選擇表現(xiàn)效果[3]。

3、CSS布局與Table布局的區(qū)別

CSS它是控制網(wǎng)頁布局樣式的基礎并真正能夠做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設計語言。相對于傳統(tǒng)HTML對樣式而言，CSS能夠對網(wǎng)頁中的對象的位置進行像素級的精確控制，并能夠進行初步頁面交互設計[4]。其布局方式對比如下：

圖2.傳統(tǒng)的Table布局與CSS布局對比圖

相對于傳統(tǒng)布局主要有以下幾個優(yōu)勢：①瀏覽器支持完善；②表現(xiàn)與結構分離；③樣式設計控制功能強大；④繼承性能優(yōu)越（層疊處理）[5]。

二、系統(tǒng)設計與實現(xiàn)

1、系統(tǒng)結構設計

系統(tǒng)采用B/S架構，在WEB2.0標準下，利用C#+Sqlserver2008開發(fā)，通過從校園現(xiàn)有信息系統(tǒng)中同步其學生基本信息與課表信息作為預約對象數(shù)據(jù)，各二級學院與學工處（活動主管部門）通過管理平臺發(fā)布其活動主題、舉辦時間、地點、參與人員、活動人數(shù)、預約模式、預約截止時間等信息，經(jīng)過主管部門審核后提交到預約平臺。系統(tǒng)可根據(jù)活動相關要求對預約對象進行審核，對預約活動進行參與人員統(tǒng)計報表、黑名單設置等操作。其系統(tǒng)結構設計如下：

圖3.校園活動預約平臺架構

1、系統(tǒng)功能設計

系統(tǒng)有學生、院部、系統(tǒng)管理員三個角色。學生主要有校園活動的查看、預約、預約/報名結果查詢、新聞通知查看等功能；院部負責校園活動的發(fā)布、新聞通知的發(fā)布/修改/刪除及黑名單管理；系統(tǒng)管理員主要有院部用戶信息管理、新聞/通知管理、校園活動審核與管理、學生信息導入與管理、黑名單管理等功能，其功能模塊如下：

圖4.校園活動預約平臺功能結構

1、系統(tǒng)實現(xiàn)

校園活動預約平臺主要實現(xiàn)了活動發(fā)布及管理、新聞通知管理、黑名單管理、用戶信息管理等模塊。以下對校園活動預約平臺中活動發(fā)布與管理及查看預約核心模塊進行闡述。

(1)校園活動預約管理模塊

校園活動預約管理主要是對校園活動預約進行發(fā)布、預約情況統(tǒng)計、預約名單管理、活動修改、刪除等操作，預約管理如下圖所示：

圖5.校園活動預約管理界面

其中主要包括活動主題、活動進行狀況、預約狀況、已預約/報名狀況、已報名人數(shù)、發(fā)布單位、活動舉行時間、發(fā)布日期、查看/導出活動名單等信息。

(2)校園活動發(fā)布模塊

校園活動發(fā)布主要分成院部發(fā)布與主管部門直接發(fā)布兩種類型，院部發(fā)布的活動需要經(jīng)過主管部門修改審核后方可預約，主管部門發(fā)布的活動可直接預約，其如下圖所示：

圖6.校園活動發(fā)布模塊

校園活動信息發(fā)布主要包括活動名稱（主題）、人數(shù)、舉辦時間、預約人數(shù)、活動地點、預約模式、舉辦單位、接受預約開始時間、接受預約結束時間、參與對象、是否開啟預約、活動內(nèi)容等信息

(3)校園活動查看及預約模塊

校園活動查看及預約模塊主要包括查看活動通知、預約流程、查看熱點活動與活動報名/預約等功能，如下圖所示：

圖7.校園活動查看及預約界面

三、WEB標準下系統(tǒng)應用效果分析

系統(tǒng)自正常運行以來，已有19個校園活動超過15000人次預約，其系統(tǒng)可用性與穩(wěn)定性得到證實，其WEB標準下的系統(tǒng)應用主要有以下幾個優(yōu)點：

頁面瀏覽速度得到提高，代碼量相比傳統(tǒng)布局大大減少；

瀏覽器兼容性得到提高，到目前為止，支持包括IE（6/7/8）、360、火狐、谷歌等；

CSS樣式布局使頁面更加多樣，可以滿足傳統(tǒng)布局所不支持的頁面效果，提高了用戶體驗。

以校園活動預約平臺首頁在WEB標準與傳統(tǒng)布局方式下的頁面代碼量及訪問速度，通過360瀏覽器內(nèi)置測速工具實驗對比結果如下：

圖8.WEB標準下的預約平臺首頁測速結果

圖9.傳統(tǒng)table下的預約平臺首頁測速結果

從以上實驗數(shù)據(jù)得出在WEB標準下的校園活動預約平臺首頁大小為2.3K，其瀏覽器加載速度為20MS,在傳統(tǒng)table下的首頁大小為4.1K，加載速度為42MS。實驗結果表明WEB標準下的布局代碼量減少43%，其瀏覽速度提高55%。

[1]石鵬.社團文藝對大學生素質教育的意義性思考[J].理論觀察,2005,(3).

[2]季興東.應用Web標準設計網(wǎng)頁的實踐及思考[J].泰州職業(yè)技術學院學報,2008,(3).

[3]李超.CSS網(wǎng)站布局實錄-基于WEB標準的網(wǎng)站設計指南[M].科學出版社,2007.

[4]張偉宏,陳正棟.淺談DIV+CSS與TABLE布局[J].福建廣播電視大學學報,2012,(6).

[5]梁靜琳.DIV+CSS布局技術在網(wǎng)頁設計中的應用[J].武漢工程職業(yè)技術學院學報，2009,(1).