Download presentation
Presentation is loading. Please wait.
1
Notes (hidden) 檔案請存成 Power Point 2010 可讀之格式 字體規範：中文字型請用微軟正黑體，
英文字型請用 Calibri
2
使用 HTML5 打造友善網頁 DEV305 黃保翕 ( Will 保哥 ) 技術總監 多奇數位創意有限公司
部落格：
3
語法變更、語意標籤、JavaScript APIs
HTML5 有哪些新標準 語法變更、語意標籤、JavaScript APIs
4
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG
語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
5
DOCTYPE HTML 4.01 HTML5 嚴格標準模式 ( HTML 4 Strict )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 近似標準模式 ( HTML 4 Transitional ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 近似標準但支援框架模式 ( HTML 4 Frameset ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " HTML5 只剩下一種模式且不支援框架 <!DOCTYPE html> 跨瀏覽器網頁設計密技 (1)
6
MathML 以標籤形式展示各種數學表達式 MathML 殘酷測試 各瀏覽器支援度 目前最新版：MathML 3.0
MathML Torture Test 各瀏覽器支援度 Summary of Browser Support for MathML When can I use MathML? Firefox, Safari Opera ( 僅支援 MathML for CSS profile )
7
SVG 以標籤形式展示各種向量圖形 SVG 殘酷測試 各瀏覽器支援度 目前最新版：SVG 1.1
A Simple SVG Demo All SVG Samples 各瀏覽器支援度 When can I use SVG?
8
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG
語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
9
版面標籤的使用變化 1 / 2 Yes, You Can Use HTML 5 Today!
10
版面標籤的使用變化 2 / 2 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>
11
HTML5 多媒體元素 audio [DEMO] video 播放音效 可提供多種聲音格式供瀏覽器選擇
包括完整 JS API 可對聲音進行播放控制 video 播放影片 [DEMO] [DEMO2] 包括完整 JS API 與 track 元素(顯示字幕)
![HTML5 多媒體元素 audio [DEMO] video 播放音效 可提供多種聲音格式供瀏覽器選擇](http://slidesplayer.com/slide/11503311/62/images/11/HTML5+%E5%A4%9A%E5%AA%92%E9%AB%94%E5%85%83%E7%B4%A0+audio+%5BDEMO%5D+video+%E6%92%AD%E6%94%BE%E9%9F%B3%E6%95%88+%E5%8F%AF%E6%8F%90%E4%BE%9B%E5%A4%9A%E7%A8%AE%E8%81%B2%E9%9F%B3%E6%A0%BC%E5%BC%8F%E4%BE%9B%E7%80%8F%E8%A6%BD%E5%99%A8%E9%81%B8%E6%93%87.jpg "包括完整 JS API 可對聲音進行播放控制. video. 播放影片 [DEMO] [DEMO2] 包括完整 JS API 與 track 元素(顯示字幕)")
12
HTML5 繪圖 / 外掛 canvas http://www.cuttherope.ie/ embed [ 載入 Flash 動畫 ]
非向量繪圖 / Pixel-based 許多 HTML5 Game 都是基於 canvas 進行開發 embed [ 載入 Flash 動畫 ] 載入第三方外掛內容 例如：Flash、Silverlight 各瀏覽器早就支援，直到 HTML5 才變成標準
![HTML5 繪圖 / 外掛 canvas embed [ 載入 Flash 動畫 ]](http://slidesplayer.com/slide/11503311/62/images/12/HTML5+%E7%B9%AA%E5%9C%96+%2F+%E5%A4%96%E6%8E%9B+canvas+++embed+%5B+%E8%BC%89%E5%85%A5+Flash+%E5%8B%95%E7%95%AB+%5D.jpg "非向量繪圖 / Pixel-based. 許多 HTML5 Game 都是基於 canvas 進行開發. embed [ 載入 Flash 動畫 ] 載入第三方外掛內容. 例如：Flash、Silverlight. 各瀏覽器早就支援，直到 HTML5 才變成標準.")
13
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG
語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
14
JavaScript APIs Offline Apps XMLHttpRequest L2 Web SQL DB Forms
Indexed DB Web Storage session / local Web Workers Web Sockets History API XMLHttpRequest L2 Forms Geolocation Canvas 2D Context Media Capture File API Touch Events
15
國內有哪些 HTML5 網站 真實的案例分析
16
語意標籤 T客邦 http://www.techbang.com/ 永豐銀行信用卡服務網 http://card.sinopac.com/
分析工具 HTML5 Outliner ( Google Chrome 外掛 ) 看看【機器人】如何查看你的網頁內容 HTML 5 Outliner Generates a navigable page outline with heading and sectioning elements This extension is using the HTML5 outline algorithm to create a table of contents. Should also work well with HTML4 (and older?) pages, that have structured headings. The table of contents is clickable and tries to highlight the heading/section in question after the jump. The extension should prove useful to people who find themselves often using online HTML5 outliners. Comments, bug reports and suggestions much appreciated! Source for this extension (and a bookmarklet version of the outliner for other browsers) is available at If you like this extension, please make a charitable donation to Ocean Voyages Institute (Project Kaisei) at
17
2D 繪圖技術 - Canvas LEXUS ALL NEW ES 大器天成 Nvesto-全方位財經股市資訊網站 HTML 5 Outliner Generates a navigable page outline with heading and sectioning elements This extension is using the HTML5 outline algorithm to create a table of contents. Should also work well with HTML4 (and older?) pages, that have structured headings. The table of contents is clickable and tries to highlight the heading/section in question after the jump. The extension should prove useful to people who find themselves often using online HTML5 outliners. Comments, bug reports and suggestions much appreciated! Source for this extension (and a bookmarklet version of the outliner for other browsers) is available at If you like this extension, please make a charitable donation to Ocean Voyages Institute (Project Kaisei) at
18
Responsive Web Design (RWD)
HITCON 2012 台灣駭客年會 Fandora.tw 藝術x攝影x設計
19
HTML5Shiv, Modernizr, Polyfills, 測試工具, …
20
HTML5shiv 網址 用途 示範 http://code.google.com/p/html5shiv/
讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素 包含支援網頁列印時的樣式能正確顯示 檔案大小僅 2,051 位元組 (2KB) 示範 IE Print Protector HTML5 測試在舊版 IE 開啟時的列印功能
21
如何使用 html5shiv <!DOCTYPE html> <html lang="zh-TW">
<head> <meta charset="UTF-8"> <title>頁面標題</title> <!--[if lt IE 9]> <script src=" <![endif]--> </head> <body> <p>網頁內容</p> </body> </html>
22
Modernizr (摩登家) 解構 modernizr.js
23
Modernizr (摩登家) 網址: http://www.modernizr.com/ 用途與說明
網址: 用途與說明 偵測瀏覽器 HTML5 與 CSS3 的支援能力 支援多種瀏覽器的相容性支援 IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile 測試中：Blackberry 6+ 解構 modernizr.js
24
Modernizr 的三大相容力 提高 HTML5 標籤與屬性的相容性 提高 JavaScript API 相容性 提高 CSS3 相容性
解構 modernizr.js
25
Modernizr 如何做到 JS APIs 相容
透過簡單的判斷式 if (Modernizr.geolocation) { DoSomething(); } 透過提供完全相同的 JavaScript APIs HTML5 Cross Browser Polyfills
26
HTML5 跨瀏覽器填充物大收集 ★ HTML5 Cross Browser Polyfills ★ 支援 <svg> 標籤
支援 <canvas> 標籤 支援 <video> 標籤 支援 <audio> 標籤 支援 Web Storage (LocalStorage and SessionStorage) API 支援 Web SQL DB、Web Workers、Web Sockets 支援 Web Forms 2.0、 Geo-Location、File API 支援 Drag and Drop、 支援 …… …… …… …… …… 很多很多 ……
27
Modernizr 如何做到 CSS3 相容 透過修改 <html> 的 class 屬性來判斷 no-js
js no-touch no-history multiplebgs boxshadow opacity no-cssanimations no-csscolumns ……
28
多重背景在不同瀏覽器下的呈現
29
透過 <html> 的 class 屬性判斷
多重背景圖片的 CSS3 語法 套用 Modernizr 之後的寫法
30
使用 HTML5 打造友善介面
31
使用 HTML5 表單優化輸入 <input type="url" />
<input type=" " /> <input type="tel" /> 測試頁面： HTML5 Doctor CSS Reset
32
輸入網址 <input type="url">
34
輸入 電子郵件地址 <input type=" ">
36
輸入電話號碼 <input type="tel">
38
使用 HTML5 播放多媒體影音 <video> <audio> 使用 JavaScript 製作跨瀏覽器的播放介面
<audio> 使用 JavaScript 製作跨瀏覽器的播放介面 video.js ( ) 自訂外觀: audio.js ( ) 自訂外觀: A Collection of 20 HTML5 Video Players Building a custom HTML5 video player with CSS3 and jQuery
39
使用 HTML5 上傳檔案 XmlHttpRequest Level 2 Blob API 支援「傳輸進度」事件
可切割大型檔案 （透過 XHR 分批上傳） NEW TRICKS IN XMLHTTPREQUEST2
40
使用「傳輸進度」事件 NEW TRICKS IN XMLHTTPREQUEST2
41
使用「檔案分割」功能 NEW TRICKS IN XMLHTTPREQUEST2 DEMO
42
設計 RWD 網頁 RWD = Responsive Web Design RWD 可能的中文翻譯：
自適應網頁設計 回應式網頁設計 响应式网页设计 (大陸翻譯) RWD = 使用 CSS3 的 Media Query 語法 Responsive Design in 3 Steps
43
設計 RWD 網頁三部曲 宣告 Meta 標籤 載入 Media Queries 的 Polyfills 套件 )
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 載入 Media Queries 的 Polyfills 套件 ) <!--[if lt IE 9]> <script src=" <![endif]--> 撰寫 CSS3 的 Media Queries 語法 @media screen and (max-width: 980px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 320px) { } css3-mediaqueries.js Respond.js DEMO:
44
RWD 網頁設計 Tips (1) Responsive Images DEMO
5 Useful CSS Tricks for Responsive Design DEMO
45
RWD 網頁設計 Tips (2) Responsive Video
5 Useful CSS Tricks for Responsive Design CSS: Elastic Videos Videos styled with an intrinsic-ratio
46
RWD 網頁設計 Tips (3) 相對數值 強迫斷字 Relative Margin Relative Font Size
Relative Padding 強迫斷字 5 Useful CSS Tricks for Responsive Design CSS: Elastic Videos Videos styled with an intrinsic-ratio CSS: Clearing Floats with Overflow
47
HTML5 行動版網頁模擬器
48
Windows Phone 7.5 (Mango) Windows Phone Emulator
49
Opera Mobile Emulator Opera Mobile Emulator DEMO
保德信投信行動版網站
50
Mobilizer Mobilizer (要先安裝 Adobe Air)
51
線上模擬器 iPhone 4 Simulator - Test iPhone Websites iPhone Web Apps
52
RWD 線上檢測工具 檢測工具 DEMO Responsive Design Bookmarklet
Resizer // A responsive design bookmarklet DEMO HITCON 2012 台灣駭客年會 Walt Disney World Resort Watercraft & Boats | BRP Sea-Doo
53
HTML5 行動版網頁效能調校
54
行動版網站效能提升 主要的困難點 可能的解決方案 現今唯一公認的方案 不同的作業系統平台 不同的硬體支援程度 不同的螢幕大小尺寸
提供一個抽象的中間層架構 現今唯一公認的方案 HTML5
55
開發行動版網頁 HTML5 的兩種開發模式 效能瓶頸 執行於行動裝置的瀏覽器內 執行於原生 App 並置入 "瀏覽器元件"
透過 JavaScript 呼叫行動裝置原生的 APIs 效能瓶頸 需較多 CPU 資源的應用來說 HTML5 性能較差 但這取決於你用了多少 HTML5 提供的性能
56
開發行動版網頁效能優化 (1) 使用非同步執行碼執行 defer async 定義於 HTML 4.01 規格
背景載入 JavaScript 延遲執行 JavaScript 指令碼 以同步方式執行，載入多個 defer 指令碼一樣會依序執行！ async 定義於 HTML5 規格 非同步執行 JavaScript 指令碼 以 non-blocking 方式執行！
57
非同步指令碼執行 正常載入 (在執行完後才繼續剖析網頁) 延遲載入 (在網頁剖析完成後開始執行) 非同步載入 (下載完成後立即開始執行)
<script src="test.js"></script> 延遲載入 (在網頁剖析完成後開始執行) <script defer src="test.js"> </script> 非同步載入 (下載完成後立即開始執行) <script async src="test.js"> </script> 混合使用？ (相容性寫法優先採用 async 選項) <script async defer src="test.js"> </script> 非同步指令碼執行
58
非同步指令碼執行 JavaScript 執行順序圖示 示範執行速度：HTML5 非同步指令碼
Asynchronous and deferred JavaScript execution explained
59
開發行動版網頁效能優化 (2) 對你的 JavaScript 與 CSS 進行打包/壓縮 使用 ASP.NET 4.5 內建的打包/壓縮機制
打包 (Bundling) 壓縮 (Minification) 或稱 "最小化" 使用 ASP.NET 4.5 內建的打包/壓縮機制 定義打包 (Bundling) 策略 啟用打包/壓縮服務 web.config <compilation debug="true"> C# / .NET BundleTable.EnableOptimizations = true; New Bundling and Minification Support (ASP.NET 4.5 Series)
60
開發行動版網頁效能優化 (3) 啟用 Gzip 壓縮輸出 IIS 7 比較 大多數行動版瀏覽器皆支援 Gzip 解壓縮能力
解壓縮所消耗的 CPU 資源遠小於壓縮過程 IIS 7 啟用靜態內容壓縮 啟用動態內容壓縮 比較 jQuery KB (原始大小) jQuery min 102 KB (壓縮/最小化) jQuery min.gz 31 KB (Gzip 壓縮)
61
開發行動版網頁效能優化 (4) 快取處理 伺服器端快取 用戶端快取 ASP.NET 的 Cache 物件 HTTP 快取 DOM 快取
Cache-Control: max-age=3600, must-revalidate DOM 快取 var tables = $('table'); HTML5 離線應用程式 (applicationCache) HTML5 Web Storage (localStorage, sessionStorage) HTML5 Web SQL Database ( SQLite ) HTML5 IndexedDB CACHING TUTORIAL for Web Authors and Webmasters
62
開發行動版網頁效能優化 (5) 盡量使用 Ajax 取得動態資料 降低網路延遲 減少要求次數
使用 HTML5 的 XMLHttpRequest Level 2 取得執行進度 ( 如: 檔案上傳 ) 跨站要求 處理 arraybuffer (二進位資料) 讓 Mobile Web 更像 Mobile App！
63
開發行動版網頁效能優化 (6) 使用 Web Socket 即時、雙向、非同步訊息傳遞 讓 Client 與 Server 進行全雙工通訊
基於 HTTP 通訊協定 允許跨站要求
64
開發行動版網頁效能優化 (7) 使用 Web Worker 背景執行緒執行 處理長時間執行且消耗 CPU 的工作
讓 JavaScript 不影響網頁回應 Web Worker 無法操作 DOM 物件，也無法操作 window 或 document 物件
65
開發行動版網頁效能優化 (8) 使用 CSS3 網頁特校 移動特校 (Transitions) 變形特校 (Transforms)
圓角框線 (Border Radius) 陰影效果 (Box Shadow) 優點 取代 JavaScript 動畫效果 會有更順暢的動畫執行效果 使用行動裝置上的 GPU 運算能力 (硬體加速)
66
開發行動版網頁效能優化 (9) 使用 Sprite 減少圖片下載次數 CSS Sprite Generator
ASP.NET Sprite and Image Optimization @Sprite.ImportStylesheet("~/App_Sprites/") @Sprite.Image("~/App_Sprites/video.png") NuGet Package of the Week #1 - ASP.NET Sprite and Image Optimization CSS Sprite Generator
67
開發行動版網頁效能優化 (10) 使用 Web Font 中文字形的問題 中文 Web Font 解決方案 減少特殊字型使用圖片替代的問題
字型檔過大 ( 5 ~ 30 MB ) 中文 Web Font 解決方案 使用少量的中文字形 使用線上的中文字形服務
68
開發行動版網頁效能優化 (11) 使用 Media Queries 畫面寬度 畫面高度 畫面方向 Portrait 直向
Landscape 橫向
69
開發行動版網頁效能優化 (12) 使用 CSS3 的 Selectors 更精準的控制特定元素的樣式
避免使用 JavaScript 動態修改元素樣式 讓 HTML 更乾淨、更加語意化
70
Notes(hidden) 除了您課程內容的投影片內容外，接下來的幾張投影片內容請務必全數保留。
請將您的課程內容與包含在課程内容中相關的資訊增加到接下來的幾張投影片中。
71
立即啟動！免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone
擁有 MSDN 訂閱 「取得代碼」後進行註冊 優惠內容: Windows Store / Windows Phone – 啟用後12個月, 完全免費！ Windows Azure – 訂閱期間, 每月固定的免費使用量！
Similar presentations
