歐萊禮 - 深入淺出 HTML 5 程式設計 重點整理

歐萊禮 - 深入淺出 HTML 5 程式設計 重點整理

摘要

• 認識 HTML 5
• Geolocation - 地理位置
• Canvas - 繪圖平台
• Video - 多媒體
• Web Storage - 離線存儲

認識 HTML 5

廣義的HTML 5，指的是HTML、CSS和JavaScript在內的一套技術組合。

希望能夠減少網頁瀏覽器對於外掛程式的需求，例如：Adobe Flash、Microsoft Silverlight、Oracle JavaFX。

HTML 5中移除了一些不再需要的舊元素，在最基本的網頁結構中，程式碼顯得更加簡潔。

另外也移除了一些舊元素，許多都是很少用到的元素。並新增了許多新元素，有些在後面會提到，沒提到的請自行查詢。

目前各大瀏覽器仍只有支援HTML 5的一些主要新功能

至於HTML 5要如何像下相容?

前面在提到HTML 5的基本網頁結構時，你可能會想：以前也是這樣寫的，也是可以行得通，這是怎麼回事? HTML 5到底差在哪?

原因其實是主要的瀏覽器早就已經預設CSS與JavaScript為預設標準，而且行之有年。但是這是各家瀏覽器廠商自行作的預設，跟HTML標準本身無關。HTML 5只是將標準訂定出來，確立了行之有年的共識，將CSS與JavaScript設為預設標準。而同樣道理，DOCTYPE、meta的簡化也是瀏覽器早就提供的蜜糖。因此，一些基本的HTML 5語法在舊的瀏覽器照樣是可以運行的。但是一些較新穎的技術，仍舊需要針對其做特別處理。

Geolocation  -  地理位置

定位重要性?

如何定位?

• 透過 GPS，可以得到非常精準的定位資訊，包含經緯度、移動速度、前進方向，但是缺點為需要在戶外空間，而且非常耗電。
• 透過 IP，IP位置通常會繪製為實體位置儲存於資料庫中，而顯示的位置通常為ISP服務商在當地的辦公處。
• 透過 Wi-Fi 及 基地台，兩者都利用三角定位來確認位置，並且都可以得到非常精準的結果。
• Wi-Fi 除了定位準確，且速度非常快(因為他就在你旁邊)，而基地台雖然較 Wi-Fi 慢了點，但是不管在室內室外，都可以精準定位(撇除你到沒有基地台的地點)。

隱私權問題?

• 瀏覽器必須經由使用者同意才能存取使用者位置
• Geolocation API 的設計小組實作了一種設計：提供可信度達95%的準確度。
• 舉例：若位置精準度是在500公尺，則方圓500公尺都有可能是我們所在的地點，因此可以保障我們的安全，卻又足以提供該地區的資訊給使用者。

程式碼範例：

Canvas - 繪圖平台

• 可以想像 canvas 就像 <img> 一樣，他也是點陣圖
• 若瀏覽器不支援 canvas：一般瀏覽器的運作方式是，在解析的時候遇到無法辨別的元素時，會直接顯示其中內容，因此你可以留訊息告知使用者，他必須更新瀏覽器以支援HTML 5的運作
• 若瀏覽器支援 canvas ，就會直接顯示 canvas 繪圖平台內容，而不顯示包含在其中的文字內容。

程式碼範例：

Video - 多媒體

poster：可以給這個影片撥放前的封面

controls：影片控制元件

autoplay：自動撥放

loop：循環播放

muted：靜音

source：各家瀏覽器由上往下尋找，找到可撥放的格式

Web Storage - 離線存儲

傳統採用 Cookie (1995 – 2010)

伺服器在供應網頁內容給瀏覽器時，也會一併傳送 key/value，儲存在瀏覽器本地端。然而，Cookie在本地端儲存的大小最大只能有 4 KB。

當瀏覽器再次瀏覽(再次發送request請求)，回傳瀏覽器本地端儲存的Cookie





伺服器根據Cookie內容，在伺服器端作運算，回傳客製化的顯示內容。Cookie的機制其實很不錯，所以也用了很長一段時間。但其主要的缺點為：

• 儲存容量過小，只有 4 KB，對於現今來說可能不敷使用
• 移動設備普及，Cookie需要頻繁的來回傳送，效率不佳

伺服器在供應網頁內容給瀏覽器時，也會一併傳送 key/value，儲存在瀏覽器本地端。 Web Storage在本地端儲存的大小最大能有 5至10 MB，儲存空間大大提升，就能減少對伺服器通訊的必要。






伺服器可要求回傳特定key的value。





由於本地端可以儲存大量的內容，因此伺服器端只需要針對特定需求作輕度的運算，將網頁內容回傳至瀏覽器。透過瀏覽器處理本地儲存的相關內容，減少了伺服器的工作量及頻繁的通訊。





Web Storage是標準名稱，而要使用API則是用 localStorage。現在存取資料非常方便，只需要使用set/get就能完成資料存取。支援度方面，他是目前HTML5中支援最廣的API之一，即使是IE8也都有支援。