Embed Size (px)
Citation preview
Microformats
future-proof our Web sites prepare for Web 3.0 improve SEO streamline Web development reduce costs, long-term
Prepared by Kelley Walker, 2009.02
In the beginning….
Location, location, locationX X XContent, Content, Content
• Words
• Images
• Sound
• Music
• Flash files
• Videos
Standards, standards, standards
Increasingly:• Dynamic
• Interactive with users
• Open to user control & manipulation
So, what are standards?
“(T)he web got off to a faster start than any other medium. But its commercial success preceded the development of industry standards, throwing all of us into the perilous position of creating products and web sites that were continually made obsolete by one proprietary browser or device innovation after another."
- Jeffrey Zeldman
Browser wars
Browser makers introduced their own formats and tried to force everyone else to conform to their standards.
Even if we’ve never heard of Web standards, it is by their bugs that we shall know them
Standards: an old problem
Railroads developed without standards
Typical: 4' 8.5” gauge Carson-Colorado line: 3’ gauge Erie Railroad: 5’ gauge for bigger loads Maine: 2’-3’ gauge (use less wood for ties)
All industries need standards
Our current standards
Web Web 3.03.0
Semantic WebSemantic Web
Semantic Web
"… most information on the Web is designed for human consumption, and … the structure of the data is not evident to a robot browsing the web. … the Semantic Web approach instead develops languages for expressing information in a machine processable form.“ --Tim Berners-Lee
The Web3.0 buzz started two years ago, getting a boost from major companies like Microsoft, Google, Yahoo. All of them increasingly embraced standards-compliant, semantic-based Web design and development
What is the semantic web?
Semantic markup makes our data structured and our content more meaningful
Why does it matter. Consider this phrase:
“A man with a bone.”
What meanings are conjured up by the phrase?
Man with a bone
Man eating fish
It’s not just semantics
• The WHO (the organization) or The Who (Band) or who?
• Manhattan (city) or Manhattan (drink) or Manhattan (Sunseeker model)?
• Lincoln (equipment manufacturer) or Lincoln (president) or Lincoln (city)?
What does it mean?How does it mean?With Semantic MarkupIt’s also called (X)HTML(X)HTML gives structure and meaning to contentSometimes, developers use the word “tags”
<img> image <p> paragraph <cite> citation <h1> heading
<em> emphasis <strong> strong emphasis <ul> unordered list <blockquote>quoted content
interview transcript classified advertisement product listing (manufacturer’s showcase) product review product price or price range video phone #, hours, business location event listing floor plan slide show presentation
In HTML 4 there are about 50 elements to describe what our content means. Maybe 50 sufficed in 1995, but it doesn't now, especially if we want to get much more granular to describe page content:
In order to create more granularity to the structure and meaning of pages, we could rewrite (X)HTML
Instead of an entire
rewrite of (X)HTML, address a specific problem and create a MICROformat to solve that problem.
Microformat movement:
Microformats meet business needs
Content Standards
The purpose – so content can be read and understood by people, but can also be retrieved and extracted by machines for the purposes of indexing, searching for, saving, cross-referencing that information for people.
are designed for humans first, machines second
are a simple, open data format
extend already existing, agreed upon standards
development starts with POSH – Plain Old Semantic HTML
allow for publishing and sharing information in structured, meaningful ways
“enable users to own, control, move and share their data on the web.“ -- according to Emily Lewis, a microformat evangelist who’s written Microformats Made Simple
Widespread use
According to Yahoo! SearchMonkey, there are 1,450,000,000 web pages that publish hCard and 36,200,000 pages marked up with hCalendar
Mapquest
Sites using hCalendar
Mapquest
Yahoo! Upcoming Events Calendar
Eventful Meetup.com
Classic Car Events
World Cup Kickoff
Refresh Hampton Roads Monthly Meeting
posted on November 1, 2009
Date: November 3, 2009 18:00 - 20:00 EST
This meeting is public.
Filed under: Business Technology Design Usability Web Standards
f
<div class = "vevent"> <h5 class = "summary"> Refresh Hampton Roads Monthly Meeting</h5> <div>posted on <abbr class = "dtstamp" title=“20091101T1300Z">November 1, 2009 </abbr> </div> <div>Date: <abbr class = "dtstart" title=“20001103T180000Z">November 3, 2009, 18:00 EST</abbr> - <abbr class = "dtend" title = “20001103T190000Z">20:00 EST </abbr> </div> <div>This meeting is <strong class = "class">public</strong>.</div> <div>Filed under:</div> <ul> <li class="category">Business</li> <li class="category">Technology</li>
<li class="category">Design</li> <li class="category">Usability</li> <li class="category">Web Standards</li>
</ul> </div>
Microformats are designed for humans first,
machines second extend already existing, agreed
upon standards allow for publishing and sharing
information in structured, meaningful ways
use a simple, open data format The promise of Web 3.0: transform a
web site into a read only API
A read only API? Publish our sites once with (X)HTML
Using the hooks provided by microformats, the content can be converted into other formats: XML, RSS, Atom, JSON
There’s no need to create and maintain separate data files for machine data or exchange (e.g., feeds)
We can work with third parties with the microformat standard as our lingua franca. Existing conversion tools transform it into their preferred data.
Optimus - http://microformatique.com/optimus/
Google: Rich Snippets
Custom Search:
What we’re already doing
The link rel=“nofollow” microformat Our blog already uses the most widely
and successfully implemented microformat, hAtom, which is for marking up blog content. hAtom is built into all blogging software: Wordpress, Blogger, Livejournal, Textpattern, Movable Type, etc.
Already widely implemented Rel (relationship) tags make the
content more meaningful:
rel = “tag”
By adding rel = "tag" to a hyperlink, this indicates that the destination of that hyperlink is an author-designated "tag" (or keyword/subject) for the destination page.
Other link relationships: rel = “home”rel = “license”
Implementation: Boattrader Blog
At the Florida boat show, Sea Ray introduced its new line of pleasure boats, Bon Voyage and Del Mar.
<a href=http://www.boattrader.com/browse/make/sea-ray rel=“tag”>Sea Ray</a>
<a href=http://www.boattrader.com/browse/pleasure-boats” rel=“tag”>pleasure boats</a>
Geolocation
We’ve discussed used the geolocation metatag information
We can also wrap geolocation microformats around dealer information on dealer gallery pages, ad listing detail pages, search results, and dealer search results pages
ForRent has already implemented hCard and geolocation
AP and hNews
developed by Associated Press and Media Standards Trust
Perfect for our articles/news page
hListinglisting action: sell | rent | trade | meet | announce | offer | wanted | event | service
Lister: using hCard microformat: (full name || email || url || telephone)
Dtlisted: date listed
Dtexpired: date expired
Price:
Item Info: optional uses: fn || url || photo || geo || adr | // Uses hCard microformat if it’s for person or business
Summary: summary of the item listed.
Description: description of item listed.
Item tags: keywords or phrases describing the item being offered, using rel-tag microformat.
Permalink: permanent link to the listing (is not intended to expire).
hCard
Adds structure and meaning to contact information. Business card-like information is automatically extracted and imported into users’ address books. It can be made available to third party apps.
Technorati's Contacts Feeds Service Operator Plug-in for Firefox Tails Export Plug-in for Firefox Oomph Microformats Toolkit
Blogging platforms and social media are using XFN (X)HTML Friends Network - a set of relationship
defining links to other people’s web pages
Relationship Friend | Acquaintance | Contact
Physical Met
Professional Co-worker | Colleague
Geographical Co-resident | Neighbor
Family Child | Parent | Sibling | Spouse | Kin
Romantic Muse | Crush | Date | Sweetheart
Identity Me
For Developers: First, you start with content
Miz ThangDrama for Divas Unlimitedhttp://www.mizthang.comAtlanta, GA 30301 [email protected]
What is the basic structure and meaning:
POSHifyYou work from the content, out, add valid and semantic markup:
<dl> <dt>Miss Thang</dt> <dd> <ul> <li> <a href="http://www.mizthang.com"> Drama for Divas Unlimited </a> </li> <li>Atlanta, GA 30301</li> <li> <a href="mailto:[email protected]"> [email protected] </a> </li> </ul> </dd> </dl>
vCardize<dl class=“vcard”> <dt class=“fn”>Miss Thang</dt> <dd> <ul> <li> <a class = “url” href="http://www.mizthang.com"> Drama for Divas Unlimited </a> </li> <li class=“adr”><span class=“locality”>Atlanta</span>, <abrr class=“region”
title=“Georgia”>GA</abbr> <span class=“postal-code”>30301</span></li> <li> <a class=“email” href="mailto:[email protected]"> [email protected] </a> </li> </ul> </dd> </dl>
The Benefits Improved SEO; better search results; may
even be able to use microformat hooks to improve our search
Encouraging standards and consistency reduces development time
Simple format – no steep learning curve No need for special technologies Makes data accessible; enables sharing
and re-use of structured data Does not duplicate effort (RSS feeds
duplicate existing (X)HTML displays) Enhances user experience
Who Benefits Managers: streamlined dev process; SEO
improvements; happier developers Designers: simple to learn; not daunting
technology; styling is easy using existing CSS
Developers: less time deciding what to name classes or how to mark up content. Can spend more time writing styles
Content authors: makes content more meaningful
Users: enhances UX; improves search; plugins and third party apps built to make organizing data easier
Resources The Microformats Wiki, www.microformats.org Microformatique – microformat blog @ http://microformatique.com/ @microformats on Twitter -- http://twitter.com/microformats @microformateers on Twitter – http://twitter.com/microformateers Microformats Role Play – http://visitmix.com/Articles/Microformats-Role-Play Getting Semantic with Microformats –
http://ajaxian.com/archives/getting-semantic-with-microformats-series-by-emily-lewis
Update on Rich Snippets-- http://googlewebmastercentral.blogspot.com/2009/10/help-us-make-web-better-update-on-rich.html
Webpatterns -- naming conventions and patterns for the Web:http://www.webpatterns.org/
Semantic Class Names (several articles and resources)-- http://microformats.org/wiki/semantic-class-names
Microformat Transformer -- http://microformatique.com/optimus/ Web 3.0 -- http://webr3.org/blog/featured/preparing-yourself-for-web-3-0-lod-
and-2010/ Microformat University --
http://www.virtualhosting.com/blog/2008/microformats-university-100-articles-and-resources/
Microformats: Empowering Your Markup for Web 2.0 - John Allsopp Microformats Made Simple by Emily Lewis
