HTML5在移動(dòng)互聯(lián)網(wǎng)中的優(yōu)勢(shì)分析及典型應(yīng)用

孫瑰琪

HTML5在移動(dòng)互聯(lián)網(wǎng)中的優(yōu)勢(shì)分析及典型應(yīng)用

孫瑰琪

本文結(jié)合HTML5特點(diǎn)和移動(dòng)網(wǎng)絡(luò)應(yīng)用發(fā)展的需要，對(duì)HTML5在移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用優(yōu)勢(shì)進(jìn)行了分析，并針對(duì)優(yōu)勢(shì)技術(shù)，列舉了HTML5在移動(dòng)網(wǎng)絡(luò)中的典型應(yīng)用。

HTML5簡(jiǎn)介

HTML5是HTML（超文本標(biāo)記語(yǔ)言）的第五代修訂版，擁有大量新功能和布局技術(shù)。廣義的HTML是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，對(duì)網(wǎng)頁(yè)的內(nèi)容編排和展現(xiàn)做了進(jìn)一步地增強(qiáng)，大大提升了Web在語(yǔ)義化、交互、終端資源調(diào)用及多媒體等方面的能力，促使Web成為標(biāo)準(zhǔn)化、全功能的應(yīng)用承載平臺(tái)，隨著移動(dòng)互聯(lián)網(wǎng)的普及和人們對(duì)移動(dòng)應(yīng)用的需求增加，HTML5的相對(duì)于其它語(yǔ)言的開發(fā)優(yōu)勢(shì)也變得更加明顯，如今，它已成為實(shí)現(xiàn)移動(dòng)互聯(lián)應(yīng)用的主要發(fā)展方向。

移動(dòng)互聯(lián)網(wǎng)應(yīng)用的發(fā)展

時(shí)下，“移動(dòng)互聯(lián)網(wǎng)+”理念正在蓬勃發(fā)展，人們對(duì)智能終端的依賴程度也越來(lái)越高，移動(dòng)端的生活、辦公變得常態(tài)化，而終端的不同平臺(tái)為我們?cè)缙诘膽?yīng)用開發(fā)增加了繁重的工作和成本，阻礙著應(yīng)用平臺(tái)的進(jìn)步，伴隨著HTML5標(biāo)準(zhǔn)的不斷完善，移動(dòng)平臺(tái)的應(yīng)用開發(fā)變得更簡(jiǎn)潔，而HTML5也勢(shì)必會(huì)引領(lǐng)移動(dòng)聯(lián)網(wǎng)開發(fā)走向一個(gè)新高度。

HTML5開發(fā)移動(dòng)應(yīng)用的技術(shù)優(yōu)勢(shì)

離線存儲(chǔ)技術(shù)。HTML5 中引入了DOM Storage機(jī)制和Web SQL Database存儲(chǔ)方式，實(shí)現(xiàn)了大數(shù)據(jù)和交互數(shù)據(jù)的離線存儲(chǔ)，對(duì)構(gòu)成Web應(yīng)用程序的圖像、JavaScript文件、HTML文件、CSS文件進(jìn)行本地存儲(chǔ)。用戶可以通過(guò)Web應(yīng)用，在設(shè)備在線時(shí)進(jìn)行數(shù)據(jù)緩存，離線時(shí)，瀏覽應(yīng)用內(nèi)容或進(jìn)行數(shù)據(jù)編輯，當(dāng)設(shè)備再次連網(wǎng)時(shí)，數(shù)據(jù)自動(dòng)實(shí)現(xiàn)服務(wù)器同步上傳。強(qiáng)大的離線存儲(chǔ)能力，使得HTML5開發(fā)的網(wǎng)頁(yè)App擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度。一方面減輕了本地設(shè)備的硬件壓力，另一方面也解決了Web應(yīng)用必須聯(lián)網(wǎng)工作的弊端。

