Microformats, an overview

14,365 views

Published on

Presented at Travelocity.com's Customer Experience University: Microformats are a way to add human-readable data to your markup using simple XHTML. Set your content free! We'll walk through addiing XFN, hCard, hCalendar, hAtom, and other Microformats.

Published in: Technology, Business
8 Comments
68 Likes
Statistics
Notes
No Downloads
Views
Total views
14,365
On SlideShare
0
From Embeds
0
Number of Embeds
300
Actions
Shares
0
Downloads
707
Comments
8
Likes
68
Embeds 0
No embeds

No notes for slide

Microformats, an overview

  1. microformats Travis Isaacs @ CE University 8/22/07 Travel Network User Experience | sabreux.com
  2. NOTE: Slides have been removed due to confidential and proprietary content. 2 Travel Network User Experience | sabreux.com
  3. travis www.travisisaacs.com 3 Travel Network User Experience | sabreux.com
  4. user experience team travel network 4 Travel Network User Experience | sabreux.com
  5. 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
  6. 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
  7. - 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
  8. SUBJECTIVE / QUALITATIVE Focused on Experiences (People, Activities, Context) User Meaningful Experience Has personal significance 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 difficulty 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
  9. sabreux.com 9 Travel Network User Experience | sabreux.com
  10. Talk Nerdy To Me 10 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) 11 http://flickr.com/photos/captainmidnight/276782935/ Travel Network User Experience | sabreux.com
  12. Travel Network User Experience | sabreux.com http://flickr.com/photos/meyerweb/168554174/
  13. The web is BIG 20+ billion pages 13 Travel Network User Experience | sabreux.com
  14. Problem: How do we extract content? 14 Travel Network User Experience | sabreux.com
  15. 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
  16. rnets inte the Pages ? Elements 15 Travel Network User Experience | sabreux.com
  17. 16 Travel Network User Experience | sabreux.com
  18. <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
  19. <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
  20. rnets inte the Pages ? semantic HTML elements Elements 19 Travel Network User Experience | sabreux.com
  21. Pages the real semantic web Content Elements 20 Travel Network User Experience | sabreux.com
  22. Title Review Rating Image Description Features 21 Travel Network User Experience | sabreux.com
  23. 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
  24. 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/ Travel Network User Experience | sabreux.com 95721430@N00/312511913/
  25. 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
  26. ...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
  27. 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
  28. 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
  29. 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
  30. “The lower-case semantic web” http://www.pixelcharmer.com/photos/2003/Mar/09-1814.html 29 Travel Network User Experience | sabreux.com
  31. 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
  32. 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
  33. SPOILER ALERT XHTML + Classes = 32 Travel Network User Experience | sabreux.com
  34. 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
  35. <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> &mdash; iCalendar standard. <span class=quot;summaryquot;>CEU - Microformats</ span>&mdash; 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 Travel Network User Experience | sabreux.com
  36. <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> &mdash; iCalendar standard. <span class=quot;summaryquot;>CEU - Microformats</ span>&mdash; 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 Travel Network User Experience | sabreux.com
  37. <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> &mdash; iCalendar standard. <span class=quot;summaryquot;>CEU - Microformats</ span>&mdash; 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 Travel Network User Experience | sabreux.com
  38. <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> &mdash; iCalendar standard. <span class=quot;summaryquot;>CEU - Microformats</ span>&mdash; 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 Travel Network User Experience | sabreux.com
  39. 35 Travel Network User Experience | sabreux.com
  40. 36 Travel Network User Experience | sabreux.com
  41. 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
  42. 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> Suitable for embedding in XHTML, Atom, <div class=quot;telquot;>682-605-5119</div> RSS, and arbitrary XML. <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 Travel Network User Experience | sabreux.com
  43. 39 Travel Network User Experience | sabreux.com
  44. <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
  45. 41 Travel Network User Experience | sabreux.com
  46. Tails Export Firefox Extension http://bordewolf.blogspot.com/ Travel Network User Experience | sabreux.com
  47. 43 Travel Network User Experience | sabreux.com
  48. <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; /> Suitable for embedding in XHTML, Atom, </span> RSS, and arbitrary XML. <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 Travel Network User Experience | sabreux.com
  49. 45 Travel Network User Experience | sabreux.com
  50. <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> Suitable for embedding in XHTML, Atom, </div> RSS, and arbitrary XML. <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 Travel Network User Experience | sabreux.com
  51. http://blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom/3 47 Travel Network User Experience | sabreux.com
  52. <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;> Suitable for embedding in XHTML, Atom, <span class=quot;titlequot;>Sr. Web Designer</ RSS, and arbitrary XML. 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> <div class=quot;descriptionquot;> 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
  53. <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;> Suitable for embedding in XHTML, Atom, <span class=quot;titlequot;>Sr. Web Designer</ RSS, and arbitrary XML. 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> <div class=quot;descriptionquot;> 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
  54. 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
  55. 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
  56. Using Microformats In Your Markup Travel Network User Experience | sabreux.com http://flickr.com/photos/jakobs/885151216/in/pool-mydesk/
  57. <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). Travel Network User Experience | sabreux.com
  58. 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
  59. 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
  60. Many popular CMS’s, blogging tools, and development frameworks have Microformats baked in. Travel Network User Experience | sabreux.com
  61. 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
  62. Digging deeper Travel Network User Experience | sabreux.com http://flickr.com/photos/juanignaciosl/237734498/
  63. Microformats: Empowering Your Markup for Web 2.0 John Allsopp 59 Travel Network User Experience | sabreux.com
  64. del.icio.us/tbisaacs/microformats Travel Network User Experience | sabreux.com
  65. Thanks! Travel Network User Experience | sabreux.com

×