基于HTML5的移動(dòng)Web APP開發(fā)

樊斌鋒

（山西職業(yè)技術(shù)學(xué)院 山西省太原市 030006）

眾所周知，我們目前所處的時(shí)代是一個(gè)高速發(fā)展的信息時(shí)代，各種高新的信息技術(shù)已經(jīng)在各項(xiàng)社會(huì)工作當(dāng)中進(jìn)行應(yīng)用，目前圖書館的移動(dòng)應(yīng)用正在朝向智能化、信息化的方向進(jìn)行發(fā)展，這也是開放的Web 網(wǎng)絡(luò)平臺(tái)的重要基礎(chǔ)。這標(biāo)志著HTML5 不再是面向傳統(tǒng)的網(wǎng)頁設(shè)計(jì)，各種不同類型的終端設(shè)備的使用需求也就能夠得到滿足了，使得移動(dòng)互聯(lián)網(wǎng)時(shí)代中的網(wǎng)頁應(yīng)用能夠得到更加豐富的開發(fā)標(biāo)準(zhǔn)。

1 移動(dòng)應(yīng)用開發(fā)技術(shù)具體發(fā)展變化

從整體的角度上進(jìn)行考量的話，移動(dòng)應(yīng)用開發(fā)技術(shù)的發(fā)展主要分為三個(gè)階段，分別是早期的WAP、流行原生應(yīng)用和后期的以HTML5 標(biāo)準(zhǔn)的基礎(chǔ)的Web APP。目前在移動(dòng)應(yīng)用開發(fā)市場當(dāng)中已經(jīng)具有了大量的移動(dòng)端開發(fā)工作企業(yè)和人員，而且隨著移動(dòng)應(yīng)用開發(fā)技術(shù)的快速發(fā)展，對(duì)移動(dòng)端開發(fā)人員水平的要求是不斷變高，開發(fā)人員必須要掌握一定的底層技術(shù)，熟悉基礎(chǔ)架構(gòu)等[1]。2008年，HTML5 標(biāo)準(zhǔn)草案頒布，為移動(dòng)應(yīng)用開發(fā)提供了另外一種技術(shù)方案。而在2010年發(fā)生了比較大的變革，蘋果宣布其出產(chǎn)的移動(dòng)設(shè)備不再支持傳統(tǒng)的Flash 插件，HTML5 成為了移動(dòng)網(wǎng)站打造豐富網(wǎng)頁應(yīng)用的首選。而且，Native APP 效果的 Web APP 在實(shí)踐應(yīng)用過程中具有更優(yōu)越的安全性、跨平臺(tái)訪問性，符合用戶隱私方面的需求。除此之外更為重要的是，Web APP 的開發(fā)難度比較低，與Native APP 進(jìn)行比較的話，其難度降低的趨勢更加明顯，在實(shí)踐應(yīng)用中，Web APP 的實(shí)用性是更高的。

2 圖書館的移動(dòng)應(yīng)用開發(fā)發(fā)展的流程

2.1 發(fā)展趨勢

2.1.1 服務(wù)內(nèi)容綜合化

從最早期的短信提醒服務(wù)內(nèi)容開始，圖使館的移動(dòng)應(yīng)用開發(fā)距今已經(jīng)經(jīng)歷了多次的技術(shù)革新，在界面表現(xiàn)和用戶可用性方面著重進(jìn)行了提升，使得圖書館的諸多結(jié)構(gòu)能夠集成融合。例如，目前提供的服務(wù)內(nèi)容是非常多樣化的，包含移動(dòng)參考依循、移動(dòng)咨詢推送以及移動(dòng)借閱管理等等[2]，這是綜合性非常強(qiáng)的服務(wù)內(nèi)容，適合用戶的使用習(xí)慣。

2.1.2 創(chuàng)新了應(yīng)用類型

