文/劉歡

關(guān)注Web前端：掀門戶網(wǎng)站改版潮

文/劉歡

目前，許多高校已經(jīng)開始意識(shí)到前端工作對(duì)于校園Web應(yīng)用的重要性，并開始反思過(guò)去信息化工作中對(duì)于Web前端的忽視。一個(gè)最好的證明就是高校的門戶網(wǎng)站改版潮。

Web前端的過(guò)去和現(xiàn)在

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

在早期的Web應(yīng)用開發(fā)中，前端工作主要是指HTML頁(yè)面的開發(fā)。由于網(wǎng)絡(luò)速度、電腦硬件、瀏覽器軟件等因素的制約，彼時(shí)的前端開發(fā)工作大都局限于簡(jiǎn)單的頁(yè)面內(nèi)容呈現(xiàn)。由于HTML頁(yè)面的創(chuàng)建較為簡(jiǎn)單，后端開發(fā)人員常常包攬了前后端的工作，以致于前后端之間的區(qū)分顯得較為模糊。

隨著網(wǎng)絡(luò)速度和電腦硬件水平的提升，在確保基本的內(nèi)容顯示的前提下，人們開始考慮如何使Web應(yīng)用顯得更加美觀，前后端的分離逐漸顯現(xiàn)。此時(shí)出現(xiàn)了“網(wǎng)頁(yè)設(shè)計(jì)”、“網(wǎng)站美工”等一系列新名詞，一些專門的藝術(shù)設(shè)計(jì)人員參與到Web應(yīng)用開發(fā)中，開始為站點(diǎn)設(shè)計(jì)各種外觀界面。這些人也因此成為了最早的專門從事前端開發(fā)的人群。

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

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

Web前端與高校信息化建設(shè)

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

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

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

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

其次，Web前端工作有助于改善用戶體驗(yàn)，提升高校的信息化服務(wù)質(zhì)量。例如，高校信息化系統(tǒng)的交互層面常常缺乏人性化的設(shè)計(jì)，導(dǎo)致用戶學(xué)習(xí)成本較高，使用效率低下，而前端技術(shù)則能夠使這些交互過(guò)程更加清晰、順暢、友好，實(shí)現(xiàn)情感化的、富有人文關(guān)懷的人機(jī)交互。通過(guò)前端設(shè)計(jì)加以美化后的門戶網(wǎng)站和信息化系統(tǒng)，則能夠給予用戶愉悅的視覺(jué)感受，提升應(yīng)用的外觀水準(zhǔn)。

再之，Web前端工作還有助于高校開拓新的信息化服務(wù)領(lǐng)域。過(guò)去的高校信息化服務(wù)主戰(zhàn)場(chǎng)是單一的PC客戶端瀏覽器，時(shí)至今日，局面卻大不相同，平板電腦、手機(jī)等新型移動(dòng)設(shè)備層出不窮，對(duì)應(yīng)的平臺(tái)也紛繁復(fù)雜，此時(shí)高校迫切需要思考如何在新的終端領(lǐng)域，以新的形式為校園用戶提供服務(wù)。Web前端開發(fā)無(wú)疑是高校目前應(yīng)對(duì)這一問(wèn)題的最佳的，甚至是唯一的解決方案。

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

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

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

其二，瀏覽器的不斷更新?lián)Q代，移動(dòng)設(shè)備的推陳出新，使得前端開發(fā)人員往往疲于應(yīng)付。瀏覽器兼容性是前端開發(fā)中需要考慮的重要問(wèn)題，但為數(shù)眾多的IE瀏覽器歷史版本，各式各樣的語(yǔ)言標(biāo)準(zhǔn)，使得每解決一個(gè)兼容性問(wèn)題都需要付出大量的時(shí)間和精力。此外，在移動(dòng)互聯(lián)網(wǎng)時(shí)代，要使得Web應(yīng)用能夠完美兼容筆記本、平板電腦、手機(jī)等參數(shù)各異的不同設(shè)備，開發(fā)人員也面臨著巨大的挑戰(zhàn)。

其三，除“IT外包”外，高校也需要在其信息化建設(shè)過(guò)程中組建一支屬于自己的前端開發(fā)團(tuán)隊(duì)。然而，相較于后端開發(fā)者而言，優(yōu)秀的前端開發(fā)者較為稀缺，高校要招募且留存其中水平較高的開發(fā)人員，其操作難度和投入程度無(wú)疑也較高。此外，高校還需要考慮如何創(chuàng)造適宜的學(xué)習(xí)工作環(huán)境，以實(shí)現(xiàn)前端開發(fā)團(tuán)隊(duì)中成員的個(gè)人可持續(xù)發(fā)展。

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

華東師范大學(xué)的前端開發(fā)實(shí)踐

近年來(lái)，華東師范大學(xué)在優(yōu)化前端開發(fā)方面已經(jīng)做出了大量嘗試。較具代表性的是2012年的門戶網(wǎng)站改版，在完成這一任務(wù)的過(guò)程中，我們將前端設(shè)計(jì)與開發(fā)放在了較為重要的位置，為站點(diǎn)制訂了較高的外觀和用戶體驗(yàn)要求。

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

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

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

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

展望

在過(guò)去，Web前端設(shè)計(jì)與開發(fā)僅僅受到少數(shù)大型互聯(lián)網(wǎng)公司的重視，而時(shí)至今日，Web前端也成為了高校信息化建設(shè)的新焦點(diǎn)。我們認(rèn)為，高校應(yīng)該針對(duì)Web前端采取更加積極主動(dòng)的態(tài)度，投入更多的關(guān)注。當(dāng)前Web前端主要包含了HTML、CSS和JavaScript三種技術(shù)，隨著互聯(lián)網(wǎng)的快速發(fā)展，Web前端的未來(lái)變數(shù)極大，新的技術(shù)可能會(huì)不斷涌現(xiàn)，它也因此成為最有可能為高校信息化建設(shè)帶來(lái)顛覆性變革的力量之一。

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