SlideShare a Scribd company logo
1 of 102
Practical
Microformats
Emily Lewis



                            Voices That Matter June 28, 2010
    Some rights reserved.
•   Freelance web designer
•   Lover of web standards, semantic
    markup and CSS, accessibility,
    usability and microformats
•   Writer of web design/development
    topics at A Blog Not Limited,
    ScriptJunkie and MIX Online
•   Author of Microformats Made Simple




               Practical Microformats Voices That Matter
Today, you’ll learn
•   What are microformats
•   Benefits of microformats
•   How to enrich your content with some common
    microformats
•   Where you can see microformats in action
•   Lots of resources to help you publish
    microformats


                                 Practical Microformats Voices That Matter
What are microformats?


                   Microformats: Web Semantics & More
             Practical Microformats Voices That Matter
What are microformats?


                   Microformats: Web Semantics & More
             Practical Microformats Voices That Matter
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.




                          Microformats: Web Semantics & More
                    Practical Microformats Voices That Matter
Microformats enable the
publishing and sharing of higher
fidelity information on the web.




                                         Microformats: Web Semantics & More
                                   Practical Microformats Voices That Matter
Building blocks that
enable users to own,
control, move and share
their data on the web.




                            Microformats: Web Semantics & More
                      Practical Microformats Voices That Matter
Smart
content
          Building blocks that
          enable users to own,
          control, move and share
          their data on the web.




                                      Microformats: Web Semantics & More
                                Practical Microformats Voices That Matter
Smart
content
          Building blocks that
          enable users to own,
          control, move and share                        Markup, with
          their data on the web.                         more meaning




                                      Microformats: Web Semantics & More
                                Practical Microformats Voices That Matter
Huh?



       Practical Microformats Voices That Matter
Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.




                          Practical Microformats Voices That Matter
Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.

Content published with microformats can
be extracted by software and indexed,
downloaded, searched for, saved, cross-
referenced or combined.
                          Practical Microformats Voices That Matter
Formal microformats
•   hCalendar: event information
•   hCard: contact information
•   rel-license: license links
•   rel-nofollow: restricting increased page rank for links
•   rel-tag: tag links
•   VoteLinks: for, against and abstain links
•   XFN: distributed social networks
•   XOXO: outline content
                                    Practical Microformats Voices That Matter
And even more drafts
•   hAtom: syndicated       •   hProduct: consumer
    content                     products
•   hAudio: audio content   •   hRecipe: food and
                                beverage recipes
•   hListing: open,
    distributed listings    •   hResume: Résumés
                                and C.V.s
•   hMedia: video, images
    and audio media         •   hReview: reviews
•   hNews: journalistic     •   xFolk: bookmarks
    news

                                Practical Microformats Voices That Matter
Let’s talk fundamentals



              Practical Microformats Voices That Matter
FUNDAMENTALS
The basics
•   Use existing standards: (X)HTML
•   Emphasize semantics (POSH)
•   Intentionally simple
•   Address a specific “problem”
•   Humans first, machines second




                                  Practical Microformats Voices That Matter
FUNDAMENTALS
The benefits
•   Semantics
•   User experience enhancements
•   More meaningful search results & better findability
•   Encourages consistency and standards
•   Minimal development effort
•   No need for software or special technologies
•   Enables sharing and re-use of your web content
    elsewhere
                                 Practical Microformats Voices That Matter
FUNDAMENTALS
Who benefits?
•   Managers
•   Developers
•   Designers
•   Content Authors
•   Users




                      Practical Microformats Voices That Matter
EVERYONE BENEFITS



          Practical Microformats Voices That Matter
EVERYONE BENEFITS
                           *BLATANT PLUG WARNING*

Check out Microformats Role Play for more on how microformats benefit different people




                                                  Practical Microformats Voices That Matter
Sounds good, but is
anyone really using them?


              Practical Microformats Voices That Matter
6,137,400,000



        Practical Microformats Voices That Matter
60,600,000 - hReview
    1,660,000,000 - hCard
                                                  2,090,000,000 - rel-tag
        807,000,000 - hAtom

                6,137,400,000
                     Yahoo! SearchMonkey results as of 12/17/09

452,000,000 - XFN
                                  108,000,000 - hResume

           148,000,000 - geo
                                                                  768,000,000 - adr
   44,100,000 - hCalendar
                                                     Practical Microformats Voices That Matter
