1. Microformats

    June 8th, 2006 Web Design Meetup

    Pete Prodoehl Hacker RasterWeb!
  2. License

    (cc) Creative Commons BY
  3. What are Microformats?

  4. hCard markup example

    
    
                               http://rasterweb.net/
                               Pete 
                                Prodoehl
    
                         Hacker
                          http://rasterweb.net/
       RasterWeb!
    
    
  5. hCard markup example

    
    <address              > 
     <a                  href="http://rasterweb.net/">
      <span                   >Pete</span> 
      <span                    >Prodoehl</span>
     </a>
     <span              >Hacker</span>
     <a             href="http://rasterweb.net/">
       RasterWeb!</a>
    </address>
    
  6. hCard markup example

    
    <address class="vcard"> 
     <a class="url fn n" href="http://rasterweb.net/">
      <span class="given-name">Pete</span> 
      <span class="family-name">Prodoehl</span>
     </a>
     <span class="title">Hacker</span>
     <a class="org" href="http://rasterweb.net/">
       RasterWeb!</a>
    </address>
    
  7. hCard markup example

    
    <address class="vcard">
     <a class="url fn n" href="http://rasterweb.net/">
      <span class="given-name">Pete</span> 
      <span class="family-name">Prodoehl</span>
     </a>
     <span class="title">Hacker</span>
     <a class="org" href="http://rasterweb.net/">
       Hacker</a>
    </address>
    
  8. hCalendar Markup Example

    Example:iCal

    1. BEGIN:VCALENDAR
    2. BEGIN:VEVENT
    3. SUMMARY:Web Design Meetup
    4. DTSTART:20060608T190000-0600
    5. LOCATION:Byte Studios
    6. DTEND:20060608T210000-0600
    7. DESCRIPTION:We'll be discussing Microformats
    8. END:VEVENT
    9. END:VCALENDAR
  9. hCalendar Markup Example

    Example:hCalendar

    1. <div class="vcalendar">
    2.  <div class="vevent">
    3.   <div class="summary">Web Design Meetup</div>
    4.   <abbr class="dtstart" title="20060608T190000-0600">
              June 8th, 2006, 7:00 PM</abbr> - 
    5.   <abbr class="dtend" title="20060608T210000-0600">9:00 PM</abbr>
    6.   <div class="location">Byte Studios</div>
    7.   <div class="description">We'll be discussing Microformats</div>
    8.  </div>
    9. </div>
  10. Microformats Principles

  11. Microformats Principles

  12. Microformats Principles

  13. Microformats & Implementations

  14. Consuming Microformats

  15. Searching Microformats

  16. Microformats Community

  17. Microformats Exercise for the Reader

  18. Thanks

  19. Colophon