基于HTML5 的響應(yīng)式Web 頁面重組適配技術(shù)研究

蔣凌燕，查英華

(南京工業(yè)職業(yè)技術(shù)學(xué)院計算機(jī)與軟件學(xué)院，江蘇 南京 210046)

0 引言

目前，移動互聯(lián)網(wǎng)已經(jīng)成為最大的信息消費(fèi)市場、最活躍的創(chuàng)新領(lǐng)域、最強(qiáng)的ICT 產(chǎn)業(yè)驅(qū)動力量——2013 年全球移動業(yè)務(wù)收入達(dá)到1.6 萬億美元，相當(dāng)于全球GDP 的2.28%，全球智能手機(jī)出貨量近10 億部，達(dá)到PC 的3 倍;移動互聯(lián)網(wǎng)重構(gòu)了互聯(lián)網(wǎng)服務(wù)的模式與生態(tài)，全球應(yīng)用程序下載次數(shù)累計超過5000 億［1］。

移動終端與個人電腦終端相比，可視界面偏小，通常為幾分之一，互聯(lián)網(wǎng)上海量為個人電腦終端所設(shè)計的各種Web 系統(tǒng)在移動終端上顯示時內(nèi)容過多，網(wǎng)頁布局和用戶對網(wǎng)站功能的使用方面的設(shè)計也是針對大屏幕的，從適合個人電腦終端的Web 系統(tǒng)向適合移動終端的系統(tǒng)上遷移時需要進(jìn)行頁面提取和重組。

1 頁面重組技術(shù)

1.1 現(xiàn)狀

Web 頁面重組技術(shù)通過對現(xiàn)有網(wǎng)頁信息的提取、分離、轉(zhuǎn)換、組合，能夠提高網(wǎng)頁網(wǎng)站的適應(yīng)性，在多終端訪問的環(huán)境下給用戶以更好的體驗，滿足用戶信息交流，更好體現(xiàn)網(wǎng)絡(luò)服務(wù)的便捷性。

頁面重組技術(shù)將原始頁面經(jīng)過重組處理，生成適合在移動終端顯示的新頁面。根據(jù)頁面重組處理流程，頁面重組技術(shù)主要包括頁面信息提取技術(shù)和頁面信息組合技術(shù)。頁面信息提取技術(shù)主要通過對原始頁面結(jié)構(gòu)和內(nèi)容2 個方面進(jìn)行提取。頁面信息組合技術(shù)將傳遞來的內(nèi)容塊按照一定的規(guī)則進(jìn)行組織顯示。內(nèi)容結(jié)構(gòu)組合的技術(shù)主要有樹匹配映射技術(shù)和自動分配內(nèi)容塊重要度等技術(shù)。頁面布局不合理、屏幕適應(yīng)能力差等問題由頁面信息組合技術(shù)來解決［2］。

1.2 HTML5 新特性

隨著HTML5 技術(shù)的提出，對于網(wǎng)站網(wǎng)頁也會有較大的改變，HTML5 的新特性主要有:

1)更多的描述性標(biāo)簽，通過頭部(header)、尾部(footer)、導(dǎo)航區(qū)域(nav)、側(cè)邊欄(aside)等標(biāo)簽，對頁面進(jìn)行結(jié)構(gòu)化描述。

2)良好的多媒體支持。

3)Web 應(yīng)用方面提供了新功能，替代第三方技術(shù)。

4)跨文檔消息通信。

5)Web Sockets 支持。

6)客戶端存儲。

隨著HTML5 的發(fā)布，Web 的前臺框架也有了新的發(fā)展。如JQuery Mobile 提供了一個跨瀏覽器的jQuery-Mobile 移動終端前臺框架，支持主流的移動平臺。

1.3 頁面重組技術(shù)比較

對于頁面重組技術(shù)，從承擔(dān)轉(zhuǎn)換任務(wù)的服務(wù)器位置分為外部服務(wù)器轉(zhuǎn)換和自服務(wù)器轉(zhuǎn)換，如部分IT廠商提供的將網(wǎng)站批量轉(zhuǎn)換的轉(zhuǎn)碼技術(shù)屬于外部服務(wù)器轉(zhuǎn)換，WAP 網(wǎng)關(guān)服務(wù)也屬此類。一些批量建站技術(shù)提供架包將已建好網(wǎng)站系統(tǒng)整體轉(zhuǎn)換為WAP 網(wǎng)站，在服務(wù)器上同時提供Web 和WAP 訪問的服務(wù)，這種屬于自服務(wù)器轉(zhuǎn)換。

