SlideShare uma empresa Scribd logo
1 de 106
Microforma

                          Emily Lewis
               In Control February 22, 2011
 Some rights
 reserved.
Microforma
or: How I Learned to Write



                          Emily Lewis
               In Control February 22, 2011
 Some rights
 reserved.
http://bit.ly/fj0BPW
http://microformatsmadesimple.com/resources.php
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
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 Designer
http://emilylewisdesign.com


Author, Microformats Made Simple
http://microformatsmadesimple.com



Email:     emily@emilylewisdesign.com
Blog:      http://ablognotlimited.com
Twitter:   @emilylewis
I’m an
organizer
Microformats or: How I Learned to Write POSH and Love the Semantic Web
I like order
I like order
  Especially in my HTML
MIX Online: Web Standards: Where

<3 at first sight                                    the ROI Is




Web 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 Is




Web standards
• Guidelines and best practices
• More efficient
• Great for team-based development
• Structured content

GATE
• Semantic markup


WAY
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 are
microformats?
Microformats Wiki: What Are
              Microformats
Microformats Wiki: What Are
                                Microformats




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




Microformats enable the
publishing and sharing of
higher fidelity information on
the 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




 Smart
content
Microformats Wiki: What Are
                                                  Microformats




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




 Smart
content
          Building blocks that
          enable users to own,
          control, move and                 Markup, with
          share their data on the           more
          web.                              meaning
huh?
Microformats are sets of
HTML attributes and
values that are applied to
common web content to
describe that content and
give it more meaning.
<a href="/tags/css/">CSS</a>
Microformats Wiki: rel-tag




<a href="/tags/css/" rel="tag">CSS</a>
Formal
microformats
• hCalendar: event information
• hCard: contact information
• rel-license: license links
• rel-nofollow: restricting increased page rank
  for links
• rel-tag: tag links
• VoteLinks: for, against and abstain links
• XFN: distributed social networks
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. Draft
Formal microformats are those
that are stable and unlikely to
change.
Draft microformats are relatively
far along in the specification
process, but haven’t been formally
completed. They are subject to
The Basics
Use existing
• (X)HTML
 • rel
 • class
 • rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
 principles
The Basics
Use existing
• HTML5
 • rel
 • class
 • rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
 principles
The Basics
It’s all about
• Core purpose is to add meaning
• Publish with POSH
“Self
describing”
        - 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 pretty
POSH
<ul id="nav">

 <li><a href="/">Home</a></li>
   <li><a href="/products/">Products</a></li>
   <li><a href="/services/">Services</a></li>
   <li><a href="/about/">About</a></li>
</ul>
The Basics
Address a specific
• Common, real-world web content
 • People

 • Organizations

 • Events

 • Blog posts

 • Reviews

 • Tags
The Basics
Intentionally
• Easy to learn and use
• Based on current human behavior on the
 web
• Aimed at 80% of use-cases; the most
 common
The Basics
Humans 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
Not

http://www.flickr.com/photos/sebke/3567653086/in/photostream/
Machines!
• Search engines
• Browsers
• Assistive technologies
• User agents
• Applications
Why?
The Benefits
Machine
Humans Understand
The Benefits
Machine
Humans Understand

Please join us on Sunday,
February 20 for the In
Control welcome happy
hour at the Embassy
Suites bar.
The Benefits
Machine
Humans Understand           Machines Don’t
Please join us on Sunday,   Blahblah blahbliby blah
February 20 for the In      blahblahblibity blah
Control welcome happy       blah blahblah
hour at the Embassy
Suites bar.                 blahblahblibity blah
The Benefits
Machine
• 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 Benefits
Enhanced user
• Download to address book
• Download to calendar
• More meaningful search results
• Findability
Google Rich
 Snippets:
The Benefits
Minimal
investment
•Easy to learn
• Easy to implement
• No need for special software
• No need to learn new technologies
The Benefits
Encourages
standards
•Web standards
 • Valid, semantic markup


• Workflows and processes for development
 teams
 • Consistent markup

 • Standard naming conventions for styling
