Aspekte moderner
             Frontendentwicklung
                   Jens Grochtdreis
                      Webkrauts




...
Jens Grochtdreis

  _ Frontendentwickler
  _ 10 Jahre Agenturerfahrung
  _ Gründer der Webkrauts
  _ Blogger
  _ Autor des...
Das sollten wir nicht vergessen!

  _ Das Internet ist ein neues Medium!
     _ junges Medium
     _ rasante Entwicklung
 ...
Das sollten wir nicht vergessen!

  _ Das Internet bietet viele unterschiedliche Zugänge zu
    Informationen
     _ Am Mo...
Kontrollverlust - formal

  _ Wie können wir heute ins Internet gehen?
     _ PC, Notebook
     _ viele Betriebssysteme, B...
Flexibilität ist wichtig

  _ Wir können nicht mehr sicher vorhersagen, wie
    jemand unsere Seite sieht/liest.
  _ Desha...
Screenshot von einem EeePC, 800x480px
                                                          7
Jens Grochtdreis – Aspek...
Wir stehen am Anfang

  _ Wir stehen noch immer am Anfang.
  _ HTML in der jetzigen Form genügt nicht!
  _ Webseiten sind ...
3 Problemfelder im Frontend




                                                          9
Jens Grochtdreis – Aspekte mod...
3 Problemfelder

  _ Browser
  _ Entwickler
  _ Internet-Verständnis von Kunden
    (und Beratern und Grafikern)




     ...
Problemfeld 1: Browser

  _ Der IE in allen Versionen kann einfach weniger als alle
    anderen Browser
  _ Der IE6 ist ni...
12
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
13
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Problemfeld 2: Entwickler

  _ Die Opera-MAMA-Studie hat erschreckende
    Codedefizite zu Tage gefördert:
       _ 58,5% ...
Das Internet ist komplex

  _ Wir nutzen sehr viele verschiedene Standards und
    Technologien, um eine Website zu betrei...
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
div id="h1Homepage"



Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Problemfeld 3: Internetverständnis

  _ Es gibt keine Pixelexaktheit
  _ Flexibilität ist die Stärke des Internet
  _ Wenn...
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Lösung: Selber denken macht schlau!




                                                      25
Jens Grochtdreis – Aspekt...
Semantik

  _ Erst über eine Webseite nachdenken, dann die
    Struktur erfassen und aufschreiben.
     _ Eine Überschrift...
Semantik

  _ Mit der Bedeutung der Inhalte beschäftigen
  _ Hinterfragen
  _ Kann ein Dokument mehrere h1 vertragen?
  _ ...
Überschriften

  _ Nur eine h1? Warum?
  _ Wir vermeiden sonst Analogien zur Printwelt.
    Warum nicht auch hier?
  _ Str...
Semantik

  _ Webseiten sind heute mehr als nur Dokumente.
     _ Die Dokumentenanalogie ist alt
     _ Es sollten wissens...
Überschriften

  _ Überschriften sind eine Navigationsmöglichkeit für
    Screenreader.
  _ Wikis generieren aus den Textü...
Lösung: Information




                                                      31
Jens Grochtdreis – Aspekte moderner Front...
32
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
33
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
34
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Wir können nicht warten,
bis es der Letzte begriffen hat!




                                                      35
Jen...
Am Ende
                                  Jens Grochtdreis
                                  http://blog.grochtdreis.de
  ...
Nächste SlideShare
Wird geladen in …5
×

A Tag 2009 - Aspekte Moderne Webentwicklung

1.825 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.825
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
96
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×