HTML5-下一代Web開發技術

2015-11-23 02:36:40李國華

大眾科技 2015年7期

關鍵詞：動畫用戶

李國華

（中國科技開發院廣西分院，廣西南寧 530022）

HTML5-下一代Web開發技術

李國華

（中國科技開發院廣西分院，廣西南寧 530022）

HTML5被認為是互聯網行業冉冉升起的新星，它受到了各大瀏覽器廠商的支持。文章簡要的描述了HTML5的相關概念，并闡述了HTML5在繪制圖形、多媒體播放、本地存儲、離線Web應用程序、獲取地理信息等方面的應用。

HTML5；移動應用

1 背景

1.1HTML5的相關概念

（1）World Wide Web

World Wide Web（下文簡稱Web），中文名稱萬維網，是信息資源的網絡。Web的廣泛應用，依賴于三個核心機制。

①URI：一個統一的命名規范，用于定位Web中的資源；

②HTTP：用于訪問Web資源的網絡協議；

③HTML：用于描述資源和應用，以及在資源直接導航的超文本標記語言。

（2）URI

Web中每一個可用的資源，都可以使用 Universal Resource Identifier（統一資源標識符，簡稱URI）來標識。通常，URI由以下三部分構成：

①用于訪問資源的機制；

②存放資源的主機；

③資源在主機中的路徑名。

例如，以下的URI

http://www.w3.org/TR

所標識的資源，訪問機制是 http協議，主機為www.w3.org，資源的訪問路徑是/TR。

（3）HTML5

2014年 10月 28日，萬維網聯盟（World Wide Web Consortium，W3C）發布了 HTML5的正式推薦標準（W3C Recommendation）。HTML5是超文本標記語言第5版，在這個版本中，增加了很多的新特性和新元素，而且重新定義了清晰的規則，使得Web應用開發更加規范和友好，大大擴展了Web開發者的能力，減輕了他們的負擔。

HTML5帶來了許多新的用戶體驗。使用HTML5開發的網頁可以自然的支持音頻和視頻，不需要安裝額外的插件。支持畫布功能，可以在其上進行圖像繪制。可以使用數學標記語言描述數學公式，可以使用輕量級的矢量圖，可以定位用戶的地理位置，支持服務端推送消息，等等。

1.2HTML5出現的背景

（1）WEB標準的瓶頸

以前的改進都是基于現有的Web頁面標記模型，偏重于技術上的變革，本質上卻對應用本身貢獻甚微。HTML不僅僅是一個文檔，HTML需要關注應用本身，需要實用化的技術。

（2）云計算的趨勢

過去，瀏覽器只負責網頁基本內容、格式的渲染和基礎腳本的執行，其他應用由第三方插件或者專門的軟件來完成。網絡技術發展的大勢所趨是瘦客戶端與云計算的組合，瀏覽器能力要更強大。

1.3HTML5出現的意義

（1）更加關注web應用

新元素的引入都是基于編寫實踐，并且“改善交互能力”成為了重點關注的領域。

（2）設備無關性

HTML并不假定一定會是一個 PC上的瀏覽器來展現頁面，開發的應用不需要考慮不同操作系統的差別，設備無關的交互體驗特性可以讓移動終端獲得更好的可用性。

（3）更低的成本

使得頁面變得更小，減少了用戶不必要的支出。而且，性能更好使耗電量更低。

（4）WEB文檔的結構

借助HTML5的語義標簽，可以實現更具結構化，語義化的 Web 文檔。

（5）更好的安全性

不需要額外的插件支持，安全性可以統一給予保證。

2 html5的主要特性分析

2.1視頻

HTML5出現之前，如果需要在網頁上播放視頻，通常是安裝額外的瀏覽器插件，比如Flash。但是，這是各個瀏覽器廠商和播放器廠商的自發行為，并沒有一個標準來規范如何在網頁上使用視頻。因此，不同的瀏覽器存在各種各樣差異和兼容性問題，給開發者和用戶造成了很多的困擾。

HTML5改變了這種情形。HTML5提供了

（1）Ogg–一種強大的容器格式，HTML5支持Theora編碼的視頻；

（2）MPEG4-HTML5支持H.264編碼的視頻；

（3）WebM-HTML5支持VP8編碼的視頻。

就像操作網頁上的其他元素一樣，HTML5中的Javascript腳本能夠通過DOM（文檔對象模型）操作

2.2音頻

音頻和視頻類似，HTML5之前人們通過瀏覽器插件播放和控制音頻，不同廠商和版本的瀏覽器對音頻支持差異很大，導致播放音頻的網頁常常不能在各瀏覽器間通用，開發人員要針對不同瀏覽器開發不同的網頁版本，代價巨大。插件的安裝增加了用戶的困擾，加上操作系統和防護軟件的限制，常常導致用戶無法正常訪問播放音頻的網頁。

HTML5提供

（1）Ogg Vorbis；

（2）MP3；

（3）Wav。

2.3拖放

拖放是一種很常用的界面模式，使用鼠標點擊并按住界面上的某個對象，移動鼠標到另一個區域并松開，則界面對象被拖動到該區域。在HTML5未出現之前，使用Javascript也能夠實現拖放的效果，但是實現起來非常繁瑣易出錯，而且存在瀏覽器兼容性問題。幸運的是，在HTML5中，已經規定了拖放的標準API，可以適用于任何元素。只要簡單的處理拖放事件，開發人員就可以產生并控制拖放的效果。

