Web Standards

1
Web Standards

• What are they?
• Why are they important?
• How can we be sure were following them?

2
Goal of this presentation

• Background of web standards movement why web
  standards are important
• Discuss the web standards understand what they
  are about
• Talk about how to implement web standards

3
Background on web standards

• Remember the browser wars?
• Ever have a page display very differently in 2
  different browsers?
• Seen pages that take forever to download?
• Have to code separate versions of pages for
  different browsers?
• Have pages that are a pain to update?

4
These are symptoms

• The problem
• The 90s browser wars browsers implement new
  features to gain market share
• Use of HTML (meant to mark up content) for
  presentation
• Nested tables
• Spacer gifs
• Presentation coding mixed in with content

5
Example 1 Nested tables

• 
  Medicine and Health
  
• l"Physics and Astronomy

6
Example 2 Shim gifs

• m.gif" width"60" height"1" border"0"
• im.gif" width"110" height"1" border"0"
• m.gif" width"20" height"1" border"0"
• m.gif" width"67" height"1" border"0"
• m.gif" width"99" height"1" border"0"
• m.gif" width"45" height"1" border"0"
• m.gif" width"109" height"1" border"0"
• m.gif" width"15" height"1" border"0"
• .gif" width"1" height"1" border"0"

7
Example 3 presentational stew wheres the
content?

• name"electronic" size"2"color"006600"color"FF0000"e_arrow.gif" width"19" height"10"trongsize"2"Federal Tax Forms amp
  Publicationssize"1"
  
  
  size"-1"Online Forms
  size"-1"
  

8
Example 3 cont.

• Separating presentation from content, this could
  be
• Federal Tax Forms
• • Online Forms
  • Paper Forms

9
What are Web standards?

• In the late 90s, Web designers got tired,
  started pressing browser designers to follow
  standards

10
Finally compliant browsers

• Beginning in 1999, a generation of standards
  compliant browsers began appearing
• Mac IE5.1
• Windows IE5.5
• Mozilla NS6.2
• Mac Firebird
• Opera5.11

11
The standards

• W3C (World Wide Web Consortium) recommendations
• HTML and XHTML -- structure
• CSS -- presentation
• DOM -- behavior
• European Computer Manufacturer Association
• ECMAScript (standard version of javascript) --
  behavior

12
XML the future of the Web

• The web is moving to XML
• Will make a far richer, more interactive
  experience
• Means separating content and presentation
• Means stricter coding
• XHTML is the first step

13
XHTML

• Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transi
  tional.dtd"
• .org/1999/xhtml"
• href"http//www.nd.edu/.css" /
• content"text/html charsetiso-8859-1" /

14
CSS

• CSS is the way to separate content and
  presentation
• Cleaner, leaner code
• Easier to write and maintain
• Write once, publish many
• PDAs and cell phones
• Text browsers and screen readers
• Print

15
DOM

• W3Cs Document Object Model
• Can add, change, delete any element in a web
  document
• Create behaviors not dependent on server (work
  even if not connected to Internet)
• Sorting tables
• Change font sizes or color schemes
• Hide/show menu lists

16
ECMAScript

• European Computer Manufacturers Association
  version of javascript
• Know very little about this except if you use
  javascript, this is the kind you want to use

17
One more thing accessibility

• Three aspects
• Can I access the page if Im using Opera, Lynx, a
  PDA?
• Can I access the page if I have a disability?
• Screen reader accessible (alt tags for images)?
• Allow user to enlarge fonts?
• Can I navigate without using a mouse?

18
Accessibility cont.

• Finally, to access the page, I have to find it.
• Metadata description, subject keywords, etc.
  Can help search engines
• Text vs graphics Google is blind, cant index
  pictures of words

19
Advantages of web standards

• Pages easier to create and update
• Write once, publish many
• Avoid obsolescence, prepare for the future web

20
How to implement standards

• Incorporate standards into templates
• Validate your pages
• W3C Markup Validation Service
• W3C CSS Validation Service