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 Travel Network User Experience | sabreux.com

travis www.travisisaacs.com 3 Travel Network User Experience | sabreux.com

user experience team travel network 4 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

So, here is what we do: We ma k e t hings wo r k f o r p eop l e. 6 Travel Network User Experience | sabreux.com

- 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 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

sabreux.com 9 Travel Network User Experience | sabreux.com

Talk Nerdy To Me 10 Travel Network User Experience | sabreux.com

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

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

The web is BIG 20+ billion pages 13 Travel Network User Experience | sabreux.com

Problem: How do we extract content? 14 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

rnets inte the Pages ? Elements 15 Travel Network User Experience | sabreux.com

16 Travel Network User Experience | sabreux.com

<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 Travel Network User Experience | sabreux.com

<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 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> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</li> </ul> 18 Travel Network User Experience | sabreux.com

rnets inte the Pages ? semantic HTML elements Elements 19 Travel Network User Experience | sabreux.com

Pages the real semantic web Content Elements 20 Travel Network User Experience | sabreux.com

Title Review Rating Image Description Features 21 Travel Network User Experience | sabreux.com

HTML 5 section figure video header dialog audio footer mark details nav time datagrid article meter menu aside progress command Close... but not semantic Travel Network User Experience | sabreux.com

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/ Travel Network User Experience | sabreux.com 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 Travel Network User Experience | sabreux.com

...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 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

How do we bridge the gap between today’s semantic web and the semantic web of the future? 27 Travel Network User Experience | sabreux.com

Add semantics to today’s web using Microformats, rather than create a future web. http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html 28 Travel Network User Experience | sabreux.com

“The lower-case semantic web” http://www.pixelcharmer.com/photos/2003/Mar/09-1814.html 29 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

SPOILER ALERT XHTML + Classes = 32 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

<div class=\"vevent\"> hCalendar <a class=\"url\" href=\"http://sabreux.com/ceu\"> <abbr class=\"dtstart\" title=\"20070822T1500-0600\">August 22th 3pm</abbr>, For distributed calendaring and <abbr class=\"dtend\" title=\"20070823T1600-0600\"> events format, based on the 4pm 2007</abbr> — iCalendar standard. <span class=\"summary\">CEU - Microformats</ span>— at Suitable for embedding in XHTML, Atom, <span class=\"location\">Building A</span> RSS, and arbitrary XML. </a> <div class=\"description\"> 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 Travel Network User Experience | sabreux.com

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. Travel Network User Experience | sabreux.com

hCard <div class=\"vcard\"> <img src=\"travis.gif\" alt=\"photo\" class=\"photo\"/> <a class=\"url fn n\" href=\"http://sabreux.com\"> For representing people, <span class=\"given-name\">Travis</span> <span class=\"additional-name\">B.</span> companies, organizations, and <span class=\"family-name\">Isaacs</span> places, using a 1:1 </a> representation of vCard <a class=\"email\" properties and values in href=\"mailto:travis.isaacs@sabre.com\"> semantic XHTML. travis.isaacs@sabre.com </a> Suitable for embedding in XHTML, Atom, <div class=\"tel\">682-605-5119</div> RSS, and arbitrary XML. <div class=\"org\">Sabre Holdings</div> microformats.org/wiki/hCard <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. Isaacs Sabre Holdings travis.isaacs@sabre.com 3150 Sabre Drive 682 - 605 - 5119 Southlake, TX, 76092 USA 38 Travel Network User Experience | sabreux.com

<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, <strong>average rating:</strong> events, etc. <span class=”rating” title=”5”> Suitable for embedding in XHTML, Atom, <img src=”5stars.gif” alt=”5 stars”/ > RSS, and arbitrary XML. </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> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</li> </ul> </p> </div> 40 Travel Network User Experience | sabreux.com

Tails Export Firefox Extension http://bordewolf.blogspot.com/ Travel Network User Experience | sabreux.com

<div class=\"hlisting hreview\"> <h1> <a class=\"item fn permalink\" href=\"http:// travelocity.com/something/\">Residence Inn by Marriott East Greenbush / Tech Valley</span> BETA </h1> hListing <span class=\"photo\"> <img src=\"residence_inn.jpg\" alt=\"Front of hotel\" /> Proposal for a distributed </span> listing format. <span class=\"rating\" title=\"3\"> <img src=\"3stars.gif\" alt=\"3 stars\" /> Suitable for embedding in XHTML, Atom, </span> RSS, and arbitrary XML. <p class=\"description\"> 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=\"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> 44 Travel Network User Experience | sabreux.com

<div class=\"hfeed\"> <div class=\"hentry posts\" id=\"112993192128302715\"> <strong class=\"entry-title entry-content\"> Nelson's final prayer hAtom </strong> <span class=\"entry-content\"> 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=\"byline\">posted by <span class=\"author vcard\"><span class=\"fn\">Natalie</span></span> at primarily but not exclusively <a rel=\"bookmark\" weblog postings. hAtom is href=\"2005_10_16_nataliesolent_archive.html#112993192128302715\"> based on a subset of the Atom <abbr class=\"published\" title=\"2005-10-24t09:49:00-00:00\">9:49 PM</abbr></a> syndication format. </span> </div> Suitable for embedding in XHTML, Atom, </div> RSS, and arbitrary XML. <div class=\"hentry posts\" id=\"112993022840118939\"> microformats.org/wiki/hAtom <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> 46 Travel Network User Experience | sabreux.com

http://blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom/3 47 Travel Network User Experience | sabreux.com

<div class=\"hresume\"> <h2>Summary</h2> <div class=\"summary\"> 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=\"vcalendar\"> CV’s. <div class=\"experience vevent vcard\"> <div class=\"htitle\"> Suitable for embedding in XHTML, Atom, <span class=\"title\">Sr. Web Designer</ RSS, and arbitrary XML. span><br/> <span class=\"org\">Sabre Holdings</span> microformats.org/wiki/hResume </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> 48 Travel Network User Experience | sabreux.com

<div class=\"hresume\"> <h2>Summary</h2> <div class=\"summary\"> 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=\"vcalendar\"> CV’s. Contact info (hCard) <div class=\"experience vevent vcard\"> <div class=\"htitle\"> Suitable for embedding in XHTML, Atom, <span class=\"title\">Sr. Web Designer</ RSS, and arbitrary XML. Experience (hCalendar) span><br/> <span class=\"org\">Sabre Holdings</span> microformats.org/wiki/hResume </div> <div class=\"date_duration\"> Education (hCalendar) <abbr class=\"dtstart\" title=\"2007-02-01\"> February 2007 </abbr> - Skills (rel-tag) <abbr class=\"dtend\">Present</abbr> </div> <div class=\"description\"> 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 Travel Network User Experience | sabreux.com

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 Travel Network User Experience | sabreux.com

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 Suitable for embedding in XHTML, Atom, Stephen’s site RSS, and arbitrary XML. 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 Travel Network User Experience | sabreux.com

Using Microformats In Your Markup Travel Network User Experience | sabreux.com 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). Travel Network User Experience | sabreux.com

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

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 Travel Network User Experience | sabreux.com

Digging deeper Travel Network User Experience | sabreux.com http://flickr.com/photos/juanignaciosl/237734498/

Microformats: Empowering Your Markup for Web 2.0 John Allsopp 59 Travel Network User Experience | sabreux.com

del.icio.us/tbisaacs/microformats Travel Network User Experience | sabreux.com

Thanks! Travel Network User Experience | sabreux.com

Microformats, an overview

6 comments

Notes on slide 1

56 Favorites & 5 Groups