Web guidelines in practice

1,821 views
1,760 views

Published on

Presentation for Dutch front-end developers association Fronteers, on the most important real-world aspects of the Dutch Web Guidelines. *The first slide in Comic Sans was intentionally bad.*

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,821
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web guidelines in practice

  1. 1. WEBRICHTLIJNEN FUN FOR THE WHOLE font-family!
  2. 2. Webrichtlijnen De in de praktijk Stephen Hay, Cinnamon Interactive
  3. 3. Ik heb geen blinde gebruikers.
  4. 4. Ik gebruik <div>’s en alt-tags
  5. 5. This
  6. 6. This
  7. 7. “ Daar word ik niet vrolijk van.
  8. 8. Kwaliteit. Duurzaamheid
  9. 9. Standaarden W3C specs WCAG 1.0 ISO HTML
  10. 10. Unobtrusive Javascript + Conditional comments [...] best practices.
  11. 11. Problemen?
  12. 12. Problemen? CMS’en
  13. 13. Problemen? CMS’en Editors/IDE’s
  14. 14. Problemen? CMS’en Editors/IDE’s Gebrek aan kennis
  15. 15. Kansen.
  16. 16. Kansen. Verbeterde CMS’en
  17. 17. Kansen. Verbeterde CMS’en Tool-onafhankelijk ontwikkelen
  18. 18. Kansen. Verbeterde CMS’en Tool-onafhankelijk ontwikkelen Kennisontwikkeling
  19. 19. 0
  20. 20. 125
  21. 21. 5 stappen
  22. 22. No frames.
  23. 23. Syntactisch correcte code, strict DOCTYPE.
  24. 24. Semantisch correcte code.
  25. 25. <div id=quot;page_titlequot;>Plannen</div> <div id=quot;page_contentquot;> <div id=quot;introquot;> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;><strong>Plannen 2008</strong> </font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;></font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>&nbsp;</font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>Blah blah...</p> [...]
  26. 26. <div id=quot;page_titlequot;>Plannen</div> <div id=quot;page_contentquot;> <div id=quot;introquot;> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;><strong>Plannen 2008</strong> </font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;></font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>&nbsp;</font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>Blah blah...</p> [...] <h1>Plannen</h1> <div id=quot;page-contentquot;> <h2>Plannen 2008</h2> <p class=quot;inleidingquot;> [...] </p> [...]
  27. 27. <div id=quot;page_titlequot;>Plannen</div> <div id=quot;page_contentquot;> <div id=quot;introquot;> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;><strong>Plannen 2008</strong> </font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;></font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>&nbsp;</font></p> <p class=quot;wordquot;><font style=quot;font-size: 12px;quot;>Blah blah...</p> [...] <h1>Plannen</h1> <div id=quot;page-contentquot;> <h2>Plannen 2008</h2> <p class=quot;inleidingquot;> [...] </p> [...]
  28. 28. Progressive enhancement.
  29. 29. Permanente, unieke (en leesbare) URLs.
  30. 30. http://example.com/?id=3835&pid=57829&rid=378952&qid=874528&sid=JVWJJ@*UJ@*H
  31. 31. http://example.com/?id=3835&pid=57829&rid=378952&qid=874528&sid=JVWJJ@*UJ@*H http://example.com/nieuws/2007/gilde/oprichtingscongres/
  32. 32. Be the user.
  33. 33. eer? http://webrichtlijnen.overheid.nl/ http://drempelvrij.nl/webrichtlijnen
  34. 34. kthxbye www.the-haystack.com/presentations/gilde2007

×