Microformats: Web Semantics & More

Emily Lewis
Emily LewisOwner, Lead Developer at Bright Umbrella, LLC
Microformats:
Web Semantics & More
Emily Lewis



                            InterLab 2009 November 18

    Some rights reserved.
Hi!

•   I’m a web designer for Pitney Bowes
    Business Insight
•   I love web standards, semantic markup
    and CSS, accessibility, usability and
    microformats
•   I write about web design (and other
    topics) at A Blog Not Limited
•   I just wrote Microformats Made Simple


                      Microformats: Web Semantics & More
Today, you’ll learn:
•   What are microformats
•   Benefits of microformats
•   How to enrich your content with some common
    microformats
•   Where you can see microformats in action
•   Lots of resources to help you publish
    microformats


                                    Microformats: Web Semantics & More
What are microformats?


              Microformats: Web Semantics & More
What are microformats?


              Microformats: Web Semantics & More
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.




                       Microformats: Web Semantics & More
Microformats enable the
publishing and sharing of higher
fidelity information on the web.




                                   Microformats: Web Semantics & More
Building blocks that
enable users to own,
control, move and share
their data on the web.




                          Microformats: Web Semantics & More
Smart
content
          Building blocks that
          enable users to own,
          control, move and share
          their data on the web.




                                    Microformats: Web Semantics & More
Smart
content
          Building blocks that
          enable users to own,
          control, move and share                      Markup, with
          their data on the web.                       more meaning




                                    Microformats: Web Semantics & More
Huh?


       Microformats: Web Semantics & More
Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.




                            Microformats: Web Semantics & More
Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.

Content published with microformats can
be extracted by software and indexed,
downloaded, searched for, saved, cross-
referenced or combined.
                            Microformats: Web Semantics & More
rel="me"


      Microformats: Web Semantics & More
XFN & Identity consolidation
Assigned to links to sites that represent you online:




                                   Microformats: Web Semantics & More
XFN & Identity consolidation
Assigned to links to sites that represent you online:


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




                                   Microformats: Web Semantics & More
blog




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
blog




                   portfolio




       Microformats: Web Semantics & More
IdentEngine:
Identity consolidation in
          action

                Microformats: Web Semantics & More
Let’s talk fundamentals


               Microformats: Web Semantics & More
The basics
•   Use existing standards: (X)HTML
•   Emphasize semantics (POSH)
•   Intentionally simple
•   Address a specific “problem”
•   Humans first, machines second




                                   Microformats: Web Semantics & More
The benefits
•   Semantics
•   User experience enhancements
•   More meaningful search results
•   Encourages consistency and standards
•   Minimal development effort
•   No need for software or special technologies
•   Enables sharing and re-use of your web content

                                     Microformats: Web Semantics & More
Who benefits?
•   Managers
•   Developers
•   Designers
•   Content Authors
•   Users




                      Microformats: Web Semantics & More
EVERYONE BENEFITS


           Microformats: Web Semantics & More
EVERYONE BENEFITS
                           *BLATANT PLUG WARNING*

Check out Microformats Role Play for more on how microformats benefit different people




                                                      Microformats: Web Semantics & More
Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content




                                  Microformats: Web Semantics & More
Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>




                                  Microformats: Web Semantics & More
Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>

Indicates the link destination (href) is to a page that
tells what the current page - or part of the current
page - is about.



                                     Microformats: Web Semantics & More
Why?




       Microformats: Web Semantics & More
Why?
Semantics FTW!




                 Microformats: Web Semantics & More
Why?
Semantics FTW!

Context-specific searching:
• Technorati's Tags
• Operator Plug-in for Firefox




                                 Microformats: Web Semantics & More
Operator Plug-in:
Contextual search in
      action

             Microformats: Web Semantics & More
Moving into compounds


             Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.




                                 Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
  • H2VX Contacts Conversion Service




                                       Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
  • H2VX Contacts Conversion Service
  • Operator Plug-in for Firefox




                                       Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
  • H2VX Contacts Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox




                                       Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
  • H2VX Contacts Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit



                                       Microformats: Web Semantics & More
hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
  • H2VX Contacts Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit
  • Technorati's Contacts Feeds Service

                                          Microformats: Web Semantics & More
Oomph:
Electronic business card
         action

               Microformats: Web Semantics & More
Publish hCard in
  3 easy steps


           Microformats: Web Semantics & More
1      Content
STEP


                 Emily Lewis
                 A Blog Not Limited
                 Albuquerque, NM 87106
                 emily@ablognotlimited.com




                                      Microformats: Web Semantics & More
