Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Wojtek Zając, profile picture
Uploaded byWojtek Zając
1,297 views

HTML5 i mikroformaty dla pragmatyków

http://artbuzz.edu.pl/training/artbuzz-1/ Kraków AGH University of Science and Technology 29.04.2010 r.

Technology◦
Downloaded 72 times
<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 • Grafika (SVG/Canvas) • hCard • Multimedia (Video/Audio) • hCalendar • Geolokalizacja • Web Workers wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
R . Ś I http://www.flickr.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
<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ą definicję <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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
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
wojtek zajac • @theanxy • wojtekzajac.com
role=”banner” role=”search” role=”main” role=”main” role=”complementary” role=”contentinfo” wojtek zajac • @theanxy • wojtekzajac.com
SVG/C
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) <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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
http://code.google.com/p/quake2-gwt-port/ wojtek zajac • @theanxy • wojtekzajac.com
V /A http://www.flickr.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-flash 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-flash wojtek zajac • @theanxy • wojtekzajac.com
G
❶ wojtek zajac • @theanxy • wojtekzajac.com
❶ 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
wojtek zajac • @theanxy • wojtekzajac.com
W W
• 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 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> http://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com/ wojtek zajac • @theanxy • wojtekzajac.com
Czy powinienem używać HTML 5 już dzisiaj? • HTML 5 shiv <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> 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 differences http://www.w3.org/TR/html5-diff/ Dive into HTML 5 http://diveintohtml5.org HTML 5 Doctor http://html5doctor.com HTML 5 Readiness http://html5readiness.com/ wojtek zajac • @theanxy • wojtekzajac.com
M
wojtek zajac • @theanxy • wojtekzajac.com
Microformats http://microformats.org/about “Designed for humans first 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
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>Mój profil</a> 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
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
wojtek zajac • @theanxy • wojtekzajac.com