Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
REAL WORLD WEB STANDARDS
Me and you
The web standards argument
The web standards argument
Real world scenarios
The web standards argument
Real world scenarios
Dealing with new problems
The web standards argument
Real world scenarios
Dealing with new problems
Maturing web standards
What are Web Standards?




                          http://www.flickr.com/photos/kaneda99/223671285/
                    ...
philosophy of web design
best practice for building a website
Web Standards   Correct Syntax
Web Standards   Universal Accessibility
Web Standards   Conveying Semantics




                         http://www.flickr.com/photos/mdumlao98/186071440/in/photos...
Content




HTML
Content
<img src=”#” alt=”Foxsports - return to home page” />
                                                        Content
    ...
Presentation




CSS
Presentation
Behaviour


Javascript / AJAX
Behaviour
What are Web Standards?

                          ContentContentContent




   HTML


                          http://ww...
ContentContentContent




 text only


search engines
                    HTML

   screen readers
the old (but good) arguments?
Less bandwidth
+   =
Less bandwidth
Universal accessibility
+   =
Less bandwidth
Universal accessibility
Ease of maintenance
Less bandwidth
Universal accessibility
Ease of maintenance
Search engine optimisation
Less bandwidth
Universal accessibility
Ease of maintenance
Search engine optimisation
Future-proofing
getting what you want?
+
+   =
Web Standards   Next Steps?




                              http://www.flickr.com/photos/brennen/34073524/
              ...
Real World Web Standards
Real World Web Standards   The Ideal Scenario




                               http://www.flickr.com/photos/tilaneseven/4...
Real World Web Standards   The Ugly Reality




                               http://www.flickr.com/photos/superlocal/2164...
Doesn’t validate
Doesn’t validate
Breaks in major browsers
Doesn’t validate
Breaks in major browsers
JavaScript errors
Doesn’t validate
Breaks in major browsers
JavaScript errors
Accessibility
Doesn’t validate
Breaks in major browsers
JavaScript errors
Accessibility
unclosed <p> tags.....
Doesn’t validate
Breaks in major browsers
JavaScript errors
Accessibility
unclosed <p> tags.....
... slow erosion ...
mastheads project
Real World Web Standards   Case Study




                              http://www.flickr.com/photos/whsimages/998243013/
 ...
Real World Web Standards   Case Study
    Design




                              http://www.flickr.com/photos/whsimages/9...
Real World Web Standards   Case Study
    Design




                     Front-end
                                 http:...
Real World Web Standards   Case Study
    Design                                                       Back-end




      ...
Real World Web Standards   Semantic Code
Real World Web Standards   Hazards Ahead




                                http://www.flickr.com/photos/malinky/54265493/...
Scope creep
Scope creep
More people
Scope creep
More people
Faster builds
Scope creep
More people
Faster builds
Less communication
Real World Web Standards   Bloated Markup
!important
class=”footer”
footer1   bot-links   bottom   foot   tools   _footer
what we achieved?
Eliminated table layouts
Eliminated table layouts
XHTML transitional doctype
Eliminated table layouts
XHTML transitional doctype
Semantic documents
Eliminated table layouts
XHTML transitional doctype
Semantic documents
Increased usability
Eliminated table layouts
XHTML transitional doctype
Semantic documents
Increased usability
Accessible JavaScript!
Eliminated table layouts
XHTML transitional doctype
Semantic documents
Increased usability
Accessible JavaScript!
New leve...
Real World Web Standards   What could we have changed?
Setup time
Setup time
Defensive driving development
Setup time
Defensive driving development
Establish rules
Setup time
Defensive driving development
Establish rules
Increase communication
Setup time
Defensive driving development
Establish rules
Increase communication
Documentation
Setup time
Defensive driving development
Establish rules
Increase communication
Documentation
Do It again...
Dealing with New Standards




                             http://www.flickr.com/photos/tamaki/138227048/
                ...
the old problem
                  awareness
the new problem
                  awareness   pro-activeness
the old problem
                  awareness   pro-activeness
                  value
the new problem
                  awareness   pro-activeness
                  value       scale