2      POSHify
STEP




                 Microformats: Web Semantics & More
2           POSHify
STEP

       <dl>
          <dt>Emily Lewis</dt>
             <dd>
                <ul>
                   <li><a href="http://
       www.ablognotlimited.com">
       A Blog Not Limited</a></li>
                   <li>Albuquerque, <abbr title="New
       Mexico">NM</abbr> 87106</li>
                   <li><a
       href="mailto:emily@ablognotlimited.com">
       emily@ablognotlimited.com</a></li>
                </ul>
             </dd>
       </dl>

                                    Microformats: Web Semantics & More
3      Add hCard
STEP




                   Microformats: Web Semantics & More
3             Add hCard
STEP

       <dl class="vcard">
          <dt class="fn">Emily Lewis</dt>
             <dd>
                <ul>
                   <li><a href="http://
       www.ablognotlimited.com" class="url">
       A Blog Not Limited</a></li>
                   <li class="adr"><span
       class="locality">Albuquerque</span>, <abbr
       title="New Mexico" class="region">NM</abbr>
       <span class="postal-code">87106</span></li>
                   <li><a
       href="mailto:emily@ablognotlimited.com"
       class="email">emily@ablognotlimited.com</a></li>
                </ul>
             </dd>
       </dl>                        Microformats: Web Semantics & More
Worth noting




               Microformats: Web Semantics & More
Worth noting
•   Markup doesn't matter, but it should be POSH




                                   Microformats: Web Semantics & More
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Sometimes you need to add non-semantic
    elements such as <span> and <div>




                                   Microformats: Web Semantics & More
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Sometimes you need to add non-semantic
    elements such as <span> and <div>
•   Attribute values are case-sensitive




                                     Microformats: Web Semantics & More
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Sometimes you need to add non-semantic
    elements such as <span> and <div>
•   Attribute values are case-sensitive
•   Root properties cannot be combined with
    sub-properties




                                     Microformats: Web Semantics & More
Worth noting
•   Markup doesn't matter, but it should be POSH
•   Sometimes you need to add non-semantic
    elements such as <span> and <div>
•   Attribute values are case-sensitive
•   Root properties cannot be combined with
    sub-properties
•   You don't need additional class values for
    styling, but you can use them

                                     Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars




                                 Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
  • H2VX Events Conversion Service




                                     Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
  • H2VX Events Conversion Service
  • Operator Plug-in for Firefox




                                     Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
  • H2VX Events Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox




                                       Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
  • H2VX Events Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit




                                       Microformats: Web Semantics & More
hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
  • H2VX Events Conversion Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit
  • Technorati's Events Feeds Service


                                        Microformats: Web Semantics & More
H2VX:
Electronic calendar
     in action

             Microformats: Web Semantics & More
Publish hCalendar in
    3 easy steps


             Microformats: Web Semantics & More
1      Content
STEP




                               009               a t DOE ,
                 Inter Lab 2             a imed elopers
                                 k shop ite dev
                        a  y wor , webs           a nage
                                                        rs
                  A 4-d asters            r s&m
                   w ebm p develope es.
                   we  b ap et resourc            09
                    of in tern              9, 20
                                   e r 16-1
                           o vemb            tional
                     • N khaven Na
                         Broo atory
                      • abor
                           L




                                        Microformats: Web Semantics & More
2      POSHify
STEP




                 Microformats: Web Semantics & More
2            POSHify
STEP

       <h1><a href=”http://www.bnl.gov/
       interlab09/”>InterLab 2009</a></h1>
       <p>A 4-day workshop aimed at DOE webmasters,
       website developers, web app developers & managers
       of internet resources.</p>
       <ul>
          <li>November 16-19, 2009</li>
          <li><a href=”http://www.bnl.gov/”>Brookhaven
          National Laboratory</a></li>
       </ul>




                                     Microformats: Web Semantics & More
3      Add hCalendar
STEP




                   Microformats: Web Semantics & More
3               Add hCalendar
STEP

       <div class="vevent">
         <h1><a href=”http://www.bnl.gov/interlab09/”
         class="summary url">InterLab 2009</a></h1>
         <p class="description">A 4-day workshop aimed at
         DOE webmasters, website developers, web app
         developers & managers of internet resources.</p>
         <ul>
            <li><span class="dtstart"><span class=”value-
            title” title=”2009-11-16”> </span>November
            16</span>-<span class="dtend"><span
            class=”value-title” title=”2009-11-19”> </
            span>19, 2009</span></li>
            <li class="location"><a href=”http://
            www.bnl.gov/”>Brookhaven National
            Laboratory</a></li>
         </ul>
       </div>                         Microformats: Web Semantics & More
