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=quot;headerquot;> This is the header content. </div> div#header { float: left; width: 100%; } 12

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

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

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

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

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

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

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

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

Microformats 37

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

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

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

http://batchblue.com	634
http://www.batchblue.com	138
http://www.darowski.com	70
http://marcomm	45
http://blog.batchblue.com	4
http://67.23.3.25	1

NewBCamp08: Intro to Web Standards

by Adam Darowski on Feb 23, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 892

Statistics

NewBCamp08: Intro to Web Standards — Presentation Transcript