6,137,400,00
0 + published
   Yahoo! SearchMonkey results as of 12/17/09
Peer pressure
6,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 pressure
6,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 your
laptops ready!
    http://bit.ly/fj0BPW
Elemental
microformats
•Single attribute-value pair
• Often used as building blocks for other
 microformats
Elementals
rel-tag
Describes the relationship of links containing
tags (keywords) to your content:

<a href="/tags/css/" rel="tag">css</a>


The rel="tag" attribute-value pair indicates the
link destination (href) is to a page that tells
what the current page - or part of the current
Elementals
What can you do
with rel-tag?
• Context-specific search
 • Technorati's Tags

 • Operator Add-on for Firefox
Operator Add-
     on:
Elementals
rel-me
Assigned to links to sites that represent you
online:

<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
Elementals
What can you do
with consolidation
• Identity rel-me?
 • Ident Engine
 • Huffduffer
Ident Engine:
   Identity
 consolidation
Elementals
XFN
meis just one of the values for the XFN
microformat
XFN is used to describe social relationships
among people
Elementals
XFN
Relationship                   XFN rel Values
Friendship (one value)         contact    acquaintance      friend
Professional (one or both      colleague       co-worker
values)
Family (one value)             kin    spouse    child    parent sibling

Romantic (any or all values)   muse   crush     date    sweetheart

Physical                       met

Geographic (one value)         neighbor    co-resident

Identity                       me
Elementals
XFN
For links to other people’s identities online,
you can apply XFN to indicate your social
relationship with that person:


<a href="http://www.christopherschmitt.com/"
rel="met friend colleague muse">
Christopher Schmitt</a>
Still with me?
Compound
microformats
•Several attribute-value pairs (properties and
 sub-properties)
• Utilize other microformats as building blocks
Compounds
hCard
Adds semantics to contact information for
people, places and organizations/
companies.
Contact information published with hCard
can be transformed into an electronic
business card.
• H2VX Contacts Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit
Michromeform
     ats:
  Electronic
Compounds
hCard in 3 easy
steps
1. Identify content
2. POSHify
3. Add hCard
1
       Start with Content
STEP

                  Emily Lewis
                  Emily Lewis Design, LLC
                  Albuquerque, NM 87106
                  emily@emilylewisdesign.com
2
       POSHify
STEP
   <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 hCard
STEP
       Add the root vcard to the element containing all of the
       contact information. Then, add the relevant hCard
       properties and sub-properties via the class attribute


       Web Content            hCard class Values
       Name (first and last)   fn
       Web site               url

       Address                adr

          City                     locality

          State                    region

          ZIP                      postal-code

       Email                  email
3
       Add hCard
STEP
   <dl class="vcard">
      <dt>Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com">Emily
   Lewis Design, LLC</a></dd>
         <dd>Albuquerque, <abbr title="New Mexico">NM</
   abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com">Emily
   Lewis Design, LLC</a></dd>
         <dd>Albuquerque, <abbr title="New Mexico">NM</
   abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd>Albuquerque, <abbr title="New Mexico">NM</
   abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd class="adr">Albuquerque, <abbr title="New
   Mexico">NM</abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd class="adr"><span
   class="locality">Albuquerque</span>, <abbr title="New
   Mexico">NM</abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd class="adr"><span
   class="locality">Albuquerque</span>, <abbr title="New
   Mexico" class="region">NM</abbr> 87106</dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd class="adr"><span
   class="locality">Albuquerque</span>, <abbr title="New
   Mexico" class="region">NM</abbr> <span class="postal-
   code">87106</span></dd>
         <dd><a href="mailto:emily@emilylewisdesign.com">
   emily@emilylewisdesign.com</a></dd>
   </dl>
3
       Add hCard
STEP
   <dl class="vcard">
      <dt class="fn">Emily Lewis</dt>
         <dd><a href="http://emilylewisdesign.com"
   class="url">Emily Lewis Design, LLC</a></dd>
         <dd class="adr"><span
   class="locality">Albuquerque</span>, <abbr title="New
   Mexico" class="region">NM</abbr> <span class="postal-
   code">87106</span></dd>
         <dd><a href="mailto:emily@emilylewisdesign.com"
   class="email">emily@emilylewisdesign.com</a></dd>
   </dl>
