HTML5 and microformats for pragmatists

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

http://twitter.com/theanxy


http://wojtekzajac.com/


· A"#$%& ·

• Introduction

• New elements / attributes

• Web Forms 2.0

• Accessibility (WAI-ARIA)

• Graphics (SVG/Canvas)

• Multimedia (Video/Audio)

• Geolocation

• Web Workers } Microformats


• XFN

• hCard

• Use cases:

• adr

• hCard

• hCalendar






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






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


· O'% !DOCTYPE ·

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml





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

Optional for XHTML 5


· N#( !DOCTYPE ·





DIV ID=“header”

DIV ID=“nav”

DIV CLASS=“article”

DIV ID=“sidebar”

DIV ID=“footer”

DIV CLASS=“section”






<header>

<nav>

<article>

<aside>

<footer>

<section>


• header• nav• section• article• aside• footer

New structural elements






• 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






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






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






E-mail address

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






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

Number input






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

Web address






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

Range






Date, time


<input type=”date”><input type=”month”><input type=”week”><input type=”time”><input type=”datetime”>

Only:





Search


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

Plays nice with WAI-ARIA





WAI-ARIA

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


http://www.paciellogroup.com/blog/?p=106

http://www.paciellogroup.com/blog/?p=106






role=”banner”

role=”main”

role=”contentinfo”

role=”search”

role=”complementary”

role=”main”





SVG/C!"#!$


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.flickr.com/photos/sugu/145087521/

<video src=video.mp4 width=300 height=400 poster=poster.jpg> alternative content</video>


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/








P#/01/-&$.#


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





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/-&$.#


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







Geolocation


❶






❶ ❷






❶ ❷

Pretty precise.





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


G!""#$%current location





W!"W#$%!$&


• JS threading

• interface is not blocked

• http://html5demos.com/worker





http://html5demos.com/worker

http://html5demos.com/worker

When can I use HTML 5?

• HTML 5 shiv

http://code.google.com/p/html5shiv/

• Modernizrhttp://modernizr.com/






http://modernizr.com

http://modernizr.com

http://html5shiv.googlecode.com/svn/trunk/html5.js

http://html5shiv.googlecode.com/svn/trunk/html5.js

When can I use HTML 5?

• HTML 5 shiv


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






http://diveintohtml5.org/

http://diveintohtml5.org/









M%*+(,(+-!.$


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





http://microformats.org/about

http://microformats.org/about


Social Graph API

http://code.google.com/apis/socialgraph/








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






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

Indentity consolidation






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

XFN:XHTML friends network





http://franek.com

http://franek.com


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

Relation?

XFN:XHTML friends network





http://franek.com

http://franek.com

http://franek.com


http://gmpg.org/xfn/creator








































































































































· hCard ·


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





http://www.csarven.ca


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







❶Use case:

Extracting physical addressfrom a website






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

Use case:

Adding eventto the calendar






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






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?

http://creativecommons.org/licenses/by/3.0/

http://creativecommons.org/licenses/by/3.0/



mailto:[email protected]

mailto:[email protected]

HTML5 and microformats for pragmatists

Technology

Transcript of HTML5 and microformats for pragmatists