呂 梁 滕 舟 陳 晴

（浙江省氣象信息網(wǎng)絡中心，浙江 杭州 310017）

辦公系統(tǒng)移動化改造關(guān)鍵技術(shù)研究

呂 梁 滕 舟 陳 晴

（浙江省氣象信息網(wǎng)絡中心，浙江 杭州 310017）

文章對企事業(yè)單位內(nèi)網(wǎng)辦公系統(tǒng)、門戶網(wǎng)站進行移動化改造中的關(guān)鍵技術(shù)進行了深入的研究，其中包括安全接入系統(tǒng)、頁面適配系統(tǒng)，常規(guī)網(wǎng)頁HTML5改造，Word文件移動端轉(zhuǎn)換和APP方案等方面。提出了一整套將基于傳統(tǒng)電腦訪問的系統(tǒng)轉(zhuǎn)換為可以支持智能手機、平板電腦友好、高效訪問的移動化平臺系統(tǒng)的改造方法。文章提出的多種關(guān)鍵技術(shù)具有較好的實際操作性，能夠支持大部分辦公系統(tǒng)的移動化改造，對各種移動終端也具有較好的兼容性。

虛擬專用網(wǎng)頁面適配HTML5改造Word轉(zhuǎn)換APP客戶端

1 引言

隨著辦公自動化進程的不斷推進，各級部門負責人及業(yè)務人員在外出辦公時對事務處理的移動化需求不斷增加，傳統(tǒng)的計算機辦公自動化系統(tǒng)無法適應需求，需要一種能夠隨時隨地獲取重要信息并及時處理的新型系統(tǒng)與之適應。與此同時，伴隨移動互聯(lián)網(wǎng)和智能手機大潮的來襲，移動辦公的概念應運而生，儼然成為一場辦公革命，突破了對業(yè)務管理和事務處理的諸多限制。

然而，想要獲得移動辦公的能力卻不是一件輕松的事情。目前企事業(yè)單位的內(nèi)部辦公系統(tǒng)、網(wǎng)站大部分架設(shè)于內(nèi)部網(wǎng)絡之上，外網(wǎng)及移動終端訪問困難。大部分系統(tǒng)主要針對PC端用戶開發(fā)，其中含有大量根據(jù)PC端、IE瀏覽器特別定制的插件、應用、設(shè)計，對移動終端存在一系列的兼容性問題。同時，大部分辦公系統(tǒng)經(jīng)歷了多年的運行，有著海量的歷史數(shù)據(jù)和深厚的用戶基礎(chǔ)，牽一發(fā)而動全身。如果另起爐灶建立一套全新系統(tǒng)，費時費力，這也是移動辦公大范圍推廣道路上的絆腳石。

因此，研究如何建立一套可行的辦公系統(tǒng)移動化改造方案，就有其現(xiàn)實意義。根據(jù)這一思想，本文從安全接入、頁面適配、網(wǎng)頁HTML5改造、Word文件轉(zhuǎn)換和APP客戶端開發(fā)等多個角度進行深入研究，聚焦移動化改造辦公系統(tǒng)中的突出問題。如何既保留現(xiàn)有系統(tǒng)的歷史數(shù)據(jù)和操作習慣，又增加對移動辦公的整體支持，就成為了本文需要重點解決的問題。

2 安全接入系統(tǒng)

2.1 VPN技術(shù)的應用

內(nèi)網(wǎng)辦公系統(tǒng)移動化改造首先需要解決的是移動終端的安全接入問題，即如何隨時隨地安全地接入到企業(yè)內(nèi)部網(wǎng)絡并獲得數(shù)據(jù)交互。由于辦公系統(tǒng)通常架設(shè)在企業(yè)內(nèi)網(wǎng)中，與internet及手機通信運營商網(wǎng)絡處于物理隔離狀態(tài)，這里需要使用VPN技術(shù)。

虛擬專用網(wǎng)VPN(Virtual Private Network)是在公眾網(wǎng)絡服務商ISP提供的網(wǎng)絡（包括Internet，3G，4G網(wǎng)絡等）基礎(chǔ)設(shè)施上構(gòu)建的一種安全的專用網(wǎng)絡，能夠以較低的成本在遠程用戶和局域網(wǎng)之間建立點對點連接[1]。

2.2 VPN協(xié)議分類

根據(jù)VPN使用的協(xié)議分類，從訪問方式可以分為基于Web和基于客戶端2個方面：

基于WEB:

