Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Microforma                          Emily Lewis               In Control February 22, 2011 Some rights reserved.
Microformaor: How I Learned to Write                          Emily Lewis               In Control February 22, 2011 Some ...
http://bit.ly/fj0BPWhttp://microformatsmadesimple.com/resources.php
Today will be awesome!You’re gonna• What are microformats• Benefits of microformats• How to enrich your content with some c...
But wait! There’s more!You’ll also learn• Semantic markup!• Machines!• HTML5 microdata!• ARIA Landmark Roles!
But wait! There’s more!You’ll also learn• Semantic markup!• Machines!• HTML5 microdata!• ARIA Landmark Roles!             ...
Freelance Web Designerhttp://emilylewisdesign.comAuthor, Microformats Made Simplehttp://microformatsmadesimple.comEmail:  ...
I’m anorganizer
I like order
I like order  Especially in my HTML
MIX Online: Web Standards: Where<3 at first sight                                    the ROI IsWeb standards• Guidelines an...
MIX Online: Web Standards: Where<3 at first sight                                    the ROI IsWeb standards• Guidelines an...
Just say yes!Now, I’m hooked
Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)
Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS
Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats
Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats• HTML5’s new structural elements
Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats• HTML5’s new structural element...
What aremicroformats?
Microformats Wiki: What Are              Microformats
Microformats Wiki: What Are                                MicroformatsDesigned for humans first and machinessecond, microf...
Microformats Wiki: What Are                                                                MicroformatsMicroformats enable...
Microformats Wiki: What Are                        Microformats Smartcontent
Microformats Wiki: What Are                                                  Microformats Smartcontent          Building b...
Microformats Wiki: What Are                                                  Microformats Smartcontent          Building b...
huh?
Microformats are sets ofHTML attributes andvalues that are applied tocommon web content todescribe that content andgive it...
<a href="/tags/css/">CSS</a>
Microformats Wiki: rel-tag<a href="/tags/css/" rel="tag">CSS</a>
Formalmicroformats• hCalendar: event information• hCard: contact information• rel-license: license links• rel-nofollow: re...
And even more• hAtom: syndicated     • hProduct: content                 consumer• hAudio: audio          products content...
Formal vs. DraftFormal microformats are thosethat are stable and unlikely tochange.Draft microformats are relativelyfar al...
The BasicsUse existing• (X)HTML • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats a...
The BasicsUse existing• HTML5 • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats and...
The BasicsIt’s all about• Core purpose is to add meaning• Publish with POSH
“Selfdescribing”        - Chris Mills
So icky   Not POSH   <table>    <tr>     <td><a    href="/">Home</a></td>        <td><a   href="/products/">Products</a></...
So prettyPOSH<ul id="nav"> <li><a href="/">Home</a></li>   <li><a href="/products/">Products</a></li>   <li><a href="/serv...
The BasicsAddress a specific• Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags
The BasicsIntentionally• Easy to learn and use• Based on current human behavior on the web• Aimed at 80% of use-cases; the...
The BasicsHumans 1st,• Human-readable content • From a user’s perspective, web content   published with microformats is   ...
Nothttp://www.flickr.com/photos/sebke/3567653086/in/photostream/
Machines!• Search engines• Browsers• Assistive technologies• User agents• Applications
Why?
The BenefitsMachineHumans Understand
The BenefitsMachineHumans UnderstandPlease join us on Sunday,February 20 for the InControl welcome happyhour at the Embassy...
The BenefitsMachineHumans Understand           Machines Don’tPlease join us on Sunday,   Blahblah blahbliby blahFebruary 20...
The BenefitsMachine• Content published with microformats is parsable. It can be extracted and indexed, downloaded, searched...
The BenefitsEnhanced user• Download to address book• Download to calendar• More meaningful search results• Findability
Google Rich Snippets:
The BenefitsMinimalinvestment•Easy to learn• Easy to implement• No need for special software• No need to learn new technolo...
The BenefitsEncouragesstandards•Web standards • Valid, semantic markup• Workflows and processes for development teams • Cons...
6,137,400,000 + published   Yahoo! SearchMonkey results as of 12/17/09
Peer pressure6,137,400,000+• XFN:    Twitter Flickr Huffduffer Digg LinkedIn  Plaxo Technorati Last.fm Google Social Graph...
Peer pressure6,137,400,000+• hResume:      LinkedIn   SimplyHired     Stack Overflow• hReview:   Google Rich Snippets Yelp ...
Get yourlaptops ready!    http://bit.ly/fj0BPW
Elementalmicroformats•Single attribute-value pair• Often used as building blocks for other microformats
Elementalsrel-tagDescribes the relationship of links containingtags (keywords) to your content:<a href="/tags/css/" rel="t...
ElementalsWhat can you dowith rel-tag?• Context-specific search • Technoratis Tags • Operator Add-on for Firefox
Operator Add-     on:
Elementalsrel-meAssigned to links to sites that represent youonline:<a href="http://ablognotlimited.com" rel="me">A Blog N...
blog
blog       portfoli          o
blog       portfoli          o
blog       portfoli          o
blog       portfoli          o
blog       portfoli          o
blog       portfoli          o
blog       portfoli          o
blog       portfolio
ElementalsWhat can you dowith consolidation• Identity rel-me? • Ident Engine • Huffduffer
Ident Engine:   Identity consolidation
ElementalsXFNmeis just one of the values for the XFNmicroformatXFN is used to describe social relationshipsamong people
ElementalsXFNRelationship                   XFN rel ValuesFriendship (one value)         contact    acquaintance      frie...
ElementalsXFNFor links to other people’s identities online,you can apply XFN to indicate your socialrelationship with that...
Still with me?
Compoundmicroformats•Several attribute-value pairs (properties and sub-properties)• Utilize other microformats as building...
CompoundshCardAdds semantics to contact information forpeople, places and organizations/companies.Contact information publ...
Michromeform     ats:  Electronic
CompoundshCard in 3 easysteps1. Identify content2. POSHify3. Add hCard
1       Start with ContentSTEP                  Emily Lewis                  Emily Lewis Design, LLC                  Albu...
2       POSHifySTEP   <dl>      <dt>Emily Lewis</dt>         <dd><a href="http://emilylewisdesign.com">Emily   Lewis Desig...
3       Add hCardSTEP       Add the root vcard to the element containing all of the       contact information. Then, add t...
3       Add hCardSTEP   <dl class="vcard">      <dt>Emily Lewis</dt>         <dd><a href="http://emilylewisdesign.com">Emi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
3       Add hCardSTEP   <dl class="vcard">      <dt class="fn">Emily Lewis</dt>         <dd><a href="http://emilylewisdesi...
A Closer LookNon-semanticelements<dd class="adr">  <span class="locality">Albuquerque</span>,  <abbr title="New Mexico" cl...
A Closer LookDon’t forgetvalidation!•W3C Markup Validation Service• Optimus Microformats Transformer
Also worth• Markup doesnt matter, but it should be POSH• Attribute values are case-sensitive• Root properties cannot be co...
CompoundshCalendarAdds semantics to event information.Event information published with hCalendarcan be extracted and impor...
H2VX:Electronic calendar
CompoundshCalendar in 3easy steps1. Identify content2. POSHify3. Add hCalendar
1       Start with ContentSTEP                            011               b rating d                 SX  SWi 2          ...
2       POSHifySTEP   <h1><a href="http://sxsw.com/interactive">SXSWi   2011</a></h1>   <p>A 5-day conference celebrating ...
3       Add hCalendarSTEP       Add the root vevent to the element containing all of       the contact information. Then, ...
3       Add hCalendarSTEP   <div class="vevent">       <h1><a href="http://sxsw.com/interactive">SXSWi       2011</a></h1>...
3       Add hCalendarSTEP   <div class="vevent">       <h1 class="summary"><a href="http://sxsw.com/       interactive">SX...
3       Add hCalendarSTEP   <div class="vevent">       <h1 class="summary"><a href="http://sxsw.com/       interactive" cl...
3       Add hCalendarSTEP   <div class="vevent">       <h1 class="summary"><a href="http://sxsw.com/       interactive" cl...
3       Add hCalendarSTEP   <div class="vevent">       <h1 class="summary"><a href="http://sxsw.com/       interactive" cl...
3       Add hCalendarSTEP   <div class="vevent">       <h1 class="summary"><a href="http://sxsw.com/       interactive" cl...
Upcoming SlideShare
Loading in …5
×

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

