Microformats at Web 2.0 Expo April 2007

microformats more than just promise more than just promise john allsopp - westciv web 2.0 expo Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

part I

web 2.0? really?

browsers 1.0

browsers 1.0

browsers are still little more than printers to the screen

what can we do with the data on a page other than read it?

imagine

being able to grab any contact details on a page, and add them to your address book

imagine

or being able to grab event details from a page, and add them to your calendar software

imagine

or display the location of a person, place, company, on an online map

browsers 2.0

Microformats enable this today - through extensions to Firefox like Operator

browsers 2.0

Microformats change the paradigm of browsers from information printers to “ information brokers ” (Read/Write Web) or “ information switchboards ” (Alex Faaborg, Mozilla)

search 1.0

We decide the general kind of page we want to read about

we search for one or more related keywords

the search engine returns a list of matches

we decide which of these matches to read

we read the page

search 2.0

what’s good

what sucks

what’s going on

who is that?

RDF versus ufs

enablers

by adding richer more meaningful semantics to web content, microformats enable much more intelligent search

part II

know your microformats

XHTML Friends Network (XFN)

XFN

What is it?

for marking up common professional and personal relationships with other people

XFN

How do I use it?

In a link to a blog or other site associated with a person, add one or more of the XFN keywords as the value of the rel attribute

XFN

<a href=” http://tantek.com ” rel=”colleague met friend” >Tantek Çelik</a>

Signifies that Tantek is a friend, a colleague and that I’ve met him.

XFN

Provides a set of possible values or “controlled vocabulary” for describing relationships.

several categories, including physical, professional, family, romantic

XFN

XFN Creator - http://gmpg.org/xfn/creator

WordPress - built into “add links”

Plug-ins for Bloxsom and MoveableType

DreamWeaver toolbar from WaSP

Styling XFN

microformats provide a framework for designers using CSS

XFN + CSS

The CSS attribute selector

a[rel~="met"}:after {

content: '*';

}

Tantek Çelik *

XFN + CSS

a[rel="friend"] {

background-image: url(...);

background-repeat: no-repeat;

background-position: center left;

padding-left: 32px;

color: #a8c90b;

}

Tantek Çelik *

XFN + CSS

Anyone see a problem?

XFN + CSS

It doesn’t work in IE6

hCard

What is it?

simple, open, distributed format for representing people, companies, organizations, and places

...

hCard

What is it?

1:1 representation of the properties and values of the vCard standard

hCard

How do you use it?

Add the semantics of vCard using the class design pattern .

Adds vCard’s field names as class values on any HTML element

hCard

<div>

<img src="img/thedude.jpg" alt="The Dude" />

<h2>

<a href=" http://www.lebowskifest.com ">

<span>Jeffrey</span>

<span>Lebowski</span>

</a>

</h2>

<h3>address</h3>

<div>

<div>123 Palm Drive</div>

<span>Los Angeles</span>,

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

<a href="mailto...">thedude@urban...com</a>

</div>

compound microformats have a root element. hCard root elements have the class value “vcard”

hCard

<div class=”vcard” >

<h2>

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

<a href="mailto...">thedude@urban...com</a>

</div>

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

<a href=" mailto ...">thedude@urban...com</a>

</div>

Names Formatted names and (optional) structured names

hCard

<div class="vcard">

<h2>

<a class= "fn n" href=" http://www.....com ">

<span class="given-name" >Jeffrey</span>

<span class="family-name" >Lebowski</span>

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

hCard

<div class="vcard">

<h2>

<a class= "fn n" href=" http://www.....com ">

<span class="given-name">Jeffrey</span>

<span class="family-name">Lebowski</span>

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

URLs and Photos class=”photo” class=”url”

hCard

<div class="vcard">

<img src="img/thedude.jpg" ... class= " photo " />

<h2>

<a class= "fn n url " href=" http://www.....com ">

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

hCard

<div class="vcard">

<img src="img/thedude.jpg" ... class= "photo" />

<h2>

<a class= "fn n url" href=" http://www.....com ">

</a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>,

<span>123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

Addresses street-address locality region postal-code country-name

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div class="adr" >

<div class="street-address" >123 Palm Drive</div>

<span class="locality" >Los Angeles</span>,

<span class="region" >CA</span>,

<span class="postal-code" >123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div class="adr">

<div class="street-address">123 Palm Drive</div>

<span class="locality">Los Angeles</span>,

<span class="region">CA</span>,

