網站頁面通常由超文件標示語言（HyperText Markup Language，簡稱 HTML）
結合腳本語言與階層式樣式表（Cascading Style Sheets，簡稱 CSS）來表現，透 過CSS 屬性的調整能夠實現簡單的頁面互動。在 HTML5 與 CSS3 的支援，網頁 的媒體與互動性更不同於以往靜態HTML 標籤網頁，使得即便在 Web2.0 的環境 之下，互有優缺點的靜態網頁與動態網頁仍都有開發者使用，取決於系統的功能 與頁面的呈現方式。
HTML5 是由 HTML4.0 的版本發展而來，在其發展過程中歷經許多波折，
最終在2004 年 WHATWG 開始了 HTML5 的規劃工作，並在 2006 年與與全球資 訊網協會（World Wide Web Consortium，W3C）共同推動 HTML 的演進。HTML5 是建立在以往HTML 相關規範之上（相容性），並新增許多功能的支援，例如製 圖（canvas）、影音（video）、地理定位（geolocation）等功能。在 2010 年 Steve Jobs 拒絕 Flash 登上蘋果設備後，Flash 的開發商也在 2011 年宣布停止 Flash Player 在行動裝置的發展，因此網頁應用程式使用 HTML5 的格式與開發越來越 多，最近於2014 年 10 月，由全球資訊網協會公布 HTML5 最新修訂的版本，確 立了HTML5 規範要素以因應越來越多的網頁程式應用。
HTML5 支援處理多媒體與圖片的語法，減少對於外掛程式的需求，提升網 頁效益，因此在開發網頁前端時，使用HTML5 標籤處理圖片與串流機會相當多。
表 4 為 HTML5 中對於繪圖所提供的技術規範比較，可縮放向量圖形（Scalable Vector Graphics，簡稱 SVG）適合用於細緻度要求較高但數量較少，並較適合靜 態顯示。Canvas 是新定義的功能，為「提供一個依照解析度改變的點陣圖作畫區 域，可用於表現繪圖、遊戲圖形、藝術或是其他視覺化影像的呈現。」（WHATWG）， 對於大量的目標可藉由程式碼與瀏覽器繪圖而成單一物件，相對於 SVG 可以顯 示較多數量。但由於輸出格式為網格，當頁面放大時，若無重繪亦會有失真的問 題產生。地圖容器（map container）有別於一般網頁的靜態頁面，圖層的位移與 放大，都會牽引文件物件模型（Document Object Model，簡稱 DOM）的移動或 重繪，也因此相對於無更新的頁面，網頁地圖經過重繪較不會失真，在現在地圖 資訊豐富的網路上，Canvas 技術提供前端匯出圖層的一種可能與選擇性。
16
表 4 HTML5 中 Canvas 與 SVG 比較
Canvas SVG
以像素為主 以形狀為主
單一HTML 元素 多重圖形元素
只能透過程式碼重繪 可以利用程式碼與CSS 樣式表修改 使用者互動很精確（x,y） 使用者互動抽象化（Rect、Path）
表面較小和/或物件較多 (>10k) 時的 效能較佳
物件較少 (<10k) 和/或表面較大時的 效能較佳
資料來源：https://msdn.microsoft.com/zh-tw/library/gg193983(v=vs.85).aspx CSS 是由 W3C 規範與維護的，在網頁的作用主要提供排版字型、色彩等樣 式選擇，其中CSS3 是仍在發展中的標準，目前支援大部分的瀏覽器，提供各種 動態樣式，包含動畫、變形與位移等新的樣式規範，在網頁視覺化中扮演相當重 要的角色，透過CSS 設定，可以節省許多 JavaScript 操作的成本。
隨著網際網路的發展，相關的程式語言的使用也越來越廣泛。透過程式語言 的使用，網頁設計者可調整頁面之結構以及互動操作的功能，而JavaScript 被大 量使用在前端網頁，搭配不同框架與套件，結合HTML 與 CSS 實作出不同的網 頁頁面。在資料視覺化的部分，除了應用 HTML 的標籤外，利用 JavaScript 等 script language 能夠有更多彈性。
為了減少開發時程，除了自行開發外，通常會使用已發布的開放原始碼函式 庫，或者應用程式開發介面。例如D3.js 便是其中一例，是款相當有名的視覺化 js 函式庫，使用相當多的 HTML5、CSS3 元素來達到視覺化的效果，如同其他發 展中的函式庫，包括D3.js、Labella.js、TIMESHEET.js、PIXI.js 等可以使用，這 些函式庫的目的主要是利用JavaScript 撰寫的功能將資料於頁面上視覺化。
電子地圖也多應用javascrip 實踐網頁中的地圖容器，以存放不同圖層，如表 5 整理了與 JavaScript 有關的網路地圖圖台。Leaflet 與 OpenLayers、Google Map API 等函式庫是當前許多開發者所使用的函式庫之一。Google Map API 為 2005 年公開之 API，結合 Google 相關服務以及時間，使其使用用戶相當多。至今仍 有相當多的地圖服務使用Google Map API，作為電子地圖的乘載媒介。缺點上，
由於其程式碼未公開，使得開發前端地圖功能會受其 API 限制。OpenLayers 也
17
是發展相當久的函式庫，從2006 年至今已到 4.2 版，相較於 Google 未公開程式 碼，OpenLayers 為開源函式庫，開發者能自行擴充功能與進行分析，但缺點是其 函式庫包含太多功能，導致其函式庫體積龐大。為了改善 OpenLayers 函式庫體 積龐大的問題，Vladimir Agafonkin 於 2011 年釋出了 Leaflet.js，提供開源的 JavaScript 函式庫給開發者，其支援運行 HTML5 與 CSS3 的各式行動與桌面平 台，缺點在於其函式庫功能較OpenLayers 少，需自行開發與擴充。不過 Leaflet 支援相當多的資料格式，包括GeoJSON 的資料格式。網頁及程式開發者可以藉 由使用此函式庫來介接圖資及其他地圖服務，目前相當多的網頁地圖底圖使用 OSM 與 Google 所提供的圖資，開發者可應用 Leaflet 內建的方法協同運用展示 資料，實現各種地理視覺化成果。
表 5 各網路地圖圖台 API 比較表
Google map Leaflet.js OpenLayers
最初發行年 2005 2011 2006
開放狀態 封閉源碼，API 使用，
部分服務要收費
自由開源（BSD） 自由開源（BSD）
語言 JavaScript JavaScript JavaScript GitHub 專案
18
除了頁面技術的回顧外，頁面資訊的配置也需要考量，網站資訊架構規劃的 重要性在於，其一是將網站內容進行結構化的安排，再者提高網頁瀏覽的效率，
最後明確的定義功能出來（Peter M. & Louis R.，2002）。良好的資訊架構會從三 個方面去著手，分別為情境、內容以及用戶（Peter M. & Louis R.，2002）。將網 頁結構化後，可以利用元素間的鏈結來定義超連結或者其他頁面動作與功能，也 利於程式模組化。因此，在組織前端頁面元素時，常使用前端框架來輔助，使開 發者更容易維護使用者介面設計。較為有名的如google 的 Angular.js、Facebook 的React.js、backbone.js、vue.js 與 bootstrap.js 等。
而在地圖功能的開發上，基於距離上的因素及地價分布上空間相依影響（鄭 文馨，2007），在功能上的的開發呈現以能反映空間影響為考量，除了一般網站 用到的點線面呈現，常用的空間方法會因為資料型態而有所不同（K. T. Chang, 2008），表 6 整理簡易的空間分析方法，透過地圖相關 API 或函式庫（如 google map API、Leaflet 或 OpenLayers 等）實作相關空間分析方法，並將其視覺化呈現。
表 6 各資料之功能方法整理
資料型態 功能方法
點資料 近鄰分析、K-Fuction、空間自相關、Buffering、Kernal Density 等。
線資料 路網分析、距離統計、Buffering 面資料：空間相鄰性、空間自相 關、疊圖分析、Buffering。
網格資料 疊圖分析、Allocation、Buffering 等。
資料來源：（K. T. Chang, 2008），本研究整理。
在回顧CSS AWARD 等網站之設計作品中，可以發現在前端技術的進步下，
將網站作為載體能呈現更多的視覺化內容，即便是靜態頁面也能透過 HTML、
CSS 與 JavaScript，實現更多視覺化的可能性。現行國內不動產相關網站仍以呈 現交易物件價格為主，即便有使用到不同主題圖層，圖層較為零散，也缺乏脈絡 性的視覺化呈現。良好的視覺化應兼顧不同面向作為設計的考量，本研究後續章 節將利用HTML 等前端相關技術進行前端靜態網站設計，使用前端頁面框架（如 bootstrap、Angular.js、React.js 等），根據資料與功能進行資訊架構之規劃，透過 居住環境品質面向的資料蒐集與脈絡的整理，配合地理視覺化的相關功能回顧，
建立與居住環境品質相關的視覺化網站架構原型。
19
研究設計
從第二章回顧網頁建置過程所需的技術，與居住環境品質相關資料及其來源，
以及地理視覺化與資料視覺化的相關概念，本章節開始進入系統與研究整體設計 規劃的階段。透過第二章回顧之資訊，第一節討論整體架構與相對應的實作規劃，
於二三節詳細的設計網站版面與資料圖層視覺化，並在第四節討論後續系統測試 與檢核的使用性評估方法。