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

1. Aspekte moderner
Frontendentwicklung
Jens Grochtdreis
Webkrauts
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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. 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. 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. 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. 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. Screenshot von einem EeePC, 800x480px
7
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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. 3 Problemfelder im Frontend
9
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

10. 3 Problemfelder
_ Browser
_ Entwickler
_ Internet-Verständnis von Kunden
(und Beratern und Grafikern)
10
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

13. 13
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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. 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. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

17. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

18. div id="h1Homepage"
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

19. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

20. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

23. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

24. Jens Grochtdreis – Aspekte moderner Frontendentwicklung

25. Lösung: Selber denken macht schlau!
25
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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. 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. Ü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. 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. Ü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. Lösung: Information
31
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

32. 32
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

33. 33
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

34. 34
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

35. Wir können nicht warten,
bis es der Letzte begriffen hat!
35
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

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