Standardizing the Web: A Look into the Why of Web Standards
â˘
5 gefällt mirâ˘1,001 views
This is presentation given at USC Web Council in April of 2009. Given by: Archie Cayanan, Cameron Bates, and Tim Wright of (csskarma.com)
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (13)
Andere mochten auch
Andere mochten auch (13)
Ăhnlich wie Standardizing the Web: A Look into the Why of Web Standards
Ăhnlich wie Standardizing the Web: A Look into the Why of Web Standards (20)
Mehr von Tim Wright
Mehr von Tim Wright (18)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (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?