Everyone’s doing it
•   XFN:     Twitter Flickr Google Buzz Huffduffer Digg
    LinkedIn Plaxo Technorati Last.fm Google Social Graph API
    Ident Engine

•   rel-license:  Creative Commons Yahoo! CC Search
    Google "Usage Rights" search

•   hCard:    Google Rich Snippets Google Maps Yahoo! Local
    Google Profiles Twitter Last.fm MySpace

•   hCalendar:     Yahoo! Upcoming MapQuest Local Facebook
    Last.fm Eventful Google Rich Snippets


                                     Practical Microformats Voices That Matter
Everyone’s doing it
•   hResume:              LinkedIn SimplyHired Stack Overflow

•   hReview:    Google Rich Snippets Yelp Yahoo! Local
    Technorati New York Times Travel Cork’d

•   hListing:           Every Car Listed RealEstate.com dealtagger

•   hRecipe:     Food Network Williams Sonoma Recipes                        Google
    Rich Snippets
Microformats Wiki: Examples in the Wild




                                              Practical Microformats Voices That Matter
Enough with the sales
pitch, let’s get started!


               Practical Microformats Voices That Matter
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com">
A Blog Not Limited</a>




                                 Practical Microformats Voices That Matter
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>




                                 Practical Microformats Voices That Matter
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>


One of the values of XFN. Aids in online identity
consolidation.




                                 Practical Microformats Voices That Matter
blog




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
blog




                         portfolio




       Practical Microformats Voices That Matter
DIY DEMOS
Identity consolidation
•   Create a new account at Huffduffer using a URL
    containing rel="me" (i.e. Twitter profile)
•   Visit Ident Engine’s Identity Discovery and enter a
    profile URL that uses rel="me"
•   Add a <link> to your Google Profile with rel="me"
    to your site for automatic discovery with Buzz




                                  Practical Microformats Voices That Matter
COMPOUNDS
hCard
Adds semantics to contact information for people,
places and organizations/companies.
Contact information published with hCard can be
transformed into an electronic business card.
hCard also improves the findability of your contact
information.




                               Practical Microformats Voices That Matter
STEP 1
Consider your content
         Emily Lewis
         A Blog Not Limited
         Albuquerque, NM 87106
         emily@ablognotlimited.com




                                     Practical Microformats Voices That Matter
STEP 2
    POSHify
<dl>
  <dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl>
  <dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr">Albuquerque, <abbr title="New
Mexico">NM</abbr> 87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                 Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico">NM</abbr> 87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>




                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
87106</li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>


                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
     <li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>


                                  Practical Microformats Voices That Matter
STEP 3
Add hCard




            Practical Microformats Voices That Matter
STEP 3
    Add hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
     <li><a href="mailto:emily@ablognotlimited.com"
class="email">emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>


                                  Practical Microformats Voices That Matter
Final hCard




              Practical Microformats Voices That Matter
Final hCard
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
     <li><a href="mailto:emily@ablognotlimited.com"
class="email">emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>


                                  Practical Microformats Voices That Matter
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Attribute values are case-sensitive
•   Root properties cannot be combined with
    sub-properties
•   You don't need additional class values for styling,
    but you can use them




                                  Practical Microformats Voices That Matter
DIY DEMOS
Electronic business card
•   Go to H2VX Contacts Conversion, enter URL of a
    page with hCard and select “download.” Or copy the
    generated URL and paste into your own markup.
•   Using Firefox, install the Operator add-on and visit a
    page with hCard. Next, select “contacts” from the
    new Operator toolbar.
•   Add the Oomph Microformats Toolkit to your site
    with hCard. Once installed, select the “gleam” icon
    from the upper left-hand corner. Select any of the
    “contacts” export options.
                                  Practical Microformats Voices That Matter
COMPOUNDS
hCalendar
Adds semantics to event information.
Event information published with hCalendar can be
extracted and imported into users' calendars.
hCalendar also improves the findability of your event
information.




                               Practical Microformats Voices That Matter
STEP 1
Consider your content


                        at M atter          ing on
                       h                  s
          Voi  ces T             c e focun web
                           feren ents i
                  p th conancem
           In-de g adv            io ns by rs and
            e xcitin with sess y autho
                      ,           r
            d  esign ted indust
                     c
             respe rs.
              leade                  10
                             2 9, 20
                        e 28-             rence
               • Jun on Bay Confe
                   Missi r
                • ente
                     C



                               Practical Microformats Voices That Matter
