Microformats Workshop (2009)
Download as PPT, PDF1 like551 views
This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group
More Related Content
What's hot (20)
Similar to Microformats Workshop (2009) (20)
More from Kelley Howell (20)
Recently uploaded (20)
Microformats Workshop (2009)
- 1. 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
- 3. 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
- 4. 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
- 5. Browser wars Browser makers introduced their own formats and tried to force everyone else to conform to their standards.
- 6. Even if we’ve never heard of Web standards, it is by their bugs that we shall know them
- 7. 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)
- 8. All industries need standards
- 10. 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
- 11. 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?
- 12. Man with a bone Man eating fish
- 13. 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)?
- 14. What does it mean? How does it mean? With Semantic Markup It’s also called (X)HTML (X)HTML gives structure and meaning to content Sometimes, developers use the word “tags” <img> image <p> paragraph <cite> citation <h1> heading <em> emphasis <strong> strong emphasis <ul> unordered list <blockquote>quoted content
- 15. 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:
- 16. In order to create more granularity to the structure and meaning of pages, we could rewrite (X)HTML
- 17. Instead of an entire rewrite of (X)HTML, address a specific problem and create a MICROformat to solve that problem. Microformat movement:
- 18. Microformats meet business needs
- 20. 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
- 21. 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
- 22. Mapquest
- 23. Sites using hCalendar Mapquest Yahoo! Upcoming Events Calendar Eventful Meetup.com Classic Car Events World Cup Kickoff
- 24. 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
- 25. 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>
- 26. 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
- 27. 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/
- 28. Google: Rich Snippets Custom Search:
- 30. 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.
- 31. 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”
- 32. 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>
- 33. 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
- 34. AP and hNews developed by Associated Press and Media Standards Trust Perfect for our articles/news page
- 35. hListing listing 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).
- 36. 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
- 37. 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
- 38. For Developers: First, you start with content Miz Thang Drama for Divas Unlimited http://www.mizthang.com Atlanta, GA 30301 [email protected] What is the basic structure and meaning:
- 39. POSHify You 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>
- 40. 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>
- 41. 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
- 42. 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
- 44. 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-updat 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
Editor's Notes
- #3: In order to talk about microformats, I want to go back to the beginning a bit, for a little background. In the beginning, when humankind was bequeathed the Web, it was common to think of the Web like real estate. And as with real estate, the mantra was location, location, location. People thought that it would be good to produce one web site, but buy up dozens, sometimes hundreds, of domain names with all of them pointing at, roughly, the same content. Ten years ago, when I worked for a startup, my boss bought up 78 different domains. For him, the idea was like having a Starbucks every ten blocks. The same coffee, the same coffee mugs, just a different address. Today we know that the Web isn’t really about location, location, location. Instead, it’s about content, content, content – and that content earns you the location, location, location – which is to say, it buys you position on search results pages (SERPs).
- #4: Today’s and the future’s Web – increasingly dynamic and interactive, user controlled. If the web is all about content, content, content (and not location, location, location), then whenever we talk about content, we need to talk about standards.
- #7: We’re familiar with standards. We know them by their bugs. Every time you encounter a bug on our Web site that only shows up in one browser and not others, that’s a problem that results from this chaotic lack of standards. More appropriately, it’s a problem of a browser not interpreting the existing standards correctly.
- #8: With the first industrial revolution in steam power technologies, railroad tracks developed without standards.The result? Different companies built tracks at different widths. It was common to build the track according to tradition: 4&apos; 8.5&quot;. Odd number, huh? Others built tracks at smaller gauges like the 3ft gauge Carson-Colorado line. To get to Nevada, a train coming from a 4&apos; 8.5” track would have to unload its cargo and passengers at a transfer station. Railroad companies had their own version of the browser wars: the idea was to try to be an industry leader and force others to conform to your standards. Good for business, if it worked. It meant you&apos;d already invested the capital while your competitors would have to sink loads more capital into conforming to your standard and scrapping their previous investment. The heavy requirements for capital investment often put competitors out of business.
- #9: We’re already building our site with standards We need to prepare for Web 3.0 – the Semantic Web
- #14: We say that when we think something’s trivial or nitpicking. But it’s not trivial at all when we consider the cases:
- #17: 1998 – HTML4 2004 – HTML5 rewrite begins 2009 – will be years before HTML5 will be widely adopted
- #19: http://microformats.org/code/hcalendar/creator http://tippie.uiowa.edu/calendar/index.cfm?start=10-25-2009&end=10-31-2009 http://www.b2i.us/profiles/investor/Calendar.asp?f=1&BzID=1685&to=ec&Nav=0&LangID=1&s=0 http://www.heinz.cmu.edu/news/rss-feeds/index.aspx
- #20: Today’s and the future’s Web – increasingly dynamic and interactive, user controlled.
- #24: Mapquest is an early adopter of microformats – already using hCalender, hCard, and geolocation microformats.
- #28: Use forrent url search URL for JSON and XML. Will need to open Wordpad to show the data conversion with line breaks. What is JSON – JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). The JSON format is often used for serialization and transmitting structured data over a network connection. Its main application is in Ajax web application programming, where it serves as an alternative to the XML format.
- #29: Google’s long adopted microformats in google local, maps. This year, Google started using microformats to display “Rich Snippets”
- #31: The hAtom schema consists of the following: hfeed (hfeed). optional. feed category. optional. keywords or phrases, using rel-tag. hentry (hentry). entry-title. required. text. entry-content. optional (see field description). text. [*] entry-summary. optional. text. updated. required using datetime-design-pattern. [*] published. optional using datetime-design-pattern. author. required using hCard. [*] bookmark (permalink). optional, using rel-bookmark. tags. optional. keywords or phrases, using rel-tag.
- #44: Microformat specifications and development work is supported by organizations and people such as Microsoft, Google, Yahoo, LinkedIn, Oodle, Facebook, Myspace, Hewlett Packard, Association for Computing Machinery, Wordpress’s Matt Mullenweg (photomat), Amazon’s Ian McAllister, Google’s Matt Cutts, Angstrom and KnowNow’s Rohit Khare and Adam Rifkin, Tantek Çelik, Frances Berriman of the BBC, Ben Ward at Yahoo Dev Network, ZDNet