18,081 views

Published on

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.

Published in: Technology, Design
  • Great deck ... thanks for sharing!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • its albert, i am a walking branding fail. its fun.
    i could not agree with you more on all of that. well said.

    random note: when i started getting attacked on twitter because my site doesn't validate, i knew i'd crossed a plateau. it was great.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey Albert (or do you go by J?) - Only today saw this comment. Many apologies for not responding sooner.

    I still think it is fine to go for the draft (or 'non-formalized') microformats. The slides may not have reflected it, but it is still part of my message. hRecipe, for example, is a draft and Google is using it to drive it's (super cool) recipe search app(? ... if you can call it that?). So just because a microformat is considered a draft (this terminology will be changing in microformats v2), doesn't mean it can't offer the structured data you are looking for. So, yes, go forth and use ... just make a point to stay up-to-date.

    As for the mothereffin unquoted attributes ... I don't usually subscribe to 'movements.' They cause heavy sighs ... I recognize it is fantastic for informed folks to write and talk about different ways to approach what we do. And http://mathiasbynens.be/notes/unquoted-attribute-values seems relatively informed.

    My beef is that uninformed (or lazy or don't-know-betters) will follow like lemmings, rather than taking the time to thoughtfully consider their projects, their work and their workflows. Those three points are always the key drivers of me 'following' anything. If it works for my needs then I will consider it and try. In my experience, that is a minority mentality... you can see it even in the standards world: validating for validation's sake.

    For me, it's about being informed and I just feel sorry for the lemmings and their clients (or employers)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • man, i can't believe i missed this for four months...i'm slipping yo. great presentation, now how in the hell do we get the HTML5 demo army to read through it? i'm not even joking.
    A few years ago @ CSS Summit, you said to go ahead and use the non-formalized microformats, as i took it, because in worse case scenario, should they not become part of a spec, the only harm done is maybe some classitus and/or random classes that nonPOSHers will never make sense of. i took that to heart and it's been a part of my workflow ever since. but i didn't see it in the slides above; is that because of microdata/rdfa in the mix?
    regardless, great presentation, per usual.
    random closing note - how do you feel about the mothereffin unquoted attribute value movement? thrilled, i am not.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. Microforma Emily Lewis In Control February 22, 2011 Some rights reserved.
  2. Microformaor: How I Learned to Write Emily Lewis In Control February 22, 2011 Some rights reserved.
  3. http://bit.ly/fj0BPWhttp://microformatsmadesimple.com/resources.php
  4. Today will be awesome!You’re gonna• 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• Semantic markup!• Machines!• HTML5 microdata!• ARIA Landmark Roles!
  6. But wait! There’s more!You’ll also learn• Semantic markup!• Machines!• HTML5 microdata!• ARIA Landmark Roles! SEMA NTIC FREAK
  7. Freelance Web Designerhttp://emilylewisdesign.comAuthor, Microformats Made Simplehttp://microformatsmadesimple.comEmail: emily@emilylewisdesign.comBlog: http://ablognotlimited.comTwitter: @emilylewis
  8. I’m anorganizer
  9. I like order
  10. I like order Especially in my HTML
  11. MIX Online: Web Standards: Where<3 at first sight the ROI IsWeb standards• Guidelines and best practices• More efficient• Great for team-based development• Structured content• Semantic markup
  12. MIX Online: Web Standards: Where<3 at first sight the ROI IsWeb standards• Guidelines and best practices• More efficient• Great for team-based development• Structured contentGATE• Semantic markupWAY
  13. Just say yes!Now, I’m hooked
  14. Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)
  15. Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS
  16. Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats
  17. Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats• HTML5’s new structural elements
  18. Just say yes!Now, I’m hooked• Plain Old Semantic Markup (POSH)• Semantic CSS• Microformats• HTML5’s new structural elements• ARIA roles
  19. What aremicroformats?
  20. Microformats Wiki: What Are Microformats
  21. Microformats Wiki: What Are MicroformatsDesigned for humans first and machinessecond, microformats are a set of simple,open data formats built upon existingand widely adopted standards.
  22. Microformats Wiki: What Are MicroformatsMicroformats enable thepublishing and sharing ofhigher fidelity information onthe web. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
  23. Microformats Wiki: What Are Microformats Smartcontent
  24. Microformats Wiki: What Are Microformats Smartcontent Building blocks that enable users to own, control, move and share their data on the web.
  25. Microformats Wiki: What Are Microformats Smartcontent Building blocks that enable users to own, control, move and Markup, with share their data on the more web. meaning
  26. huh?
  27. Microformats are sets ofHTML attributes andvalues that are applied tocommon web content todescribe that content andgive it more meaning.
  28. <a href="/tags/css/">CSS</a>
  29. Microformats Wiki: rel-tag<a href="/tags/css/" rel="tag">CSS</a>
  30. Formalmicroformats• 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
  31. And even more• hAtom: syndicated • hProduct: content consumer• hAudio: audio products content • hRecipe: food and• hListing: open, beverage recipes distributed listings • hResume:• hMedia: video, Résumés and C.V.s images and audio media • hReview: reviews• hNews: journalistic • xFolk: bookmarks news
  32. Formal vs. DraftFormal microformats are thosethat are stable and unlikely tochange.Draft microformats are relativelyfar along in the specificationprocess, but haven’t been formallycompleted. They are subject to
  33. The BasicsUse existing• (X)HTML • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats and naming principles
  34. The BasicsUse existing• HTML5 • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats and naming principles
  35. The BasicsIt’s all about• Core purpose is to add meaning• Publish with POSH
  36. “Selfdescribing” - Chris Mills
  37. 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>Also not POSH <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>
  38. So prettyPOSH<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>
  39. The BasicsAddress a specific• Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags
  40. The BasicsIntentionally• Easy to learn and use• Based on current human behavior on the web• Aimed at 80% of use-cases; the most common
  41. The BasicsHumans 1st,• Human-readable content • From a user’s perspective, web content published with microformats is indistinguishable from that published without.• “Invisible” metadata for machine readability
  42. Nothttp://www.flickr.com/photos/sebke/3567653086/in/photostream/
  43. Machines!• Search engines• Browsers• Assistive technologies• User agents• Applications
  44. Why?
  45. The BenefitsMachineHumans Understand
  46. The BenefitsMachineHumans UnderstandPlease join us on Sunday,February 20 for the InControl welcome happyhour at the EmbassySuites bar.
  47. The BenefitsMachineHumans Understand Machines Don’tPlease join us on Sunday, Blahblah blahbliby blahFebruary 20 for the In blahblahblibity blahControl welcome happy blah blahblahhour at the EmbassySuites bar. blahblahblibity blah
  48. The BenefitsMachine• 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.
  49. The BenefitsEnhanced user• Download to address book• Download to calendar• More meaningful search results• Findability
  50. Google Rich Snippets:
  51. The BenefitsMinimalinvestment•Easy to learn• Easy to implement• No need for special software• No need to learn new technologies
  52. The BenefitsEncouragesstandards•Web standards • Valid, semantic markup• Workflows and processes for development teams • Consistent markup • Standard naming conventions for styling
  53. 6,137,400,000 + published Yahoo! SearchMonkey results as of 12/17/09
  54. Peer pressure6,137,400,000+• 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
  55. Peer pressure6,137,400,000+• 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
  56. Get yourlaptops ready! http://bit.ly/fj0BPW
  57. Elementalmicroformats•Single attribute-value pair• Often used as building blocks for other microformats
  58. Elementalsrel-tagDescribes the relationship of links containingtags (keywords) to your content:<a href="/tags/css/" rel="tag">css</a>The rel="tag" attribute-value pair indicates thelink destination (href) is to a page that tellswhat the current page - or part of the current
  59. ElementalsWhat can you dowith rel-tag?• Context-specific search • Technoratis Tags • Operator Add-on for Firefox
  60. Operator Add- on:
  61. Elementalsrel-meAssigned to links to sites that represent youonline:<a href="http://ablognotlimited.com" rel="me">A Blog Not Limited</a>
  62. blog
  63. blog portfoli o
  64. blog portfoli o
  65. blog portfoli o
  66. blog portfoli o
  67. blog portfoli o
  68. blog portfoli o
  69. blog portfoli o
  70. blog portfolio
  71. ElementalsWhat can you dowith consolidation• Identity rel-me? • Ident Engine • Huffduffer
  72. Ident Engine: Identity consolidation
  73. ElementalsXFNmeis just one of the values for the XFNmicroformatXFN is used to describe social relationshipsamong people
  74. ElementalsXFNRelationship XFN rel ValuesFriendship (one value) contact acquaintance friendProfessional (one or both colleague co-workervalues)Family (one value) kin spouse child parent siblingRomantic (any or all values) muse crush date sweetheartPhysical metGeographic (one value) neighbor co-residentIdentity me
  75. ElementalsXFNFor links to other people’s identities online,you can apply XFN to indicate your socialrelationship with that person:<a href="http://www.christopherschmitt.com/"rel="met friend colleague muse">Christopher Schmitt</a>
  76. Still with me?
  77. Compoundmicroformats•Several attribute-value pairs (properties and sub-properties)• Utilize other microformats as building blocks
  78. CompoundshCardAdds semantics to contact information forpeople, places and organizations/companies.Contact information published with hCardcan be transformed into an electronicbusiness card.• H2VX Contacts Conversion Service• Operator Add-on for Firefox• Tails Export Add-on for Firefox• Oomph Microformats Toolkit
  79. Michromeform ats: Electronic
  80. CompoundshCard in 3 easysteps1. Identify content2. POSHify3. Add hCard
  81. 1 Start with ContentSTEP Emily Lewis Emily Lewis Design, LLC Albuquerque, NM 87106 emily@emilylewisdesign.com
  82. 2 POSHifySTEP <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>
  83. 3 Add hCardSTEP 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
  84. 3 Add hCardSTEP <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>
  85. 3 Add hCardSTEP <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>
  86. 3 Add hCardSTEP <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>
  87. 3 Add hCardSTEP <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>
  88. 3 Add hCardSTEP <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>
  89. 3 Add hCardSTEP <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>
  90. 3 Add hCardSTEP <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>
  91. 3 Add hCardSTEP <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>
  92. A Closer LookNon-semanticelements<dd class="adr"> <span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></dd>
  93. A Closer LookDon’t forgetvalidation!•W3C Markup Validation Service• Optimus Microformats Transformer
  94. Also worth• Markup doesnt matter, but it should be POSH• Attribute values are case-sensitive• Root properties cannot be combined with sub-properties• You dont need additional class values for styling, but you can use them
  95. CompoundshCalendarAdds semantics to event information.Event information published with hCalendarcan be extracted and imported into userscalendars• H2VX Events Conversion Service• Operator Add-on for Firefox• Tails Export Add-on for Firefox• Oomph Microformats Toolkit• Michromeformats extension for Chrome
  96. H2VX:Electronic calendar
  97. CompoundshCalendar in 3easy steps1. Identify content2. POSHify3. Add hCalendar
  98. 1 Start with ContentSTEP 011 b rating d SX SWi 2 c e cele n behin n feren passio ay co ty and A 5-d eativi media r the c olest new the coologies techn , 2011 11-15 enter • March ention C n Conv • Austi
  99. 2 POSHifySTEP <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>
  100. 3 Add hCalendarSTEP 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 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
  101. 3 Add hCalendarSTEP <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>
  102. 3 Add hCalendarSTEP <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>
  103. 3 Add hCalendarSTEP <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>
  104. 3 Add hCalendarSTEP <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>
  105. 3 Add hCalendarSTEP <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>
  106. 3 Add hCalendarSTEP <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>
  107. 3 Add hCalendarSTEP <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>
  108. 3 Add hCalendarSTEP <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>
  109. Microformats Wiki: Value ClassA Closer Look PatternValue classpatternOffers authors several options for markingup date-time information:<span class="dtstart"><span class="value-title"title="2011-03-11"> </span>March 11</span>• Machine-readable date information is the title attribute value• Screen-readers won’t read the title value• No tooltip
  110. Combiningmicroformats
  111. For e morven sema e Combining n powe tic r!microformats
  112. Combining Microformats hCard with rel-me<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"><spanclass="locality">Albuquerque</span>, <abbr title="NewMexico" 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>
  113. Combining Microformats hCalendar with hCard<div class="vevent">... <li class="location vcard"><a href="http://www.austinconventioncenter.com" class="fn orgurl">Austin Convention Center</a> <ul class="adr"> <li class="street-address">500 East CesarChavez Street</li> <li><span class="locality">Austin</span>,<abbr title="Texas" class="region">TX</abbr> <spanclass="postal-code">78701</span></li> </ul> </li>
  114. The Slippery Semantic
  115. HTML5New structural• <section>• <header>• <footer>• <nav>• <aside>• <article>
  116. HTML5New structural<section class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> ...</section>
  117. Microformats
  118. RDFa Microformats
  119. RDFa Microformats micr odat a
  120. Fight!Fight!Fight! http://www.flickr.com/photos/sebke/3567653086/in/ photostream/
  121. HTML5Microdata<dl>   <dt><a href="http://ablognotlimited.com">EmilyLewis</a></dt>   <dd>Albuquerque, <abbr title="New Mexico">NM</abbr>87106</dd></dl>
  122. HTML5Microdata<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"><spanitemprop="locality">Albuquerque</span>, <abbrtitle="New Mexico" itemprop="region">NM</abbr> <spanitemprop="postal-code">87106</span></dd></dl>
  123. Two Stones, One BirdMicrodata &<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">   <dt class="fn" itemprop="name"><a href="http://ablognotlimited.com" class="url" itemprop="url">EmilyLewis</a></dt>   <dd class="adr" itemprop="address" itemscopeitemtype="http://data-vocabulary.org/Address"><spanclass="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>
  124. ARIA Roles
  125. ARIA• Set of guidelines from WAI for accessible, rich internet applications• Includes Document Landmark Roles to indicate document structure and aid navigation
  126. Paciello Group: Using WAI ARIA LandmarkARIA RolesDocument• role="banner"• role="navigation" not needed on <nav>• role="main"• role="search"• role="article"• role="complementary" not needed on <aside>• role="contentinfo" not needed on <footer>
  127. ARIA Adding roles -<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>
  128. ARIA Adding roles -<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>
  129. Semantics FTW!
  130. ResourcesOne stop shop http://bit.ly/fj0BPW http://microformatsmadesimple.com/resources.php• All resources and demo links from this deck• Authoring tools• Further reading
  131. Questions?
  132. Thanks!

×