HTML5 i mikroformaty dla pragmatyków

<HTML 5> i mikroformaty dla pragmatyków Wojtek Zajac Kraków, 29.04.2010 r.

C ! Nazywam się Wojtek Zając. Kilka faktów: • od 2006 r. związany z XHTMLized.com (wcześniej: freelance) • specjalność: • audyty dostępności (web accessibility) • optymalizacja wydajności front-end • klienci: • Twitter • FOX • Threadless • O’Reilly • obecnie… User Experience Designer, PlatformaKiwi.pl wojtek zajac • @theanxy • wojtekzajac.com

wojtek zajac • @theanxy • wojtekzajac.com

·A · } • Wstęp M • Nowe elementy i atrybuty • XFN • Web Forms 2.0 • hCard • Przypadki użycia: • Dostępność (WAI-ARIA) • adr • Graﬁka (SVG/Canvas) • hCard • Multimedia (Video/Audio) • hCalendar • Geolokalizacja • Web Workers wojtek zajac • @theanxy • wojtekzajac.com

R . Ś I http://www.ﬂickr.com/photos/sprengben/4315145017/ wojtek zajac • @theanxy • wojtekzajac.com

Tim Berners-Lee DIRECTOR, WORLD WIDE WEB CONSORTIUM “The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.” wojtek zajac • @theanxy • wojtekzajac.com

·N !DOCTYPE · <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> wojtek zajac • @theanxy • wojtekzajac.com

·N !DOCTYPE · Opcjonalne dla XHTML 5 <!DOCTYPE html> <html lang=“pl”> <head> <meta charset="utf-8"> wojtek zajac • @theanxy • wojtekzajac.com

DIV ID=“header” DIV ID=“nav” DIV CLASS=“article” DIV ID=“sidebar” DIV CLASS=“section” DIV ID=“footer” wojtek zajac • @theanxy • wojtekzajac.com

<header> <nav> <article> <aside> <section> <footer> wojtek zajac • @theanxy • wojtekzajac.com

Nowe strukturalne elementy <header> • header • nav <nav> • section <article> • article <aside> • aside <section> • footer <footer> wojtek zajac • @theanxy • wojtekzajac.com

Więcej nowych elementów • hgroup Ten album uzyskał ocenę <meter value="5.2" • details min="0.0" max="10.0" • summary low="5.0" high="7.5" • mark optimum="9.0"> • time 7.4 </meter> w naszym teście. • output Jesteś <progress value="48" • meter max="91"> w połowie czytania • progress tego artykułu. wojtek zajac • @theanxy • wojtekzajac.com

Zmiany • blokowe linki! • <b>, <i>, <small> zmieniły znaczenie <a href=”#” class=”story”> <img src=”img.png” /> • <address> ma nową deﬁnicję <h4>Tytuł</h4> <p>Opis tekstowy</p> • atrybuty <ol>: start, reversed </a> • contenteditable • data-* wojtek zajac • @theanxy • wojtekzajac.com

Web Forms 2.0 poprawiona wersja formularzy z HTML 4.01 wojtek zajac • @theanxy • wojtekzajac.com

Placeholder text <form> <input name="q" placeholder="Search Bookmarks and History"> <input type="submit" value="Search"> </form> wojtek zajac • @theanxy • wojtekzajac.com

Adres e-mail <form> <input type="email"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com

Pole liczbowe <form> <input type="number"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com

Adres WWW <form> <input type="url"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com

Zakres <form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com

Czas <input type=”date”> Tylko: <input type=”month”> <input type=”week”> <input type=”time”> <input type=”datetime”> wojtek zajac • @theanxy • wojtekzajac.com

Wyszukiwanie Wspólgr a z WAI- ARIA! <input type="search" role=”search”> wojtek zajac • @theanxy • wojtekzajac.com

WAI-ARIA

WAI-ARIA Landmark Roles Landmark Element HTML 5 role=”application” brak role=”banner” brak role=”complementary” <aside> role=”contentinfo” <footer> role=”main” brak role=”navigation” <nav> role=”search” brak ~ The Paciello Group wojtek zajac • @theanxy • wojtekzajac.com

role=”banner” role=”search” role=”main” role=”main” role=”complementary” role=”contentinfo” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart” /> wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) <!DOCTYPE html> <html> <body> <svg width=”200” height=”200”> <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart” /> </svg> </body> </html> wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); wojtek zajac • @theanxy • wojtekzajac.com

Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); }); wojtek zajac • @theanxy • wojtekzajac.com

Canvas API wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); wojtek zajac • @theanxy • wojtekzajac.com

Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); } wojtek zajac • @theanxy • wojtekzajac.com

http://code.google.com/p/quake2-gwt-port/ wojtek zajac • @theanxy • wojtekzajac.com

V /A http://www.ﬂickr.com/photos/sugu/145087521/