定位技術(shù)。HTML5 Geolocation API可以獲得用戶的地理位置，打破了傳統(tǒng)導(dǎo)航軟件和預(yù)裝地圖在定位上的壟斷。通過(guò)Geolocation和移動(dòng)設(shè)備的GPS功能可以實(shí)現(xiàn)準(zhǔn)確的定位，如今我們?cè)偻ㄟ^(guò)手機(jī)瀏覽器使用百度地圖時(shí)，也可以直接實(shí)現(xiàn)導(dǎo)航功能，而不用麻煩的輸入起點(diǎn)和終點(diǎn)了。地理位置的獲取在新聞、天氣等綜合型網(wǎng)站上也有著廣泛的應(yīng)用。

網(wǎng)頁(yè)的多媒體特性。HTML5規(guī)定了通過(guò)audio 和video來(lái)規(guī)定音頻和視頻元素的基本方法，打破了早期大部分網(wǎng)頁(yè)中的音、視頻都需要通過(guò)flash插件來(lái)顯示的傳統(tǒng)方法，減少了頁(yè)面的加載時(shí)間和使用插件帶來(lái)的危險(xiǎn)。并且相對(duì)于原生App的開發(fā)，可以將文字、音視頻靈活的混排，而不用專門嵌入webview，大大的減輕了設(shè)計(jì)師的工作負(fù)擔(dān)。

HTML5添加了畫布（Canvas）繪圖功能。Canvas、SVG（可縮放矢量圖形）與JavaScript結(jié)合可以實(shí)現(xiàn)在網(wǎng)頁(yè)上繪制圖形，并調(diào)整大小等從而擺脫flash、Silverlight等插件。實(shí)現(xiàn)大型地圖的渲染和密集型游戲的制作，為移動(dòng)端的游戲制作和電子地圖開發(fā)增加了新的選擇。

多樣化的交互能力。

硬件設(shè)備兼容特性：HTML5有強(qiáng)大的對(duì)終端設(shè)備的訪問(wèn)和調(diào)用能力。通過(guò)一系列的Device API 接口實(shí)現(xiàn)對(duì)文件、日歷、觸摸、終端系統(tǒng)信息、通信錄、通訊、多媒體捕捉等操作。文件API使文件直接拖放上傳和顯示上傳進(jìn)度并允許瀏覽器訪問(wèn)和管理本地文件系統(tǒng)，改善了基于瀏覽器的Web應(yīng)用程序處理文件上傳的方式；多媒體捕捉API，管理設(shè)備的攝像頭和麥克風(fēng)，用于音、視頻的錄制的播放，在網(wǎng)頁(yè)上進(jìn)行拍照、攝像操作等；文件API借助接口可以實(shí)現(xiàn)本地圖片預(yù)覽功能；終端系統(tǒng)信息API則可以獲取終端設(shè)備的基本信息。

交互事件：HTML5規(guī)范實(shí)現(xiàn)了原生拖放功能，利用拖拽API，使得元素拖放的實(shí)現(xiàn)更加方便和高效。默認(rèn)情況下，可以實(shí)現(xiàn)對(duì)任何對(duì)象的拖動(dòng)。

移動(dòng)端新增touchstart，touchmove，touchend事件，利用這3個(gè)事件，判斷手指的點(diǎn)擊和劃動(dòng)軌跡，我們可以封裝各種手勢(shì)的識(shí)別功能。

數(shù)據(jù)推送技術(shù)： HTML5可以通過(guò)WebSocket 規(guī)范實(shí)現(xiàn)雙向的通信信道的建立，服務(wù)器和客戶端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息，不限于以Ajax(或XHR)方式通——XHR受到域的限制，而WebSocket允許跨域通信。使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。