the old problem
                  awareness        pro-activeness
                  value            scale
               ...
the new problem
                  awareness        pro-activeness
                  value            scale
               ...
Dealing with New Standards   Pro-activeness
Just do it
Just do it
 Proof of concept
Just do it
 Proof of concept
 Get someone onboard
Just do it
 Proof of concept
 Get someone onboard
 Be pushy or dull or pain in the a*se
Just do it
 Proof of concept
 Get someone onboard
 Be pushy or dull or pain in the a*se
Pick a weapon
$$$

400


300


200


100


  0
   2006   2007   2008   2009   2010
Dealing with New Standards   Choose your weapon

                                                   nda rds
              ...
Dealing with New Standards     Scale




                             http://www.flickr.com/photos/darrenandpalmyra/2973643...
Baby steps
Baby steps
Documentation and education
Baby steps
Documentation and education
Induction
Baby steps
Documentation and education
Induction
Frameworks
  JavaScript
Baby steps
Documentation and education
Induction
Frameworks
  JavaScript
  HTML
  CSS
Dealing with New Standards   “We need to do this”




                                  developer

       corporate
      ...
Knowing your environment
Knowing your environment
Picking your battles
not ideal...




 text only
                    HTML
search engines


   screen readers
Knowing your environment
Picking your battles
Personal sacrifice
Maturing Web Standards




                         http://www.flickr.com/photos/wiseacre/1017839840/
                     ...
Maturing Web Standards




                         http://www.flickr.com/photos/melbournewsg/140576306/
                  ...
Maturing Web Standards
the new
Knowing the dark side
Knowing the dark side
Validation is not gospel
Knowing the dark side
Validation is not gospel
More focus on the user
Knowing the dark side
Validation is not gospel
More focus on the user
Content is still king
Knowing the dark side
Validation is not gospel
More focus on the user
Content is still king
New layer of standards
Behaviour

  AJAX
JavaScript
  Flash
Knowing the dark side
Validation is not gospel
More focus on the user
Content is still king
New layer of standards
Pragmat...
www.standardzilla.com
               Presentation Slides - Real World Web Standards



www.digital-web.com/articles/corpor...
Real World Web Standards
Real World Web Standards
Próxima SlideShare
Cargando en…5
×

Real World Web Standards

18.810 visualizaciones

Publicado el

Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?

Publicado en: Tecnología, Diseño

