1. Practical Microformats

    Ryan King

    Technorati

    Brian Suda

  2. http://theryanking.com/presentations/2006/www/

  3. Introductions

  4. quick show of hands...

  5. What are microformats?

  6. What microformats are not.

  7. History

    A Brief History of the Web, Abridged

  8. Microformat History

  9. What do you want?

    We have plenty to talk about...

    ...but you have plenty of questions!

  10. Microformats Principles

  11. Semantic Markup

  12. For Meaning not Show

  13. XHTML Elements: simple contact info

  14. XHTML Elements: simple contact info

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

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

  16. XHTML Elements: simple contact info

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

  17. XHTML Elements: Blog quote

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

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

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

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

  22. XHTML Compound: Block of code

  23. XHTML Compound: Block of code 

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

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

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

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

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

  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 

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

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

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

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

  33. More XHTML Compounds

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

  34. Extend XHTML. Why?

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

  36. Examples

  37. rel-tag

  38. rel-tag Demo

    In this blog post, we see:

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

  39. rel-tag Demo

    Technorati Tag Page

    ...and on Technorati, we see this:

    Technorati Tag Page for USMNT

  40. rel-tag

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

  41. rel-tag

    Examples

  42. rel-tag

    Publishers

  43. rel-tag

    Consumers

  44. rel-directory

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

  45. rel-tag + rel-directory

    Example

  46. XFN

  47. XFN

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

  48. Selected XFN Properties

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

  49. XFN

    Producers

  50. But the coolest thing is...

    And it is cool....

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

  52. hCalendar

  53. hCalendar

    Demo Time!

    Demo 1:

  54. hCalendar

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

  55. hCalendar

    Example:iCal

    1. BEGIN:VCALENDAR
    2. BEGIN:VEVENT
    3. SUMMARY:Microformats Tutorial
    4. DTSTART:20060525T103000+0100
    5. LOCATION:Carrick
    6. DTEND:20060525T133000+0100
    7. DESCRIPTION:...
    8. END:VEVENT
    9. END:VCALENDAR

  56. hCalendar

    Example:hCalendar

    1. <div class="vcalendar">
    2. <div class="vevent">
    3. <div class="summary">Microformats Tutorial</div>
    4. <abbr class="dtstart" title="20060525T103000+0100"> May 25th, 2006, 10:30AM</abbr>
    5. <abbr class="dtend" title="20060525T133000+0100">1:30PM</abbr>
    6. <div class="location">Carrick</div>
    7. <div class="description">...</div>
    8. </div>
    9. </div>

  57. hCard

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

  59. hCard

    vCard Example

    1. BEGIN:VCARD
    2. N:Suda;Brian;;;
    3. FN:Brian Suda
    4. EMAIL;type=INTERNET;type=WORK;brian@suda.co.uk
    5. END:VCARD

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

    Definitely machine readable only.

  60. hCard

    vCard Example

    1. <div class="vcard">
    2. <span class="fn">Brian Suda</span>
    3. <span class="email">
    4. <span class="type">work</span>
    5. <a class="value" href="mailto:brian@suda.co.uk">brian@suda.co.uk</a>
    6. </span>
    7. </div>

  61. rel-license

  62. rel-license

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

  63. vote-links

  64. rel-license

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

  65. vote-links background

  66. vote-links properties

  67. hReview

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

  68. hReview example

    An example review of this event

    1. <div class="hreview">
    2. <h2 class="summary">Awesome.</h2>
    3. <abbr class="dtreviewed" title="20060525T1418-0200"> May 15, 2006</abbr>
    4. by <span class="reviewer fn">Brian Suda</span>
    5. <span class="type">event</span>
    6. <a href="http://www2006.org/" class="item url"> www2006</a>
    7. <span class="rating">5</span>
    8. </div>

  69. hAtom

  70. hAtom

    purpose
    syndication feeds in (X)HTML

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

  72. hResume

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

  74. more specifically...

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

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

  76. also..

  77. What's next?

  78. What's Next?

  79. ?

  80. http://microformats.org

  81. Credits

    some slides reused from:

  82. Colophon