基于HTML5的移動互聯(lián)網(wǎng)應用轉(zhuǎn)換技術*

李慧云，楊新章，胡文勝，文錦軍

（1.中國電信股份有限公司廣東研究院 廣州510630；2.中國電信股份有限公司廣東分公司 廣州510081）

1 引言

隨著智能終端的普及和服務模式的創(chuàng)新，我國移動互聯(lián)網(wǎng)市場成長迅速，越來越多的用戶通過手機接入互聯(lián)網(wǎng)。目前智能終端的運行能力幾乎可以媲美PC機，用戶可以如同在PC上一樣瀏覽網(wǎng)頁，但受限的屏幕大小和不同的操作方式大大降低了用戶的體驗。因此，許多Web應用服務商開始針對移動終端改進用戶體驗或者推出移動版網(wǎng)頁，以適配終端屏幕；或者開發(fā)本地客戶端，直接從用戶的使用方式上進行適配。

縱觀移動終端的產(chǎn)業(yè)現(xiàn)狀，本地應用仍占據(jù)統(tǒng)治地位，原因在于本地應用在表現(xiàn)能力和運行效率上具有較大的優(yōu)勢。但隨著HTML5標準的出現(xiàn)，Web應用在表現(xiàn)能力和功能上都得到了很大的提升，而其天然的跨終端平臺的特性和更簡單的開發(fā)語言，可能使Web應用在移動終端上獲得更大的發(fā)展空間和占據(jù)更多的市場份額。

2 HTML5適用于移動終端的新特性

HTML5的許多功能就是以能夠在移動終端（如智能手機以及平板電腦）上運行為基礎而設計的，因此，HTML5在移動設備上具有更大的優(yōu)勢，將率先在移動設備上應用起來。下面列舉了HTML5適用于移動終端應用開發(fā)的諸多新特性。

（1）離線存儲能力為移動互聯(lián)網(wǎng)應用的開發(fā)提供了基礎

相比桌面應用程序，移動設備的網(wǎng)絡連線更不穩(wěn)定，而且有時在移動中并無網(wǎng)絡可以使用，此時離線存儲能力顯得尤為重要。HTML5提供了3種離線存儲機制：Web Storage、Indexed DB和Application Cache。Web Storage可以看作增強版的cookie，不受數(shù)據(jù)大小的限制，有更好的彈性以及架構，可以將數(shù)據(jù)寫入本機的ROM中，還可以在關閉瀏覽器后再次打開時恢復數(shù)據(jù)；Indexed DB是HTML5提供的本地數(shù)據(jù)庫機制，用來存儲數(shù)據(jù)量較大、結構化的數(shù)據(jù)；Application Cache可稱為網(wǎng)頁緩存，通過一個manifest文件定義需要瀏覽器下載緩存的網(wǎng)頁文件，用于以文件為單位的本地數(shù)據(jù)存儲。

（2）原生音/視頻支持，多媒體嵌入更加靈活

在HTML5中，增加了

（3）增強的用戶交互能力

HTML5增加了拖拽、撤銷歷史操作、文本選擇等交互動作接口，增強了Web應用的用戶交互能力，適配了移動用戶的操作習慣。

（4）專為移動化平臺定制的表單元素

瀏覽器中出現(xiàn)的HTML5表單元素與對應的鍵盤見表1。

只需要簡單的聲明（如），即可完成對不同樣式鍵盤的調(diào)用，簡捷方便。

（5）具有鮮明移動特色的地理定位API

地理定位是移動終端的特色和優(yōu)勢，目前嵌入移動定位的應用越來越多，并不僅局限于導航和地圖應用。HTML5的定位API可以綜合使用GPS、Wi-Fi、手機等多種定位方式，定位更為精準、靈活。

（6）canvas繪圖，提升移動平臺的繪圖能力

HTML5 canvas提供了canvas-2D的繪圖功能支持、canvas-3D的繪圖功能支持、SVG-向量圖支持以及圖片的移動、旋轉(zhuǎn)、縮放等常規(guī)操作。利用canvas可直接在終端側繪制需動態(tài)變化的圖形、圖表，相比在服務器側生成圖片，減少了網(wǎng)絡傳輸，提升了顯示效率。

（7）適用于移動設備顯示的標簽和樣式

