The Will Will Web

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

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

不錯的網站

• HTML5 - 维基百科，自由的百科全书
• HTML5 - Wikipedia, the free encyclopedia
• HTML5研究小组 - 致力于HTML5在中国的发展与应用
• HTML5 Rocks - A resource for open web HTML5 developers
• HTML5 Doctor, helping you implement HTML5 today
• HTML5 Tutorial (W3Schools)
• HTML5Labs

HTML5 Cheat Sheets

• HTML 5 Cheat Sheet (PDF) - Smashing Magazine
• HTML5 and CSS3 Cheat Sheets - WebsitesMadeRight.com

HTML5 Demo

• Internet Explorer 10 Test Drive
• 20佳惊艳的HTML5应用程序示例
• 九个让人难以置信的HTML5和JavaScript实验
• Awesome HTML5 Dashboard
• HTML5 Demos and Examples
• HTML5 Gallery - A showcase of sites using HTML5 markup
• World's Biggest PAC-MAN

HTML5 Frameworks

• CSS3 Framework
• Less Framework 4  --  Less Framework Theme Demo
• Laker compendium – Designing digital publications in HTML5
• Baseline - a designer framework by ProjetUrbain.com
• 52framework - The framework from the future, HTML5, CSS3, and more!
• Game Framework
• LimeJS HTML5 Game Framework
• Mobile App Framework
• Jo HTML5 Mobile App Framework
• Desktop and Mobile Web App Frameworks Using JavaScript and HTML5  Ext JS, Ext GWT and Sencha Touch  Sencha
• Ebook Framework
• Baker Ebook Framework 2.0
• Media Framework
• Popcorn.js - The HTML5 Media Framework
• HTML5 Video & Media JavaScript Library

HTML5 JavaScript library

• html5shiv - HTML5 IE enabling script - Google Project Hosting
• Modernizr ( Use Modernizr in the MVC3 Tools Update for HTML5 localStorage )
• HTML5 Cross Browser Polyfills (一定要看，強大到一整個無以復加 )

HTML5 Offline browsing

• HTML5 缓存机制：Cache Manifest 配置实例
• HTML 5 Offline Application Caching
• How to create offline HTML5 web apps in 5 easy steps - CatsWhoCode.com
• Creating HTML5 Offline Web Applications with ASP.NET
• HTML5 缓存 cache manifest - 幸福收藏夹

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

• HTML Standard
• HTML5 (W3C)
• HTML5 differences from HTML4
• Web Applications 1.0

HTML5 Template

• Initializr - Start your HTML5 project in 15 seconds!
• HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

HTML5 Tools

• HTML5 Tools
• HTML5 and MVC3 Integration from ScottGu
• HTML5 and CSS3 Integration with Visual Studio 2010 SP1
• CSS3 and HTML5 Toolbox Starter - Noupe Design Blog
• 22 Handy HTML5 & CSS3 Tools, Resources And Guides
• 6 HTML5 authoring tools

HTML5 瀏覽器支援度

• CSS3 & HTML5 Browser Support
• Comparison of layout engines (HTML5) - Wikipedia, the free encyclopedia
• Implementations in Web browsers - WHATWG Wiki
• The HTML5 test - How well does your browser support HTML5?

MIX11 for HTML5 (影片)

• 5 Things You Need To Know To Start Using
• Deep Dive Into HTML5
• HTML5 for Silverlight Developers
• HTML5 for Skeptics

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

以下可線上直接看簡報：

最後，來總結一下我對 HTML5 的心得：

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