阮曉龍

高校門戶建設(shè)中Web前端技術(shù)

阮曉龍

阮曉龍

河南中醫(yī)學(xué)院網(wǎng)絡(luò)信息中心

阮曉龍（1981-）男（漢），河南省洛陽市人，講師，本科，主要研究方向為計算機(jī)網(wǎng)絡(luò)、計算機(jī)軟件、Web技術(shù)。

當(dāng)今，高校已經(jīng)充分利用門戶，并使之成為信息傳播不可或缺的載體。但是高校門戶并未緊跟Web前端技術(shù)的發(fā)展，依舊是互聯(lián)網(wǎng)初期的老版門戶。如何應(yīng)用已成熟的Web前端技術(shù)對高校門戶進(jìn)行改革，推動高校門戶向高層次發(fā)展，需要不斷的研究與探索。

1 Web前端技術(shù)

什么是Web前端

Web前端包含Web前端設(shè)計（UI設(shè)計、交互設(shè)計等）、Web前端開發(fā)（HTML、CSS、JavaScript等）、Web前端測試、Web前端優(yōu)化等。網(wǎng)站只是Web前端的最終展現(xiàn)形式，并不是Web前端的全部內(nèi)容。

什么是Web前端技術(shù)

Web前端技術(shù)擁有一個復(fù)雜的知識體系，圖1描述了Web前端技術(shù)的知識體系結(jié)構(gòu)，足以證明Web前端技術(shù)的復(fù)雜性。Web前端開發(fā)技術(shù)根本無法代表Web前端技術(shù)，圖1中的知識體系結(jié)構(gòu)也不是Web前端技術(shù)的全部內(nèi)容，只是宏觀上概括了Web前端技術(shù)的基礎(chǔ)內(nèi)容。Web前端技術(shù)涵蓋的Web前端設(shè)計技術(shù)、Web前端測試技術(shù)、Web前端優(yōu)化技術(shù)、Web前端開發(fā)技術(shù)中運(yùn)用的軟件工程等并沒有在圖1中展示。

圖1 Web前端技術(shù)的知識體系結(jié)構(gòu)

Web前端技術(shù)的應(yīng)用情況

JavaScript類庫

JavaScript作為實現(xiàn)網(wǎng)頁交互、動態(tài)效果、AJAX交互等，已是Web前端開發(fā)的必需品。為使JavaScript的開發(fā)輕松、簡單，誕生了JavaScript類庫。JavaScript類庫在Web前端開發(fā)中的使用，使代碼寫的更少、實現(xiàn)的功能更多、瀏覽器兼容性更好。jQuery、Prototype和Dojo都屬于非常強(qiáng)大的JavaScript類庫。其中，jQuery已內(nèi)置在國際頂尖的三套開源CMS（Joomla、WordPress和Drupal）中。

CSS框架

CSS框架不同與JavaScript類庫，CSS 框架是一系列 CSS 文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式、通用規(guī)則等代碼塊。CSS框架提高了開發(fā)和設(shè)計效率，規(guī)范CSS和HTML的開發(fā)。主流的CSS框架有Yahoo Pure、YUI Grid CSS、Blueprint等。

前端開發(fā)框架

前端開發(fā)框架是JavaScript類庫與CSS框架的集合體。前端開發(fā)框架大大簡化了門戶的開發(fā)過程，使設(shè)計者、開發(fā)者更快捷、更出色地完成門戶的搭建工作。Twitter Bootstrap是目前最流行、使用最廣泛的前端開發(fā)框架，其它比較優(yōu)秀的前端開發(fā)框架還有Semantic UI、Foundation等。

2 高校門戶的分析

高校門戶網(wǎng)站現(xiàn)狀分析

筆者對全國39所985高校、112所211高校門戶進(jìn)行了詳細(xì)的調(diào)查統(tǒng)計，對調(diào)查結(jié)果進(jìn)行了大量數(shù)據(jù)分析。將高校門戶網(wǎng)站的現(xiàn)狀進(jìn)行了分析研究，得出基本的結(jié)果如下。