Combining microformats


              Microformats: Web Semantics & More
For
                                     mo even
                                  sem re
                                  powantic
                                      er!


Combining microformats


              Microformats: Web Semantics & More
hCalendar with hCard




                 Microformats: Web Semantics & More
hCalendar with hCard
<div class=”vevent”>
...
  <li class=”location vcard”>
    <a href=”http://www.bnl.gov/” class=”fn org
    url”>Brookhaven National Laboratory</a>
    <ul class=”adr”>
      <li class=”post-office-box”>P.O. Box 5000</li>
      <li><span class=”locality”>Upton</span>, <abbr
      title=”New York” class=”region”>NY</abbr>
      <span class=”postal-code”>11973</span></li>
  </ul>
</li>
...
</div>


                                Microformats: Web Semantics & More
Microformats you can use now
•   hCalendar: event information
•   hCard: contact information
•   rel-license: license links
•   rel-nofollow: restricting increased page rank for links
•   rel-tag: tag links
•   VoteLinks: for, against and abstain links
•   XFN: distributed social networks
•   XOXO: outline content              Microformats: Web Semantics & More
And even more drafts
•   hAtom: syndicated       •   hProduct: consumer
    content                     products
•   hAudio: audio content   •   hRecipe: food and
                                beverage recipes
•   hListing: open,
    distributed listings    •   hResume: Résumés
                                and C.V.s
•   hMedia: video, images
    and audio media         •   hReview: reviews
•   hNews: journalistic     •   xFolk: bookmarks
    news
                                   Microformats: Web Semantics & More
6,137,400,000


         Microformats: Web Semantics & More
6,137,400,000
  Yahoo! SearchMonkey results as of 12/17/09




                                       Microformats: Web Semantics & More
60,600,000 - hReview
    1,660,000,000 - hCard
                                                  2,090,000,000 - rel-tag
        807,000,000 - hAtom

                6,137,400,000
                     Yahoo! SearchMonkey results as of 12/17/09

452,000,000 - XFN
                                  108,000,000 - hResume

           148,000,000 - geo
                                                                  768,000,000 - adr
   44,100,000 - hCalendar
                                                          Microformats: Web Semantics & More
Microformats in the wild
•   XFN: Twitter   Flickr HuffDuffer Digg LinkedIn Plaxo
    Technorati Last.fm Google Social Graph API Ident
    Engine

•   rel-license: Creative Commons       Yahoo! CC Search
    Google "Usage Rights" search

•   hCard: Google Rich Snippets  Google Maps Yahoo! Local
    Google Profiles Twitter Last.fm

•   hCalendar: Yahoo! Upcoming      MapQuest Local
    Facebook, Last.fm Eventful

•   hResume: LinkedIn     SimplyHired
                                            Microformats: Web Semantics & More
Getting started


           Microformats: Web Semantics & More
Getting started
   *BLATANT PLUG WARNING*




                       Microformats: Web Semantics & More
My new book!




               Microformats: Web Semantics & More
My new book!
          Available for sale on Amazon




                    Microformats: Web Semantics & More
My new book!
          Available for sale on Amazon


          Want a preview? Check out
          Rough Cuts excerpts


          *BLATANT PLUGS NOT OVER YET*




                        Microformats: Web Semantics & More
My blog tutorials
Getting Semantic With Microformats:
  • rel-home, rel-tag, rel-license
  • XFN
  • hCard
  • hCalendar
  • hAtom
  • hResume
  • Themes & Issues
  • Value class pattern               Microformats: Web Semantics & More
Great stuff from other folks
•   Microformats Wiki
    • A good resource once you understand the basics
•   Microformats: Empowering Your Markup for Web 2.0 by
    John Allsopp
•   microformatique
•   Follow @microformats
•   Send questions to @microformateers

                                          Microformats: Web Semantics & More
Authoring tools
•   hCard Creator
•   hCalendar Creator
•   hReview Creator
•   Optimus Microformats Transformer also offers a
    validator
•   Jeffrey Zeldman's Web Standards Advisor
    Dreamweaver plug-in


                                   Microformats: Web Semantics & More
Questions? Comments?
•   emily@ablognotlimited.com
•   @emilylewis
•   Introduce yourself and let’s talk!




                                         Microformats: Web Semantics & More
