HTML5 and microformats for pragmatists

<HTML 5> & microformats for pragmatists Wojtek Zajac Kraków, 29.04.2010 r.

H! I’m Wojtek Zając. Some facts about me: • Since 2006 working for XHTMLized.com (earlier: freelance) • specialities: • web accessibility • high performance optimization • worked for: • Twitter • FOX • Threadless • O’Reilly • also… User Experience Designer, PlatformaKiwi.pl (startup) wojtek zajac • @theanxy • wojtekzajac.com

wojtek zajac • @theanxy • wojtekzajac.com

·A · } • Introduction M • New elements / attributes • XFN • Web Forms 2.0 • hCard • Use cases: • Accessibility (WAI-ARIA) • adr • Graphics (SVG/Canvas) • hCard • Multimedia (Video/Audio) • hCalendar • Geolocation • Web Workers wojtek zajac • @theanxy • wojtekzajac.com

R . T I W 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

·O !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 · Optional for 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

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

Even more elements • hgroup This album got <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> points in review. • output You’re <progress value="48" • meter max="91"> halfway through • progress reading this article. wojtek zajac • @theanxy • wojtekzajac.com

Changes • Links can contain block elements • <b>, <i>, <small> with changed semantics <a href=”#” class=”story”> <img src=”img.png” /> • <address> issues <h4>Title</h4> • <ol> attributes: start, reversed <p>Text description</p> </a> • contenteditable • data-* wojtek zajac • @theanxy • wojtekzajac.com

Web Forms 2.0 much better than Your Old HTML 4.01 Forms 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

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

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

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

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

Date, time <input type=”date”> O nly: <input type=”month”> <input type=”week”> <input type=”time”> <input type=”datetime”> wojtek zajac • @theanxy • wojtekzajac.com

Search Plays nic e with WA I-ARIA <input type="search" role=”search”> wojtek zajac • @theanxy • wojtekzajac.com

WAI-ARIA

WAI-ARIA Landmark Roles Landmark HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ 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) <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) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); }); 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 youtube.com <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

N / <video src=video.mp4 controls width=300 height=400 autobuffer poster=poster.jpg> loop alternative content </video> autoplay Opera, Chrome, Firefox: Ogg Theora <audio src=audio.mp3> alternative content Safari, Chrome: H.264 </audio> wojtek zajac • @theanxy • wojtekzajac.com

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

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

P 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

Pretty pr ecise. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com

G current location function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // not supported } } wojtek zajac • @theanxy • wojtekzajac.com

• JS threading • interface is not blocked • http://html5demos.com/worker wojtek zajac • @theanxy • wojtekzajac.com

When can I use HTML 5? • HTML 5 shiv  http://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com/ wojtek zajac • @theanxy • wojtekzajac.com

U R 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”>My profile</a> wojtek zajac • @theanxy • wojtekzajac.com

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

XFN: XHTML friends network <a href=“http://joe.com/” rel=“friend”>Joe’s website</a> wojtek zajac • @theanxy • wojtekzajac.com

XFN: XHTML friends network Relation? <a href=“http://joe.com/” rel=“friend”>Joe’s website</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

❶ wojtek zajac Use case: Extracting physical address from a website • @theanxy • wojtekzajac.com

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

❷ wojtek zajac Use case: Exporting business cards to the address book • @theanxy • wojtekzajac.com

❸ wojtek zajac Use case: Adding event to the calendar • @theanxy • wojtekzajac.com

Specifications hCalendar events information hCard contact information rel-license specifying the license rel-nofollow blocking link–crawling rel-tag marking up tags Drafts hAtom: syndicated content rel-enclosure hAudio: audio files rel-home hListing: listings / classifieds rel-payment hRecipe: recipes hResume: resumes hReview: reviews wojtek zajac • @theanxy • wojtekzajac.com

U R Microformats.org oﬃcial wiki http://microformats.org/wiki/Main_Page hCard generator http://microformats.org/code/hcard/creator hCalendar generator http://microformats.org/code/hcalendar/creator Optimus transformer http://microformatique.com/optimus/ Operator (Firefox plugin) https://addons.mozilla.org/en-US/ﬁrefox/addon/4106 Social Graph API http://codebits.eu/intra/s/session/79 wojtek zajac • @theanxy • wojtekzajac.com

Thanks! Questions? 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 and microformats for pragmatists

by Wojtek Zajac on Oct 07, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 13

Statistics

HTML5 and microformats for pragmatists Presentation Transcript

http://lanyrd.com	12
http://www.linkedin.com	1