（1）高校在門戶建設(shè)中，頁面靜態(tài)化技術(shù)還未得到普及，40％左右的高校門戶仍直接使用動態(tài)信息發(fā)布技術(shù)。詳見圖2。

圖2 985高校（左）和211高校（右）頁面靜態(tài)化使用情況

（2）多數(shù)高校在門戶建設(shè)中仍使用Flash實現(xiàn)頁面的動態(tài)交互，只有20％左右高校在門戶建設(shè)中淘汰了Flash。詳見圖3。

圖3 985高校（左）和211高校（右）Flash使用情況

（3）數(shù)據(jù)顯示，只有少數(shù)高校在門戶建設(shè)中使用HTML5技術(shù)，85％左右的高校仍然使用HTML4或XHTML技術(shù)，反映出大部分高校的門戶網(wǎng)站還不能夠支持多終端訪問。詳見圖4。

圖4 985高校（左）和211高校（右）HTML5使用情況

存在的共同問題

通過數(shù)據(jù)的對比分析，作為我國高校先頭部隊的985高校和211高校在門戶建設(shè)上，使用的Web前端技術(shù)相對落后，并且沒有充分考慮到用戶體驗，存在的問題也相對集中。

例如，靜態(tài)化技術(shù)是提升門戶訪問速度、降低服務(wù)器壓力的有效手段。但近半數(shù)高校在門戶建設(shè)中并未使用靜態(tài)化技術(shù)。統(tǒng)計數(shù)據(jù)中高校門戶Flash使用率高、HTML5使用率低，說明多數(shù)高校在門戶建設(shè)中對新興技術(shù)的探索不夠投入，看似對舊技術(shù)越來越熟練，實際是對先進(jìn)的Web前端技術(shù)重視不足。

3 應(yīng)用Web前端技術(shù)進(jìn)行高校門戶建設(shè)的優(yōu)勢

應(yīng)用HTML5和CSS3的優(yōu)勢

HTML5與HTML4.0.1相比，進(jìn)行了重大的改進(jìn)。在高校門戶的建設(shè)中的優(yōu)勢也頗多。比如響應(yīng)式門戶，可支持多終端訪問。開發(fā)一套程序便可支持移動終端和桌面客戶端，提高開發(fā)效率，降低門戶建設(shè)成本；HTML5新增的語義標(biāo)簽使定位、布局更加方便，易于搜索引擎進(jìn)行判斷；在表單中，HTML5新增的maxlength、placeholder、required等屬性可減少JavaScript或jQuery的使用，精簡門戶，縮短頁面加載時間；HTML5新增的視頻標(biāo)簽可以直接播放視頻和音頻，無需再加載Flash播放器和第三方播放器；HTML5新增本地存儲可以讓門戶在瀏覽器端保存大量的離線信息，數(shù)據(jù)不會因為頁面刷新或關(guān)閉而改變。

CSS3中增加的豐富效果（比如圓角、字體陰影、邊框陰影、透明、漸變等效果），可降低門戶對圖片效果的依賴，減少門戶中圖片的使用，縮短頁面加載的時間，提升用戶體驗。與HTML5結(jié)合，使HTML5的應(yīng)用優(yōu)勢最大化。

應(yīng)用AJAX技術(shù)的優(yōu)勢

AJAX技術(shù)是一種創(chuàng)建更友好更快捷以及交互性更強(qiáng)的技術(shù)。在門戶中應(yīng)用AJAX技術(shù)，在頁面內(nèi)通過異步方式與Web服務(wù)器通信，無需打斷用戶操作，完成數(shù)據(jù)的加載和頁面內(nèi)容的更新。減少每次請求加載的數(shù)據(jù)，減輕Web服務(wù)器壓力和網(wǎng)絡(luò)寬帶的負(fù)擔(dān)。

應(yīng)用靜態(tài)化技術(shù)的優(yōu)勢

