What are Microformats?

• "Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards."
• Or... in plain english...
• "A way to mark up pages with a bit of XHTML and CSS so computers can do neat things with them."

hCard markup example

                           http://rasterweb.net/
                           Pete 
                            Prodoehl

                     Hacker
                      http://rasterweb.net/
   RasterWeb!

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>

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>

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>

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

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>

Microformats Principles

• solve a specific problem

• The trick.... is to make sure that each limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful.

• —Tim Berners-Lee, Weaving The Web

Microformats Principles

• solve a specific problem
• simple as possible
  • evolutionary improvements
• humans first, machines second
  • presentable and parsable
  • adapt to current behaviors
• reuse from widely adopted standards
  • semantic (X)HTML, schemas from interoperable RFCs

• ...if I had insisted everyone use HTTP, this would also have been against the principle of minimal constraint. ... the Web would come as a set of ideas that could be adopted individually in combination with existing or future parts.

• ibid.

Microformats Principles

• solve a specific problem
• simple as possible
  • evolutionary improvements
• humans first, machines second
  • presentable and parsable
  • adapt to current behaviors
• reuse from widely adopted standards
  • semantic (X)HTML, schemas from interoperable RFCs
• modularity / embeddability
• decentralized development, content, services
  • explicitly encourage "spirit of the Web"

Microformats Community

• IRC
  • irc.freenode.net #microformats
    • great place to lurk and learn
• Email
  • join microformats-discuss mailing list
  • public archives
• Blog
  • tag posts with "microformats" tag
• Wiki
  • read through it
  • if you find errors, create an account
    • GivennameFamilyname
  • fix typos, add examples, help research, brainstorm, etc.

Microformats Exercise for the Reader

• Create your own hCard
  • Use the hCard creator
  • or use hCard authoring tips to markup your contact info
• Publish it on your site
  • If necessary, go blogspot.com
  • or wordpress.com to create a new site
• Add a link to it in hCard New Examples
• Submit it to Pingerati

Thanks

• Thanks to Tantek Çelic and Ryan King (and others!) for authoring most of this presentation... and to Ashley Dryden for the use of the laptop.

Colophon

• Microformats
• S5 v1.1xoxo
• Some rights reserved. CC by-2.5
• http://tantek.com/presentations/2006/03/what-are-microformats/
• http://theryanking.com/presentations/2006/www/
• http://rasterweb.net/raster/presentations/microformats-20060608/