Microformats, an overview

Slide 1: microformats Travis Isaacs @ CE University 8/22/07 Travel Network User Experience | sabreux.com

Slide 2: NOTE: Slides have been removed due to confidential and proprietary content. 2 Travel Network User Experience | sabreux.com

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

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

Slide 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

Slide 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

Slide 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

Slide 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

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

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

Slide 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

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

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

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

Slide 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

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

Slide 17: 16 Travel Network User Experience | sabreux.com

Slide 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

Slide 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

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

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

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

Slide 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

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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

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

Slide 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

Slide 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

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

Slide 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

Slide 35: <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> &mdash; iCalendar standard. <span class=\"summary\">CEU - Microformats</ span>&mdash; 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

Slide 36: <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> &mdash; iCalendar standard. <span class=\"summary\">CEU - Microformats</ span>&mdash; 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

Slide 37: <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> &mdash; iCalendar standard. <span class=\"summary\">CEU - Microformats</ span>&mdash; 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

Slide 38: <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> &mdash; iCalendar standard. <span class=\"summary\">CEU - Microformats</ span>&mdash; 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

Slide 39: 35 Travel Network User Experience | sabreux.com

Slide 40: 36 Travel Network User Experience | sabreux.com

Slide 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

Slide 42: 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

Slide 43: 39 Travel Network User Experience | sabreux.com

Slide 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

Slide 45: 41 Travel Network User Experience | sabreux.com

Slide 46: