Downloaded 26 times
<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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
R . T I W 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
·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
<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=
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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
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
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) <rect x="0" y="0" width=
Scalable Vector Graphics (SVG) <!DOCTYPE html> <html> <body> <svg width=
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=
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 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
http://media.chikuyonok.ru/ambilight/ wojtek zajac • @theanxy • wojtekzajac.com
P ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash 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-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
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
wojtek zajac • @theanxy • wojtekzajac.com
W W
• JS threading • interface is not blocked • http://html5demos.com/worker wojtek zajac • @theanxy • wojtekzajac.com
When can I use HTML 5? • 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
When can I use HTML 5? • 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
U R 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=
<a href=
Indentity consolidation <a href=
Indentity consolidation <a href=
XFN: XHTML friends network <a href=
XFN: XHTML friends network Relation? <a href=
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 • @theanxy • wojtekzajac.com wojtek zajac • • 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 • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
❸ wojtek zajac Use case: Adding event to the calendar • @theanxy • wojtekzajac.com
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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @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 official 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/firefox/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