NewBCamp08: Intro to Web Standards

Introduction to Web Standards Adam Darowski BatchBlue Software, LLC NewBCamp 2.23.08

Topics • What are Web Standards? • Why Web Standards? • Microformats • URL as UI • Resources 2

What are Web Standards? • World Wide Web Consortium (W3C) standards 4

What are Web Standards? • World Wide Web Consortium (W3C) standards (X)HTML CSS 5

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

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

What are Web Standards? • CSS: presentation rules for markup 8

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

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

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

What are Web Standards? • Where it all went wrong: - First, there was the <font> tag (for text) - Then came the <table> (for layout) 14

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

Why Web Standards? • Accessibility Braille Reader Photo by: leorex 17

Why Web Standards? • Accessibility 18

Why Web Standards? • Accessibility • Maintainability • Readability • Forward compatibility • Portability • Better Google crawling • Less bandwidth usage 19

Why Web Standards? • Bulletproof Web Design - Book by Dan Cederholm - Design for worst case scenarios - Let go of pixel precision 25

Microformats • What are Microformats? - Standard class names Photo by: kurafire 27

28

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

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

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

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

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

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

36

Microformats 37

38

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

41

42

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

URL as UI • Search on Amazon - You get this: http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/ 45

URL as UI • Search on Barnes & Noble - You get this: http://music.barnesandnoble.com/search/product.asp? z=y&EAN=744861049029&itm=1 46

URL as UI • Same album on last.fm: http://www.last.fm/music/Mogwai/Rock+Action 47

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

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

Resources • Books - Web Standards Solutions, Dan Cederholm - Bulletproof Web Design, Dan Cederholm - HTML Mastery, Paul Haine - CSS Mastery, Andy Budd - (many, many others) 51

Resources • Websites/Blogs - A List Apart - Vitamin - Digital Web Magazine - SimpleBits, Dan Cederholm - 456 Berea Street, Roger Johannson - (many, many others) 52

Resources • Firefox Extensions - Web Developer Toolbar 53

Resources • Firefox Extensions - Operator 54

Resources • Firefox Extensions - Firebug 55

56

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

NewBCamp08: Intro to Web Standards

0 comments

Notes on slide 1

3 Favorites