Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

2.010 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Business
  • Als Erste(r) kommentieren

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

×