HTML5在移動互聯(lián)網(wǎng)應(yīng)用中的特性研究

孫華

摘要：隨著移動互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和創(chuàng)新，HTML5技術(shù)儼然已成為下一代互聯(lián)網(wǎng)的Web標(biāo)準(zhǔn)。基于HTML5的移動互聯(lián)網(wǎng)應(yīng)用正逐漸成為一種新的應(yīng)用形式。文章重點(diǎn)介紹了HTML5的部分特性，對基于HTML5的移動互聯(lián)網(wǎng)應(yīng)用的技術(shù)進(jìn)行了闡釋，對HTML5技術(shù)對于移動互聯(lián)網(wǎng)的發(fā)展趨勢及前景做了展望。

關(guān)鍵詞：HTML5；移動互聯(lián)網(wǎng)；APP； CSS3； Web

1 HTML5概述

HTML5是移動互聯(lián)網(wǎng)最前沿的開發(fā)技術(shù)，運(yùn)用HTML5可以很好地進(jìn)行移動應(yīng)用的開發(fā)。目前，蘋果、微軟和谷歌三大移動互聯(lián)網(wǎng)巨頭都在支持HTML5，它的發(fā)展也給移動互聯(lián)網(wǎng)應(yīng)用帶來全新變化。本文研究HTML5應(yīng)用于移動互聯(lián)網(wǎng)應(yīng)用開發(fā)的核心技術(shù)，探討離線緩存、Web Workers、Ajax、地理定位等新技術(shù)的應(yīng)用，并針對HTML5技術(shù)現(xiàn)有不足進(jìn)行探討。文章主要分析了 HTML5適合移動互聯(lián)網(wǎng)應(yīng)用開發(fā)的幾大特性。

2 HTML5技術(shù)的優(yōu)勢

HTML5在HTML4的基礎(chǔ)上，又增添了很多元素與屬性，并在一定程度上廢除掉了一些元素與屬性。首先，它擁有較低的開發(fā)成本與維護(hù)成本；其次，它使用的頁面數(shù)據(jù)量相對較小，運(yùn)行更為流暢，耗電量不高，使用時(shí)，也可以隨時(shí)完成設(shè)計(jì)，只需要將應(yīng)用程序打開，則可以直接升級到最新的版本，無需下載并安裝，使用時(shí)也可以完成更新，離線的狀態(tài)下，也能夠完成緩存，這些都是其他技術(shù)無法企及的[1]。總的來說，HTML5在文檔結(jié)構(gòu)、頁面元素、本地存儲、地理位置信息等多個(gè)方面都發(fā)生了很大變化，而這些變化也相應(yīng)的提升了HTML5對Web應(yīng)用的開發(fā)支持。像是在媒體支持上，HTML5中增進(jìn)了video元素與audio元素，視頻、音頻以及動畫等多媒體的播放，再也無需進(jìn)行第三方插件的安裝。另外，HTML5開發(fā)是使用統(tǒng)一的開發(fā)環(huán)境、開發(fā)語言、數(shù)據(jù)模型，在音頻、視頻和圖像、文本綁定上都存在一整套規(guī)范。也就是說在HTML5標(biāo)準(zhǔn)下進(jìn)行開發(fā)，便為“一次開發(fā)、多次分發(fā)”，無需在HTML5與其他開發(fā)環(huán)境間自由切換，由此簡化移動網(wǎng)絡(luò)的開發(fā)，開發(fā)成本與維護(hù)成本都有所降低。

2.1 離線緩存技術(shù)

HTML5 Web Storage API屬于高級版的cookie，不會因數(shù)據(jù)大小發(fā)生變化，且架構(gòu)以及彈性較好，能夠?qū)?shù)據(jù)融入本機(jī)ROM中，如遇到突發(fā)情況，瀏覽器關(guān)閉后，再次打開后數(shù)據(jù)能夠自動恢復(fù)，流量損耗也會減小[2]。

