1. Microformats from the Ground Up

    Ryan King

    Technorati

    Brian Suda

  2. http://theryanking.com/presentations/2006/xtech/tutorial/

  3. Welcome

  4. Introductions

  5. quick show of hands...

  6. What are microformats?

  7. What microformats are not.

  8. History

    A Brief History of the Web, Abridged

  9. Microformat History

  10. What do you want?

    We have plenty to talk about...

    ...but you have plenty of questions!

  11. Microformats Principles

  12. Break ?

  13. Semantic Markup

  14. For Meaning not Show

  15. XHTML Elements: simple contact info

  16. XHTML Elements: simple contact info

    
<p>
 Please contact
          webmaster at example dot com
 if you find any problems with this site.
</p>

  17. XHTML Elements: simple contact info

    
<p><div>
 Please contact
 <address>webmaster at example dot com</address>
 if you find any problems with this site.
</p></div>

  18. XHTML Elements: simple contact info

    
<div>
 Please contact
 <address>webmaster at example dot com</address>
 if you find any problems with this site.
</div>

  19. XHTML Elements: Blog quote

  20. XHTML Elements: Blog quote

    
<p>      Eric Meyer        wrote:</p>

<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>

<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

  21. XHTML Elements: Blog quote

    
<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote>
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

  22. XHTML Elements: Blog quote

    
<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

  23. XHTML Elements: Blog quote

    
<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

  24. XHTML Compound: Block of code

  25. XHTML Compound: Block of code 

    
<p>
Style the address tag to be inline and normal:
</p>
<p>
address { 
 display:inline;
 font-style:normal;
}
</p>

  26. XHTML Compound: Block of code 

    
<p>
Style the address tag to be inline and normal:
</p>
<p><pre><code>
address { 
 display:inline;
 font-style:normal;
}
</p></code></pre>

  27. XHTML Compound: Block of code 

    
<p>
Style the address tag to be inline and normal:
</p>
<pre><code>
address { 
 display:inline;
 font-style:normal;
}
</code></pre>

  28. XHTML Compound: Conversation 

    
          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

  29. XHTML Compound: Conversation 

    <dl>
      <dt>Costello</dt>
           <dd>Well then who's on first?</dd>
      <dt>Abbott</dt>
           <dd>Yes.</dd>
      <dt>Costello</dt>
           <dd>I mean the fellow's name.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
      <dt>Costello</dt>
           <dd>The guy on first.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
</dl>

  30. XHTML Compound: Conversation 

    
          Costello
                Well then who's on first?
          Abbott
                Yes.
          Costello
                I mean the fellow's name.
          Abbott
                Who.
          Costello
                The guy on first.
          Abbott
                Who.

  31. XHTML Compound: Conversation 

    
    <cite>Costello</cite>
                Well then who's on first?
    <cite>Abbott</cite>
                Yes.
    <cite>Costello</cite>
                I mean the fellow's name.
    <cite>Abbott</cite>
                Who.
    <cite>Costello</cite>
                The guy on first.
    <cite>Abbott</cite>
                Who.

  32. XHTML Compound: Conversation 

    
    <cite>Costello</cite>
             <q>Well then who's on first?</q>
    <cite>Abbott</cite>
             <q>Yes.</q>
    <cite>Costello</cite>
             <q>I mean the fellow's name.</q>
    <cite>Abbott</cite>
             <q>Who.</q>
    <cite>Costello</cite>
             <q>The guy on first.</q>
    <cite>Abbott</cite>
             <q>Who.</q>

  33. XHTML Compound: Conversation 

    <ol>
  <li><cite>Costello</cite>
    <q>Well then who's on first?</q></li>
  <li><cite>Abbott</cite>
    <q>Yes.</q></li>
  <li><cite>Costello</cite>
    <q>I mean the fellow's name.</q></li>
  <li><cite>Abbott</cite>
    <q>Who.</q></li>
  <li><cite>Costello</cite>
    <q>The guy on first.</q></li>
  <li><cite>Abbott</cite>
    <q>Who.</q></li>
</ol>

  34. XHTML Compound: Conversation 

    <ol>
  <li><cite>Costello</cite>
    <q>Well then who's on first?</q></li>
  <li><cite>Abbott</cite>
    <q>Yes.</q></li>
  <li><cite>Costello</cite>
    <q>I mean the fellow's name.</q></li>
  <li><cite>Abbott</cite>
    <q>Who.</q></li>
  <li><cite>Costello</cite>
    <q>The guy on first.</q></li>
  <li><cite>Abbott</cite>
    <q>Who.</q></li>
</ol>

  35. More XHTML Compounds

    1. Understand the Elements
    2. Read:
    3. Try Mixing Experiments
    4. Peer Discussions

  36. Extend XHTML. Why?

  37. What can you extend in (X)HTML?

  38. Examples

  39. rel-tag

  40. rel-tag Demo

    In this blog post, we see:

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

  41. rel-tag Demo

    Technorati Tag Page

    ...and on Technorati, we see this:

    Technorati Tag Page for USMNT

  42. rel-tag

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

  43. rel-tag

    Examples

  44. rel-tag

    Publishers

  45. rel-tag

    Consumers

  46. rel-directory

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

  47. rel-tag + rel-directory

    Example

  48. XFN

  49. XFN

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

  50. Selected XFN Properties

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

  51. XFN

    Producers

  52. But the coolest thing is...

    And it is cool....

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

  54. hCalendar

  55. hCalendar

    Demo Time!

    Demo 1:

  56. hCalendar

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

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

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

  59. hCard

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

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

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

  63. rel-license

  64. rel-license

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

  65. vote-links

  66. vote links

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

  67. vote-links background

  68. vote-links properties

  69. hReview

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

  70. hReview example

    An example review of this event

    1. <div class="hreview">
    2. <h2 class="summary">Awesome.</h2>
    3. <abbr class="dtreviewed" title="20060516T1418+0200"> May 15, 2006</abbr>
    4. by <span class="reviewer fn">ryan king</span>
    5. <span class="type">event</span>
    6. <a href="http://xtech.org" class="item url"> XTech 2006</a>
    7. <span class="rating">5</span>
    8. </div>

  71. hAtom

  72. hAtom

    purpose
    syndication feeds in (X)HTML

  73. hAtom Example

    1. <ol class="hfeed">
    2. <li class="hentry">
    3. <h2 class="entry-title"><a href="..." rel="bookmark"> Microformats From the Ground Up</a></h2>
    4. <div class="entry-content">
    5. Blah blah blah
    6. </div>
    7. <p>published <abbr class="published" title="2006-05-16T0900+0200"> today</abbr></p>
    8. </li>
    9. </ol>

  74. hResume

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

  76. more specifically...

    1. <li class="vevent experience">
    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>

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

  78. also..

  79. What's next?

  80. What's Next?

  81. ?

  82. http://microformats.org

  83. Credits

    some slides reused from:

  84. Colophon