Microformats, an overview
-
Upload
travis-isaacs -
Category
Technology
-
view
129 -
download
1
description
Transcript of Microformats, an overview
Travel Network User Experience | sabreux.com
Travis Isaacs @ CE University 8/22/07
microformats
Travel Network User Experience | sabreux.com 2
NOTE:Slides have been removed
due to confidential and proprietary content.
Travel Network User Experience | sabreux.com 3
traviswww.travisisaacs.com
Travel Network User Experience | sabreux.com
user experience team
travel network
4
Travel Network User Experience | sabreux.com 5
Me
JeremyStephenother dudes :)Jarek
Travel Network User Experience | sabreux.com
NEW!
2
Currently we have:
2x Resources in KRK3x Resources in DFW (including Stephen)1x Resource in the hiring process (estimated start date 9/17/07)
Stephen Anderson Jeremy Johnson Travis Isaacs
Jarek Glapski
Chuck Mallott
DFW
KRKNEW!
Jakub Pawlowicz
Chuck
Jakub
COMING SOON!
you?
sabreux.com/lookingforyou
Travel Network User Experience | sabreux.com
So, here is what we do:
We make t hings wo r k fo r peop l e .
6
Travel Network User Experience | sabreux.com
This includes:
Visual Design
Information Design
Information Architecture
Web and Application Interface Design (Interaction Design)
Design Research
Rich Interface Development
Expert Usability Evaluations
What we do...
- S tart with an understanding of users.
- Imagine what could be.
- Experiment through rapid prototyping.
- Encourage part icipat ion.
people.
7
Travel Network User Experience | sabreux.com
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences(People, Activities, Context)
Focused on
Tasks(Products, Features)
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without di!culty
Is available and accurate
Works as programmed
THIS IS THE “CHASM” THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS
Basic needs
User Experience
8
Travel Network User Experience | sabreux.com 9
sabreux.com
Travel Network User Experience | sabreux.com 10
Talk Nerdy To Me
Travel Network User Experience | sabreux.com 11
Skip the notes, There won’t be a quiz at
the end.
(plus, you can download the slides)
http://flickr.com/photos/captainmidnight/276782935/
Travel Network User Experience | sabreux.com http://flickr.com/photos/meyerweb/168554174/
Travel Network User Experience | sabreux.com 13
20+ billion pages
The web is BIG
Travel Network User Experience | sabreux.com 14
Problem: How do we extract content?
Travel Network User Experience | sabreux.com 14
Problem: How do we extract content?
http://www.slideshare.net/johnallsopp/microformats-at-web-20-expo-april-2007
Travel Network User Experience | sabreux.com 15
Pages
Elements
the internets
?
Travel Network User Experience | sabreux.com 16
Travel Network User Experience | sabreux.com 17
Paragraph
List
<h1> Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p><strong>average rating:</strong><img src=”5stars.jpg” alt=”5 stars”/ >
</p>
<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><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>
Title
Travel Network User Experience | sabreux.com
Paragraph
List
<h1> Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p><strong>average rating:</strong><img src=”5stars.jpg” alt=”5 stars”/ >
</p>
<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><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>
Title
18
Not very meaningful
Travel Network User Experience | sabreux.com 19
Pages
Elements
the internets
?
semantic HTMLelements
Travel Network User Experience | sabreux.com 20
Pages
Elements
Contentthe real semantic web
Travel Network User Experience | sabreux.com 21
Title
Rating
Image
Description
Features
Review
Travel Network User Experience | sabreux.com
sectionheaderfooternavarticleaside
figuredialogmarktimemeterprogress
videoaudiodetailsdatagridmenucommand
Close...but not semantic
HTML 5
Travel Network User Experience | sabreux.com http://flickr.com/photos/95721430@N00/312511913/
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
Travel Network User Experience | sabreux.com 24
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.
Travel Network User Experience | sabreux.com 25
...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/
Travel Network User Experience | sabreux.com 26
TODAY TOMORROW
http://flickr.com/photos/catski/1198675978/
Resource Description Framework (RDF)
Web Ontology Language (OWL)
XML
N3
Terse RDF Trip Language (Turtle)
N-Triple
XHTML
Travel Network User Experience | sabreux.com 27
How do we bridge the gap between today’s semantic web and the semantic
web of the future?
Travel Network User Experience | sabreux.com 28
Add semantics to today’s web using Microformats, rather than create a future web.
http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html
Travel Network User Experience | sabreux.com 29
“The lower-case semantic web”
http://www.pixelcharmer.com/photos/2003/Mar/09-1814.html
Travel Network User Experience | sabreux.com 30
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?
Travel Network User Experience | sabreux.com 31
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
Travel Network User Experience | sabreux.com
SPOILER ALERT
32
XHTML + Classes =
SPOILER ALERT
Travel Network User Experience | sabreux.com 33
hCalendarhCardhReviewhListinghAtomhResume
Compound microformats
rel-licenserel-nofollowrel-tagrel-directoryrel-enclosurerel-home
rel-paymentrobots exclusionxFolkvote linksXFNXMDP
XOXOgeoadr
Elemental microformats
Travel Network User Experience | sabreux.com 34
hCalendar
For distributed calendaring and events format, based on the iCalendar standard.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hCalendar
<div class="vevent"> <a class="url" href="http://sabreux.com/ceu"> <abbr class="dtstart" title="20070822T1500-0600">August 22th 3pm</abbr>, <abbr class="dtend" title="20070823T1600-0600"> 4pm 2007</abbr> — <span class="summary">CEU - Microformats</span>— at <span class="location">Building A</span> </a> <div class="description">
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.
Travel Network User Experience | sabreux.com 34
hCalendar
For distributed calendaring and events format, based on the iCalendar standard.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hCalendar
<div class="vevent"> <a class="url" href="http://sabreux.com/ceu"> <abbr class="dtstart" title="20070822T1500-0600">August 22th 3pm</abbr>, <abbr class="dtend" title="20070823T1600-0600"> 4pm 2007</abbr> — <span class="summary">CEU - Microformats</span>— at <span class="location">Building A</span> </a> <div class="description">
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.
Travel Network User Experience | sabreux.com 34
hCalendar
For distributed calendaring and events format, based on the iCalendar standard.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hCalendar
<div class="vevent"> <a class="url" href="http://sabreux.com/ceu"> <abbr class="dtstart" title="20070822T1500-0600">August 22th 3pm</abbr>, <abbr class="dtend" title="20070823T1600-0600"> 4pm 2007</abbr> — <span class="summary">CEU - Microformats</span>— at <span class="location">Building A</span> </a> <div class="description">
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.
Travel Network User Experience | sabreux.com 34
hCalendar
For distributed calendaring and events format, based on the iCalendar standard.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hCalendar
<div class="vevent"> <a class="url" href="http://sabreux.com/ceu"> <abbr class="dtstart" title="20070822T1500-0600">August 22th 3pm</abbr>, <abbr class="dtend" title="20070823T1600-0600"> 4pm 2007</abbr> — <span class="summary">CEU - Microformats</span>— at <span class="location">Building A</span> </a> <div class="description">
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.
Travel Network User Experience | sabreux.com 35
Travel Network User Experience | sabreux.com 36
Travel Network User Experience | sabreux.com
Operator Firefox Extensionhttp://www.kaply.com/weblog/
Operator lets you combine pieces of information on Web sites with applications in ways that are useful.
Travel Network User Experience | sabreux.com 38
hCard
For representing people, companies, organizations, and places, using a 1:1 representation of vCard properties and values in semantic XHTML.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hCard
<div class="vcard"> <img src="travis.gif" alt="photo" class="photo"/>
<a class="url fn n" href="http://sabreux.com"> <span class="given-name">Travis</span><span class="additional-name">B.</span><span class="family-name">Isaacs</span>
</a><a class="email" href="mailto:[email protected]">
<div class="tel">682-605-5119</div><div class="org">Sabre Holdings</div><div class="adr">
<div class="street-address">3150 Sabre Drive
</div><span class="locality">Southlake</span>, <span class="region">TX</span>, <span class="postal-code">76092</span><span class="country-name">USA</span>
</div> </div>
Travis B. [email protected] - 605 - 5119
Sabre Holdings3150 Sabre DriveSouthlake, TX, 76092 USA
Travel Network User Experience | sabreux.com 39
Travel Network User Experience | sabreux.com 40
<div class=”hreview”><h1 class=”item fn”> Canon EOS 5D 12.8 MP Digital SLR Camera</h1><img src=”canon5d.jpg” alt=”camera body” /><p>
<strong>average rating:</strong><span class=”rating” title=”5”>
<img src=”5stars.gif” alt=”5 stars”/ ></span>
</p>
<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> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</li>
</ul></p>
</div>
hReview
For embedding reviews of products, services, businesses, events, etc.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hReview
Travel Network User Experience | sabreux.com 41
Travel Network User Experience | sabreux.com
Tails Export Firefox Extensionhttp://bordewolf.blogspot.com/
Travel Network User Experience | sabreux.com 43
Travel Network User Experience | sabreux.com 44
hListingBETA
Proposal for a distributed listing format.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hReview
<div class="hlisting hreview"> <h1> <a class="item fn permalink" href="http://travelocity.com/something/">Residence Inn by Marriott East Greenbush / Tech Valley</span> </h1> <span class="photo"> <img src="residence_inn.jpg" alt="Front of hotel" /> </span> <span class="rating" title="3"> <img src="3stars.gif" alt="3 stars" /> </span> <p class="description"> 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="location vcard adr"> <span class="street-address">1 Residence Inn Drive</span> <span class="locality">Latham</span> , <span class="region">NY</span> <span class="postal-code">12110</span> <span class="country">ISA</span> </div> <p> From <span class="price">$176/night</span> for a <span class="offer rent">Studio Room</span> </p></div>
Travel Network User Experience | sabreux.com 45
Travel Network User Experience | sabreux.com 46
hAtom
hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom syndication format.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hAtom
<div class="hfeed"> <div class="hentry posts" id="112993192128302715"> <strong class="entry-title entry-content"> Nelson's final prayer </strong> <span class="entry-content"> written on the night before Trafalgar:<blockquote>May the Great God, ... heart. </span> <div> <span class="byline">posted by <span class="author vcard"><span class="fn">Natalie</span></span> at <a rel="bookmark" href="2005_10_16_nataliesolent_archive.html#112993192128302715"> <abbr class="published" title="2005-10-24t09:49:00-00:00">9:49 PM</abbr></a> </span> </div> </div>
<div class="hentry posts" id="112993022840118939"> <strong class="heading content”>"I really, truly </strong> <span class="entry-content"> didn't go ... view. </span> <div> <span class="byline"> posted by <span class="author vcard"><span class="fn">Natalie</span></span> at <a rel="bookmark" href="2005_10_16_nataliesolent_archive.html#112993022840118939"> <abbr class="published" title="2005-10-24t09:49:00-00:00">9:28 pm</abbr></a> </span> </div> </div> </div>
Travel Network User Experience | sabreux.com 47
http://blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom/3
Travel Network User Experience | sabreux.com 48
hResume
For publishing resumes and CV’s.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hResume
<div class="hresume"> <h2>Summary</h2> <div class="summary"> I am a Dallas, TX based web designer specializing in elegant XHTML/CSS based web sites and no-nonsense usability. </div>
<h2>Professional Experience</h2><div class="vcalendar">
<div class="experience vevent vcard"><div class="htitle">
<span class="title">Sr. Web Designer</span><br/><span class="org">Sabre Holdings</span>
</div><div class="date_duration">
<abbr class="dtstart" title="2007-02-01">February 2007
</abbr> - <abbr class="dtend">Present</abbr>
</div><div class="description">
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>
Travel Network User Experience | sabreux.com 49
hResume
For publishing resumes and CV’s.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
microformats.org/wiki/hResume
<div class="hresume"> <h2>Summary</h2> <div class="summary"> I am a Dallas, TX based web designer specializing in elegant XHTML/CSS based web sites and no-nonsense usability. </div>
<h2>Professional Experience</h2><div class="vcalendar">
<div class="experience vevent vcard"><div class="htitle">
<span class="title">Sr. Web Designer</span><br/><span class="org">Sabre Holdings</span>
</div><div class="date_duration">
<abbr class="dtstart" title="2007-02-01">February 2007
</abbr> - <abbr class="dtend">Present</abbr>
</div><div class="description">
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>
SummaryContact info (hCard)Experience (hCalendar)Education (hCalendar)Skills (rel-tag)Affiliations (hCard)Publications
Travel Network User Experience | sabreux.com 50
Link based microformats:rel-licenserel-nofollowrel-tagrel-directoryrel-enclosurerel-homerel-paymentvote links
<a rel=”license” href=”http://creativecommons.org”>License info
</a>
Metadata attached to links using the rel or rev HTML attributes.
Rel attribute:Describes the relationship of the anchor specified by the href attribute to the current document1.
<a rel=”nofollow” href=”http://expedia.com”>Expedia
</a>
1: Microformats: Empowering Your Markup for Web 2.0: John Allsopp
<link rel=”stylesheet” href=”screen.css” media=”all” />
Travel Network User Experience | sabreux.com 51
friendship (at most one): friend, acquaintance
physical: met
professional:co-worker, colleague
XFN
XHTML Friends Network. Predates Microformats (started at SXSWi 2003). Describes the relationship between people.
Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.
http://gmpg.org/xfn/
geographical:co-resident, neighbor
family:child, parent, sibling, spouse
romantic:muse, crush, date, sweetheart
My site
Jeremy’s site
Stephen’s site
Relationshipfriend, co-worker, met
Relationshipfriend, co-worker, met
travisisaacs.com
poetpainter.com
jeremyjohnsononline.com
Travel Network User Experience | sabreux.comhttp://flickr.com/photos/jakobs/885151216/in/pool-mydesk/
Using Microformats In Your Markup
Travel Network User Experience | sabreux.com
<tr class="vcard" id=”carefree-getaway-travel”><td> <a class="fn org" href="details.php"
title="Click here to configure this agency">Carefree Getaway Travel
</a></td><td class="street-address">1528 Cat Mountain Trail</td><td class="locality">Keller</td><td class="region">TX</td><td class="country-name">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).
Travel Network User Experience | sabreux.com 54
hCalendar:hCard:
hReview:hResume:
hAtom:
http://microformats.org/code/hcalendar/creatorhttp://microformats.org/code/hcard/creatorhttp://microformats.org/code/hreview/creatorhttp://hresume.weblogswork.com/hresumecreator/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.
Travel Network User Experience | sabreux.com
Dreamweaver Extension:http://webstandards.org/action/dwtf/microformats
Adds all the functionality of online creators to your native environment.
Travel Network User Experience | sabreux.com
Many popular CMS’s, blogging tools, and development frameworks have Microformats baked in.
Travel Network User Experience | sabreux.com 57
What?» Microformats + XHTML = the semantic web (for today)
» The semantic web will help infer meaning from otherwise meaningless markup» Mashups» SEO» Aggregation» Content portability
So What?
» Add microformats to your old code (it’s easy)» Definitely include it in your new code
Now What?
Travel Network User Experience | sabreux.comhttp://flickr.com/photos/juanignaciosl/237734498/
Digging deeper
Travel Network User Experience | sabreux.com 59
Microformats: Empowering Your Markup for Web 2.0
John Allsopp
Travel Network User Experience | sabreux.com
del.icio.us/tbisaacs/microformats
Travel Network User Experience | sabreux.com
Thanks!