基于HTML5的移動互聯網應用轉換技術*

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

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

1 引言

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

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

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

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

（1）離線存儲能力為移動互聯網應用的開發提供了基礎

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

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

在HTML5中，增加了

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

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

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

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

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

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

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

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

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

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

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

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

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

3 轉換技術

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

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

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

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

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

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

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

3.1 文檔轉換

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

3.1.1 Office文檔轉換為HTML5

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

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

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

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

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

Office轉換為HTML主要包括如下兩種方式。

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

圖1 轉換的總體架構流程

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

3.1.2 PDF轉換為HTML5

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

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

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

3.2 圖片轉換

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

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

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

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

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

3.3 音/視頻轉換

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

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

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

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

3.4 網頁結構轉換

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

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

因此，頁面的轉換需要從如下兩方面入手：

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

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

為了實現上述功能，網頁結構轉換工具完成網頁結構轉換工作的流程可以劃分如下。

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

·主體內容處理：根據規則完成頁面主體內容的識別處理與不重要內容的剔除工作。

·樣式處理：對提取了主體內容的DOM樹進行樣式處理，包括對CSS文件的調整與過濾。

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

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

3.5 轉換技術比較

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

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

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

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

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

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

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

4 結束語

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

1 淺析HTML5在移動應用開發中的使用.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