國(guó)內(nèi)高校手機(jī)、ipad等觸屏網(wǎng)站建設(shè)現(xiàn)狀、模式、及發(fā)展前景研究

馬亮

摘要：由于互聯(lián)網(wǎng)的普及和展示信息的及時(shí)便捷，高?；径冀ㄔO(shè)了pc版網(wǎng)站，這些網(wǎng)站大大提高了高校向外界提供、展示信息的能力，改善了辦公效率。但是，截至2016年12月，我國(guó)網(wǎng)民規(guī)模達(dá)7.31億，手機(jī)網(wǎng)民占比達(dá)95.1%，手機(jī)在上網(wǎng)設(shè)備中占據(jù)主導(dǎo)地位。由于通過(guò)手機(jī)瀏覽pc版網(wǎng)站操作體驗(yàn)不佳，很多高校已經(jīng)開(kāi)始建設(shè)手機(jī)等智能觸屏版網(wǎng)站。本課題組通過(guò)調(diào)查研究，結(jié)合對(duì)國(guó)外的相調(diào)查，對(duì)國(guó)內(nèi)高校手機(jī)、iPad等觸屏版網(wǎng)站的建設(shè)現(xiàn)狀、模式、及發(fā)展前景進(jìn)行了分析研究。

關(guān)鍵詞：網(wǎng)站；網(wǎng)站建設(shè)；手機(jī)網(wǎng)站；移動(dòng)網(wǎng)站；觸屏網(wǎng)站

說(shuō)明：根據(jù)目前現(xiàn)狀，用戶使用的移動(dòng)觸屏終端主要是手機(jī)，使用iPad等其它移動(dòng)觸屏設(shè)備較少，本文主要使用“手機(jī)網(wǎng)站”這個(gè)詞匯，如果需要將手機(jī)、iPad等移動(dòng)觸屏終端單獨(dú)分析時(shí)，本文會(huì)說(shuō)明；本文只所以把研究范圍限定在國(guó)內(nèi)，是因?yàn)閲?guó)外和國(guó)內(nèi)軟硬件發(fā)展、文化是有差異，但研究時(shí)，也會(huì)結(jié)合國(guó)外的發(fā)展情況。

根據(jù)中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心2017完成的第39次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》，截至2016年12月，我國(guó)網(wǎng)民規(guī)模達(dá)7.31億，普及率達(dá)到53.2%，超過(guò)全球平均水平3.1個(gè)百分點(diǎn)，超過(guò)亞洲平均水平7.6個(gè)百分點(diǎn)，手機(jī)網(wǎng)民占比達(dá)95.1%，我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá)6.95億，增長(zhǎng)率連續(xù)三年超過(guò)10%，臺(tái)式電腦、筆記本電腦的使用率均出現(xiàn)下降。但是，由于高校原來(lái)建設(shè)的傳統(tǒng)pc網(wǎng)站，只適合大屏顯示器和鼠標(biāo)操作，并不適合小顯示屏和觸屏手勢(shì)操作，導(dǎo)致傳統(tǒng)網(wǎng)站使用手機(jī)、iPad等瀏覽，雖然能基本滿足功能需要，但瀏覽、使用的體驗(yàn)較差，為了給使用手機(jī)等觸屏設(shè)備的用戶提供更好的用戶體驗(yàn)，提高辦公效率，很多高校已經(jīng)開(kāi)始著手建設(shè)手機(jī)版網(wǎng)站。本文通過(guò)調(diào)查研究，對(duì)國(guó)內(nèi)高校手機(jī)、iPad等觸屏版網(wǎng)站的建設(shè)現(xiàn)狀、模式、及發(fā)展前景進(jìn)行了分析研究，結(jié)合國(guó)外發(fā)展?fàn)顩r，嘗試提供一些建設(shè)方面的建議供各方參考。

1.國(guó)內(nèi)高校手機(jī)版網(wǎng)站建設(shè)現(xiàn)狀

