Notes (hidden) 檔案請存成 Power Point 2010 可讀之格式 字體規範：中文字型請用微軟正黑體， 英文字型請用 Calibri
使用 HTML5 打造友善網頁 DEV305 黃保翕 ( Will 保哥 ) 技術總監 多奇數位創意有限公司 部落格：http://blog.miniasp.com/
語法變更、語意標籤、JavaScript APIs HTML5 有哪些新標準 語法變更、語意標籤、JavaScript APIs
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG 語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
DOCTYPE HTML 4.01 HTML5 嚴格標準模式 ( HTML 4 Strict ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 近似標準模式 ( HTML 4 Transitional ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 近似標準但支援框架模式 ( HTML 4 Frameset ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML5 只剩下一種模式且不支援框架 <!DOCTYPE html> 網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (1) http://www.microsoft.com/taiwan/WebsiteSpark/webworld/201112/development.htm
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 )
SVG 以標籤形式展示各種向量圖形 SVG 殘酷測試 各瀏覽器支援度 目前最新版：SVG 1.1 http://code.google.com/p/svgtorture/ http://localhost/svg/ A Simple SVG Demo All SVG Samples 各瀏覽器支援度 When can I use SVG?
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG 語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
版面標籤的使用變化 1 / 2 Yes, You Can Use HTML 5 Today! http://blogs.sitepoint.com/html-5-snapshot-2009/
版面標籤的使用變化 2 / 2 http://www.sitepoint.com/examples/html5_0709/basic-1.html 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>
HTML5 多媒體元素 audio [DEMO] video 播放音效 可提供多種聲音格式供瀏覽器選擇 包括完整 JS API 可對聲音進行播放控制 video 播放影片 [DEMO] [DEMO2] 包括完整 JS API 與 track 元素(顯示字幕)
HTML5 繪圖 / 外掛 canvas http://www.cuttherope.ie/ embed [ 載入 Flash 動畫 ] 非向量繪圖 / Pixel-based 許多 HTML5 Game 都是基於 canvas 進行開發 embed [ 載入 Flash 動畫 ] 載入第三方外掛內容 例如：Flash、Silverlight 各瀏覽器早就支援，直到 HTML5 才變成標準
HTML5 有哪些新標準 語法變更 新增標籤 JavaScript APIs 字元編碼宣告 DOCTYPE MathML 與 SVG 語意標籤 多媒體元素 繪圖 / 外掛 / UI 元素 JavaScript APIs
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 http://www.w3.org/TR/html5-diff/
國內有哪些 HTML5 網站 真實的案例分析
語意標籤 T客邦 http://www.techbang.com/ 永豐銀行信用卡服務網 http://card.sinopac.com/ 分析工具 HTML5 Outliner ( Google Chrome 外掛 ) https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo 看看【機器人】如何查看你的網頁內容 HTML 5 Outliner http://gsnedders.html5.org/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 http://code.google.com/p/h5o/ If you like this extension, please make a charitable donation to Ocean Voyages Institute (Project Kaisei) at http://www.ammado.com/community/112794
2D 繪圖技術 - Canvas LEXUS ALL NEW ES 大器天成 http://www.lexus.com.tw/event/2012ES/ Nvesto-全方位財經股市資訊網站 http://www.nvesto.com/ HTML 5 Outliner http://gsnedders.html5.org/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 http://code.google.com/p/h5o/ If you like this extension, please make a charitable donation to Ocean Voyages Institute (Project Kaisei) at http://www.ammado.com/community/112794
Responsive Web Design (RWD) HITCON 2012 台灣駭客年會 http://hitcon.org/2012/ Fandora.tw 藝術x攝影x設計 http://fandora.tw/
HTML5Shiv, Modernizr, Polyfills, 測試工具, …
HTML5shiv 網址 用途 示範 http://code.google.com/p/html5shiv/ 讓 IE6 ~ IE8 瀏覽器能支援 HTML5 新元素 包含支援網頁列印時的樣式能正確顯示 檔案大小僅 2,051 位元組 (2KB) 示範 http://www.iecss.com/print-protector/example_print_iepp.html IE Print Protector http://www.iecss.com/print-protector/ HTML5 測試在舊版 IE 開啟時的列印功能 http://www.iecss.com/print-protector/example_print_iepp.html
如何使用 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>
Modernizr (摩登家) 解構 modernizr.js http://modernizr.github.com/Modernizr/annotatedsource.html
Modernizr (摩登家) 網址: http://www.modernizr.com/ 用途與說明 網址: 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 http://modernizr.github.com/Modernizr/annotatedsource.html
Modernizr 的三大相容力 提高 HTML5 標籤與屬性的相容性 提高 JavaScript API 相容性 提高 CSS3 相容性 解構 modernizr.js http://modernizr.github.com/Modernizr/annotatedsource.html
Modernizr 如何做到 JS APIs 相容 透過簡單的判斷式 if (Modernizr.geolocation) { DoSomething(); } 透過提供完全相同的 JavaScript APIs HTML5 Cross Browser Polyfills
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、 支援 …… …… …… …… …… 很多很多 …… https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Modernizr 如何做到 CSS3 相容 透過修改 <html> 的 class 屬性來判斷 no-js js no-touch no-history multiplebgs boxshadow opacity no-cssanimations no-csscolumns ……
多重背景在不同瀏覽器下的呈現
透過 <html> 的 class 屬性判斷 多重背景圖片的 CSS3 語法 套用 Modernizr 之後的寫法
使用 HTML5 打造友善介面
使用 HTML5 表單優化輸入 <input type="url" /> <input type="email" /> <input type="tel" /> 測試頁面： http://html5friendly.azurewebsites.net/HTML5Form.html HTML5 Doctor CSS Reset http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
輸入網址 <input type="url">
輸入 Email 電子郵件地址 <input type="email">
輸入電話號碼 <input type="tel">
使用 HTML5 播放多媒體影音 <video> <audio> 使用 JavaScript 製作跨瀏覽器的播放介面 http://bit.ly/try_html5_video <audio> http://bit.ly/try_html5_audio 使用 JavaScript 製作跨瀏覽器的播放介面 video.js ( http://videojs.com/ ) 自訂外觀: http://videojs.com/docs/skins/ audio.js ( http://kolber.github.com/audiojs/ ) 自訂外觀: http://kolber.github.com/audiojs/demos/test5.html A Collection of 20 HTML5 Video Players http://www.net-kit.com/20-html5-video-players/ Building a custom HTML5 video player with CSS3 and jQuery http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
使用 HTML5 上傳檔案 XmlHttpRequest Level 2 Blob API 支援「傳輸進度」事件 可切割大型檔案 （透過 XHR 分批上傳） NEW TRICKS IN XMLHTTPREQUEST2 http://www.html5rocks.com/en/tutorials/file/xhr2/
使用「傳輸進度」事件 NEW TRICKS IN XMLHTTPREQUEST2 http://www.html5rocks.com/en/tutorials/file/xhr2/
使用「檔案分割」功能 NEW TRICKS IN XMLHTTPREQUEST2 http://www.html5rocks.com/en/tutorials/file/xhr2/ DEMO http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-example-slicingfiles
設計 RWD 網頁 RWD = Responsive Web Design RWD 可能的中文翻譯： 自適應網頁設計 回應式網頁設計 响应式网页设计 (大陸翻譯) RWD = 使用 CSS3 的 Media Query 語法 Responsive Design in 3 Steps http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
設計 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="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![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 http://code.google.com/p/css3-mediaqueries-js/ Respond.js https://github.com/scottjehl/Respond DEMO: http://www.uwgb.edu/webdev/
RWD 網頁設計 Tips (1) Responsive Images DEMO 5 Useful CSS Tricks for Responsive Design http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design DEMO http://webdesignerwall.com/demo/responsive-css-tricks/
RWD 網頁設計 Tips (2) Responsive Video 5 Useful CSS Tricks for Responsive Design http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design CSS: Elastic Videos http://webdesignerwall.com/tutorials/css-elastic-videos Videos styled with an intrinsic-ratio http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp
RWD 網頁設計 Tips (3) 相對數值 強迫斷字 Relative Margin Relative Font Size Relative Padding 強迫斷字 5 Useful CSS Tricks for Responsive Design http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design CSS: Elastic Videos http://webdesignerwall.com/tutorials/css-elastic-videos Videos styled with an intrinsic-ratio http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp CSS: Clearing Floats with Overflow http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
HTML5 行動版網頁模擬器
Windows Phone 7.5 (Mango) Windows Phone Emulator
Opera Mobile Emulator Opera Mobile Emulator DEMO 保德信投信行動版網站 http://m.pru.com.tw
Mobilizer Mobilizer (要先安裝 Adobe Air)
線上模擬器 iPhone 4 Simulator - Test iPhone Websites iPhone Web Apps http://iphone4simulator.com/
RWD 線上檢測工具 檢測工具 DEMO Responsive Design Bookmarklet Resizer // A responsive design bookmarklet DEMO HITCON 2012 台灣駭客年會 http://hitcon.org/2012/ Walt Disney World Resort http://m.disneyworld.disney.go.cohm/ Watercraft & Boats | BRP Sea-Doo http://m.sea-doo.com/
HTML5 行動版網頁效能調校
行動版網站效能提升 主要的困難點 可能的解決方案 現今唯一公認的方案 不同的作業系統平台 不同的硬體支援程度 不同的螢幕大小尺寸 提供一個抽象的中間層架構 現今唯一公認的方案 HTML5
開發行動版網頁 HTML5 的兩種開發模式 效能瓶頸 執行於行動裝置的瀏覽器內 執行於原生 App 並置入 "瀏覽器元件" 透過 JavaScript 呼叫行動裝置原生的 APIs 效能瓶頸 需較多 CPU 資源的應用來說 HTML5 性能較差 但這取決於你用了多少 HTML5 提供的性能
開發行動版網頁效能優化 (1) 使用非同步執行碼執行 defer async 定義於 HTML 4.01 規格 背景載入 JavaScript 延遲執行 JavaScript 指令碼 以同步方式執行，載入多個 defer 指令碼一樣會依序執行！ async 定義於 HTML5 規格 非同步執行 JavaScript 指令碼 以 non-blocking 方式執行！
非同步指令碼執行 正常載入 (在執行完後才繼續剖析網頁) 延遲載入 (在網頁剖析完成後開始執行) 非同步載入 (下載完成後立即開始執行) <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> 非同步指令碼執行 http://msdn.microsoft.com/zh-tw/library/ie/hh673524.aspx
非同步指令碼執行 JavaScript 執行順序圖示 示範執行速度：HTML5 非同步指令碼 Asynchronous and deferred JavaScript execution explained http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
開發行動版網頁效能優化 (2) 對你的 JavaScript 與 CSS 進行打包/壓縮 使用 ASP.NET 4.5 內建的打包/壓縮機制 打包 (Bundling) 壓縮 (Minification) 或稱 "最小化" 使用 ASP.NET 4.5 內建的打包/壓縮機制 定義打包 (Bundling) 策略 啟用打包/壓縮服務 web.config <compilation debug="true"> C# / .NET BundleTable.EnableOptimizations = true; http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc318097384 http://nuget.org/packages/microsoft.web.optimization New Bundling and Minification Support (ASP.NET 4.5 Series) http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx
開發行動版網頁效能優化 (3) 啟用 Gzip 壓縮輸出 IIS 7 比較 大多數行動版瀏覽器皆支援 Gzip 解壓縮能力 解壓縮所消耗的 CPU 資源遠小於壓縮過程 IIS 7 啟用靜態內容壓縮 啟用動態內容壓縮 比較 jQuery 1.7.1 242 KB (原始大小) jQuery 1.7.1-min 102 KB (壓縮/最小化) jQuery 1.7.1-min.gz 31 KB (Gzip 壓縮)
開發行動版網頁效能優化 (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 http://www.mnot.net/cache_docs/
開發行動版網頁效能優化 (5) 盡量使用 Ajax 取得動態資料 降低網路延遲 減少要求次數 使用 HTML5 的 XMLHttpRequest Level 2 取得執行進度 ( 如: 檔案上傳 ) 跨站要求 處理 arraybuffer (二進位資料) 讓 Mobile Web 更像 Mobile App！
開發行動版網頁效能優化 (6) 使用 Web Socket 即時、雙向、非同步訊息傳遞 讓 Client 與 Server 進行全雙工通訊 基於 HTTP 通訊協定 允許跨站要求
開發行動版網頁效能優化 (7) 使用 Web Worker 背景執行緒執行 處理長時間執行且消耗 CPU 的工作 讓 JavaScript 不影響網頁回應 Web Worker 無法操作 DOM 物件，也無法操作 window 或 document 物件
開發行動版網頁效能優化 (8) 使用 CSS3 網頁特校 移動特校 (Transitions) 變形特校 (Transforms) 圓角框線 (Border Radius) 陰影效果 (Box Shadow) 優點 取代 JavaScript 動畫效果 會有更順暢的動畫執行效果 使用行動裝置上的 GPU 運算能力 (硬體加速)
開發行動版網頁效能優化 (9) 使用 Sprite 減少圖片下載次數 CSS Sprite Generator http://spritegen.website-performance.org/ 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 http://www.hanselman.com/blog/NuGetPackageOfTheWeek1ASPNETSpriteAndImageOptimization.aspx CSS Sprite Generator http://spritegen.website-performance.org/
開發行動版網頁效能優化 (10) 使用 Web Font 中文字形的問題 中文 Web Font 解決方案 減少特殊字型使用圖片替代的問題 字型檔過大 ( 5 ~ 30 MB ) 中文 Web Font 解決方案 使用少量的中文字形 使用線上的中文字形服務
開發行動版網頁效能優化 (11) 使用 Media Queries 畫面寬度 畫面高度 畫面方向 Portrait 直向 Landscape 橫向
開發行動版網頁效能優化 (12) 使用 CSS3 的 Selectors 更精準的控制特定元素的樣式 避免使用 JavaScript 動態修改元素樣式 讓 HTML 更乾淨、更加語意化
Notes(hidden) 除了您課程內容的投影片內容外，接下來的幾張投影片內容請務必全數保留。 請將您的課程內容與包含在課程内容中相關的資訊增加到接下來的幾張投影片中。
立即啟動！免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱 「取得代碼」後進行註冊 http://aka.ms/startmsdn 優惠內容: Windows Store / Windows Phone – 啟用後12個月, 完全免費！ Windows Azure – 訂閱期間, 每月固定的免費使用量！