Practical
Microformats
Emily Lewis



                            Voices That Matter June 28, 2010
    Some rights reserve...
•   Freelance web designer
•   Lover of web standards, semantic
    markup and CSS, accessibility,
    usability and micro...
Today, you’ll learn
•   What are microformats
•   Benefits of microformats
•   How to enrich your content with some common
...
What are microformats?


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


                   Microformats: Web Semantics & More
             Practical Microformats Voices ...
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
...
Microformats enable the
publishing and sharing of higher
fidelity information on the web.




                             ...
Building blocks that
enable users to own,
control, move and share
their data on the web.




                            M...
Smart
content
          Building blocks that
          enable users to own,
          control, move and share
          th...
Smart
content
          Building blocks that
          enable users to own,
          control, move and share             ...
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, r...
Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, r...
Formal microformats
•   hCalendar: event information
•   hCard: contact information
•   rel-license: license links
•   rel...
And even more drafts
•   hAtom: syndicated       •   hProduct: consumer
    content                     products
•   hAudi...
Let’s talk fundamentals



              Practical Microformats Voices That Matter
FUNDAMENTALS
The basics
•   Use existing standards: (X)HTML
•   Emphasize semantics (POSH)
•   Intentionally simple
•   Ad...
FUNDAMENTALS
The benefits
•   Semantics
•   User experience enhancements
•   More meaningful search results & better findabi...
FUNDAMENTALS
Who benefits?
•   Managers
•   Developers
•   Designers
•   Content Authors
•   Users




                    ...
EVERYONE BENEFITS



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

Check out Microformats Role Play for more on how micr...
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
 ...
Everyone’s doing it
•   XFN:     Twitter Flickr Google Buzz Huffduffer Digg
    LinkedIn Plaxo Technorati Last.fm Google S...
Everyone’s doing it
•   hResume:              LinkedIn SimplyHired Stack Overflow

•   hReview:    Google Rich Snippets Yel...
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 ...
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A ...
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A ...
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 ...
COMPOUNDS
hCard
Adds semantics to contact information for people,
places and organizations/companies.
Contact information ...
STEP 1
Consider your content
         Emily Lewis
         A Blog Not Limited
         Albuquerque, NM 87106
         emil...
STEP 2
    POSHify
<dl>
  <dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog No...
STEP 3
    Add hCard
<dl>
  <dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://www.ablognotlimited.com">
A Blog ...
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...
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.ablo...
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.ablo...
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.ablo...
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.ablo...
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.ablo...
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.ablo...
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.ablo...
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.ablognotlimit...
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Attribute values are case-sensitive
•   Root properties ...
DIY DEMOS
Electronic business card
•   Go to H2VX Contacts Conversion, enter URL of a
    page with hCard and select “down...
COMPOUNDS
hCalendar
Adds semantics to event information.
Event information published with hCalendar can be
extracted and i...
STEP 1
Consider your content


                        at M atter          ing on
                       h                ...
STEP 2
    POSHify
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth co...
STEP 3
    Add hCalendar
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-de...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That M...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
    Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign201...
STEP 3
      Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2...
STEP 3
      Add hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2...
Final hCalendar
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class=...
DIY DEMOS
Electronic calendar
•   Go to H2VX Events Conversion, enter URL of a
    page with hCalendar and select “downloa...
Combining microformats



             Practical Microformats Voices That Matter
For
                                          mo even
                                       sem re
                      ...
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.ablognotlim...
hCalendar with hCard




               Practical Microformats Voices That Matter
hCalendar with hCard
<div class="vevent">
  <h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" c...
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 exc...
RESOURCES
My blog tutorials
Getting Semantic With Microformats:
  • rel-home, rel-tag, rel-license
  • XFN
  • hCard
  • h...
RESOURCES
Great stuff from other folks
•   Microformats Wiki
    • A good resource once you understand the basics
•   Micr...
RESOURCES
Authoring tools
•   hCard Creator
•   hCalendar Creator
•   hReview Creator
•   XFN Creator
•   Jeffrey Zeldman'...
RESOURCES
Validate, extract, transform
•   H2VX                   •   Tails Export Add-on for
                            ...