STEP 2
    POSHify
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
   <li>June 28-29, 2010</li>
   <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
</ul>




                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
   <li>June 28-29, 2010</li>
   <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
</ul>




                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
  <p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
  <ul>
    <li>June 28-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>




                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010">Voices That
Matter</a></h1>
  <p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
  <ul>
    <li>June 28-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>


                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
  <ul>
    <li>June 28-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>


                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li>June 28-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>


                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart">June 28</span>-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>


                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-29, 2010</li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>

                                  Practical Microformats Voices That Matter
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend">29, 2010</span></li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>
                                  Practical Microformats Voices That Matter
STEP 3
      Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
    <li><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>                            Practical Microformats Voices That Matter
STEP 3
      Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
    <li class="location"><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>                            Practical Microformats Voices That Matter
Final hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
    <li class="location"><a href="http://www.acc-
   missionbayconferencecenter.com">Mission Bay Conference
   Center</a></li>
  </ul>
</div>                            Practical Microformats Voices That Matter
DIY DEMOS
Electronic calendar
•   Go to H2VX Events Conversion, enter URL of a
    page with hCalendar and select “download.” Or copy
    the generated URL and paste in your own markup.
•   Using Chrome, install the Michromeformats
    extension and visit a page with hCalendar. Next,
    select the new uf icon from your address bar and
    download the .ics file.




                                 Practical Microformats Voices That Matter
Combining microformats



             Practical Microformats Voices That Matter
For
                                          mo even
                                       sem re
                                       powantic
                                           er!


Combining microformats



             Practical Microformats Voices That Matter
hCard and XFN




                Practical Microformats Voices That Matter
hCard and XFN
<dl class="vcard">
  <dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com"
class="url" rel="me">A Blog Not Limited</a></li>
      <li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
     <li><a href="mailto:emily@ablognotlimited.com"
class="email">emily@ablognotlimited.com</a></li>
   </ul>
  </dd>
</dl>


                                  Practical Microformats Voices That Matter
hCalendar with hCard




               Practical Microformats Voices That Matter
hCalendar with hCard
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
  <p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
  <ul>
    <li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
    <li class="location vcard"><a href="http://www.acc-
   missionbayconferencecenter.com" class="fn org
   url">Mission Bay Conference Center</a></li>
  </ul>
</div>                            Practical Microformats Voices That Matter
Resources



      Practical Microformats Voices That Matter
Resources
*BLATANT PLUG WARNING*




                 Practical Microformats Voices That Matter
RESOURCES
My book!




            Practical Microformats Voices That Matter
RESOURCES
My book!
            Microformats Made Simple




                    Practical Microformats Voices That Matter
RESOURCES
My book!
            Microformats Made Simple


            Want a preview? Check out
            Rough Cuts excerpts


            *BLATANT PLUGS NOT OVER YET*




                       Practical Microformats Voices That Matter
RESOURCES
My blog tutorials
Getting Semantic With Microformats:
  • rel-home, rel-tag, rel-license
  • XFN
  • hCard
  • hCalendar
  • hAtom
  • hResume
  • Themes & Issues
  • Value class pattern
                                     Practical Microformats Voices That Matter
RESOURCES
Great stuff from other folks
•   Microformats Wiki
    • A good resource once you understand the basics
•   Microformats: Empowering Your Markup for Web 2.0 by
    John Allsopp
•   microformatique
•   Follow @microformats
•   Send questions to @microformateers


                                       Practical Microformats Voices That Matter
RESOURCES
Authoring tools
•   hCard Creator
•   hCalendar Creator
•   hReview Creator
•   XFN Creator
•   Jeffrey Zeldman's Web Standards Advisor
    Dreamweaver plug-in



                                Practical Microformats Voices That Matter
RESOURCES
Validate, extract, transform
•   H2VX                   •   Tails Export Add-on for
                               Firefox
•   Optimus-Microformats
    Transformer            •   Semantic Checker Add-
                               on for Firefox
•   Microform.at
    Transformer            •   Michromeformats
                               extension for Chrome
•   Oomph Microformats
    Toolkit                •   SafariMicroformats
                               plug-in for Safari