應(yīng)用靜態(tài)化技術(shù)帶給高校一個快速、安全、穩(wěn)定的門戶。靜態(tài)化技術(shù)除去了用戶請求后Web服務(wù)器復(fù)雜的處理環(huán)節(jié)，直接發(fā)送靜態(tài)頁面給用戶的客戶端，縮短用戶等待頁面加載的時間。

程序的崩潰，數(shù)據(jù)庫無法訪問都不會影響門戶的正常訪問，使高校門戶更加穩(wěn)定。減少攻擊漏洞，防止SQL注入，使高校門戶網(wǎng)站的安全性得到巨大提升。

另外，由于搜索引擎對靜態(tài)頁面更加友好，靜態(tài)化發(fā)布高校門戶更容易被搜索引擎抓取，可提高高校門戶的搜索排名，進(jìn)而擴(kuò)大影響力。

應(yīng)用GZIP頁面壓縮的優(yōu)勢

GZIP是一種文件壓縮算法，應(yīng)用GZIP對純文本文件壓縮，文件大小會減少40％以上。在網(wǎng)絡(luò)中傳輸，應(yīng)用GZIP壓縮算法對高校門戶頁面進(jìn)行壓縮，可提高門戶頁面的加載速度，降低高校網(wǎng)絡(luò)帶寬的負(fù)擔(dān)。

GZIP頁面壓縮的優(yōu)勢并不簡單地提高了高校門戶的加載速度，還有利于搜索引擎抓取門戶頁面內(nèi)容。以谷歌搜索引擎為例，搜索引擎可以直接抓取并讀取GZIP壓縮后的門戶頁面。相對未經(jīng)GZIP壓縮的普通頁面，經(jīng)過GZIP壓縮之后的頁面可更快的被谷歌的搜索引擎抓取到，提高門戶的搜索排名。

4 高校門戶建設(shè)的基本原則

統(tǒng)一性原則

門戶設(shè)計要與各部門網(wǎng)站、各院系網(wǎng)站風(fēng)格統(tǒng)一，具有主次分明的視覺印象，形成高校自身特色。

藝術(shù)性原則

門戶設(shè)計除了要滿足用戶對于信息和服務(wù)的需求外，還要增加門戶的美感，滿足用戶的視覺審美需求。

易用性原則

門戶展示的內(nèi)容要全面、有效，重點突出、層次清晰，符合用戶習(xí)慣和空間記憶；門戶提供的服務(wù)和功能要適用、方便，能夠協(xié)助用戶高效、方便地完成信息查詢。

擴(kuò)展性原則

門戶設(shè)計應(yīng)具有可擴(kuò)展性，信息的擴(kuò)充不能影響門戶的框架和風(fēng)格。

流程規(guī)范化原則

門戶規(guī)劃、門戶設(shè)計與開發(fā)、門戶測試、門戶內(nèi)容發(fā)布、門戶運(yùn)維管理等各個流程都應(yīng)有規(guī)范標(biāo)準(zhǔn)。

5 高校門戶建設(shè)的軟件過程探索

高校門戶建設(shè)單一地依賴建設(shè)原則是不夠的，為了保證各類人員在一種組織良好、管理嚴(yán)密的環(huán)境下協(xié)同配合、共同完成門戶建設(shè)，還需要在門戶建設(shè)中引入軟件過程。軟件過程包含瀑布模型、快速原型模型、增量模型、敏捷過程等。

瀑布模型以文檔驅(qū)動項目進(jìn)展，階段間具有順序性和依賴性，必須等待前一階段工作完成，才能開展后一階段工作。但是，由于瀑布模型幾乎完全依賴于書面的規(guī)格說明，很有可能導(dǎo)致最終結(jié)果無法真正滿足用戶的需求。

快速原型模型更有助于保證用戶的真實需求得到滿足，但是快速原型在獲知用戶真正需求后將會被拋棄，快速原型需要在開發(fā)人員盡可能快速的建造原型系統(tǒng)，來減少開發(fā)成本。

