邁向 html5 如何與 asp.net 整合
Post on 01-Jan-2016
101 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
邁向 HTML5 如何與 ASP.NET 整合
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格： http://blog.miniasp.com/
1
All services from your imperative.
2
如何評估是否需要使用 HTML5 的技術
Evaluating
All services from your imperative.
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
All services from your imperative.
4
HTML5 & CSS3 Support
All services from your imperative.
5
HTML5 與 HTML 4.01 的差異1999 - 2011
All services from your imperative.
6
HTML5 的 DOCTYPE 變簡單了
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> 頁面標題 </title> </head> <body> <p> 網頁內容 </p> </body></html>
All services from your imperative.
7
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>
Content-Type 必須是 application/xhtml+xml 或 application/xml
All services from your imperative.
8
指定網頁編碼的方式
在 HTTP 的 Content-Type 標頭設定 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" />
All services from your imperative.
9
<!DOCTYPE html>
不會讓瀏覽器進入相容模式 (Quirk mode) IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, … 放心！ Internet Explorer 6 也看的懂 !
如果使用 XHTML 模式 永遠會採用標準模式 (Standard mode) 也不需定義 DOCTYPE
All services from your imperative.
10
HTML5 新增的語意元素 1 / 4
section 代表著一份文件的範圍
一個網頁可以包含多份不同用途的文件 內容可以包含 h1, h2, h3, h4, h5, 與 h6
article 代表著一篇文章的範圍 例如一篇新聞稿、一篇部落格文章等
All services from your imperative.
11
HTML5 新增的語意元素 2 / 4
aside 用來標記一段彼此相關的內容 例如一篇文章裡有一段 Quote
就可以用 aside 標注起來
hgroup 用來標記某段 section 內的標題 內容可以包含 h1, h2, h3, h4, h5 與 h6
All services from your imperative.
12
HTML5 新增的語意元素 3 / 4
header 標記頁首的內容 可放置網站 LOGO 、主選單、導覽列
footer 標記頁尾的內容 可放置版權資訊、作者資訊、隱私權宣告等
nav 標記導覽列的內容 網站的主選單、導覽列都要包在這裡 搭配 <menu> 元素
All services from your imperative.
13
HTML5 新增的語意元素 4 / 4
figure 標記一段用來表示流程或圖解的內容
figcaption 標記 figure 區段內的標題
All services from your imperative.
14
版面標籤的使用變化 1 / 2
All services from your imperative.
15
版面標籤的使用變化 2 / 2
All services from your imperative.
16
HTML5 相容性套件Compatibility
All services from your imperative.
17
讓老舊的瀏覽器支援 HTML5 新元素
已支援 HTML5 新元素的瀏覽器 Firefox, Chrome, Safari, Opera, IE9
IE6, IE7, IE8 怎麼辦？ 使用 html5shiv - HTML5 IE enabling script 使用 Modernizr
其他舊版瀏覽器永遠不會有相容性問題 因為所有人都會直接叫你升級到最新版 XD
All services from your imperative.
18
HTML5shiv
網址 http://code.google.com/p/html5shiv/
用途 讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素 包含支援網頁列印時的樣式能正確顯示 檔案大小僅 2,051 位元組 (2KB)
示範 http://
www.iecss.com/print-protector/example_print_iepp.html
All services from your imperative.
19
如何使用 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>
All services from your imperative.
20
DEMO使用 HTML5shiv 在舊版瀏覽器的差異
All services from your imperative.
21
Modernizr ( 摩登家 )
All services from your imperative.
22
Modernizr ( 摩登家 )
網址 : http://www.modernizr.com/ 用途與說明
讓各種舊版瀏覽器支援 HTML5 與 CSS3 性能
包含一組能偵測 HTML5 支援能力的函式庫 功能強大，支援多種瀏覽器的相容性支援
★ HTML5 Cross Browser Polyfills ★ HTML5 Fallbacks
All services from your imperative.
23
Modernizr 如何做到 fallback 相容性
透過修改 <html> 的 class 屬性判斷 no-js js no-touch no-history multiplebgs boxshadow
opacity no-cssanimations no-csscolumns ……
透過 JavaScript 條件式判斷
All services from your imperative.
24
透過修改 <html> 的 class 屬性判斷
All services from your imperative.
25
透過修改 <html> 的 class 屬性判斷
多重背景圖片的 CSS3 語法
套用 Modernizr 之後的寫法
All services from your imperative.
26
CSS3 多重背景在不同瀏覽器下的呈現
All services from your imperative.
28
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
All services from your imperative.
29
如何自訂「填充物」
All services from your imperative.
30
DEMO解說 video.js 如何做到 fallback
http://videojs.com/
All services from your imperative.
31
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/
All services from your imperative.
32
精簡版的 HTML5 Reset
All services from your imperative.
35
HTML5 設計工具Designing Tool
All services from your imperative.
36
支援 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
All services from your imperative.
37
Expression Web 4 SP1 - HTML5 Intellisense
All services from your imperative.
38
Expression Web 4 SP1 - HTML5 相容性
All services from your imperative.
39
Expression Web 4 SP1 - CSS3 樣式編輯
All services from your imperative.
40
Expression Web 4 SP1 – 快照支援 IE9
All services from your imperative.
41
Visual Studio 2010 SP1 – Web 標準更新
Web Standards Update for Microsoft Visual Studio 2010 SP1
All services from your imperative.
42
使用 Visual Studio 2010 擴充管理員
All services from your imperative.
43
使用 Visual Studio 2010 擴充管理員
All services from your imperative.
44
Visual Studio 2010 SP1 – HTML5 Intellisense
All services from your imperative.
45
Visual Studio 2010 SP1 – Browser API
All services from your imperative.
46
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.
All services from your imperative.
47
Visual Studio 2010 SP1 – ASP.NET MVC 3
All services from your imperative.
48
HTML5 測試工具TEST & DEBUG
All services from your imperative.
49
Internet Explorer 9 開發者工具 (F12)
All services from your imperative.
50
深入 IE8 開發人員工具 (錄影 )
http://bit.ly/ie8compat_part2
All services from your imperative.
52
IETester
All services from your imperative.
53
WebMatrix
All services from your imperative.
54
HTML5 如何與 ASP.NET 整合Integration
All services from your imperative.
55
你可以從頭開始寫
<!DOCTYPE html><html lang="zh-TW"> <head> <meta charset="UTF-8"> <title> 頁面標題 </title> </head> <body> <p> 網頁內容 </p> </body></html>
All services from your imperative.
56
也可以從專案範本開始
ASP.NET MVC 3 Tools Update 內建 HTML5 網頁範本 包含 Modernizr 1.7
All services from your imperative.
57
也可以直接下載更完整的網頁範本
Initializr - HTML5 templates generator http://initializr.com/
HTML5 Boilerplate http://html5boilerplate.com/
All services from your imperative.
58
HTML5 升級實戰Migrate to HTML5 NOW!!
All services from your imperative.
59
ASP.NET 網站升級的步驟與工具
標準作業流程 變更 DOCTYPE / charset 變更 TAG 修正 CSS ( HTML5 Reset CSS ) – 用精簡版 新增 html5shiv 或 Modernizr
使用工具 Visual Studio 2010 SP1 + 單鍵發行工具 IE9 IETester
All services from your imperative.
60
相關連結
HTML5 Specification Draft (W3C) HTML Living Standard HTML5 - Wikipedia, the free encyclopedia HTML5 - 维基百科，自由的百科全书 HTML5 Doctor HTML5 Rocks HTML5 Tutorial HTML5Labs HTML5研究小组
All services from your imperative.
61
聯絡資訊
The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
★ ★ ★ Will 保哥的噗浪 ★ ★ ★ http://www.plurk.com/willh/invite
Will 保哥的技術交流中心 (臉書粉絲專頁 ) http://www.facebook.com/will.fans
All services from your imperative.
62
感謝各位
top related