A Tag 2009 - Aspekte Moderne Webentwicklung

1,763 views
1,673 views

Published on

Vortrag auf dem Wiener A-Tag über grundlegende Problemfelder in der Frontendentwicklung.

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

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

No notes for slide

A Tag 2009 - Aspekte Moderne Webentwicklung

  1. 1. Aspekte moderner Frontendentwicklung Jens Grochtdreis Webkrauts Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  2. 2. Jens Grochtdreis _ Frontendentwickler _ 10 Jahre Agenturerfahrung _ Gründer der Webkrauts _ Blogger _ Autor des PHPMagazins, Webstandards-Magazins, T3N _ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  3. 3. Das sollten wir nicht vergessen! _ Das Internet ist ein neues Medium! _ junges Medium _ rasante Entwicklung _ spannend _ atemberaubend _ umwälzend _ in ständigem Wandel begriffen Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  4. 4. Das sollten wir nicht vergessen! _ Das Internet bietet viele unterschiedliche Zugänge zu Informationen _ Am Monitor lesen _ Ausdrucken _ Vorlesen lassen _ Formate sind anpassbar _ Inhalte lassen sich leicht rudimentär übersetzen Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  5. 5. Kontrollverlust - formal _ Wie können wir heute ins Internet gehen? _ PC, Notebook _ viele Betriebssysteme, Browser, Monitore _ Handy, PDA _ Spielkonsole _ TV _ Assistive Technologien 5 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  6. 6. Flexibilität ist wichtig _ Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. _ Deshalb: einen für möglichst viele gangbaren Weg beschreiten _ Erst der Inhalt, dann das Layout! _ Der Inhalt ist das Wichtigste! 6 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  7. 7. Screenshot von einem EeePC, 800x480px 7 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  8. 8. Wir stehen am Anfang _ Wir stehen noch immer am Anfang. _ HTML in der jetzigen Form genügt nicht! _ Webseiten sind immer seltener Dokumente. _ HTML5 ist ein wichtiger und erster Schritt. 8 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  9. 9. 3 Problemfelder im Frontend 9 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  10. 10. 3 Problemfelder _ Browser _ Entwickler _ Internet-Verständnis von Kunden (und Beratern und Grafikern) 10 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  11. 11. Problemfeld 1: Browser _ Der IE in allen Versionen kann einfach weniger als alle anderen Browser _ Der IE6 ist nicht tot zu kriegen _ Fortschritt richtet sich nach dem Langsamsten (IE) wegen der Verbreitung _ Nur Entwickler interessieren sich für Browser 11 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  12. 12. 12 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  13. 13. 13 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  14. 14. Problemfeld 2: Entwickler _ Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert: _ 58,5% Webseiten ohne Überschriften-Elemente _ 7,9% mit mehreren <h1> _ 16,1% beginnen Überschriften-Struktur mit <h2>, <h3> _ 7,1% mit Überschriften ohne logische Reihenfolge _ 24,9% mit Bildern ohne alt-Attribute _ 4,13% der Testseiten validierten Quelle: http://www.einfach-fuer-alle.de/blog/id/2505/ 14 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  15. 15. Das Internet ist komplex _ Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben. _ (X)HTML, CSS, Javascript, DOM 1-3 _ Flash, Flex, SWF _ PHP, ASP, Perl, Java _ MySQL, PostgreSQL _ XML, XSLT 15 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  16. 16. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  17. 17. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  18. 18. div id="h1Homepage" Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  19. 19. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  20. 20. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  21. 21. Problemfeld 3: Internetverständnis _ Es gibt keine Pixelexaktheit _ Flexibilität ist die Stärke des Internet _ Wenn ein Browser etwas nicht kann, einfach ignorieren! _ Keine Analogie zur Printwelt 21 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  22. 22. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  23. 23. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  24. 24. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  25. 25. Lösung: Selber denken macht schlau! 25 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  26. 26. Semantik _ Erst über eine Webseite nachdenken, dann die Struktur erfassen und aufschreiben. _ Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class="headline">Überschrift</div> _ Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat. 26 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  27. 27. Semantik _ Mit der Bedeutung der Inhalte beschäftigen _ Hinterfragen _ Kann ein Dokument mehrere h1 vertragen? _ Webseiten sind immer seltener Dokumente Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  28. 28. Überschriften _ Nur eine h1? Warum? _ Wir vermeiden sonst Analogien zur Printwelt. Warum nicht auch hier? _ Struktur für Sehende und Blinde anders? _ Reichen sechs Überschriften? _ Was machen Browser mit Sektionsüberschriften in HTML5 und machen sie das einheitlich? 28 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  29. 29. Semantik _ Webseiten sind heute mehr als nur Dokumente. _ Die Dokumentenanalogie ist alt _ Es sollten wissenschaftliche Texte erfaßt werden _ HTML5 ist der Versuch, der Realität gerecht zu werden _ Es gibt immer mehr Applikationen _ Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren 29 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  30. 30. Überschriften _ Überschriften sind eine Navigationsmöglichkeit für Screenreader. _ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  31. 31. Lösung: Information 31 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  32. 32. 32 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  33. 33. 33 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  34. 34. 34 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  35. 35. Wir können nicht warten, bis es der Letzte begriffen hat! 35 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  36. 36. Am Ende Jens Grochtdreis http://blog.grochtdreis.de http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/ 36 Jens Grochtdreis – Aspekte moderner Frontendentwicklung

×