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

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

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

http://www.abdulqabiz.com	9
http://accesibilidadenlaweb20.blogspot.com	8
http://explorcamp.pbwiki.com	5
http://www.slideshare.net	4
http://web2.pedagogicke.info	3
http://www.pedagogicke.org	2
http://gonnipanchivaalchu.blogspot.com	1
http://wildfire.gigya.com	1
http://inet.cmpnet.com	1

Microformats at Web 2.0 Expo April 2007

by johnallsopp on May 11, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 34

Statistics

Microformats at Web 2.0 Expo April 2007 — Presentation Transcript