Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
HTML5 and microformats for pragmatists
1. <HTML 5>
& microformats
for pragmatists
Wojtek Zajac Kraków, 29.04.2010 r.
2. 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
9. R
.
T I W
http://www.flickr.com/photos/sprengben/4315145017/
wojtek zajac • @theanxy • wojtekzajac.com
10. 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
18. New structural elements
<header>
• header
• nav <nav>
• section <article>
• article <aside>
• aside <section>
• footer
<footer>
wojtek zajac • @theanxy • wojtekzajac.com
19. 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
57. G
current location
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// not supported
}
}
wojtek zajac • @theanxy • wojtekzajac.com
60. • JS threading
• interface is not blocked
• http://html5demos.com/worker
wojtek zajac • @theanxy • wojtekzajac.com
61. 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
62. 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
63. 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
66. 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
67. Social Graph API
http://code.google.com/apis/socialgraph/
wojtek zajac • @theanxy • wojtekzajac.com
100. 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
101. 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