1.1國(guó)內(nèi)高校信息化軟硬件現(xiàn)狀

國(guó)內(nèi)高校手機(jī)網(wǎng)站建設(shè)現(xiàn)狀，主要由高校信息化軟硬件的水平?jīng)Q定的。經(jīng)過(guò)查閱文獻(xiàn)資料、到一部分高校的信息中心走訪，結(jié)合我校的信息化情況，本課題組發(fā)現(xiàn)，國(guó)內(nèi)高校中還有相當(dāng)多臺(tái)式計(jì)算機(jī)較陳舊，安裝的是windows xp系統(tǒng)，而windows7系統(tǒng)在高校占比最大。根據(jù)“友盟+”互聯(lián)網(wǎng)流量分析網(wǎng)站（https：//www.umeng.com/）的數(shù)據(jù)，從2017年2月20至2017年4月1日訪問(wèn)我校主網(wǎng)站的用戶終端的操作系統(tǒng)及瀏覽器軟件情況如表1-表3所示。移動(dòng)終端占比較少是合理的，因?yàn)榇似陂g主要為上班期間，校內(nèi)職工主要使用臺(tái)式機(jī)辦工。

我們以下稱ie8以及ie8以下的ie瀏覽器為ie低版本瀏覽器。下表2顯示，ie低版本瀏覽器表面上點(diǎn)了5.29%，但其他眾多的國(guó)內(nèi)瀏覽器也使用ie內(nèi)核，所以真正使用ie低版本瀏覽器的臺(tái)式計(jì)算機(jī)遠(yuǎn)遠(yuǎn)大于5.29%，表1中的數(shù)據(jù)也有力地支持了這一結(jié)論，表1顯示有14.45%的臺(tái)式計(jì)算機(jī)還在使用windows xp操作系統(tǒng)，windows xp操作系統(tǒng)預(yù)裝的是ie6瀏覽器，極有可能有14.45%的用戶在使用ie6瀏覽網(wǎng)站，即使部分此類計(jì)算機(jī)安裝了獨(dú)立的非ie內(nèi)核瀏覽器或者雙內(nèi)核瀏覽器，使用ie低版本瀏覽器的用戶也是一個(gè)不容忽視的比例。

我校的這些數(shù)據(jù)，在國(guó)內(nèi)高校中并不是特有現(xiàn)象，具有一定的代表性。近幾年，我校的信息化建議相比較其他高校，還算走在前列，信息化水平較高。

1.2國(guó)內(nèi)高校手機(jī)版網(wǎng)站建設(shè)現(xiàn)狀

本課題組通過(guò)直接瀏覽高校主網(wǎng)站的形式，訪問(wèn)了國(guó)內(nèi)大部分本科院校和一部分高職院校的網(wǎng)站，統(tǒng)計(jì)表明近130所高校建設(shè)了手機(jī)版網(wǎng)站，而且高校手機(jī)版網(wǎng)站建設(shè)呈現(xiàn)以下特點(diǎn)：（1）幾乎所有的高校網(wǎng)站都建立在網(wǎng)站群系統(tǒng)之上；（2）西部地區(qū)建設(shè)手機(jī)網(wǎng)站的比例較少，主要集中在沿海較發(fā)達(dá)的地區(qū)，而且影響力較高的院校、本科院校建設(shè)手機(jī)版網(wǎng)站的比例較高；（3）有些手機(jī)版網(wǎng)站在有些瀏覽器（尤其是低版本的ie瀏覽器）兼容性不夠；（4）絕大部分，只針對(duì)主網(wǎng)站建設(shè)了手機(jī)版網(wǎng)站。