A Closer Look
Non-semantic
elements
<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 Look
Don’t forget
validation!
•W3C Markup Validation Service
• Optimus Microformats Transformer
Also worth
• Markup doesn't matter, but it should be
 POSH
• Attribute values are case-sensitive
• Root properties cannot be combined with
 sub-properties
• You don't need additional class values
 for styling, but you can use them
Compounds
hCalendar
Adds semantics to event information.
Event information published with hCalendar
can be extracted and imported into users'
calendars
• H2VX Events Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit
• Michromeformats extension for Chrome
H2VX:
Electronic calendar
Compounds
hCalendar in 3
easy steps
1. Identify content
2. POSHify
3. Add hCalendar
1
       Start with Content
STEP




                            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
       POSHify
STEP
   <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 hCalendar
STEP
       Add the root vevent to the element containing all of
       the contact information. Then, add the relevant
       hCalendar properties and sub-properties via the class


       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 hCalendar
STEP
   <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 hCalendar
STEP
   <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 hCalendar
STEP
   <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 hCalendar
STEP
   <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 hCalendar
STEP
   <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>

Mais conteúdo relacionado

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

Practical Microformats - Voices That Matter
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That MatterEmily Lewis
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & MoreEmily Lewis
 
Evaluating Drupal for the Enterprise
Evaluating Drupal for the EnterpriseEvaluating Drupal for the Enterprise
Evaluating Drupal for the Enterpriseultimike
 
Microformats Workshop (2009)
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)Kelley Howell
 
Skb web2.0
Skb web2.0Skb web2.0
Skb web2.0animove
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web DevelopmentDaryll Chu
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopmentdamonras
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTMLRich Dron
 
Social networks: technical issues
Social networks: technical issuesSocial networks: technical issues
Social networks: technical issuesMorgan Magnin
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteSarah Joy Arnold
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1BeeNear
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
Contextual Computing - Knowledge Graphs & Web of Entities
Contextual Computing - Knowledge Graphs & Web of EntitiesContextual Computing - Knowledge Graphs & Web of Entities
Contextual Computing - Knowledge Graphs & Web of EntitiesRichard Wallis
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_phpJeanho Chu
 
IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)IWMW
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016Rich Dron
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpressDakshata Gavand
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_phpJeanho Chu
 

Semelhante a Microformats or: How I Learned to Write POSH and Love the Semantic Web (20)

Practical Microformats - Voices That Matter
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That Matter
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & More
 
Evaluating Drupal for the Enterprise
Evaluating Drupal for the EnterpriseEvaluating Drupal for the Enterprise
Evaluating Drupal for the Enterprise
 
Microformats Workshop (2009)
Microformats Workshop  (2009)Microformats Workshop  (2009)
Microformats Workshop (2009)
 
Skb web2.0
Skb web2.0Skb web2.0
Skb web2.0
 
Emerging Technologies
Emerging TechnologiesEmerging Technologies
Emerging Technologies
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopment
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
 
Social networks: technical issues
Social networks: technical issuesSocial networks: technical issues
Social networks: technical issues
 
The Tools of Web 2.0
The Tools of Web 2.0The Tools of Web 2.0
The Tools of Web 2.0
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
Contextual Computing - Knowledge Graphs & Web of Entities
Contextual Computing - Knowledge Graphs & Web of EntitiesContextual Computing - Knowledge Graphs & Web of Entities
Contextual Computing - Knowledge Graphs & Web of Entities
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpress
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 

Mais de Emily Lewis

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring ProcessEmily Lewis
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EEEmily 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)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque CommunityEmily Lewis
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineEmily Lewis
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management SystemsEmily Lewis
 
jQuery, A Designer's Perspective
jQuery, A Designer's PerspectivejQuery, A Designer's Perspective
jQuery, A Designer's PerspectiveEmily Lewis
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Emily Lewis
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessEmily Lewis
 

