SlideShare a Scribd company logo

Microformats at Web 2.0 Expo April 2007

John Allsopp, profile picture
John Allsopp

The document discusses microformats and how they can be used to add semantic meaning to web content. It provides examples of hCard and XFN microformats. hCard allows people, organizations, and places to be represented in HTML using classes that map to vCard properties. XFN allows relationships between people to be specified using link attributes. By adding semantic structure, microformats enable more intelligent searching and access to contact details and events.

Economy & FinanceTechnology
1 of 91
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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
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~=&quot;met&quot;}:after { content: '*'; } Tantek Çelik *
XFN + CSS a[rel=&quot;friend&quot;] { 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
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=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot;mailto...&quot;>thedude@urban...com</a> </div> compound microformats have a root element. hCard root elements have the class value “vcard”
hCard <div class=”vcard” > <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot;mailto...&quot;>thedude@urban...com</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> Names Formatted names and (optional) structured names
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot; >Jeffrey</span> <span class=&quot;family-name&quot; >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=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> URLs and Photos class=”photo” class=”url”
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot; photo &quot; /> <h2> <a class= &quot;fn n url &quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> Addresses street-address locality region postal-code country-name
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot; > <div class=&quot;street-address&quot; >123 Palm Drive</div> <span class=&quot;locality&quot; >Los Angeles</span>, <span class=&quot;region&quot; >CA</span>, <span class=&quot;postal-code&quot; >123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div> newfangled stuff class=”email” class=”tel”
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div class=&quot;tel&quot; >+1 (123) 456-7899</div> <h3>email</h3> <a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</a> </div>
hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div class=&quot;tel&quot;>+1 (123) 456-7899</div> <h3>email</h3> <a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</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
styling hCard with CSS 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
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS div.vcard img.photo { float: right; padding: 2px; border: 4px double #d3d0c2; background: #fff; } courtesy Dan Cederholm
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS 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; } courtesy Dan Cederholm
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS /* heading labels */ div.vcard h3 { float: left; width: 6em; margin: 0; padding: 0; font-family: &quot;Lucida Grande&quot;, Verdana, sans-serif; font-size: 70%; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; text-align: right; color: #999; } courtesy Dan Cederholm
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS 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; } courtesy Dan Cederholm
styling hCard with CSS courtesy Dan Cederholm
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
but wait there’s more hAtom is the semantics of Atom in HTML With it your page can be your feed Magnolia provides every bookmark marked up with hAtom
but wait there’s more hResume is a simple way of marking up Resumes LinkedIn publishes every public profile using hResume - that’s 9 million + of them
but wait there’s more 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
what you can do right now Markup your contact details (company, individuals) using hCard
what you can do right now Mark up news using hAtom
what you can do right now Markup events you run or attend using hCalendar
what you can do right now use rel-tag for tagging content on your site
what you can do right now markup your locations using GEO
More? microformats.org
the book
Thank you [email_address] http://microformatique.com

More Related Content

PDF
Microformats HTML to API
elliando dias
 
PDF
creating portable social networks with microformats
elliando dias
 
PDF
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Jamie Indigo
 
PPT
Web 2.0 Lessonplan Day1
Jesse Thomas
 
PDF
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Onely
 
PPT
Html5 accessibility
Virginia DeBolt
 
PPT
What I brought back from Austin
Lisa Adkins
 
DOC
Jogos
lionleoo
 
Microformats HTML to API
elliando dias
 
creating portable social networks with microformats
elliando dias
 
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Jamie Indigo
 
Web 2.0 Lessonplan Day1
Jesse Thomas
 
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Onely
 
Html5 accessibility
Virginia DeBolt
 
What I brought back from Austin
Lisa Adkins
 
Jogos
lionleoo
 

What's hot (18)

PPT
WordPress Development Confoo 2010
Brendan Sera-Shriar
 
PDF
Findability Bliss Through Web Standards
Aarron Walter
 
PDF
Browser Changes That Will Impact SEO From 2019-2020
Tom Anthony
 
PPTX
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018
Mike Arnesen
 
PPTX
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
patrickstox
 
PPT
RDFa: The Semantic Web's Missing Link
Mark Birbeck
 
PPTX
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
patrickstox
 
PPT
(SEO) Search Engine Optimization
Digital Marketing Team Lead @ Startappz
 
PPTX
Enterprise SEO Chaos - SMX Advanced 2016
patrickstox
 
PDF
Debugging rendering problems at scale
Giacomo Zecchini
 
PPT
A Technical Look at Content - PUBCON SFIMA 2017 - Patrick Stox
patrickstox
 
PPTX
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
Distilled
 
PDF
Implementing schema.org in the JSON-LD format with Google Tag Manager
Eoghan Henn
 
PPTX
Structured Data & Schema.org - SMX Milan 2014
Bastian Grimm
 
PPTX
YQL talk at OHD Jakarta
Michael Smith Jr.
 
PPTX
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
patrickstox
 
PPTX
Data Visualization for SEO
Ahrefs
 
PDF
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
Sean Butcher
 
WordPress Development Confoo 2010
Brendan Sera-Shriar
 
Findability Bliss Through Web Standards
Aarron Walter
 
Browser Changes That Will Impact SEO From 2019-2020
Tom Anthony
 
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018
Mike Arnesen
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
patrickstox
 
RDFa: The Semantic Web's Missing Link
Mark Birbeck
 
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
patrickstox
 
(SEO) Search Engine Optimization
Digital Marketing Team Lead @ Startappz
 
Enterprise SEO Chaos - SMX Advanced 2016
patrickstox
 
Debugging rendering problems at scale
Giacomo Zecchini
 
A Technical Look at Content - PUBCON SFIMA 2017 - Patrick Stox
patrickstox
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
Distilled
 
Implementing schema.org in the JSON-LD format with Google Tag Manager
Eoghan Henn
 
Structured Data & Schema.org - SMX Milan 2014
Bastian Grimm
 
YQL talk at OHD Jakarta
Michael Smith Jr.
 
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
patrickstox
 
Data Visualization for SEO
Ahrefs
 
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
Sean Butcher
 
Ad

Viewers also liked (20)

DOCX
Refuerzo de espaã±ol 3 periodo
laia740
 
PPTX
Presentación martinez rangel thalia administración sab_b
Thalía Martínez Rangel
 
DOCX
Proyectos de inversion
Jonathan Almeida
 
PDF
El secreto arte secreto de llevarse mujeres a la cama - erik von markovik(...
artacaca
 
PDF
Incorporación de la Gestión de Tecnología como un área del conocimiento en la...
Academia de Ingeniería de México
 
PDF
Libro+2+tomo+i
fcoxaviercg
 
PPT
Punto 7. ISO 9000
Sandii Peña
 
PDF
Estructura Organizacional
matias vasquez
 
PPT
Taller mapeo de procesos
Edras Luna
 
PPTX
01 marco conceptual y procesos
Ruben Rodriguez
 
PDF
Hoe veilig is het werken in een verontreinigde bodem(compleet)_K.Hoogeboom_16...
Kelvin Hoogeboom
 
DOCX
Control
Leydi Maribel Villalobos Vasquez
 
PPT
Curso de Dirección de Proyectos
María Jesús Salido Rojo
 
PDF
Speciale 2. udgave
Iben Lindemark
 
DOCX
Iniciativa Anticorrupción
AMLO-MORENA
 
PDF
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
David Salomon Rojas Llaullipoma
 
PPTX
Pensamiento Critico
Jorge González Alonso
 
DOC
Estudio economico De Un Proyecto
Grupo 4 Señales y Sistema
 
PPT
Dinámica de la Población (PSU 2014)
saladehistoria.net
 
PDF
Creación de una Planta para el Mantenimiento y Procesamiento del Agua - Plani...
David Salomon Rojas Llaullipoma
 
Refuerzo de espaã±ol 3 periodo
laia740
 
Presentación martinez rangel thalia administración sab_b
Thalía Martínez Rangel
 
Proyectos de inversion
Jonathan Almeida
 
El secreto arte secreto de llevarse mujeres a la cama - erik von markovik(...
artacaca
 
Incorporación de la Gestión de Tecnología como un área del conocimiento en la...
Academia de Ingeniería de México
 
Libro+2+tomo+i
fcoxaviercg
 
Punto 7. ISO 9000
Sandii Peña
 
Estructura Organizacional
matias vasquez
 
Taller mapeo de procesos
Edras Luna
 
01 marco conceptual y procesos
Ruben Rodriguez
 
Hoe veilig is het werken in een verontreinigde bodem(compleet)_K.Hoogeboom_16...
Kelvin Hoogeboom
 
Control
Leydi Maribel Villalobos Vasquez
 
Curso de Dirección de Proyectos
María Jesús Salido Rojo
 
Speciale 2. udgave
Iben Lindemark
 
Iniciativa Anticorrupción
AMLO-MORENA
 
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
David Salomon Rojas Llaullipoma
 
Pensamiento Critico
Jorge González Alonso
 
Estudio economico De Un Proyecto
Grupo 4 Señales y Sistema
 
Dinámica de la Población (PSU 2014)
saladehistoria.net
 
Creación de una Planta para el Mantenimiento y Procesamiento del Agua - Plani...
David Salomon Rojas Llaullipoma
 
Ad

Similar to Microformats at Web 2.0 Expo April 2007 (20)

PDF
Microformats
Srini Rajaram
 
PPT
Hands-on Microformats
Denise Jacobs
 
PDF
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Aaron Gustafson
 
PDF
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
PDF
Web Standards: Fueling Innovation [Web Design World - Seattle 2009]
Aaron Gustafson
 
PPT
Scottish Web Folk: Three (5-minute) ways to improve your Website
Gareth Saunders
 
PPT
Microformats Workshop (2009)
Kelley Howell
 
PPT
Agile Descriptions
Tony Hammond
 
PPT
Microformats
Venkat Eswaran
 
PPT
Microformats
Venkat Eswaran
 
PPT
Microformats by venkat
Venkat Eswaran
 
PDF
Introduction to xml
srp24
 
PDF
Microformats I: What & Why
Rachael L Moore
 
PDF
Juggling
Casey Bradford
 
PPT
Microformats
Rafael Mumme
 
PPT
Microformats
Rae Allen
 
PDF
FOWA Miami: Future of Social Networks
brianoberkirch
 
PDF
BarCamp Sd Microformats
Joshua Brewer
 
PPT
Microformats
Aaron Grogg
 
PDF
[edUi] HTML5 Workshop
Christopher Schmitt
 
Microformats
Srini Rajaram
 
Hands-on Microformats
Denise Jacobs
 
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Aaron Gustafson
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
Web Standards: Fueling Innovation [Web Design World - Seattle 2009]
Aaron Gustafson
 
Scottish Web Folk: Three (5-minute) ways to improve your Website
Gareth Saunders
 
Microformats Workshop (2009)
Kelley Howell
 
Agile Descriptions
Tony Hammond
 
Microformats
Venkat Eswaran
 
Microformats
Venkat Eswaran
 
Microformats by venkat
Venkat Eswaran
 
Introduction to xml
srp24
 
Microformats I: What & Why
Rachael L Moore
 
Juggling
Casey Bradford
 
Microformats
Rafael Mumme
 
Microformats
Rae Allen
 
FOWA Miami: Future of Social Networks
brianoberkirch
 
BarCamp Sd Microformats
Joshua Brewer
 
Microformats
Aaron Grogg
 
[edUi] HTML5 Workshop
Christopher Schmitt
 

Recently uploaded (20)

PPTX
Module5_Session1 (mlzrkfbbbbbbbbbbbz1).pptx
emiledxpe
 
PPT
features and equilibrium under MONOPOLY 17.11.20.ppt
ruchisharma415837
 
PPTX
IGCSE ECONOMICS 0455 Foreign Exchange Rate
mahashahzad12345
 
PDF
Statistics for Management and Economics Keller 10th Edition by Gerald Keller ...
solutionsmanual3
 
PDF
NAPF_RESPONSE_TO_THE_PENSIONS_COMMISSION_8 _2_.pdf
Henry Tapper
 
PDF
Blockchain Pesa Research by Samuel Mefane
KatlehoMefane
 
PPT
Chap 1PP.ppt introductory micro economics
DeanMwaanga1
 
PDF
discourse-2025-02-building-a-trillion-dollar-dream.pdf
Shujjat Ahmed
 
PDF
Principal of magaement is good fundamentals in economics
rajgolder3
 
PPTX
ML Credit Scoring of Thin-File Borrowers
Deepa Shukla
 
PPTX
The discussion on the Economic in transportation .pptx
awanganiqkmal191
 
PPTX
Grp C.ppt presentation.pptx for Economics
EstaalBaluch
 
PDF
USS pension Report and Accounts 2025.pdf
Henry Tapper
 
PDF
Buy Verified Stripe Accounts for Sale - Secure and.pdf
qqb33647
 
DOCX
BUSINESS PERFORMANCE SITUATION AND PERFORMANCE EVALUATION OF FELIX HOTEL IN H...
lamluanvan.net Viết thuê luận văn
 
PPTX
introuction to banking- Types of Payment Methods
KhushiPeriwal
 
PDF
3CMT J.AFABLE Flexible-Learning ENTREPRENEURIAL MANAGEMENT.pdf
robinayo
 
PDF
CLIMATE CHANGE AS A THREAT MULTIPLIER: ASSESSING ITS IMPACT ON RESOURCE SCARC...
Igor Britchenko
 
PPTX
OAT_ORI_Fed Independence_August 2025.pptx
hiddenlevers
 
PDF
7a Lifetime Expected Income Breakeven Comparison between SPIAs and Managed Po...
Better Financial Education
 
Module5_Session1 (mlzrkfbbbbbbbbbbbz1).pptx
emiledxpe
 
features and equilibrium under MONOPOLY 17.11.20.ppt
ruchisharma415837
 
IGCSE ECONOMICS 0455 Foreign Exchange Rate
mahashahzad12345
 
Statistics for Management and Economics Keller 10th Edition by Gerald Keller ...
solutionsmanual3
 
NAPF_RESPONSE_TO_THE_PENSIONS_COMMISSION_8 _2_.pdf
Henry Tapper
 
Blockchain Pesa Research by Samuel Mefane
KatlehoMefane
 
Chap 1PP.ppt introductory micro economics
DeanMwaanga1
 
discourse-2025-02-building-a-trillion-dollar-dream.pdf
Shujjat Ahmed
 
Principal of magaement is good fundamentals in economics
rajgolder3
 
ML Credit Scoring of Thin-File Borrowers
Deepa Shukla
 
The discussion on the Economic in transportation .pptx
awanganiqkmal191
 
Grp C.ppt presentation.pptx for Economics
EstaalBaluch
 
USS pension Report and Accounts 2025.pdf
Henry Tapper
 
Buy Verified Stripe Accounts for Sale - Secure and.pdf
qqb33647
 
BUSINESS PERFORMANCE SITUATION AND PERFORMANCE EVALUATION OF FELIX HOTEL IN H...
lamluanvan.net Viết thuê luận văn
 
introuction to banking- Types of Payment Methods
KhushiPeriwal
 
3CMT J.AFABLE Flexible-Learning ENTREPRENEURIAL MANAGEMENT.pdf
robinayo
 
CLIMATE CHANGE AS A THREAT MULTIPLIER: ASSESSING ITS IMPACT ON RESOURCE SCARC...
Igor Britchenko
 
OAT_ORI_Fed Independence_August 2025.pptx
hiddenlevers
 
7a Lifetime Expected Income Breakeven Comparison between SPIAs and Managed Po...
Better Financial Education
 

Microformats at Web 2.0 Expo April 2007

  • 1. 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
  • 2. part I web 2.0? really?
  • 4. 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?
  • 5. imagine being able to grab any contact details on a page, and add them to your address book
  • 6.  
  • 7. imagine or being able to grab event details from a page, and add them to your calendar software
  • 8.  
  • 9. imagine or display the location of a person, place, company, on an online map
  • 10.  
  • 11. browsers 2.0 Microformats enable this today - through extensions to Firefox like Operator
  • 12. browsers 2.0 Microformats change the paradigm of browsers from information printers to “ information brokers ” (Read/Write Web) or “ information switchboards ” (Alex Faaborg, Mozilla)
  • 14. 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
  • 15. search 2.0 what’s good what sucks what’s going on who is that?
  • 18.  
  • 19. enablers by adding richer more meaningful semantics to web content, microformats enable much more intelligent search
  • 20. part II know your microformats
  • 22. XFN What is it? for marking up common professional and personal relationships with other people
  • 23. 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
  • 24. 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.
  • 25. XFN Provides a set of possible values or “controlled vocabulary” for describing relationships. several categories, including physical, professional, family, romantic
  • 26. XFN XFN Creator - http://gmpg.org/xfn/creator WordPress - built into “add links” Plug-ins for Bloxsom and MoveableType DreamWeaver toolbar from WaSP
  • 27. Styling XFN microformats provide a framework for designers using CSS
  • 28. XFN + CSS The CSS attribute selector a[rel~=&quot;met&quot;}:after { content: '*'; } Tantek Çelik *
  • 29. XFN + CSS a[rel=&quot;friend&quot;] { background-image: url(...); background-repeat: no-repeat; background-position: center left; padding-left: 32px; color: #a8c90b; } Tantek Çelik *
  • 30. XFN + CSS Anyone see a problem?
  • 31. XFN + CSS It doesn’t work in IE6
  • 32. hCard
  • 33. hCard What is it? simple, open, distributed format for representing people, companies, organizations, and places ...
  • 34. hCard What is it? 1:1 representation of the properties and values of the vCard standard
  • 35. 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
  • 36. hCard <div> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot;mailto...&quot;>thedude@urban...com</a> </div> compound microformats have a root element. hCard root elements have the class value “vcard”
  • 37. hCard <div class=”vcard” > <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot;mailto...&quot;>thedude@urban...com</a> </div>
  • 38. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a href=&quot; http://www.lebowskifest.com &quot;> <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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> Names Formatted names and (optional) structured names
  • 39. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot; >Jeffrey</span> <span class=&quot;family-name&quot; >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=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
  • 40. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> <h2> <a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> URLs and Photos class=”photo” class=”url”
  • 41. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot; photo &quot; /> <h2> <a class= &quot;fn n url &quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
  • 42. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>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=&quot; mailto ...&quot;>thedude@urban...com</a> </div> Addresses street-address locality region postal-code country-name
  • 43. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot; > <div class=&quot;street-address&quot; >123 Palm Drive</div> <span class=&quot;locality&quot; >Los Angeles</span>, <span class=&quot;region&quot; >CA</span>, <span class=&quot;postal-code&quot; >123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
  • 44. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div>
  • 45. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div>+1 (123) 456-7899</div> <h3>email</h3> <a href=&quot; mailto ...&quot;>thedude@urban...com</a> </div> newfangled stuff class=”email” class=”tel”
  • 46. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div class=&quot;tel&quot; >+1 (123) 456-7899</div> <h3>email</h3> <a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</a> </div>
  • 47. hCard <div class=&quot;vcard&quot;> <img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> <h2> <a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> <span class=&quot;given-name&quot;>Jeffrey</span> <span class=&quot;family-name&quot;>Lebowski</span> </a> </h2> <h3>address</h3> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>123 Palm Drive</div> <span class=&quot;locality&quot;>Los Angeles</span>, <span class=&quot;region&quot;>CA</span>, <span class=&quot;postal-code&quot;>123456</span> </div> <h3>phone</h3> <div class=&quot;tel&quot;>+1 (123) 456-7899</div> <h3>email</h3> <a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</a> </div>
  • 48. hCard all sounds a bit hard? hCard Creator Dreamweaver toolbar plugins for TextPattern and Wordpress
  • 49. 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
  • 50. styling hCard with CSS courtesy Dan Cederholm
  • 51. styling hCard with CSS 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
  • 52. styling hCard with CSS courtesy Dan Cederholm
  • 53. styling hCard with CSS div.vcard img.photo { float: right; padding: 2px; border: 4px double #d3d0c2; background: #fff; } courtesy Dan Cederholm
  • 54. styling hCard with CSS courtesy Dan Cederholm
  • 55. styling hCard with CSS 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; } courtesy Dan Cederholm
  • 56. styling hCard with CSS courtesy Dan Cederholm
  • 57. styling hCard with CSS /* heading labels */ div.vcard h3 { float: left; width: 6em; margin: 0; padding: 0; font-family: &quot;Lucida Grande&quot;, Verdana, sans-serif; font-size: 70%; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; text-align: right; color: #999; } courtesy Dan Cederholm
  • 58. styling hCard with CSS courtesy Dan Cederholm
  • 59. styling hCard with CSS 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; } courtesy Dan Cederholm
  • 60. styling hCard with CSS courtesy Dan Cederholm
  • 61. hCard for Designers Microformats provide structured data that designers can use for styling with CSS
  • 63. hCalendar What is it? simple, open, distributed calendaring and events format, based on the iCalendar standard
  • 64. 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
  • 66. hReview What is it? simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in X/HTML
  • 67. hReview How do you use it? Add common semantics for reviews using the class design pattern.
  • 68. hReview Reviews commonly have item reviewed date reviewed reviewer description tags
  • 69. but wait there’s more Yahoo! Tech and Local mark up millions of reviews (editorial and user generated) using hResume
  • 70. but wait there’s more hAtom is the semantics of Atom in HTML With it your page can be your feed Magnolia provides every bookmark marked up with hAtom
  • 71. but wait there’s more hResume is a simple way of marking up Resumes LinkedIn publishes every public profile using hResume - that’s 9 million + of them
  • 72. but wait there’s more with many more microformats under development, or waiting for you to find out about, or even develop
  • 73. Part III services using microformats
  • 74. Technorati microformats search Indexes microformatted content supports hCard, hCalendar, hReview
  • 75. Pingerati Notify Pingerati of new or changed microformatted content Other services can receive updates when content changes
  • 76. 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
  • 77. Part IV publishers using microformats
  • 82. 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
  • 83. Part V what you can do right now
  • 84. what you can do right now Markup your contact details (company, individuals) using hCard
  • 85. what you can do right now Mark up news using hAtom
  • 86. what you can do right now Markup events you run or attend using hCalendar
  • 87. what you can do right now use rel-tag for tagging content on your site
  • 88. what you can do right now markup your locations using GEO
  • 91. Thank you [email_address] http://microformatique.com