Wha's New in HTML5

Eric ShangKuan Associate Developer Evangelist

• 上官林傑 (Eric ShangKuan) • ericsk / ericsk0313 • 學歷
• M.S., 台灣大學資訊工程系 (2004 ~ 2006) • B.S., 交通大學資訊科學系 (2000 ~ 2004) • 經歷 • 台灣微軟開發工具暨平台推廣處 (2011.03 ~ ) • Taipei GTUG (2009.08 ~ 2010.12) • 中華電信數據通信分公司 (2007.01 ~ 2011.02) • 專長 • Web, Mobile 以及 Cloud 應用程式開發 http://plurk.com/ericsk http://facebook.com/ericsk0313

演講大綱 • 什麼是 HTML5 • HTML5 新特色 • CSS3, Web
APIs • Microsoft 如何支援 HTML5 • 支援傳統的瀏覽器

什麼是 HTML5?

Web 標準演進史

HTML5 標準 • 起初由 WHATWG 組織制定新標準 • W3C已正式列入標準規格 – 目前於草稿階段
– http://www.w3.org/TR/html5/

W3C HTML5 標準（草稿） • Syntax • Tag Elements • Web
Form • DOM Interfaces • DOM Event

HTML5 新標籤 • article • aside • audio • canvas
• command • datalist • details • embed • figcaption • figure • footer • header • hgroup • keygen • mark • meter • nav • output • progress • rp • rt • ruby • section • source • summary • time • video • wbr

廣義的HTML5: 新網頁技術的統稱 • Semantic Tags – <article>, <section> • Multimedia
Tags – <canvas>, <video>, <audio> • Data attributes • WIA-ARIA • Web Forms 2.0 • CSS3 • ECMAScript 5 • Web APIs – Selector API – Geolocation API – Web Database/Storage – File API – Web Socket – …

一份標準的 HTML5 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的
HTML5 文件</title> <style>* {margin: 0; padding: 0}</style> </head> <body> <section> Hello, HTML5 </section> <script>document.write(new Date());</script> </body> </html>

使用 HTML5 新標籤做 Layout

透過 JavaScript 在網頁上畫圖 • 使用 <canvas> 標籤 • 特色： –
使用 JavaScript 畫圖 – Pixel-level 畫圖 – Canvas script 是一種向量圖形 • 但畫上 <canvas> 後就變成點陣圖 – 畫圖片需遵守 Same-Origin-Policy

<canvas> 範例 <canvas id="canvas" width="320" height="240"> 您的瀏覽器不支援 canvas </canvas> <script>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // background ctx.fillStyle = "rgba(192, 192, 192, 1)"; ctx.fillRect(0, 0, 320, 240); // box ctx.fillStyle = "rgba(255, 0, 0, 0.25)"; ctx.fillRect(10, 10, 50, 50); </script> 不支援時顯示

Sample: everytimezone.com

http://mugtug.com/sketchpad/

內嵌影片 • 使用 <video> 標籤 • 透過 JavaScript 控制嵌入的影片 •
瀏覽器支援的影片編碼格式: IE 9 Firefox 5 Safari 5 Opera 11 Chrome 12 H.264 (.mp4) O O O* VP8 (.webm) O O O Theora (.ogg) O O O • MS 釋出 Firefox/Chrome 擴充工具以支援 H.264 影片 http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin http://www.interoperabilitybridges.com/wmp-extension-for-chrome • Google 釋出工具使 IE9 支援 VP8/WebM http://tools.google.com/dlpage/webmmf

<video> 語法  <video poster="gakki.jpg" width="480" height="360" controls autoplay preload> <source src="gakki.mp4" type="video/mp4" /> <source src="gakki.webm" type="video/webm" /> <source src="gakki.ogv" type="video/ogg"/> 您的瀏覽器尚未支援 <video> </video>

