Microformats, an overview

microformats
Travis Isaacs @ CE University 8/22/07

Travel Network User Experience | sabreux.com

NOTE:
Slides have been removed
due to confidential and proprietary
content.

2

travis www.travisisaacs.com

3

user experience
team
travel network

4

es in KRK
3x Resources in DF
W (inclu
1x Resource in the
hiring pr
Jeremy
Stephen
other dudes :)
DFW
Jarek

Me COMING SOON!

Stephen Anderson
Jeremy Johnson

KRK Chuck
NEW
!

Jarek Glapski
Jakub Pawlowicz
Jakub
Travel Network Us
er Experience | sabr
eux.com

you?

sabreux.com/lookingforyou

5

So, here is what we do:

We ma k e
t hings wo r k
f o r p eop l e.

6

- S tart with an
understanding of users.
people.
This inc
- Imagine what could be. Visual D
Informa
- Experiment through Informa
rapid prototyping.
Web an
Interfac
- Encourage participation. (Interac
Design
Rich Int
Develop
Expert U
Evaluat
7

SUBJECTIVE / QUALITATIVE

Focused on
Experiences
(People, Activities, Context)

User
Meaningful
Experience
Has personal signiﬁcance

Pleasurable
Memorable experience worth sharing

Convenient THIS IS THE “CHASM” THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Super easy to use, works like I think

Usable
Can be used without diﬃculty

Basic Reliable
needs
Is available and accurate

Functional (Useful)
Works as programmed

Focused on
Tasks
(Products, Features)
OBJECTIVE / QUANTIFIABLE

8

sabreux.com

9

Talk Nerdy To Me

10

Skip the notes,
There won’t
be a quiz at
the end.

(plus, you can download the slides)

11
http://flickr.com/photos/captainmidnight/276782935/

Travel Network User Experience | sabreux.com http://flickr.com/photos/meyerweb/168554174/

The web is BIG

20+ billion pages

13

Problem: How do we extract content?

14

Problem: How do we extract content?

7
-april-200
o
eb-20-exp
rmats-at-w
icrofo
/m
hnallsopp
t/jo
eshare.ne
www.slid
ttp://
h

14

rnets
inte
the

Pages

?

Elements

15

16

<h1>
Title Canon EOS 5D 12.8 MP Digital SLR Camera
</h1>

<p>
<strong>average rating:</strong>
<img src=”5stars.jpg” alt=”5 stars”/ >
</p>

Paragraph <img src=”canon5d.jpg” alt=”camera body” />

<p>The 12.8-megapixel Canon EOS 5D creates a
new D-SLR category, combining a full frame CMOS
sensor with a lightweight, compact magnesium-
alloy body.</p>

<ul>
List <li>35.8 x 23.9-millimeter CMOS sensor</li>
<li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>

17

<h1>
Title Canon EOS 5D 12.8 MP Digital SLR Camera
</h1>

<p>
<img src=”5stars.jpg” alt=”5 stars”/ >
</p>

Paragraph <img src=”canon5d.jpg” alt=”camera body” />

<p>The 12.8-megapixel Canon EOS 5D creates a
Not very meaningful
new D-SLR category, combining a full frame CMOS
sensor with a lightweight, compact magnesium-
alloy body.</p>

<ul>
List <li>35.8 x 23.9-millimeter CMOS sensor</li>
</ul>

18

rnets
inte
the

Pages

?

semantic HTML
elements
Elements

19

Pages

the real
semantic web
Content

Elements

20

Title
Review
Rating

Image

Description

Features

21

HTML 5

section figure video
header dialog audio
footer mark details
nav time datagrid
article meter menu
aside progress command

Close...
but not
semantic


The Semantic web:
“describe[s] the structure of the knowledge
we have about that content. In this way, a
machine can process knowledge itself,
instead of text, using processes similar to
human deductive reasoning and inference,
thereby obtaining more meaningful results
and facilitating automated information
gathering and research by computers”
-http://en.wikipedia.org/wiki/Semantic_Web

http://ﬂickr.com/photos/
95721430@N00/312511913/

The Semantic Web is about two things:
It is about common formats for integration and
combination of data drawn from diverse sources,
where on the original Web mainly concentrated on
the interchange of documents.

24

...It is also about language for recording how the
data relates to real world objects. That allows a
person, or a machine, to start off in one database, and
then move through an unending set of databases
which are connected not by wires but by being about
the same thing.

http://www.w3.org/2001/sw/

25

Resource Description N3
Framework (RDF)
Terse RDF Trip
XHTML Web Ontology Language Language (Turtle)
(OWL)
N-Triple
XML

TODAY TOMORROW

http://flickr.com/photos/catski/1198675978/

26

How do we bridge the gap between
today’s semantic web and the semantic
web of the future?
27

Add semantics to today’s web using
Microformats, rather than create a future web.

http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html

28

“The lower-case semantic web”

http://www.pixelcharmer.com/photos/2003/Mar/09-1814.html

29

From microformats.org

Designed for humans first, machines second,
microformats are a set of simple, open data
formats built upon existing and widely adopted
standards. Instead of throwing away what works
today, microformats intend to solve simpler
problems first by adapting to current behaviors and
usage patterns.
Sound
Familiar?

30

Microformats are not:

A new language

An attempt to get everyone to change their behavior and
rewrite their tools

A whole new approach that throws away what already
works today

http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html

31

SPOILER ALERT
XHTML + Classes =

32

rel-license rel-payment XOXO
hCalendar
rel-nofollow robots exclusion geo
hCard
rel-tag xFolk adr
hReview
rel-directory vote links
hListing
rel-enclosure XFN
hAtom
rel-home XMDP
hResume
Compound microformats Elemental microformats

33

<div class=quot;veventquot;>
hCalendar <a class=quot;urlquot; href=quot;http://sabreux.com/ceuquot;>
<abbr class=quot;dtstartquot;
title=quot;20070822T1500-0600quot;>August 22th 3pm</abbr>,
For distributed calendaring and <abbr class=quot;dtendquot; title=quot;20070823T1600-0600quot;>
events format, based on the 4pm 2007</abbr> —
iCalendar standard. <span class=quot;summaryquot;>CEU - Microformats</
span>— at
Suitable for embedding in XHTML, Atom,
<span class=quot;locationquot;>Building A</span>
RSS, and arbitrary XML.
</a>
<div class=quot;descriptionquot;>
microformats.org/wiki/hCalendar
Microformats are a way to add human-readable data
to your markup using simple XHTML. Set your content
free! We’ll walk through adding XFN, hCard,
hCalendar, hAtom, and other Microformats.
</div>
</div>

August 17, 2007 3— 4pm — CEU - Microformats— at Building B
Microformats are a way to add human-readable data to your markup
using simple XHTML. Set your content free! We’ll walk through adding
XFN, hCard, hCalendar, hAtom, and other Microformats.

34

35

36

Operator Firefox Extension
http://www.kaply.com/weblog/

Operator lets you combine pieces of information on Web sites with
applications in ways that are useful.


hCard <div class=quot;vcardquot;>
<img src=quot;travis.gifquot; alt=quot;photoquot; class=quot;photoquot;/>
<a class=quot;url fn nquot; href=quot;http://sabreux.comquot;>
For representing people, <span class=quot;given-namequot;>Travis</span>
<span class=quot;additional-namequot;>B.</span>
companies, organizations, and
<span class=quot;family-namequot;>Isaacs</span>
places, using a 1:1
</a>
representation of vCard
<a class=quot;emailquot;
properties and values in
href=quot;mailto:travis.isaacs@sabre.comquot;>
semantic XHTML.
travis.isaacs@sabre.com
</a>
<div class=quot;telquot;>682-605-5119</div>
<div class=quot;orgquot;>Sabre Holdings</div>
microformats.org/wiki/hCard
<div class=quot;adrquot;>
<div class=quot;street-addressquot;>
3150 Sabre Drive
</div>
<span class=quot;localityquot;>Southlake</span>,
<span class=quot;regionquot;>TX</span>,
<span class=quot;postal-codequot;>76092</span>
<span class=quot;country-namequot;>USA</span>
</div>
</div>
Travis B. Isaacs Sabre Holdings
travis.isaacs@sabre.com 3150 Sabre Drive
682 - 605 - 5119 Southlake, TX, 76092 USA

38

39

<div class=”hreview”>
hReview <h1 class=”item fn”>
Canon EOS 5D 12.8 MP Digital SLR Camera
</h1>
<img src=”canon5d.jpg” alt=”camera body” />
For embedding reviews of
<p>
products, services, businesses,
events, etc.
<span class=”rating” title=”5”>
<img src=”5stars.gif” alt=”5 stars”/ >
</span>
</p>
microformats.org/wiki/hReview

<p class=”description”>The 12.8-megapixel Canon EOS
5D creates a new D-SLR category, combining a full
frame CMOS sensor with a lightweight, compact
magnesium-alloy body.
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
</ul>
</p>
</div>

40

41

Tails Export Firefox Extension
http://bordewolf.blogspot.com/


43

<div class=quot;hlisting hreviewquot;>
<h1>
<a class=quot;item fn permalinkquot; href=quot;http://
travelocity.com/something/quot;>Residence Inn by Marriott
East Greenbush / Tech Valley</span>
BETA
</h1>
hListing <span class=quot;photoquot;>
<img src=quot;residence_inn.jpgquot; alt=quot;Front of
hotelquot; />
Proposal for a distributed
</span>
listing format.
<span class=quot;ratingquot; title=quot;3quot;>
<img src=quot;3stars.gifquot; alt=quot;3 starsquot; />
</span>
<p class=quot;descriptionquot;>
microformats.org/wiki/hReview
Newly built, located in the heart of the Albany
Capital District. The Residence Inn East Greenbush at
Tech Valley offers the perfect extended stay
experience!
</p>
<div class=quot;location vcard adrquot;>
<span class=quot;street-addressquot;>1 Residence Inn
Drive</span>
<span class=quot;localityquot;>Latham</span>
, <span class=quot;regionquot;>NY</span>
<span class=quot;postal-codequot;>12110</span>
<span class=quot;countryquot;>ISA</span>
</div>
<p>
From <span class=quot;pricequot;>$176/night</span> for a
<span class=quot;offer rentquot;>Studio Room</span>
</p>
</div>

44

45

<div class=quot;hfeedquot;>
<div class=quot;hentry postsquot; id=quot;112993192128302715quot;>
<strong class=quot;entry-title entry-contentquot;>
Nelson's final prayer
hAtom </strong>
<span class=quot;entry-contentquot;>
written on the night before Trafalgar:<blockquote>May the Great
God, ... heart.
</span>
hAtom is a microformat for <div>
content that can be syndicated, <span class=quot;bylinequot;>posted by <span class=quot;author vcardquot;><span
class=quot;fnquot;>Natalie</span></span> at
primarily but not exclusively
<a rel=quot;bookmarkquot;
weblog postings. hAtom is href=quot;2005_10_16_nataliesolent_archive.html#112993192128302715quot;>
based on a subset of the Atom <abbr class=quot;publishedquot; title=quot;2005-10-24t09:49:00-00:00quot;>9:49
PM</abbr></a>
syndication format.
</span>
</div>
</div>
<div class=quot;hentry postsquot; id=quot;112993022840118939quot;>
microformats.org/wiki/hAtom <strong class=quot;heading content”>quot;I really, truly </strong>
<span class=quot;entry-contentquot;>
didn't go ... view.
</span>
<div>
<span class=quot;bylinequot;>
posted by <span class=quot;author vcardquot;><span class=quot;fnquot;>Natalie</
span></span> at
<a rel=quot;bookmarkquot;
href=quot;2005_10_16_nataliesolent_archive.html#112993022840118939quot;>
<abbr class=quot;publishedquot; title=quot;2005-10-24t09:49:00-00:00quot;>9:28
pm</abbr></a>
</span>
</div>
</div>
</div>

46

http://blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom/3

47

<div class=quot;hresumequot;>
<h2>Summary</h2>
<div class=quot;summaryquot;>
I am a Dallas, TX based web designer specializing in
hResume elegant XHTML/CSS based web
sites and no-nonsense usability.
</div>
<h2>Professional Experience</h2>
For publishing resumes and
<div class=quot;vcalendarquot;>
CV’s.
<div class=quot;experience vevent vcardquot;>
<div class=quot;htitlequot;>
<span class=quot;titlequot;>Sr. Web Designer</
span><br/>
<span class=quot;orgquot;>Sabre Holdings</span>
microformats.org/wiki/hResume
</div>
<div class=quot;date_durationquot;>
<abbr class=quot;dtstartquot; title=quot;2007-02-01quot;>
February 2007
</abbr> -
<abbr class=quot;dtendquot;>Present</abbr>
</div>
As an Interaction Designer at Sabre I am able
to
apply my passion for information architecture,
visual design, and front-end development to
travel product used by travel agencies across
the globe.
</div>
</div>
</div>
</div>

48

<div class=quot;hresumequot;>
<h2>Summary</h2>
<div class=quot;summaryquot;>
I am a Dallas, TX based web designer specializing in
hResume elegant XHTML/CSS based web
sites and no-nonsense usability.

Summary </div>
<h2>Professional Experience</h2>
For publishing resumes and
<div class=quot;vcalendarquot;>
CV’s.
Contact info (hCard)
<div class=quot;experience vevent vcardquot;>
<div class=quot;htitlequot;>
<span class=quot;titlequot;>Sr. Web Designer</

Experience (hCalendar) span><br/>
<span class=quot;orgquot;>Sabre Holdings</span>
microformats.org/wiki/hResume
</div>
<div class=quot;date_durationquot;>
Education (hCalendar) <abbr class=quot;dtstartquot; title=quot;2007-02-01quot;>
February 2007
</abbr> -
Skills (rel-tag) <abbr class=quot;dtendquot;>Present</abbr>
</div>
Affiliations (hCard) As an Interaction Designer at Sabre I am able
to
apply my passion for information architecture,
Publications visual design, and front-end development to
travel product used by travel agencies across
the globe.
</div>
</div>
</div>
</div>

49

Link based microformats:
rel-license
Metadata attached to links using the rel or rev HTML
rel-nofollow
attributes.
rel-tag
Rel attribute:
rel-directory
Describes the relationship of the anchor specified by the
rel-enclosure
href attribute to the current document1.
rel-home
rel-payment
vote links
<link rel=”stylesheet” href=”screen.css” media=”all” />

<a rel=”license” href=”http://creativecommons.org”>
License info
</a>

<a rel=”nofollow” href=”http://expedia.com”>
Expedia
</a>

1: Microformats: Empowering Your Markup for Web 2.0: John Allsopp

50

Jeremy’s site
Relationship
friend, co-worker, met

XFN
My site jeremyjohnsononline.com

XHTML Friends Network.
Predates Microformats (started
at SXSWi 2003). Describes the
relationship between people.
travisisaacs.com
Stephen’s site

http://gmpg.org/xfn/
Relationship
friend, co-worker, met

poetpainter.com

friendship (at most one): geographical:
friend, acquaintance co-resident, neighbor

physical: family:
met child, parent, sibling, spouse

professional: romantic:
co-worker, colleague muse, crush, date, sweetheart

51

Using Microformats In Your Markup

http://flickr.com/photos/jakobs/885151216/in/pool-mydesk/

<tr class=quot;vcardquot; id=”carefree-getaway-travel”>
<td>
<a class=quot;fn orgquot; href=quot;details.phpquot;
title=quot;Click here to configure this agencyquot;>
Carefree Getaway Travel
</a>
</td>
<td class=quot;street-addressquot;>1528 Cat Mountain Trail</td>
<td class=quot;localityquot;>Keller</td>
<td class=quot;regionquot;>TX</td>
<td class=quot;country-namequot;>USA</td>
</tr>

Classes can be attached to anything (almost).

Remember that you don’t have to display all
elements (but keep them in there anyway).


hCalendar: http://microformats.org/code/hcalendar/creator
hCard: http://microformats.org/code/hcard/creator
hReview: http://microformats.org/code/hreview/creator
hResume: http://hresume.weblogswork.com/hresumecreator/
hAtom: http://dichotomize.com/uf/hatom/creator.html

Creators are great if you are starting from scratch
to make sure you have all the required classes.

54

Dreamweaver Extension:
http://webstandards.org/action/dwtf/microformats

Adds all the functionality of online creators to
your native environment.


Many popular CMS’s, blogging tools, and development
frameworks have Microformats baked in.


What?
Microformats + XHTML = the semantic web (for today)
»

So What?
The semantic web will help infer meaning from otherwise meaningless markup
»
» Mashups
» SEO
» Aggregation
» Content portability

Now What?
Add microformats to your old code (it’s easy)
»
Definitely include it in your new code
»

57

Digging deeper

http://flickr.com/photos/juanignaciosl/237734498/

Microformats:
Empowering Your Markup
for Web 2.0
John Allsopp

59

del.icio.us/tbisaacs/microformats


Thanks!


Microformats, an overview

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

More from Travis Isaacs

More from Travis Isaacs (7)

Recently uploaded

Recently uploaded (20)

Microformats, an overview