• Save
Microformats or: How I Learned to Write POSH and Love the Semantic Web
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,995 views

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 ...

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.

Statistics

Views

Total Views
4,995
Views on SlideShare
4,990
Embed Views
5

Actions

Likes
9
Downloads
0
Comments
4

2 Embeds 5

http://www.twylah.com 3
http://paper.li 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great deck ... thanks for sharing!
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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)
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • So, I’m going to kick things off this morning with a talk about microformats <>Or “How I learned to write POSH and love the semantic web”<>\nBefore we get started, can I see a show of hands of folks who know what microformats are? How about the number of folks who use microformats in their HTML development? And let me see those people who have no idea what I’m talking about?<> Regardless of which group you fall into, I bet you will learn at least three new things in today’s session.\n
  • Before we get started, here’s the URL for a page of a links and resources mentioned in this presentation\n
  • For those of you who are new to microformats or need a refresher, we’re going to cover the basics. And for those of you who are old-hat at microformats, I’ll be showing you some demos and features that I hope will renew your excitement about using them.\n
  • But more than microformats, I’ll also be talking about some bonus goodness like...<>And, of course, how these things are related and why they are important.\nAlong the way, I’ll be talking about how I went from a normal web designer to a freak about semantics on the web.<>Speaking of me ...\n
  • I’m a web designer. For the majority of my career, I worked for large corporations or on government contracts. Recently, I made the leap to freelance, which has been pretty awesome.\nI also wrote a book about microformats ... But aside from my professional titles ...\n
  • \n
  • With so many years spent in the corporate/government world working on teams (some of which were large and distributed), I’ve grown to appreciate the efficiency that order and organization in HTML and CSS offers. So, when I first learned about web standards ...\n
  • It was a perfect fit <> It also turned out to be a gateway drug\n
  • My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5’s structural elements... and then it was ARIA roles.<>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<>\nMy goal for today’s session is to inspire you to do the same.\n
  • My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5’s structural elements... and then it was ARIA roles.<>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<>\nMy goal for today’s session is to inspire you to do the same.\n
  • My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5’s structural elements... and then it was ARIA roles.<>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<>\nMy goal for today’s session is to inspire you to do the same.\n
  • My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5’s structural elements... and then it was ARIA roles.<>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<>\nMy goal for today’s session is to inspire you to do the same.\n
  • My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5’s structural elements... and then it was ARIA roles.<>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<>\nMy goal for today’s session is to inspire you to do the same.\n
  • So, starting with the most basic question, especially for you folks who are new to microformats ... what are they? \n
  • Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as <>\n
  • Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as <>\n
  • \n
  • \n
  • All of these definitions SOUND good or at least make you sound smart, but they really don’t describe what Microformats ARE ... or how simple it is to publish with them\n
  • So this is the definition I like\n
  • So, a super simple example would be for tag links, which you commonly find on blogs\n
  • And this is a microformat ... the rel-tag microformat, which we’ll be looking at later in this presentation. But that’s really it. An attribute and a specific value. If you know markup, then you have all the foundation you need to publish microformats\n
  • \n
  • \n
  • Don’t be afraid of the word “draft” ... you can and should use these microformats, just make sure you stay up to date on them. For me, this is just the inherent nature of the web...\n
  • \n
  • \n
  • POSH, as I mentioned earlier, is Plain Old Semantic Markup. And I really dig it, so let’s take a moment to talk about it\n
  • My favorite definition of semantic markup or POSH is “self describing” markup. Markup that describes the content. If you follow today’s web standards, hopefully you are doing this... using - for headings, for paragraphs, for lists and so on.\n
  • Hopefully you are NOT using for layout or something like this example for navigation links\n
  • Because navigation links are usually a list of links, right? As such, it should be marked up with . And writing POSH has become, for me, one of the more satisfying parts of my job. I love spending time thinking about markup in context and how to convey structure.<>So, that’s POSH ... let’s get back to microformats\n
  • Problem is not really a “problem” but more the type of content that we want to describe\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Once you take the time to add machine readability with something like MFs, machines can then do stuff with your content\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • But one of the very best thing about microformats is that is really gets you thinking semantically and appreciating the value of machine readability. And once that becomes your mindset, you see the commonalities in today’s emerging technologies and you want to experiment and do more\n
  • HTML5, for example. I LOVE LOVE LOVE the new semantic structural elements. There was a short period of time, though, when most of the MFs parsers couldn’t recognize MF when applied to these new elements.\n
  • Fortunately, that’s no longer a problem. I’ve tested on almost all of the parsers I’ve shown you today and they will happily recognize. \n
  • Microformats aren’t the only semantic technology, either. There’s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
  • Microformats aren’t the only semantic technology, either. There’s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
  • In the past, and even the present, some RDFa proponents say microformats suck and RDFa is better... And then there are some in the MF community that argue RDFa sucks. And now with microdata it feels like the battle of “My semantic technology is better than yours” will never end. For me, I don’t care about the arguments. I care about practicalities.\n
  • Microdata is, in concept, very similar to MFs. Take this example of contact information.\n
  • Adding microdata to describe that content uses a similar approach as MF, but instead of class or rel, it uses the itemscope and itemtype attributes. Though similar, microdata doesn’t have the kind of “machine” support as microformats (yet) ... so I don’t see a need for ME to use it (yet)\n
  • So, you can use both together... Not that I would do this, because this just hurts my eyes. But my goal is semantics and machine readable data. Both MFs and microdata aim for that same semantic goal, as does RDFa. Each has a unique purpose and I believe they can all coexist\n
  • Continuing with the semantic slope, let’s talk a bit about ARIA\n
  • \n
  • When I saw these roles, I immediately had an Oprah ah-ha moment ... it was really the same concept I’d been exploring with MFs and semantics. Roles add meaning for machines like screen readers and assistive technologies. And like MF, it is just with an attribute and value.\n
  • \n
  • \n
  • I’m not much into future gazing, but my gut tells me that web semantics will only become more useful and more utilized. Google is all about it these days and even outside of the web I see it....Did anyone watch the amazing performance of Watson on Jeopardy? That was with natural language...That is a great example of what machines can do when they have meaning.\n
  • And again, here’s the resources.\n
  • \n
  • \n

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

  • 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 rights reserved.
  • http://bit.ly/fj0BPWhttp://microformatsmadesimple.com/resources.php View slide
  • 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 View slide
  • 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! SEMA NTIC FREAK
  • Freelance Web Designerhttp://emilylewisdesign.comAuthor, Microformats Made Simplehttp://microformatsmadesimple.comEmail: emily@emilylewisdesign.comBlog: http://ablognotlimited.comTwitter: @emilylewis
  • 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 and best practices• More efficient• Great for team-based development• Structured content• Semantic markup
  • 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
  • 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 elements• ARIA roles
  • What aremicroformats?
  • Microformats Wiki: What Are Microformats
  • 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.
  • 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.
  • Microformats Wiki: What Are Microformats Smartcontent
  • Microformats Wiki: What Are Microformats Smartcontent Building blocks that enable users to own, control, move and share their data on the web.
  • 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
  • huh?
  • Microformats are sets ofHTML attributes andvalues that are applied tocommon web content todescribe that content andgive it more meaning.
  • <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: restricting increased page rank for links• rel-tag: tag links• VoteLinks: for, against and abstain links• XFN: distributed social networks
  • 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
  • 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
  • The BasicsUse existing• (X)HTML • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats and naming principles
  • The BasicsUse existing• HTML5 • rel • class • rev• vCard: hCard• iCalendar: hCalendar• Atom: hAtom• Other microformats and naming principles
  • 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></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>
  • 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>
  • 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 most common
  • 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
  • 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 EmbassySuites bar.
  • 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
  • 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.
  • 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 technologies
  • The BenefitsEncouragesstandards•Web standards • Valid, semantic markup• Workflows and processes for development teams • Consistent markup • Standard naming conventions for styling
  • 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 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
  • 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
  • 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="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
  • 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 Not Limited</a>
  • 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 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
  • 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>
  • Still with me?
  • Compoundmicroformats•Several attribute-value pairs (properties and sub-properties)• Utilize other microformats as building blocks
  • 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
  • Michromeform ats: Electronic
  • CompoundshCard in 3 easysteps1. Identify content2. POSHify3. Add hCard
  • 1 Start with ContentSTEP Emily Lewis Emily Lewis Design, LLC Albuquerque, NM 87106 emily@emilylewisdesign.com
  • 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>
  • 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
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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 combined with sub-properties• You dont need additional class values for styling, but you can use them
  • 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
  • H2VX:Electronic calendar
  • CompoundshCalendar in 3easy steps1. Identify content2. POSHify3. Add hCalendar
  • 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
  • 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>
  • 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
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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
  • Combiningmicroformats
  • For e morven sema e Combining n powe tic r!microformats
  • 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>
  • 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>
  • The Slippery Semantic
  • HTML5New structural• <section>• <header>• <footer>• <nav>• <aside>• <article>
  • HTML5New structural<section class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> ...</section>
  • Microformats
  • RDFa Microformats
  • RDFa Microformats micr odat a
  • Fight!Fight!Fight! http://www.flickr.com/photos/sebke/3567653086/in/ photostream/
  • HTML5Microdata<dl>   <dt><a href="http://ablognotlimited.com">EmilyLewis</a></dt>   <dd>Albuquerque, <abbr title="New Mexico">NM</abbr>87106</dd></dl>
  • 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>
  • 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>
  • ARIA Roles
  • ARIA• Set of guidelines from WAI for accessible, rich internet applications• Includes Document Landmark Roles to indicate document structure and aid navigation
  • 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>
  • 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>
  • 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>
  • Semantics FTW!
  • ResourcesOne stop shop http://bit.ly/fj0BPW http://microformatsmadesimple.com/resources.php• All resources and demo links from this deck• Authoring tools• Further reading
  • Questions?
  • Thanks!