Zeitgemäße Webentwicklung
Anforderungen, Vorgehen und Best Practices
Motivation
Erfahrungen in Agenturen:
Viel Potential ging verloren, weil
Vorgehen oft sehr chaotisch.
Besser:
Feste Regeln ...
Anforderungen
...an das Frontend und Backend.
Separation of Concerns
Lade-Geschwindigkeit
● Möglichst wenig HTTP-Requests
○ Konkatenieren von CSS- und JS-Dateien
○ Spritesheets
● Minify CSS u...
Lade-Geschwindigkeit
● Bild-Optimierung (verlustfrei)
2.8 KB 1.13 KB ~70%
● Caching Zeiten und Strategie für erzwungenes N...
Lade-Geschwindigkeit
Lade-Geschwindigkeit 1
Lade-Geschwindigkeit 1
2
Lade-Geschwindigkeit 1
2
3
...
Darstellungs-Ebene (CSS)
Features
● Transitions zwischen States / Animationen
● Responsiveness durch Media Queries
● Weite...
SASS
Variables Nesting Mixins
SASS
main.scss
*.scss *.scss *.scss *.scss *.scss *.scss *.scss *.scss
styles.css
Responsiveness
Verschachtelung mit Media Queries:
● nach innen (Graceful Degradation)
● nach außen (Progressive Enhancemen...
Responsiveness
Graceful Degradation
@media (max-width: 432px)
@media (max-width: 999px)
definieren
überschreiben
zurückset...
Responsiveness
Ajax
Vorteile:
● Schnell Daten “on the fly” nachladen
● Kein neuer Pageload (nur der Zustand ändert sich)
● Geringere Serv...
Sicherheit
Studie der Cenzic zu
Vulnerabilität von
Webanwendungen
99% aller
getesteten
Webanwendungen
hatten
Sicherheitslü...
Sicherheit
Sanitization
Top-Level Sanitization
Tiefer-gehende Validierung
im Model
Sicherheit
Server
Konfiguration
Sichtbarkeiten einstellen
Error-Reporting: AUS
HTTP-Header ohne Server-
Version
Webserver ...
Barrierefreiheit
● Struktur und Semantik (auch SOC!)
● Text-Alternative für graphische Elemente (Wenn Deko dann CSS)
● “Un...
Barrierefreiheit
Skiplink
Navigation
Content
Titel (richtige Reihenfolge)
Barrierefreiheit WAI-ARIA
Role
States
Suchmaschinen
● Titel (<title>)
○ Reihenfolge beachten (Von Spezifischen zum Allgemeinen)
○ kurz aber treffend
○ einzigart...
Soziale Netzwerke
Kennzeichnung der Relevanten Elemente
HTML
➔ Neue semantische Features
➔ 2D / 3D Kontext
➔ Multimedia
➔ Application Features
➔ CSS3
ABER: Fallback!
Fragen?
Danke für Ihre Aufmerksamkeit
Nächste SlideShare
Wird geladen in …5
×

Zeitgemäße Webentwicklung

330 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
330
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

×