Zeitgemäße Webentwicklung

322 Aufrufe

Veröffentlicht am

Eine wilde Jagd durch's Gemüßebeet

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

  • Gehören Sie zu den Ersten, denen das gefällt!

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

Keine Notizen für die Folie

Zeitgemäße Webentwicklung

  1. 1. Zeitgemäße Webentwicklung Anforderungen, Vorgehen und Best Practices
  2. 2. Motivation Erfahrungen in Agenturen: Viel Potential ging verloren, weil Vorgehen oft sehr chaotisch. Besser: Feste Regeln und Strategien um auf der Höhe der aktuellen Anforderungen fokussiert und sorgenfrei entwickeln zu können.
  3. 3. Anforderungen ...an das Frontend und Backend.
  4. 4. Separation of Concerns
  5. 5. Lade-Geschwindigkeit ● Möglichst wenig HTTP-Requests ○ Konkatenieren von CSS- und JS-Dateien ○ Spritesheets ● Minify CSS und JS ● Frühes gezieltes Leeren des Ausgabe-Buffers im Server
  6. 6. Lade-Geschwindigkeit ● Bild-Optimierung (verlustfrei) 2.8 KB 1.13 KB ~70% ● Caching Zeiten und Strategie für erzwungenes Neuladen
  7. 7. Lade-Geschwindigkeit
  8. 8. Lade-Geschwindigkeit 1
  9. 9. Lade-Geschwindigkeit 1 2
  10. 10. Lade-Geschwindigkeit 1 2 3 ...
  11. 11. Darstellungs-Ebene (CSS) Features ● Transitions zwischen States / Animationen ● Responsiveness durch Media Queries ● Weitere optische Features in CSS3 Programmierung ● Modular (Imports, Nesting und Mixins) ● DRY (Variables) ● Rad nicht neu erfinden (Bibliotheken) ● Cross-Browser (Bibliotheken und Mixins) ● Besseres Namespacing (Nesting) ● Minified Kompilierung ● On-Change Kompilierung
  12. 12. SASS Variables Nesting Mixins
  13. 13. SASS main.scss *.scss *.scss *.scss *.scss *.scss *.scss *.scss *.scss styles.css
  14. 14. Responsiveness Verschachtelung mit Media Queries: ● nach innen (Graceful Degradation) ● nach außen (Progressive Enhancement)
  15. 15. Responsiveness Graceful Degradation @media (max-width: 432px) @media (max-width: 999px) definieren überschreiben zurücksetzen
  16. 16. Responsiveness
  17. 17. Ajax Vorteile: ● Schnell Daten “on the fly” nachladen ● Kein neuer Pageload (nur der Zustand ändert sich) ● Geringere Serverlast (auch weil cachebar) Nachteile: ● Es muss auch ohne gehen! (JavaScript, XMLHttpRequest und history.pushState) ● Im Frontend müssen geänderte Zustände “gepusht” werden ● Das Backend muss beides unterstützen können: Initialer Pageload AJAX-Request HTML-Wrapper ContentBootstrap MVC
  18. 18. Sicherheit Studie der Cenzic zu Vulnerabilität von Webanwendungen 99% aller getesteten Webanwendungen hatten Sicherheitslücken in 2012
  19. 19. Sicherheit Sanitization Top-Level Sanitization Tiefer-gehende Validierung im Model
  20. 20. Sicherheit Server Konfiguration Sichtbarkeiten einstellen Error-Reporting: AUS HTTP-Header ohne Server- Version Webserver User nur mit nötigsten Rechten
  21. 21. Barrierefreiheit ● Struktur und Semantik (auch SOC!) ● Text-Alternative für graphische Elemente (Wenn Deko dann CSS) ● “Unobtrusive” JavaScript ● WAI-ARIA (Role, States, tabindex) ● Skip-Links ● Skalierbarkeit (relative Größenangaben) ● Sensibler Umgang mit Plugin-Content, Videos, Sound usw
  22. 22. Barrierefreiheit Skiplink Navigation Content Titel (richtige Reihenfolge)
  23. 23. Barrierefreiheit WAI-ARIA Role States
  24. 24. Suchmaschinen ● Titel (<title>) ○ Reihenfolge beachten (Von Spezifischen zum Allgemeinen) ○ kurz aber treffend ○ einzigartig, singulär ● Beschreibung <meta name="description" content="...”/> ○ Genauere und umfassendere Inhaltsangabe ● URL ○ lesbar: http://www.stephanlindauer.de/blog/post/eintrag-über-thema-xyz
  25. 25. Soziale Netzwerke Kennzeichnung der Relevanten Elemente
  26. 26. HTML ➔ Neue semantische Features ➔ 2D / 3D Kontext ➔ Multimedia ➔ Application Features ➔ CSS3 ABER: Fallback!
  27. 27. Fragen?
  28. 28. Danke für Ihre Aufmerksamkeit

×