事實(shí)上，早期甚至是現(xiàn)如今時(shí)代中的大部分圖書館移動(dòng)應(yīng)用，其實(shí)都是對(duì)傳統(tǒng)的實(shí)體圖書館或者是數(shù)字圖書館業(yè)務(wù)、功能的復(fù)刻，也就是實(shí)現(xiàn)傳統(tǒng)圖書館業(yè)務(wù)到移動(dòng)終端設(shè)備的遷移。隨著基于HTML5的移動(dòng)Web APP開發(fā)技術(shù)的出現(xiàn)，使得圖書館移動(dòng)應(yīng)用開發(fā)得到創(chuàng)新發(fā)展，應(yīng)用類型也更加符合現(xiàn)代人們的使用習(xí)慣。

2.1.3 建設(shè)主體多樣化

目前圖書館移動(dòng)應(yīng)用的實(shí)施體系和系統(tǒng)體系都在由簡單到復(fù)雜的方向進(jìn)行變化，建設(shè)主體由此也變得多樣化，但是需要注意的是，其中圖書館在其中應(yīng)該擔(dān)當(dāng)什么樣的角色，并且以何種方案參與到移動(dòng)應(yīng)用開發(fā)過程中也是需要多加注意的，這一過程中，多個(gè)建設(shè)主體的分工和協(xié)調(diào)、配合也是極為重要的[3]。

2.1.4 系統(tǒng)結(jié)構(gòu)日益復(fù)雜

眾所周知，早期的圖書館移動(dòng)應(yīng)用具有比較多的劣勢，其中包含功能單一、系統(tǒng)結(jié)構(gòu)相對(duì)比較簡單等等。而隨著時(shí)間的推移，在基于HTML5 的移動(dòng)應(yīng)用開發(fā)技術(shù)的幫助之下，現(xiàn)如今的圖書館移動(dòng)應(yīng)用已經(jīng)變得非常豐富，基本上能夠滿足現(xiàn)代人民群眾使用上的需求，但是與此同時(shí)，其系統(tǒng)結(jié)構(gòu)也相對(duì)比較復(fù)雜，簡答區(qū)分可以將其劃分為數(shù)據(jù)資源層、系統(tǒng)接口層以及應(yīng)用實(shí)現(xiàn)層等等。其中的應(yīng)用層就是利用WAP、APP、HTML5 等移動(dòng)技術(shù)構(gòu)建功能豐富[4]、內(nèi)容展示美觀的用戶使用平臺(tái)。

2.2 HTML5給予了圖書館移動(dòng)應(yīng)用開發(fā)新的契機(jī)

筆者進(jìn)行相關(guān)的調(diào)查和了解之后發(fā)現(xiàn)，從HTML4 到HTML5的技術(shù)革新和理念革新經(jīng)歷了大約十多年的演變，其中的變化不再是小的改變和升級(jí)而是質(zhì)的改變，其不僅適應(yīng)了目前移動(dòng)智能終端設(shè)備，還定位在了一個(gè)功能完整的網(wǎng)頁應(yīng)用開發(fā)平臺(tái)。

2.2.1 開發(fā)難度低且能夠?qū)崿F(xiàn)跨平臺(tái)訪問

與傳統(tǒng)的移動(dòng)應(yīng)用開發(fā)技術(shù)進(jìn)行比較的話，基于HTML5的移動(dòng)Web APP開發(fā)技術(shù)最主要的優(yōu)勢就是開發(fā)難度比較低，其初衷是為了能夠在低能耗和低流量的手機(jī)終端應(yīng)用開發(fā)標(biāo)準(zhǔn)。HTML5是基于B/S 架構(gòu)的標(biāo)準(zhǔn)，因此不存在Native APP 的固有缺點(diǎn)，能夠?qū)崿F(xiàn)跨平臺(tái)訪問的功能，簡單來說，相關(guān)的設(shè)計(jì)者、開發(fā)工作者能夠具有豐富多樣化的移動(dòng)應(yīng)用開發(fā)功能和標(biāo)準(zhǔn)，這對(duì)于移動(dòng)應(yīng)用開發(fā)工作是非常重要的，還使得WAP 標(biāo)準(zhǔn)功能弱小的不足得到了有效得彌補(bǔ)[5]。