S <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&" type="application/x-shockwave-flash" width="640" height="385"> </embed> </object> wojtek zajac • @theanxy • wojtekzajac.com

S <video src=video.mp4 controls width=300 height=400 autobuffer poster=okladka.jpg> loop Treść alternatywna tutaj </video> autoplay Opera, Chrome, Firefox: Ogg Theora <audio src=audio.mp3> Treść alternatywna tutaj Safari, Chrome: H.264 </audio> wojtek zajac • @theanxy • wojtekzajac.com

http://media.chikuyonok.ru/ambilight/ wojtek zajac • @theanxy • wojtekzajac.com

W ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-ﬂash wojtek zajac • @theanxy • wojtekzajac.com

W 100% 90% 80% 70% Zużycie procesora 60% 50% 40% 30% 20% 10% Flash 0% HTML 5 ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-ﬂash wojtek zajac • @theanxy • wojtekzajac.com

❶ wojtek zajac • @theanxy • wojtekzajac.com

❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com

Calkiem dokladn ❶ ❷ ie :) wojtek zajac • @theanxy • wojtekzajac.com

P obecnej lokacji function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // brak wsparcia } } wojtek zajac • @theanxy • wojtekzajac.com

• wątkowanie JS • interfejs nie jest blokowany • http://html5demos.com/worker wojtek zajac • @theanxy • wojtekzajac.com

Czy powinienem używać HTML 5 już dzisiaj? • HTML 5 shiv  http://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com/ wojtek zajac • @theanxy • wojtekzajac.com

P Z A List Apart http://www.alistapart.com/articles/previewo tml5 W3C spec http://dev.w3.org/html5/spec/Overview.html HTML 5 diﬀerences http://www.w3.org/TR/html5-diﬀ/ Dive into HTML 5 http://diveintohtml5.org HTML 5 Doctor http://html5doctor.com HTML 5 Readiness http://html5readiness.com/ wojtek zajac • @theanxy • wojtekzajac.com

Microformats http://microformats.org/about “Designed for humans ﬁrst and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” wojtek zajac • @theanxy • wojtekzajac.com

Social Graph API http://code.google.com/apis/socialgraph/ wojtek zajac • @theanxy • wojtekzajac.com

<a href=“http://facebook.com/jkowalski”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com

Indentity consolidation <a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com

XFN: XHTML friends network <a href=“http://franek.com/” rel=“friend”>Strona Franka</a> wojtek zajac • @theanxy • wojtekzajac.com

XFN: XHTML friends network Relacja? <a href=“http://franek.com/” rel=“friend”>Strona Franka</a> wojtek zajac • @theanxy • wojtekzajac.com

· hCard · http://wojtekzajac.com/"> Wojtek Zajac wojtek zajac • @theanxy • wojtekzajac.com

· hCard · <div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a> </div> wojtek zajac • @theanxy • wojtekzajac.com

· hCard · <div class=“vcard”> <a class=“fn n url” href="http://wojtekzajac.com/"> <span class=“given-name”>Wojtek</span> <span class=“family-name”>Zajac</span> </a> </div> wojtek zajac • @theanxy • wojtekzajac.com

❶ Przypadek użycia: Wykorzystanie adresu na stronie WWW wojtek zajac • @theanxy • wojtekzajac.com

wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com

❷ Przypadek użycia: Zapis wizytówek do książki adresowej wojtek zajac • @theanxy • wojtekzajac.com

❸ Przypadek użycia: Dodanie wydarzenia do kalendarza wojtek zajac • @theanxy • wojtekzajac.com

Specyﬁkacje hCalendar informacje o wydarzeniach hCard informacje o kontaktach rel-license oznaczanie licencji rel-nofollow ograniczanie podążania za linkami rel-tag tagi Szkice hAtom: treść aktualizowana rel-enclosure hAudio: pliki dźwiękowe rel-home hListing: ogłoszenia rel-payment hRecipe: przepisy hResume: publikowane CV hReview: recenzje wojtek zajac • @theanxy • wojtekzajac.com

Przydatne linki Wiki microformats.org http://microformats.org/wiki/Main_Page Generator hCard http://microformats.org/code/hcard/creator Generator hCalendar http://microformats.org/code/hcalendar/creator Optimus (transformer) http://microformatique.com/optimus/ Operator (plugin do Firefoksa) https://addons.mozilla.org/en-US/ﬁrefox/addon/4106 Social Graph API http://codebits.eu/intra/s/session/79 wojtek zajac • @theanxy • wojtekzajac.com

Dziękuję za uwagę. Pytania? http://www.slideshare.net/wojciechzajac Wojtek Zając wojtek@wojtekzajac.com This work is licensed under a Creative @theanxy Commons Attribution 3.0 Unported License

HTML5 i mikroformaty dla pragmatyków

by Wojtek Zajac

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 29

Statistics