html5 asp net n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
邁向 HTML5 如何與 ASP.NET 整合 PowerPoint Presentation
Download Presentation
邁向 HTML5 如何與 ASP.NET 整合

Loading in 2 Seconds...

play fullscreen
1 / 59

邁向 HTML5 如何與 ASP.NET 整合 - PowerPoint PPT Presentation


  • 174 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '邁向 HTML5 如何與 ASP.NET 整合' - stone-livingston


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html5 asp net

邁向 HTML5 如何與 ASP.NET 整合

多奇數位創意有限公司

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

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

1

slide3
評估要點
  • 網頁是否需要跨瀏覽器與不同設備?
    • 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 doctype
HTML5 的 DOCTYPE 變簡單了

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>頁面標題</title>

</head>

<body>

<p>網頁內容</p>

</body>

</html>

xhtml5
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

slide8
指定網頁編碼的方式
  • 在 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" />
doctype html
<!DOCTYPEhtml>
  • 不會讓瀏覽器進入相容模式(Quirk mode)
    • IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, …
    • 放心! Internet Explorer 6 也看的懂!
  • 如果使用 XHTML 模式
    • 永遠會採用標準模式(Standard mode)
    • 也不需定義 DOCTYPE
html5 1 4
HTML5 新增的語意元素 1 / 4
  • section
    • 代表著一份文件的範圍
      • 一個網頁可以包含多份不同用途的文件
    • 內容可以包含 h1, h2, h3, h4, h5, 與h6
  • article
    • 代表著一篇文章的範圍
    • 例如一篇新聞稿、一篇部落格文章等
html5 2 4
HTML5 新增的語意元素 2 / 4
  • aside
    • 用來標記一段彼此相關的內容
    • 例如一篇文章裡有一段 Quote 就可以用 aside 標注起來
  • hgroup
    • 用來標記某段 section 內的標題
    • 內容可以包含 h1, h2, h3, h4, h5 與h6
html5 3 4
HTML5 新增的語意元素 3 / 4
  • header
    • 標記頁首的內容
    • 可放置網站LOGO、主選單、導覽列
  • footer
    • 標記頁尾的內容
    • 可放置版權資訊、作者資訊、隱私權宣告等
  • nav
    • 標記導覽列的內容
    • 網站的主選單、導覽列都要包在這裡
    • 搭配 <menu> 元素
html5 4 4
HTML5 新增的語意元素 4 / 4
  • figure
    • 標記一段用來表示流程或圖解的內容
  • figcaption
    • 標記 figure區段內的標題
html52
讓老舊的瀏覽器支援 HTML5 新元素
  • 已支援 HTML5 新元素的瀏覽器
    • Firefox, Chrome, Safari, Opera, IE9
  • IE6, IE7, IE8 怎麼辦?
    • 使用 html5shiv - HTML5 IE enabling script
    • 使用 Modernizr
  • 其他舊版瀏覽器永遠不會有相容性問題
    • 因為所有人都會直接叫你升級到最新版 XD
html5shiv
HTML5shiv
  • 網址
    • http://code.google.com/p/html5shiv/
  • 用途
    • 讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素
    • 包含支援網頁列印時的樣式能正確顯示
    • 檔案大小僅 2,051 位元組 (2KB)
  • 示範
    • http://www.iecss.com/print-protector/example_print_iepp.html
html5shiv1
如何使用 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>

modernizr1
Modernizr (摩登家)
  • 網址: http://www.modernizr.com/
  • 用途與說明
    • 讓各種舊版瀏覽器支援 HTML5 與 CSS3 性能
    • 包含一組能偵測 HTML5 支援能力的函式庫
    • 功能強大,支援多種瀏覽器的相容性支援
    • ★ HTML5 Cross Browser Polyfills★
      • HTML5 Fallbacks
modernizr fallback
Modernizr 如何做到 fallback 相容性
  • 透過修改 <html> 的 class 屬性判斷
    • no-js
    • js no-touch no-history multiplebgsboxshadow opacity no-cssanimations no-csscolumns……
  • 透過 JavaScript 條件式判斷
html class1
透過修改 <html> 的 class 屬性判斷
  • 多重背景圖片的 CSS3 語法
  • 套用 Modernizr 之後的寫法
polyfills
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
html5 reset
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/
html54
支援 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
visual studio 2010 sp1 web
Visual Studio 2010 SP1 – Web 標準更新
  • Web Standards Update for Microsoft Visual Studio 2010 SP1
visual studio 2010 sp1 css3
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.

slide47
深入 IE8 開發人員工具 (錄影)
  • http://bit.ly/ie8compat_part2
slide52
你可以從頭開始寫

<!DOCTYPEhtml>

<html lang="zh-TW">

<head>

<metacharset="UTF-8">

<title>頁面標題</title>

</head>

<body>

<p>網頁內容</p>

</body>

</html>

slide53
也可以從專案範本開始
  • ASP.NET MVC 3 Tools Update
    • 內建 HTML5 網頁範本
    • 包含 Modernizr 1.7
slide54
也可以直接下載更完整的網頁範本
  • Initializr - HTML5 templates generator
    • http://initializr.com/
  • HTML5 Boilerplate
    • http://html5boilerplate.com/
asp net
ASP.NET 網站升級的步驟與工具
  • 標準作業流程
    • 變更 DOCTYPE / charset
    • 變更 TAG
    • 修正 CSS ( HTML5 Reset CSS ) – 用精簡版
    • 新增 html5shiv 或 Modernizr
  • 使用工具
    • Visual Studio 2010 SP1 + 單鍵發行工具
    • IE9
    • IETester
slide57
相關連結
  • HTML5 Specification Draft (W3C)
  • HTML Living Standard
  • HTML5 - Wikipedia, the free encyclopedia
  • HTML5 - 维基百科,自由的百科全书
  • HTML5 Doctor
  • HTML5 Rocks
  • HTML5 Tutorial
  • HTML5Labs
  • HTML5研究小组
slide58
聯絡資訊
  • The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
    • http://blog.miniasp.com/
  • ★ ★ ★ Will 保哥的噗浪 ★ ★ ★
    • http://www.plurk.com/willh/invite
  • Will 保哥的技術交流中心 (臉書粉絲專頁)
    • http://www.facebook.com/will.fans