外部服務(wù)器轉(zhuǎn)換的方式是一種通用方式，理論上全部網(wǎng)站都可以用它轉(zhuǎn)換，實際使用時網(wǎng)頁基本功能都可以使用，頁面信息瀏覽支持較好，但對于部分交互功能和特殊效果以及圖片的轉(zhuǎn)換支持方面有問題。自服務(wù)器轉(zhuǎn)換專門針對采用某一種建站技術(shù)建設(shè)的網(wǎng)站可以完全的從Web 到WAP 轉(zhuǎn)換，對于其他的網(wǎng)站不能轉(zhuǎn)換，就普遍適應(yīng)性來說遠(yuǎn)遠(yuǎn)不如外部服務(wù)器轉(zhuǎn)換的方式。

從因特網(wǎng)環(huán)境中的服務(wù)器負(fù)荷和網(wǎng)絡(luò)負(fù)載來講，這2 種方式都會顯著增加總體服務(wù)器負(fù)載和網(wǎng)絡(luò)負(fù)載，從能耗的角度考慮外部服務(wù)器轉(zhuǎn)換的方式增加了外部服務(wù)器處理轉(zhuǎn)換頁面過程，同時也會降低響應(yīng)速度。自服務(wù)轉(zhuǎn)換不論用戶是否訪問，服務(wù)器都需要支持一個和原站類似的WAP 網(wǎng)站，服務(wù)器負(fù)載和能耗顯著增加，用戶響應(yīng)速度受影響較小。從能耗和負(fù)載角度講，如果用戶訪問量較大自服務(wù)器轉(zhuǎn)換占優(yōu)，如果用戶訪問量較小外部轉(zhuǎn)換方式占優(yōu)。從用戶響應(yīng)速度角度考慮自服務(wù)器轉(zhuǎn)換占優(yōu)勢。

2 響應(yīng)式頁面設(shè)計

在重組生成新頁面時，按照響應(yīng)式網(wǎng)頁設(shè)計要求，網(wǎng)頁對于不同大小的終端和瀏覽器自適應(yīng)，可以提供更好的用戶服務(wù)，自適應(yīng)在網(wǎng)頁大小的調(diào)整方面可以采用HTML 標(biāo)記中的meta 屬性配合CSS.0 媒體查詢功能來進(jìn)行網(wǎng)頁布局方面的適應(yīng)性調(diào)整。也可以采用前臺腳本及其框架技術(shù)進(jìn)行自適應(yīng)調(diào)整。在Web 網(wǎng)頁的頁面重組方面如果采用響應(yīng)式網(wǎng)頁設(shè)計，無疑可以帶給用戶在多終端上更好的使用體驗。

響應(yīng)式網(wǎng)頁最初是由Ethan Marcotte 提出的一個概念:Web 頁面的設(shè)計根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。響應(yīng)式Web 設(shè)計除了關(guān)于屏幕適應(yīng)以及圖片縮放以外，強(qiáng)調(diào)兼容和移動終端體驗的改善。響應(yīng)式的布局提供兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，采用彈性柵格布局方式，頁面在不同的分辨率環(huán)境下呈現(xiàn)不同的適應(yīng)時布局。通過設(shè)備特性和設(shè)備類型結(jié)合CSS和HTML5 新特性來實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計。

進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計時，將網(wǎng)頁內(nèi)容和劃分為幾個單元。一個單元中的內(nèi)容是連續(xù)并相關(guān)的，由文字內(nèi)容、圖片、表單及其他內(nèi)容組成，在設(shè)計頁面框架結(jié)構(gòu)時考慮不同的屏幕尺寸，將網(wǎng)頁單元的大小和排列進(jìn)行重組，一個響應(yīng)式網(wǎng)頁可以包含幾種布局，在大小不同的終端上都可以很好地顯示，這是響應(yīng)式頁面的靜態(tài)響應(yīng)。

同時，不同大小的終端需要提供的用戶體驗也不同:PC 機(jī)上大多通過鍵盤和鼠標(biāo)，平板和手機(jī)采用觸摸屏需要用手指控制。響應(yīng)式頁面除了頁面適應(yīng)以外還需根據(jù)用戶的輸入方式提供多種操控方式和頁面響應(yīng)，需要對觸摸屏的事件進(jìn)行綁定和響應(yīng)，這是響應(yīng)式頁面的動態(tài)響應(yīng)。

3 響應(yīng)式頁面重組技術(shù)設(shè)計與實現(xiàn)

3.1 功能設(shè)計

筆者使用JQuery 和JQuery Mobile 框架，將已有網(wǎng)站W(wǎng)eb 頁面進(jìn)行重組和轉(zhuǎn)換，使用較少的服務(wù)器資源和能耗，不添加新的頁面，增加較少服務(wù)器負(fù)荷，不降低服務(wù)器響應(yīng)速度，對Web 頁面進(jìn)行從標(biāo)簽到頁面組織結(jié)構(gòu)的轉(zhuǎn)換，使其適應(yīng)多終端環(huán)境下的各種瀏覽器。這種頁面重組適配技術(shù)可以用較少的負(fù)荷和能耗，在客戶端瀏覽器或者服務(wù)器中進(jìn)行簡便快捷的頁面重組轉(zhuǎn)換。

