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

· O'% !DOCTYPE ·

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

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”

<nav>

<aside>

<nav>

<aside>

<nav>

<aside>

• 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

Placeholder text

E-mail address

Number input

Web address

Range

Date, time

Only:

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

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>

<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

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/

type="application/x-shockwave-flash" width="640" height="385">

</embed>

</object>

S)$*&+youtube.com

http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&

<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

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

When can I use HTML 5?

• HTML 5 shiv

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

• Modernizrhttp://modernizr.com/

http://modernizr.com

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://dev.w3.org/html5/spec/Overview.html

http://www.w3.org/TR/html5-diff/

http://diveintohtml5.org/

http://html5doctor.com

http://html5readiness.com/

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

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

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

Relation?

XFN:XHTML friends network

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

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

Thanks!

This work is licensed under a Creative

Commons Attribution 3.0 Unported License

http://www.slideshare.net/wojciechzajac

Wojtek Zającwojtek@wojtekzajac.com@theanxy

Questions?

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

http://www.slideshare.net/wojciechzajac

mailto:wojtek@wojtekzajac.com

HTML5 and microformats for pragmatists

Technology

Microformats by venkat

HTML validation, microformats, jQuery

Machine learning and analytics for pragmatists

From Metadata to Microformats

Microformats and coding

Microformats hResume

Microformats & COinS

Plodders, Pragmatists, Visionaries and Opportunists

D3LDN17 - A Pragmatists Guide to DDoS Mitigation

BarCamp Sd Microformats

Semantic Coding and Microformats

Moving to the Pragmatists

Microformats HTML to API

Microformats nishikant-taksande

Dev2Dev - Microformats

Dreamers and Pragmatists: the story of xAPI

Data Feeds & Microformats

Microformats - online marketing meetup Sydney

Microformats And Seo Sempo Atl

Exploiting microformats for SEO purposes