1. Microformats

    Introduction

    Ryan King

    Technorati, Microformats.org, USF

  2. Principles

    The Microformats Principles

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

  3. rel-tag

  4. rel-tag demo

    In this blog post, I have this markup:

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

  5. rel-tag Demo

    Technorati Tag Page

    ...and on Technorati, we see this:

    Technorati Tag Page for USMNT

  6. rel-tag

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

  7. rel-tag

    Examples

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

  8. rel-tag

    Publishers

    See the Microformats.org wiki for more info

  9. rel-tag

    Consumers

  10. rel-directory

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

  11. rel-tag + rel-directory

    Example

  12. hCalendar

  13. hCalendar

    Demo Time!

    Demo 1:

  14. hCalendar

    Purpose
    Putting Event & To-do data on the web
    Example
    (next slide)

  15. hCalendar

    Example:iCal

    1. BEGIN:VCALENDAR
    2. BEGIN:VEVENT
    3. SUMMARY:SD Forum Emerging Tech SIG: Microformats
    4. LOCATION:Cubberley Community Center - Palo Alto
    5. DTSTART:20060111T030000Z
    6. DTEND:20060111T050000Z
    7. URL:http://www.sdforum.org/SDForum/Templates/CalendarEvent.aspx?CID=1795
    8. DESCRIPTION:Designed for humans first and machines second, blah, blah blah
    9. END:VEVENT

  16. hCalendar

    Example:hCalendar

    1. <div class="vcalendar">
    2. <div class="vevent">
    3. <div class="summary">SD Forum Emerging Tech SIG: Microformats</div>
    4. <abbr class="dtstart" title="20060110T190000-0800"> January 10, 2006 7PM</abbr>
    5. <abbr class="dtend" title="20060110T210000-0800">9PM</abbr>
    6. <div class="location">Cubberley Community Center - Palo Alto</div>
    7. <div class="description">Designed for humans first and machines second, blah, blah blah...</div>
    8. </div>
    9. </div>

  17. hCard

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

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

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

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

  22. rel-license

  23. rel-license

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

  24. vote-links

  25. vote-links

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

  26. vote-links background

  27. vote-links examples

  28. hReview

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

  29. hReview example

    An example review of this event

    1. <div class="hreview">
    2. <h2 class="summary">Awesome.</h2>
    3. <abbr class="dtreviewed" title="20060111T1418-0700"> January 11, 2006</abbr>
    4. by <span class="reviewer fn">ryan king</span>
    5. <span class="type">event</span>
    6. <a href="http://www.sdforum.org/SDForum/Templates/CalendarEvent.aspx?CID=1795" class="item url">SDForum ETech SIG, January 2006</a>
    7. <span class="rating">5</span>
    8. </div>

  30. What's next?

  31. More info

  32. Colophon