在進(jìn)行頁面重組的過程中，首先提取網(wǎng)頁內(nèi)容，使頁面標(biāo)記轉(zhuǎn)換成為HTML5 標(biāo)簽，然后使用腳本語句配合前臺框架技術(shù)將新的頁面標(biāo)記進(jìn)行重組，在不同的終端瀏覽器環(huán)境中適應(yīng)性顯示，最后添加移動終端下新的事件綁定和響應(yīng)處理。

按功能分成瀏覽型和表單輸入型，針對不同類型的網(wǎng)頁，處理重組的過程也有不同:信息瀏覽型的網(wǎng)頁，將內(nèi)容進(jìn)行分割，提取其核心內(nèi)容生成符合HTML5 規(guī)范的標(biāo)簽后填充到頁面中新添加的section中，對導(dǎo)航類網(wǎng)頁的內(nèi)容提取后按用戶操作習(xí)慣綁定事件后填充到次級頁面進(jìn)行展示。對于需要用戶填寫表單和使用控件功能的頁面，提取出核心表單和控件后生成對應(yīng)的HTML5 標(biāo)簽并重組頁面。

3.2 頁面重組過程設(shè)計

基本處理過程如下:

1)獲取終端和瀏覽器大小類型信息;

2)分析頁面內(nèi)容并過濾;

3)生成新HTML5 標(biāo)記對象;

4)頁面結(jié)構(gòu)重組和內(nèi)容填充;

5)主次頁面進(jìn)行分割并分別綁定響應(yīng)時間。

3.3 技術(shù)實現(xiàn)

圖1 原始網(wǎng)頁

圖2 原始頁面結(jié)構(gòu)分析

圖3 重組適配后的頁面結(jié)構(gòu)

采用前臺腳本技術(shù)，按響應(yīng)式網(wǎng)頁設(shè)計的的原則來實現(xiàn)對Web 網(wǎng)頁進(jìn)行頁面重組，具體案例實現(xiàn)如下:如圖1 所示，對一個Web 網(wǎng)頁進(jìn)行頁面組成分析，對圖1 原始頁面分析其結(jié)構(gòu)后得到如圖2 所示結(jié)構(gòu)，對head 導(dǎo)航部分提取其主要內(nèi)容并縮小寬度和高度，將head 導(dǎo)航和側(cè)邊欄、head 導(dǎo)航和正文部分分別組合成新的section，如圖3 所示。用HTML5 標(biāo)準(zhǔn)中提供新的section 標(biāo)記對頁面進(jìn)行劃分，一個頁面中可以包含多個secion，按用戶需求和操作來顯示不同的section.。一個section 所示可以分成3 個部分，分別用header、content、footer 三個新標(biāo)記表示。

2 個section 之間通過綁定特殊的事件來相互響應(yīng)，JQuery Mobile 框架提供多種事件來進(jìn)行移動終端的屏幕事件綁定和處理。具體有tap(輕擊)、taphold(輕擊不放)、swipe(劃動)、swipeleft(左劃)、swiperight(右劃)等等。2 個section 之間的切換顯示可以采用2 種方式，一種是鏈接標(biāo)記另一種是劃動事件綁定，本實例采用劃動事件綁定的方式來實現(xiàn)。重組完成后的頁面如圖4 和圖5 所示。

圖4 重組后的section1

圖5 重組后的section2

瀏覽器是部分支持HTML5 的，特別是老版本的IE 不支持HTML5，在對訪問的終端進(jìn)行判斷的時候需要添加瀏覽器版本的判斷，如果是不支持的瀏覽器，將顯示原始頁面或者是功能較少的重組頁面。

對于日志填寫這樣的功能頁面，重點是獲取日志輸入的組件并使之適應(yīng)移動終端的大小，重組后的頁面如圖6 所示。

圖6 日志輸入頁面重組后

3.4 頁面重組在Web 系統(tǒng)中的實現(xiàn)

本文所用頁面重組方法采用的是編寫腳本語句，所編寫的腳本語句可以在瀏覽器中執(zhí)行，重組過程在瀏覽器加載完頁面元素后對頁面元素進(jìn)行重組，生成HTML5 新元素并進(jìn)行定位排版及事件綁定，這種方式的處理過程集中在瀏覽器中。

