@media speakers

• @media speakers page with hCard markup
• hCard to vCard converter
• Link to convert hCards to vCards
• Seamless import into a typical Address Book

hCard markup example

                           http://meyerweb.com/
                           Eric 
                            Meyer

                     Principal Consultant
                      http://complexspiral.com/
   Complex Spiral Consulting

hCard markup example

<div              > 
 <a                  href="http://meyerweb.com/">
  <span                   >Eric</span> 
  <span                    >Meyer</span>
 </a>
 <span              >Principal Consultant</span>
 <a             href="http://complexspiral.com/">
   Complex Spiral Consulting</a>
</div>

hCard markup example

<div class="vcard"> 
 <a class="url fn n" href="http://meyerweb.com/">
  <span class="given-name">Eric</span> 
  <span class="family-name">Meyer</span>
 </a>
 <span class="title">Principal Consultant</span>
 <a class="org" href="http://complexspiral.com/">
   Complex Spiral Consulting</a>
</div>

hCard markup example

<div class="vcard">
 <a class="url fn n" href="http://meyerweb.com/">
  <span class="given-name">Eric</span> 
  <span class="family-name">Meyer</span>
 </a>
 <span class="title">Principal Consultant</span>
 <a class="org" href="http://complexspiral.com/">
   Complex Spiral Consulting</a>
</div>

What are Microformats?

• Microformats enable the publishing and sharing of higher fidelity information on the Web.
• Small bits of (X)HTML that identify richer data types like people and events in your webpages.
• Building blocks that enable users to own, control, move, and share their data on the Web.

Microformat: linked license

• Analogy: link to a stylesheet with rel="stylesheet"
• Thus: link to a license with rel="license"

Example: rel-license

         http://creativecommons.org/licenses/by/2.5/
         Some rights reserved. CC by-2.5.

Example: rel-license

<a 
   href="http://creativecommons.org/licenses/by/2.5/">
         Some rights reserved. CC by-2.5.
</a>

Example: rel-license

<a rel="license"
   href="http://creativecommons.org/licenses/by/2.5/">
         Some rights reserved. CC by-2.5.
</a>

Example: rel-license

<a rel="license"
   href="http://creativecommons.org/licenses/by/2.5/">
         Some rights reserved. CC by-2.5.
</a>

rel-license support

• Creative Commons (cc) license chooser
• Yahoo! (cc) search
• Google "Usage Rights" search

Example: blog quote

• <cite> & <blockquote> elements

Example: blog quote

• <cite> & <blockquote> elements

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

Example: blog quote

• <cite> & <blockquote> elements

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

Example: blog quote

• <cite> & <blockquote> elements

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

Example: blog quote

• <cite> & <blockquote> elements

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

Example: blog quote with microformats

• add a link, since the source is on the Web

<p><cite              >
<a href="http://meyerweb.com"
                            >Eric Meyer</a>
</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>

Example: blog quote with microformats

• add hCard since Eric is a person

<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn"
                            >Eric Meyer</a>
</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>

Example: blog quote with microformats

• add XFN since we know Eric

<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn" 
  rel="met friend colleague">Eric Meyer</a>
</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>

Example: blog quote with microformats

• <cite>, <blockquote>, hCard & XFN

<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn" 
  rel="met friend colleague">Eric Meyer</a>
</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>

More than just "good class names"

• principles keep things "micro"
• process emphasizes getting real
• community minimizes duplicates

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"

Example: hCalendar

           http://tantek.com/presentations/... 

                         Microformats: Evolving …

    16 June 2006

Example: hCalendar

<ol                  >
 <li               >
  <a href="http://tantek.com/presentations/..." 
                >
   <span                >Microformats: Evolving …</span>

    16 June 2006

  </a>
 </li>
</ol>

Example: hCalendar

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats: Evolving …</span>
   <abbr class="dtstart" title="20060616T1500+0100">
    16 June 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats: Evolving …</span>
   <abbr class="dtstart" title="20060616T1500+0100">
    16 June 2006
   </abbr>
  </a>
 </li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

     topic 1
         point A
         point B
     topic 2
         point C

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol>
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Recently released...

• Technorati Microformats Search preview
  • search for contacts,
  • events,
  • reviews
  • and more coming soon.
• Pingerati.net microformat updates distributor

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.

Microformat 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 in your about or contact page
• Add a link to it in hCard New Examples
• Ping Pingerati.net with your about page

Colophon

• XHTML
• CSS
• S5 v1.1xoxo
• XOXO
• hCard
• hCalendar
• rel="license"
• Some rights reserved. CC by-2.5
• http://tantek.com/presentations/2006/06/microformats-evolution/

Thanks!

• http://microformats.org/

• Evolving the Web