Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Web Standards Universal Accessibility
Web Standards Universal Accessibility
Prochain SlideShare
Chargement dans…5
×

Web Standards Universal Accessibility Real World Web Standards

19 298 vues

Publié le

Web Standards Universal Accessibility

Publié dans : Technologie, Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Very good
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • awesome~
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×