NewBCamp08: Intro to Web Standards

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    NewBCamp08: Intro to Web Standards - Presentation Transcript

    1. Introduction to Web Standards Adam Darowski BatchBlue Software, LLC NewBCamp 2.23.08
    2. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 2
    3. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 3
    4. What are Web Standards? • World Wide Web Consortium (W3C) standards 4
    5. What are Web Standards? • World Wide Web Consortium (W3C) standards (X)HTML CSS 5
    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. 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. What are Web Standards? • CSS: presentation rules for markup 8
    9. What are Web Standards? • CSS: presentation rules for markup 9
    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. What are Web Standards? • CSS: presentation rules for markup 11
    12. What are Web Standards? • CSS: presentation rules for markup <div id=\"header\"> This is the header content. </div> div#header { float: left; width: 100%; } 12
    13. What are Web Standards? • CSS: presentation rules for markup <p class=\"photocaption\"> This is the photo caption. </div> p.caption { font-weight: bold; font-size: 90%; } 13
    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. 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. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 16
    17. Why Web Standards? • Accessibility Braille Reader Photo by: leorex 17
    18. Why Web Standards? • Accessibility 18
    19. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 19
    20. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 20
    21. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 21
    22. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 22
    23. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 23
    24. Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 24
    25. Why Web Standards? • Bulletproof Web Design - Book by Dan Cederholm - Design for worst case scenarios - Let go of pixel precision 25
    26. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 26
    27. Microformats • What are Microformats? - Standard class names Photo by: kurafire 27
    28. 28
    29. Microformats • hCard for contact information <div id=\"col-content\"> <h1 id=\"h1-darowski\"><span class=\"hidetext\">Adam Darowski</span></h1> <h2>User Experience Designer <span class=\"hidetext\">, BatchBlue Software, LLC</span></h2> <p><a href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 29
    30. Microformats • hCard for contact information <div id=\"col-content\" class=\"vcard\"> <h1 id=\"h1-darowski\"><span class=\"hidetext\">Adam Darowski</span></h1> <h2>User Experience Designer <span class=\"hidetext\">, BatchBlue Software, LLC</span></h2> <p><a href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 30
    31. Microformats • hCard for contact information <div id=\"col-content\" class=\"vcard\"> <h1 id=\"h1-darowski\"><span class=\"hidetext fn\">Adam Darowski</span></h1> <h2>User Experience Designer <span class=\"hidetext\">, BatchBlue Software, LLC</span></h2> <p><a href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 31
    32. Microformats • hCard for contact information <div id=\"col-content\" class=\"vcard\"> <h1 id=\"h1-darowski\"><span class=\"hidetext fn\">Adam Darowski</span></h1> <h2><span class=\"title\">User Experience Designer </span><span class=\"hidetext\">, BatchBlue Software, LLC </span></h2> <p><a href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 32
    33. Microformats • hCard for contact information <div id=\"col-content\" class=\"vcard\"> <h1 id=\"h1-darowski\"><span class=\"hidetext fn\">Adam Darowski</span></h1> <h2><span class=\"title\">User Experience Designer </span><span class=\"hidetext\">, <span class=\"org\">BatchBlue Software, LLC</span></span></h2> <p><a href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 33
    34. Microformats • hCard for contact information <div id=\"col-content\" class=\"vcard\"> <h1 id=\"h1-darowski\"><span class=\"hidetext fn\">Adam Darowski</span></h1> <h2><span class=\"title\">User Experience Designer </span><span class=\"hidetext\">, <span class=\"org\">BatchBlue Software, LLC</span></span></h2> <p><a class=\"email\" href=\"mailto:adarowski@batchblue.com\"> adarowski@batchblue.com</a></p> ... 34
    35. 35
    36. 36
    37. Microformats 37
    38. 38
    39. Microformats • hCalendar for event information <dl class=\"vevent\"> <dt class=\"summary\">Web 2.0 Conference</dt> <dd><strong>Date:</strong> <abbr class=\"dtstart\" title=\"2008-09-01\"> 09/01/2008</abbr></dd> <dd><strong>Location:</strong> <span class=\"location\">New York, NY</span></dd> <dd><strong>Website:</strong> <a class=\"url\" href=\"http://www.web2expo.com/\"> www.web2expo.com</a></dd> <dd class=\"description\">Web 2.0 Expo, co-produced by ... 39
    40. 40
    41. 41
    42. 42
    43. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 43
    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. URL as UI • Search on Amazon - You get this: http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/ 45
    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. URL as UI • Same album on last.fm: http://www.last.fm/music/Mogwai/Rock+Action 47
    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. 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. Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 50
    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. Resources • Websites/Blogs - A List Apart - Vitamin - Digital Web Magazine - SimpleBits, Dan Cederholm - 456 Berea Street, Roger Johannson - (many, many others) 52
    53. Resources • Firefox Extensions - Web Developer Toolbar 53
    54. Resources • Firefox Extensions - Operator 54
    55. Resources • Firefox Extensions - Firebug 55
    56. 56
    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

    + Adam DarowskiAdam Darowski, 2 years ago

    custom

    2658 views, 3 favs, 3 embeds more stats

    NewBCamp08 was a first-time unconference for web ne more

    More Info

    CC Attribution License

    Go to text version
    • Total Views 2658
      • 2553 on SlideShare
      • 105 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 21
    Most viewed embeds
    • 68 views on http://www.darowski.com
    • 36 views on http://www.batchblue.com
    • 1 views on http://blog.batchblue.com

    more

    All embeds
    • 68 views on http://www.darowski.com
    • 36 views on http://www.batchblue.com
    • 1 views on http://blog.batchblue.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories