BarCamp Sd Microformats

3,266 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,266
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

BarCamp Sd Microformats

  1. 1. Microformats: Building A Better Web Building A Better Web by Joshua Brewer BarCamp San Diego June 2, 2007
  2. 2. What are Microformats? - New Transformer characters? - Time consuming added markup? - The latest Web 2.0 buzz?
  3. 3. Microformats are... “designed for humans first and machines second. Microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).” - http://microformats.org/about/
  4. 4. OR...
  5. 5. “ A set of simple open data format standards that many are actively developing and implementing for more/better structured blogging and web microcontent publishing in general.” - John Allsop
  6. 6. OR...
  7. 7. “A right-now solution for identifying and semantically describing everyday information so it can be better collected, parsed, and otherwise aggregated for other uses.”
  8. 8. Oh, no! Oh, no! More More Standardista Standardista Propaganda! More Standardista Propaganda! Propaganda!
  9. 9. Just wait... the kool-aid is on its way.
  10. 10. Pish-POSH, who needs standars, anyway? - We all do. Whether or not we want to admit it. - Standards are good. - Standards make way for lowered cost, widespread adoption and common understanding. - “Professionals have an ethical and moral obligation to produce quality work.” - Andy Rutledge
  11. 11. What exactly are Web Standards? -Pages have a valid doctype declaration. -Semantically correct markup that validates with W3C specs. -Separation of content from presentation (using CSS). -Accessible content and functionality (under a host of contexts and technologies). -This is being refered to as “POSH” - plain old semantic HTML - and its good for what ails you.
  12. 12. First Things First - HTML is not a presentational markup language. Semantic HTML is the use of the most appropriate HTML elements and attributes for the content being marked up. - Microformats are built upon semantic HTML. - Without a strong understanding of semantic HTML, microformats won’t make much sense.
  13. 13. Enough preaching... get on with it!
  14. 14. The microformats approach includes a set of underlying principles, of which two of the most important are: “solve a specific problem” and “reuse building blocks from widely adopted standards”
  15. 15. -relationships -licenses -people & organizations -events -tags (folksonomies) -reviews -resumes -publishing (time-based content)
  16. 16. By providing a standardized way of marking up content that developers are already marking up in many different ways, microformats help us code more efficiently, data becomes clearer, easier to use and more consistently presented. Plus, our code becomes easier to maintain.
  17. 17. Example time: Contact Information Contact Information Dan Cederholm’s Simple Quiz helped shed light on this a couple years ago. h ttp://www.simplebits.com/notebook/2004/08/04/sq.html ABC Widgets, Inc. 100 - 1234 West Main Street Anytown, State Zip Ph: 555-555-1234 Fax: 555-555-1234
  18. 18. What would you do? 1.<address>   ABC Widgets, Inc.<br />   100 - 1234 West Main Street<br />   Anytown, State<br />   Zip<br />   Ph: 555-555-1234<br />   Fax: 555-555-1234<br /> </address>
  19. 19. What would you do? 1.<div class=quot;addressquot;>   <p>ABC Widgets, Inc.</p>   <p>100 - 1234 West Main Street</p>   <p>Anytown, State</p>   <p>Zip</p>   <p>Ph: 555-555-1234</p>   <p>Fax: 555-555-1234</p> </div>
  20. 20. What would you do? 1.<dl class=quot;addressquot;>   <dt>ABC Widgets, Inc.</dt>   <dd>100 - 1234 West Main Street</dd>   <dd>Anytown, State</dd>   <dd>Zip<dd>   <dd>Ph: 555-555-1234</dd>   <dd>Fax: 555-555-1234</dd> </dl>
  21. 21. What would you do? 1.None of the above, or...
  22. 22. #5 Microformated Contact Information Microformated Contact Information Joshua Brewer Brewer Design Group joshua@brewerdesigngroup.com 832 Desty St San Diego, CA 92154 (619) 871-2739
  23. 23. #5 Microformated Contact Information Microformated Contact Information <div class=quot;vcardquot;> <span class=quot;fnquot;>Joshua Brewer</span> <div class=quot;orgquot;>Brewer Design Group</div> <a class=quot;emailquot; href=quot;mailto:joshua@brewerdesigngroup.comquot;> joshua@brewerdesigngroup.com </a> <div class=quot;adrquot;><div class=quot;street-addressquot;>832 Desty Street</div> <span class=quot;localityquot;>San Diego</span> , <abbr class=quot;regionquot; title=quot;Californiaquot;>CA</abbr> <span class=quot;postal-codequot;>92154</span> </div> <div class=quot;telquot;><span class=quot;typequot;>Cell:<span> <span class=quot;valuequot;>(619) 871-2739</span> </div> </div>
  24. 24. #5 Microformated Contact Information Microformated Contact Information <div class=quot;vcardquot;> <span class=quot;fnquot;>Joshua Brewer</span> <div class=quot;orgquot;>Brewer Design Group</div> <a class=quot;emailquot; href=quot;mailto:joshua@brewerdesigngroup.comquot;> joshua@brewerdesigngroup.com </a> <div class=quot;adrquot;> <div class=quot;street-addressquot;>832 Desty Street</div> <span class=quot;localityquot;>San Diego</span> , <abbr class=quot;regionquot; title=quot;Californiaquot;>CA</abbr> <span class=quot;postal-codequot;>92154</span> </div> <div class=quot;telquot;><span class=quot;typequot;>Cell:<span> <span class=quot;valuequot;>(619) 871-2739</span> </div> </div>
  25. 25. But it seems like more markup & more work?
  26. 26. REALLY?
  27. 27. I don’t think so... - Time saved not trying to figure out how to mark something up. - Tools available to help make it even easier. - Increase your searchability - Increase your “Mash-up-ability” - quot;Accidental APIquot; - Brian Oberkirch - Did I mention, it works now?
  28. 28. hCard hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard properties and values in semantic XHTML. vCard is widely used in desktop address book– style applications such as Microsoft Outlook and Mac OS X’s Address Book.
  29. 29. My vCard...
  30. 30. My hCard...
  31. 31. Now I have my contact info ready and available anywhere at anytime to just about anyone.
  32. 32. Two Firefox extensions - Tails and Operator - make it very simple to add contacts, events and even locations. Both scan the page for microformated content and allow you to interact with it.
  33. 33. The web is one of the greatest tools for communication.
  34. 34. Use what you got! - Remember that we have a straight-forward markup language (HTML) that is not a proprietary data format. - Kids in elementary school are learning how to write HTML. - Few people publish with RDF, some with XML, but it ends up getting displayed on the web with... you guessed it... HTML (or XHTML - but that is another presentation altogether!)
  35. 35. -relationships -licenses -people & organizations -events -tags (folksonomies) -reviews -resumes -publishing (time-based content)
  36. 36. - relationships - XFN - licenses - rel-license - people & organizations - hCard - events - hCalendar - tags (folksonomies) - rel-tag - reviews - hReview - resumes - hResume - publishing (time-based content) - hAtom
  37. 37. Anyone browse the web on their phone? - Microformated content will be easier to display with or without styling and increase page download speed. - Mobile web is going to be huge. Do you want to be ready when the storm hits? - Check this out:
  38. 38. Here’s what you can get out of using Microformats
  39. 39. By providing a standardized way of marking up content that developers are already marking up in many different ways, microformats help us code more efficiently and it becomes easier to maintain code.
  40. 40. By making commonly published data available in standard formats, microformats help enable distributed software services such as aggregation and indexing, which would otherwise be extremely difficult or unfeasible to implement.
  41. 41. By using existing schemas where possible, microformats enable seamless interoperability between web-based content and desktop applications, such as Outlook and iCal for calendaring information, or Evolution, Address Book, and many others for vCard.
  42. 42. For example, in March 2006, during the keynote at Microsoft MIX06, none other than Bill Gates said, “We need microformats and to get people to agree on them. It is going to bootstrap exchanging data on the Web . . . we need them for things like contact cards, events, directions.”
  43. 43. Why should you bother learning to use it?
  44. 44. every day... Drew Mclellan: Kit Microformats Toolkit for PHP5 http://allinthehead.com/hkit Dreamweaver Microformats toolbar
  45. 45. every day... Assaf Arkin developed this Microformat Parser for Ruby ( http://blog.labnotes.org/2005/11/20/microformat-parser-fo ) Brian Suda developed XV2 - http://suda.co.uk/projects/X2V - used by Technorati to run their feed services There are plugins for Wordpress, Textpattern, etc. Other CMS are very customizable and can spit out microformated content with little extra effort.
  46. 46. Not to mention... - It is phenomenal what you can do with CSS to style it all. - Take a look at Last.fm, Eventful.com, etc. - We need a Microformats CSS Zen Garden (its in the works...)
  47. 47. Implemetation - after (or while) POSHifying your site... - include appropriate microformats - setup pinging http://pingerati.net/ to distribute your updates - Technorati Contact hCard markup - hCard to vCard converter - Link to convert hCards to vCards - Seamless import into a typical Address Book
  48. 48. Great examples - Eventful.com - Last.fm - Upcoming.org - Flickr - Twitter
  49. 49. Thank You

×