黃 磊 任鳳君 鄭禮河

（福建醫(yī)科大學(xué)，福建福州，350122）

一、前言

隨著移動互聯(lián)網(wǎng)和智能終端的飛速發(fā)展，師生獲取信息與服務(wù)的渠道逐漸從PC端轉(zhuǎn)移到智能手機、平板電腦等移動終端。諸如郵箱、新聞閱讀、地圖、搜索等基礎(chǔ)性移動服務(wù)在教育行業(yè)均得到廣泛應(yīng)用，顛覆了互聯(lián)網(wǎng)以網(wǎng)頁為核心的應(yīng)用形態(tài),APP成為移動互聯(lián)網(wǎng)應(yīng)用服務(wù)的主導(dǎo)形態(tài)，催生了全新的應(yīng)用服務(wù)體系和生態(tài)環(huán)境。2019年2月28日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布第43次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》。報告顯示，截至2018年12月，我國網(wǎng)民規(guī)模為8.29億，其中手機網(wǎng)民占比達98.6%。

高校傳統(tǒng)的信息服務(wù)，主要以網(wǎng)站為主，已經(jīng)不能滿足師生的需求，如何快速的占領(lǐng)智能終端，適應(yīng)“移動優(yōu)先”的發(fā)展需求，已經(jīng)成為高校信息化管理人員考慮的首要問題。然而快速搭建校園移動服務(wù)的環(huán)境基礎(chǔ)相對薄弱，師生獲取信息的渠道多而繁雜，各類官方應(yīng)用、本校創(chuàng)業(yè)團隊應(yīng)用和第三方通用應(yīng)用參差不齊，造成使用者多渠道登錄，信息不一致，無法適應(yīng)師生日益增長的移動服務(wù)需求。同時移動端的信息安全，也給學(xué)校帶來了挑戰(zhàn)。

二、網(wǎng)站群管理平臺及移動校園A P P

高校為了解決內(nèi)部各單位網(wǎng)站制作水平不一，網(wǎng)站使用技術(shù)不一，網(wǎng)站數(shù)據(jù)互相獨立，難以資源共享及網(wǎng)站的安全性低等方面的問題，搭建網(wǎng)站群管理平臺，實現(xiàn)對各單位網(wǎng)站統(tǒng)一管理和信息互通、資源共享。為了滿足師生日益增長的移動服務(wù)需求，統(tǒng)一信息服務(wù)的獲取渠道，提高移動應(yīng)用的質(zhì)量，移動校園APP的建設(shè)的需求顯得愈發(fā)迫切。學(xué)校急需構(gòu)建一個開放、安全、可控的移動信息服務(wù)的運行環(huán)境，為師生提供統(tǒng)一移動應(yīng)用入口、安全穩(wěn)定、可信、權(quán)威的校內(nèi)信息服務(wù)。

（一）網(wǎng)站群管理平臺

網(wǎng)站群管理平臺采用數(shù)據(jù)庫服務(wù)器、制作服務(wù)器和靜態(tài)發(fā)布服務(wù)器分開部署的方式。使用N層體系結(jié)構(gòu)：基礎(chǔ)設(shè)施層、技術(shù)支撐層、應(yīng)用層、頁面展現(xiàn)層、安全防護層。

1.基礎(chǔ)設(shè)施層，主要包括：基礎(chǔ)的網(wǎng)絡(luò)環(huán)境和軟硬件基礎(chǔ)設(shè)施，是信息存儲、運算、傳輸?shù)幕A(chǔ)。2.技術(shù)支撐平臺，包括身份認證、內(nèi)容管理、消息處理等，是整個體系的核心。3.應(yīng)用層采用，包括模塊化的組件，用戶可根據(jù)需要，進行應(yīng)用模塊的擴展。4.頁面展現(xiàn)層，包括模板定義，腳本文件等，是重要組成部分，通過定義不同的模板，可以很方便地展現(xiàn)不同特色的網(wǎng)站界面，這一層的功能，為網(wǎng)站的移動化提供了可能。5.安全防護層，包括權(quán)限設(shè)置、認證管理、安全檢測等方面，貫穿于整個系統(tǒng)中，保證系統(tǒng)安全穩(wěn)定高效地運行。

