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?

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=quot;headerquot;>
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=quot;photocaptionquot;>
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=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. 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. 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. 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. 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. 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

36. 36

37. Microformats
37

38. 38

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

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