安全套接層協(xié)議(SSL)SSL屬于安全協(xié)議中的較高層級，其中較為常用的是以此為基礎(chǔ)的WEB安全傳輸協(xié)議（HTTPS）。

基于客戶端:

當前主流的手機操作系統(tǒng)（Android，IOS，Windows phone）原生支持以下三種VPN協(xié)議[2]，不需要額外安裝VPN客戶端：

①點到點隧道協(xié)議(PPTP)：PPTP建立在PPP協(xié)議基礎(chǔ)上，是一種支持多協(xié)議VPN加強型安全協(xié)議；

②L2TP：數(shù)據(jù)包點到點連接安全協(xié)議；

③IPSec：以暗號的方式對IP包進行處理，并進行加密傳輸?shù)膮f(xié)議。

2.3 VPN技術(shù)選擇

使用VPN技術(shù)時，主要有采購VPN設(shè)備，架設(shè)或租用連接網(wǎng)絡、配置相應的VPN策略以及客戶端的培訓和使用等工作。VPN技術(shù)具有以下不同的特性：

(1)訪問方式

基于Web的SSL VPN方案僅需要瀏覽器訪問特定的WEB并實現(xiàn)登錄即可，適用于只需要簡單訪問內(nèi)網(wǎng)WEB頁面的用戶；如果需要有較高訪問權(quán)限，比如需要打開文件，運行程序等的情況，推薦使用具有更強功能的基于客戶端（PPTP，L2TP，IPSec）的VPN。

(2)安全需求

由于各類協(xié)議加密算法和認證模式強度不同，如果僅需要較低的安全性需求，可以采用基于PPTP，L2TP客戶端VPN方案，而對安全性需求較高的領(lǐng)域，請使用而基于IPSec或SSL VPN客戶端VPN方案。

(3)協(xié)議支持

如果應用僅需要支持TCP/IP協(xié)議傳輸數(shù)據(jù)，可以采用IPSec或SSL VPN客戶端方案。而對那些需要多協(xié)議支持的應用(如NetBEUI、TCP/IP、IPX/SPX等)，采用基于PPTP，L2TP的客戶端VPN方案則更為適合。

最終我們實現(xiàn)的架構(gòu)如圖1所示：

圖1 整體架構(gòu)

3 頁面適配系統(tǒng)

3.1 適配技術(shù)選擇

圖2 各類手機屏幕尺寸

如圖2所示，不同的手機終端具有不同的按鍵布局、屏幕尺寸和像素分辨率。受限于手機的屏幕本身就小，因此既要考慮應用在不同屏幕大小上的適配，又要保持其一致性，同時還要提高每個手機屏幕的使用效率，這就存在著很多的矛盾點。有兩種辦法可以讓手機用戶訪問PC網(wǎng)頁時具有良好的體驗：

方案一是按照適配手機的原則新建一個網(wǎng)站，它獨立于PC端網(wǎng)站（例如淘寶網(wǎng)www.taobao.com和手機淘寶網(wǎng)m. taobao.com）。系統(tǒng)則根據(jù)用戶訪問設(shè)備的標示碼，提示用戶切換。這種方案的優(yōu)點是專門對移動設(shè)備進行了優(yōu)化，從而能夠獲得更好的瀏覽體驗。同時，由于手機瀏覽頁面是按流量收費，在節(jié)約開支方面有一定的優(yōu)勢。劣勢是用戶需要記住兩個地址，不具備統(tǒng)一易用性，還會另外增加開發(fā)維護成本。

另一種方案則是自適應切換，網(wǎng)站充分考慮到多終端訪問的情況，預先準備好不同的頁面布局來與之適應，能夠?qū)崿F(xiàn)單一域名。這類跨屏適配技術(shù)以HTML5為基礎(chǔ)，預先完成對目標網(wǎng)頁元素的分析和標記，根據(jù)用戶手機終端的參數(shù)實時進行展現(xiàn)方式的最佳計算，最后利用頁面重構(gòu)和CSS渲染的方式將結(jié)果提交用戶。

綜合考慮各方面的因素，本文在對內(nèi)部辦公系統(tǒng)進行移動化改造時使用第二種方案。

3.2 網(wǎng)頁適配改造

3.2.1 添加viewport元標簽

在頁面代碼的最上端，添加標簽：

