NewBCamp08: Intro to Web Standards

4,110 views
4,033 views

Published on

NewBCamp08 was a first-time unconference for web newbies. There were "tracks" for web development, social media, etc. For more info: newbcamp.com

This presentation addresses: What are web standards? Why use them? Why haven't we been using them all along? What are Microformats? How can you use the URL as a UI?

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,110
On SlideShare
0
From Embeds
0
Number of Embeds
913
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

NewBCamp08: Intro to Web Standards

  1. 1. Introduction to Web Standards Adam Darowski BatchBlue Software, LLC NewBCamp 2.23.08
  2. 2. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 2
  3. 3. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 3
  4. 4. What are Web Standards? • World Wide Web Consortium (W3C) standards 4
  5. 5. What are Web Standards? • World Wide Web Consortium (W3C) standards (X)HTML CSS 5
  6. 6. What are Web Standards? • HTML: markup language BatchBook by BatchBlue Software BatchBook is an easy-to-use contact management system designed with small businesses in mind. And it can be customized depending on your unique business needs to help you grow and manage your business. 6
  7. 7. What are Web Standards? • HTML: markup language <h1>BatchBook by BatchBlue Software</h1> <p>BatchBook is an easy-to-use <strong>contact management system</strong> designed with small businesses in mind. And it can be customized depending on your unique business needs to help you grow and manage your business.</p> 7
  8. 8. What are Web Standards? • CSS: presentation rules for markup 8
  9. 9. What are Web Standards? • CSS: presentation rules for markup 9
  10. 10. What are Web Standards? • CSS: presentation rules for markup h1 { font-family: Arial, sans-serif; font-size: 120%; line-height: 180%; font-weight: bold; color: blue; } 10
  11. 11. What are Web Standards? • CSS: presentation rules for markup 11
  12. 12. What are Web Standards? • CSS: presentation rules for markup <div id=quot;headerquot;> This is the header content. </div> div#header { float: left; width: 100%; } 12
  13. 13. What are Web Standards? • CSS: presentation rules for markup <p class=quot;photocaptionquot;> This is the photo caption. </div> p.caption { font-weight: bold; font-size: 90%; } 13
  14. 14. What are Web Standards? • Where it all went wrong: - First, there was the <font> tag (for text) - Then came the <table> (for layout) 14
  15. 15. What are Web Standards? • Where are we now? - Standards compliant browsers are the norm (Firefox, Safari, Opera, etc.) - Then there’s Internet Explorer... (still requires a series of hacks) 15
  16. 16. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 16
  17. 17. Why Web Standards? • Accessibility Braille Reader Photo by: leorex 17
  18. 18. Why Web Standards? • Accessibility 18
  19. 19. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 19
  20. 20. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 20
  21. 21. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 21
  22. 22. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 22
  23. 23. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 23
  24. 24. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 24
  25. 25. Why Web Standards? • Bulletproof Web Design - Book by Dan Cederholm - Design for worst case scenarios - Let go of pixel precision 25
  26. 26. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 26
  27. 27. Microformats • What are Microformats? - Standard class names Photo by: kurafire 27
  28. 28. 28
  29. 29. Microformats • hCard for contact information <div id=quot;col-contentquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetextquot;>Adam Darowski</span></h1> <h2>User Experience Designer <span class=quot;hidetextquot;>, BatchBlue Software, LLC</span></h2> <p><a href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 29
  30. 30. Microformats • hCard for contact information <div id=quot;col-contentquot; class=quot;vcardquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetextquot;>Adam Darowski</span></h1> <h2>User Experience Designer <span class=quot;hidetextquot;>, BatchBlue Software, LLC</span></h2> <p><a href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 30
  31. 31. Microformats • hCard for contact information <div id=quot;col-contentquot; class=quot;vcardquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetext fnquot;>Adam Darowski</span></h1> <h2>User Experience Designer <span class=quot;hidetextquot;>, BatchBlue Software, LLC</span></h2> <p><a href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 31
  32. 32. Microformats • hCard for contact information <div id=quot;col-contentquot; class=quot;vcardquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetext fnquot;>Adam Darowski</span></h1> <h2><span class=quot;titlequot;>User Experience Designer </span><span class=quot;hidetextquot;>, BatchBlue Software, LLC </span></h2> <p><a href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 32
  33. 33. Microformats • hCard for contact information <div id=quot;col-contentquot; class=quot;vcardquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetext fnquot;>Adam Darowski</span></h1> <h2><span class=quot;titlequot;>User Experience Designer </span><span class=quot;hidetextquot;>, <span class=quot;orgquot;>BatchBlue Software, LLC</span></span></h2> <p><a href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 33
  34. 34. Microformats • hCard for contact information <div id=quot;col-contentquot; class=quot;vcardquot;> <h1 id=quot;h1-darowskiquot;><span class=quot;hidetext fnquot;>Adam Darowski</span></h1> <h2><span class=quot;titlequot;>User Experience Designer </span><span class=quot;hidetextquot;>, <span class=quot;orgquot;>BatchBlue Software, LLC</span></span></h2> <p><a class=quot;emailquot; href=quot;mailto:adarowski@batchblue.comquot;> adarowski@batchblue.com</a></p> ... 34
  35. 35. 35
  36. 36. 36
  37. 37. Microformats 37
  38. 38. 38
  39. 39. Microformats • hCalendar for event information <dl class=quot;veventquot;> <dt class=quot;summaryquot;>Web 2.0 Conference</dt> <dd><strong>Date:</strong> <abbr class=quot;dtstartquot; title=quot;2008-09-01quot;> 09/01/2008</abbr></dd> <dd><strong>Location:</strong> <span class=quot;locationquot;>New York, NY</span></dd> <dd><strong>Website:</strong> <a class=quot;urlquot; href=quot;http://www.web2expo.com/quot;> www.web2expo.com</a></dd> <dd class=quot;descriptionquot;>Web 2.0 Expo, co-produced by ... 39
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 43
  44. 44. URL as UI • Search on Amazon - You get this: http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/ ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1203311335&sr=8-1 44
  45. 45. URL as UI • Search on Amazon - You get this: http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/ 45
  46. 46. URL as UI • Search on Barnes & Noble - You get this: http://music.barnesandnoble.com/search/product.asp? z=y&EAN=744861049029&itm=1 46
  47. 47. URL as UI • Same album on last.fm: http://www.last.fm/music/Mogwai/Rock+Action 47
  48. 48. URL as UI • More last.fm URL examples: http://www.last.fm/music/Mogwai/ = artist http://www.last.fm/music/Mogwai/_/Sine+Wave = single track http://www.last.fm/music/Mogwai/+wiki = wiki bio http://www.last.fm/music/Mogwai/+pictures = photos http://www.last.fm/label/Matador/ = label http://www.last.fm/user/adarowski/ = user http://www.last.fm/tag/post-rock = tag 48
  49. 49. URL as UI • Flickr http://www.flickr.com/photos/darowskidotcom/ = my photos http://www.flickr.com/photos/darowskidotcom/tags/ = my tags http://www.flickr.com/photos/darowskidotcom/tags/redsox/ = my photos tagged “red sox” 49
  50. 50. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 50
  51. 51. Resources • Books - Web Standards Solutions, Dan Cederholm - Bulletproof Web Design, Dan Cederholm - HTML Mastery, Paul Haine - CSS Mastery, Andy Budd - (many, many others) 51
  52. 52. Resources • Websites/Blogs - A List Apart - Vitamin - Digital Web Magazine - SimpleBits, Dan Cederholm - 456 Berea Street, Roger Johannson - (many, many others) 52
  53. 53. Resources • Firefox Extensions - Web Developer Toolbar 53
  54. 54. Resources • Firefox Extensions - Operator 54
  55. 55. Resources • Firefox Extensions - Firebug 55
  56. 56. 56
  57. 57. Thank you! Adam Darowski User Experience Designer BatchBlue Software, LLC email: adarowski@batchblue.com gtalk: adarowski@gmail.com twitter: @adarowski business blog: blog.batchblue.com personal blog: darowski.com 57

×