緩存技術(shù)也是另外一種方式的后臺“操作記錄”，但是不會對后臺資源造成任何影響，不占用空間，同時(shí)程序?qū)τ布O(shè)備造成的壓力也會減小，運(yùn)行更為流暢。

2.2 交互方式較多

HTML5技術(shù)的互動功能得以提升，能夠輕松實(shí)現(xiàn)拖拽、撤銷等操作，文本選擇更為簡單便捷，例如：Transition代表組件的移動效果；Transform代表組件的變形效果；Animation代表將移動和變形加入動畫支持中。

2.3 加入視覺設(shè)計(jì)輔助——CSS3

CSS3支持了字體嵌入、版面排版以及動畫功能。比如：豐富的彈性選擇器——Selector；嵌入式的字體——Webfonts；形式多樣的排版選擇——Layout；圓角、漸變、陰影Stlying radius gradient shadow；邊框背景支持——Border background。我們可以使用CSS3完成部分視覺設(shè)計(jì)，其具有載入速度快的特點(diǎn)，且代碼、圖片數(shù)據(jù)量小，能夠?yàn)橛脩艄?jié)約一定的流量[3]。

2.4 排版形式更為靈活，能夠自由嵌入多媒體內(nèi)容

HTML4在對文字和音視頻混排的多媒體內(nèi)容處理上是比較麻煩的，需將文字、圖片、視頻和音頻等內(nèi)容進(jìn)行拆分，再解析對應(yīng)的URL，再以不同方式加以處理，但是基于HTML5網(wǎng)絡(luò)互動性的增強(qiáng)，便不會再受到限制。HTML5技術(shù)與其他技術(shù)不同，其能夠在同一時(shí)間處理多媒體內(nèi)容，利用Canvas對象加載圖片，便于依照數(shù)據(jù)計(jì)算與作圖，支持圖片移動、縮放和旋轉(zhuǎn)等常規(guī)編輯，借助HTML5的視頻標(biāo)簽功能，輔助Web開發(fā)工作者更加容易地添加視頻，從而靈活地展現(xiàn)出各類內(nèi)容，這就是它的優(yōu)勢所在。

2.5 隨時(shí)隨地分享地理位置信息以及準(zhǔn)確的定位技術(shù)

為保證位置精確，需要借助GPS，WiFi等實(shí)現(xiàn)定位。HTML5技術(shù)的應(yīng)用，能夠更為精準(zhǔn)地實(shí)現(xiàn)定位，不論是何時(shí)何地，都可用任意設(shè)備來順暢地完成任務(wù)[4]，打破了定位以及導(dǎo)航技術(shù)專屬于導(dǎo)航軟件的歷史，無需下載大量的數(shù)據(jù)包，僅需要使用緩存即可完成，做到隨用隨下。它充分發(fā)揮了移動設(shè)備對定位上的優(yōu)勢，推動基于位置服務(wù)（Location Based Service，LBS）應(yīng)用發(fā)展。

2.6 Canvas繪圖對移動平臺的繪圖能力的優(yōu)化

借助Canvas API就能夠完成簡單的熱點(diǎn)圖繪制[5]，同時(shí)，也能夠?qū)τ脩趔w驗(yàn)數(shù)據(jù)進(jìn)行收集并分析，輕松實(shí)現(xiàn)圖片的旋轉(zhuǎn)、縮放、移動等功能，例如：Canvas代表2D的繪圖功能支持；Canvas 3D代表3D的繪圖功能支持；向量圖的支持SVG。

2.7 擁有能夠?yàn)橐苿悠脚_定制的表單元素

表1為IE瀏覽器中顯示的HTML5表單元素與對應(yīng)鍵盤。只需要輸入例如，就能夠調(diào)用不同樣式鍵盤，操作較為方便快捷。

2.8 完善的實(shí)時(shí)通信支持