•   Operator Add-on for
    Firefox

                                 Practical Microformats Voices That Matter
RESOURCES
Additional reading
•   Microformats Role Play
•   The Value Class Pattern
•   More on developing naming conventions,
    Microformats and HTML5
•   Styling hReview Microformats
•   Styling XFN and rel-license links
•   Styling hCard


                                   Practical Microformats Voices That Matter
RESOURCES
Additional reading
•   Discovering Magic
•   Meaningful Markup: POSH and Beyond
•   Google’s Semantic Web Push: Rich Snippets Usage
    Growing
•   Microformats Profile URIs Updated




                                Practical Microformats Voices That Matter
Questions? Comments?
•   emily@ablognotlimited.com
•   @emilylewis
•   Introduce yourself and let’s talk!




                                   Practical Microformats Voices That Matter
Thanks!



          Practical Microformats Voices That Matter

More Related Content

Similar to Practical Microformats - Voices That Matter

[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats WorkshopEmily Lewis
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & MoreEmily Lewis
 
Health Care Knowledge Transfer Using The Online Environment
Health Care Knowledge Transfer Using The Online EnvironmentHealth Care Knowledge Transfer Using The Online Environment
Health Care Knowledge Transfer Using The Online EnvironmentAnita Hamilton PhD
 
Microformats Workshop (2009)
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)Kelley Howell
 
Web trends, social media, viralmarketing
Web trends, social media, viralmarketingWeb trends, social media, viralmarketing
Web trends, social media, viralmarketingPer Axbom
 
Web 2 0 Presentation
Web 2 0  PresentationWeb 2 0  Presentation
Web 2 0 PresentationStephen Nold
 
Online Community Evangelist
Online Community EvangelistOnline Community Evangelist
Online Community EvangelistMarilyn Pratt
 
socialmedianotes
socialmedianotessocialmedianotes
socialmedianotesRussellWill
 
New Media: What Is It & What's My Strategy?
New Media: What Is It & What's My Strategy?New Media: What Is It & What's My Strategy?
New Media: What Is It & What's My Strategy?Barbra Gago
 
Evaluating Drupal for the Enterprise
Evaluating Drupal for the EnterpriseEvaluating Drupal for the Enterprise
Evaluating Drupal for the Enterpriseultimike
 
Social networks: technical issues
Social networks: technical issuesSocial networks: technical issues
Social networks: technical issuesMorgan Magnin
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Sara Rosso
 
Building the Social Library Online - OLA Superconference
Building the Social Library Online - OLA SuperconferenceBuilding the Social Library Online - OLA Superconference
Building the Social Library Online - OLA SuperconferenceMeredith Farkas
 
San Fernando Valley SharePoint UserGroup Jully 11, 2012
San Fernando Valley SharePoint UserGroup Jully 11, 2012San Fernando Valley SharePoint UserGroup Jully 11, 2012
San Fernando Valley SharePoint UserGroup Jully 11, 2012Ivan Sanders
 
Web 2.0 lib_2.0_1
Web 2.0 lib_2.0_1Web 2.0 lib_2.0_1
Web 2.0 lib_2.0_1smtcd
 

Similar to Practical Microformats - Voices That Matter (20)

[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & More
 
Health Care Knowledge Transfer Using The Online Environment
Health Care Knowledge Transfer Using The Online EnvironmentHealth Care Knowledge Transfer Using The Online Environment
Health Care Knowledge Transfer Using The Online Environment
 
Emerging Technologies
Emerging TechnologiesEmerging Technologies
Emerging Technologies
 
Twitter for Business webinar
Twitter for Business webinarTwitter for Business webinar
Twitter for Business webinar
 
Microformats Workshop (2009)
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)
 
Web trends, social media, viralmarketing
Web trends, social media, viralmarketingWeb trends, social media, viralmarketing
Web trends, social media, viralmarketing
 
Web 2 0 Presentation
Web 2 0  PresentationWeb 2 0  Presentation
Web 2 0 Presentation
 
Online Community Evangelist
Online Community EvangelistOnline Community Evangelist
Online Community Evangelist
 
socialmedianotes
socialmedianotessocialmedianotes
socialmedianotes
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
New Media: What Is It & What's My Strategy?
New Media: What Is It & What's My Strategy?New Media: What Is It & What's My Strategy?
New Media: What Is It & What's My Strategy?
 
