Microformats: Web Semantics & More

13,362 views
12,181 views

Published on

Presentation for InterLab 2009, covering the basics you need to start publishing microformats and, in turn, enrich and add meaning to your content.

Published in: Technology, Design
5 Comments
66 Likes
Statistics
Notes
No Downloads
Views
Total views
13,362
On SlideShare
0
From Embeds
0
Number of Embeds
425
Actions
Shares
0
Downloads
0
Comments
5
Likes
66
Embeds 0
No embeds

No notes for slide
  • Microformats: Web Semantics & More

    1. Microformats: Web Semantics & More Emily Lewis InterLab 2009 November 18 Some rights reserved.
    2. Hi! • I’m a web designer for Pitney Bowes Business Insight • I love web standards, semantic markup and CSS, accessibility, usability and microformats • I write about web design (and other topics) at A Blog Not Limited • I just wrote Microformats Made Simple Microformats: Web Semantics & More
    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 Microformats: Web Semantics & More
    4. What are microformats? Microformats: Web Semantics & More
    5. What are microformats? Microformats: Web Semantics & More
    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
    7. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats: Web Semantics & More
    8. Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More
    9. Smart content Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More
    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
    11. Huh? Microformats: Web Semantics & More
    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. Microformats: Web Semantics & More
    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. Microformats: Web Semantics & More
    14. rel="me" Microformats: Web Semantics & More
    15. XFN & Identity consolidation Assigned to links to sites that represent you online: Microformats: Web Semantics & More
    16. XFN & Identity consolidation Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Microformats: Web Semantics & More
    17. blog Microformats: Web Semantics & More
    18. blog portfolio Microformats: Web Semantics & More
    19. blog portfolio Microformats: Web Semantics & More
    20. blog portfolio Microformats: Web Semantics & More
    21. blog portfolio Microformats: Web Semantics & More
    22. blog portfolio Microformats: Web Semantics & More
    23. blog portfolio Microformats: Web Semantics & More
    24. blog portfolio Microformats: Web Semantics & More
    25. blog portfolio Microformats: Web Semantics & More
    26. blog portfolio Microformats: Web Semantics & More
    27. blog portfolio Microformats: Web Semantics & More
    28. blog portfolio Microformats: Web Semantics & More
    29. blog portfolio Microformats: Web Semantics & More
    30. blog portfolio Microformats: Web Semantics & More
    31. IdentEngine: Identity consolidation in action Microformats: Web Semantics & More
    32. Let’s talk fundamentals Microformats: Web Semantics & More
    33. The basics • Use existing standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second Microformats: Web Semantics & More
    34. The benefits • Semantics • User experience enhancements • More meaningful search results • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content Microformats: Web Semantics & More
    35. Who benefits? • Managers • Developers • Designers • Content Authors • Users Microformats: Web Semantics & More
    36. EVERYONE BENEFITS Microformats: Web Semantics & More
    37. EVERYONE BENEFITS *BLATANT PLUG WARNING* Check out Microformats Role Play for more on how microformats benefit different people Microformats: Web Semantics & More
    38. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content Microformats: Web Semantics & More
    39. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Microformats: Web Semantics & More
    40. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about. Microformats: Web Semantics & More
    41. Why? Microformats: Web Semantics & More
    42. Why? Semantics FTW! Microformats: Web Semantics & More
    43. Why? Semantics FTW! Context-specific searching: • Technorati's Tags • Operator Plug-in for Firefox Microformats: Web Semantics & More
    44. Operator Plug-in: Contextual search in action Microformats: Web Semantics & More
    45. Moving into compounds Microformats: Web Semantics & More
    46. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. Microformats: Web Semantics & More
    47. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service Microformats: Web Semantics & More
    48. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
    49. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
    50. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
    51. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Contacts Feeds Service Microformats: Web Semantics & More
    52. Oomph: Electronic business card action Microformats: Web Semantics & More
    53. Publish hCard in 3 easy steps Microformats: Web Semantics & More
    54. 1 Content STEP Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Microformats: Web Semantics & More
    55. 2 POSHify STEP Microformats: Web Semantics & More
    56. 2 POSHify STEP <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> Microformats: Web Semantics & More
    57. 3 Add hCard STEP Microformats: Web Semantics & More
    58. 3 Add hCard STEP <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> Microformats: Web Semantics & More
    59. Worth noting Microformats: Web Semantics & More
    60. Worth noting • Markup doesn't matter, but it should be POSH Microformats: Web Semantics & More
    61. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> Microformats: Web Semantics & More
    62. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive Microformats: Web Semantics & More
    63. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties Microformats: Web Semantics & More
    64. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • 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 Microformats: Web Semantics & More
    65. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars Microformats: Web Semantics & More
    66. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service Microformats: Web Semantics & More
    67. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
    68. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
    69. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
    70. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Events Feeds Service Microformats: Web Semantics & More
    71. H2VX: Electronic calendar in action Microformats: Web Semantics & More
    72. Publish hCalendar in 3 easy steps Microformats: Web Semantics & More
    73. 1 Content STEP 009 a t DOE , Inter Lab 2 a imed elopers k shop ite dev a y wor , webs a nage rs A 4-d asters r s&m w ebm p develope es. we b ap et resourc 09 of in tern 9, 20 e r 16-1 o vemb tional • N khaven Na Broo atory • abor L Microformats: Web Semantics & More
    74. 2 POSHify STEP Microformats: Web Semantics & More
    75. 2 POSHify STEP <h1><a href=”http://www.bnl.gov/ interlab09/”>InterLab 2009</a></h1> <p>A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li>November 16-19, 2009</li> <li><a href=”http://www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> Microformats: Web Semantics & More
    76. 3 Add hCalendar STEP Microformats: Web Semantics & More
    77. 3 Add hCalendar STEP <div class="vevent"> <h1><a href=”http://www.bnl.gov/interlab09/” class="summary url">InterLab 2009</a></h1> <p class="description">A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li><span class="dtstart"><span class=”value- title” title=”2009-11-16”> </span>November 16</span>-<span class="dtend"><span class=”value-title” title=”2009-11-19”> </ span>19, 2009</span></li> <li class="location"><a href=”http:// www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> </div> Microformats: Web Semantics & More
    78. Combining microformats Microformats: Web Semantics & More
    79. For mo even sem re powantic er! Combining microformats Microformats: Web Semantics & More
    80. hCalendar with hCard Microformats: Web Semantics & More
    81. hCalendar with hCard <div class=”vevent”> ... <li class=”location vcard”> <a href=”http://www.bnl.gov/” class=”fn org url”>Brookhaven National Laboratory</a> <ul class=”adr”> <li class=”post-office-box”>P.O. Box 5000</li> <li><span class=”locality”>Upton</span>, <abbr title=”New York” class=”region”>NY</abbr> <span class=”postal-code”>11973</span></li> </ul> </li> ... </div> Microformats: Web Semantics & More
    82. Microformats you can use now • 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 Microformats: Web Semantics & More
    83. 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 Microformats: Web Semantics & More
    84. 6,137,400,000 Microformats: Web Semantics & More
    85. 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 Microformats: Web Semantics & More
    86. 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 Microformats: Web Semantics & More
    87. Microformats in the wild • XFN: Twitter Flickr 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 • hCalendar: Yahoo! Upcoming MapQuest Local Facebook, Last.fm Eventful • hResume: LinkedIn SimplyHired Microformats: Web Semantics & More
    88. Getting started Microformats: Web Semantics & More
    89. Getting started *BLATANT PLUG WARNING* Microformats: Web Semantics & More
    90. My new book! Microformats: Web Semantics & More
    91. My new book! Available for sale on Amazon Microformats: Web Semantics & More
    92. My new book! Available for sale on Amazon Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET* Microformats: Web Semantics & More
    93. My blog tutorials Getting Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern Microformats: Web Semantics & More
    94. 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 Microformats: Web Semantics & More
    95. Authoring tools • hCard Creator • hCalendar Creator • hReview Creator • Optimus Microformats Transformer also offers a validator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in Microformats: Web Semantics & More
    96. Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Microformats: Web Semantics & More
    97. Thanks! Microformats: Web Semantics & More

    ×