內嵌音樂 • 與 <video> 同，標籤換成 <audio> • 一樣的瀏覽器編碼器支援的問題 IE 9+
Firefox 3.6+ Safari 5+ Opera 10.5+ Chrome 6+ MP3 O O O Vorbis (.ogg) O O O WAV O O O O

透過 JavaScript 控制 <video>/<audio> <script> var audio = document.getElementById("audio"); //
播放 audio.play(); // 暫停 audio.pause(); // 偵測可以播放的 MIME-TYPE, 若可則輸出 maybe, 否則為空字串 console.log(audio.canPlayType("audio/mpeg")); // 靜音 audio.muted = false; // 音量 0.0 ~ 1.0 audio.volume = 0.3; </script>

向量圖形 (SVG) 支援 • 使用 XML 描述圖形 • 可程式化 •
任意縮放大小而不失真 • 作為圖檔或是直接內嵌於 HTML 文件中 • 可以 CSS 設定樣式

<style> svg path { fill:
navy; } </style>  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.5 199.5"> <title>HTML5 CSS Styling Logo</title> <path d="M32.8,0L25.4,37.0 176.0,37.0 171.3,60.9 20.6,60.9 13.3,97.9 163.9,97.9 155.5,140.1 94.8,160.2 42.2,140.1 45.8,121.8 8.8,121.8 0,166.2 87.0,199.5 187.3,166.2 200.6,99.4 203.3,86.0 220.4,0z"/> </svg>

CSS3 是另一套標準 • 根據不同的樣式需要而分成不同模組 • 部份還在草稿階段，瀏覽器若率先實作時，會在屬性前加上前置字串： – IE: -ms-*
– Firefox (Gecko-based): -moz-* – Safari, Chrome (WebKit-based): -webkit-*

圓角框線 • 幾乎所有的瀏覽器都已直接支援語法 • 可以針對個角做設定順時針順序 #box {
width: 480px; height: 320px; border: 2px dashed #ccc; border-radius: 152px 304px 228px 152px; background-color: #ededed; }

顏色 • 除了 RGB 表示法，也增加 HSL 表示法 – 同樣支援透明度（alpha channel）
background: rgb(155, 100, 100); background: rgba(153, 134, 117, 0.2); background: hsl(320, 100%, 25%); background: hsla(165, 100%, 50%, 1.0);

• 針對瀏覽媒介而指定特定的樣式設定 – 如：行動裝置的小螢幕瀏覽器 @media screen and (min-width:
480px) and (max-width: 800px) { .foo { font-size: 12px; } }

轉換 • 可以針對頁面元素作旋轉、縮放、位移等轉換處理 div { -ms-transform:translate(200px, 100px) scale(.75, .75)
rotate(40deg); -ms-transform-origin:60% 100%; }