Evaluating Drupal for the Enterprise
Evaluating Drupal for the EnterpriseEvaluating Drupal for the Enterprise
Evaluating Drupal for the Enterprise
 
Social networks: technical issues
Social networks: technical issuesSocial networks: technical issues
Social networks: technical issues
 
Apurv smm
Apurv smmApurv smm
Apurv smm
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
 
Building the Social Library Online - OLA Superconference
Building the Social Library Online - OLA SuperconferenceBuilding the Social Library Online - OLA Superconference
Building the Social Library Online - OLA Superconference
 
San Fernando Valley SharePoint UserGroup Jully 11, 2012
San Fernando Valley SharePoint UserGroup Jully 11, 2012San Fernando Valley SharePoint UserGroup Jully 11, 2012
San Fernando Valley SharePoint UserGroup Jully 11, 2012
 
Web 2.0 lib_2.0_1
Web 2.0 lib_2.0_1Web 2.0 lib_2.0_1
Web 2.0 lib_2.0_1
 

More from Emily Lewis

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring ProcessEmily Lewis
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EEEmily Lewis
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque CommunityEmily Lewis
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineEmily Lewis
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management SystemsEmily Lewis
 
jQuery, A Designer's Perspective
jQuery, A Designer's PerspectivejQuery, A Designer's Perspective
jQuery, A Designer's PerspectiveEmily Lewis
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Emily Lewis
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessEmily Lewis
 

More from Emily Lewis (12)

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring Process
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EE
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque Community
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngine
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
 
jQuery, A Designer's Perspective
jQuery, A Designer's PerspectivejQuery, A Designer's Perspective
jQuery, A Designer's Perspective
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means Business
 

Recently uploaded

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Recently uploaded (20)

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