Mais de Emily Lewis (12)

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring Process
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EE
 
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)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque Community
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngine
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
 
jQuery, A Designer's Perspective
jQuery, A Designer's PerspectivejQuery, A Designer's Perspective
jQuery, A Designer's Perspective
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means Business
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

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

  • 1. Microforma Emily Lewis In Control February 22, 2011 Some rights reserved.
  • 2. Microforma or: How I Learned to Write Emily Lewis In Control February 22, 2011 Some rights reserved.
  • 4. Today will be awesome! You’re gonna • What are microformats • Benefits of microformats • How to enrich your content with some common microformats • Where you can see microformats in action • Lots of resources to help you publish microformats
  • 5. But wait! There’s more! You’ll also learn • Semantic markup! • Machines! • HTML5 microdata! • ARIA Landmark Roles!
  • 6. But wait! There’s more! You’ll also learn • Semantic markup! • Machines! • HTML5 microdata! • ARIA Landmark Roles! SEMA NTIC FREAK
  • 7. Freelance Web Designer http://emilylewisdesign.com Author, Microformats Made Simple http://microformatsmadesimple.com Email: emily@emilylewisdesign.com Blog: http://ablognotlimited.com Twitter: @emilylewis
  • 11. I like order Especially in my HTML
  • 12. MIX Online: Web Standards: Where <3 at first sight the ROI Is Web standards • Guidelines and best practices • More efficient • Great for team-based development • Structured content • Semantic markup
  • 13. MIX Online: Web Standards: Where <3 at first sight the ROI Is Web standards • Guidelines and best practices • More efficient • Great for team-based development • Structured content GATE • Semantic markup WAY
  • 14. Just say yes! Now, I’m hooked
  • 15. Just say yes! Now, I’m hooked • Plain Old Semantic Markup (POSH)
  • 16. Just say yes! Now, I’m hooked • Plain Old Semantic Markup (POSH) • Semantic CSS
  • 17. Just say yes! Now, I’m hooked • Plain Old Semantic Markup (POSH) • Semantic CSS • Microformats
  • 18. Just say yes! Now, I’m hooked • Plain Old Semantic Markup (POSH) • Semantic CSS • Microformats • HTML5’s new structural elements
  • 19. Just say yes! Now, I’m hooked • Plain Old Semantic Markup (POSH) • Semantic CSS • Microformats • HTML5’s new structural elements • ARIA roles
  • 21. Microformats Wiki: What Are Microformats
  • 22. Microformats Wiki: What Are Microformats Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
  • 23. Microformats Wiki: What Are Microformats Microformats enable the publishing and sharing of higher fidelity information on the web. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
  • 24. Microformats Wiki: What Are Microformats Smart content
  • 25. Microformats Wiki: What Are Microformats Smart content Building blocks that enable users to own, control, move and share their data on the web.
  • 26. Microformats Wiki: What Are Microformats Smart content Building blocks that enable users to own, control, move and Markup, with share their data on the more web. meaning
  • 27. huh?
  • 28. Microformats are sets of HTML attributes and values that are applied to common web content to describe that content and give it more meaning.
  • 30. Microformats Wiki: rel-tag <a href="/tags/css/" rel="tag">CSS</a>
  • 31. Formal microformats • hCalendar: event information • hCard: contact information • rel-license: license links • rel-nofollow: restricting increased page rank for links • rel-tag: tag links • VoteLinks: for, against and abstain links • XFN: distributed social networks
  • 32. And even more • 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
  • 33. Formal vs. Draft Formal microformats are those that are stable and unlikely to change. Draft microformats are relatively far along in the specification process, but haven’t been formally completed. They are subject to
  • 34. The Basics Use existing • (X)HTML • rel • class • rev • vCard: hCard • iCalendar: hCalendar • Atom: hAtom • Other microformats and naming principles
  • 35. The Basics Use existing • HTML5 • rel • class • rev • vCard: hCard • iCalendar: hCalendar • Atom: hAtom • Other microformats and naming principles
  • 36. The Basics It’s all about • Core purpose is to add meaning • Publish with POSH
  • 37. “Self describing” - Chris Mills
  • 38. So icky Not POSH <table> <tr> <td><a href="/">Home</a></td> <td><a href="/products/">Products</a></td> <td><a href="/services/">Services</a></td> <td><a href="/about/">About</a></td> </tr> </table> 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>
  • 39. So pretty POSH <ul id="nav"> <li><a href="/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/services/">Services</a></li> <li><a href="/about/">About</a></li> </ul>
  • 40. The Basics Address a specific • Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags
  • 41. The Basics Intentionally • Easy to learn and use • Based on current human behavior on the web • Aimed at 80% of use-cases; the most common
  • 42. The Basics Humans 1st, • Human-readable content • From a user’s perspective, web content published with microformats is indistinguishable from that published without. • “Invisible” metadata for machine readability
  • 44. Machines! • Search engines • Browsers • Assistive technologies • User agents • Applications
  • 45. Why?
  • 47. The Benefits Machine Humans Understand Please join us on Sunday, February 20 for the In Control welcome happy hour at the Embassy Suites bar.
  • 48. The Benefits Machine Humans Understand Machines Don’t Please join us on Sunday, Blahblah blahbliby blah February 20 for the In blahblahblibity blah Control welcome happy blah blahblah hour at the Embassy Suites bar. blahblahblibity blah
  • 49. The Benefits Machine • Content published with microformats is parsable. It can be extracted and indexed, downloaded, searched for, saved, cross- referenced and combined. • Web site becomes an API, enabling sharing and re-use of content.
  • 50. The Benefits Enhanced user • Download to address book • Download to calendar • More meaningful search results • Findability
  • 52. The Benefits Minimal investment •Easy to learn • Easy to implement • No need for special software • No need to learn new technologies
  • 53. The Benefits Encourages standards •Web standards • Valid, semantic markup • Workflows and processes for development teams • Consistent markup • Standard naming conventions for styling
  • 54. 6,137,400,00 0 + published Yahoo! SearchMonkey results as of 12/17/09
  • 55. Peer pressure 6,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
  • 56. Peer pressure 6,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
  • 57. Get your laptops ready! http://bit.ly/fj0BPW
  • 58. Elemental microformats •Single attribute-value pair • Often used as building blocks for other microformats
  • 59. Elementals rel-tag Describes the relationship of links containing tags (keywords) to your content: <a href="/tags/css/" rel="tag">css</a> The rel="tag" attribute-value pair indicates the link destination (href) is to a page that tells what the current page - or part of the current
  • 60. Elementals What can you do with rel-tag? • Context-specific search • Technorati's Tags • Operator Add-on for Firefox
  • 62. Elementals rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a>
  • 63. blog
  • 64. blog portfoli o
  • 65. blog portfoli o
  • 66. blog portfoli o
  • 67. blog portfoli o
  • 68. blog portfoli o
  • 69. blog portfoli o
  • 70. blog portfoli o
  • 71. blog portfolio
  • 72. Elementals What can you do with consolidation • Identity rel-me? • Ident Engine • Huffduffer
  • 73. Ident Engine: Identity consolidation
  • 74. Elementals XFN meis just one of the values for the XFN microformat XFN is used to describe social relationships among people
  • 75. Elementals XFN Relationship XFN rel Values Friendship (one value) contact acquaintance friend Professional (one or both colleague co-worker values) Family (one value) kin spouse child parent sibling Romantic (any or all values) muse crush date sweetheart Physical met Geographic (one value) neighbor co-resident Identity me
  • 76. Elementals XFN For links to other people’s identities online, you can apply XFN to indicate your social relationship with that person: <a href="http://www.christopherschmitt.com/" rel="met friend colleague muse"> Christopher Schmitt</a>
  • 78. Compound microformats •Several attribute-value pairs (properties and sub-properties) • Utilize other microformats as building blocks
  • 79. Compounds hCard Adds semantics to contact information for people, places and organizations/ companies. Contact information published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit
  • 80. Michromeform ats: Electronic
  • 81. Compounds hCard in 3 easy steps 1. Identify content 2. POSHify 3. Add hCard
  • 82. 1 Start with Content STEP Emily Lewis Emily Lewis Design, LLC Albuquerque, NM 87106 emily@emilylewisdesign.com
  • 83. 2 POSHify STEP <dl>    <dt>Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com">Emily Lewis Design, LLC</a></dd>       <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 84. 3 Add hCard STEP Add the root vcard to the element containing all of the contact information. Then, add the relevant hCard properties and sub-properties via the class attribute Web Content hCard class Values Name (first and last) fn Web site url Address adr City locality State region ZIP postal-code Email email
  • 85. 3 Add hCard STEP <dl class="vcard">    <dt>Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com">Emily Lewis Design, LLC</a></dd>       <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 86. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com">Emily Lewis Design, LLC</a></dd>       <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 87. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 88. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd class="adr">Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 89. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico">NM</abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 90. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> 87106</dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 91. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd>       <dd><a href="mailto:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></dd> </dl>
  • 92. 3 Add hCard STEP <dl class="vcard">    <dt class="fn">Emily Lewis</dt>       <dd><a href="http://emilylewisdesign.com" class="url">Emily Lewis Design, LLC</a></dd>       <dd class="adr"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd>       <dd><a href="mailto:emily@emilylewisdesign.com" class="email">emily@emilylewisdesign.com</a></dd> </dl>
  • 93. A Closer Look Non-semantic elements <dd class="adr"> <span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span> </dd>
  • 94. A Closer Look Don’t forget validation! •W3C Markup Validation Service • Optimus Microformats Transformer
  • 95. Also worth • Markup doesn't matter, but it should be POSH • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties • You don't need additional class values for styling, but you can use them
  • 96. Compounds hCalendar Adds semantics to event information. Event information published with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit • Michromeformats extension for Chrome
  • 98. Compounds hCalendar in 3 easy steps 1. Identify content 2. POSHify 3. Add hCalendar
  • 99. 1 Start with Content STEP 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
  • 100. 2 POSHify STEP <h1><a href="http://sxsw.com/interactive">SXSWi 2011</a></h1> <p>A 5-day conference celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul>
  • 101. 3 Add hCalendar STEP Add the root vevent to the element containing all of the contact information. Then, add the relevant hCalendar properties and sub-properties via the class 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
  • 102. 3 Add hCalendar STEP <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>
  • 103. 3 Add hCalendar STEP <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>
  • 104. 3 Add hCalendar STEP <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>
  • 105. 3 Add hCalendar STEP <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>
  • 106. 3 Add hCalendar STEP <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>
  • 107. 3 Add hCalendar STEP <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>
  • 108. 3 Add hCalendar STEP <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>
  • 109. 3 Add hCalendar STEP <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>
  • 110. Microformats Wiki: Value Class A Closer Look Pattern Value class pattern Offers authors several options for marking up 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
  • 112. For e morven sema e Combining n powe tic r! microformats
  • 113. 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"><span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal- code">87106</span></dd>       <dd><a href="mailto:emily@emilylewisdesign.com" class="email"> emily@emilylewisdesign.com</a></dd> </dl>
  • 114. Combining Microformats hCalendar with hCard <div class="vevent"> ... <li class="location vcard"><a href="http:// www.austinconventioncenter.com" class="fn org url">Austin Convention Center</a> <ul class="adr"> <li class="street-address">500 East Cesar Chavez Street</li> <li><span class="locality">Austin</span>, <abbr title="Texas" class="region">TX</abbr> <span class="postal-code">78701</span></li> </ul> </li>
  • 116. HTML5 New structural • <section> • <header> • <footer> • <nav> • <aside> • <article>
  • 117. HTML5 New structural <section class="vevent"> <h1 class="summary"><a href="http://sxsw.com/ interactive" class="url">SXSWi 2011</a></h1> ... </section>
  • 120. RDFa Microformats micr odat a
  • 121. Fight! Fight! Fight! http://www.flickr.com/photos/sebke/3567653086/in/ photostream/
  • 123. HTML5 Microdata <dl itemscope itemtype="http://data-vocabulary.org/ Person">    <dt itemprop="name"><a href="http:// ablognotlimited.com" itemprop="url">Emily Lewis</a></ dt>    <dd itemprop="address" itemscope itemtype="http:// data-vocabulary.org/Address"><span itemprop="locality">Albuquerque</span>, <abbr title="New Mexico" itemprop="region">NM</abbr> <span itemprop="postal-code">87106</span></dd> </dl>
  • 124. Two Stones, One Bird Microdata & <dl class="vcard" itemscope itemtype="http://data- vocabulary.org/Person">    <dt class="fn" itemprop="name"><a href="http:// ablognotlimited.com" class="url" itemprop="url">Emily Lewis</a></dt>    <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"><span class="locality" itemprop="locality">Albuquerque</ span>, <abbr title="New Mexico" class="region" itemprop="region">NM</abbr> <span class="postal-code" itemprop="postal-code">87106</span></dd> </dl>
  • 126. ARIA • Set of guidelines from WAI for accessible, rich internet applications • Includes Document Landmark Roles to indicate document structure and aid navigation
  • 127. Paciello Group: Using WAI ARIA Landmark ARIA Roles Document • 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>
  • 128. 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>
  • 129. 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>
  • 131. Resources One stop shop http://bit.ly/fj0BPW http://microformatsmadesimple.com/resources.php • All resources and demo links from this deck • Authoring tools • Further reading

