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

阮曉龍

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

阮曉龍

阮曉龍

河南中醫學院網絡信息中心

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

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

1 Web前端技術

什么是Web前端

Web前端包含Web前端設計（UI設計、交互設計等）、Web前端開發（HTML、CSS、JavaScript等）、Web前端測試、Web前端優化等。網站只是Web前端的最終展現形式，并不是Web前端的全部內容。

什么是Web前端技術

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

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

Web前端技術的應用情況

JavaScript類庫

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

CSS框架

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

前端開發框架

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

2 高校門戶的分析

高校門戶網站現狀分析

筆者對全國39所985高校、112所211高校門戶進行了詳細的調查統計，對調查結果進行了大量數據分析。將高校門戶網站的現狀進行了分析研究，得出基本的結果如下。

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

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

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

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

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

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

存在的共同問題

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

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

3 應用Web前端技術進行高校門戶建設的優勢

應用HTML5和CSS3的優勢

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

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

應用AJAX技術的優勢

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

應用靜態化技術的優勢

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

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

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

應用GZIP頁面壓縮的優勢

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

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

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

統一性原則

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

藝術性原則

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

易用性原則

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

擴展性原則

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

流程規范化原則

門戶規劃、門戶設計與開發、門戶測試、門戶內容發布、門戶運維管理等各個流程都應有規范標準。

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

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

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

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

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

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

高校門戶建設的軟件過程

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

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

需求調研與驗證

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

設計與審核

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

靜態頁面開發、測試與審核

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

模板開發、測試與審核

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

門戶發布

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

門戶優化

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

需求變更

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

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

優化項目管理，提高項目質量

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

提高團隊執行力與工作效率

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

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

目前建設與服務模式

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

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

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

自建專業專職團隊

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

團隊分為技術開發小組、內容策劃和編輯小組、運維管理小組三個小組。

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

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

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

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

建設與服務外包

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

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

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

7 結束語

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

10.3969/j.issn.1001-8972.2015.02.033