由于Web頁面使用的是HTTP協(xié)議，所以無法有效實(shí)現(xiàn)實(shí)時(shí)互動的全部功能，僅能夠借助模擬達(dá)到實(shí)時(shí)通信效果，HTML5技術(shù)實(shí)時(shí)通訊支持較為完善，在應(yīng)用中就能夠?qū)⑿畔?nèi)容嵌入，更好地實(shí)現(xiàn)實(shí)時(shí)通信、實(shí)時(shí)提醒等功能。

2.9 優(yōu)越的文檔功能

在日常使用的Gmail郵件中，已經(jīng)實(shí)現(xiàn)了通過拖拉等操作將文檔作為附件上傳到郵件中進(jìn)行發(fā)送。而這一項(xiàng)技術(shù)就是HTML5文檔功能中的Dragn Drop和File API的應(yīng)用[6]。

2.10 語意化網(wǎng)絡(luò)

語意化網(wǎng)絡(luò)即計(jì)算機(jī)對當(dāng)前頁面顯示內(nèi)容有一定理解，這一點(diǎn)可以幫助我們在SB3技術(shù)上有進(jìn)一步的突破。

2.11 更具優(yōu)勢的跨平臺融合APP開發(fā)

按照當(dāng)前最為流行的兩個(gè)操作系統(tǒng)iOS和Android市場的占有率來看，如果未來想要利用智能手機(jī)更改應(yīng)用程序，需要使用Objective-C+CocoaTouch Framework編寫基于iOS的應(yīng)用程序，也可以使用Java+Android Framework編寫。如果同時(shí)使用兩個(gè)平臺，這就需要設(shè)計(jì)兩套不同平臺的程序，這樣一來就不得不設(shè)計(jì)兩套完全不同的程序。而使用HTML5及CSS3來撰寫Web-based的應(yīng)用程序，可以同時(shí)支援iOS及Android兩種不同的操作系統(tǒng)，只需要維護(hù)一份程序即可，所以HTML5技術(shù)擁有更強(qiáng)的靈活性和優(yōu)勢。

3 結(jié)語

由于當(dāng)前HTML5技術(shù)的標(biāo)準(zhǔn)還不成熟，處在一個(gè)不斷完善的階段，在開發(fā)方式上，仍未指定規(guī)范性的標(biāo)準(zhǔn)，由此，致使開發(fā)應(yīng)用不規(guī)范，程序用戶體驗(yàn)無法達(dá)到原生開發(fā)應(yīng)用效果。為了提升用戶體驗(yàn)滿意度，則需要對程序進(jìn)行改進(jìn)。

目前階段，用HTML5技術(shù)作為移動設(shè)備硬件接口的API，還無法發(fā)揮其作用，在調(diào)用移動硬件相關(guān)設(shè)備時(shí)仍較為困難，比如重力感應(yīng)器、GPS、攝像頭等。不過隨著HTML5技術(shù)的不斷發(fā)展和完善，這些功能也將一一實(shí)現(xiàn)。

[參考文獻(xiàn)]

[1]于洋.淺析HTML5的特點(diǎn)及其在移動Web App中的應(yīng)用[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2014（24）：288.

[2]劉國紅.HTML5在移動互聯(lián)網(wǎng)開發(fā)中的應(yīng)用[J].科技廣場，2014（4）：59-62.

[3]嚴(yán)偉中.關(guān)于HTML5的核心技術(shù)研究與應(yīng)用[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2014（3）：30.

[4]楊鵬，蘆陽.HTML5的發(fā)展與移動互聯(lián)網(wǎng)的前景[J].電腦編程技巧與維護(hù)，2013（10）：67-68.

[5]李偉.HTML5技術(shù)在電子商務(wù)專業(yè)課程改革中的授課方法探討[J].電腦知識與技術(shù)，2013（5）：1249-1250.

[6]彭濤，楊煉.基于移動瀏覽器的HTML5核心技術(shù)的研究及其應(yīng)用[J].廣東通信技術(shù)，2012（4）：47-50.