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
×
18,091 views

Published on

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>

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

×