邁向 HTML5 如何與 ASP.NET 整合 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 1
Evaluating 如何評估是否需要使用 HTML5的技術
評估要點 網頁是否需要跨瀏覽器與不同設備？ 是否需要 HTML5 支援的那些新功能？ 採用 HTML5 是否對你原先的網站有幫助？ IE , Firefox , Google Chrome , Safari , Opera , … iPad , iPhone , Android , WP7 , WM , Symbian, .. 是否需要 HTML5 支援的那些新功能？ Local Storage, Offline Apps, Geolocation, … 採用 HTML5 是否對你原先的網站有幫助？ 原本的網站在支援 HTML5 的瀏覽器下有問題? Test first !! 其他替代方案？ Terminal Service Client
HTML5 & CSS3 Support http://www.findmebyip.com/litmus/#target-selector
1999 - 2011 HTML5 與 HTML 4.01的差異 HTML5 differences from HTML4 (W3C Working Draft 05 April 2011 ) http://www.w3.org/TR/html5-diff/
HTML5 的 DOCTYPE 變簡單了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>頁面標題</title> </head> <body> <p>網頁內容</p> </body> </html> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
XHTML5 的宣告方式 <?xml version="1.0" encoding="UTF-8"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta> <title>頁面標題</title> </head> <body> <p>網頁內容</p> </body> </html> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> Content-Type 必須是 application/xhtml+xml 或 application/xml
指定網頁編碼的方式 在 HTTP 的 Content-Type 標頭設定 在網頁檔頭的地方加上 BOM 字元 Content-Type: text/html; charset=UTF-8 在網頁檔頭的地方加上 BOM 字元 在網頁 HTML 的 <head> 加上 Meta 標籤 <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Byte Order Mark (BOM) http://en.wikipedia.org/wiki/Byte_order_mark
<!DOCTYPE html> 不會讓瀏覽器進入相容模式(Quirk mode) 如果使用 XHTML 模式 IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, … 放心！ Internet Explorer 6 也看的懂! 如果使用 XHTML 模式 永遠會採用標準模式(Standard mode) 也不需定義 DOCTYPE
HTML5 新增的語意元素 1 / 4 section article 代表著一份文件的範圍 一個網頁可以包含多份不同用途的文件 內容可以包含 h1, h2, h3, h4, h5, 與 h6 article 代表著一篇文章的範圍 例如一篇新聞稿、一篇部落格文章等
HTML5 新增的語意元素 2 / 4 aside hgroup 用來標記一段彼此相關的內容 例如一篇文章裡有一段 Quote 就可以用 aside 標注起來 hgroup 用來標記某段 section 內的標題 內容可以包含 h1, h2, h3, h4, h5 與 h6
HTML5 新增的語意元素 3 / 4 header footer nav 標記頁首的內容 可放置網站LOGO、主選單、導覽列 標記頁尾的內容 可放置版權資訊、作者資訊、隱私權宣告等 nav 標記導覽列的內容 網站的主選單、導覽列都要包在這裡 搭配 <menu> 元素 HTML5 <menu> Tag http://www.w3schools.com/html5/tag_menu.asp
HTML5 新增的語意元素 4 / 4 figure figcaption 標記一段用來表示流程或圖解的內容
版面標籤的使用變化 1 / 2 Yes, You Can Use HTML 5 Today! http://blogs.sitepoint.com/html-5-snapshot-2009/
版面標籤的使用變化 2 / 2 http://www.sitepoint.com/examples/html5_0709/basic-1.html header, footer, nav, section, article { display:block; } ---- <style> body {background-color:white; color: black; text-align:center;} header, footer, nav, section, article {display:block;} header {width:100%; background-color:yellow;} nav {width:30%; background-color:orange;float:left;} section {width:65%; background-color:SpringGreen ; float:right;} article {width:70%; margin:2em 10%; background-color:turquoise;} footer {width:100%; background-color:pink; clear:both;} </style>
Compatibility HTML5 相容性套件
讓老舊的瀏覽器支援 HTML5 新元素 已支援 HTML5 新元素的瀏覽器 IE6, IE7, IE8 怎麼辦？ Firefox, Chrome, Safari, Opera, IE9 IE6, IE7, IE8 怎麼辦？ 使用 html5shiv - HTML5 IE enabling script 使用 Modernizr 其他舊版瀏覽器永遠不會有相容性問題 因為所有人都會直接叫你升級到最新版 XD 5 Reasons Why You Can Use HTML5 Today http://blogs.sitepoint.com/5-reasons-why-you-can-use-html5-today/ HTML5 Inline Elements Most browsers, including IE and Firefox, assume the new HTML5 elements are inline by default. Since you’ll almost certainly want an element such as header to be a block-level element, remember to use display: block; in your CSS.
HTML5shiv 網址 用途 示範 http://code.google.com/p/html5shiv/ 讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素 包含支援網頁列印時的樣式能正確顯示 檔案大小僅 2,051 位元組 (2KB) 示範 http://www.iecss.com/print-protector/example_print_iepp.html IE Print Protector http://www.iecss.com/print-protector/ HTML5 測試在舊版 IE 開啟時的列印功能 http://www.iecss.com/print-protector/example_print_iepp.html
如何使用 html5shiv <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>頁面標題</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <p>網頁內容</p> </body> </html> IE Print Protector http://www.iecss.com/print-protector/ HTML5 測試在舊版 IE 開啟時的列印功能 http://www.iecss.com/print-protector/example_print_iepp.html
DEMO 使用 HTML5shiv 在舊版瀏覽器的差異 產生範本 下載網頁檔案 使用 WebMatrix 開啟目錄 在各瀏覽器進行測試 ( 直接用 IE9 開發者工具進行降版瀏覽器測試 )
Modernizr (摩登家) 解構 modernizr.js http://modernizr.github.com/Modernizr/annotatedsource.html
Modernizr (摩登家) 網址: http://www.modernizr.com/ 用途與說明 網址: http://www.modernizr.com/ 用途與說明 讓各種舊版瀏覽器支援 HTML5 與 CSS3 性能 包含一組能偵測 HTML5 支援能力的函式庫 功能強大，支援多種瀏覽器的相容性支援 ★ HTML5 Cross Browser Polyfills ★ HTML5 Fallbacks 解構 modernizr.js http://modernizr.github.com/Modernizr/annotatedsource.html
Modernizr 如何做到 fallback 相容性 透過修改 <html> 的 class 屬性判斷 no-js js no-touch no-history multiplebgs boxshadow opacity no-cssanimations no-csscolumns …… 透過 JavaScript 條件式判斷 http://webdesignernotebook.com/css/how-to-use-modernizr/
透過修改 <html> 的 class 屬性判斷
透過修改 <html> 的 class 屬性判斷 多重背景圖片的 CSS3 語法 套用 Modernizr 之後的寫法
CSS3 多重背景在不同瀏覽器下的呈現
Polyfills ( 填充物 ) polyfill (n): a JavaScript shim that replicates the standard API for older browsers HTML5 Cross Browser Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
如何自訂「填充物」
DEMO 解說 video.js 如何做到 fallback http://videojs.com/ 產生範本 下載網頁檔案 使用 WebMatrix 開啟目錄 在各瀏覽器進行測試 ( 直接用 IE9 開發者工具進行降版瀏覽器測試 )
HTML5 Reset HTML5 Reset Stylesheet http://html5doctor.com/html-5-reset-stylesheet/ Eric Meyer’s CSS reset HTML5 Reset :: A simple set of templates for any project http://html5reset.org/ HTML5 Doctor CSS Reset http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
精簡版的 HTML5 Reset
Designing Tool HTML5 設計工具
支援 HTML5 的設計工具 Expression Web 4 SP2 Visual Studio 2010 SP1 SuperPreview (快照) Expression Web 4 Service Pack 1 版本資訊 Expression Web 4 Service Pack 2 版本資訊 Visual Studio 2010 SP1 介紹好用 Visual Studio 2010 擴充套件：Web Standards Update for Microsoft Visual Studio 2010 SP1 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907 Expression Web 4 SP1 HTML5 Authoring Demo http://expression.microsoft.com/en-us/gg998776 HTML5, CSS3, and More with Expression Web 4 SP1 http://blogs.msdn.com/b/cbowen/archive/2011/03/24/html5-css3-and-more-with-expression-web-4-sp1.aspx
Expression Web 4 SP1 - HTML5 Intellisense
Expression Web 4 SP1 - HTML5 相容性
Expression Web 4 SP1 - CSS3 樣式編輯 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Expression Web 4 SP1 – 快照支援 IE9 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Visual Studio 2010 SP1 – Web 標準更新 Web Standards Update for Microsoft Visual Studio 2010 SP1 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
使用 Visual Studio 2010 擴充管理員 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
使用 Visual Studio 2010 擴充管理員 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Visual Studio 2010 SP1 – HTML5 Intellisense Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Visual Studio 2010 SP1 – Browser API Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Visual Studio 2010 SP1 – CSS3 2D Transforms, 3D Transforms, Animations, Background & Borders, Basic Box Model, Basic UI, Behavior, Color, Flexible Box Layout, Fonts, Paged Media, Hyperlink Presentation, Line, Lists, Marquee, Media Queries, Multi Column, Namespaces, Presentation Levels, Ruby, Selectors, Speech, Syntax, Template Layout, Text & Transitions. It also supports vendor specific prefixes like –ms, -webkit & -moz. Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
Visual Studio 2010 SP1 – ASP.NET MVC 3 Expression Web 4 Service Pack 1 http://expression.microsoft.com/en-us/gg702907
TEST & DEBUG HTML5 測試工具
Internet Explorer 9 開發者工具 (F12) 邊做邊學 Internet Explorer 8：深入 IE8 開發人員工具 (錄影) http://blog.miniasp.com/post/2011/02/24/Internet-Explorer-8-Developer-Toolbar-Deep-Dive.aspx 邊做邊學IE8相容性技術系列 http://www.youtube.com/playlist?p=PL38C761A404920162
深入 IE8 開發人員工具 (錄影) http://bit.ly/ie8compat_part2
IE10 Platform Preview 1 邊做邊學 Internet Explorer 8：深入 IE8 開發人員工具 (錄影) http://blog.miniasp.com/post/2011/02/24/Internet-Explorer-8-Developer-Toolbar-Deep-Dive.aspx 邊做邊學IE8相容性技術系列 http://www.youtube.com/playlist?p=PL38C761A404920162
IETester http://www.my-debugbar.com/wiki/IETester/HomePage 模擬 IE 5.5 ~ IE10Preview1
WebMatrix 方便開啟目錄快速進行測試 http://www.microsoft.com/web/webmatrix/
Integration HTML5 如何與 ASP.NET 整合
你可以從頭開始寫 <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>頁面標題</title> </head> <body> <p>網頁內容</p> </body> </html> W3C Markup Validation Service adds experimental HTML5 support http://blogs.sitepoint.com/w3c-markup-validation-service-adds-experimental-html5-support/
也可以從專案範本開始 ASP.NET MVC 3 Tools Update 內建 HTML5 網頁範本 包含 Modernizr 1.7
也可以直接下載更完整的網頁範本 Initializr - HTML5 templates generator http://initializr.com/ HTML5 Boilerplate http://html5boilerplate.com/ Notes on using PNGs https://github.com/paulirish/html5-boilerplate/wiki/Notes-on-using-png Image Optimization for the Web at php|works http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation
HTML5 升級實戰 Migrate to HTML5 NOW!! HTML5 differences from HTML4 (W3C Working Draft 05 April 2011 ) http://www.w3.org/TR/html5-diff/
ASP.NET 網站升級的步驟與工具 標準作業流程 使用工具 變更 DOCTYPE / charset 變更 TAG 修正 CSS ( HTML5 Reset CSS ) – 用精簡版 新增 html5shiv 或 Modernizr 使用工具 Visual Studio 2010 SP1 + 單鍵發行工具 IE9 IETester Notes on using PNGs https://github.com/paulirish/html5-boilerplate/wiki/Notes-on-using-png Image Optimization for the Web at php|works http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation
相關連結 HTML5 Specification Draft (W3C) HTML Living Standard HTML5 - Wikipedia, the free encyclopedia HTML5 - 维基百科，自由的百科全书 HTML5 Doctor HTML5 Rocks HTML5 Tutorial HTML5Labs HTML5研究小组
聯絡資訊 The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 ★ ★ ★ Will 保哥的噗浪 ★ ★ ★ http://blog.miniasp.com/ ★ ★ ★ Will 保哥的噗浪 ★ ★ ★ http://www.plurk.com/willh/invite Will 保哥的技術交流中心 (臉書粉絲專頁) http://www.facebook.com/will.fans
感謝各位