1 / 59

邁向 HTML5 如何與 ASP.NET 整合

邁向 HTML5 如何與 ASP.NET 整合. 多 奇數位創意 有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落 格： http://blog.miniasp.com/. 1. Evaluating. 如何評估是否需要使用 HTML5 的技術. 評估要點. 網頁是否需要跨瀏覽 器與不同設備？ IE , Firefox , Google Chrome , Safari , Opera , … iPad , iPhone , Android , WP7 , WM , Symbian, .. 是否 需要 HTML5 支援的那些新功能？

stone-livingston
Download Presentation

邁向 HTML5 如何與 ASP.NET 整合

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 邁向 HTML5 如何與 ASP.NET 整合 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 1

  2. Evaluating 如何評估是否需要使用 HTML5的技術

  3. 評估要點 • 網頁是否需要跨瀏覽器與不同設備？ • 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

  4. HTML5 & CSS3 Support

  5. 1999 - 2011 HTML5 與 HTML 4.01的差異

  6. HTML5 的 DOCTYPE 變簡單了 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>頁面標題</title> </head> <body> <p>網頁內容</p> </body> </html>

  7. XHTML5 的宣告方式 <?xmlversion="1.0"encoding="UTF-8"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta> <title>頁面標題</title> </head> <body> <p>網頁內容</p> </body> </html> Content-Type 必須是application/xhtml+xml或 application/xml

  8. 指定網頁編碼的方式 • 在 HTTP 的 Content-Type 標頭設定 • Content-Type: text/html; charset=UTF-8 • 在網頁檔頭的地方加上 BOM 字元 • 在網頁 HTML 的 <head> 加上 Meta 標籤 • <metacharset="UTF-8" /> • <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" />

  9. <!DOCTYPEhtml> • 不會讓瀏覽器進入相容模式(Quirk mode) • IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, … • 放心！ Internet Explorer 6 也看的懂! • 如果使用 XHTML 模式 • 永遠會採用標準模式(Standard mode) • 也不需定義 DOCTYPE

  10. HTML5 新增的語意元素 1 / 4 • section • 代表著一份文件的範圍 • 一個網頁可以包含多份不同用途的文件 • 內容可以包含 h1, h2, h3, h4, h5, 與h6 • article • 代表著一篇文章的範圍 • 例如一篇新聞稿、一篇部落格文章等

  11. HTML5 新增的語意元素 2 / 4 • aside • 用來標記一段彼此相關的內容 • 例如一篇文章裡有一段 Quote 就可以用 aside 標注起來 • hgroup • 用來標記某段 section 內的標題 • 內容可以包含 h1, h2, h3, h4, h5 與h6

  12. HTML5 新增的語意元素 3 / 4 • header • 標記頁首的內容 • 可放置網站LOGO、主選單、導覽列 • footer • 標記頁尾的內容 • 可放置版權資訊、作者資訊、隱私權宣告等 • nav • 標記導覽列的內容 • 網站的主選單、導覽列都要包在這裡 • 搭配 <menu> 元素

  13. HTML5 新增的語意元素 4 / 4 • figure • 標記一段用來表示流程或圖解的內容 • figcaption • 標記 figure區段內的標題

  14. 版面標籤的使用變化 1 / 2

  15. 版面標籤的使用變化 2 / 2

  16. Compatibility HTML5 相容性套件

  17. 讓老舊的瀏覽器支援 HTML5 新元素 • 已支援 HTML5 新元素的瀏覽器 • Firefox, Chrome, Safari, Opera, IE9 • IE6, IE7, IE8 怎麼辦？ • 使用 html5shiv - HTML5 IE enabling script • 使用 Modernizr • 其他舊版瀏覽器永遠不會有相容性問題 • 因為所有人都會直接叫你升級到最新版 XD

  18. HTML5shiv • 網址 • http://code.google.com/p/html5shiv/ • 用途 • 讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素 • 包含支援網頁列印時的樣式能正確顯示 • 檔案大小僅 2,051 位元組 (2KB) • 示範 • http://www.iecss.com/print-protector/example_print_iepp.html

  19. 如何使用 html5shiv <!DOCTYPEhtml> <html lang="zh-TW"> <head> <metacharset="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>

  20. 使用 HTML5shiv 在舊版瀏覽器的差異 DEMO

  21. Modernizr (摩登家)

  22. Modernizr (摩登家) • 網址: http://www.modernizr.com/ • 用途與說明 • 讓各種舊版瀏覽器支援 HTML5 與 CSS3 性能 • 包含一組能偵測 HTML5 支援能力的函式庫 • 功能強大，支援多種瀏覽器的相容性支援 • ★ HTML5 Cross Browser Polyfills★ • HTML5 Fallbacks

  23. Modernizr 如何做到 fallback 相容性 • 透過修改 <html> 的 class 屬性判斷 • no-js • js no-touch no-history multiplebgsboxshadow opacity no-cssanimations no-csscolumns…… • 透過 JavaScript 條件式判斷

  24. 透過修改 <html> 的 class 屬性判斷

  25. 透過修改 <html> 的 class 屬性判斷 • 多重背景圖片的 CSS3 語法 • 套用 Modernizr 之後的寫法

  26. CSS3 多重背景在不同瀏覽器下的呈現

  27. Polyfills ( 填充物 ) • polyfill(n): a JavaScript shim that replicates the standard API for older browsers • HTML5 Cross Browser Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

  28. 如何自訂「填充物」

  29. 解說 video.js 如何做到 fallback http://videojs.com/ DEMO

  30. 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/

  31. 精簡版的 HTML5 Reset

  32. Designing Tool HTML5 設計工具

  33. 支援 HTML5 的設計工具 • Expression Web 4 SP2 • 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

  34. Expression Web 4 SP1 - HTML5 Intellisense

  35. Expression Web 4 SP1 - HTML5 相容性

  36. Expression Web 4 SP1 - CSS3 樣式編輯

  37. Expression Web 4 SP1 – 快照支援 IE9

  38. Visual Studio 2010 SP1 – Web 標準更新 • Web Standards Update for Microsoft Visual Studio 2010 SP1

  39. 使用 Visual Studio 2010 擴充管理員

  40. 使用 Visual Studio 2010 擴充管理員

  41. Visual Studio 2010 SP1 – HTML5 Intellisense

  42. Visual Studio 2010 SP1 – Browser API

  43. 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.

  44. Visual Studio 2010 SP1 – ASP.NET MVC 3

  45. TEST & DEBUG HTML5 測試工具

  46. Internet Explorer 9 開發者工具 (F12)

  47. 深入 IE8 開發人員工具 (錄影) • http://bit.ly/ie8compat_part2

  48. IE10 Platform Preview 1

  49. IETester

  50. WebMatrix

More Related