Standardizing the Web: A Look into the Why of Web Standards
•
5 j'aime•1,001 vues
This is presentation given at USC Web Council in April of 2009. Given by: Archie Cayanan, Cameron Bates, and Tim Wright of (csskarma.com)
Recommandé
Contenu connexe
Tendances
Tendances (13)
En vedette
En vedette (13)
Similaire à Standardizing the Web: A Look into the Why of Web Standards
Similaire à Standardizing the Web: A Look into the Why of Web Standards (20)
Plus de Tim Wright
Plus de Tim Wright (18)
Dernier
Dernier (20)
Standardizing the Web: A Look into the Why of Web Standards
- 1. Standardizing the Web A look into the “Why” of Web Standards ITS Web Services Cameron Bates Archie Cayanan Tim Wright
- 2. What are Web Standards?
- 3. History vs. World Wide Web Consortium (W3C) The Web Standards Project
- 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. What we’ll cover What are web standards? Apply Web Standards • DOCTYPE • Semantics • Validation • Presentation layer • Behavior layer • Recycling content
- 6. Why use Web standards • Accessibility • Stability • Performance Tools • Opera Web Standards Curriculum Resources • WaSP • W3C Q&A
- 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. (X)HTML • XHTML 1.0 • HTML 4.01 • Transitional • Transitional • Strict • Strict
- 10. Use the right tool
- 11. Semantics
- 12. Semantics • <h1>, <h2>, <h3>
- 13. Semantics • <h1>, <h2>, <h3> • <ul> and <ol>
- 14. Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite>
- 15. Semantics • <h1>, <h2>, <h3> • <ul> and <ol> • <blockquote> and <cite> • <table>
- 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. Javascript: Behavior Layer • Progressive enhancement • Structure -> Presentation -> Behavior • HTML -> CSS -> Javascript
- 19. Recycle your content • Web • Print • Mobile
- 20. Stability
- 21. Why use Web Standards
- 22. Accessibility
- 23. Accessibility [to people] Browser wars Section 508 Bandwidth restrictions
- 25. Stability
- 27. Performance
- 28. Performance
- 29. The Goal
- 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. The Goal
- 32. Layered approach
- 33. Layered approach XHTML: <p class=”box”>Hello World!</p>
- 34. Layered approach XHTML: <p class=”box”>Hello World!</p>
- 35. Layered approach XHTML: <p class=”box”>Hello World!</p>
- 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; }
- 38. Tools
- 39. Validating your mark-up http://validator.w3.org/
- 40. Validating your CSS http://jigsaw.w3.org/css-validator/ Valid Cascade!
- 41. Testing Section 508 http://www.cynthiasays.com/
- 42. Resources
- 44. Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Internet History HTML Accessibility CSS JavaScript
- 45. Web Standards Curriculum http://www.opera.com/company/education/curriculum/ Web Design Concepts: - IA - Color theory & schemes - Wireframing - Typography
- 47. WaSP Interact http://interact.webstandards.org 6 Tracks of Development
- 48. WaSP Interact http://interact.webstandards.org Foundations Front-end Development Design User Science Server Side Development Professional Practice
- 49. Questions?