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?
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
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