另一種方式是將所編寫的腳本語句在服務(wù)器端調(diào)用，服務(wù)器端采用Java 編寫的，使用Web Scripting Framework 調(diào)用腳本代碼在Servlet 容器(例如Tomcat)中生成Web 內(nèi)容，再發(fā)送給客戶，具體實現(xiàn)使用AOP 的方式在原有系統(tǒng)上添加功能?；蛘卟捎胣ode.js 在服務(wù)器端調(diào)用重組處理代碼進(jìn)行處理。如圖7 所示。

圖7 服務(wù)器端頁面重組實現(xiàn)

4 結(jié)束語

本文對基于前臺框架的響應(yīng)式多終端適配重組技術(shù)進(jìn)行了分析并給出了一個案例的具體實現(xiàn)。在實際使用時，不論后臺采用的是何種服務(wù)器端技術(shù)，在不添加服務(wù)器負(fù)荷的條件下，這種重組方式都可以對客戶端進(jìn)行頁面重組適配轉(zhuǎn)換，是一種切實可行的頁面重組技術(shù)。但是這種重組技術(shù)，需要根據(jù)頁面的具體情況來編寫轉(zhuǎn)換代碼，對于服務(wù)器端批量生成的頁面適應(yīng)性較好，代碼量很少，但轉(zhuǎn)換代碼對于不同的Web 系統(tǒng)需要專門編寫，通用性較差。以后希望能開發(fā)出自動轉(zhuǎn)換重組的前臺框架，通過大部分進(jìn)行自動轉(zhuǎn)換，少部分手工修改的方式來完成響應(yīng)式的移動終端頁面重組。

［1］工業(yè)和信息化部電信研究院.移動互聯(lián)網(wǎng)白皮書［EB/OL］.http://www.catr.cn/kxyj/qwfb/bps/201405/P02014-0512339464414386.pdf，2014-05-01.

［2］史晶，吳慶波，楊沙洲.移動終端個性化頁面顯示優(yōu)化技術(shù)研究［J］.計算機(jī)工程，2012，38(18):277-279，281.

［3］工業(yè)和信息化部電信研究院.移動終端白皮書［EB/OL］.http://www.catr.cn/kxyj/qwfb/bps/201405/P020140512339-464414386.pdf，2014-05-01.

［4］江曉鵬.基于移動終端的Web 資源重構(gòu)系統(tǒng)的設(shè)計與實現(xiàn)［D］.武漢:華中師范大學(xué)，2011.

［5］黃文蓓.基于網(wǎng)頁分割和摘要的小屏幕設(shè)備網(wǎng)頁自適應(yīng)技術(shù)研究與實現(xiàn)［D］.上海:華東師范大學(xué)，2007.

［6］Su Junming，Tseng Shian-Shyong，Lin Huanyu，et al.A personalized learning content adaptation mechanism to meet diverse user needs in mobile learning environments［J］.User Modeling and User-adapted Interaction，2011，21(1/2):5-49.

［7］Canali C，Colajanni M，Lancellotti R.A two-level distributed architecture for the support of content adaptation and deliveryservices［J］.Cluster Computing，2010，13(1):1-17.

［8］楊威，高文華.基于Android 的智能家居終端設(shè)計與研究［J］.計算機(jī)技術(shù)與發(fā)展，2013，23(7):245-248.

［9］高樂，張健，田賢忠.基于視覺的Web 頁面分塊算法的改進(jìn)與實現(xiàn)［J］.計算機(jī)系統(tǒng)應(yīng)用，2009(4):65-69.

［10］陸鋼，朱培軍，李慧云，等.智能終端跨平臺應(yīng)用開發(fā)技術(shù)研究［J］.電信科學(xué)，2012，28(5):14-17.

［11］杜鵬.基于視覺特征的WEB 頁面信息抽取技術(shù)的研究［D］.蘭州:西北師范大學(xué)，2009

［12］馬璇，鄺野.移動終端自適應(yīng)界面的一致性評價體系［J］.軟件，2012，33(12):163-168.

［13］高輝，程罡，余勝泉，等.泛在學(xué)習(xí)資源在移動終端上的自適應(yīng)呈現(xiàn)模型設(shè)計［J］.中國電化教育，2012(4):122-128.

［14］王秀峰.Web 導(dǎo)航中用戶認(rèn)知特征及行為研究［D］.南京:南京大學(xué)，2013.

［15］劉鳳成.面向移動終端的Web 頁面分塊與轉(zhuǎn)換方法的研究與應(yīng)用［D］.長沙:中南大學(xué)，2012.

［16］W3C 組織.DOM［EB/OL］.http://www.w3.org/DOM，2014-11-14.

［17］顧韻華，田偉.基于DOM 模型擴(kuò)展的Web 信息提?。跩］.計算機(jī)科學(xué)，2009，36(11):235-237.