[心得] 2011 微軟開發者大會 HTML5搶先知
三個階段（What's New in HTML5／Migrate to HTML5／JavaScript Overview : Different From Other Languages）
個人重點摘錄與心得
廢話
6/21有幸參加 2011微軟開發者大會 Breakout1 HTML5搶先知活動，到會場後發現參加HTML5議題的人相當多，有些比較晚到的人最後沒位子坐，只能用站在兩旁聽（好辛苦 XD），不過這也可以看得出來大家對於HTML5發展與技術十分感興趣。聽完HTML5三個階段（What's New in HTML5／Migrate to HTML5／JavaScript Overview : Different From Other Languages）的演講，收益良多，對於HTML5觀念有更進一步的瞭解，下列為當天上課筆記內容（有印象時趕快記，忘記東西的速度總是比學新東西的速度快 XD），有問題歡迎提出大家討論：
《What's New in HTML5》 by 上官林傑
-
HTML5
HTML 標準的演進過程
廣義的HTML5：新網頁技術的統稱
其中包含了下列內容
Semantic Tags（語義元素）：HTML5新增的元素，表示網頁結構定義的元素，如<nav>具有導覽頁連結的功能；<article>網頁的元件、文章
WAI-ARIA：HTML5 能讓網頁及網頁應用程式更具有親和力
MultiMedia Tags（多媒體元素）：
<canvas>：透過Javascript可以在網頁上畫圖，Demo Site Everttimezone.com 世界時間轉換
<video>：透過Javascript控制嵌入網頁的影片，及各瀏覽器支援 video情形，目前使用時建議準備兩份影片版本（H264、.Webm），因為各瀏覽器支援的編碼格式不相同
<audio>：透過Javascript內嵌音樂
-
CSS3
支援漸層顯示
支援透明度
支援圓角框線（Border-radius）， 可設定四個角弧度（淚…終於不用在自己用一堆奇怪的方法達到圓角效果了）
顏色除了RGB外，增加HSL
Media query：針對瀏覽媒介指定特定的樣式設定CSS，ex 行動裝置的小螢幕瀏覽器／iPad，不同裝置瀏覽時，可配置不同的CSS樣式（對於跨不同平台時，這很實用）
2D轉換：針對元素做旋轉、縮放、位移
漸層、多攔排版、浮動區塊（可以透過 IE testdrive 產生CSS 程式碼及效果）
-
HTML5 Web APIs
Geolocation API ：取得使用者的經緯度位置（桌機透過IP定位，SmartPhone透過手機GPS定位）
Geolocation API Test
離線儲存機制（OffLine）分為兩種
Web Storage：透過瀏覽器儲存資訊在用戶端的方式（key / value），建議儲存資訊加密，否則會像之前 Angry Bird 網頁版破解關卡一樣
IndexedDB：索引式資料庫
-
其他
微軟HTML5 實驗室 html5labs.com/
IE Test Drive HTML5 Demo
《Migrate to HTML5》 by 保哥
- HTML5 在各瀏覽器支援程度比較表 findmebyip（重要）
- HTML5 與 HTML 4.01的差異性：HTML5沒有空白
- 新增了語意元素、對於排版標籤的變化
-
HTML5 相容性套件
不支援HTML5的舊版瀏覽器可透過 html5shiv、Modernizr 來支援（重要）
（Demo）html5shiv、Modernizr 使用方式
（Demo）如何透過Modernizr 做到 fallback 相容性
（Demo）http://videojs.com 如何作到 fallback
（Demo）Initializr.com : 15秒產生HTML5範本的網站（太神奇了，手指動一動就做好HTML5網站）
-
HTML5設計工具
Expression Web 4 SP1
Visual Studio 2010 SP1
-
HTML5 測試工具
IE9：按下F12可以切換IE版本，不會可以參考保哥深入 IE8 開發人員工具 錄影檔
IETester：可模擬IE 5.5到IE 10網頁呈現方式（推薦）
WebMatrix：內含IIS 7.5、 開啟各家瀏覽器、發行功能（推薦）
-
HTML5實戰練習
升級HTML5步驟（重要）
變更 DOCTYPE
改Tag
修正CSS
新增html5shiv
以上為個人筆記內容，更詳細的內容可以參考：2011 微軟開發者大會：Migrate to HTML5 by 保哥
《JavaScript Overview : Different From Other Languages》 by 蔡秉諺
心得
APPLE於2010/6月在官方網站上推出 HTML5 Demo 網頁，讓我看到HTML5＋CSS3的效果；Google在今年Google I/O開發者大會展現了數個HTML5應用，6月在官方部落格公告Google網頁版應用程式服務統一以HTML5規格提供服務，向大家宣告，Google將打開雙手擁抱HTML5新規格；雖然HTML5標準目前仍在草案階段，但各大瀏覽器已經宣布未來將全面支援HTML5標準，W3C開發者也提出，如果進展順利的話，HTML5將在2012年正式成為國際標準，有越來越多的網站開始實做HTML5標準，有時間的話，可以多看看相關的書與議題，相信在未來一定會用的到。