viewport指的是網(wǎng)頁的可視區(qū)域。由于手機屏幕寬度有限，viewport的寬度設(shè)定顯得尤其重要，網(wǎng)頁的高度則可以通過用戶上下滾屏進行適應，也可以進行文字、標題欄的折行和伸縮[3]。Viewport與用戶端瀏覽器的大小相互適應，瀏覽器的大小改變也會令Viewport改變頁面布局。

在PC瀏覽器中，供網(wǎng)頁顯示的區(qū)域（除去邊框、滾動條、工具欄）就是viewport。不同之處在于，手機是基于viewport來呈現(xiàn)頁面的。用戶進行頁面放大縮小后，viewport是保持不變的，改變的是按比例縮放的頁面內(nèi)容。例如：在viewport設(shè)置相同的的情況下，手機頁面的布局呈現(xiàn)與在PC端結(jié)果一致，僅僅是因為手機屏幕寬度限制，頁面內(nèi)容按比例進行了縮小。

由于android和iphone手機對多點縮放的支持，容易導致網(wǎng)頁縮放太小使得手機顯示混亂，相反縮放設(shè)置過大又會導致顯示的字體和圖片失真。因此，將initial-scale（初始化縮放比例參數(shù)）設(shè)置為1.0，網(wǎng)頁默認打開時占滿全部屏幕。

另外，對于那些較早版本的瀏覽器（主要是IE6和IE7），viewport的支持需要添加css3-mediaqueries.js這類腳本。

3.2.2 使用相對寬度和字體大小

在頁面布局時，盡量不使用絕對性定義，比如絕對寬度布局和絕對寬度元素，這樣頁面可以根據(jù)設(shè)備信息動態(tài)調(diào)整。另外在CSS的使用方面，也不能使用指定的像素寬度width:xx px，而只能指定百分比的寬度width:xx%還有width:auto。對于字體的大小設(shè)定，需要使用相對大小em。例如：

以默認大小的0.8設(shè)定SMALL的字體大小。

3.2.3 使用流動布局（fluid grid）

流動布局[4]是指各類元素的位置不是固定的，可以根據(jù)展現(xiàn)形式的需要動態(tài)浮動，例如：

如果頁面被寬度所限放不下三個元素，最后的元素就會被浮動到下方顯示，不會出現(xiàn)水平滾動條。從而使得頁面簡潔，具有有專門定制的效果，較為適用于屏幕較小的使用場景。

另外，還需要盡量避免絕對定位（position:absolute）的使用。

3.2.4 使用CSS3選擇加載

隨著Media Query[4]加入到CSS3的設(shè)定序列，頁面能夠?qū)崿F(xiàn)根據(jù)訪問設(shè)備屏幕的寬度來選擇性加載對應的CSS文件，舉例如下：

當用戶屏幕介于480px和700px，就加載small.css。

同時在單一CSS中也可以根據(jù)用戶屏幕不同，使用多種@media設(shè)置，如：

當終端寬度小于300時取消浮動top塊（float:none）、寬度自動調(diào)節(jié)（width:auto），listbar塊取消顯示（display:none）。

3.2.4 設(shè)置圖片自適應（fluid image）

網(wǎng)頁中還需要關(guān)注的是圖片的自適應顯示問題，如：

對于網(wǎng)頁內(nèi)陷入的視頻文件同樣有效，可以都將其改為：

另外，面對PC端縮放圖片出現(xiàn)圖像失真的問題，可以嘗試使用IE的專有命令：

最后，如果對圖片自適應有更高的要求，還可以做適配分辨率的圖片，服務器端和客戶端都有較多方法實現(xiàn)。

4 網(wǎng)頁HTML5改造

4.1 HTML5概述

html5將JavasScript、CSS、html等三大技術(shù)進行深入融合，從而實現(xiàn)對手機、平板等設(shè)備終端的數(shù)據(jù)傳輸通道和用戶操作接口支持[5]。它最大的優(yōu)點就是不必為IOS和Android等不同的硬件平臺開發(fā)不同的版本，html5可以通過css的樣式來進行自適應。以下是開發(fā)HTML5的常用框架：

①輕量級框架jQuery Mobile：為所有的主流移動操作系統(tǒng)平臺提供了高度統(tǒng)一的移動界面框架；

②重量級富框架Sencha Touch：將現(xiàn)有的ExtJS整合JQTouch和Raphael庫，產(chǎn)品的界面風格與iPhone和Android等開發(fā)的原生App類似。

跨平臺的PhoneGap：可以訪問手機內(nèi)部的應用程序和數(shù)據(jù)接口，并且是開源、免費的。實現(xiàn)了編寫一次，云端運行。