分析上述現(xiàn)狀的成因，（1）之所以高校幾乎都在使用網(wǎng)站群建設(shè)網(wǎng)站系統(tǒng)，是因?yàn)閺墓举?gòu)買(mǎi)的網(wǎng)站群為高?？焖俚慕ㄔO(shè)眾多網(wǎng)站提供了基礎(chǔ)架構(gòu)和基礎(chǔ)模塊，公司有更專業(yè)的研發(fā)能力，一般網(wǎng)站群在定期功能升后，安全性、穩(wěn)定性、功能性都要比高校自己從零開(kāi)發(fā)的網(wǎng)站系統(tǒng)強(qiáng)大很多；（2）手機(jī)版網(wǎng)站建設(shè)首先主要集中在東部沿海發(fā)達(dá)地區(qū)、以及重點(diǎn)院校，是因?yàn)檫@些高校接觸新技術(shù)更及時(shí)、技術(shù)人才多、經(jīng)濟(jì)實(shí)力較雄厚；（3）有些手機(jī)版網(wǎng)站，使用了css3中的媒體查詢功能，利用一套模板響應(yīng)各種pc、手機(jī)、iPad等各種終端，并沒(méi)有專門(mén)建設(shè)手機(jī)版網(wǎng)站，這種方案雖然少維護(hù)了一套模板，但由于國(guó)內(nèi)高校相當(dāng)一部分Pc設(shè)備比較落后，有的還在運(yùn)行windows xp，在使用低版本的ie瀏覽器，而這些瀏覽器并不支持css3媒體查詢功能，雖然通過(guò)采用一些技術(shù)可以讓這些低版本ie部分支持媒體查詢，但畢竟不是瀏覽器原生支持，在運(yùn)行中總會(huì)有很多問(wèn)題出現(xiàn)；4、由于手機(jī)等智能終端的出現(xiàn)，導(dǎo)致網(wǎng)站建設(shè)技術(shù)在近10年內(nèi)出現(xiàn)了劇烈的變化，目前還是一個(gè)相關(guān)技術(shù)動(dòng)蕩、逐步完善的階段，pc端的舊版本瀏覽器也在淘汰之中，在此階段，還不宜大規(guī)模建設(shè)手機(jī)版網(wǎng)站。

2.國(guó)內(nèi)高校手機(jī)版網(wǎng)站建模式

本課題組訪問(wèn)了國(guó)內(nèi)近130所高校已經(jīng)建設(shè)的手機(jī)版網(wǎng)站，分析發(fā)現(xiàn)這些手機(jī)版網(wǎng)站的建設(shè)模式并不相同，總體來(lái)說(shuō)分為兩類：（1）分別為pc版網(wǎng)站和手機(jī)版網(wǎng)站各提供一套模版；f2膜用客戶端自適應(yīng)響應(yīng)設(shè)計(jì)模式，只向用戶推送一套模版和代碼，利用css3的媒體查詢功能，由用戶的瀏覽器根據(jù)自身特性進(jìn)行差異化顯示。經(jīng)過(guò)本課題組研究分析，這兩種方式各有利弊。

2.1分別為pc版網(wǎng)站和手機(jī)版網(wǎng)站各提供一套模版

使用此種模式，當(dāng)用戶瀏覽網(wǎng)站的請(qǐng)求到達(dá)服務(wù)器后，由服務(wù)端程序判斷客戶端瀏覽器的特點(diǎn)和設(shè)備情況，然后向客戶端瀏覽器推送符合客戶端軟硬件設(shè)備特點(diǎn)的html流。優(yōu)點(diǎn)如下：（1）由于手機(jī)版和pc版分開(kāi)，互不影響，在設(shè)計(jì)兩個(gè)版式時(shí)，彼此不受影響，可以做到ui界面、功能迥異，互不干擾；（2）由于兩個(gè)版式單獨(dú)設(shè)計(jì)，發(fā)送給客戶端瀏覽器的代碼比較簡(jiǎn)潔，沒(méi)有冗余代碼；（3）由于兩個(gè)版式單獨(dú)設(shè)計(jì)，客戶端也不需要加載多余的資源；（4）由于pc端有相當(dāng)一部分瀏覽器還是低版本的ie，無(wú)法盡情發(fā)揮html5的功能，但手機(jī)等智能終端的瀏覽器由于發(fā)展晚、起點(diǎn)高，對(duì)htm15的支持良好，可以為手機(jī)版網(wǎng)站加載html5標(biāo)簽和功能。缺點(diǎn)如下：（1）需要維護(hù)兩個(gè)模板；（2）極有可能導(dǎo)致一條信息，兩個(gè)鏈接，這個(gè)取決于程序的編寫(xiě)和站群系統(tǒng)的選擇。

