NewBCamp08: Intro to Web Standards

Introduction toWeb Standards

Adam DarowskiBatchBlue Software, LLC

NewBCamp 2.23.08

Topics

• What are Web Standards?

• Why Web Standards?

• Microformats

• URL as UI

• Resources

2

Topics



• Microformats

• URL as UI

• Resources

3

What are Web Standards?

• World Wide Web Consortium (W3C) standards

4


• World Wide Web Consortium (W3C) standards

5

CSS(X)HTML


• 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


• 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


• CSS: presentation rules for markup

8



9



h1 {

font-family: Arial, sans-serif; font-size: 120%; line-height: 180%; font-weight: bold; color: blue;}

10



11



div#header {

float: left; width: 100%;}

12

<div id="header">

This is the header content.

</div>



p.caption {

font-weight: bold; font-size: 90%;}

13

<p class="photocaption">

This is the photo caption.

</div>


• Where it all went wrong:

- First, there was the <font> tag (for text)

- Then came the <table> (for layout)

14


• 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

Topics



• Microformats

• URL as UI

• Resources

16

Why Web Standards?

• Accessibility

17

Braille ReaderPhoto by: leorex

http://www.flickr.com/photos/leorex/3011210/

http://www.flickr.com/photos/leorex/3011210/

Why Web Standards?

• Accessibility

18

Why Web Standards?

• Accessibility

• Maintainability

• Readability

• Forward compatibility

• Portability

• Better Google crawling

• Less bandwidth usage

19

Why Web Standards?

• Accessibility

• Maintainability

• Readability


• Portability



20

Why Web Standards?

• Accessibility

• Maintainability

• Readability


• Portability



21

Why Web Standards?

• Accessibility

• Maintainability

• Readability


• Portability



22

Why Web Standards?

• Accessibility

• Maintainability

• Readability


• Portability



23

Why Web Standards?

• Accessibility

• Maintainability

• Readability


• Portability



24

Why Web Standards?

• Bulletproof Web Design

- Book by Dan Cederholm

- Design for worst case scenarios

- Let go of pixel precision

25

Topics



• Microformats

• URL as UI

• Resources

26

Microformats

• What are Microformats?

- Standard class names

27

Photo by: kurafire

http://flickr.com/photos/kurafire/189995977/

http://flickr.com/photos/kurafire/189995977/

28

Microformats

• hCard for contact information

29

<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:[email protected]"> [email protected]</a></p>

...

Microformats


30

<div id="col-content" class="vcard">

<h1 id="h1-darowski"><span class="hidetext">Adam Darowski</span></h1>



...

Microformats


31


<h1 id="h1-darowski"><span class="hidetext fn">Adam Darowski</span></h1>



...

Microformats


32



<h2><span class="title">User Experience Designer </span><span class="hidetext">, BatchBlue Software, LLC </span></h2>


...

Microformats


33



<h2><span class="title">User Experience Designer </span><span class="hidetext">, <span class="org">BatchBlue Software, LLC</span></span></h2>


...

Microformats


34



<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:[email protected]"> [email protected]</a></p>

...

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

http://www.web2expo.com

http://www.web2expo.com

40

41

42

Topics



• Microformats

• URL as UI

• Resources

43

URL as UI

• Search on Amazon

- You get this:

44

http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1203311335&sr=8-1

URL as UI

• Search on Amazon

- You get this:

45

http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/

URL as UI

• Search on Barnes & Noble

- You get this:

46

http://music.barnesandnoble.com/search/product.asp?z=y&EAN=744861049029&itm=1

URL as UI

• Same album on last.fm:

47

http://www.last.fm/music/Mogwai/Rock+Action

URL as UI

• More last.fm URL examples:

48

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

URL as UI

• Flickr

49

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”

Topics



• Microformats

• URL as UI

• Resources

50

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


- Operator

54

Resources


- Firebug

55

56

Thank you!

57

Adam DarowskiUser Experience DesignerBatchBlue Software, LLC

email: [email protected]: [email protected]: @adarowski

business blog: blog.batchblue.compersonal blog: darowski.com

mailto:[email protected]




http://twitter.com/adarowski

http://twitter.com/adarowski

http://blog.batchblue.com

http://blog.batchblue.com

http://darowski.com/

http://darowski.com/

NewBCamp08: Intro to Web Standards

Business