移動終端區(qū)別于PC設備的一個重要特征就是移動終端多樣的設備尺寸和屏幕分辨率。如何讓Web頁面能適應各種尺寸的屏幕，讓很多Web開發(fā)人員相當糾結。幸運的是，HTML5已經(jīng)為開發(fā)者考慮到了這一問題，在網(wǎng)頁的頭 部 加 上 語 句，可以使網(wǎng)頁適配設備屏幕。而且，在CSS3中，可使用媒體查詢（media query）為不同分辨率的終端定制不同的顯示樣式。

總的來說，HTML5從設計開始，就考慮了移動終端的特性和需求，將傳統(tǒng)的Web網(wǎng)站向HTML5標準和應用轉(zhuǎn)換，是Web網(wǎng)站向移動平臺發(fā)展的有效手段和趨勢。

表1 HTML5表單元素與對應的鍵盤

3 轉(zhuǎn)換技術

比較PC時代的Web網(wǎng)站和服務，移動版的Web網(wǎng)站/應用具有以下特點。

·簡潔：移動設備的屏幕遠遠小于桌面設備的屏幕，它無法像桌面設備一樣同時呈現(xiàn)很多信息，所以需控制好顯示的信息數(shù)量，盡量用較少的信息清晰地傳遞出所要傳達的內(nèi)容非常重要。

·觸摸優(yōu)化：在移動版網(wǎng)頁上，要保證用戶能用拇指完成所需的所有操作，按鈕大小、間隔以及單選、多選的呈現(xiàn)方式都需要根據(jù)移動終端的操作方式來設計。

·強化主題：大部分在移動設備上瀏覽網(wǎng)頁的用戶都在尋找一些信息，而不是在網(wǎng)絡上“閑逛”。將最重要、用戶最需要了解的信息放在關鍵位置。

·不依賴插件：移動終端的瀏覽器受設備能力限制，對插件的支持程度不同，減少對插件的依賴才可以保證Web應用的普適性。

·用盡量少的數(shù)據(jù)傳輸和重復數(shù)據(jù)加載：無線網(wǎng)絡的網(wǎng)絡質(zhì)量變化非常大，帶寬大小不一，盡量縮小網(wǎng)頁的體積，去掉網(wǎng)頁中的冗余代碼，使用本地緩存機制，可提升用戶的體驗。

基于上述移動網(wǎng)站/應用的特點和原則，可以確定移動互聯(lián)網(wǎng)Web應用轉(zhuǎn)換的目標，即壓縮圖片，剔除網(wǎng)頁中的多余信息，轉(zhuǎn)換需要插件支持的內(nèi)容，分頁展現(xiàn)。因此，轉(zhuǎn)換的關鍵技術包括：網(wǎng)頁結構轉(zhuǎn)換、音/視頻轉(zhuǎn)換、圖片轉(zhuǎn)換以及文檔轉(zhuǎn)換等。總體架構流程如圖1所示。

3.1 文檔轉(zhuǎn)換

將文檔轉(zhuǎn)換為HTML5的目的是可以直接在HTML文件中顯示文檔（如Word、Excel、PPT、PDF等），相比傳統(tǒng)使用Adobe Flash插件方式顯示更為便捷；同時，HTML5增加了新特性，如CSS3可實現(xiàn)翻頁特效，canvas的2D、3D模型可實現(xiàn)物理、化學公式和模型，Math ML可實現(xiàn)數(shù)學公式、離線緩存等，增加了在線文檔的可閱讀性和互操作能力，是HTML5的重要應用領域。但由于轉(zhuǎn)換過程需要耗費較長的處理時間，通常在后臺完成轉(zhuǎn)換，轉(zhuǎn)換完成后，通過HTML頁面呈現(xiàn)給用戶顯示。

3.1.1 Office文檔轉(zhuǎn)換為HTML5

Office文檔可以說是用戶日常操作最多的文檔類型，除了用戶數(shù)最多的Microsoft Office辦公軟件系列生成及使用的以doc、xls、docx、ppt等后綴結束的文件，也包括其他辦公軟件產(chǎn)品生成的文檔，如OpenOffice的odt和ott文件、WPS的wps文件等。Office文檔依賴于應用軟件環(huán)境，用戶在應用軟件中打開、查看和編輯文檔。

目前Office文檔的標準主要包括：前國際標準（open document format，ODF）、中 國 文 檔 標 準 （unified office document format，UOF）和 現(xiàn) 有 的 國 際 標 準 （office open XML，OOXML）。OOXML是 微 軟 基 于XML-Extensible Markup Language的數(shù)據(jù)存儲語言，為Microsoft Office開發(fā)所制定的技術規(guī)范，在2008年成為國際標準，主要應用在Office2007以 后 的 系 列 中，文 件 以xlsx、docx、pptx為 后綴。在早期的Microsoft產(chǎn)品中，采用的是OLE2復合文檔格式。

