Standardizing the Web: A Look into the Why of Web Standards

Standardizing the Web A look into the “Why” of Web Standards ITS Web Services Cameron Bates Archie Cayanan Tim Wright

What are Web Standards?

History vs. World Wide Web Consortium (W3C) The Web Standards Project

“HTML, XML, CSS and the DOM are more than just a set of interesting technologies. They are a way of creating Web pages that will facilitate the twin goals of sophisticated and appropriate presentation and widespread accessibility. “ -WaSP mission statement of 1998

What we’ll cover What are web standards? Apply Web Standards • DOCTYPE • Semantics • Validation • Presentation layer • Behavior layer • Recycling content

Why use Web standards • Accessibility • Stability • Performance Tools • Opera Web Standards Curriculum Resources • WaSP • W3C Q&A

Applying Web Standards

!DOCTYPE <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional// EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> <title>untitled</title> </head> <body> <p>Hello World!</p> </body> </html>

(X)HTML • XHTML 1.0 • HTML 4.01 • Transitional • Transitional • Strict • Strict

Use the right tool

Semantics

Semantics • <h1>, <h2>, <h3>

Semantics • <h1>, <h2>, <h3> • <ul> and <ol>

Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite>

Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite> • <table>

Validate your code

CSS: presentation layer • Old (incorrect) model: HTML to describe content and presentation • Web standards: (X)HTML to describe content CSS to describe presentation

Javascript: Behavior Layer • Progressive enhancement • Structure -> Presentation -> Behavior • HTML -> CSS -> Javascript

Recycle your content • Web • Print • Mobile

Stability

Why use Web Standards

Accessibility

Accessibility [to people] Browser wars Section 508 Bandwidth restrictions

Accessibility [to machines]

Stability

Stability [graceful degradation]

Performance

The Goal

How to infuriate Tim <table width=”300” height=”100” bgcolor=”black” border=”2” cellpadding=”3” border-color=”red”> <tr> <td valign=”middle”> <center> <font color=”white” size=”2” family=”arial, sans-serif”> <b>Hello World</b> </font> </center> </td> </tr> </table>

The Goal

Layered approach

Layered approach XHTML: <p class=”box”>Hello World!</p>

Layered approach XHTML: <p class=”box”>Hello World!</p> CSS: .box { font: 22px/100px Helvetica, Arial, sans-serif; font-weight: 700; text-align: center; width: 300px; color: #fff; background: #000; border: 2px solid #f00; }

Behavioral performance

Tools

Validating your mark-up http://validator.w3.org/

Validating your CSS http://jigsaw.w3.org/css-validator/ Valid Cascade!

Testing Section 508 http://www.cynthiasays.com/

Resources

Web Standards Curriculum http://www.opera.com/company/education/curriculum/

Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Internet History HTML Accessibility CSS JavaScript

Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Web Design Concepts: - IA - Color theory & schemes - Wireframing - Typography

WaSP Interact http://interact.webstandards.org

WaSP Interact http://interact.webstandards.org 6 Tracks of Development

WaSP Interact http://interact.webstandards.org Foundations Front-end Development Design User Science Server Side Development Professional Practice

Questions?

Standardizing the Web: A Look into the Why of Web Standards

0 comments

Notes on slide 1

1 Favorite