2.4畫布

HTML5出現以前，如果想要開發動畫應用，是一件很困難很復雜的事情，通常需要花費大量時間學習第三方的動畫制作框架。HTML5畫布(Canvas)功能解救了廣大的動畫開發人員，Web程序員可以使用畫布API，通過Javascript制作各種動畫效果。

HTML5定義了一個

2.5SVG

SVG是可伸縮矢量圖形 (Scalable Vector Graphics)的縮寫，是一種矢量圖格式。HTML5提供對SVG的支持。使用SVG有很多優勢。SVG格式使用XML定義，是文本格式，意味著可以使用普通的文本編輯器來創建和修改 SVG矢量圖。SVG矢量圖的體積小，可被搜索和索引，還可以進一步壓縮。作為矢量圖，具備隨意放大圖形同時保持圖形質量不會下降。HTML5提供了

2.6地理定位

HTML5 定義了Geolocation（地理定位）的API，可以編程獲取用戶的地理位置，從而可以調用第三方的地圖服務在地圖中展示。可以想象，這項技術能夠催生許多有價值的應用，例如，顯示用戶周圍的商家或其他用戶關注的信息，GPS導航，等等。

2.7客戶端存儲

沒有HTML5的時代，一般情況下使用cookie來存儲客戶端的數據。然而cookie有許多限制，也不適合較大數據量的存儲。而且cookie在請求頁面的時候會傳回服務器，導致效率不高。

HTML5提供了另外兩種客戶端存儲技術：

（1）localStorage–這種存儲沒有時間的限制；

（2）sessionStorage–這是用于會話的數據存儲。

HTML5提供的客戶端存儲，并不會每次傳回服務器，僅在需要的時候使用，大大提高了效率，從而可以在客戶端存儲大量數據，并且不影響網站的性能。這些存儲是區分不同站點的，而且具有權限控制，不同的網站只能訪問自身的數據。

2.8Web Worker

Web worker提供了后臺運行JavaScript的能力。HTML5之前，javascript只能在UI線程運行，很容易阻塞UI線程，導致界面沒有響應。使用Web worker，可以將耗時的任務放在后臺線程運行，不影響UI線程，從而保持頁面的及時響應，帶給用戶更好更快的UI體驗。

2.9服務器推送事件

從前的Web是單向的，即只能由客戶端發起請求，才能獲取服務器的信息。如果希望及時獲取服務器的更新，只能夠頻繁不斷地輪詢服務器，消耗大量的CPU和網絡資源，導致性能的地下。

HTML5提供了 Server-Sent 事件，網頁自動獲取來自服務器的更新。這項技術的應用也很廣泛，例如，微博更新即時推送、新的博文、新聞推送等。

2.10更豐富的、具有語義的標簽

HTML5的標簽更適合由瀏覽器提供最適合設備或平臺的展現，更便于搜索引擎理解文檔。

3 HTML5的移動應用

3.1移動應用

HTML5適用于移動APP/SITE的開發，有如下特點：

（1）渲染更快速；

（2）離線程序，適用于各種移動使用場景；

（3）可以在多種平臺的設備上運行；

（4）使用HTML5

（5）IPhone、iPad等對HTML5的支持很好，使用html5的網站能夠提供更佳體驗。

3.2實例

（1）實例一：http://everytimezone.com/ 一個ipad移動應用的效果演示。

特點：

①未使用圖片、js，簡潔實現效果；

②gzip壓縮后大小僅有幾K；

③觸發條件不僅限于觸摸 event--這樣非觸摸的終端也可以使用了。

（2）實例二：http://www.technetra.com/ipdc3/ countdown-2.0/ 不停走動的倒計時器—會記住你的選擇。

圖1　不停走動的倒計時器

（3）實例三：http://mrdoob.com/projects/harmony/終端上實現素描效果。

圖2　終端上實現的素描效果

（4）實例四：http://www.kesiev.com/akihabara/ 吃豆游戲iPhone版。

圖3　吃豆游戲

完全把html5當客戶端用，對未來手機應用（游戲）的開發應用有重要意義。

（5）實例五：Gmail for iPad。

特點：

①當用戶通過iPad設備訪問Gmail郵箱的時候，該網站的一些優化功能更將會自行啟動，其外觀呈兩列排布，視圖光滑。易用性較好，在應用界面的左側是郵件的標題清單，詳細的郵件內容則位于界面的右側；

②離線預讀，方便移動場景下的使用；

③支持附件的雙向拖拽；

④對速度的提升：“Chrome+HTML5實現一秒鐘啟動Gmail”。

[1] Kevin Purdy.How HTML5 Will Change the Way You Use the Web[J].IEEE Journal,2009,56(3):113-114.

HTML5-the next generation of Web development technology

HTML5 is considered the rising star in the Internet industry. It was supported by many browser vendors. This article briefly describes the HTML5 related concepts, and describes the application in HTML5 rendering graphics, multimedia playback, local storage, offline Web applications, access to geographic information, etc.

Mobile;applications

TP393.092

1008-1151(2015)07-0020-03

2015-06-11

李國華（1982－），女，廣西南寧人，中國科技開發院廣西分院助理工程師，研究方向為計算機軟件測試，電子商務交易系統。