Thanks!



          Microformats: Web Semantics & More
1 of 97

Recommended

test2 by
test2test2
test2Jim Jones
380 views10 slides
Know. Share. Do. Increase IBM Connections Usage, Adoption and ROI with int... by
Know. Share. Do.  Increase IBM Connections Usage, Adoption and ROI with int...Know. Share. Do.  Increase IBM Connections Usage, Adoption and ROI with int...
Know. Share. Do. Increase IBM Connections Usage, Adoption and ROI with int...TIMETOACT GROUP
3.2K views84 slides
Microformats or: How I Learned to Write POSH and Love the Semantic Web by
Microformats or: How I Learned to Write POSH and Love the Semantic WebMicroformats or: How I Learned to Write POSH and Love the Semantic Web
Microformats or: How I Learned to Write POSH and Love the Semantic WebEmily Lewis
15.4K views106 slides
The Days of Web Standards "IA" 20070715 by
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715Takashi Sakamoto
1.7K views115 slides
Using a Wiki as an Organization Portal (at TriXML2006) by
Using a Wiki as an Organization Portal (at TriXML2006)Using a Wiki as an Organization Portal (at TriXML2006)
Using a Wiki as an Organization Portal (at TriXML2006)Bill Albing
1K views28 slides
Web 2.0 by
Web 2.0Web 2.0
Web 2.0Himanshu Kumar Das
585 views26 slides

More Related Content

What's hot

Beyond the Page by
Beyond the PageBeyond the Page
Beyond the Pagegsmith
1.9K views60 slides
Different Types of Websites by
Different Types of WebsitesDifferent Types of Websites
Different Types of WebsitesNeil Lohana
55.4K views17 slides
web 2.0 by
web 2.0web 2.0
web 2.0Roche Labtang
1.3K views61 slides
TechFuse - Enhanced interactions using SharePoint and Lync by
TechFuse - Enhanced interactions using SharePoint and LyncTechFuse - Enhanced interactions using SharePoint and Lync
TechFuse - Enhanced interactions using SharePoint and LyncAvtex
1.7K views32 slides
Business aspects of social software and collaboration by
Business aspects of social software and collaboration Business aspects of social software and collaboration
Business aspects of social software and collaboration Ed Brill
4.5K views32 slides
1309 leveraging social business data visualizing the connections org structure by
1309  leveraging social business data visualizing the connections org structure1309  leveraging social business data visualizing the connections org structure
1309 leveraging social business data visualizing the connections org structureMatthew Milza
3.7K views57 slides

What's hot(20)

Beyond the Page by gsmith
Beyond the PageBeyond the Page
Beyond the Page
gsmith1.9K views
Different Types of Websites by Neil Lohana
Different Types of WebsitesDifferent Types of Websites
Different Types of Websites
Neil Lohana55.4K views
TechFuse - Enhanced interactions using SharePoint and Lync by Avtex
TechFuse - Enhanced interactions using SharePoint and LyncTechFuse - Enhanced interactions using SharePoint and Lync
TechFuse - Enhanced interactions using SharePoint and Lync
Avtex1.7K views
Business aspects of social software and collaboration by Ed Brill
Business aspects of social software and collaboration Business aspects of social software and collaboration
Business aspects of social software and collaboration
Ed Brill4.5K views
1309 leveraging social business data visualizing the connections org structure by Matthew Milza
1309  leveraging social business data visualizing the connections org structure1309  leveraging social business data visualizing the connections org structure
1309 leveraging social business data visualizing the connections org structure
Matthew Milza3.7K views
Website Management by Amol Vidwans
Website ManagementWebsite Management
Website Management
Amol Vidwans4.8K views
Introduction to Basic Concepts in Web by Jussi Pohjolainen
Introduction to Basic Concepts in WebIntroduction to Basic Concepts in Web
Introduction to Basic Concepts in Web
Jussi Pohjolainen4.8K views
Accessibility 2.0: Blended Learning For Blended Accessibility by lisbk
Accessibility 2.0: Blended Learning For Blended AccessibilityAccessibility 2.0: Blended Learning For Blended Accessibility
Accessibility 2.0: Blended Learning For Blended Accessibility
lisbk809 views
Web 2.0 by rdbms
Web 2.0Web 2.0
Web 2.0
rdbms458 views
Beyond Social – Tailor SharePoint 2013 Social features according to your need... by Adis Jugo
Beyond Social – Tailor SharePoint 2013 Social features according to your need...Beyond Social – Tailor SharePoint 2013 Social features according to your need...
Beyond Social – Tailor SharePoint 2013 Social features according to your need...
Adis Jugo1.4K views
SEO (Search Engine Optimisation) and SEM (Search Engine Marketing) - Seminar ... by Beat Signer
SEO (Search Engine Optimisation) and SEM (Search Engine Marketing) - Seminar ...SEO (Search Engine Optimisation) and SEM (Search Engine Marketing) - Seminar ...
SEO (Search Engine Optimisation) and SEM (Search Engine Marketing) - Seminar ...
Beat Signer4.2K views