Real World Web Standards

  1. REAL WORLD WEB STANDARDS
  2. Me and you
  3. The web standards argument
  4. The web standards argument Real world scenarios
  5. The web standards argument Real world scenarios Dealing with new problems
  6. The web standards argument Real world scenarios Dealing with new problems Maturing web standards
  7. What are Web Standards? http://www.flickr.com/photos/kaneda99/223671285/ kaneda99
  8. philosophy of web design
  9. best practice for building a website
  10. Web Standards Correct Syntax
  11. Web Standards Universal Accessibility
  12. Web Standards Conveying Semantics http://www.flickr.com/photos/mdumlao98/186071440/in/photostream/ mdumlao98
  13. Content HTML
  14. Content
  15. <img src=”#” alt=”Foxsports - return to home page” /> Content <img src=”#” alt=”world cup trophy” /> <h1> Text <ul> <h2> <dl> <h2> <table>
  16. Presentation CSS
  17. Presentation
  18. Behaviour Javascript / AJAX
  19. Behaviour
  20. What are Web Standards? ContentContentContent HTML http://www.flickr.com/photos/kaneda99/223671285/ kaneda99
  21. ContentContentContent text only search engines HTML screen readers
  22. the old (but good) arguments?
  23. Less bandwidth
  24. + =
  25. Less bandwidth Universal accessibility
  26. + =
  27. Less bandwidth Universal accessibility Ease of maintenance
  28. Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation
  29. Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation Future-proofing
  30. getting what you want?
  31. +
  32. + =
  33. Web Standards Next Steps? http://www.flickr.com/photos/brennen/34073524/ flowb33
  34. Real World Web Standards
  35. Real World Web Standards The Ideal Scenario http://www.flickr.com/photos/tilaneseven/438652956/ tilaneseven
  36. Real World Web Standards The Ugly Reality http://www.flickr.com/photos/superlocal/216434095/ superlocal
  37. Doesn’t validate
  38. Doesn’t validate Breaks in major browsers
  39. Doesn’t validate Breaks in major browsers JavaScript errors
  40. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility
  41. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags.....
  42. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags..... ... slow erosion ...
  43. mastheads project
  44. Real World Web Standards Case Study http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  45. Real World Web Standards Case Study Design http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  46. Real World Web Standards Case Study Design Front-end http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  47. Real World Web Standards Case Study Design Back-end Front-end http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  48. Real World Web Standards Semantic Code
  49. Real World Web Standards Hazards Ahead http://www.flickr.com/photos/malinky/54265493/ malinky
  50. Scope creep
  51. Scope creep More people
  52. Scope creep More people Faster builds
  53. Scope creep More people Faster builds Less communication
  54. Real World Web Standards Bloated Markup
  55. !important
  56. class=”footer”
  57. footer1 bot-links bottom foot tools _footer
  58. what we achieved?
  59. Eliminated table layouts
  60. Eliminated table layouts XHTML transitional doctype
  61. Eliminated table layouts XHTML transitional doctype Semantic documents
  62. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability
  63. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript!
  64. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript! New level of standards
  65. Real World Web Standards What could we have changed?
  66. Setup time
  67. Setup time Defensive driving development
  68. Setup time Defensive driving development Establish rules
  69. Setup time Defensive driving development Establish rules Increase communication
  70. Setup time Defensive driving development Establish rules Increase communication Documentation
  71. Setup time Defensive driving development Establish rules Increase communication Documentation Do It again...
  72. Dealing with New Standards http://www.flickr.com/photos/tamaki/138227048/ tamaki
  73. the old problem awareness
  74. the new problem awareness pro-activeness
  75. the old problem awareness pro-activeness value
  76. the new problem awareness pro-activeness value scale
  77. the old problem awareness pro-activeness value scale “let me do this”
  78. the new problem awareness pro-activeness value scale “let me do this” “we need to do this”
  79. Dealing with New Standards Pro-activeness
  80. Just do it
  81. Just do it Proof of concept
  82. Just do it Proof of concept Get someone onboard
  83. Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se
  84. Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se Pick a weapon
  85. $$$ 400 300 200 100 0 2006 2007 2008 2009 2010
  86. Dealing with New Standards Choose your weapon nda rds @*k sta F SEO my site!
  87. Dealing with New Standards Scale http://www.flickr.com/photos/darrenandpalmyra/297364366// Daz n P
  88. Baby steps
  89. Baby steps Documentation and education
  90. Baby steps Documentation and education Induction
  91. Baby steps Documentation and education Induction Frameworks JavaScript
  92. Baby steps Documentation and education Induction Frameworks JavaScript HTML CSS
  93. Dealing with New Standards “We need to do this” developer corporate antagonist http://www.flickr.com/photos/tamaki/138227048/ tamaki
  94. Knowing your environment
  95. Knowing your environment Picking your battles
  96. not ideal... text only HTML search engines screen readers
  97. Knowing your environment Picking your battles Personal sacrifice
  98. Maturing Web Standards http://www.flickr.com/photos/wiseacre/1017839840/ wiseacre photo
  99. Maturing Web Standards http://www.flickr.com/photos/melbournewsg/140576306/ Melbourne WSG
  100. Maturing Web Standards
  101. the new
  102. Knowing the dark side
  103. Knowing the dark side Validation is not gospel
  104. Knowing the dark side Validation is not gospel More focus on the user
  105. Knowing the dark side Validation is not gospel More focus on the user Content is still king
  106. Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards
  107. Behaviour AJAX JavaScript Flash
  108. Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards Pragmatic standards
  109. www.standardzilla.com Presentation Slides - Real World Web Standards www.digital-web.com/articles/corporate_web_standards/ Article - Corporate Web Standards

×