Office文檔轉(zhuǎn)換為HTML，使得用戶可以直接通過瀏覽器查看甚至編輯文檔，而不需要再安裝辦公軟件，實現(xiàn)了辦公應用的云服務化，也大大提高了在移動終端上處理辦公文檔的方便性。總的來說，Office文檔轉(zhuǎn)換分為如下兩個步驟。

（1）文檔的讀取：按照文檔格式讀取文檔內(nèi)容，包括文本、圖片、表格以及各部分內(nèi)容的位置關系和顯示樣式。

（2）HTML文件的生成：將文檔內(nèi)容按照原來的樣式和排列位置，通過HTML標簽和樣式進行重新組合，生成HTML5文件。

Office轉(zhuǎn)換為HTML主要包括如下兩種方式。

·利用應用軟件自帶的API進行轉(zhuǎn)換：Microsoft Office和OpenOffice都自帶了將文檔轉(zhuǎn)為HTML文檔的API，Microsoft Office API由于平臺限制只能用于Windows操作系統(tǒng)。

圖1 轉(zhuǎn)換的總體架構流程

·利用第三方的轉(zhuǎn)換工具：比較有名的是Apache POI，是專門用于將Microsoft Office文檔轉(zhuǎn)換為HTML格式的工具，支持OLE2和OOXML兩個格式的文檔轉(zhuǎn)換。

3.1.2 PDF轉(zhuǎn)換為HTML5

PDF（portable document format）是一種跨平臺、與設備無關、用于文件交換的文件格式。PDF文件包含一個PDF文檔和其他支持數(shù)據(jù)。一個PDF文檔包含一個或多個頁面，每個頁面包含與設備和分辨率無關的文字、圖形和圖像的任意組合，被稱為頁面描述。PDF的文檔結構是一種樹型結構，樹的根節(jié)點就是PDF文件的根對象。根節(jié)點下有4個子樹：頁面樹（pages tree）、書簽樹（outline tree）、線索樹（article tree）、名字樹（named destination）。

PDF轉(zhuǎn)換為HTML的步驟同Office文檔類似，需要先按照PDF的格式和文檔結構，將PDF文檔中的文本、圖片、圖標等內(nèi)容單位以及相關的樣式信息讀取出來，然后按照HTML5的標簽和樣式要求進行重新組合和顯示。

目前，PDF也存在需要開源的轉(zhuǎn)換工具，比較有名的包括PDF to HTML、PDF2 HTML EX、PDF Masher等。由于PDF內(nèi)容的設備無關性，一些文字內(nèi)容也通過圖片顯示，因此將其轉(zhuǎn)換為HTML文檔后，在中文和樣式的效果上不一定能和原有的保持一致。

3.2 圖片轉(zhuǎn)換

為了實現(xiàn)圖片到HTML5 canvas的轉(zhuǎn)換，需要把HTML中的img標簽的內(nèi)容替換為canvas標簽和一段JavaScript代碼。轉(zhuǎn)換的基本步驟是解析HTML文件，將其中的img標簽的src屬性的取值讀取出來，利用canvas的引入圖像功能完成圖像的呈現(xiàn)，引入的操作分為兩步：第1步是使用JavaScript的image對象加載圖片；第2步是使用drawImage方法將圖像插入canvas中。

其中，圖片加載的關鍵是img標簽的src屬性的取值所代表的圖片的URL。根據(jù)HTML的規(guī)范，img標簽的src屬性的URL可以有兩種形式：一種是圖片的實際URL地址；另一種是圖片經(jīng)Base64編碼轉(zhuǎn)換生成的data URI。

·對于實際URL地址的情況，可以用JavaScript創(chuàng)建一個新的image對象，引入圖片的URL，在腳本執(zhí)行過程中加載圖片，但在圖片數(shù)量較多時，JavaScript腳本會因等待圖片加載而暫停，需要進行圖像預加載處理。

·對于data URI的情況，可以直接通過data URI嵌入圖像，通過這種方式嵌入的圖片內(nèi)容即時可用，進而減少了頁面加載過程中的HTTP請求次數(shù)，可以優(yōu)化單次頁面加載的時間，但同時會帶來編碼的圖片管理不便、無法被重復利用、無法被獨立緩存等問題，同時在客戶端需要重新解碼和顯示，也增加了額外的開銷。

