html5 and microformats for pragmatists
TRANSCRIPT
Wojtek Zajac Kraków, 29.04.2010 r.
<HTML 5>& microformatsfor pragmatists
H!!
• 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)
I’m Wojtek Zając. Some facts about me:
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
· A"#$%& ·
• Introduction
• New elements / attributes
• Web Forms 2.0
• Accessibility (WAI-ARIA)
• Graphics (SVG/Canvas)
• Multimedia (Video/Audio)
• Geolocation
• Web Workers } Microformats
wojtek zajac • @theanxy • wojtekzajac.com
• XFN
• hCard
• Use cases:
• adr
• hCard
• hCalendar
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/
Tim Berners-LeeDIRECTOR, 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
<!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
· O'% !DOCTYPE ·
<!DOCTYPE html><html lang=“pl”> <head> <meta charset="utf-8">
Optional for XHTML 5
wojtek zajac • @theanxy • wojtekzajac.com
· N#( !DOCTYPE ·
DIV ID=“header”
DIV ID=“nav”
DIV CLASS=“article”
DIV ID=“sidebar”
DIV ID=“footer”
DIV CLASS=“section”
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
• header• nav• section• article• aside• footer
New structural elements
wojtek zajac • @theanxy • wojtekzajac.com
• hgroup• details• summary• mark• time• output• meter• progress
This album got<meter value="5.2" min="0.0" max="10.0" low="5.0" high="7.5" optimum="9.0"> 7.4</meter> points in review.
You’re <progress value="48" max="91"> halfway through reading this article.
Even more elements
wojtek zajac • @theanxy • wojtekzajac.com
• Links can contain block elements
• <b>, <i>, <small> with changed semantics
• <address> issues
• <ol> attributes: start, reversed
• contenteditable
• data-*
Changes
<a href=”#” class=”story”> <img src=”img.png” /> <h4>Title</h4> <p>Text description</p></a>
wojtek zajac • @theanxy • wojtekzajac.com
Web Forms 2.0much better than Your Old HTML 4.01 Forms
<form> <input name="q" placeholder="Search Bookmarks and History"> <input type="submit" value="Search"></form>
Placeholder text
wojtek zajac • @theanxy • wojtekzajac.com
E-mail address
<form> <input type="email"> <input type="submit" value="Go"></form>
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="number"> <input type="submit" value="Go"></form>
Number input
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="url"> <input type="submit" value="Go"></form>
Web address
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"></form>
Range
wojtek zajac • @theanxy • wojtekzajac.com
Date, time
wojtek zajac • @theanxy • wojtekzajac.com
<input type=”date”><input type=”month”><input type=”week”><input type=”time”><input type=”datetime”>
Only:
Search
wojtek zajac • @theanxy • wojtekzajac.com
<input type="search" role=”search”>
Plays nice with WAI-ARIA
WAI-ARIA
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Landmark HTML 5 elementrole=”application” none
role=”banner” none
role=”complementary” <aside>
role=”contentinfo” <footer>
role=”main” none
role=”navigation” <nav>
role=”search” none
WAI-ARIA Landmark Roles
~ The Paciello Group
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
role=”banner”
role=”main”
role=”contentinfo”
role=”search”
role=”complementary”
role=”main”
SVG/C!"#!$
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
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
http://code.google.com/p/quake2-gwt-port/
V%&'(/A)&%(http://www.flickr.com/photos/sugu/145087521/
<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)$*&+youtube.com
<video src=video.mp4 width=300 height=400 poster=poster.jpg> alternative content</video>
wojtek zajac • @theanxy • wojtekzajac.com
N#( ,)$*&+ / ,#-&$*!.,
controls
autobuffer
loop
autoplay
Opera, Chrome, Firefox: Ogg Theora
Safari, Chrome: H.264
<audio src=audio.mp3> alternative content</audio>
http://media.chikuyonok.ru/ambilight/
wojtek zajac • @theanxy • wojtekzajac.com
P#/01/-&$.#
wojtek zajac • @theanxy • wojtekzajac.com
~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash
0%10%20%30%40%50%60%
70%
80%
90%
100%
Zużycie procesora
FlashHTML 5
P#/01/-&$.#
wojtek zajac • @theanxy • wojtekzajac.com
~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash
Geolocation
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
❶ ❷
Pretty precise.
function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // not supported }}
wojtek zajac • @theanxy • wojtekzajac.com
G!""#$%current location
wojtek zajac • @theanxy • wojtekzajac.com
W!"W#$%!$&
wojtek zajac • @theanxy • wojtekzajac.com
• JS threading
• interface is not blocked
• http://html5demos.com/worker
When can I use HTML 5?
• HTML 5 shiv
http://code.google.com/p/html5shiv/
• Modernizrhttp://modernizr.com/
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
wojtek zajac • @theanxy • wojtekzajac.com
When can I use HTML 5?
• HTML 5 shiv
http://code.google.com/p/html5shiv/
• Modernizrhttp://modernizr.com/
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
wojtek zajac • @theanxy • wojtekzajac.com
Useful Resources
http://www.alistapart.com/articles/previewo.tml5
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/html5-diff/
http://diveintohtml5.org
http://html5doctor.com
http://html5readiness.com/
A List Apart
W3C spec
HTML 5 differences
Dive into HTML 5
HTML 5 Doctor
HTML 5 Readiness
wojtek zajac • @theanxy • wojtekzajac.com
M%*+(,(+-!.$
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Microformatshttp://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”>My profile</a>
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>My profile</a>
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a>
Indentity consolidation
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a>
Indentity consolidation
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://joe.com/” rel=“friend”>Joe’s website</a>
XFN:XHTML friends network
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://joe.com/” rel=“friend”>Joe’s website</a>
Relation?
XFN:XHTML friends network
wojtek zajac • @theanxy • wojtekzajac.com
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
http://wojtekzajac.com/"> Wojtek Zajac
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
<div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a></div>
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
<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>
❶Use case:
Extracting physical addressfrom a website
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
❷wojtek zajac • @theanxy • wojtekzajac.com
Use case:
Exporting business cardsto the address book
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
Use case:
Adding eventto the calendar
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
wojtek zajac • @theanxy • wojtekzajac.com
Specifications
events informationcontact informationspecifying the licenseblocking link–crawlingmarking up tags
hCalendarhCard
rel-licenserel-nofollow
rel-tag
DraftshAtom: syndicated contenthAudio: audio fileshListing: listings / classifiedshRecipe: recipeshResume: resumeshReview: reviews
rel-enclosurerel-homerel-payment
wojtek zajac • @theanxy • wojtekzajac.com
http://microformats.org/wiki/Main_Page
http://microformats.org/code/hcard/creator
http://microformats.org/code/hcalendar/creator
http://microformatique.com/optimus/
https://addons.mozilla.org/en-US/firefox/addon/4106
http://codebits.eu/intra/s/session/79
Microformats.org official wiki
hCard generator
hCalendar generator
Optimus transformer
Operator (Firefox plugin)
Social Graph API
Useful Resources
Thanks!
This work is licensed under a Creative
Commons Attribution 3.0 Unported License
http://www.slideshare.net/wojciechzajac
Wojtek Zają[email protected]@theanxy
Questions?