NewBCamp08: Intro to Web Standards

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

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

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

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

Slide 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

Slide 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

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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

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

Slide 18: Why Web Standards? • Accessibility 18

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

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

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

Slide 28: 28

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 35: 35

Slide 36: 36

Slide 37: Microformats 37

Slide 38: 38

Slide 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

Slide 40: 40

Slide 41: 41

Slide 42: 42

Slide 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

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

Slide 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

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

Slide 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

Slide 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

Slide 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

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

Slide 53: Resources • Firefox Extensions - Web Developer Toolbar 53

Slide 54: Resources • Firefox Extensions - Operator 54

Slide 55: Resources • Firefox Extensions - Firebug 55

Slide 56: 56

Slide 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

Slideshare.net (beta)