<span class="postal-code">123456</span>

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div class="adr">

</div>

<h3>phone</h3>

<div>+1 (123) 456-7899</div>

<h3>email</h3>

</div>

newfangled stuff class=”email” class=”tel”

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div class="adr">

</div>

<h3>phone</h3>

<div class="tel" >+1 (123) 456-7899</div>

<h3>email</h3>

<a class="email" href=" mailto ...">...</a>

</div>

hCard

<div class="vcard">

<h2>

</a>

</h2>

<h3>address</h3>

<div class="adr">

</div>

<h3>phone</h3>

<div class="tel">+1 (123) 456-7899</div>

<h3>email</h3>

<a class="email" href=" mailto ...">...</a>

</div>

hCard

all sounds a bit hard?

hCard Creator

Dreamweaver toolbar

plugins for TextPattern and Wordpress

styling hCard with CSS

Every hCard provides a context for styling through the root element

We can use the .vcard class to select any element inside an hCard with the (much underused) descendent selector

styling hCard with CSS courtesy Dan Cederholm

div.vcard {

width: 26em;

margin: 0 auto;

padding: 2em 2em 3em 2em;

line-height: 1.5em;

border-top: 1px solid #fff;

background: url(img/bg.gif) no-repeat

bottom right;

}

courtesy Dan Cederholm

div.vcard img.photo {

float: right;

padding: 2px;

border: 4px double #d3d0c2;

background: #fff;

}

div.vcard h2 {

margin: 0 105px 1em 0;

padding: 6px 0 26px 0;

font-size: 140%;

font-weight: normal;

text-align: center;

color: #933;

border-top: 1px solid #d3d0c2;

background : url(img/ornament.gif) no-repeat 50% 100%;

}

div.vcard h2 a.url {

color: #933;

text-decoration: none;

}

/* heading labels */

div.vcard h3 {

float: left;

width: 6em;

margin: 0;

padding: 0;

font-family: "Lucida Grande", Verdana, sans-serif;

font-size: 70%;

font-weight: normal;

text-transform: uppercase;

letter-spacing: 2px;

text-align: right;

color: #999;

}

div.vcard div.adr {

background: url(img/icon-adr.gif) no-repeat 1px 3px;

}

div.vcard div.tel {

background: url(img/icon-phone.gif) no-repeat 1px 3px;

}

div.vcard a.email {

display: block;

background: url(img/icon-email.gif) no-repeat 0 3px;

}

hCard for Designers

Microformats provide structured data that designers can use for styling with CSS

hCalendar

What is it?

simple, open, distributed calendaring and events format, based on the iCalendar standard

hCalendar

How do you use it?

Add the semantics of iCalendar using the class design pattern .

Adds iCalendar’s field names as class values on any HTML element

hReview

What is it?

simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in X/HTML

hReview

How do you use it?

Add common semantics for reviews using the class design pattern.

hReview

Reviews commonly have

item reviewed

date reviewed

reviewer

description

tags

but wait there’s more

Yahoo! Tech and Local mark up millions of reviews (editorial and user generated) using hResume

hAtom is the semantics of Atom in HTML

With it your page can be your feed

Magnolia provides every bookmark marked up with hAtom

hResume is a simple way of marking up Resumes

LinkedIn publishes every public profile using hResume - that’s 9 million + of them

with many more microformats under development, or waiting for you to find out about, or even develop

Part III

services using microformats

Technorati microformats search Indexes microformatted content supports hCard, hCalendar, hReview

Pingerati Notify Pingerati of new or changed microformatted content Other services can receive updates when content changes

aggregators

Edgio aggregates classifieds listing from across the web, including the hListing draft microformat

Revish aggregates reviews published using hReview, and combines them with reviews by users of their site

Part IV

publishers using microformats

Flickr Geo microformat

Yahoo! Tech hReview, hCard

Upcoming hCalendar, hCard

LinkedIN hCard, hResume

Ma.gnolia every page is an hAtom feed every bookmark is an hAtom entry uses rel-tag for tagging uses hCard for contacts their website IS their API

Part V

what you can do right now

Markup your contact details (company, individuals) using hCard

Mark up news using hAtom

Markup events you run or attend using hCalendar

use rel-tag for tagging content on your site

markup your locations using GEO

More?

microformats.org

the book

Thank you

[email_address]

http://microformatique.com

Microformats at Web 2.0 Expo April 2007

1 comments

Notes on slide 1

36 Favorites & 3 Groups