Microformats: Web Semantics & More

9,570
-1

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
9,570
On Slideshare
0
From Embeds
0
Number of Embeds
6
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

    ×