跨平臺(tái)性：HTML5技術(shù)可以實(shí)現(xiàn)跨平臺(tái)，適配多終端。傳統(tǒng)移動(dòng)終端上的原生App，開發(fā)者必須針對(duì)不同的操作系統(tǒng)進(jìn)行，開發(fā)成本較高。同時(shí)對(duì)于App版本升級(jí)和審核也都要針對(duì)不同的平臺(tái)分別操作，對(duì)于用戶還存在著管理、存儲(chǔ)以及性能消耗成本，HTML5/ JavaScript/CSS3語(yǔ)言所開發(fā)的應(yīng)用只要一次開發(fā)就能進(jìn)入所有瀏覽器進(jìn)行分發(fā)，用戶也無(wú)需進(jìn)行產(chǎn)品升級(jí)，只需服務(wù)器端更新便可。

HTML5在移動(dòng)網(wǎng)絡(luò)中的典型應(yīng)用

移動(dòng)端營(yíng)銷廣告和輕游戲的開發(fā)和推廣。微信公眾號(hào)為主的新媒體營(yíng)銷在近年有了很大的發(fā)展。從國(guó)際品牌到本地企業(yè)，再到小微企業(yè)甚至個(gè)人電商，都正在積極地通過(guò)社交媒體進(jìn)行營(yíng)銷。HTML5的跨平臺(tái)性、交互性和音、視頻使用的靈活性，擺脫了網(wǎng)頁(yè)對(duì)flash插件的依賴，提高了網(wǎng)頁(yè)的加載速度，促使了微場(chǎng)景和輕游戲的出現(xiàn)，將線上、線下活動(dòng)，通過(guò)廣告與游戲的形式結(jié)合，增加了營(yíng)銷行為的親和力，促使了用戶的主動(dòng)參與和傳播，在用戶參與和傳播游戲的同時(shí)，進(jìn)行了營(yíng)銷宣傳并實(shí)現(xiàn)了后臺(tái)的大數(shù)據(jù)分析。

電子地圖性能的提升。傳統(tǒng)的電子地圖存在矢量數(shù)據(jù)可視化標(biāo)準(zhǔn)不統(tǒng)一，不能顯示三維場(chǎng)景，與用戶的交戶能力差、空間分析能力較弱等不足。HTML5中的一些技術(shù)很好地解決了這些問(wèn)題：Canvas和WebGL實(shí)現(xiàn)了圖形的矢量化和地圖的三維化；定位技術(shù)，通過(guò)移動(dòng)設(shè)備的GPS，實(shí)時(shí)獲取用戶的位置信息，增強(qiáng)地圖的交互性；離線存儲(chǔ)技術(shù)，可以讓用戶機(jī)器高速緩存文件和資源，用戶在使用地圖時(shí)不用每次都重新下載地圖數(shù)據(jù)，同時(shí)減少網(wǎng)絡(luò)傳輸量，提高訪問(wèn)速度。

移動(dòng)端數(shù)字化信息系統(tǒng)的開發(fā)應(yīng)用。隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展和人們對(duì)移動(dòng)生活模式的依賴，越來(lái)越多的數(shù)字化系統(tǒng)平臺(tái)開始開發(fā)移動(dòng)陣地。傳統(tǒng)的在線教學(xué)、在線圖書館、在線辦公系統(tǒng)都開始從PC端到移動(dòng)設(shè)備的拓展。HMTL5的雙向通信技術(shù)、多設(shè)備兼容特性使用戶能夠在線協(xié)同處理文檔和實(shí)時(shí)交流，最大限度地實(shí)現(xiàn)實(shí)時(shí)交互；音、視頻的靈活混排特性、Canvas的繪圖技術(shù)讓網(wǎng)頁(yè)的顯示擺脫了對(duì)flash插件的依賴，排除了插件使用帶來(lái)的不安全隱患，保護(hù)用戶信息；離線存儲(chǔ)技術(shù)，擺脫網(wǎng)絡(luò)環(huán)境變動(dòng)對(duì)系統(tǒng)使用的限制，用戶不必?fù)?dān)心網(wǎng)絡(luò)終斷而引起的數(shù)據(jù)丟失和應(yīng)用終止，使用戶體驗(yàn)變得更順暢。

（作者單位：大連市房地產(chǎn)學(xué)校）