Notas do Editor

  1. So, I&amp;#x2019;m going to kick things off this morning with a talk about microformats &lt;&lt;CLICK&gt;&gt;Or &amp;#x201C;How I learned to write POSH and love the semantic web&amp;#x201D;&lt;&lt;PAUSE&gt;&gt;\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&amp;#x2019;m talking about?&lt;&lt;PAUSE&gt;&gt; Regardless of which group you fall into, I bet you will learn at least three new things in today&amp;#x2019;s session.\n
  2. Before we get started, here&amp;#x2019;s the URL for a page of a links and resources mentioned in this presentation\n
  3. For those of you who are new to microformats or need a refresher, we&amp;#x2019;re going to cover the basics. And for those of you who are old-hat at microformats, I&amp;#x2019;ll be showing you some demos and features that I hope will renew your excitement about using them.\n
  4. But more than microformats, I&amp;#x2019;ll also be talking about some bonus goodness like...&lt;&lt;CLICKS&gt;&gt;And, of course, how these things are related and why they are important.\nAlong the way, I&amp;#x2019;ll be talking about how I went from a normal web designer to a freak about semantics on the web.&lt;&lt;PAUSE&gt;&gt;Speaking of me ...\n
  5. I&amp;#x2019;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
  6. \n
  7. With so many years spent in the corporate/government world working on teams (some of which were large and distributed), I&amp;#x2019;ve grown to appreciate the efficiency that order and organization in HTML and CSS offers. So, when I first learned about web standards ...\n
  8. It was a perfect fit &lt;&lt;CLICKS&gt;&gt; It also turned out to be a gateway drug\n
  9. 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&amp;#x2019;s structural elements... and then it was ARIA roles.&lt;&lt;CLICK&gt;&gt;Most importantly, with all of these technologies, I was producing some of the best work of my career.\n&lt;&lt;PAUSE&gt;&gt;\nMy goal for today&amp;#x2019;s session is to inspire you to do the same.\n
  10. 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&amp;#x2019;s structural elements... and then it was ARIA roles.&lt;&lt;CLICK&gt;&gt;Most importantly, with all of these technologies, I was producing some of the best work of my career.\n&lt;&lt;PAUSE&gt;&gt;\nMy goal for today&amp;#x2019;s session is to inspire you to do the same.\n
  11. 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&amp;#x2019;s structural elements... and then it was ARIA roles.&lt;&lt;CLICK&gt;&gt;Most importantly, with all of these technologies, I was producing some of the best work of my career.\n&lt;&lt;PAUSE&gt;&gt;\nMy goal for today&amp;#x2019;s session is to inspire you to do the same.\n
  12. 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&amp;#x2019;s structural elements... and then it was ARIA roles.&lt;&lt;CLICK&gt;&gt;Most importantly, with all of these technologies, I was producing some of the best work of my career.\n&lt;&lt;PAUSE&gt;&gt;\nMy goal for today&amp;#x2019;s session is to inspire you to do the same.\n
  13. 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&amp;#x2019;s structural elements... and then it was ARIA roles.&lt;&lt;CLICK&gt;&gt;Most importantly, with all of these technologies, I was producing some of the best work of my career.\n&lt;&lt;PAUSE&gt;&gt;\nMy goal for today&amp;#x2019;s session is to inspire you to do the same.\n
  14. So, starting with the most basic question, especially for you folks who are new to microformats ... what are they? \n
  15. Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as &lt;&lt;CLICK&gt;&gt;\n
  16. Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as &lt;&lt;CLICK&gt;&gt;\n
  17. \n
  18. \n
  19. All of these definitions SOUND good or at least make you sound smart, but they really don&amp;#x2019;t describe what Microformats ARE ... or how simple it is to publish with them\n
  20. So this is the definition I like\n
  21. So, a super simple example would be for tag links, which you commonly find on blogs\n
  22. And this is a microformat ... the rel-tag microformat, which we&amp;#x2019;ll be looking at later in this presentation. But that&amp;#x2019;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
  23. \n
  24. \n
  25. Don&amp;#x2019;t be afraid of the word &amp;#x201C;draft&amp;#x201D; ... 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
  26. \n
  27. \n
  28. POSH, as I mentioned earlier, is Plain Old Semantic Markup. And I really dig it, so let&amp;#x2019;s take a moment to talk about it\n
  29. My favorite definition of semantic markup or POSH is &amp;#x201C;self describing&amp;#x201D; markup. Markup that describes the content. If you follow today&amp;#x2019;s web standards, hopefully you are doing this... using &lt;h1&gt;-&lt;h6&gt; for headings, &lt;p&gt; for paragraphs, &lt;ul&gt; for lists and so on.\n
  30. Hopefully you are NOT using &lt;TABLE&gt; for layout or something like this example for navigation links\n
  31. Because navigation links are usually a list of links, right? As such, it should be marked up with &lt;ul&gt;. 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.&lt;&lt;PAUSE&gt;&gt;So, that&amp;#x2019;s POSH ... let&amp;#x2019;s get back to microformats\n
  32. Problem is not really a &amp;#x201C;problem&amp;#x201D; but more the type of content that we want to describe\n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. Once you take the time to add machine readability with something like MFs, machines can then do stuff with your content\n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. 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&amp;#x2019;s emerging technologies and you want to experiment and do more\n
  105. 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&amp;#x2019;t recognize MF when applied to these new elements.\n
  106. Fortunately, that&amp;#x2019;s no longer a problem. I&amp;#x2019;ve tested on almost all of the parsers I&amp;#x2019;ve shown you today and they will happily recognize. \n
  107. Microformats aren&amp;#x2019;t the only semantic technology, either. There&amp;#x2019;s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
  108. Microformats aren&amp;#x2019;t the only semantic technology, either. There&amp;#x2019;s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
  109. 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 &amp;#x201C;My semantic technology is better than yours&amp;#x201D; will never end. For me, I don&amp;#x2019;t care about the arguments. I care about practicalities.\n
  110. Microdata is, in concept, very similar to MFs. Take this example of contact information.\n
  111. 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&amp;#x2019;t have the kind of &amp;#x201C;machine&amp;#x201D; support as microformats (yet) ... so I don&amp;#x2019;t see a need for ME to use it (yet)\n
  112. 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
  113. Continuing with the semantic slope, let&amp;#x2019;s talk a bit about ARIA\n
  114. \n
  115. When I saw these roles, I immediately had an Oprah ah-ha moment ... it was really the same concept I&amp;#x2019;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
  116. \n
  117. \n
  118. I&amp;#x2019;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
  119. And again, here&amp;#x2019;s the resources.\n
  120. \n
  121. \n