Eine wilde Jagd durch's Gemüßebeet

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