關注Web前端：掀門戶網站改版潮

文/劉歡

關注Web前端：掀門戶網站改版潮

文/劉歡

目前，許多高校已經開始意識到前端工作對于校園Web應用的重要性，并開始反思過去信息化工作中對于Web前端的忽視。一個最好的證明就是高校的門戶網站改版潮。

Web前端的過去和現在

Web前端（Front-End）泛指Web應用中表面化的，用戶看得見、摸得著的內容，包括外觀界面、頁面內容、操作交互等。與之相對應的則是后端（Back-End），如腳本編程、數據庫交互、業務邏輯處理、服務器配置和管理等。絕大部分Web應用都同時包括了前端和后端。前后端相互配合，各種信息數據由后端生成，并通過前端呈現給用戶。

在早期的Web應用開發中，前端工作主要是指HTML頁面的開發。由于網絡速度、電腦硬件、瀏覽器軟件等因素的制約，彼時的前端開發工作大都局限于簡單的頁面內容呈現。由于HTML頁面的創建較為簡單，后端開發人員常常包攬了前后端的工作，以致于前后端之間的區分顯得較為模糊。

隨著網絡速度和電腦硬件水平的提升，在確?；镜膬热蒿@示的前提下，人們開始考慮如何使Web應用顯得更加美觀，前后端的分離逐漸顯現。此時出現了“網頁設計”、“網站美工”等一系列新名詞，一些專門的藝術設計人員參與到Web應用開發中，開始為站點設計各種外觀界面。這些人也因此成為了最早的專門從事前端開發的人群。

然而問題也同時浮現出來。早期的前端開發者往往缺少對代碼和編程的了解。在這一時期，站點界面中的圖片修飾常通過“切圖”的方式完成，HTML的架構也大都借助于表格定位。CSS開始被前端開發者使用，但往往僅用于指定一些簡單的外觀樣式。這些問題的凸顯，使得前端開發顯得不那么富有技術價值，并在一段時間內陷于較為尷尬的境地。

隨著瀏覽器的升級換代，以及各種終端設備的不斷涌現，前端逐漸被賦予了新的涵義。此時的前端工作不僅需要考慮應用的視覺效果，還需要考慮用戶的使用體驗，構思人機交互的過程，并試圖將應用在多種設備環境中加以呈現，所涉及的主要技術不僅局限于HTML和CSS，而且還包括了JavaScript。前端設計和前端開發成為了前端工作的兩個主要分支。其中，前端設計是對Web應用的視覺、交互等效果的構想與規劃，而前端開發則負責通過編寫代碼來實現這些視覺效果。前端不再是一個缺少技術含量的工作崗位，相反它卻對從業者提出了較高的要求。在后端技術差異逐步縮小的今天，前端的優劣已然成為了評價Web應用質量的重要標準。

Web前端與高校信息化建設

2014年是中國接入國際互聯網的20周年，回顧過去的這段時間，Web前端的概念從無到有，其技術逐漸興起、發展并走向成熟，前端工作者們極大地改變了人們獲取互聯網海量信息的方式，乃至于影響了大眾的Web交互習慣和審美興趣，其間的變化不可謂不大。然而在高校的信息化建設中，Web前端的相關工作卻始終是軟肋之一，這主要體現在兩個方面：

一是高校Web應用用戶交互體驗的薄弱。在過去，高校的信息化主要解決的是“有沒有”的問題。在軟件建設中，關注重心主要在于各類信息化系統的功能實現，在于系統是否能按時按需完成，此時后端的開發處于相對更加重要的位置，前端的比重被大大壓縮，甚至被完全忽略。這些信息化系統在建成并投入使用后，逐漸成為了高校日常教學、科研、管理工作中不可或缺的部分，但由于前后端投入的差異，使得系統的展示層面常常缺乏對用戶操作體驗的關注，其后果是系統在師生中的滿意度往往并不高，校園用戶常常抱怨“系統不好用”、“很難上手”、“操作不友好”、“在某些瀏覽器中無法訪問”等等。

