HTML5：一個建構WebGIS的基底元素(HTML5: A Basic Element for Web GIS)

HTML5將對全球資訊網造成革命性的影響，其對於Web GIS的技術是否也會有所改善呢？

本文為楊懷恩（2012）的Meeting報告內容，為Html5的精簡概述，並命名為《HTML5：一個建構WebGIS的基底元素》。

前言

　　自從全球資訊網(WWW)在1990年代興起以來，人們得以透過「網頁」獲得豐富資訊。隨著網頁技術的發展，這些頁面不只是毫無組織的文字，它還可以具有多樣化的結構，例如標題、段落、表格、圖片、文字變化等。在背後定義這些結構的語言，就是HTML。在瀏覽器解析 HTML 之後，我們就能使用網頁的操作介面和內容（阿傑，2010）。

　　在維基百科(Wikipedia)記載：超文件標示語言(HyperText Markup Language, HTML)是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言，HTML被用來結構化資訊—例如標題、段落和列表等等，也可應用在一定程度上描述文件的外觀和語意。這個標準化語言於1982年由英國電腦科學家Tim Berners-Lee所建立，從網際網路工程任務組(Internet Engineering Task Force, IETF)將簡化的SGML(Standard Generalized Markup Language)發展而來，其後由全球資訊網協會(W3C)維護，成為一種國際標準。

　　Berners-Lee所設計的HTML以純文字為基礎，可以任何文字編輯器(text editor)處理，最初僅有少量標記(tag)的使用，但隨著HTML使用率增加，人們以不滿足於單純的網頁介面，漸漸地希望可將任何形式的媒體嵌入網頁上，以至於HTML仍不斷地擴充與發展。

　　因此在支援HTML的網頁瀏覽器在個人電腦使用頻率的增加，網頁處理技術的演進與Web2.0的崛起使得2004年由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成的網頁超文本技術工作小組(Web Hypertext Application Technology Working Group, WHATWG)開始推動網路HTML5標準(Hickson & Hyatt, 2008)。

HTML5作為網頁應用程式設計基礎

　　根據阿傑（2010）關於HTML5介紹的專題報導文章中，他認為CSS與 JavaScript也扮演重要角色。所謂CSS樣式表用來描述網頁的樣式(style)，而JavaScript 程式語言則是網頁應用程式的幕後功臣。HTML5在實測時，就包含了HTML、CSS、JavaScript三方面的革新。在 HTML 方面，HTML5 增加了新的語意標記、多媒體標記、各種屬性和其他規範，也正式放棄了幾項舊標記如「<b> … </b>」、「<i> … </i>」。在 CSS方面，它提供新的 CSS 語法和樣式；在程式方面，它也提供新的 JavaScript 程式開發介面 (API)。而金門大學資工系助理教授陳鍾誠（2008）也認為：『HTML5就等於HTML5、CSS3和new JavaScript API的結合。』

　　網路上已有許多人針對HTML5進行概略或詳實地介紹，在W3C官方網站(2008)亦也對HTML5進行技術概覽，其中W3C將HTML5的新八大特色為其重點更新：

語意(Sematic)

　　以往HTML要用定義標籤（例：<div> … </div>）自訂結構，不過HTML5引入了新的HTML元素，開發者可更細緻地描述網頁結構，使原始碼的易讀性更高，這又被稱為語意化標籤(Sematic Tag)。另外，HTML5還增加了微資訊(Microdata)，它是一種標記內容以描述特定類型的資訊。

離線存取(Offline Storage)

　　HTML5提供localStorage和sessionStorage方法用來進行Client端資訊存取服務，前者是用於持久性的資料儲存，其資料永遠不會過期；後者是用於儲存一個區段(session)的資料，期只有在同一個session才能連結，當session結束後資料也會隨之銷毀。

　　此外，HTML5還提供了Indexed DataBase(indexedDB)和Application Cathe等緩存服務。

設備通用(Device Access)