增量模型是逐步增加軟件功能，使用戶有充足的時間學(xué)習(xí)和適應(yīng)，減少一個全新的軟件可能給用戶帶來的沖擊。但是，增量模型很難保證新增構(gòu)件不破壞原有軟件體系結(jié)構(gòu)。

敏捷過程具有高效工作和快速響應(yīng)變化的能力，以用戶的需求進(jìn)化為核心，采用迭代、循序漸進(jìn)的方法進(jìn)行軟件開發(fā)，但是敏捷過程完全沒有文檔，對項目來講是一種災(zāi)難。

高校門戶建設(shè)的軟件過程

通過對多種軟件過程進(jìn)行對比，筆者認(rèn)為高校門戶建設(shè)應(yīng)該以用戶需求為核心，采用敏捷過程來建設(shè)，再結(jié)合瀑布模型，以文檔驅(qū)動項目階段性進(jìn)展，彌補(bǔ)敏捷過程無文檔的不足。詳見圖5。

圖5 高校門戶建設(shè)的軟件過程模型

需求調(diào)研與驗證

需求調(diào)研針對不同的用戶群體，收集多種的用戶群體的意見與需求。對調(diào)研結(jié)果進(jìn)行驗證，明確用戶需求。

設(shè)計與審核

根據(jù)用戶需求，對高校門戶進(jìn)行UI設(shè)計和交互設(shè)計。設(shè)計完成之后交付用戶審核，用戶變更需求，返回前一階段。

靜態(tài)頁面開發(fā)、測試與審核

根據(jù)UI設(shè)計和交互設(shè)計，對高校門戶靜態(tài)頁面進(jìn)行開發(fā)。靜態(tài)頁面測試完成之后交付用戶審核，用戶變更需求，返回前一階段。

模板開發(fā)、測試與審核

根據(jù)靜態(tài)頁面，對高校門戶模板進(jìn)行開發(fā)。模板測試完成之后交付用戶審核，用戶變更需求，返回前一階段。

門戶發(fā)布

模板通過用戶審核，對高校門戶進(jìn)行發(fā)布。

門戶優(yōu)化

高校門戶發(fā)布后便開始門戶的維護(hù)工作，不斷對門戶進(jìn)行優(yōu)化，優(yōu)化過程中可能需要返回門戶設(shè)計階段、模板開發(fā)階段對門戶進(jìn)行調(diào)整。

需求變更

用戶需求發(fā)生變更，則按照軟件過程對門戶重新開始執(zhí)行。

高校門戶建設(shè)中引入軟件過程的價值

優(yōu)化項目管理，提高項目質(zhì)量

采用敏捷過程和瀑布模型結(jié)合的軟件過程，把項目分為多個階段，使項目流程化進(jìn)行。每個階段工作完成后，都需要與用戶進(jìn)行溝通，通過與用戶溝通的結(jié)果對項目進(jìn)行迭代開發(fā)，滿足用戶不斷變化的需求。通過對每個階段工作結(jié)果的審核，及時發(fā)現(xiàn)問題，提高項目質(zhì)量。

提高團(tuán)隊執(zhí)行力與工作效率

采用敏捷過程和瀑布模型結(jié)合的軟件過程，能夠讓團(tuán)隊成員清楚的知道每階段的工作流程與每個人的工作職責(zé)，團(tuán)隊成員能夠在每階段工作的執(zhí)行過程中進(jìn)行良好的溝通與協(xié)作，提升團(tuán)隊工作執(zhí)行力，提高團(tuán)隊的工作效率。

6 高校門戶的建設(shè)與服務(wù)模式

目前建設(shè)與服務(wù)模式

