孫瑰琪

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

孫瑰琪

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

HTML5簡介

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

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

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

HTML5開發(fā)移動應用的技術優(yōu)勢

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

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

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

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

多樣化的交互能力。

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

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

移動端新增touchstart，touchmove，touchend事件，利用這3個事件，判斷手指的點擊和劃動軌跡，我們可以封裝各種手勢的識別功能。

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

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

HTML5在移動網(wǎng)絡中的典型應用

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

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

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

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