　　以往要使用DOM事件模型才能模擬滑鼠鼠標的互動，而在眾多HTML5的API中，拖曳與拖放(Drag & Drop) API和File API是其Device Access的主要服務，這功能是可將檔案拖曳至網頁上可透過File Reader使得網頁與電腦裝置的互動更加契合。

連接(Connectivity)

　　WebSocket連接了瀏覽器與服務器形成的快速通道，以TCP進行的雙向通信技術，其可取代以往冗長Header資訊所佔用大幅頻寬的HTTP Request技術。此外，HTML5還提供了桌面通知(Notification)，使得網頁資訊以不侷限在瀏覽器視窗內呈現。

多媒體(Multimedia)

　　Audio和Video是首批添加到HTML規範中的標籤，使得開發者要嵌入影片就如嵌入圖片般便利。

3D、圖形與特效(3D&Effect)

　　Canvas是HTML5主打的強大技術，它取代了JPEG、GIF在網頁上所呈現的靜態影像，使用了JavaScript進行繪圖的手段，這亦是Web GIS網路地圖的基礎必學一。另一方面，WebGL則是一種3D繪圖標準，有別於過去須在瀏覽器安裝plugin，透過WebGL，其僅需編寫網頁代碼即可實現3D圖像的展示，其最大優點是通過OpenGL實現的統一、標準且跨平台的規範。

性能與整合(Performance & Integration)

　　這裡所要介紹的是XMLHttpRequest 2，其為第二版的XMLHttpRequest，資源不同來源的XMLHttpRequest和progress events。

CSS3

　　CSS3的改版提供了大範圍的風格化和效果，其不影響網頁語意結構和性能地增強Web應用程式，尤其Web Open Font Format(WOFF)比前一代更提供了排版上的靈活與控制性，在介面上有突破性的變革。

Web GIS與HTML5的互動性結合

　　Canvas是HTML5的重要元素，其主要功能是利用Scripting（例：JavaScript）繪製幾何圖形，起初使用於Apple的Dashboard和Safari瀏覽器上，之後即整合至Gecko-based瀏覽器上，例如Mozilla Firefox、Opera和Chrome等。另外，Geolocation 亦是HTML5的眾多API之一，其不需安裝location plug-in即可在支援該API的瀏覽器上即時定位使用者所在位置(Boulos et al., 2010)。

　　Coulon(2010)在網誌上發表的〈Is HTML5 the future for the GIS Industry?〉文章中指出，HTML5在Web GIS的應用上仍不普及，不過有一些研究開發的系統，像是Tile5和Cartagen等就是HTML5於Web GIS應用的經典之作。不過Coulon也說，OpenLayers其實在它所釋出的API皆有HTML5元素在內，透過開放式標準逐漸普遍使用，與ESRI對HTML5的支持，HTML5將會逐一滲透於GIS產業的的相關技術。

　　Coulon亦分析HTML5在Web GIS的應用上，將可改善程式碼設計結構、增加一致性、改善語意、增進無障礙使用、改良可攜性模式、增加地理定位、實現用戶端資料庫等等，這些功能服務的改善將對Web GIS技術的未來前景大耀進，實現用戶體驗的RIA GIS應用服務。

參考文獻

Boulos, M., Warren, J., Gong, J., Yue, P. (2010). Web GIS in practice VIII: HTML5 and the canvas element for interactive online mapping, International Journal of Health Geographics 2010, 9:14.
Coulon, P. (2010). Is HTML5 the future for the GIS Industry?[blog.geo-tag.info]. Retrieved from http://blog.geo-tag.info/2010/10/09/750/
Hickson, I., Hyatt, D. (2008). HTML5: vocabulary and associated APIs for HTML and XHTML,W3C Working Draft. Retrieved from http://www.w3.org/TR/2008/WD-html5-20080122/
W3C (2008). W3C HTML5 Logo. Retrieved from http://www.w3.org/html/logo/
阿傑（2010）。解析HTML5：基本介紹【ios.com.tw】。取自 http://www.ios.com.tw/article.php?id=80
陳鍾誠（2008）。HTML5技術體系【陳鍾誠的網站】。取自http://ccckmit.wikidot.com/h5:main