Viewers also liked

Acessibilidade by
AcessibilidadeAcessibilidade
AcessibilidadeSueme Freitas
143 views1 slide
Reforma ortográfica by
Reforma ortográficaReforma ortográfica
Reforma ortográficaluci96
1.1K views38 slides
Mitosis y-meiosis by
Mitosis y-meiosisMitosis y-meiosis
Mitosis y-meiosissantiagohernandezquesada
264 views16 slides
Storytelling reflection by
Storytelling reflectionStorytelling reflection
Storytelling reflectiongrade4biss
148 views1 slide
Queensland, Australia Rainforest by
Queensland, Australia RainforestQueensland, Australia Rainforest
Queensland, Australia Rainforestguestc7f16c26
265 views2 slides
Douw&Koren Slides Kick-off Crowdfunding by
Douw&Koren Slides Kick-off CrowdfundingDouw&Koren Slides Kick-off Crowdfunding
Douw&Koren Slides Kick-off CrowdfundingGijsbert Koren
460 views28 slides

Viewers also liked(13)

Similar to Microformats: Web Semantics & More

Practical Microformats - Voices That Matter by
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That MatterEmily Lewis
18.6K views102 slides
Microformats Workshop (2009) by
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)Kelley Howell
549 views45 slides
Introduction web tech by
Introduction web techIntroduction web tech
Introduction web techLiaquat Rahoo
579 views43 slides
Web 2.0 Standard For End User by
Web 2.0 Standard For End UserWeb 2.0 Standard For End User
Web 2.0 Standard For End Useryanvns
514 views43 slides
Web 2.0 Tech Talk by
Web 2.0 Tech TalkWeb 2.0 Tech Talk
Web 2.0 Tech Talkpooyad
343 views55 slides
A Note On Detection Algorithm by
A Note On Detection AlgorithmA Note On Detection Algorithm
A Note On Detection AlgorithmMisty Harris
2 views49 slides

Similar to Microformats: Web Semantics & More(20)

Practical Microformats - Voices That Matter by Emily Lewis
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That Matter
Emily Lewis18.6K views
Microformats Workshop (2009) by Kelley Howell
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)
Kelley Howell549 views
Web 2.0 Standard For End User by yanvns
Web 2.0 Standard For End UserWeb 2.0 Standard For End User
Web 2.0 Standard For End User
yanvns514 views
Web 2.0 Tech Talk by pooyad
Web 2.0 Tech TalkWeb 2.0 Tech Talk
Web 2.0 Tech Talk
pooyad343 views
A Note On Detection Algorithm by Misty Harris
A Note On Detection AlgorithmA Note On Detection Algorithm
A Note On Detection Algorithm
Misty Harris2 views
TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin... by Terminalfour
TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin...TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin...
TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin...
Terminalfour529 views
Curtin University Frontend Web Development by Daryll Chu
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu111 views
Web 2.0 Core Concepts, Applications, and Implications by Tomáš Pitner
Web 2.0 Core Concepts, Applications, and ImplicationsWeb 2.0 Core Concepts, Applications, and Implications
Web 2.0 Core Concepts, Applications, and Implications
Tomáš Pitner1.3K views
01. Portal Business Overview by Nick Davis
01. Portal Business Overview01. Portal Business Overview
01. Portal Business Overview
Nick Davis3.5K views
02 From HTML tags to XHTML by Rich Dron
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
Rich Dron497 views
Web3.0 or The semantic web by Darren Wood
Web3.0 or The semantic webWeb3.0 or The semantic web
Web3.0 or The semantic web
Darren Wood3K views
Ajax, rss, feeds, web service, by jmradha krishnan
Ajax, rss, feeds, web service, Ajax, rss, feeds, web service,
Ajax, rss, feeds, web service,
jmradha krishnan1.1K views
Website Overview by ChanHan Hy
Website OverviewWebsite Overview
Website Overview
ChanHan Hy500 views
Overview of azure microservices and the impact on integration by BizTalk360
Overview of azure microservices and the impact on integrationOverview of azure microservices and the impact on integration
Overview of azure microservices and the impact on integration
BizTalk3604.7K views