二是高校Web應用外觀視覺效果的薄弱。校園Web應用包括了門戶網站和各類信息化系統。其中，門戶網站是高校對外宣傳的重要窗口，優秀的門戶網站設計有助于提升訪問者的感官體驗，塑造良好的學校形象，高校理應對其門戶網站的前端效果設置較高的標準和要求。但事實上，許多高校門戶網站的前端設計質量不佳，在色彩、圖像、排版等方面的處理較為隨意，使瀏覽者很難產生“美”的感覺。與門戶網站所不同，各類信息化系統在視覺效果方面的要求并不高，但這也并不意味著這些系統能夠完全忽視界面的視覺效果。當前許多高校信息化系統往往界面丑陋，或是過度修飾，飽受校園用戶的詬病。

在高校新一輪信息化建設中，用戶是否滿意成為了評價信息化建設質量的重要標準。與此同時，Web前端作為提升用戶滿意度的關鍵手段之一，其重要性也越來越凸顯。首先，Web前端工作有助于解決高校信息化系統中存在的各種現有問題。例如，高校信息化系統的一大痼疾是瀏覽器兼容性問題，系統常常只能在特定的瀏覽器中才能正常使用，這給用戶帶來了極大的不便。而通過前端技術則能夠有效地解決兼容性問題，使得用戶在使用大多數瀏覽器來查看網站或者系統時，能夠保持統一的顯示效果和可操作性。

其次，Web前端工作有助于改善用戶體驗，提升高校的信息化服務質量。例如，高校信息化系統的交互層面常常缺乏人性化的設計，導致用戶學習成本較高，使用效率低下，而前端技術則能夠使這些交互過程更加清晰、順暢、友好，實現情感化的、富有人文關懷的人機交互。通過前端設計加以美化后的門戶網站和信息化系統，則能夠給予用戶愉悅的視覺感受，提升應用的外觀水準。

再之，Web前端工作還有助于高校開拓新的信息化服務領域。過去的高校信息化服務主戰場是單一的PC客戶端瀏覽器，時至今日，局面卻大不相同，平板電腦、手機等新型移動設備層出不窮，對應的平臺也紛繁復雜，此時高校迫切需要思考如何在新的終端領域，以新的形式為校園用戶提供服務。Web前端開發無疑是高校目前應對這一問題的最佳的，甚至是唯一的解決方案。

目前，許多高校已經開始意識到前端工作對于校園Web應用的重要性，并開始反思過去信息化工作中對于Web前端的忽視。一個最好的證明就是高校的門戶網站改版潮。在過去兩年中，大批國內高校開始關注門戶網站的宣傳效果，紛紛對網站進行設計美化，實施大規模的改版，使網站的前端效果緊跟時代潮流。這一舉動收獲了令人意想不到的效果，當中國人民大學在其改版后的官網首頁中登出一張“人大女神”照片后，引發了強烈的社會關注，其服務器甚至一度被擠爆。

然而，高校的Web前端之路卻注定并不平坦，Web前端的相關工作很難被輕易駕馭。對于高校信息化建設而言，前端問題的復雜性甚至很可能遠超過后端。擺在高校面前的棘手問題至少包括以下幾點：

其一，比起后端技術，Web前端技術更新換代更快，框架更加多樣化，成熟的技術方案更稀缺，且可借鑒并照搬復制的成功經驗極少。如在前端界面方面，目前就有Bootstrap、Foundation、SemanticUI、Pure等不同的開發框架，在JavaScript函數庫方面，則有jQuery、Dojo、YUI、Extjs、angular等框架。這些框架自身處于不斷升級和更新的狀態中，有的框架在經歷一段時間的發展后便消亡了，而更多新的框架則如雨后春筍般出現。要緊跟技術發展的潮流，并能夠在諸多可選項中選取合適的前端技術方案，是一件非常有難度的事情。

其二，瀏覽器的不斷更新換代，移動設備的推陳出新，使得前端開發人員往往疲于應付。瀏覽器兼容性是前端開發中需要考慮的重要問題，但為數眾多的IE瀏覽器歷史版本，各式各樣的語言標準，使得每解決一個兼容性問題都需要付出大量的時間和精力。此外，在移動互聯網時代，要使得Web應用能夠完美兼容筆記本、平板電腦、手機等參數各異的不同設備，開發人員也面臨著巨大的挑戰。

其三，除“IT外包”外，高校也需要在其信息化建設過程中組建一支屬于自己的前端開發團隊。然而，相較于后端開發者而言，優秀的前端開發者較為稀缺，高校要招募且留存其中水平較高的開發人員，其操作難度和投入程度無疑也較高。此外，高校還需要考慮如何創造適宜的學習工作環境，以實現前端開發團隊中成員的個人可持續發展。

