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.


traviswww.travisisaacs.com

http://www.travisisaacs.com

http://www.travisisaacs.com


user experience team

travel network

4


Me

JeremyStephenother dudes :)Jarek


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


So, here is what we do:

We make t hings wo r k fo r peop l e .

6


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


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


sabreux.com


Talk Nerdy To Me


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/

http://flickr.com/photos/meyerweb/168554174/

http://flickr.com/photos/meyerweb/168554174/


20+ billion pages

The web is BIG


Problem: How do we extract content?


Problem: How do we extract content?

http://www.slideshare.net/johnallsopp/microformats-at-web-20-expo-april-2007
















Pages

Elements

the internets

?



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


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>

Title

18

Not very meaningful


Pages

Elements

the internets

?

semantic HTMLelements


Pages

Elements

Contentthe real semantic web


Title

Rating

Image

Description

Features

Review


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

http://flickr.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.


...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/




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




How do we bridge the gap between today’s semantic web and the semantic

web of the future?


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

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




“The lower-case semantic web”

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




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?


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





SPOILER ALERT

32

XHTML + Classes =

SPOILER ALERT


hCalendarhCardhReviewhListinghAtomhResume

Compound microformats

rel-licenserel-nofollowrel-tagrel-directoryrel-enclosurerel-home

rel-paymentrobots exclusionxFolkvote linksXFNXMDP

XOXOgeoadr

Elemental microformats


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.

http://microformats.org/wiki/hCalendar


http://sabreux.com/ceu



hCalendar






</div>








hCalendar






</div>









hCalendar






</div>











Operator Firefox Extensionhttp://www.kaply.com/weblog/

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


hCard

For representing people, companies, organizations, and places, using a 1:1 representation of vCard properties and values in semantic XHTML.


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]">

[email protected]</a>

<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



http://sabreux.com/ux/img/mug-travis.gif

http://sabreux.com/ux/img/mug-travis.gif

http://sabreux.com

http://sabreux.com

mailto:[email protected]








<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></p>

</div>

hReview

For embedding reviews of products, services, businesses, events, etc.


microformats.org/wiki/hReview





Tails Export Firefox Extensionhttp://bordewolf.blogspot.com/

http://bordewolf.blogspot.com

http://bordewolf.blogspot.com



hListingBETA

Proposal for a distributed listing format.


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>



http://travelocity.com/something/






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.


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>




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




hResume

For publishing resumes and CV’s.


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>




hResume

For publishing resumes and CV’s.


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


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” />

http://creativecommons.org/licenses/by/2.5/







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.


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

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

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


<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).


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.

http://microformats.org/code/hcalendar/creator

http://microformats.org/code/hcalendar/creator

http://microformats.org/code/hcard/creator

http://microformats.org/code/hcard/creator

http://hresume.weblogswork.com/hresumecreator/

http://hresume.weblogswork.com/hresumecreator/

http://dichotomize.com/uf/hatom/creator.html

http://dichotomize.com/uf/hatom/creator.html


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)

» 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

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

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


Microformats: Empowering Your Markup for Web 2.0

John Allsopp


del.icio.us/tbisaacs/microformats

http://del.icio.us/tbisaacs/microformats

http://del.icio.us/tbisaacs/microformats


Thanks!

Microformats, an overview

Technology

experience sabr eux

original web

gap betweentodays semantic

meaningfulnew dslr category

todays web usingmicroformats

slides11 http

titlecanon eos

frame cmossensor