1. Microformats

    Ryan King

    Technorati

    Brian Suda

  2. http://theryanking.com/presentations/2006/refresh-edi/

  3. quick show of hands...

  4. What are microformats?

  5. What microformats are not.

  6. History

    A Brief History of the Web, Abridged

  7. Microformats Principles

  8. Examples

  9. rel-tag

  10. rel-tag

    In this blog post, we see:

    
<a rel="tag" href="http://technorati.com/tag/usmnt">USMNT</a>

  11. rel-tag

    Technorati Tag Page

    ...and on Technorati, we see this:

    Technorati Tag Page for USMNT

  12. rel-tag

    Purpose
    Allow authors to assign keywords to stuff.
    Format
    <a rel="tag" href="tagspace/tag">...</a>

  13. rel-tag

    Examples

  14. rel-tag

    Publishers

  15. rel-tag

    Consumers

  16. XFN

  17. XFN

    Purpose
    Distributed Social Networks
    Example
    <a rel="colleague met" href="http://tantek.com">Tantek Çelik</a>

  18. Selected XFN Properties

    These are just some of the XFN properties. The rest are available on the XFN profile page.

  19. XFN

    Producers

  20. But the coolest thing is...

    And it is cool....

  21. XFN

    Identity Reconciliation

    You can do this:

    <a href="http://43things.com/people/view/ryansking" 
      rel="me">43things</a>

    To tie your online identities together.

  22. hCalendar

  23. hCalendar

    Purpose
    Putting Event & Todo data on the web
    Example
    (next slide)

  24. hCalendar

    Example:iCal

    1. BEGIN:VCALENDAR
    2. BEGIN:VEVENT
    3. SUMMARY:Microformats: What the Hell Are They and Why Should I Care?
    4. DTSTART:20050926T000000Z
    5. LOCATION:Balder Room
    6. DTEND:20050926T010000Z
    7. DESCRIPTION:Ryan King will explain why microformats are important \
    8. and how you can mark up specific kinds of content in ways that make \
    9. it easier for the right people to find your stuff.
    10. END:VEVENT
    11. END:VCALENDAR

  25. hCalendar

    Example:hCalendar

    1. <div class="vcalendar">
    2. <div class="vevent">
    3. <div class="summary">Microformats: What the Hell Are They and Why Should I Care?</div>
    4. <abbr class="dtstart" title="20050926T050000-0700"> September 25th, 2005, 5PM</abbr>
    5. <abbr class="dtend" title="20050926T060000-0700">6PM</abbr>
    6. <div class="location">Balder Room</div>
    7. <div class="description">Ryan King will explain why microformats are important and how you can mark up specific kinds of content in ways that make it easier for the right people to find your stuff.</div>
    8. </div>
    9. </div>

  26. hCard

  27. hCard

    vCard Example

    1. BEGIN:VCARD
    2. N:king;ryan;;;
    3. FN:ryan king
    4. ORG:technorati;
    5. EMAIL;type=INTERNET;type=WORK;ryan@technorati.com
    6. END:VCARD

    This is a simple version of my own vCard, exported from Apple's Address book.

    Definitely machine readable only.

  28. hCard

    vCard Example

    1. <div class="vcard">
    2. <span class="fn">ryan king</span>
    3. <span class="org">technorati</span>
    4. <span class="email">
    5. <span class="type">work</span>
    6. <a class="value" href="mailto:ryan@technorati.com">ryan@technorati.com</a>
    7. </span>
    8. </div>

  29. rel-license

  30. rel-license

    Purpose
    To declare licenses for content
    Example
    <a rel="license"href="http://creativecommons.org/licenses/by-nc-sa/2.0/">

  31. vote-links

  32. rel-license

    Purpose
    To make links-as-votes explicit
    Example
    <a rev="vote-for" href="http://xtech.org">

  33. vote-links background

  34. vote-links properties

  35. hReview

    Purpose
    Publishing reviews of products, events, people, etc
    Example
    (next slide)

  36. hReview example

    An example review of this event

    1. <div class="hreview">
    2. <h2 class="summary">Awesome.</h2>
    3. <abbr class="dtreviewed" title="20060522T19:35+0100"> May 22, 2006</abbr>
    4. by <span class="reviewer">ryan king</span>
    5. <span class="type">event</span>
    6. <a href="http://refreshedinburgh.org/" class="item url"> XTech 2006</a>
    7. <span class="rating">5</span>
    8. </div>

  37. hAtom

  38. hAtom

    purpose
    syndication feeds in (X)HTML

  39. hAtom Example

    1. <ol class="hfeed">
    2. <li class="hentry">
    3. <h2 class="entry-title"><a href="..." rel="bookmark"> Adding Microformats to your site</a></h2>
    4. <div class="entry-content">
    5. Blah blah blah
    6. </div>
    7. <p>published <abbr class="published" title="2006-05-22T2000+0100"> today</abbr></p>
    8. </li>
    9. </ol>

  40. hResume

  41. hResume Example

    1. <body class="hresume">
    2. <p class="summary">I'm qualified!</p>
    3. <address class="vcard">
    4. <a class="fn email" href="mailto:ryan@theryanking.com">Ryan King</a>
    5. </address>
    6. <ol class="vcalendar">
    7. <li class="education vevent">...</li>
    8. <li class="experience vevent">...</li>
    9. </ol>
    10. <ol>
    11. <li><a rel="tag" class="skill" href="...">...</li>
    12. </ol>
    13. </body>

  42. more specifically...

    1. <li class="vevent exprience">
    2. <span class="summary">Intern</span>,
    3. <span class="location">Technorati</span>,
    4. <abbr class="dtstart" title="2005-05-25">May 2005</abbr> - present
    5. </li>
    7. <li class="vevent experience">
    8. <span class="summary vcard">
    9. <span class="title">Teachers Assistant</span>,
    10. <span class="org">University of San Francisco Computer Science Department</span>
    11. </span>
    12. <abbr class="dtstart" title="2005-02-01">February 2005</abbr> -
    13. <abbr class="dtend" title="2005-04-25">May 2005</abbr>
    14. </li>

  43. skills

    1. <li> <a rel="tag" href="http://en.wikipedia.org/wiki/C_Plus_Plus">C++</a> </li>
    2. <li> <a rel="tag" href="http://en.wikipedia.org/wiki/cobol"> <abbr title="COmmon Business Oriented Language">COBOL</acronym></a> </li>

  44. also..

  45. What's next?

  46. What's Next?

  47. http://microformats.org

  48. Credits

    some slides reused from:

  49. Colophon