用戶訪問網(wǎng)站域名時，訪問的是發(fā)布服務(wù)器上的靜態(tài)頁面，而制作服務(wù)器上有網(wǎng)站的動態(tài)頁面，當管理員在網(wǎng)站制作后臺正式發(fā)布文章時，制作服務(wù)器上的動態(tài)頁面將轉(zhuǎn)換成靜態(tài)頁面文件同步到發(fā)布服務(wù)器上，使得用戶訪問的頁面是授權(quán)發(fā)布的靜態(tài)頁面文件，這樣可以大幅提高系統(tǒng)的安全性。

（二）移動校園APP

移動校園APP同樣采用多層架構(gòu)，自下而上分為基礎(chǔ)支撐層、應(yīng)用層、服務(wù)層、終端層。

1.基礎(chǔ)支撐層包括基礎(chǔ)的網(wǎng)絡(luò)環(huán)境和軟硬件基礎(chǔ)設(shè)施，2.應(yīng)用層由兩部分組成，第一部分是移動平臺的管理系統(tǒng)，包括app開發(fā)者平臺、統(tǒng)一通信平臺、資訊平臺等；第二部分是其他接入的業(yè)務(wù)系統(tǒng)，為移動校園APP提供主要的基礎(chǔ)應(yīng)用支撐。3.服務(wù)層是業(yè)務(wù)系統(tǒng)與移動客戶端之間的橋梁，提供認證、消息、信息訂閱瀏覽等功能。4.終端層包括移動客戶端以及第三方的各種web-app、native-app等。

通過上述介紹，可以看出兩個平臺系統(tǒng)都采用多層架構(gòu)，如何將兩個平臺有機結(jié)合，統(tǒng)一信息服務(wù)源頭管理，利用網(wǎng)站群管理平臺方便、快捷的來適配移動校園APP的信息服務(wù)是我們本次重點研究的內(nèi)容。

三、利用網(wǎng)站群提供移動校園A P P信息服務(wù)

網(wǎng)站群管理平臺為PC端的消息發(fā)布及獲取提供了便利的平臺，同時，它也能夠支持移動網(wǎng)站的建設(shè)，搭建適應(yīng)移動端訪問的模板，網(wǎng)站欄目和數(shù)據(jù)自動繼承PC網(wǎng)站的欄目和數(shù)據(jù)，管理人員無須維護兩套數(shù)據(jù)，網(wǎng)站可根據(jù)來訪終端識別并自動適配推送頁面?；诰W(wǎng)站群管理平臺的便利性和移動校園APP的包容性，使得通過網(wǎng)站群管理平臺適配移動端的信息展示成為可能。

（一）移動網(wǎng)站設(shè)計方案

互聯(lián)網(wǎng)行業(yè)移動版網(wǎng)站構(gòu)建策略方案主要分為響應(yīng)式網(wǎng)頁方案、服務(wù)器端適配方案和原生網(wǎng)頁方案。[1]

1.響應(yīng)式網(wǎng)頁方案

2010年，著名網(wǎng)頁設(shè)計師伊桑·馬科特(Ethan Marcotte)在《A List Apart》上創(chuàng)新性地提出了響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design，簡稱RWD）的理念，該設(shè)計旨在實現(xiàn)網(wǎng)站頁面內(nèi)容與版式的自動適配，以滿足不同設(shè)備、場合和用戶的需求，是一種設(shè)計的全新思維模式。從技術(shù)層面來看，響應(yīng)式網(wǎng)頁設(shè)計的構(gòu)成包括流式布局（Fluid Grids）、自適應(yīng)圖片（Scalable Images）和媒介查詢（Media Queries），多管齊下為用戶提供最優(yōu)適配的網(wǎng)頁解決方案。該方案的最大優(yōu)勢在于覆蓋面廣，網(wǎng)頁代碼的一致性帶來了PC端和移動端用戶體驗的高度一致性，從而大大降低了開發(fā)運營成本、較小了網(wǎng)頁維護難度。

2.服務(wù)器端適配方案

服務(wù)器端適配方案同樣用于解決頁面顯示與不同終端的適配問題，它的實現(xiàn)過程是基于網(wǎng)站服務(wù)器對用戶訪問請求中設(shè)備參數(shù)的識別，從而動態(tài)轉(zhuǎn)換HTML、JS、CSS、圖像等要素之后返回到移動端顯示，它的前期識別過程真正意義上實現(xiàn)了平臺的顯示最優(yōu)化，是該方案的優(yōu)勢所在，但是其前端JavaScript 邏輯兼容性對User Agent 參數(shù)判斷和資源異步加載提出了較高的要求，同時還存在部分搜索引擎優(yōu)化限制，制約了服務(wù)器端適配方案的推廣應(yīng)用。