表2 瀏覽器對音/視頻的支持情況

3.3 音/視頻轉(zhuǎn)換

音/視頻轉(zhuǎn)換即將原來由flash插件播放的音/視頻或音/視頻文件轉(zhuǎn)換為HTML5標準所支持的音/視頻，從而實現(xiàn)瀏覽器對音/視頻的原生支持。

首先，需要了解瀏覽器對音/視頻的支持情況，見表2。

因此，為了保證音/視頻文件能被所有瀏覽器支持，一般建議音頻文件采用Ogg Vorbis和MP3格式；視頻文件采用WebM和MP4格式。某些媒體文件（特別是MP4）即使媒體類型為瀏覽器所支持，也有可能不能正常播放，這是因為文件的編碼不被瀏覽器所支持。

對于音/視頻內(nèi)容提供商來說，只需要提供上述音/視頻文件源，同時修改網(wǎng)頁音/視頻的嵌入代碼，即可實現(xiàn)對HTML5音/視頻的支持，并將服務擴展到移動終端。

3.4 網(wǎng)頁結構轉(zhuǎn)換

網(wǎng)頁結構轉(zhuǎn)換需要綜合分析網(wǎng)頁/Web應用的工程文件，針對移動終端的特點對HTML、CSS、JavaScript文件進行調(diào)整，以適配移動終端的屏幕顯示、操作方式，甚至網(wǎng)絡連接狀態(tài)。

互聯(lián)網(wǎng)上的頁面通常比較復雜、內(nèi)容元素較多、網(wǎng)頁尺寸較大，因此，在適配移動終端時，通常采用的方法是對原網(wǎng)頁進行裁剪，裁剪的過程需要考慮到可訪問性和易用性兩個方面的問題。具體來說，轉(zhuǎn)換出的新頁面應可以被大部分手機瀏覽，實現(xiàn)傳統(tǒng)互聯(lián)網(wǎng)的海量信息和移動互聯(lián)網(wǎng)的互通，視為可訪問性；而移動終端的用戶在訪問頁面的時候需要綜合考慮帶寬、流量、時間等因素，視為易用性。

因此，頁面的轉(zhuǎn)換需要從如下兩方面入手：

·在轉(zhuǎn)換頁面的過程中，對頁面信息進行有效過濾，屏蔽無關、不重要的信息以及廣告信息內(nèi)容，從而減小頁面的大小，減少用戶瀏覽頁面所消耗的流量；

·由于用戶移動終端的操作系統(tǒng)以及屏幕大小均存在很大的差異性，頁面轉(zhuǎn)換需要對主要網(wǎng)頁內(nèi)容進行合理優(yōu)化和排版，以適應不同大小的手機屏幕和操作系統(tǒng)所能承載的頁面大小，這樣便能“因材施教”，根據(jù)需要，進行不同的適配合理地完成網(wǎng)頁的轉(zhuǎn)換，以滿足不同用戶的瀏覽需求，從頁面版式、內(nèi)容、樣式、交互和可用性方面提高瀏覽體驗，最終為用戶提供低成本的信息獲取工具。

為了實現(xiàn)上述功能，網(wǎng)頁結構轉(zhuǎn)換工具完成網(wǎng)頁結構轉(zhuǎn)換工作的流程可以劃分如下。

·基本頁面處理：通過對HTML文件（包括JSP、ASP、PHP文件）的頁面分析，建立DOM（document object model，文檔對象模型）樹，完成網(wǎng)頁預處理和網(wǎng)頁標簽的合法性檢查等工作。

·主體內(nèi)容處理：根據(jù)規(guī)則完成頁面主體內(nèi)容的識別處理與不重要內(nèi)容的剔除工作。

·樣式處理：對提取了主體內(nèi)容的DOM樹進行樣式處理，包括對CSS文件的調(diào)整與過濾。

·分頁展現(xiàn)：為了實現(xiàn)網(wǎng)頁內(nèi)容在移動終端上的呈現(xiàn)，需要對上述處理結果進行處理，根據(jù)終端的信息庫，進行標簽替換、分頁和切頁工作，最終實現(xiàn)頁面的輸出。

在HTML5標準中，采用了語義化的標簽結構、豐富的表單結構和更具表現(xiàn)力的CSS3，這些新特性都可以使得網(wǎng)頁更加適合移動終端展示。在分頁展現(xiàn)時，可充分利用HTML5的特性標簽和CSS樣式。

3.5 轉(zhuǎn)換技術比較

