本書清楚交待了 HTML5 的由來以及各種標籤 (tag) 與屬性 (attribute) 的用途與好處。如果你和我一樣，有時看不懂譯文寫了什麼，還可以搭配網站上的原文閱讀。如果想知道什麼是 HTML5、使用 HTML5 語法會帶來哪些好處、為你的 HTML4 語法升級又會遇到哪些難題……這是一本淺顯好讀、豐富實用的入門書。
HTML5：建置與執行
作者：Mark Pilgrim
出版社：歐萊禮
出版日期：2011年05月19日
語言：繁體中文 ISBN：9789862761557
以下是依章節記錄的筆記。
CH1 話說從頭
（這章講的是 HTML 辛酸血淚史，我覺得只是作者拿來告訴你瀏覽器為什麼不乖乖照標準來的前情提要，所以我沒有特別做什麼筆記。）
CH2 檢測 HTML5 功能
這一章概略介紹 HTML5 的主要功能，並且建議可使用 Modernizr 偵測瀏覽器對 HTML 5 的支援度。部分瀏覽器所不支援的功能，可以使用 Google Gear 來代替。（註：Gear 目前已停止開發）
CH3 網頁構成成分的含義
作者使用一個 HTML 4 編排的頁面說明網頁構成。如果對於要選擇哪種 DOCTYPE 有疑義，可以參考 DOCTYPE 流程圖。須注意在 HTML 中多數的空白與換行是無意義的，但是 DOCTYPE 前若出現任何空白或換行，會使得頁面異常。
話說讀到下面這段話時我抖了一下，哈哈。XD
「總結一下：字元編碼很複雜，而且在這數十年來，由『複製─貼上』大法養成的網頁編寫者們使用著寫得很差的軟體（做網頁），並沒有改善這個狀況。」──《HTML5: 建置與執行》，p.36
書中提到了一些 rel 屬性的應用，像是 Open Search (rel="search")，詳情可參考《如何替網站加入 Open Search 支援 》。 (ref p.40)
或是 rel="sidebar"，能在支援的瀏覽器中會在側邊欄中顯示文件。
在不支援 HTML5 tag 的瀏覽器中，HTML5 tag 可能不會被套用到樣式，解決方案是使用 HTML5 enabling script 或 html5shiv（這個 script 要放在網頁頂端），它們會協助在頁面中插入空的 HTML5 元素，以便這些 HTML5 元素能正常套用到 CSS 樣式，可以幫助舊版瀏覽器撐過這段過渡期。 (p.43~44)
CH4 就叫製圖吧
重設 canvas 的寬度或高度，就能抹去該繪圖區目前的內容。（不一定要改變原有的寬高，直接設成 canvas.width = canvas.width 也可以） (p.59)
CH5 網路上的影音
<video> 的寬度與高度可視為一個繪圖區，影片會以固定的比例放在這塊區域的中央，不必擔心寬高設定錯誤時會造成影片壓扁或拉長。影片可以透過 autoplay 屬性來設定是否自動播放；當影片只具有補充性質、非必要瀏覽項目時，可以透過 preload="none"，來要求瀏覽器不要在頁面載入時就下載影片。(ref p.110)
由於 <video> 屬性可以主動偵測瀏覽器能解讀的影片版本，因此若沒有妥善設定，瀏覽器也可能把所有格式的影片都抓回來播看看。這裡指的「所有格式」可能包括了 WebM (video/webm)、H.264 (video/mp4)、Theora (video/ogg)。此時，可以透過 <source> 的設定，像這樣：(ref p.111)
<video>
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>
<source> 可列為一份清單，提供各種影片格式，但，由於在本書發表時，iPad 只吃影片來源所列出的第一個 source，所以第一個 <source> 一定要指定成 mp4。(ref p.113)
對應不支援 HTML 5 的瀏覽器，我們仍能在 <video> 標籤中寫下傳統的 <object>。如此一來，不能夠辨識 <video> 的舊版瀏覽器（例如 IE8），就會自動找出 <object> 來播放影片內容。(ref p.114)
CH6 你在這裡（大家也在這裡）
地理定位 (geolocation) 是以 WGS84 (World Geodetic System 2d) 作為地理座標參照系統，因此基本上只用來描述地球上的位置，我們可以透過經緯度加上海拔來描述人物在國際太空站 (ISS) 的位置，但無法用在描述月球或其他遙遠星球的位置。(ref p.121)
由於不同廠牌的手機、桌上型電腦的瀏覽器，都各有各自的 geolocation API，因此可以透過 geo.js 來處理不同平台的 geolocation API。（作者建議在網頁底端再載入這個 script，放在 head 會讓頁面載入速度變慢） (ref p.123)
CH7 網路應用程式的本地端存儲～過去、現在與未來
過去我們會使用 cookies 儲存一些資訊，不過每一筆 HTTP request 都包含了 cookies，這意味著我們只有 4kb 的發揮空間，而且既會拖慢網路應用程式、也不安全（除非每一個 request 都透過 SSL 傳遞）。
現在，有了HTML5 Storage，我們可以有 5MB 的揮灑空間。（但用完就沒了，目前的瀏覽器不支援讓我們向使用者索取更多空間） (ref p.132)
CH8 離線
我們可以透過快取出貨清單 (cache manifest) 的設置，讓使用者下載部分內容離線使用。不過，要注意的是，只要清單中有一項無法正確下載，整個快取的流程都會宣告失敗。(ref p.142)
CH9 瘋狂表單
在 input 中使用 HTML 5 提供的新屬性（例如 type="email"），對舊版瀏覽器不需要做太多的處理（會自動優雅降級變成 type="text"）。當你設定了一個 <input type=”email” />，iPhone 的使用者會直接感受到的最大受益，就是鍵盤上的空白鍵會變小、多出來的區域會冒出很容易按壓到的 “@” 和 “.” 按鈕，以便輸入完整的信箱名稱。鍵盤的擷圖可參考 “Test type="email" for yourself.”。（圖片出處是 Dive Into HTML5 的這一頁）
（註：各瀏覽器對 input 新屬性的支援狀態，可參考歷史學家出身的 PPK 所整理的 HTML5 tests - inputs）
CH10 分散式、擴充性，以及其他華麗用語
這章講的是 microdata （微資料），我讀得頭暈眼花，我覺得實例看 Google 的這篇《複合式摘要 (微資料、微格式及 RDFa)》比較好懂。
簡單地說，微資料就是希望能賦予網頁內容更豐富的語義，以便搜尋引擎或其他程式能夠解讀、從中抽取有意義的資料。實際的規格還尚在發展中。
不過，現在 Google 已經開始陸續支援，因此書上也說，「我們不必是間大公司，不用刻意與搜尋引擎開發商協調，就能訂作自己的搜尋結果。」(p.175) ──這聽起來超吸引人的，尤其是努力玩 SEO 的人。
此外，微資料有助於搜尋引擎彙整不同網站的資料，像是 Google Rich Snippet，串連了不同網站之間的關聯，使得搜尋結果能自動將相關連結匯集在一起。Google 也提供了 Rich Snippets Testing Tool 幫助我們瞭解 Google Rich Snippet 的樣貌。
讀完書再回頭看 xdite 的《如何設計出正確語意的 HTML5》，就比較能理解 xdite 的說明了。（同時可以參考 xdite 在 HTML5 & node.js 聯合小聚上演講的這份投影片，裡面有實戰中錯誤的 HTML 5 結構、與其修改後的記錄）
《HTML5 與 SEO - HTML4/XHTML 與 HTML5 語義架構的差別》，這篇以圖解的方式說明 HTML 4 與 HTML 5 的標籤差異，讓人更能理解傳統 DIV 為何無法表達出 HTML 5 想傳遞的語意。
如果是希望在網路上創作繽紛炫麗的網頁程式，我想我們期待的其實不僅僅是 HTML 5 的那堆標籤而已，我們想要的其實是結合 JavaScript 偵測、驅動 HTML 5 的特性，並以 CSS 3 提供更精緻的畫面結構。如果期待讀完這本書就能做出漂亮網頁，那我猜十個人裡大概有九個會失望吧；但若是身為一個需要密切瞭解網頁前端技術的工程師，我想這本書會讓你滿意的。 :)
--
個人覺得一本好書或一場好的演講，它所能提供的系統化知識，還是遠遠勝過我們在 Google 上亂爬關鍵字。比方說，meta rel="alternate" 可指向 RSS、讓瀏覽器能提供訂閱功能，這是我去年才莫名知道的東西，但讀過這本書後，一口氣就讓我認識好多 HTML 知識。人生充滿瑣碎知識，書本還是比較理想的知識獲取模式，想在搜尋引擎上遇見完整的概念全憑運氣，就好像我去買內衣才知道原來人的頸圍是腰圍的兩倍這麼偶然啊。XD
留言列表
Dear Baby (6)