# 2011 微軟開發者大會：Migrate to HTML5

今天是 [2011 微軟開發者大會](http://www.microsoft.com/taiwan/events/2011_Developer/) 的日子，我主講 [Migrate to HTML5](https://web.archive.org/web/20120416075606/http://www.bnext.com.tw:80/edm/2011Developer/agenda.html) 這個主題，前陣子也做過幾個 HTML5 的專案，當時濛濛懂懂的亂做一通，不知道有那麼多好東西、好工具可用，但因為這次演講我收集了不少資料，也看了幾本 HTML5 的書與 W3C 部分規格內容，而最近 Visual Studio 2010 又推出了個 [Web Standards Update for Microsoft Visual Studio 2010 SP1](http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83) 擴充套件，許多經驗還真的都很自然的連結在一起，這感覺真不錯。備註：一般來說我的演講行程都會公告在 [Will 保哥的技術交流中心的 Facebook](http://www.facebook.com/will.fans) 或 [★★★ Will 保哥的噗浪 ★★★](http://www.plurk.com/willh/invite) 上，有興趣的人可以在上面按個讚或按個追蹤。

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

**不錯的網站**

-   [HTML5 - 维基百科，自由的百科全书](http://zh.wikipedia.org/wiki/HTML5)
-   [HTML5 - Wikipedia, the free encyclopedia](http://en.wikipedia.org/wiki/HTML5)
-   [HTML5研究小组](http://www.mhtml5.com/) - 致力于HTML5在中国的发展与应用
-   [HTML5 Rocks - A resource for open web HTML5 developers](http://www.html5rocks.com/en/)
-   [HTML5 Doctor, helping you implement HTML5 today](http://html5doctor.com/)
-   [HTML5 Tutorial](https://www.w3schools.com/html/) (W3Schools)
-   [HTML5Labs](http://html5labs.interoperabilitybridges.com/)

**HTML5 Cheat Sheets**

-   [HTML 5 Cheat Sheet (PDF) - Smashing Magazine](http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/)
-   HTML5 and CSS3 Cheat Sheets - WebsitesMadeRight.com

**HTML5 Demo**

-   Internet Explorer 10 Test Drive
-   [20佳惊艳的HTML5应用程序示例](http://www.cnblogs.com/lhb25/archive/2011/05/02/2025395.html)
-   [九个让人难以置信的HTML5和JavaScript实验](http://www.cnblogs.com/lhb25/archive/2011/04/07/1965738.html)
-   [Awesome HTML5 Dashboard](https://web.archive.org/web/20111023232330/http://mozillademos.org:80/demos/dashboard/demo.html)
-   [HTML5 Demos and Examples](http://html5demos.com/)
-   [HTML5 Gallery - A showcase of sites using HTML5 markup](http://html5gallery.com/)
-   [World's Biggest PAC-MAN](http://worldsbiggestpacman.com/)

**HTML5 Frameworks**

-   CSS3 Framework

-   [Less Framework 4](http://lessframework.com/)  --  [Less Framework Theme Demo](https://lessframework.com/)
-   [Laker compendium – Designing digital publications in HTML5](http://www.lakercompendium.com/)
-   [Baseline - a designer framework by ProjetUrbain.com](http://baselinecss.com/)
-   [52framework - The framework from the future, HTML5, CSS3, and more!](http://www.52framework.com/)

-   Game Framework

-   [LimeJS HTML5 Game Framework](http://www.limejs.com/)

-   Mobile App Framework

-   [Jo HTML5 Mobile App Framework](http://joapp.com/)
-   [Desktop and Mobile Web App Frameworks Using JavaScript and HTML5  Ext JS, Ext GWT and Sencha Touch  Sencha](http://www.sencha.com/)

-   Ebook Framework

-   [Baker Ebook Framework 2.0](http://bakerframework.com/)

-   Media Framework

-   [Popcorn.js - The HTML5 Media Framework](http://popcornjs.org/)
-   [HTML5 Video & Media JavaScript Library](https://github.com/kaltura/mwEmbed)

**HTML5 JavaScript library**

-   [html5shiv - HTML5 IE enabling script - Google Project Hosting](http://code.google.com/p/html5shiv/)
-   [Modernizr](http://www.modernizr.com/) ( [Use Modernizr in the MVC3 Tools Update for HTML5 localStorage](http://www.iwantmymvc.com/html5-localstorage-modernizr-in-mvc3-tools-release) )

-   [HTML5 Cross Browser **Polyfills**](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (一定要看，強大到一整個無以復加 )

**HTML5 Offline browsing**

-   [HTML5 缓存机制：Cache Manifest 配置实例](https://web.archive.org/web/20140806145102/http://www.mhtml5.com/resources/html-5%e7%bc%93%e5%ad%98%e6%9c%ba%e5%88%b6%ef%bc%9acache-manifest%e9%85%8d%e7%bd%ae%e5%ae%9e%e4%be%8b)
-   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 - 幸福收藏夹](http://sofish.de/1449)

**HTML5 Reset**

-   [HTML5 Reset  A simple set of templates for any project](http://html5reset.org/)
-   [HTML5 Doctor (HTML5 Reset Stylesheet)](http://html5doctor.com/html-5-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](http://www.whatwg.org/specs/web-apps/current-work/multipage/)
-   [HTML5 (W3C)](http://dev.w3.org/html5/spec/Overview.html)
-   [HTML5 differences from HTML4](http://www.w3.org/TR/html5-diff/)
-   [Web Applications 1.0](http://www.whatwg.org/specs/web-apps/current-work/complete/)

**HTML5 Template**

-   [Initializr - Start your HTML5 project in 15 seconds!](http://initializr.com/)
-   [HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.](http://html5boilerplate.com/)

**HTML5 Tools**

-   HTML5 Tools
-   [HTML5 and MVC3 Integration from ScottGu](https://weblogs.asp.net/scottgu/html5-improvements-with-the-asp-net-mvc-3-tools-update)
-   [HTML5 and CSS3 Integration with Visual Studio 2010 SP1](https://web.archive.org/web/20110715051313/http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx)
-   [CSS3 and HTML5 Toolbox Starter - Noupe Design Blog](http://www.noupe.com/tools/css3-and-html5-toolbox-starter.html)
-   [22 Handy HTML5 & CSS3 Tools, Resources And Guides](https://web.archive.org/web/20140821184236/http://www.1stwebdesigner.com/css/22-handy-html5-css3-tools-resources-and-guides/)
-   [6 HTML5 authoring tools](https://web.archive.org/web/20120527184311/http://www.html5trends.com:80/best-of/6-html5-authoring-tools/)

**HTML5 瀏覽器支援度**

-   CSS3 & HTML5 Browser Support
-   [Comparison of layout engines (HTML5) - Wikipedia, the free encyclopedia](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)
-   [Implementations in Web browsers - WHATWG Wiki](http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers)
-   [The HTML5 test - How well does your browser support HTML5?](http://html5test.com/)

**MIX11 for HTML5 (影片)**

-   [5 Things You Need To Know To Start Using](http://channel9.msdn.com/events/MIX/MIX11/HTM12)
-   [Deep Dive Into HTML5](http://channel9.msdn.com/events/MIX/MIX11/HTM03)
-   [HTML5 for Silverlight Developers](http://channel9.msdn.com/events/MIX/MIX11/HTM14)
-   [HTML5 for Skeptics](http://channel9.msdn.com/events/MIX/MIX11/EXT21)

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

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/da0ebfe86dc734200532-image_910.png)

以下可線上直接看簡報：

<iframe src="http://docs.com/Embed/View/CUQL/height/580/width/580" width="580px" height="580px" frameborder="0"></iframe>

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

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