分析上述的轉(zhuǎn)換技術，都可以歸結為將一種類型的文件或內(nèi)容中的元數(shù)據(jù)和樣式提取出來，再將元數(shù)據(jù)進行排列組合，轉(zhuǎn)換為另一種類型的文件或內(nèi)容，其轉(zhuǎn)換后的樣式和轉(zhuǎn)換前大致相同。而影響轉(zhuǎn)換效果和決定轉(zhuǎn)換難度的因素主要在于轉(zhuǎn)換前的文件和內(nèi)容的編碼與HTML5的內(nèi)容編碼的相似度以及其樣式和HTML5能表現(xiàn)的樣式之間的差別。

就上述幾種轉(zhuǎn)換技術而言，文檔轉(zhuǎn)換涉及的轉(zhuǎn)換前后的編碼差異最大，尤其對中文的編碼和樣式、文本樣式、圖表格式和一些特殊的字符公式等都存在較大的差異性，因此其轉(zhuǎn)換后的效果也千差萬別，在某些轉(zhuǎn)換過程中，為了保證轉(zhuǎn)換后的效果，可能會用大塊的圖片來替代原來的內(nèi)容，降低了轉(zhuǎn)換的意義和價值。就目前的轉(zhuǎn)換工具而言，Apache POI是做得比較出色的，其對xls、doc、ppt后綴文件的轉(zhuǎn)換效果都不錯，對OOXML格式的轉(zhuǎn)換仍在開發(fā)中，目前對xlsx后綴文件的支持較好。而以文檔轉(zhuǎn)換為基礎的產(chǎn)品Crocodoc是一個可以將PDF和Office文檔迅速轉(zhuǎn)變成HTML5的工具，目前該工具使用范圍很廣泛，其使得用戶可以在線分享和編輯文檔，而不受設備和系統(tǒng)的制約。

網(wǎng)頁結構轉(zhuǎn)換的主要難點和工作量不是兩種編碼之間的轉(zhuǎn)換，而是對網(wǎng)頁結構的遍歷解析和內(nèi)容重組，難點主要在于以下3個方面。

·文檔對象模型是基于瀏覽器編程的一套API，是W3C組織出臺的推薦標準。該標準本身設計相對復雜，在DOM樹的建立過程中，需要綜合考慮標簽的位置信息、對應的資源類型信息、語義類型信息，去除頁面設計與主體內(nèi)容無關的元素帶來的頁面復雜度。

·為了實現(xiàn)頁面內(nèi)容的最佳呈現(xiàn)效果，需要對頁面/Web應用的CSS進行處理，去除移動終端不能顯示的CSS樣式內(nèi)容數(shù)據(jù)，修改某些CSS的屬性值（如調(diào)整CSS樣式中的寬度，適配為屏幕尺寸），并添加某些CSS屬性值。

·由于移動終端支持的頁面標簽并不完善，同時應用開發(fā)者提交的頁面中可能也存在某些不能轉(zhuǎn)換或語法存在問題的標簽，因此還需在預處理的過程中增加合法性檢查，去掉不能轉(zhuǎn)換或語法存在問題的標簽。

比較而言，圖片轉(zhuǎn)換和音/視頻轉(zhuǎn)換相對簡單，轉(zhuǎn)換后的效果也比較好。對于音/視頻轉(zhuǎn)換而言，內(nèi)容提供上主要需要關注的是移動平臺對音/視頻編碼的支持情況和運行效率，從而提供更符合移動平臺的內(nèi)容。

4 結束語

HTML5正逐漸改變著互聯(lián)網(wǎng)應用的開發(fā)方式，越來越多的Web網(wǎng)頁/應用將直接遵循HTML5標準。然而HTML5仍然在不斷的發(fā)展過程中，瀏覽器、移動平臺對其的支持程度也并不一致，相信在相當長的時期內(nèi)，融合本地應用和HTML5應用特點的混搭應用（hybrid application）會成為一種常用的應用模式。HTML5為Web網(wǎng)站/服務提供了一種向移動平臺擴展延伸的方式，而基于HTML5的轉(zhuǎn)換技術也將被移動應用提供商所青睞和采用。

1 淺析HTML5在移動應用開發(fā)中的使用.http://www.iteye.com/magazines/67,2012

2 HTML5多媒體的10個常見問題和解答.http://5m3d.com/2012/08/HTML5-多媒體的10個常見問題和解答,2012

3 李慧云,何震葦,李麗等.HTML5技術與應用模式研究.電信科學,2012,28(5):24～29