4.2 HTML5頁面改造技術(shù)

將HTML4改造為HTML5，主要流程有以下幾個部分：

4.2.1 簡化文件頭代碼段

在HTML5中簡化了很多HTML4的頭代碼字段[6]，例如：

4.2.2 替換使用全新語義元素

新版HTML5中，這些標記被重新定義并簡化，整兒網(wǎng)頁的層結(jié)構(gòu)清晰易讀：

改造語義元素步驟如下[7]：

①將id為header的div元素，改為＜header＞元素：頁面的頁眉定義以及部分內(nèi)容字段（導航條、搜索框和網(wǎng)頁標識等）；

②將id為navigation的div元素，改為＜nav＞元素：主要為網(wǎng)頁的導航模塊和超鏈接內(nèi)容；

③將id為footer的div元素，改為＜footer＞元素：網(wǎng)頁的頁腳注釋，聯(lián)系方式和版權(quán)介紹等；

④將側(cè)邊欄id為siderbar的div元素，改為＜aside＞元素：主要為側(cè)邊欄的附屬類信息；

⑤將＜section＞元素包含側(cè)邊欄中的每個內(nèi)容塊：主要功能是文檔的分段和分節(jié)標示；

⑥使用＜em＞標記內(nèi)容中需要強調(diào)的部分，使用＜b＞標記需要著重指出的部分；

⑦給頁面添加地標角色＜nav role="navigation"＞，可用的role值分別是：application、banner、complementary、contentinfo、form、main、navigation、search。

除此之外，HTML5還提供了更為豐富的幾十個全新標簽，使得頁面更具可讀性，使用這些標簽對搜索的優(yōu)化和頁面執(zhí)行效率都有很大的提升。

4.2.3 使用CSS3代替樣式

使用全新的CSS3元素替換舊版HTML中的樣式屬性。如文字、顏色、間距等。

5 Word文件移動端轉(zhuǎn)換

5.1 Word文件轉(zhuǎn)換HTML技術(shù)

在原有的辦公系統(tǒng)中，存在很多具有WORD附件的網(wǎng)頁，如果想在移動終端中獲得較好的閱讀體驗，就必須對此類WORD附件進行專門的轉(zhuǎn)化。

主要的轉(zhuǎn)換思路如下：

①逐一讀取整個WORD文檔，并將內(nèi)容存入到字符串序列中；

②從字符串序列中獲取文件的標題，并且封裝成HTML格式，如＜html＞＜head＞＜title＞測試標題＜/title＞＜/head＞＜body＞；

③從字符串序列中搜查表格字段，記錄相應的開始、結(jié)束表格偏移量，同時將表格內(nèi)容等一并構(gòu)造出HTML表格；

④從字符串序列中逐一獲得文本內(nèi)容的字體、大小，以字符屬性不同為止，逐個構(gòu)造相應的HTML字符串；

⑤將內(nèi)含的制表回車符等單獨構(gòu)造HTML；

⑥將圖片信息保存并構(gòu)造顯示相關(guān)圖片的HTML（＜imgsrc='d://demo//test.jpg'/＞）。

如果需要使用第三方軟件包，根據(jù)操作系統(tǒng)不同可以分為兩類：WINDOWS平臺使用jacob實現(xiàn)；LINUX平臺使用poi實現(xiàn)。最終轉(zhuǎn)換結(jié)果如圖3：

圖3 Word文件轉(zhuǎn)為HTML效果

5.2 WINDOWS平臺jacob實現(xiàn)

Java程序能夠通過Jacob遠程調(diào)用COM組件和Win32類庫。Jacob使用windows平臺的Jacob.dll動態(tài)鏈接庫。它的兼容性較好，可以轉(zhuǎn)換.doc和.docx。使用eclipse編譯器，具體流程如下：

①到官網(wǎng)下載Jacob，并解壓；

②引入jacob.jar包，將Jacob.jar添加到Libraries中；

③將Jacob.dll放至當前項目的“jrein”以及“C: WindowsSystem32”下面；

④編寫程序并調(diào)試通過。

從結(jié)果可以看到，Jacob成功轉(zhuǎn)換了WORD文件，結(jié)果中包含一個對應文件夾，存放了包含源圖片在內(nèi)的相關(guān)文件。

5.3 LINUX平臺poi實現(xiàn)

LINUX平臺可以使用poi工具。下載poi后在eclipse項目中引用jar包，如圖4所示：