CSS3 漸層 • 純粹使用 CSS3 語法作出漸層圖片 • 可使用工具來產生對應的語法 .grad {
height: 50px; /* IE10 */ background-image: -ms-linear-gradient(top, #3399FF 0%, #66FFFF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #3399FF 0%, #66FFFF 100%); /* Opera */ background-image: -o-linear-gradient(top, #3399FF 0%, #66FFFF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, from(0, #3399FF), to(1, #66FFFF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #3399FF 0%, #66FFFF 100%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #3399FF 0%, #66FFFF 100%); }

CSS 多欄排版 • 可以設定 box 的欄位數、間隔、隔線等 • （目前）須依據瀏覽器的不同加上前置字串（IE不用加上 -ms） #mc-box
{ column-count: 4; column-gap: 20px; column-rule: 1px solid #bbb; -webkit-column-count: 4; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #bbb; -moz-column-count: 4; -moz-column-gap: 20px; -moz-column-rule: 1px solid #bbb; }

CSS3 浮動區塊 • 解決了不同區塊（block）在頁面上水平或垂直排版的問題。

CSS3 格子 (grid) 對齊 • 有點像表格（table），但是它比表格更有彈性 • 可以指定某個區塊佔有幾列（row）幾行（column）的大小，不必像表格那樣，使用
<td> 標籤只能有一列一行的大小 #myGrid { display: -ms-grid; -ms-grid-columns: auto 100px 1fr 2fr; -ms-grid-rows: 50px 5em auto; }

Web APIs

• 使用來選擇元素 • 也可以直接使用，也會利用該進行加速
var elems = document.querySelectorAll(".article > .meta"); var elem; for (elem in elems) { elem.innerHTML = "[selected] " + elem.innerHTML; }

Geolocation API • 取得用戶所在位置的經緯度座標 – 桌上瀏覽器：使用 IP 定位 – 手持裝置：使用
GPS 或 IP 定位 • 呼叫 API 時會請使用者確認是否授權 /* getCurrPosition 參數順序: 成功的 callback 失敗的 callback 設定選項 */ navigator.geolocation.getCurrentPosition(function(pos){ alert("Lat: " + pos.coords.latitude + ", Lng: " + pos.coords.longitude); }, function(error) { alert("Cannot locate"); }, {enableHighAccuracy: true});

離線資料存取 • 使用列表要求瀏覽器將需要的檔案快取下來，離線時仍可存取 • 綁定 domain • Web Storage:
– Key-value data • Web Database – Indexed DB

// 若 localStorage 內有 myData 的資料則用儲存過的,否則使用預設值 var myData = JSON.parse(localStorage['myData'])
|| { abc: '1234', def: 5678 }; myData.counter = myData.counter === undefined ? 1 : myData.counter + 1; // 使用 JSON.stringify 將物件轉成字串儲存至 localStorage 中的 myData localStorage['myData'] = JSON.stringify(myData); localStorage 內存的資料是字串，如果要放數字，取出時別忘了使用 parseInt 或 parseFloat 轉型

• 稍早之前的規格是採用 SQL-based DB • 目前已使用 Indexed DB 實作 •
IE 目前可透過外掛方式支援（稍後介紹）

漸進式支援 HTML5 標準 Site Ready HTML5 Invest on Interoperability Work
with Developers Innovate with Emerging Standards

微軟開發工具的支援 • ASP.NET MVC 3 Updates – 使用 HTML5 作
view templates – 提供 Modernizr 函式庫（稍後介紹） • Web Standards Updates for Microsoft Visual Studio 2010 SP1 – 新標籤、Web APIs 以及 CSS3 語法支援 • Expression Web 4 SP1 – HTML5 語法支援

傳統瀏覽器支援

手扶梯 vs. 電梯

舊瀏覽器支援新標籤 • 舊瀏覽器不認識新標籤，無法正確地顯示以及更改樣式 • 解法： <script> document.createElement("article"); document.createElement("section"); ...
</script> 或是

以<video>為例 <video poster="gakki.jpg" width="480" height="360" controls autoplay preload> <source src="gakki.mp4"
type="video/mp4" /> <source src="gakki.webm" type="video/webm" /> <source src="gakki.ogv" type="video/ogg"/> <object src="player.swf" type="application/x-shockwave-flash"> ... <param src="flashvars" src="{clip: gakki.flv}" > </object> </video>

以 border-radius 為例 • Use jquery-corner as a fallback jquery-corners:
http://jquery.malsup.com/corner/ <div id="hello">Hello, HTML5</div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var hello = $('#hello')[0]; if (!('borderRadius' in hello.style)) { $.getScript('jquery.corner.js', function(){ $(hello).corner("round 5px"); }); } </script>

• • 提供的介面，可以省去考慮作的力氣 • 判斷瀏覽器的能力 – 在
加上對應的 – 提供如 Modernizr.borderradius 來判斷是否支援特定屬性

Wha's New in HTML5

Wha's New in HTML5

More Decks by Eric Shangkuan

Other Decks in Programming

Featured

Transcript