More from Emily Lewis

Create Your Own Starter Files by
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
1.5K views57 slides
The Hiring Process by
The Hiring ProcessThe Hiring Process
The Hiring ProcessEmily Lewis
1.5K views34 slides
Take Your Markup to Eleven by
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
34K views58 slides
Designer-Friendly EE by
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EEEmily Lewis
2.6K views51 slides
10 Advanced CSS Techniques (You Wish You Knew More About) by
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
21.7K views45 slides
Building the Webuquerque Community by
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque CommunityEmily Lewis
644 views20 slides

More from Emily Lewis(13)

Create Your Own Starter Files by Emily Lewis
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
Emily Lewis1.5K views
The Hiring Process by Emily Lewis
The Hiring ProcessThe Hiring Process
The Hiring Process
Emily Lewis1.5K views
Take Your Markup to Eleven by Emily Lewis
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
Emily Lewis34K views
Designer-Friendly EE by Emily Lewis
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EE
Emily Lewis2.6K views
10 Advanced CSS Techniques (You Wish You Knew More About) by Emily Lewis
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
Emily Lewis21.7K views
Building the Webuquerque Community by Emily Lewis
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque Community
Emily Lewis644 views
Multiple Site Management with ExpressionEngine by Emily Lewis
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngine
Emily Lewis6.9K views
Take Your Markup to 11 by Emily Lewis
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
Emily Lewis7.3K views
WordPress & Other Content Management Systems by Emily Lewis
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
Emily Lewis1K views
jQuery, A Designer's Perspective by Emily Lewis
jQuery, A Designer's PerspectivejQuery, A Designer's Perspective
jQuery, A Designer's Perspective
Emily Lewis3.1K views
[Workshop Summits] Microformats Workshop by Emily Lewis
[Workshop Summits] Microformats Workshop[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop
Emily Lewis19K views
Podcasting & Vodcasting 101 by Emily Lewis
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101
Emily Lewis1.4K views
Webuquerque: Social Media Means Business by Emily Lewis
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means Business
Emily Lewis490 views

Recently uploaded

DRBD Deep Dive - Philipp Reisner - LINBIT by
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBITShapeBlue
110 views21 slides
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOsPriyanka Aash
103 views59 slides
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...ShapeBlue
113 views18 slides
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...ShapeBlue
86 views25 slides
Kyo - Functional Scala 2023.pdf by
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
443 views92 slides
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...ShapeBlue
97 views28 slides

Recently uploaded(20)

DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue110 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash103 views
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue113 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue86 views
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by ShapeBlue
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
ShapeBlue97 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue154 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue121 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue56 views
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ by ShapeBlue
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericConfidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
ShapeBlue58 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc130 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson142 views
The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE67 views
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by ShapeBlue
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
ShapeBlue120 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker50 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue93 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue149 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays49 views

Microformats: Web Semantics & More

  • 1. Microformats: Web Semantics & More Emily Lewis InterLab 2009 November 18 Some rights reserved.
  • 2. Hi! • I’m a web designer for Pitney Bowes Business Insight • I love web standards, semantic markup and CSS, accessibility, usability and microformats • I write about web design (and other topics) at A Blog Not Limited • I just wrote Microformats Made Simple Microformats: Web Semantics & More
  • 3. Today, you’ll learn: • What are microformats • Benefits of microformats • How to enrich your content with some common microformats • Where you can see microformats in action • Lots of resources to help you publish microformats Microformats: Web Semantics & More
  • 4. What are microformats? Microformats: Web Semantics & More
  • 5. What are microformats? Microformats: Web Semantics & More
  • 6. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Microformats: Web Semantics & More
  • 7. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats: Web Semantics & More
  • 8. Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More
  • 9. Smart content Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More
  • 10. Smart content Building blocks that enable users to own, control, move and share Markup, with their data on the web. more meaning Microformats: Web Semantics & More
  • 11. Huh? Microformats: Web Semantics & More
  • 12. Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Microformats: Web Semantics & More
  • 13. Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Content published with microformats can be extracted by software and indexed, downloaded, searched for, saved, cross- referenced or combined. Microformats: Web Semantics & More
  • 14. rel="me" Microformats: Web Semantics & More
  • 15. XFN & Identity consolidation Assigned to links to sites that represent you online: Microformats: Web Semantics & More
  • 16. XFN & Identity consolidation Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Microformats: Web Semantics & More
  • 17. blog Microformats: Web Semantics & More
  • 18. blog portfolio Microformats: Web Semantics & More
  • 19. blog portfolio Microformats: Web Semantics & More
  • 20. blog portfolio Microformats: Web Semantics & More
  • 21. blog portfolio Microformats: Web Semantics & More
  • 22. blog portfolio Microformats: Web Semantics & More
  • 23. blog portfolio Microformats: Web Semantics & More
  • 24. blog portfolio Microformats: Web Semantics & More
  • 25. blog portfolio Microformats: Web Semantics & More
  • 26. blog portfolio Microformats: Web Semantics & More
  • 27. blog portfolio Microformats: Web Semantics & More
  • 28. blog portfolio Microformats: Web Semantics & More
  • 29. blog portfolio Microformats: Web Semantics & More
  • 30. blog portfolio Microformats: Web Semantics & More
  • 31. IdentEngine: Identity consolidation in action Microformats: Web Semantics & More
  • 32. Let’s talk fundamentals Microformats: Web Semantics & More
  • 33. The basics • Use existing standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second Microformats: Web Semantics & More
  • 34. The benefits • Semantics • User experience enhancements • More meaningful search results • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content Microformats: Web Semantics & More
  • 35. Who benefits? • Managers • Developers • Designers • Content Authors • Users Microformats: Web Semantics & More
  • 36. EVERYONE BENEFITS Microformats: Web Semantics & More
  • 37. EVERYONE BENEFITS *BLATANT PLUG WARNING* Check out Microformats Role Play for more on how microformats benefit different people Microformats: Web Semantics & More
  • 38. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content Microformats: Web Semantics & More
  • 39. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Microformats: Web Semantics & More
  • 40. Another elemental: rel-tag Describes the relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about. Microformats: Web Semantics & More
  • 41. Why? Microformats: Web Semantics & More
  • 42. Why? Semantics FTW! Microformats: Web Semantics & More
  • 43. Why? Semantics FTW! Context-specific searching: • Technorati's Tags • Operator Plug-in for Firefox Microformats: Web Semantics & More
  • 44. Operator Plug-in: Contextual search in action Microformats: Web Semantics & More
  • 45. Moving into compounds Microformats: Web Semantics & More
  • 46. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. Microformats: Web Semantics & More
  • 47. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service Microformats: Web Semantics & More
  • 48. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
  • 49. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
  • 50. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
  • 51. hCard Contact information - person, place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Contacts Feeds Service Microformats: Web Semantics & More
  • 52. Oomph: Electronic business card action Microformats: Web Semantics & More
  • 53. Publish hCard in 3 easy steps Microformats: Web Semantics & More
  • 54. 1 Content STEP Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Microformats: Web Semantics & More
  • 55. 2 POSHify STEP Microformats: Web Semantics & More
  • 56. 2 POSHify STEP <dl>    <dt>Emily Lewis</dt>       <dd>          <ul>             <li><a href="http:// www.ablognotlimited.com"> A Blog Not Limited</a></li>             <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li>             <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li>          </ul>       </dd> </dl> Microformats: Web Semantics & More
  • 57. 3 Add hCard STEP Microformats: Web Semantics & More
  • 58. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd>          <ul>             <li><a href="http:// www.ablognotlimited.com" class="url"> A Blog Not Limited</a></li>             <li class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li>             <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li>          </ul>       </dd> </dl> Microformats: Web Semantics & More
  • 59. Worth noting Microformats: Web Semantics & More
  • 60. Worth noting • Markup doesn't matter, but it should be POSH Microformats: Web Semantics & More
  • 61. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> Microformats: Web Semantics & More
  • 62. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive Microformats: Web Semantics & More
  • 63. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties Microformats: Web Semantics & More
  • 64. Worth noting • Markup doesn't matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties • You don't need additional class values for styling, but you can use them Microformats: Web Semantics & More
  • 65. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars Microformats: Web Semantics & More
  • 66. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service Microformats: Web Semantics & More
  • 67. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
  • 68. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
  • 69. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
  • 70. hCalendar Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Events Feeds Service Microformats: Web Semantics & More
  • 71. H2VX: Electronic calendar in action Microformats: Web Semantics & More
  • 72. Publish hCalendar in 3 easy steps Microformats: Web Semantics & More
  • 73. 1 Content STEP 009 a t DOE , Inter Lab 2 a imed elopers k shop ite dev a y wor , webs a nage rs A 4-d asters r s&m w ebm p develope es. we b ap et resourc 09 of in tern 9, 20 e r 16-1 o vemb tional • N khaven Na Broo atory • abor L Microformats: Web Semantics & More
  • 74. 2 POSHify STEP Microformats: Web Semantics & More
  • 75. 2 POSHify STEP <h1><a href=”http://www.bnl.gov/ interlab09/”>InterLab 2009</a></h1> <p>A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li>November 16-19, 2009</li> <li><a href=”http://www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> Microformats: Web Semantics & More
  • 76. 3 Add hCalendar STEP Microformats: Web Semantics & More
  • 77. 3 Add hCalendar STEP <div class="vevent"> <h1><a href=”http://www.bnl.gov/interlab09/” class="summary url">InterLab 2009</a></h1> <p class="description">A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li><span class="dtstart"><span class=”value- title” title=”2009-11-16”> </span>November 16</span>-<span class="dtend"><span class=”value-title” title=”2009-11-19”> </ span>19, 2009</span></li> <li class="location"><a href=”http:// www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> </div> Microformats: Web Semantics & More
  • 78. Combining microformats Microformats: Web Semantics & More
  • 79. For mo even sem re powantic er! Combining microformats Microformats: Web Semantics & More
  • 80. hCalendar with hCard Microformats: Web Semantics & More
  • 81. hCalendar with hCard <div class=”vevent”> ... <li class=”location vcard”> <a href=”http://www.bnl.gov/” class=”fn org url”>Brookhaven National Laboratory</a> <ul class=”adr”> <li class=”post-office-box”>P.O. Box 5000</li> <li><span class=”locality”>Upton</span>, <abbr title=”New York” class=”region”>NY</abbr> <span class=”postal-code”>11973</span></li> </ul> </li> ... </div> Microformats: Web Semantics & More
  • 82. Microformats you can use now • hCalendar: event information • hCard: contact information • rel-license: license links • rel-nofollow: restricting increased page rank for links • rel-tag: tag links • VoteLinks: for, against and abstain links • XFN: distributed social networks • XOXO: outline content Microformats: Web Semantics & More
  • 83. And even more drafts • hAtom: syndicated • hProduct: consumer content products • hAudio: audio content • hRecipe: food and beverage recipes • hListing: open, distributed listings • hResume: Résumés and C.V.s • hMedia: video, images and audio media • hReview: reviews • hNews: journalistic • xFolk: bookmarks news Microformats: Web Semantics & More
  • 84. 6,137,400,000 Microformats: Web Semantics & More
  • 85. 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 Microformats: Web Semantics & More
  • 86. 60,600,000 - hReview 1,660,000,000 - hCard 2,090,000,000 - rel-tag 807,000,000 - hAtom 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 452,000,000 - XFN 108,000,000 - hResume 148,000,000 - geo 768,000,000 - adr 44,100,000 - hCalendar Microformats: Web Semantics & More
  • 87. Microformats in the wild • XFN: Twitter Flickr HuffDuffer Digg LinkedIn Plaxo Technorati Last.fm Google Social Graph API Ident Engine • rel-license: Creative Commons Yahoo! CC Search Google "Usage Rights" search • hCard: Google Rich Snippets Google Maps Yahoo! Local Google Profiles Twitter Last.fm • hCalendar: Yahoo! Upcoming MapQuest Local Facebook, Last.fm Eventful • hResume: LinkedIn SimplyHired Microformats: Web Semantics & More
  • 88. Getting started Microformats: Web Semantics & More
  • 89. Getting started *BLATANT PLUG WARNING* Microformats: Web Semantics & More
  • 90. My new book! Microformats: Web Semantics & More
  • 91. My new book! Available for sale on Amazon Microformats: Web Semantics & More
  • 92. My new book! Available for sale on Amazon Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET* Microformats: Web Semantics & More
  • 93. My blog tutorials Getting Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern Microformats: Web Semantics & More
  • 94. Great stuff from other folks • Microformats Wiki • A good resource once you understand the basics • Microformats: Empowering Your Markup for Web 2.0 by John Allsopp • microformatique • Follow @microformats • Send questions to @microformateers Microformats: Web Semantics & More
  • 95. Authoring tools • hCard Creator • hCalendar Creator • hReview Creator • Optimus Microformats Transformer also offers a validator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in Microformats: Web Semantics & More
  • 96. Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Microformats: Web Semantics & More
  • 97. Thanks! Microformats: Web Semantics & More