圖4 項目需要引用的JAR包

程序編寫并執(zhí)行成功后，poi成功轉(zhuǎn)換了對應的WORD文件，同樣的也生成了相關(guān)的圖片文件夾。

源代碼中需要將“utf-8”改為“GB2312”以解決一些亂碼問題：

serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");

FileUtils.writeStringToFile(newFile(tpFile),content, "utf-8");

6 APP客戶端開發(fā)

有了以上基于WEB瀏覽器等瘦客戶端方式訪問內(nèi)網(wǎng)應用的基礎(chǔ)，就可以較為容易地開發(fā)基于APP客戶端訪問方式的應用。APP客戶端訪問方式可以極大地增強用戶體驗和程序運行效率。主要技術(shù)思路是APP客戶端可以使用內(nèi)嵌網(wǎng)頁或者提供WEBSERVICE的方式訪問后臺服務器，數(shù)據(jù)傳輸可以使用XML、JSON或二進制等自定義封裝包的形式。基于目前比較流行的IOS和Android系統(tǒng)，從開發(fā)的角度給出以下分析和建議：

6.1 IOS客戶端

IOS主要應用于蘋果公司的移動終端（iPhone、ipad），需要掌握Objective-c語言或者最新的Swift語言，開發(fā)環(huán)境需要有運行Mac OS的蘋果電腦或者PC虛擬機（執(zhí)行效率較低），開發(fā)工具為Xcode和IOS SDK[8]。另外，如果需要將軟件發(fā)布至蘋果的APP STORE以供隨時下載使用，還需要付費購買IOS開發(fā)者賬號。因此IOS客戶端開發(fā)前期投入成本較高，但是優(yōu)勢在于IOS程序執(zhí)行效率高，用戶體驗更佳。

6.2 Android客戶端

Android支持大部分基于Android及深度定制系統(tǒng)的終端，可以說應用范圍更廣。Android客戶端開發(fā)入門門檻較低，僅需要一臺PC和安裝AndroidSDK的eclipse軟件即可完成[9]，使用的語言是JAVA，易于上手。但是由于JAVA程序的運行特點，Android APP執(zhí)行需要JAVA虛擬機，存在對終端硬件要求較高、程序碎片化和執(zhí)行效率較低等情況。當然，隨著Android操作系統(tǒng)版本的提升和智能手機硬件的快速增強，以上問題正在逐步改善。

[1]王達.虛擬專用網(wǎng)（VPN）精解[M].北京：清華大學出版社，2004，5-8.

[2]Richard Tibbs,Edward Oakes.Firewalls and VPNs:Principles and Practices[M].Prentice Hal,2008,3-10.

[3]張亞飛.HTML5和RIA網(wǎng)站設(shè)計[M].北京：清華大學出版社，2011，56-57.

[4]Sergey Mavrody.HTML5和CSS3快速參考[M].北京：人民郵電版社，2013，20-23.

[5]Anselm Bradford,PaulHaine.深入理解HTML5：語義、標準與樣式[M].北京：電子工業(yè)出版社，2013，10-12.

[6]石川.HTML5移動Web開發(fā)實戰(zhàn)[M].北京：人民郵電出版社，2013，83-88.

[7]Chuck Hudson,TomLeadbetter,HTML5 Developer's Cookbook[M].Addison-Wesley Professional,2013,325-339.

[8]Jack Nutting,FredrikOlsson,DavidMark,JeffLaMarche.精通iOS開發(fā)[M].北京：人民郵電出版社，2014，5-20.

[9]Wei-Meng Lee.Beginning Android 4 application Development[M].Wrox,2012,30-45.

Research on Key Technologies for the Mobile Transformation of Office System

LV Liang，TEN Zhou，CHEN Qing
(Zhejiang Meteorological Information and Network Center,Hangzhou Zhejiang 310017,China)

Aimed at the mobile transformation of office system based on the intranet,this paper did many researches and made some innovative contributions in the following fields:security access system,page adaptation system,HTML5 transformation of the website,the mobile conversion of Word files and the APP solutions,etc.The paper offers a set of solutions on conversion system based on traditional computer access for a mobile platform can support the smart phone,tablet computer friendly and efficient accessing.Several key techniques are proposed in this paper is practical and a set of effective solution.They can support most of office systems and provide good support for all types of mobile terminal.

VPN;page adaptation;transformation of HTML5;conversion of Word;APP solutions

TP311

A

1008-1739（2015）07-67-6

定稿日期：2015-03-12