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

·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


R
.
T I W

http://www.ﬂickr.com/photos/sprengben/4315145017/

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.”


·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">


·N !DOCTYPE ·

Optional for
XHTML 5

<!DOCTYPE html>
<html lang=“pl”>
<head>
<meta charset="utf-8">


DIV ID=“header”

DIV ID=“nav”

DIV CLASS=“article”

DIV ID=“sidebar”
DIV CLASS=“section”

DIV ID=“footer”


New structural elements

<header>
• header
• nav <nav>

• section <article>

• article <aside>
• aside <section>

• footer
<footer>


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.


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-*


Web Forms 2.0
much better than Your Old HTML 4.01 Forms


Placeholder text

<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>


E-mail address

<form>
<input type="email">
<input type="submit" value="Go">
</form>


Number input

<form>
<input type="number">
</form>


Web address

<form>
<input type="url">
</form>


Range

<form>
<input type="range" min=“1” max=“11” value=“9”>
</form>


Date, time

<input type=”date”> O nly:
<input type=”month”>
<input type=”week”>
<input type=”time”>
<input type=”datetime”>


Search

Plays nic
e with WA
I-ARIA

<input type="search" role=”search”>


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


role=”banner”
role=”search”

role=”main”

role=”main” role=”complementary”

role=”contentinfo”


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” />


<!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>



var rect = $(‘#myRect’);

rect.style.fill = ‘green’;

rect.onclick(funtion(){

alert(‘Witaj świecie!’);

});


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);

}


http://code.google.com/p/quake2-gwt-port/


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>


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>


http://media.chikuyonok.ru/ambilight/


P

~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-ﬂash


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


❶


❶ ❷


Pretty pr
ecise.
❶ ❷


G
current location

function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// not supported
}
}


• 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/

• Modernizr
http://modernizr.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/


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.”


Social Graph API
http://code.google.com/apis/socialgraph/


<a href=“http://facebook.com/jkowalski”>My profile</a>


Indentity consolidation

<a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a>


XFN:
XHTML friends network

<a href=“http://joe.com/” rel=“friend”>Joe’s website</a>


XFN:
XHTML friends network

Relation?

<a href=“http://joe.com/” rel=“friend”>Joe’s website</a>


· hCard ·

http://wojtekzajac.com/">
Wojtek
Zajac


· hCard ·

<div >
<a href="http://wojtekzajac.com/">
<span >Wojtek</span>
<span >Zajac</span>
</a>
</div>


· 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
Use case:
Extracting physical address
from a website

• @theanxy • wojtekzajac.com

wojtek zajac • • wojtekzajac.com

❷ wojtek zajac
Use case:
Exporting business cards
to the address book


❸
wojtek zajac
Use case:
Adding event
to the calendar


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


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


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

Recommended

Recommended

More Related Content

Featured

Featured (20)

HTML5 and microformats for pragmatists