邁向 html5 如何與 asp.net 整合

59
1 邁邁 HTML5 邁邁邁 ASP.NET 邁邁 邁邁邁邁邁邁邁邁邁邁 邁邁邁邁 邁邁邁 ( Will 邁邁 ) 邁邁邁http://blog.miniasp.com/ 1

Upload: stone-livingston

Post on 01-Jan-2016

107 views

Category:

Documents


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 邁向  HTML5  如何與  ASP.NET  整合

1

邁向 HTML5 如何與 ASP.NET 整合

多奇數位創意有限公司

技術總監 黃保翕 ( Will 保哥 )

部落格: http://blog.miniasp.com/

1

Page 2: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

2

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

Evaluating

Page 3: 邁向  HTML5  如何與  ASP.NET  整合

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

Page 4: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

4

HTML5 & CSS3 Support

Page 5: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

5

HTML5 與 HTML 4.01 的差異1999 - 2011

Page 6: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

6

HTML5 的 DOCTYPE 變簡單了

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title> 頁面標題 </title>  </head>  <body>    <p> 網頁內容 </p>  </body></html>

Page 7: 邁向  HTML5  如何與  ASP.NET  整合

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

Page 8: 邁向  HTML5  如何與  ASP.NET  整合

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" />

Page 9: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

9

<!DOCTYPE html>

不會讓瀏覽器進入相容模式 (Quirk mode) IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, … 放心! Internet Explorer 6 也看的懂 !

如果使用 XHTML 模式 永遠會採用標準模式 (Standard mode) 也不需定義 DOCTYPE

Page 10: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

10

HTML5 新增的語意元素 1 / 4

section 代表著一份文件的範圍

一個網頁可以包含多份不同用途的文件 內容可以包含 h1, h2, h3, h4, h5, 與 h6

article 代表著一篇文章的範圍 例如一篇新聞稿、一篇部落格文章等

Page 11: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

11

HTML5 新增的語意元素 2 / 4

aside 用來標記一段彼此相關的內容 例如一篇文章裡有一段 Quote

就可以用 aside 標注起來

hgroup 用來標記某段 section 內的標題 內容可以包含 h1, h2, h3, h4, h5 與 h6

Page 12: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

12

HTML5 新增的語意元素 3 / 4

header 標記頁首的內容 可放置網站 LOGO 、主選單、導覽列

footer 標記頁尾的內容 可放置版權資訊、作者資訊、隱私權宣告等

nav 標記導覽列的內容 網站的主選單、導覽列都要包在這裡 搭配 <menu> 元素

Page 13: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

13

HTML5 新增的語意元素 4 / 4

figure 標記一段用來表示流程或圖解的內容

figcaption 標記 figure 區段內的標題

Page 14: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

14

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

Page 15: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

15

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

Page 16: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

16

HTML5 相容性套件Compatibility

Page 17: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

17

讓老舊的瀏覽器支援 HTML5 新元素

已支援 HTML5 新元素的瀏覽器 Firefox, Chrome, Safari, Opera, IE9

IE6, IE7, IE8 怎麼辦? 使用 html5shiv - HTML5 IE enabling script 使用 Modernizr

其他舊版瀏覽器永遠不會有相容性問題 因為所有人都會直接叫你升級到最新版 XD

Page 18: 邁向  HTML5  如何與  ASP.NET  整合

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

Page 19: 邁向  HTML5  如何與  ASP.NET  整合

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>

Page 20: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

20

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

Page 21: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

21

Modernizr ( 摩登家 )

Page 22: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

22

Modernizr ( 摩登家 )

網址 : http://www.modernizr.com/ 用途與說明

讓各種舊版瀏覽器支援 HTML5 與 CSS3 性能

包含一組能偵測 HTML5 支援能力的函式庫 功能強大,支援多種瀏覽器的相容性支援

★ HTML5 Cross Browser Polyfills ★ HTML5 Fallbacks

Page 23: 邁向  HTML5  如何與  ASP.NET  整合

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 條件式判斷

Page 24: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

24

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

Page 25: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

25

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

多重背景圖片的 CSS3 語法

套用 Modernizr 之後的寫法

Page 26: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

26

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

Page 27: 邁向  HTML5  如何與  ASP.NET  整合

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

Page 28: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

29

如何自訂「填充物」

Page 29: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

30

DEMO解說 video.js 如何做到 fallback

http://videojs.com/

Page 30: 邁向  HTML5  如何與  ASP.NET  整合

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/

Page 31: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

32

精簡版的 HTML5 Reset

Page 32: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

35

HTML5 設計工具Designing Tool

Page 34: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

37

Expression Web 4 SP1 - HTML5 Intellisense

Page 35: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

38

Expression Web 4 SP1 - HTML5 相容性

Page 36: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

39

Expression Web 4 SP1 - CSS3 樣式編輯

Page 37: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

40

Expression Web 4 SP1 – 快照支援 IE9

Page 38: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

41

Visual Studio 2010 SP1 – Web 標準更新

Web Standards Update for Microsoft Visual Studio 2010 SP1

Page 39: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

42

使用 Visual Studio 2010 擴充管理員

Page 40: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

43

使用 Visual Studio 2010 擴充管理員

Page 41: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

44

Visual Studio 2010 SP1 – HTML5 Intellisense

Page 42: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

45

Visual Studio 2010 SP1 – Browser API

Page 43: 邁向  HTML5  如何與  ASP.NET  整合

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.

Page 44: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

47

Visual Studio 2010 SP1 – ASP.NET MVC 3

Page 45: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

48

HTML5 測試工具TEST & DEBUG

Page 46: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

49

Internet Explorer 9 開發者工具 (F12)

Page 47: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

50

深入 IE8 開發人員工具 (錄影 )

http://bit.ly/ie8compat_part2

Page 48: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

51

IE10 Platform Preview 1

Page 49: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

52

IETester

Page 50: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

53

WebMatrix

Page 51: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

54

HTML5 如何與 ASP.NET 整合Integration

Page 52: 邁向  HTML5  如何與  ASP.NET  整合

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>

Page 53: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

56

也可以從專案範本開始

ASP.NET MVC 3 Tools Update 內建 HTML5 網頁範本 包含 Modernizr 1.7

Page 54: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

57

也可以直接下載更完整的網頁範本

Initializr - HTML5 templates generator http://initializr.com/

HTML5 Boilerplate http://html5boilerplate.com/

Page 55: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

58

HTML5 升級實戰Migrate to HTML5 NOW!!

Page 56: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

59

ASP.NET 網站升級的步驟與工具

標準作業流程 變更 DOCTYPE / charset 變更 TAG 修正 CSS ( HTML5 Reset CSS ) – 用精簡版 新增 html5shiv 或 Modernizr

使用工具 Visual Studio 2010 SP1 + 單鍵發行工具 IE9 IETester

Page 58: 邁向  HTML5  如何與  ASP.NET  整合

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

Page 59: 邁向  HTML5  如何與  ASP.NET  整合

All services from your imperative.

62

感謝各位