高校門戶建設中Web前端技術

阮曉龍

高校門戶建設中Web前端技術

阮曉龍

阮曉龍

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

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

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

1 Web前端技術

什么是Web前端

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

什么是Web前端技術

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

圖1 Web前端技術的知識體系結構

Web前端技術的應用情況

JavaScript類庫

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

CSS框架

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

前端開發(fā)框架

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

2 高校門戶的分析

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

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

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

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

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

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

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

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

存在的共同問題

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

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

3 應用Web前端技術進行高校門戶建設的優(yōu)勢

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

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

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

應用AJAX技術的優(yōu)勢

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

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

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

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

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

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

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

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

4 高校門戶建設的基本原則

統(tǒng)一性原則

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

藝術性原則

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

易用性原則

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

擴展性原則

門戶設計應具有可擴展性，信息的擴充不能影響門戶的框架和風格。

流程規(guī)范化原則

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

5 高校門戶建設的軟件過程探索

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

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

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

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

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

高校門戶建設的軟件過程

通過對多種軟件過程進行對比，筆者認為高校門戶建設應該以用戶需求為核心，采用敏捷過程來建設，再結合瀑布模型，以文檔驅動項目階段性進展，彌補敏捷過程無文檔的不足。詳見圖5。

圖5 高校門戶建設的軟件過程模型

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

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

設計與審核

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

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

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

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

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

門戶發(fā)布

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

門戶優(yōu)化

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

需求變更

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

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

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

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

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

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

6 高校門戶的建設與服務模式

目前建設與服務模式

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

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

關于建設與服務模式的探索

自建專業(yè)專職團隊

高校自建專業(yè)專職團隊進行高校門戶建設和后期維護。團隊成員包括教師和在校大學生，全權負責門戶的建設和維護工作。團隊由高校領導直接負責，實現(xiàn)高校門戶資源的高效調(diào)動。

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

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

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

運維管理小組負責服務器運維工作和服務器安全工作。

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

建設與服務外包

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

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

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

7 結束語

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

10.3969/j.issn.1001-8972.2015.02.033