Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Microformats or: How I Learned to Write POSH and Love the Semantic Web

39c8ef13c693c8d143679be9e3d8cf02?s=47 Emily Lewis
October 04, 2011

Microformats or: How I Learned to Write POSH and Love the Semantic Web

Session for In Control Orlando, covering the basics and benefits of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes a discussion about POSH, HTML5 and ARIA roles.

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

October 04, 2011
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved. Microformats Emily Lewis In Control February 22,

    2011 or: How I Learned to Write POSH and Love the Semantic Web
  2. http://microformatsmadesimple.com/resources.php

  3. http://bit.ly/fj0BPW http://microformatsmadesimple.com/resources.php

  4. Today will be awesome! You’re gonna 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
  5. But wait! There’s more! You’ll also learn about: • Semantic

    markup! • Machines! • HTML5 microdata! • ARIA Landmark Roles!
  6. But wait! There’s more! You’ll also learn about: • Semantic

    markup! • Machines! • HTML5 microdata! • ARIA Landmark Roles! SEMANTIC FREAK
  7. Freelance Web Designer http://emilylewisdesign.com Author, Microformats Made Simple http://microformatsmadesimple.com Email:

    emily@emilylewisdesign.com Blog: http://ablognotlimited.com Twitter: @emilylewis
  8. I’m an organizer

  9. None
  10. I like order

  11. I like order Especially in my HTML

  12. <3 at first sight Web standards • Guidelines and best

    practices • More efficient • Great for team-based development • Structured content • Semantic markup MIX Online: Web Standards: Where the ROI Is
  13. <3 at first sight Web standards • Guidelines and best

    practices • More efficient • Great for team-based development • Structured content • Semantic markup GATEWAY DRUG MIX Online: Web Standards: Where the ROI Is
  14. Just say yes! Now, I’m hooked on

  15. Just say yes! Now, I’m hooked on • Plain Old

    Semantic Markup (POSH)
  16. Just say yes! Now, I’m hooked on • Plain Old

    Semantic Markup (POSH) • Semantic CSS
  17. Just say yes! Now, I’m hooked on • Plain Old

    Semantic Markup (POSH) • Semantic CSS • Microformats
  18. Just say yes! Now, I’m hooked on • Plain Old

    Semantic Markup (POSH) • Semantic CSS • Microformats • HTML5’s new structural elements
  19. Just say yes! Now, I’m hooked on • Plain Old

    Semantic Markup (POSH) • Semantic CSS • Microformats • HTML5’s new structural elements • ARIA roles
  20. What are microformats?

  21. Microformats Wiki: What Are Microformats

  22. Designed for humans first and machines second, microformats are a

    set of simple, open data formats built upon existing and widely adopted standards. Microformats Wiki: What Are Microformats
  23. Designed for humans first and machines second, microformats are a

    set of simple, open data formats built upon existing and widely adopted standards. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats Wiki: What Are Microformats
  24. Smart content Microformats Wiki: What Are Microformats

  25. Building blocks that enable users to own, control, move and

    share their data on the web. Smart content Microformats Wiki: What Are Microformats
  26. Building blocks that enable users to own, control, move and

    share their data on the web. Smart content Markup, with more meaning Microformats Wiki: What Are Microformats
  27. huh?

  28. Microformats are sets of HTML attributes and values that are

    applied to common web content to describe that content and give it more meaning.
  29. <a href="/tags/css/">CSS</a>

  30. <a href="/tags/css/" rel="tag">CSS</a> Microformats Wiki: rel-tag

  31. 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
  32. And even more drafts • hAtom: syndicated content • hAudio:

    audio content • hListing: open, distributed listings • hMedia: video, images and audio media • hNews: journalistic news • hProduct: consumer products • hRecipe: food and beverage recipes • hResume: Résumés and C.V.s • hReview: reviews • xFolk: bookmarks
  33. Formal vs. Draft Formal microformats are those that are stable

    and unlikely to change. Draft microformats are relatively far along in the specification process, but haven’t been formally completed. They are subject to change.
  34. The Basics Use existing standards • vCard: hCard • iCalendar:

    hCalendar • Atom: hAtom • Other microformats and naming principles • rel • class • rev • (X)HTML
  35. The Basics Use existing standards • vCard: hCard • iCalendar:

    hCalendar • Atom: hAtom • Other microformats and naming principles • rel • class • rev • HTML5
  36. The Basics It’s all about semantics • Core purpose is

    to add meaning • Publish with POSH
  37. “Self describing” - Chris Mills

  38. So icky Not POSH <table> <tr> <td><a href="/">Home</a></td> <td><a href="/products/">Products</a></td>

    <td><a href="/services/">Services</a></td> <td><a href="/about/">About</a></td> </tr> </table> <div> <p><a href="/">Home</a></p> <p><a href="/products/">Products</a></p> <p><a href="/services/">Services</a></p> <p><a href="/about/">About</a></p> </div> Also not POSH
  39. So pretty POSH <ul id="nav"> <li><a href="/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a

    href="/services/">Services</a></li> <li><a href="/about/">About</a></li> </ul>
  40. The Basics Address a specific “problem” • Common, real-world web

    content • People • Organizations • Events • Blog posts • Reviews • Tags
  41. The Basics Intentionally simple • Easy to learn and use

    • Based on current human behavior on the web • Aimed at 80% of use-cases; the most common
  42. The Basics Humans 1st, machines 2nd • Human-readable content •

    From a user’s perspective, web content published with microformats is indistinguishable from that published without. • “Invisible” metadata for machine readability
  43. Not http://www.flickr.com/photos/sebke/3567653086/in/photostream/

  44. Machines! • Search engines • Browsers • Assistive technologies •

    User agents • Applications
  45. Why?

  46. Machine Readability The Benefits Humans Understand

  47. Machine Readability The Benefits Humans Understand Please join us on

    Sunday, February 20 for the In Control welcome happy hour at the Embassy Suites bar.
  48. Machine Readability The Benefits Humans Understand Please join us on

    Sunday, February 20 for the In Control welcome happy hour at the Embassy Suites bar. Machines Don’t Blahblah blahbliby blah blahblahblibity blah blah blahblah blahblahblibity blah
  49. Machine Readability The Benefits • Content published with microformats is

    parsable. It can be extracted and indexed, downloaded, searched for, saved, cross- referenced and combined. • Web site becomes an API, enabling sharing and re-use of content.
  50. Enhanced user experience The Benefits • Download to address book

    • Download to calendar • More meaningful search results • Findability
  51. Google Rich Snippets: More meaningful search

  52. Minimal investment The Benefits • Easy to learn • Easy

    to implement • No need for special software • No need to learn new technologies
  53. Encourages standards The Benefits • Web standards • Valid, semantic

    markup • Workflows and processes for development teams • Consistent markup • Standard naming conventions for styling
  54. 6,137,400,000+ published Yahoo! SearchMonkey results as of 12/17/09

  55. 6,137,400,000+ Peer pressure • 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 37Signals Google Maps Yahoo! Local Google Profiles Twitter Last.fm MySpace • hCalendar: Yahoo! Upcoming MapQuest Local Facebook Last.fm Eventful
  56. 6,137,400,000+ Peer pressure • 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 Microformats Wiki: Examples in the Wild
  57. Get your laptops ready! http://bit.ly/fj0BPW

  58. Elemental microformats • Single attribute-value pair • Often used as

    building blocks for other microformats
  59. rel-tag Elementals <a href="/tags/css/" rel="tag">css</a> Describes the relationship of links

    containing tags (keywords) to your content: The rel="tag" attribute-value pair indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about.
  60. What can you do with rel-tag? Elementals • Context-specific search

    • Technorati's Tags • Operator Add-on for Firefox
  61. Operator Add-on: Contextual search

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

    to links to sites that represent you online:
  63. blog

  64. blog portfolio

  65. blog portfolio

  66. blog portfolio

  67. blog portfolio

  68. blog portfolio

  69. blog portfolio

  70. blog portfolio

  71. blog portfolio

  72. What can you do with rel-me? Elementals • Identity consolidation

    • Ident Engine • Huffduffer
  73. Ident Engine: Identity consolidation

  74. XFN Elementals XFN is used to describe social relationships among

    people me is just one of the values for the XFN microformat
  75. XFN Elementals Relationship XFN rel Values Friendship (one value) contact

    acquaintance friend Professional (one or both values) colleague co-worker Family (one value) kin spouse child parent sibling Romantic (any or all values) muse crush date sweetheart Physical met Geographic (one value) neighbor co-resident Identity me
  76. XFN Elementals For links to other people’s identities online, you

    can apply XFN to indicate your social relationship with that person: <a href="http://www.christopherschmitt.com/" rel="met friend colleague muse"> Christopher Schmitt</a>
  77. Still with me?

  78. Compound microformats • Several attribute-value pairs (properties and sub-properties) •

    Utilize other microformats as building blocks
  79. hCard Compounds Adds semantics to contact information for people, places

    and organizations/companies. Contact information published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit • Michromeformats extension for Chrome
  80. Michromeformats: Electronic business card

  81. hCard in 3 easy steps Compounds 1. Identify content 2.

    POSHify 3. Add hCard
  82. 1 STEP Emily Lewis Emily Lewis Design, LLC Albuquerque, NM

    87106 emily@emilylewisdesign.com Start with Content
  83. 2 STEP POSHify <dl> <dt>Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com">Emily Lewis Design,

    LLC</a></dd> <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  84. 3 STEP Add the root vcard to the element containing

    all of the contact information. Then, add the relevant hCard properties and sub-properties via the class attribute Web Content hCard class Values Name (first and last) fn Web site url Address adr City locality State region ZIP postal-code Email email Add hCard
  85. 3 STEP <dl class="vcard"> <dt>Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com">Emily Lewis Design,

    LLC</a></dd> <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  86. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com">Emily Lewis

    Design, LLC</a></dd> <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  87. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  88. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd class="adr">Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  89. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico">NM</abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  90. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> 87106</dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  91. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd> <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  92. 3 STEP <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd><a href="http://emilylewisdesign.com" class="url">Emily

    Lewis Design, LLC</a></dd> <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd> <dd><a href="mailto:emily@emilylewisdesign.com" class="email">emily@emilylewisdesign.com</a></dd> </dl> Add hCard
  93. Non-semantic elements A Closer Look <dd class="adr"> <span class="locality">Albuquerque</span>, <abbr

    title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span> </dd>
  94. Don’t forget validation! A Closer Look • W3C Markup Validation

    Service • Optimus Microformats Transformer
  95. Also 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
  96. hCalendar Compounds Adds semantics to event information. Event information published

    with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit • Michromeformats extension for Chrome
  97. H2VX: Electronic calendar

  98. hCalendar in 3 easy steps Compounds 1. Identify content 2.

    POSHify 3. Add hCalendar
  99. 1 STEP SXSWi 2011 A 5-day conference celebrating the creativity

    and passion behind the coolest new media technologies • March 11-15, 2011 • Austin Convention Center Start with Content
  100. 2 STEP POSHify <h1><a href="http://sxsw.com/interactive">SXSWi 2011</a></h1> <p>A 5-day conference celebrating

    the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul>
  101. 3 STEP Add the root vevent to the element containing

    all of the contact information. Then, add the relevant hCalendar properties and sub-properties via the class attribute Web Content hCalendar class Values Event name summary Web site url Description description Type of event category Start date dtstart End date dtend Location location Add hCalendar
  102. <div class="vevent"> <h1><a href="http://sxsw.com/interactive">SXSWi 2011</a></h1> <p>A 5-day conference celebrating the

    creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> Add hCalendar 3 STEP
  103. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive">SXSWi 2011</a></h1> <p>A 5-day conference

    celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  104. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p>A 5-day

    conference celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  105. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p class="description">A

    5-day conference celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  106. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p class="description">A

    5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  107. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p class="description">A

    5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li><span class="dtstart"><span class="value- title" title="2011-03-11"> </span>March 11</ span>-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  108. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p class="description">A

    5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li><span class="dtstart"><span class="value- title" title="2011-03-11"> </span>March 11</span>- <span class="dtend"><span class="value-title" title="2011-03-15"> </span>15, 2011</span></li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
  109. <div class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> <p class="description">A

    5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li><span class="dtstart"><span class="value- title" title="2011-03-11"> </span>March 11</span>- <span class="dtend"><span class="value-title" title="2011-03-15"> </span>15, 2011</span></li> <li class="location">Austin Convention Center</li> </ul> 3 STEP Add hCalendar
  110. Value class pattern A Closer Look <span class="dtstart"><span class="value-title" title="2011-03-11">

    </span>March 11</span> Offers authors several options for marking up date-time information: • Machine-readable date information is the title attribute value • Screen-readers won’t read the title value • No tooltip Microformats Wiki: Value Class Pattern
  111. Combining microformats

  112. Combining microformats For even more semantic power!

  113. hCard with rel-me Combining Microformats <dl class="vcard"> <dt class="fn">Emily Lewis</dt>

    <dd><a href="http://emilylewisdesign.com" class="url" rel="me">Emily Lewis Design, LLC</a></dd> <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd> <dd><a href="mailto:emily@emilylewisdesign.com" class="email"> emily@emilylewisdesign.com</a></dd> </dl>
  114. hCalendar with hCard Combining Microformats <div class="vevent"> ... <li class="location

    vcard"><a href="http:// www.austinconventioncenter.com" class="fn org url">Austin Convention Center</a> <ul class="adr"> <li class="street-address">500 East Cesar Chavez Street</li> <li><span class="locality">Austin</span>, <abbr title="Texas" class="region">TX</abbr> <span class="postal-code">78701</span></li> </ul> </li>
  115. The Slippery Semantic Slope

  116. New structural elements HTML5 • <section> • <header> • <footer>

    • <nav> • <aside> • <article>
  117. New structural elements HTML5 <section class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive"

    class="url">SXSWi 2011</a></h1> ... </section>
  118. Microformats

  119. Microformats RDFa

  120. Microformats microdata RDFa

  121. Fight! Fight! Fight! http://www.flickr.com/photos/sebke/3567653086/in/photostream/

  122. Microdata HTML5 <dl> <dt><a href="http://ablognotlimited.com">Emily Lewis</a></dt> <dd>Albuquerque, <abbr title="New Mexico">NM</abbr>

    87106</dd> </dl>
  123. Microdata HTML5 <dl itemscope itemtype="http://data-vocabulary.org/ Person"> <dt itemprop="name"><a href="http:// ablognotlimited.com"

    itemprop="url">Emily Lewis</a></ dt> <dd itemprop="address" itemscope itemtype="http:// data-vocabulary.org/Address"><span itemprop="locality">Albuquerque</span>, <abbr title="New Mexico" itemprop="region">NM</abbr> <span itemprop="postal-code">87106</span></dd> </dl>
  124. Microdata & microformats Two Stones, One Bird <dl class="vcard" itemscope

    itemtype="http://data- vocabulary.org/Person"> <dt class="fn" itemprop="name"><a href="http:// ablognotlimited.com" class="url" itemprop="url">Emily Lewis</a></dt> <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"><span class="locality" itemprop="locality">Albuquerque</ span>, <abbr title="New Mexico" class="region" itemprop="region">NM</abbr> <span class="postal-code" itemprop="postal-code">87106</span></dd> </dl>
  125. ARIA Roles

  126. ARIA • Set of guidelines from WAI for accessible, rich

    internet applications • Includes Document Landmark Roles to indicate document structure and aid navigation
  127. Document Landmark Roles • role="banner" • role="navigation" • role="main" •

    role="search" • role="article" • role="complementary" • role="contentinfo" ARIA not needed on <nav> not needed on <aside> not needed on <footer> Paciello Group: Using WAI ARIA Landmark Roles
  128. <div id="header" role="banner"> <h1><a href="/">The Law Office of Jimbob Smith</a></h1>

    <a href="/"><img src="logo.png" alt="Jimbob Legal"/></a> </div> <ul role="navigation"> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> Adding roles - XHTML ARIA
  129. <header role="banner"> <a href="/"> <h1>The Law Office of Jimbob Smith</h1>

    <img src="logo.png" alt="Jimbob Legal" /> </a> </header> <nav> <ul> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> </nav> Adding roles - HTML5 ARIA
  130. Semantics FTW!

  131. • All resources and demo links from this deck •

    Authoring tools • Further reading One stop shop Resources http://bit.ly/fj0BPW http://microformatsmadesimple.com/resources.php
  132. Questions?

  133. Thanks!