基于網(wǎng)站群提供信息服務的移動校園APP研究與實踐

黃 磊 任鳳君 鄭禮河

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

一、前言

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

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

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

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

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

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

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

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

（二）移動校園APP

移動校園APP同樣采用多層架構，自下而上分為基礎支撐層、應用層、服務層、終端層。

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

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

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

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

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

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

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

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

2.服務器端適配方案

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

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

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

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

（二）前期規(guī)劃

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

（三）頁面設計

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

移動端模板主要 HTML 布局結構：

＜!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＞

在此結構的基礎上還需要在網(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ù)字識別為電話號碼、并設置為手機可以撥打的一個連接。而將其值設置為telephone=no,可以阻止該識別。

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

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

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

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

（四） 調(diào)試

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

四、總結

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

圖1 展示效果

圖2 展示效果

圖3 展示效果