1. Microformats

    What the Hell Are They and Why Should I Care?

    Ryan King

    Technorati, Microformats.org, USF

  2. History

    A Brief History of the Web, Abridged

    [any material that should appear in print but not on the slide]

  3. Principles

    The Microformats Principles

    [any material that should appear in print but not on the slide]

  4. Microformats Recycle

    [any material that should appear in print but not on the slide]

  5. rel-tag

  6. rel-tag Demo

    My post

    In this blog post, I have this code:

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

  7. rel-tag Demo

    Technorati Tag Page

    ...and on Technorati, we see this:

    Technorati Tag Page for USMNT

  8. rel-tag

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

  9. rel-tag

    Examples

    This slide just tries to illustrate how tagspaces and tags interact.

  10. rel-tag

    Publishers

    See the Microformats.org wiki for more info

  11. rel-tag

    Consumers

  12. rel-directory

    Purpose
    Distributed directory building
    Example
    <a rel="directory" href="http://dmoz.org/Computers">

  13. rel-tag + rel-directory

    Example

  14. XFN

  15. XFN

    Demo Time!

  16. XFN

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

  17. Selected XFN Properties

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

  18. XFN

    Producers

  19. XFN

    But the coolest thing is...

    And it is cool....

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

  21. hCalendar

  22. hCalendar

    Demo Time!

    Demo 1:

  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

    Demo Time!

    Demo Steps:

    1. Go to the hcalendar creator
    2. Create and event.
    3. Post it on your blog
    4. Run this bookmarklet to extract an iCal file

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

  29. hCard

    vCard Example

    1. <div class="vcard">
    2. <span class="fn n">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>

  30. Altogether now!

    More demo!

    The demo

    1. Go to this eventful.com page
    2. run this bookmarklet to get a iCal version of the event
    3. Add to iCal
    4. Realize that you don't remember where the event was
    5. Go back to this eventful.com page
    6. Run this bookmarklet to get the vCard of the venue
    7. Import the vCard into Address Book

  31. rel-license

  32. rel-license

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

  33. vote-links

  34. rel-license

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

  35. vote-links background

  36. vote-links properties

  37. hReview

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

  38. hReview example

    An example review of this event

    1. <div class="hreview">
    2. <h2 class="summary">Awesome.</h2>
    3. <abbr class="dtreviewed" title="20050925T1418-0700">Sep 25, 2005</abbr>
    4. by <span class="reviewer fn">ryan king</span>
    5. <span class="type">event</span>
    6. <a href="http://webzine2005.com" class="item url">Webzine 2005</a>
    7. <span class="rating">5</span>
    8. </div>

  39. What's next?

  40. More info

  41. Colophon