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

2,242 views
2,159 views

Published on

This is presentation given at USC Web Council in April of 2009. Given by: Archie Cayanan, Cameron Bates, and Tim Wright of (csskarma.com)

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,242
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Standardizing the Web A look into the “Why” of Web Standards ITS Web Services Cameron Bates Archie Cayanan Tim Wright
  2. 2. What are Web Standards?
  3. 3. History vs. World Wide Web Consortium (W3C) The Web Standards Project
  4. 4. “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
  5. 5. What we’ll cover What are web standards? Apply Web Standards • DOCTYPE • Semantics • Validation • Presentation layer • Behavior layer • Recycling content
  6. 6. Why use Web standards • Accessibility • Stability • Performance Tools • Opera Web Standards Curriculum Resources • WaSP • W3C Q&A
  7. 7. Applying Web Standards
  8. 8. !DOCTYPE <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional// ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;/> <title>untitled</title> </head> <body> <p>Hello World!</p> </body> </html>
  9. 9. (X)HTML • XHTML 1.0 • HTML 4.01 • Transitional • Transitional • Strict • Strict
  10. 10. Use the right tool
  11. 11. Semantics
  12. 12. Semantics • <h1>, <h2>, <h3>
  13. 13. Semantics • <h1>, <h2>, <h3> • <ul> and <ol>
  14. 14. Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite>
  15. 15. Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite> • <table>
  16. 16. Validate your code
  17. 17. CSS: presentation layer • Old (incorrect) model: HTML to describe content and presentation • Web standards: (X)HTML to describe content CSS to describe presentation
  18. 18. Javascript: Behavior Layer • Progressive enhancement • Structure -> Presentation -> Behavior • HTML -> CSS -> Javascript
  19. 19. Recycle your content • Web • Print • Mobile
  20. 20. Stability
  21. 21. Why use Web Standards
  22. 22. Accessibility
  23. 23. Accessibility [to people] Browser wars Section 508 Bandwidth restrictions
  24. 24. Accessibility [to machines]
  25. 25. Stability
  26. 26. Stability [graceful degradation]
  27. 27. Performance
  28. 28. Performance
  29. 29. The Goal
  30. 30. 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>
  31. 31. The Goal
  32. 32. Layered approach
  33. 33. Layered approach XHTML: <p class=”box”>Hello World!</p>
  34. 34. Layered approach XHTML: <p class=”box”>Hello World!</p>
  35. 35. Layered approach XHTML: <p class=”box”>Hello World!</p>
  36. 36. 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; }
  37. 37. Behavioral performance
  38. 38. Tools
  39. 39. Validating your mark-up http://validator.w3.org/
  40. 40. Validating your CSS http://jigsaw.w3.org/css-validator/ Valid Cascade!
  41. 41. Testing Section 508 http://www.cynthiasays.com/
  42. 42. Resources
  43. 43. Web Standards Curriculum http://www.opera.com/company/education/curriculum/
  44. 44. Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Internet History HTML Accessibility CSS JavaScript
  45. 45. Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Web Design Concepts: - IA - Color theory & schemes - Wireframing - Typography
  46. 46. WaSP Interact http://interact.webstandards.org
  47. 47. WaSP Interact http://interact.webstandards.org 6 Tracks of Development
  48. 48. WaSP Interact http://interact.webstandards.org Foundations Front-end Development Design User Science Server Side Development Professional Practice
  49. 49. Questions?

×