HTML5在移動互聯網中的優勢分析及典型應用

孫瑰琪

HTML5在移動互聯網中的優勢分析及典型應用

孫瑰琪

本文結合HTML5特點和移動網絡應用發展的需要，對HTML5在移動互聯網中的應用優勢進行了分析，并針對優勢技術，列舉了HTML5在移動網絡中的典型應用。

HTML5簡介

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

移動互聯網應用的發展

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

HTML5開發移動應用的技術優勢

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

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

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

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

多樣化的交互能力。

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

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

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

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

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

HTML5在移動網絡中的典型應用

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

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

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

（作者單位：大連市房地產學校）