我校此次手機(jī)版網(wǎng)站建設(shè)，使用了此種方式?，F(xiàn)在國(guó)內(nèi)外各大新聞門(mén)戶網(wǎng)站基本上都采用這種形式，有一分部高校也采用了這種方式。但采用兩套模板，往往導(dǎo)致一個(gè)信息有兩個(gè)信息源，手機(jī)版網(wǎng)站和pc版網(wǎng)站的新聞鏈接不同，這種方式顯然不妥當(dāng)。但是，這種不足主要是采用的站群系統(tǒng)的功能導(dǎo)致，而且這個(gè)不足也不是完全不能容忍，事實(shí)上普通用戶往往忽視了這個(gè)問(wèn)題，因?yàn)樗麄兺蛔⒅氐玫叫畔?，并沒(méi)有注意信息的鏈接，只有在極個(gè)別的情況下，如分享信息的時(shí)候才會(huì)覺(jué)察，但有些站群系統(tǒng)，如webplus，提供了兩種鏈接自動(dòng)轉(zhuǎn)化功能。我校使用的站群系統(tǒng)就是webplus站群系統(tǒng)。

有些站群系統(tǒng)可以在為手機(jī)和pc提供不同模板的同時(shí)，能保證一篇新聞只有一個(gè)鏈接。如博達(dá)軟件的站群系統(tǒng)、動(dòng)易公司的站群系統(tǒng)等。其中博達(dá)軟件的站群從表面上看（因?yàn)檎n題組時(shí)間有限，不可能對(duì)所有的站群進(jìn)行深人的研究），提供了更好的方式，它使用靜態(tài)網(wǎng)頁(yè)生成技術(shù)的同時(shí)，在保證了一個(gè)信息只有一個(gè)鏈接的情況下，能向手機(jī)版用戶、iPad用戶、pc版用戶提供不同的前臺(tái)展示模板，這個(gè)站群系統(tǒng)利用了cookie技術(shù)、偽靜態(tài)網(wǎng)頁(yè)技術(shù)，很好的完成了這一功能。動(dòng)易系統(tǒng)雖然有靜態(tài)網(wǎng)站生成功能，他們并不贊成使用，他們會(huì)認(rèn)為啟用靜態(tài)網(wǎng)頁(yè)生成功能會(huì)導(dǎo)致系統(tǒng)復(fù)雜，這個(gè)觀點(diǎn)有分部道理，他們一直致力于整個(gè)系統(tǒng)使用動(dòng)態(tài)網(wǎng)站技術(shù)。動(dòng)易系統(tǒng)如果啟用了手機(jī)版網(wǎng)站必須使用動(dòng)態(tài)技術(shù)，不能使用靜態(tài)網(wǎng)頁(yè)技術(shù)。啟用靜態(tài)網(wǎng)頁(yè)技術(shù)除了考慮安全性之外，主要考慮的是訪問(wèn)速度問(wèn)題，由于靜態(tài)網(wǎng)頁(yè)在服務(wù)端已經(jīng)生成，用戶訪問(wèn)時(shí)只是取得靜態(tài)網(wǎng)頁(yè)的過(guò)程，而動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)導(dǎo)致用戶每次訪問(wèn)鏈接，都要由服務(wù)器程序即時(shí)執(zhí)行程序得到用戶所需要的html流，然后發(fā)給用戶，加重了服務(wù)器訪的負(fù)擔(dān)，由于訪問(wèn)頁(yè)面時(shí)延較長(zhǎng)些，會(huì)導(dǎo)致用戶體驗(yàn)稍微不佳，但由于現(xiàn)在配置較好的服務(wù)器，運(yùn)算速度較快，如果采用性能優(yōu)良的服務(wù)器，這種時(shí)延也可以忽略。但是，一些采用靜態(tài)網(wǎng)頁(yè)技術(shù)的站群系統(tǒng)，把制作服務(wù)器和發(fā)布服務(wù)器分開(kāi)，發(fā)布服務(wù)器暴露上互聯(lián)網(wǎng)上，制作服務(wù)只在校內(nèi)訪問(wèn)，這種模式的確加強(qiáng)了服務(wù)器的安全性，使制作服務(wù)器不容易受到黑客攻擊。

