Microformats 101 Workshop


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Image: building blocks with ABCs or 123s Image: God handing Adam WWW Image: Big Bang
  • 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
  • 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.
  • 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
  • Microformats 101 Workshop

    1. 1. Microformats Workshop 101 <ul><li>Improving SEO </li></ul><ul><li>Maintaining & improving competitive advantage </li></ul><ul><li>Future-proofing our sites </li></ul><ul><li>Long-term cost-savings </li></ul><ul><li>Preparing for the semantic web </li></ul>
    2. 2. In the beginning….
    3. 3. Location, location, location X X X Content, Content, Content <ul><li>Words </li></ul><ul><li>Images </li></ul><ul><li>Sound </li></ul><ul><li>Music </li></ul><ul><li>Flash files </li></ul><ul><li>Videos </li></ul>The Web is about content, content, content and that content is increasingly dynamic and interactive, with users being given more opportunities to control and manipulate that content. What we’ll learn to today is why the rallying cry “Content, content, content” is inseparable from another rallying cry “Standards, standards, standards.”
    4. 4. Sidebar on standards <ul><li>Of railroad tracks and refrigerators…. </li></ul><ul><li>Point: standards and lack of agreement on standards isn’t new or peculiar to IT. </li></ul>
    5. 5. Semantic Web <ul><li>Information overload – for users, for search engines, for apps </li></ul><ul><li>&quot;… 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 </li></ul><ul><li>From the Semantic Web road map: http://www.w3.org/DesignIssues/Semantic.html </li></ul><ul><li>Web 3.0? The name is controversial, probably because people became disillusioned with the way Web 2.0’s meaning was diluted or outright undermined. </li></ul>
    6. 6. What is the semantic web? <ul><li>The focus on standards-based Web design to improve our ability to make sense of all that content. </li></ul><ul><li>Using technologies and markup language to make it easier to find, organize, and repurpose information users find on the Web </li></ul><ul><li>Content, content, content requires standards, standards, standards </li></ul><ul><li>The semantic web is about making the content more meaningful. </li></ul><ul><li>Let’s revisit my old chest nut, the phrase, “A man with a bone.” what meaning(s) are conjured up by the phrase? </li></ul>
    7. 7. Man with a bone <ul><li>Some people might say, “Oh, that’s just semantics.” By that they mean trivial. Bu this isn’t trivial at all when with think of the use cases. Consider: </li></ul><ul><li>WHO or who? </li></ul><ul><li>Manhattan (city) or Manhattan (drink) or Manhattan (Sunseeker model)? </li></ul>
    8. 8. How does it mean? With Semantic Markup It’s also called HTML or, more properly, (X)HTML (X)HTML gives structure and meaning to content Sometimes, developers might use the word “tags” <ul><li><img> image </li></ul><ul><li><p> paragraph </li></ul><ul><li><cite> citation </li></ul><ul><li><h1> heading </li></ul><ul><li><p> paragraph </li></ul><ul><li><em> emphasize </li></ul><ul><li><strong> strong emphasis </li></ul><ul><li><ul> unordered list </li></ul><ul><li><li> list item </li></ul><ul><li><button> button </li></ul><ul><li><address> address </li></ul><ul><li><abbr> abbreviation (WHO/who?) </li></ul><ul><li><dl> definition list </li></ul><ul><li><dt> defines item in dl </li></ul><ul><li><dd>describes item in dl </li></ul><ul><li><blockquote> quotation </li></ul>
    9. 9. <ul><li>an interview transcript </li></ul><ul><li>classified advertisement </li></ul><ul><li>a product review </li></ul><ul><li>a book review </li></ul><ul><li>a product listing </li></ul><ul><li>a product price or price range </li></ul><ul><li>a name, an address, a business location </li></ul><ul><li>classified ad listing </li></ul><ul><li>a video or movie </li></ul><ul><li>contact information: phone #, hours, geo location </li></ul><ul><li>an event listing </li></ul>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:
    10. 10. <ul><li>In order to create more granularity to the structure and meaning of pages, we could rewrite (X)HTML </li></ul>
    11. 11. <ul><li>1998: HTML4 published by W3C </li></ul><ul><li>W3C focus XHTML(2) </li></ul><ul><li>No-one maintains HTML </li></ul><ul><li>2004: WHATWG formed </li></ul><ul><li>Mission: improve and extend HTML </li></ul><ul><li>Work begins on what will become HTML5 </li></ul><ul><li>2007: W3C HTML WG reactivated </li></ul><ul><li>Adopts and continues WHATWG work </li></ul><ul><li>( Web Hypertext Application Technology Working Group ) </li></ul><ul><li>will be years before HTML5 will be widely adopted </li></ul><ul><li>This week in HTML5 lampoons the HTML5 Working Group, http://lastweekinhtml5.blogspot.com/ -- funny and foul-mouthed </li></ul><ul><li>http://lastweekinhtml5.blogspot.com/2009/10/for-honor-of-our-leaders-glorious.html </li></ul>
    12. 12. <ul><li>The microformat movement emerged to extend existing (X)HTML. </li></ul><ul><li>(X)HTML was designed to be extensible. </li></ul><ul><li>Instead of an entire rewrite of (X)HTML, address specific problems (usually business and/or communication needs) and create a MICRO format. </li></ul>
    13. 13. Calendars & Business Cards
    14. 14. Microformats meet business/communication needs: <ul><li>Probably the most widely implemented microformats that you may have encountered is the ability to add an event to your calendar (Apple’s iCal, Google’s Calendar, Outlook’s Calendar) </li></ul><ul><li>vCards in email or hCards on a Web page </li></ul><ul><li>According to Yahoo! SearchMonkey , there are 1,450,000,000 web pages that publish hCard and 36,200,000 pages marked up with hCalendar </li></ul>
    15. 15. <ul><li>Sites using hCalendar </li></ul>Mapquest is implementing microformats such as hCard, hCalendar, and Geolocation http://blog.mapquest.com/2008/09/25/microformat-support-on-mapquest-local/ Yahoo! Upcoming Events Calendar - http:// upcoming.yahoo.com / Eventful - http://eventful.com/ Barcamps - http://barcamp.org/#BarCamps Meetup.com - http://www.meetup.com/ Classic Car Events - http://autopendium.com/events Southern West Virginia's Calendar of Events - http:// www.visitwv.com /events-calendar Wayne State University Events Calendar - http:// events.wayne.edu / PHP.net - http:// www.php.net /conferences/ Used in Firefox plugsin, Drupal, Dreamweaver plugins, Technorati
    16. 16. For sports fans…. <ul><li>World Cup Kickoff http:// www.worldcupkickoff.com / Lifehackers first promoted this tool, a story later picked up by Yahoo! News. Mon May 22, 4:00 PM ET The World Cup, one of the world's most watched sporting events, is almost upon us. If you've ever tried to follow your favorite team through the Cup you know that it can sometimes be difficult to know when they're on. World Cup Kickoff can help. World Cup KickOff is all you will ever need for knowing all the match details for the upcoming World Cup 2006. Whether you use your mobile phone, MS Outlook, Apple iCal or Mozilla Calendar, you can download and keep all the fixtures you are interested in so you will never miss a single game! Next tip? We'll show you how to get up at 2 AM to watch your matches. </li></ul>
    17. 17. hCalendar code example <ul><li><div class = &quot; vevent &quot;>   <h5 class = &quot; summary &quot;> Refresh Hampton Roads Monthly Meeting</h5>   <div>posted on     <abbr class = &quot; dtstamp &quot; title=“20091101T1300Z&quot;>November 1,         2009   </abbr>   </div>   <div>Date:     <abbr class = &quot; dtstart &quot; title=“20001103T180000Z&quot;>November 3, 2009,       18:00 EST</abbr> -     <abbr class = &quot; dtend &quot; title = “20001103T190000Z&quot;>20:00 EST </abbr>   </div>   <div>This meeting is <strong class = &quot;class&quot;>public</strong>.</div>   <div>Filed under:</div>     <ul>       <li class=&quot; category &quot;>Business</li>       <li class=&quot; category &quot;>Technology</li> </li></ul><ul><li>      <li class=&quot; category &quot;>Design</li> </li></ul><ul><li>      <li class=&quot; category &quot;>Usability</li> </li></ul><ul><li>       <li class=&quot; category &quot;>Web Standards</li>    </ul> </div> </li></ul>
    18. 18. <ul><li>Refresh Hampton Roads Monthly Meeting </li></ul><ul><li>posted on November 1, 2009 Date: November 3, 2009 </li></ul><ul><li>18:00 - 20:00 EST This meeting is public. </li></ul><ul><li>Filed under: </li></ul><ul><ul><li>Business </li></ul></ul><ul><ul><li>Technology </li></ul></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Usability </li></ul></ul><ul><ul><li>Web Standards </li></ul></ul>
    19. 19. hCard <ul><li>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. </li></ul><ul><li>Technorati's Contacts Feeds Service </li></ul><ul><li>Operator Plug-in for Firefox </li></ul><ul><li>Tails Export Plug-in for Firefox </li></ul><ul><li>Oomph Microformats Toolkit </li></ul>
    20. 20. Microformats <ul><li>are designed for humans first, machines second </li></ul><ul><li>are a simple, open data format </li></ul><ul><li>extend already existing, agreed upon standards </li></ul><ul><li>development starts with POSH – P lain O ld S emantic H TML </li></ul><ul><li>allow for publishing and sharing information in structured, meaningful ways </li></ul><ul><li>“ 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 , mircoformats are meant: </li></ul>
    21. 21. Practical results: <ul><li>By marking up content with microformats, the content can be described meaningfully: <div class = “ vevent ”> <abbr class = “ dtstamp ”> <abbr class = “ dtstart ”> </li></ul><ul><li>When extracted or retrieved by a machine, that machine can organize information in ways understandable and usable by people – because the markup’s more meaningful </li></ul><ul><li>Markup, new and improved with more meaning! In popular buzz, it is what’s behind the ‘semantc web’ which is sometimes called Web 3.0 </li></ul><ul><li>Microformats transform a web site into a read only API </li></ul>
    22. 22. A read only API? <ul><li>We publish a site once with (X)HTML enhanced by microformats </li></ul><ul><li>Using the hooks provided by microformats, the content can be converted into any other format that might be needed. </li></ul><ul><li>There’s no need to create and maintain separate data files for machine data or exchange (e.g., no need for separately maintained XML feeds, RSS feeds, Atom feeds, JSON, etc. Instead, if a third party wants to data or information, they just use an existing converter or write their own. It’s a standard – a lingua franca – that emerged like the original lingua franca from trade and exchange </li></ul><ul><li>Optimus - http://microformatique.com/optimus/ </li></ul>
    23. 23. The Benefits <ul><li>Enhances user experience </li></ul><ul><li>Improved SEO; better search results; may even be able to use microformat hooks to improve our search </li></ul><ul><li>Encouraging standards and consistency reduces development time </li></ul><ul><li>Simple format – no steep learning curve </li></ul><ul><li>No need for special technologies </li></ul><ul><li>Makes data accessible; enables sharing and re-use of structured data </li></ul><ul><li>Does not duplicate effort (RSS feeds duplicate existing (X)HTML displays) </li></ul>
    24. 24. Who Benefits (and how) <ul><li>Managers : standards streamline dev process; SEO improvements </li></ul><ul><li>Designers : simple to learn; not daunting technology; styling is easy using existing CSS </li></ul><ul><li>Developers : less time deciding what to name thing or how to mark up content and more time writing the styles </li></ul><ul><li>Content authors : makes content more meaningful </li></ul><ul><li>Users : enhances UX; improves search; plugins and third party apps built to make organizing data easier </li></ul>
    25. 25. Get on the bandwagon
    26. 26. Already being used by: <ul><li>Apple’s Webmail </li></ul><ul><li>Digg </li></ul><ul><li>Dreamweaver </li></ul><ul><li>Drupal </li></ul><ul><li>Eventful </li></ul><ul><li>Facebook </li></ul><ul><li>Firefox extensions </li></ul><ul><li>Flickr People; Flickr geo-tagged photos </li></ul><ul><li>Google’s search uses Rich Snippets </li></ul><ul><li>rel-nofollow is a microformat dev’d by google </li></ul><ul><li>Google Maps; Blogger; </li></ul><ul><li>Last.fm </li></ul><ul><li>LinkedIn </li></ul><ul><li>Livejournal and LJfind </li></ul><ul><li>Intel’s Mashmaker </li></ul><ul><li>Movable type blogging software </li></ul><ul><li>Oodle </li></ul><ul><li>Salesforce </li></ul><ul><li>Technorati Events, Contacts, Tagging </li></ul><ul><li>Twitter </li></ul><ul><li>Upcoming.org </li></ul><ul><li>Microsoft Windows Livewriter </li></ul><ul><li>Wordpress </li></ul><ul><li>Yahoo! Local </li></ul><ul><li>Yahoo UK Movies </li></ul>
    27. 27. In search <ul><li>Google’s long adopted microformats in google local, maps. This year, Google started using microformats to display “Rich Snippets” </li></ul><ul><li>Custom Search: </li></ul>
    28. 28. What we’re already doing <ul><li>The link rel=“nofollow” microformat </li></ul>
    29. 29. Widely implemented microformats we could use <ul><li>Another relationship would be link rel = “tag” By adding rel = &quot;tag&quot; to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated &quot;tag&quot; (or keyword/subject) for the current page. </li></ul><ul><li>Rel (relationship) tags make the content more meaningful and, therefore, make it easier to do content-specific searching. Already in use: </li></ul><ul><ul><li>Technorati Tags http:// technorati.com /tag/ </li></ul></ul><ul><ul><li>Operator Plug-in for Firefox https://addons.mozilla.org/en-US/firefox/addon/4106 </li></ul></ul>
    30. 30. <ul><li>rel = “prev” and rel = next” < previous > 2 < next > </li></ul><ul><li>Google rel = “canonical” to deal with the problem of duplicate content </li></ul><ul><li>Rel = “home” – to indicate which is the home page </li></ul><ul><li>Rel = “license” – to link to a copy of the license for a site, its content, etc. </li></ul>
    31. 31. Blogging platforms and social media are using XFN <ul><li>(X)HTML Friends Network - a set of relationship defining links to other people’s web pages </li></ul>Me Identity Muse | Crush | Date | Sweetheart Romantic Child | Parent | Sibling | Spouse | Kin Family Co-resident | Neighbor Geographical Co-worker | Colleague Professional Met Physical Friend | Acquaintance | Contact Relationship
    32. 32. hAtom and blogs <ul><li>The hAtom schema consists of the following: </li></ul><ul><li>hfeed ( hfeed ). optional. </li></ul><ul><ul><li>feed category . optional. keywords or phrases, using rel -tag . </li></ul></ul><ul><ul><li>hentry ( hentry ). </li></ul></ul><ul><ul><ul><li>entry-title . required. text. </li></ul></ul></ul><ul><ul><ul><li>entry-content . optional (see field description). text. [*] </li></ul></ul></ul><ul><ul><ul><li>entry-summary . optional. text. </li></ul></ul></ul><ul><ul><ul><li>updated . required using datetime -design-pattern . [*] </li></ul></ul></ul><ul><ul><ul><li>published . optional using datetime -design-pattern . </li></ul></ul></ul><ul><ul><ul><li>author . required using hCard . [*] </li></ul></ul></ul><ul><ul><ul><li>bookmark (permalink). optional, using rel -bookmark . </li></ul></ul></ul><ul><ul><ul><li>tags. optional. keywords or phrases, using rel -tag . </li></ul></ul></ul>
    33. 33. hListing <ul><li>listing action: sell | rent | trade | meet | announce | offer | wanted | event | service </li></ul><ul><li>Lister: using hCard microformat: (full name || email || url || telephone) </li></ul><ul><li>Dtlisted: date listed </li></ul><ul><li>Dtexpired: date expired </li></ul><ul><li>Price: </li></ul><ul><li>Item Info: optional uses: fn || url || photo || geo || adr | // Uses hCard microformat if it’s for person or business </li></ul><ul><li>Summary: summary of the item listed. </li></ul><ul><li>Description: description of item listed. </li></ul><ul><li>Item tags: keywords or phrases describing the item being offered, using rel -tag microformat. </li></ul><ul><li>Permalink: permanent link to the listing (is not intended to expire). </li></ul>
    34. 34. For Developers: First, you start with content <ul><li>Miz Thang </li></ul><ul><li>Drama for Divas Unlimited </li></ul><ul><li>http://www.mizthang.com </li></ul><ul><li>Atlanta, GA 30301 </li></ul><ul><li>[email_address] </li></ul>What is the basic structure and meaning:
    35. 35. POSHify <ul><li>You work from the content, out, add valid and semantic markup: </li></ul><ul><li><dl> </li></ul><ul><li><dt> Miss Thang </dt> </li></ul><ul><li><dd> </li></ul><ul><li><ul> </li></ul><ul><li>  <li> </li></ul><ul><li><a href=&quot;http://www.mizthang.com&quot;> </li></ul><ul><li>Drama for Divas Unlimited </li></ul><ul><li></a> </li></ul><ul><li></li> </li></ul><ul><li>  <li> Atlanta, GA 30301 </li> </li></ul><ul><li><li> </li></ul><ul><li><a href=&quot;mailto:mizthang@mizthang.com&quot;> </li></ul><ul><li>mizthang @mizthang.com </li></ul><ul><li></a> </li></ul><ul><li></li> </li></ul><ul><li>  </ul> </li></ul><ul><li></dd> </li></ul><ul><li></dl> </li></ul>
    36. 36. vCardize <ul><li><dl class=“ vcard ”> </li></ul><ul><li><dt class=“ fn ”>Miss Thang</dt> </li></ul><ul><li><dd> </li></ul><ul><li><ul> </li></ul><ul><li>  <li> </li></ul><ul><li><a class = “ url ” href=&quot;http://www.mizthang.com&quot;> </li></ul><ul><li>Drama for Divas Unlimited </li></ul><ul><li></a> </li></ul><ul><li></li> </li></ul><ul><li>  <li class=“ adr ”><span class=“ locality ”>Atlanta</span>, <abrr class=“ region ” title=“ Georgia ”>GA</abbr> <span class=“ postal-code ”>30301</span></li> </li></ul><ul><li><li> </li></ul><ul><li><a class=“ email ” href=&quot;mailto:mizthang@mizthang.com&quot;> </li></ul><ul><li>[email_address] </li></ul><ul><li></a> </li></ul><ul><li></li> </li></ul><ul><li>  </ul> </li></ul><ul><li></dd> </li></ul><ul><li></dl> </li></ul>
    37. 37. 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 – P lain O ld S emantic H TML 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
    38. 38. Resources <ul><li>The Microformats Wiki, www.microformats.org </li></ul><ul><li>Microformatique – microformat blog @ http://microformatique.com/ </li></ul><ul><li>@microformats on Twitter -- http://twitter.com/microformats </li></ul><ul><li>@microformateers on Twitter – http://twitter.com/microformateers </li></ul><ul><li>Microformats Role Play – </li></ul><ul><li>http:// visitmix.com /Articles/Microformats-Role-Play </li></ul><ul><li>Getting Semantic with Microformats – http://ajaxian.com/archives/getting-semantic-with-microformats-series-by-emily-lewis </li></ul><ul><li>Update on Rich Snippets -- http://googlewebmastercentral.blogspot.com/2009/10/help-us-make-web-better-update-on-rich.html </li></ul><ul><li>Webpatterns -- naming conventions and patterns for the Web: http://www.webpatterns.org/ </li></ul><ul><li>Semantic Class Names (several articles and resources) -- http:// microformats.org /wiki/semantic-class-names </li></ul><ul><li>Microformat Transformer -- http:// microformatique.com/optimus / </li></ul><ul><li>Web 3.0 -- http://webr3.org/blog/featured/preparing-yourself-for-web-3-0-lod-and-2010/ </li></ul><ul><li>Microformat University -- http://www.virtualhosting.com/blog/2008/microformats-university-100-articles-and-resources/ </li></ul><ul><li>Microformats: Empowering Your Markup for Web 2.0 - John Allsopp </li></ul><ul><li>Microformats Made Simple by Emily Lewis </li></ul>