Practical Microformats - Voices That Matter

  • 1. Practical Microformats Emily Lewis Voices That Matter June 28, 2010 Some rights reserved.
  • 2. Freelance web designer • Lover of web standards, semantic markup and CSS, accessibility, usability and microformats • Writer of web design/development topics at A Blog Not Limited, ScriptJunkie and MIX Online • Author of Microformats Made Simple Practical Microformats Voices That Matter
  • 3. Today, you’ll learn • What are microformats • Benefits of microformats • How to enrich your content with some common microformats • Where you can see microformats in action • Lots of resources to help you publish microformats Practical Microformats Voices That Matter
  • 4. What are microformats? Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 5. What are microformats? Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 6. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 7. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 8. Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 9. Smart content Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 10. Smart content Building blocks that enable users to own, control, move and share Markup, with their data on the web. more meaning Microformats: Web Semantics & More Practical Microformats Voices That Matter
  • 11. Huh? Practical Microformats Voices That Matter
  • 12. Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Practical Microformats Voices That Matter
  • 13. Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Content published with microformats can be extracted by software and indexed, downloaded, searched for, saved, cross- referenced or combined. Practical Microformats Voices That Matter
  • 14. Formal microformats • hCalendar: event information • hCard: contact information • rel-license: license links • rel-nofollow: restricting increased page rank for links • rel-tag: tag links • VoteLinks: for, against and abstain links • XFN: distributed social networks • XOXO: outline content Practical Microformats Voices That Matter
  • 15. And even more drafts • hAtom: syndicated • hProduct: consumer content products • hAudio: audio content • hRecipe: food and beverage recipes • hListing: open, distributed listings • hResume: Résumés and C.V.s • hMedia: video, images and audio media • hReview: reviews • hNews: journalistic • xFolk: bookmarks news Practical Microformats Voices That Matter
  • 16. Let’s talk fundamentals Practical Microformats Voices That Matter
  • 17. FUNDAMENTALS The basics • Use existing standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second Practical Microformats Voices That Matter
  • 18. FUNDAMENTALS The benefits • Semantics • User experience enhancements • More meaningful search results & better findability • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content elsewhere Practical Microformats Voices That Matter
  • 19. FUNDAMENTALS Who benefits? • Managers • Developers • Designers • Content Authors • Users Practical Microformats Voices That Matter
  • 20. EVERYONE BENEFITS Practical Microformats Voices That Matter
  • 21. EVERYONE BENEFITS *BLATANT PLUG WARNING* Check out Microformats Role Play for more on how microformats benefit different people Practical Microformats Voices That Matter
  • 22. Sounds good, but is anyone really using them? Practical Microformats Voices That Matter
  • 23. 6,137,400,000 Practical Microformats Voices That Matter
  • 24. 60,600,000 - hReview 1,660,000,000 - hCard 2,090,000,000 - rel-tag 807,000,000 - hAtom 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 452,000,000 - XFN 108,000,000 - hResume 148,000,000 - geo 768,000,000 - adr 44,100,000 - hCalendar Practical Microformats Voices That Matter
  • 25. Everyone’s doing it • XFN: Twitter Flickr Google Buzz Huffduffer Digg LinkedIn Plaxo Technorati Last.fm Google Social Graph API Ident Engine • rel-license: Creative Commons Yahoo! CC Search Google "Usage Rights" search • hCard: Google Rich Snippets Google Maps Yahoo! Local Google Profiles Twitter Last.fm MySpace • hCalendar: Yahoo! Upcoming MapQuest Local Facebook Last.fm Eventful Google Rich Snippets Practical Microformats Voices That Matter
  • 26. Everyone’s doing it • hResume: LinkedIn SimplyHired Stack Overflow • hReview: Google Rich Snippets Yelp Yahoo! Local Technorati New York Times Travel Cork’d • hListing: Every Car Listed RealEstate.com dealtagger • hRecipe: Food Network Williams Sonoma Recipes Google Rich Snippets Microformats Wiki: Examples in the Wild Practical Microformats Voices That Matter
  • 27. Enough with the sales pitch, let’s get started! Practical Microformats Voices That Matter
  • 28. ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com"> A Blog Not Limited</a> Practical Microformats Voices That Matter
  • 29. ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Practical Microformats Voices That Matter
  • 30. ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> One of the values of XFN. Aids in online identity consolidation. Practical Microformats Voices That Matter
  • 31. blog Practical Microformats Voices That Matter
  • 32. blog portfolio Practical Microformats Voices That Matter
  • 33. blog portfolio Practical Microformats Voices That Matter
  • 34. blog portfolio Practical Microformats Voices That Matter
  • 35. blog portfolio Practical Microformats Voices That Matter
  • 36. blog portfolio Practical Microformats Voices That Matter
  • 37. blog portfolio Practical Microformats Voices That Matter
  • 38. blog portfolio Practical Microformats Voices That Matter
  • 39. blog portfolio Practical Microformats Voices That Matter
  • 40. blog portfolio Practical Microformats Voices That Matter
  • 41. blog portfolio Practical Microformats Voices That Matter
  • 42. blog portfolio Practical Microformats Voices That Matter
  • 43. blog portfolio Practical Microformats Voices That Matter
  • 44. DIY DEMOS Identity consolidation • Create a new account at Huffduffer using a URL containing rel="me" (i.e. Twitter profile) • Visit Ident Engine’s Identity Discovery and enter a profile URL that uses rel="me" • Add a <link> to your Google Profile with rel="me" to your site for automatic discovery with Buzz Practical Microformats Voices That Matter
  • 45. COMPOUNDS hCard Adds semantics to contact information for people, places and organizations/companies. Contact information published with hCard can be transformed into an electronic business card. hCard also improves the findability of your contact information. Practical Microformats Voices That Matter
  • 46. STEP 1 Consider your content Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Practical Microformats Voices That Matter
  • 47. STEP 2 POSHify <dl> <dt>Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li>       <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 48. STEP 3 Add hCard <dl> <dt>Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li>       <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 49. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 50. STEP 3 Add hCard <dl class="vcard"> <dt>Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li>       <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 51. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 52. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li>       <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 53. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 54. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 55. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 56. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr">Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 57. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 58. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 59. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 60. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> 87106</li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 61. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 62. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li>      <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 63. STEP 3 Add hCard Practical Microformats Voices That Matter
  • 64. STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li>      <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 65. Final hCard Practical Microformats Voices That Matter
  • 66. Final hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li>      <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 67. Worth noting • Markup doesn't matter, but it should be POSH • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties • You don't need additional class values for styling, but you can use them Practical Microformats Voices That Matter
  • 68. DIY DEMOS Electronic business card • Go to H2VX Contacts Conversion, enter URL of a page with hCard and select “download.” Or copy the generated URL and paste into your own markup. • Using Firefox, install the Operator add-on and visit a page with hCard. Next, select “contacts” from the new Operator toolbar. • Add the Oomph Microformats Toolkit to your site with hCard. Once installed, select the “gleam” icon from the upper left-hand corner. Select any of the “contacts” export options. Practical Microformats Voices That Matter
  • 69. COMPOUNDS hCalendar Adds semantics to event information. Event information published with hCalendar can be extracted and imported into users' calendars. hCalendar also improves the findability of your event information. Practical Microformats Voices That Matter
  • 70. STEP 1 Consider your content at M atter ing on h s Voi ces T c e focun web feren ents i p th conancem In-de g adv io ns by rs and e xcitin with sess y autho , r d esign ted indust c respe rs. leade 10 2 9, 20 e 28- rence • Jun on Bay Confe Missi r • ente C Practical Microformats Voices That Matter
  • 71. STEP 2 POSHify <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> Practical Microformats Voices That Matter
  • 72. STEP 3 Add hCalendar <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> Practical Microformats Voices That Matter
  • 73. STEP 3 Add hCalendar <div class="vevent"> <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 74. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 75. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 76. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 77. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart">June 28</span>-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 78. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 79. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend">29, 2010</span></li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 80. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 81. STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location"><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 82. Final hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location"><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 83. DIY DEMOS Electronic calendar • Go to H2VX Events Conversion, enter URL of a page with hCalendar and select “download.” Or copy the generated URL and paste in your own markup. • Using Chrome, install the Michromeformats extension and visit a page with hCalendar. Next, select the new uf icon from your address bar and download the .ics file. Practical Microformats Voices That Matter
  • 84. Combining microformats Practical Microformats Voices That Matter
  • 85. For mo even sem re powantic er! Combining microformats Practical Microformats Voices That Matter
  • 86. hCard and XFN Practical Microformats Voices That Matter
  • 87. hCard and XFN <dl class="vcard"> <dt class="fn">Emily Lewis</dt>   <dd>    <ul>      <li><a href="http://www.ablognotlimited.com" class="url" rel="me">A Blog Not Limited</a></li>       <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li>      <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li>    </ul> </dd> </dl> Practical Microformats Voices That Matter
  • 88. hCalendar with hCard Practical Microformats Voices That Matter
  • 89. hCalendar with hCard <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location vcard"><a href="http://www.acc- missionbayconferencecenter.com" class="fn org url">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter
  • 90. Resources Practical Microformats Voices That Matter
  • 91. Resources *BLATANT PLUG WARNING* Practical Microformats Voices That Matter
  • 92. RESOURCES My book! Practical Microformats Voices That Matter
  • 93. RESOURCES My book! Microformats Made Simple Practical Microformats Voices That Matter
  • 94. RESOURCES My book! Microformats Made Simple Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET* Practical Microformats Voices That Matter
  • 95. RESOURCES My blog tutorials Getting Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern Practical Microformats Voices That Matter
  • 96. RESOURCES Great stuff from other folks • Microformats Wiki • A good resource once you understand the basics • Microformats: Empowering Your Markup for Web 2.0 by John Allsopp • microformatique • Follow @microformats • Send questions to @microformateers Practical Microformats Voices That Matter
  • 97. RESOURCES Authoring tools • hCard Creator • hCalendar Creator • hReview Creator • XFN Creator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in Practical Microformats Voices That Matter
  • 98. RESOURCES Validate, extract, transform • H2VX • Tails Export Add-on for Firefox • Optimus-Microformats Transformer • Semantic Checker Add- on for Firefox • Microform.at Transformer • Michromeformats extension for Chrome • Oomph Microformats Toolkit • SafariMicroformats plug-in for Safari • Operator Add-on for Firefox Practical Microformats Voices That Matter
  • 99. RESOURCES Additional reading • Microformats Role Play • The Value Class Pattern • More on developing naming conventions, Microformats and HTML5 • Styling hReview Microformats • Styling XFN and rel-license links • Styling hCard Practical Microformats Voices That Matter
  • 100. RESOURCES Additional reading • Discovering Magic • Meaningful Markup: POSH and Beyond • Google’s Semantic Web Push: Rich Snippets Usage Growing • Microformats Profile URIs Updated Practical Microformats Voices That Matter
  • 101. Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Practical Microformats Voices That Matter
  • 102. Thanks! Practical Microformats Voices That Matter

Editor's Notes