2.2使用客戶端自適應(yīng)響應(yīng)設(shè)計(jì)模式，只向用戶推送一套模版和代碼

此種模式主要使用了css3的媒體查詢功能，服務(wù)器向客戶端瀏覽器無(wú)差別推送相同的html流，html流到達(dá)客戶端瀏覽器后，瀏覽器會(huì)根據(jù)css3的媒體查詢指令、相關(guān)的js腳本以及自身瀏覽器的特性、設(shè)備特性，最終確定顯示的模塊和顯示風(fēng)格。這種方式有如下優(yōu)點(diǎn)：1）只需要一套模板，維護(hù)時(shí)也只針對(duì)一套模板；2）由于只是瀏覽器根據(jù)相關(guān)指令調(diào)整顯示效果，信息的鏈接一定是唯一的。缺點(diǎn)如下：1）前文數(shù)據(jù)已經(jīng)分析，目前國(guó)內(nèi)pc上的瀏覽還有相當(dāng)一部分是低版本的ie，這部分低版本的ie并不支持css3的媒體查詢功能，如果使用同一個(gè)模板，css3的媒體查詢提供了關(guān)鍵的功能，雖然通過(guò)采用一些技術(shù)可以讓這些低版本ie部分支持媒體查詢，但畢竟不是瀏覽器原生支持，在運(yùn)行中總會(huì)有很多問(wèn)題出現(xiàn)；2）低版本ie瀏覽器對(duì)html5的支持度很低，而手機(jī)等智能觸屏設(shè)備的瀏覽器對(duì)htm15支持良好，如果采用同一個(gè)模板，導(dǎo)致不得不采取就低原則，取消很多html5在手機(jī)等智能觸屏設(shè)備上的功能，雖然可以通過(guò)技術(shù)進(jìn)行兼容性判斷，但增加了代碼的復(fù)雜度，為以后維護(hù)網(wǎng)站埋下了隱患；3）如果使用同一個(gè)模板自適應(yīng)各種終端，由于使用同一個(gè)版式進(jìn)行自適應(yīng)，這就導(dǎo)致手機(jī)網(wǎng)站和pc網(wǎng)站在版式上相同影響和遷就，版式設(shè)計(jì)風(fēng)格更傾向于趨同，不利于向手機(jī)和pc推送差異化較大的版式；4）如果采用同一個(gè)版式，為了使版式在不同設(shè)備和分辨上有不同的展示效果，會(huì)導(dǎo)致編寫(xiě)的客戶端代碼較復(fù)雜，再加上一些兼容性的代碼，導(dǎo)致以后修改網(wǎng)站版式變得困難；5）在使用媒體查詢技術(shù)將手機(jī)版網(wǎng)站和pc端網(wǎng)站統(tǒng)一在一個(gè)模板之上，會(huì)導(dǎo)致瀏覽器加載無(wú)用的代碼和資源，為適應(yīng)pc和觸屏設(shè)備，兩個(gè)版式顯示的模塊的方式會(huì)有不同，在各種設(shè)備中各種模板極有可能被開(kāi)啟或者關(guān)閉顯示，但這些模塊的代碼依然要被加載到客戶端瀏覽器，雖然可以在服務(wù)器端根據(jù)客戶端瀏覽器的狀況發(fā)送不同的客戶端代碼，但由于高校的網(wǎng)站基本上都建立在成熟的站群系統(tǒng)之上，而站群系統(tǒng)一般不會(huì)在服務(wù)器端提供這種編程功能。