2.2.2 降低了技術(shù)門檻

HTML5 使得圖書館移動(dòng)應(yīng)用開發(fā)的技術(shù)門檻降低了很多，而且隨著時(shí)間的推移，圖書館對(duì)HTML5 標(biāo)準(zhǔn)之下的技術(shù)應(yīng)用和相關(guān)的流程變得更加的熟悉，而且HTML5 是在HTML4 基礎(chǔ)之上發(fā)展起來的，其開發(fā)部署方案與HTML4 具有很多的相似點(diǎn)和共同之處，與全新的Native APP 方案進(jìn)行相比的話，在HTML5 技術(shù)背景之下，移動(dòng)應(yīng)用開發(fā)工作是更加容易被相關(guān)的技術(shù)工作人員和用戶所接納的，也比較適合當(dāng)代發(fā)展形勢。

2.2.3 為圖書館建設(shè)注入新的活力

HTML5 標(biāo)準(zhǔn)的頒布使得傳統(tǒng)的圖書館移動(dòng)應(yīng)用開發(fā)局面得到了改變，在實(shí)際的開發(fā)過程中，圖書館可以多元化地采取相關(guān)的建設(shè)策略，并且加速移動(dòng)應(yīng)用的開發(fā)。對(duì)于一些功能多樣化而體系相對(duì)復(fù)雜的移動(dòng)應(yīng)用需要適量購買，而對(duì)于一些開發(fā)難度比較低的移動(dòng)應(yīng)用，圖書館自身?xiàng)l件和環(huán)境適宜的情況之下可以自建。

筆者經(jīng)過實(shí)際的而研究和調(diào)查之后發(fā)現(xiàn)，目前自建移動(dòng)應(yīng)用的實(shí)踐其實(shí)并不是很多，但是HTML5 的出現(xiàn)，可以將其易用、開放和難度比較低的特點(diǎn)，使其成為圖書館自建或者是弓箭的通用標(biāo)準(zhǔn)。

3 HTML5的核心功能概述

3.1 2D/3D圖像繪制技術(shù)

按照現(xiàn)階段的開發(fā)技術(shù)發(fā)展來說，Canvas 是 HTML5 標(biāo)準(zhǔn)中新晉的標(biāo)簽元素，它還提供了基于 JavaScript 的 2D 和 bitmap 圖形的API。Canvas 是最強(qiáng)大的API 之一，只需要利用JavaScript 就能夠?qū)崿F(xiàn)相關(guān)的圖書或者是動(dòng)畫，Canvas 對(duì)于Web APP 的開發(fā)意義也是重大的，這也是HTML5 受到關(guān)注程度更高的功能之一。Canvas能夠給與2D 圖形、圖標(biāo)、動(dòng)畫效果的制作良好的技術(shù)方面的支持，這些API 為HTML5 移動(dòng)用用開發(fā)定義了基本繪畫方式。再加上HTML5 創(chuàng)建3D 圖像是具有多種方案的，目前主要使用三種模型，首先是標(biāo)準(zhǔn)低級(jí)API（OpenGL ES）[6]，這種方式也被專業(yè)工作人員稱之為WebGL。其次就是DOM tree，也就是所謂的X3DOM 模式，也是目前主要使用的方式之一。最后是O3D 模式，這一模式是3D應(yīng)用程序的一個(gè)借口，是由GOOGLE 進(jìn)行研發(fā)的。

3.2 離線應(yīng)用技術(shù)