其四，對于校園用戶而言，他們每天都會在互聯網中接觸到形形色色的Web應用，其中許多應用來自大型互聯網公司，具有著較高的前端設計水準。這在無形中豐富了校園用戶的前端交互經驗，提升了用戶的審美口味，并使得用戶對于高校Web應用產生了更高的期許。高校要期望給予用戶以“驚喜”的使用體驗，除了需要緊跟時代潮流外，更重要的是要發展屬于高校的個性化創意和思想，而這無疑也是前端工作中最難做好的一件事情。

華東師范大學的前端開發實踐

近年來，華東師范大學在優化前端開發方面已經做出了大量嘗試。較具代表性的是2012年的門戶網站改版，在完成這一任務的過程中，我們將前端設計與開發放在了較為重要的位置，為站點制訂了較高的外觀和用戶體驗要求。

首先，在改版的策劃階段，我們沒有采用將電腦版和移動版網站分開制作的方式，而是選擇了使用響應式設計這一新興的前端技術，通過HTML5與CSS的結合，并配合必要的JavaScript代碼，實現門戶網站在各種不同設備中的優化顯示。我們設計了門戶網站在不同分辨率設備中的顯示效果，構思了網站中各種元素在不同情形下的排列、演變過程，并據此設計HTML頁面結構，編寫CSS響應規則。最終生成的前端主頁能在各種PC、平板電腦和手機中實現自適應顯示。

除使用響應式技術外，我們還在開發中加入了大量前端細節。例如為了使用戶能夠更好地獲取門戶網站首頁中的公告信息，我們利用了HTML5的LocalStorage特性，將首頁中的公告列表信息寫入瀏覽器的本地存儲中。當用戶再次訪問首頁時，前端頁面會將公告列表與本地存儲中的列表進行比對，若存在新的公告，頁面則會自動彈出提示框，提醒用戶有未讀的消息。當用戶點擊該提示框時，頁面將直接顯示未讀的公告鏈接。這一功能使得用戶無需點擊展開公告欄目即可快速獲得最新的公告資訊，且省去了通過后端進行開發的復雜流程和數據存儲開支。

又如，在門戶網站首頁中存在一個名為“學術報告”的欄目，用于滾動顯示近期的學術報告名稱、時間和地點。為了便于校園用戶能夠更快捷地記錄自己感興趣的學術報告信息，我們加入了另一個有趣的前端細節，即通過前端頁面的JavaScript生成一個添加Google日歷的URL，在其中拼接學術報告的標題、起始和結束時間、地點等參數，并在頁面中每個報告的右側創建一個帶有該鏈接的圖標。當用戶看到自己感興趣的報告時，即可通過點擊該圖標，將這一講座信息直接添加到自己的Google日程中，或者將該信息同步到用戶的安卓移動設備上。

此外，我們還通過前端頁面制作了視頻與圖片混合輪動的跑馬燈效果，使得首頁的焦點區域不僅只顯示傳統的大幅宣傳圖片輪播，而且還使得用戶能夠在其中觀看視頻，獲得更加豐富的資訊和更深入的交互體驗；通過記錄用戶過去在首頁上的郵箱登錄記錄，在前端頁面中為用戶自動預先填入郵箱的用戶名和后綴，以實現郵箱的一鍵快速登錄；通過將文章內容中的圖片代碼進行提取，在前端頁面中以圖集的形式全屏輪動展示這些圖片，以便于用戶對圖片的集中瀏覽，等等。經過前端人員的精心設計與開發，門戶網站改版工作最終獲得了絕大部分師生的好評，網站的訪問量隨之快速上升。學校也通過本次門戶網站的前端改造塑造了良好的網絡形象。

展望

在過去，Web前端設計與開發僅僅受到少數大型互聯網公司的重視，而時至今日，Web前端也成為了高校信息化建設的新焦點。我們認為，高校應該針對Web前端采取更加積極主動的態度，投入更多的關注。當前Web前端主要包含了HTML、CSS和JavaScript三種技術，隨著互聯網的快速發展，Web前端的未來變數極大，新的技術可能會不斷涌現，它也因此成為最有可能為高校信息化建設帶來顛覆性變革的力量之一。

（作者單位為華東師范大學信息化辦公室）