3.原生網(wǎng)頁方案

原生網(wǎng)頁方案通過重新搭建有別于PC版網(wǎng)站的移動門戶網(wǎng)站來實現(xiàn)不同終端設(shè)備上網(wǎng)頁顯示的適配，以前端服務(wù)器為媒介，通過URL重定向的方式在分析訪問請求中的設(shè)備參數(shù)信息后進行移動端或PC端的選擇跳轉(zhuǎn)。該方案雖然實現(xiàn)了移動網(wǎng)站和PC網(wǎng)站的物理區(qū)分，但采用兩套架構(gòu)必將帶來更高的運營維護成本和開發(fā)投入，不符合互聯(lián)網(wǎng)PC端和移動端融合的國際趨勢。

通過對上述三種方案的分析，基于各單位的PC端網(wǎng)站建設(shè)已經(jīng)較為完善，為了不改變用戶使用習(xí)慣，暫不考慮更改PC端頁面，利用網(wǎng)站群管理平臺的頁面展現(xiàn)層能力，改進原生網(wǎng)頁方案的設(shè)計方式，即利用網(wǎng)站群的統(tǒng)一后臺管理不變，只對前端展示頁面進行區(qū)分，分別設(shè)計PC端的模板和移動端的模板。當用戶訪問主域名時，服務(wù)器根據(jù)接收到的設(shè)備參數(shù)，跳轉(zhuǎn)到對應(yīng)的虛擬目錄，按需提供PC端或移動端模板來適配終端屏幕大小。由于現(xiàn)有網(wǎng)站的PC端模板已經(jīng)投入使用，現(xiàn)只要考慮移動端模板的設(shè)計。

（二）前期規(guī)劃

前期規(guī)劃是一個網(wǎng)站建設(shè)的重要環(huán)節(jié)，前期規(guī)劃考慮的是否全面到位，有可能直接影響網(wǎng)站建設(shè)的質(zhì)量。[2]以某大學(xué)門戶網(wǎng)站為例，現(xiàn)行的PC端門戶網(wǎng)站是搭建在網(wǎng)站群上的，頁面上有比較豐富的內(nèi)容，因此在規(guī)劃移動端網(wǎng)站布局時需要考慮用戶的使用習(xí)慣，合理的設(shè)計頁面上需要展示的內(nèi)容，不是完全推翻，也不是全部照搬。經(jīng)過規(guī)劃，移動端展示主要以文字新聞信息為主，加入部分圖片新聞和視頻新聞，像PC端頁面中的大圖風(fēng)景展示則無需在移動端展示。

（三）頁面設(shè)計

移動端網(wǎng)站的前端設(shè)計包括界面設(shè)計、HTML 布局結(jié)構(gòu)設(shè)計、Media Queries 規(guī)劃、CSS設(shè)計、動畫設(shè)計等等， 其中 HTML 布局結(jié)構(gòu)設(shè)計和 Media Queries 規(guī)劃都涉及視口尺寸問題。[3]

移動端模板主要 HTML 布局結(jié)構(gòu)：

＜!DOCTYPE html＞

＜html＞

＜head＞＜/head＞

＜body＞

＜div class=“wrapper” id=“headtop”＞＜/div＞＜!--英文版切換按鈕--＞

＜div class=“wrapper” id=“header”＞＜/div＞＜!--logo--＞

＜div class=“wrapper” id=“dan”＞＜/div＞＜!-- 每日贈言 --＞

＜div class=“wrapper” id=“slide”＞＜/div＞＜!-- 圖片切換 --＞

＜div class=“wrapper” id=“container”＞＜/div＞＜!--主體內(nèi)容開始--＞

＜div class="wrapper" id="xia"＞＜/div＞＜!-- 友情鏈接--＞

＜div class="wrapper" id="footer"＞＜/div＞＜!--底部開始--＞

＜div class="scripts"＞＜/div＞

＜/body＞

＜/html＞