所謂的離線應(yīng)用技術(shù)，顧名思義，就是脫離傳統(tǒng)的移動(dòng)應(yīng)用開發(fā)的網(wǎng)絡(luò)環(huán)境，使得Web APP 依舊能夠進(jìn)行工作，既能夠?qū)崿F(xiàn)數(shù)據(jù)儲(chǔ)存，還能夠?qū)崿F(xiàn)交換業(yè)務(wù)功能等等，從宏觀角度上來說，離線應(yīng)用技術(shù)的存在促使Web APP 克服了傳統(tǒng)的開發(fā)技術(shù)離線既無用的局限性，使得應(yīng)用的適應(yīng)性更加強(qiáng)大，也符合用戶離線的情況、環(huán)境。

這一技術(shù)的出現(xiàn)是非常重要的，使得產(chǎn)品的開發(fā)工作避免了時(shí)間和空間方面的限制，這項(xiàng)技術(shù)具體能夠?qū)崿F(xiàn)以下三種功能，首先是離線資源的緩存，html5 可以通過緩存清單，指明Web APP 離線工作時(shí)所需的資源文件，并且支持自動(dòng)和手動(dòng)兩種緩存更新方式；

其次還能夠?qū)崿F(xiàn)在線狀態(tài)監(jiān)測功能的實(shí)現(xiàn)，HTML5 提供了事件監(jiān)控兩種檢測方式，分別是Navigator.online 屬性值判斷和Online/Offline，具體的應(yīng)用則需要根據(jù)實(shí)際的發(fā)展情況來進(jìn)行制定，并且離線應(yīng)用技術(shù)在檢測這一方面是比較全面的，能夠促使html5的移動(dòng)Web APP 開發(fā)工作變得更加的穩(wěn)定；

最后是本地?cái)?shù)據(jù)儲(chǔ)存功能，html5 具有兩種獨(dú)立的數(shù)據(jù)儲(chǔ)存機(jī)制，其中Web storage 是以key-value 的形式來進(jìn)行數(shù)據(jù)的保存，類似html4 當(dāng)中的cookie，但是二者進(jìn)行相比較的話，前者的安全性方面的表現(xiàn)是要更加的優(yōu)秀的。另外，web SQL Database 是在HTML5 草案中追加的一個(gè)新功能，這一功能更能夠允許用戶在客戶端進(jìn)行數(shù)據(jù)的操作，相當(dāng)于給予了用戶極大的自由，這也體現(xiàn)出來了基于HTML5的移動(dòng)Web APP開發(fā)的“以用戶為主體”的主要特點(diǎn)。

3.3 設(shè)備適配技術(shù)

事實(shí)上，不同類型、系列的移動(dòng)設(shè)備在各個(gè)方面都存在著不可忽視的差異，傳統(tǒng)的移動(dòng)開發(fā)技術(shù)就很難對(duì)設(shè)備方面做好平衡，html5 面對(duì)這種情況，為了使得不同移動(dòng)設(shè)備的瀏覽訪問得到兼容，使得輸出合適的頁面布局，html5 給予了兩種適配方案[7]。

在設(shè)備信息方面，可以使用一個(gè)統(tǒng)一的服務(wù)器API，并且允許Web 開發(fā)者從眾多的設(shè)備信息庫中，獲取到相關(guān)的配置信息數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)不同移動(dòng)設(shè)備之間的適配；

其次就是給予CSS 的適配，提供了一套特殊的機(jī)制，使得適配布局和行為得到優(yōu)化，其中CSSDeviceAdaptation 定義了一套CSS 指令，參照所持設(shè)備的尺寸，指定每個(gè)布局所適用的尺寸。

3.4 提供豐富的拓展API

Html5 的出現(xiàn)，使得很多設(shè)備硬件能夠?qū)崿F(xiàn)更多的功能，提供了很多操作移動(dòng)設(shè)備硬件的API，其中包含地理位置API、通用感應(yīng)器API 以及信息交互API 等等，這是其前身HTML4 無法做到的，因此這也是HTML5 的移動(dòng)Web APP 的優(yōu)勢之一。