RESOURCES
Additional reading
•   Microformats Role Play
•   The Value Class Pattern
•   More on developing naming conventi...
RESOURCES
Additional reading
•   Discovering Magic
•   Meaningful Markup: POSH and Beyond
•   Google’s Semantic Web Push: ...
Questions? Comments?
•   emily@ablognotlimited.com
•   @emilylewis
•   Introduce yourself and let’s talk!




            ...
Thanks!



          Practical Microformats Voices That Matter
Upcoming SlideShare
Loading in...5
×

Practical Microformats - Voices That Matter

4,746

Published on

Talk for Voices That Matter - Web Design conference covering the basics of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation, authoring and parsing tools.

Published in: Technology
1 Comment
25 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,746
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide





























































































  • Practical Microformats - Voices That Matter

    1. 1. Practical Microformats Emily Lewis Voices That Matter June 28, 2010 Some rights reserved.
    2. 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. 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. 4. What are microformats? Microformats: Web Semantics & More Practical Microformats Voices That Matter
    5. 5. What are microformats? Microformats: Web Semantics & More Practical Microformats Voices That Matter
    6. 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. 7. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter
    8. 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. 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. 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. 11. Huh? Practical Microformats Voices That Matter
    12. 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. 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. 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. 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. 16. Let’s talk fundamentals Practical Microformats Voices That Matter
    17. 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. 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. 19. FUNDAMENTALS Who benefits? • Managers • Developers • Designers • Content Authors • Users Practical Microformats Voices That Matter
    20. 20. EVERYONE BENEFITS Practical Microformats Voices That Matter
    21. 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. 22. Sounds good, but is anyone really using them? Practical Microformats Voices That Matter
    23. 23. 6,137,400,000 Practical Microformats Voices That Matter
    24. 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. 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. 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. 27. Enough with the sales pitch, let’s get started! Practical Microformats Voices That Matter
    28. 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. 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. 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. 31. blog Practical Microformats Voices That Matter
    32. 32. blog portfolio Practical Microformats Voices That Matter
    33. 33. blog portfolio Practical Microformats Voices That Matter
    34. 34. blog portfolio Practical Microformats Voices That Matter
    35. 35. blog portfolio Practical Microformats Voices That Matter
    36. 36. blog portfolio Practical Microformats Voices That Matter
    37. 37. blog portfolio Practical Microformats Voices That Matter
    38. 38. blog portfolio Practical Microformats Voices That Matter
    39. 39. blog portfolio Practical Microformats Voices That Matter
    40. 40. blog portfolio Practical Microformats Voices That Matter
    41. 41. blog portfolio Practical Microformats Voices That Matter
    42. 42. blog portfolio Practical Microformats Voices That Matter
    43. 43. blog portfolio Practical Microformats Voices That Matter
    44. 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. 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. 46. STEP 1 Consider your content Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Practical Microformats Voices That Matter
    47. 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. 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. 49. STEP 3 Add hCard Practical Microformats Voices That Matter
    50. 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. 51. STEP 3 Add hCard Practical Microformats Voices That Matter
    52. 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. 53. STEP 3 Add hCard Practical Microformats Voices That Matter
    54. 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. 55. STEP 3 Add hCard Practical Microformats Voices That Matter
    56. 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. 57. STEP 3 Add hCard Practical Microformats Voices That Matter
    58. 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. 59. STEP 3 Add hCard Practical Microformats Voices That Matter
    60. 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. 61. STEP 3 Add hCard Practical Microformats Voices That Matter
    62. 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. 63. STEP 3 Add hCard Practical Microformats Voices That Matter
    64. 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. 65. Final hCard Practical Microformats Voices That Matter
    66. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 84. Combining microformats Practical Microformats Voices That Matter
    85. 85. For mo even sem re powantic er! Combining microformats Practical Microformats Voices That Matter
    86. 86. hCard and XFN Practical Microformats Voices That Matter
    87. 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. 88. hCalendar with hCard Practical Microformats Voices That Matter
    89. 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. 90. Resources Practical Microformats Voices That Matter
    91. 91. Resources *BLATANT PLUG WARNING* Practical Microformats Voices That Matter
    92. 92. RESOURCES My book! Practical Microformats Voices That Matter
    93. 93. RESOURCES My book! Microformats Made Simple Practical Microformats Voices That Matter
    94. 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. 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. 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. 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. 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. 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. 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. 101. Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Practical Microformats Voices That Matter
    102. 102. Thanks! Practical Microformats Voices That Matter

    ×