目前大多高校門戶是由某一個信息化部門或網(wǎng)絡(luò)中心負(fù)責(zé)建設(shè)與維護(hù)。信息化部門或網(wǎng)絡(luò)中心指定一人負(fù)責(zé)門戶工作，不建設(shè)專業(yè)團(tuán)隊。而門戶工作量大，負(fù)責(zé)人被迫對門戶工作進(jìn)行簡化，導(dǎo)致高校門戶技術(shù)落后、信息發(fā)布混亂、內(nèi)容更新不及時、門戶管理混亂，高校門戶的使用價值不斷降低。

門戶作為高校在互聯(lián)網(wǎng)上傳播信息不可或缺的載體，高校應(yīng)該重視門戶建設(shè)，健全門戶建設(shè)與服務(wù)模式，提升門戶在互聯(lián)網(wǎng)上的宣傳力度。

關(guān)于建設(shè)與服務(wù)模式的探索

自建專業(yè)專職團(tuán)隊

高校自建專業(yè)專職團(tuán)隊進(jìn)行高校門戶建設(shè)和后期維護(hù)。團(tuán)隊成員包括教師和在校大學(xué)生，全權(quán)負(fù)責(zé)門戶的建設(shè)和維護(hù)工作。團(tuán)隊由高校領(lǐng)導(dǎo)直接負(fù)責(zé)，實現(xiàn)高校門戶資源的高效調(diào)動。

團(tuán)隊分為技術(shù)開發(fā)小組、內(nèi)容策劃和編輯小組、運(yùn)維管理小組三個小組。

技術(shù)開發(fā)小組負(fù)責(zé)高校門戶Web前端設(shè)計工作、門戶開發(fā)與測試工作和性能優(yōu)化工作。

內(nèi)容策劃和編輯小組可以與宣傳部、校報、學(xué)生社團(tuán)相結(jié)合，負(fù)責(zé)專題策劃工作、內(nèi)容維護(hù)工作、內(nèi)容審核工作。

運(yùn)維管理小組負(fù)責(zé)服務(wù)器運(yùn)維工作和服務(wù)器安全工作。

大學(xué)生組成的專業(yè)專職團(tuán)隊的建設(shè)，不僅保障了高校門戶的正常運(yùn)營，而且每年可向社會輸出一批具有專業(yè)技能的技術(shù)型人才。

建設(shè)與服務(wù)外包

將門戶的建設(shè)和服務(wù)統(tǒng)一外包給專業(yè)技術(shù)公司，由專業(yè)技術(shù)公司負(fù)責(zé)門戶建設(shè)和后期運(yùn)維管理工作。

多數(shù)文科類高校缺乏門戶設(shè)計、開發(fā)、運(yùn)維人才，將門戶建設(shè)外包給專業(yè)技術(shù)公司，依靠專業(yè)技術(shù)公司快速建設(shè)門戶、保障門戶正常運(yùn)行，可以減少高校在門戶設(shè)計、開發(fā)、運(yùn)維管理工作中人力與物力的投入。

但是，高校門戶建設(shè)和服務(wù)的外包具有兩個弊端。第一，門戶出現(xiàn)的問題需要反饋給外包公司才能得到解決，問題的處理流程繁瑣、不靈活。第二，高校自身仍需要具有內(nèi)容建設(shè)能力，只能將設(shè)計開發(fā)和運(yùn)維管理工作外包。

7 結(jié)束語

在互聯(lián)網(wǎng)的飛速發(fā)展今天，只具備信息展示功能的門戶已經(jīng)不能滿足用戶的需求。但是，使用Web前端技術(shù)已能夠建設(shè)富有文化內(nèi)涵、藝術(shù)創(chuàng)意的門戶，使用戶在瀏覽信息的同時獲得更美感的印象。而作為提供高等教學(xué)和科學(xué)研究的高等教育機(jī)構(gòu)，高校應(yīng)該緊隨互聯(lián)網(wǎng)發(fā)展的腳步，在門戶建設(shè)中充分利用Web前端技術(shù)，建設(shè)更具魅力與特色的門戶，推動國內(nèi)高校門戶改革。

10.3969/j.issn.1001-8972.2015.02.033