Das Dokument betont die Notwendigkeit strukturierter Vorgehensweisen in der modernen Webentwicklung, um effizient auf Anforderungen zu reagieren und die Ladegeschwindigkeit zu optimieren. Es wird eine Vielzahl von Best Practices zur Verbesserung der Leistung, Sicherheit und Barrierefreiheit vorgestellt, darunter die Bedeutung von Caching, responsivem Design und die Verwendung von AJAX. Zudem werden Empfehlungen zur Suchmaschinenoptimierung gegeben, um die Sichtbarkeit von Webanwendungen zu erhöhen.

1. Zeitgemäße Webentwicklung
Anforderungen, Vorgehen und Best Practices

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. Anforderungen
...an das Frontend und Backend.

4. Separation of Concerns

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. Lade-Geschwindigkeit
● Bild-Optimierung (verlustfrei)
2.8 KB 1.13 KB ~70%
● Caching Zeiten und Strategie für erzwungenes Neuladen

7. Lade-Geschwindigkeit

8. Lade-Geschwindigkeit 1

9. Lade-Geschwindigkeit 1
2

10. Lade-Geschwindigkeit 1
2
3
...

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. SASS
Variables Nesting Mixins

13. SASS
main.scss
*.scss *.scss *.scss *.scss *.scss *.scss *.scss *.scss
styles.css

14. Responsiveness
Verschachtelung mit Media Queries:
● nach innen (Graceful Degradation)
● nach außen (Progressive Enhancement)

15. Responsiveness
Graceful Degradation
@media (max-width: 432px)
@media (max-width: 999px)
definieren
überschreiben
zurücksetzen

16. Responsiveness

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. Sicherheit
Studie der Cenzic zu
Vulnerabilität von
Webanwendungen
99% aller
getesteten
Webanwendungen
hatten
Sicherheitslücken in
2012

19. Sicherheit
Sanitization
Top-Level Sanitization
Tiefer-gehende Validierung
im Model

20. Sicherheit
Server
Konfiguration
Sichtbarkeiten einstellen
Error-Reporting: AUS
HTTP-Header ohne Server-
Version
Webserver User nur mit
nötigsten Rechten

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. Barrierefreiheit
Skiplink
Navigation
Content
Titel (richtige Reihenfolge)

23. Barrierefreiheit WAI-ARIA
Role
States

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. Soziale Netzwerke
Kennzeichnung der Relevanten Elemente

26. HTML
➔ Neue semantische Features
➔ 2D / 3D Kontext
➔ Multimedia
➔ Application Features
➔ CSS3
ABER: Fallback!

27. Fragen?

28. Danke für Ihre Aufmerksamkeit