4 圖書館HTML5的移動(dòng)Web APP構(gòu)建案例

4.1 設(shè)計(jì)思路

圖書館移動(dòng)應(yīng)用的主要目的就是實(shí)現(xiàn)其教育功能，但是目前很多圖書館移動(dòng)應(yīng)用使用過程中，用戶的參與程度并不高，教育效果也不是很好。在進(jìn)行圖書館HTML5 的移動(dòng)Web APP 構(gòu)建過程中，在設(shè)計(jì)思路方面需要增強(qiáng)其趣味性，為了實(shí)現(xiàn)這一點(diǎn)可以在其中涉及到一定的游戲因素，譬如可以增加限時(shí)通關(guān)，意在使得讀者在規(guī)定的時(shí)間之內(nèi)將桌面之上的圖書全部放回到書架的正確位置之上，并且可以通過主流的社交網(wǎng)絡(luò)與好友進(jìn)行分享，這還使得移動(dòng)Web APP 得到了有效的推廣。

4.2 具體實(shí)現(xiàn)過程

（1）首先需要重視，本案例中的設(shè)計(jì)思路是以游戲?yàn)檩d體的，而在游戲當(dāng)中，場景是非常重要的，場景能夠清晰向圖書館的讀者傳達(dá)游戲玩法和意義。為了實(shí)現(xiàn)這一點(diǎn)，設(shè)計(jì)工作人員可以采用卡通描繪的方式進(jìn)行游戲場景的設(shè)計(jì)，這不光能夠展現(xiàn)出游戲目的，還是一種性價(jià)比非常高的方式，對(duì)于自身負(fù)責(zé)圖書館移動(dòng)應(yīng)用開發(fā)的單位來說能夠減少非常多的負(fù)擔(dān)，通過生動(dòng)有趣的畫面吸引讀者進(jìn)入到游戲中。

（2）其次負(fù)責(zé)設(shè)計(jì)的工作人員需要將上架過程進(jìn)行細(xì)致的分化。

（3）最后，設(shè)計(jì)工作人員需要重視設(shè)計(jì)游戲的情節(jié)表現(xiàn)，情節(jié)表現(xiàn)直接影響著游戲的趣味性和可玩性，也是基于HTML5 的圖書館移動(dòng)Web APP 開發(fā)的主要效果。為了實(shí)現(xiàn)這一點(diǎn)，設(shè)計(jì)者可以為不同的讀者設(shè)計(jì)好不同的難度，譬如游戲中，設(shè)加入了計(jì)時(shí)控制，讀者必須在倒計(jì)時(shí)結(jié)束前完成圖書上架。還可以發(fā)揮出游戲中的激勵(lì)特點(diǎn)，每當(dāng)讀者完成不同的游戲任務(wù)，設(shè)計(jì)工作人員可以設(shè)計(jì)好不同的榮譽(yù)勛章，這樣便能夠有效地激勵(lì)不同的讀者。而且其中的動(dòng)作設(shè)計(jì)還為游戲增添了真實(shí)性的特點(diǎn)，也完成了圖書館移動(dòng)應(yīng)用的教育性質(zhì)功能。

5 結(jié)論

綜上所述，就是目前為止針對(duì)【基于HTML5 的移動(dòng)Web APP開發(fā)】的相關(guān)研究和分析了，現(xiàn)如今時(shí)代發(fā)展過程中，對(duì)于全面、功能豐富的全媒體應(yīng)用的需求成都是非常高的，其中基于HTML5的移動(dòng)Web APP 開發(fā)能夠發(fā)揮出重要的作用，因此作為移動(dòng)應(yīng)用開發(fā)者，需要基于其足夠的重視程度，并且在新的技術(shù)環(huán)境之下，促使移動(dòng)Web APP 具有富內(nèi)容、富體驗(yàn)、富交互的主要特點(diǎn)，這對(duì)于時(shí)代洪流中的年輕用戶體驗(yàn)是非常重要的。