上述相當(dāng)一部分缺點(diǎn)和不足，基本上都是國(guó)內(nèi)臺(tái)式計(jì)算機(jī)設(shè)備陳舊、安裝的操作系統(tǒng)和瀏覽器版本過(guò)低造成的，在歐美一些發(fā)達(dá)國(guó)家，使用客戶端響應(yīng)模式較流行，國(guó)內(nèi)相當(dāng)一部分高校也采用了這種方式，但國(guó)內(nèi)高校在采用這種方式的時(shí)候，基本都對(duì)低版本的ie瀏覽器作了兼容性的考慮，采用的方式有以下幾種：1）當(dāng)ie瀏覽器的版本等于或低于ie8時(shí)，沒(méi)有響應(yīng)效果，采用固定版式；2）針對(duì)pc端瀏覽器，均沒(méi)有響應(yīng)效果，只在手機(jī)、iPad等智能觸屏終端上有響應(yīng)式效果；3）對(duì)非ie瀏覽器采用響應(yīng)式效果。

3.手機(jī)版網(wǎng)站發(fā)展前景

隨著移動(dòng)網(wǎng)絡(luò)速度上傳下載速率迅速提升，以及手機(jī)、iPad等智能終端設(shè)備性能的飛速提高，人類使用手機(jī)等智能移動(dòng)設(shè)備接入互聯(lián)網(wǎng)，處理工作、生活中事務(wù)將會(huì)是首先方式。雖然app功能強(qiáng)大，但基于瀏覽器的應(yīng)用有一個(gè)優(yōu)勢(shì)——不需要安裝。對(duì)于只展示、交互較少的互聯(lián)網(wǎng)應(yīng)用，網(wǎng)頁(yè)形式將是首選。也許在將來(lái)，隨著html5功能的日益完善，app和網(wǎng)頁(yè)將會(huì)統(tǒng)一。但是，就目前來(lái)說(shuō)，基于瀏覽器的應(yīng)用，在展示信息方面還是不可取代的，這就導(dǎo)致必須要為占網(wǎng)站訪問(wèn)量最大的手機(jī)用戶設(shè)計(jì)適合其設(shè)備特點(diǎn)的網(wǎng)頁(yè)版式，提高其瀏覽體驗(yàn)。

就目前來(lái)，兩種建設(shè)手機(jī)網(wǎng)站的模式將并存，因?yàn)檫@兩種模式各有優(yōu)缺點(diǎn)。為各種設(shè)備提供不同的版式，雖然在調(diào)整版式的時(shí)候，工作量大一些，但也避免了幾種版式的相互影響，不至于改一處影響全部終端用戶，事實(shí)上，如果使用客戶端響應(yīng)式，只提供一種版式，在調(diào)整版式時(shí)也不見(jiàn)得就輕松簡(jiǎn)單，因?yàn)槿魏未a的調(diào)整都要考慮到在幾種設(shè)備的效果。

關(guān)于采用何種模式，要考慮以下因素：1）客戶使用的臺(tái)式計(jì)算機(jī)瀏覽器ie版本，如果是公司內(nèi)網(wǎng)使用，瀏覽器版本高，可以考慮使用客戶端響應(yīng)式，只推送一套版式；2）網(wǎng)站規(guī)模，如果只是幾個(gè)簡(jiǎn)單的展示頁(yè)面，功能較少，可以考慮只推送一套版式；3）使用客戶端響應(yīng)式，其實(shí)版式一般為塊狀風(fēng)格，并且手機(jī)版和pc版風(fēng)格一般趨同。