The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

2011 微軟開發者大會:Migrate to HTML5

今天是 2011 微軟開發者大會 的日子,我主講 Migrate to HTML5 這個主題,前陣子也做過幾個 HTML5 的專案,當時濛濛懂懂的亂做一通,不知道有那麼多好東西、好工具可用,但因為這次演講我收集了不少資料,也看了幾本 HTML5 的書與 W3C 部分規格內容,而最近 Visual Studio 2010 又推出了個 Web Standards Update for Microsoft Visual Studio 2010 SP1 擴充套件,許多經驗還真的都很自然的連結在一起,這感覺真不錯。備註:一般來說我的演講行程都會公告在 Will 保哥的技術交流中心的 Facebook★★★ Will 保哥的噗浪 ★★★ 上,有興趣的人可以在上面按個讚或按個追蹤。

由於過程中我看了許多資料,多到一整個眼花撩亂,在此我重點整理幾個覺得不錯的網站給各位參考:

不錯的網站

HTML5 Cheat Sheets

HTML5 Demo

HTML5 Frameworks

HTML5 JavaScript library

HTML5 Offline browsing

HTML5 Reset

  • HTML5 Reset  A simple set of templates for any project
  • HTML5 Doctor (HTML5 Reset Stylesheet)
  • 以下是我個人改過的「純 HTML5 Reset」,只含 HTML5 的新元素部分:
  • article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu,
    nav, section, summary, time, mark, audio, video {
        margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;
        background:transparent; }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block; } nav ul { list-style:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

HTML5 Specification

HTML5 Template

HTML5 Tools

HTML5 瀏覽器支援度

MIX11 for HTML5 (影片)

以下是本次演講的簡報,我已經上傳到 http://docs.com/CUQL 網站,各位在閱讀簡報時,記得要點選 Notes 按鈕,看我寫的備註,這裡不只是我自己備註用,還有一些參考連結可以進一步研究:

以下可線上直接看簡報:

最後,來總結一下我對 HTML5 的心得:

  • 設計網頁,用 W3C 的標準來寫就對了,不相容的問題都有套件可解決!
  • 不用太擔心 HTML5 向前相容 (fallback) 的問題,通常這些問題都已經有了解決方案 ( Polyfills )
  • HTML5 是目前最有可能統一所有上網設備的資訊呈現標準,勢不可檔
  • 與其被迫改變倒不如擁抱改變,讓我們一起擁抱 HTML5 吧!
  • 現在就能開始用 HTML5 來開發網頁!