在此結(jié)構(gòu)的基礎(chǔ)上還需要在網(wǎng)頁HTML中的＜head＞部分進行部分申明：

添加 ＜meta name=“viewport”content=“width=device-width,user-scalable=0,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0 minimalui”/＞標簽，禁止用戶進行網(wǎng)頁縮放。

添加 ＜meta http-equiv=“X-UA-Compatible”content=“IE=Edge,chrome=1”＞標簽，如果IE有安裝GCF(Google Chrome Frame)，調(diào)用安裝的組件，如果沒有，就會和＜meta http-equiv=“XUA-Compatible” content=“edge” /＞ 一 樣， 使用最高版本的IE內(nèi)核進行渲染。

添 加 ＜meta content=“ye” name=“applemobile-web-app-capable” /＞ 標簽，用來刪除默認的蘋果工具欄和菜單欄，達到全框顯示。

添加 ＜meta content=“telephone=no”name=“format-detection” /＞ 標簽，這個標簽的默認值是telephone=yes，可以將頁面中的一連串數(shù)字識別為電話號碼、并設(shè)置為手機可以撥打的一個連接。而將其值設(shè)置為telephone=no,可以阻止該識別。

除對＜head＞部分申明外，還需要在CSS樣式文件中添加部分樣式，以更好的適應(yīng)移動端頁面：

-webkit-text-size-adjust: 100%;-ms-textsize-adjust: 100%。一般情況下當用戶放大網(wǎng)頁時，字體也會隨著變大，而添加了該樣式后，網(wǎng)頁中的字體只會顯示當前設(shè)置的字體大小，不會隨著網(wǎng)頁放大而變大，通過設(shè)置該代碼以防止iPhone在堅屏轉(zhuǎn)向橫屏?xí)r放大文字等情況。[3]

-webkit-font-smoothing: antialiased; -mozosx-font-smoothing: grayscale; 這個屬性可以使頁面上的字體抗鋸齒,使用后字體看起來會更清晰。[4]

在定義不同模塊寬度的時候，用百分比來代替固定寬度，如 width:100%；這樣可以更好的適應(yīng)手機端頁面大小。當手機屏幕分辨率有所不同時，可以根據(jù)手機屏幕的大小進行動態(tài)縮放模塊寬度，而不會像固定寬度設(shè)計那樣把模塊縮在一邊或者超出屏幕。

（四） 調(diào)試

移動端頁面設(shè)計最后一個非常重要的環(huán)節(jié)就是調(diào)試，只有在調(diào)試過程中才能更好地發(fā)現(xiàn)問題、解決問題。首先，通過瀏覽器的開發(fā)者工具進行初步測試，這里使用chrome瀏覽器訪問移動端頁面，然后打開開發(fā)者工具，再打開toggle device toolbar功能進行測試，通過修改手機型號或者自定義分辨率大小，可以模擬測試各種主流移動端網(wǎng)頁的展示效果。然后，再在各種物理終端設(shè)備上進行測試，通過物理終端的瀏覽器訪問，查看實際效果。最后，接入移動校園APP內(nèi)進行測試。由于網(wǎng)站群管理平臺使用的是制作和發(fā)布分開的模式，不同模板之間不會相互影響，所以僅需要測試移動端模板即可。圖1、圖2、圖3為某大學(xué)主頁在移動校園APP中展示的效果。

四、總結(jié)

隨著智能終端應(yīng)用越來越便捷，移動校園APP也得到快速發(fā)展，一方面能夠為廣大師生提供最基本的校園信息服務(wù)，另一方面朝著功能更加豐富的移動辦公學(xué)習(xí)平臺發(fā)展[5]。利用網(wǎng)站群管理平臺搭建適合移動端訪問的HTML5模板，同時在移動校園APP中加載網(wǎng)站的移動端模板，可以無需進行數(shù)據(jù)遷移或者多站點管理和發(fā)布，就可以較為方便的將現(xiàn)有網(wǎng)站群中的網(wǎng)站信息無縫對接到移動校園APP中，方便師生隨時隨地的訪問。移動校園APP基于網(wǎng)站群提供信息服務(wù)的方法，使移動校園APP信息服務(wù)的搭建更加便捷，并能有效降低信息服務(wù)管理、維護的難度和成本，具有一定的借鑒和推廣價值。

圖1 展示效果

圖2 展示效果

圖3 展示效果