Zeitgemäße Webentwicklung

Zeitgemäße WebentwicklungAnforderungen, Vorgehen und Best Practices

MotivationErfahrungen 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.

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 und JS

● Frühes gezieltes Leeren des Ausgabe-Buffers im Server

Lade-Geschwindigkeit● Bild-Optimierung (verlustfrei)

2.8 KB 1.13 KB ~70%

● Caching Zeiten und Strategie für erzwungenes Neuladen

Lade-Geschwindigkeit

Lade-Geschwindigkeit 1

Lade-Geschwindigkeit 1

2

Lade-Geschwindigkeit 1

23

...

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

SASSVariables Nesting Mixins

SASS

main.scss

*.scss *.scss *.scss *.scss *.scss *.scss *.scss *.scss

styles.css

ResponsivenessVerschachtelung mit Media Queries:● nach innen (Graceful Degradation)● nach außen (Progressive Enhancement)

ResponsivenessGraceful Degradation

@media (max-width: 432px)

@media (max-width: 999px)

definierenüberschreibenzurücksetzen

Responsiveness

AjaxVorteile:● 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

SicherheitStudie der Cenzic zu Vulnerabilität von Webanwendungen

99% aller getesteten Webanwendungen hatten Sicherheitslücken in 2012

Sicherheit

Sanitization

Top-Level Sanitization

Tiefer-gehende Validierung im Model

SicherheitServerKonfigurationSichtbarkeiten einstellen

Error-Reporting: AUS

HTTP-Header ohne Server-Version

Webserver User nur mit nötigsten Rechten

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

Barrierefreiheit

Skiplink

Navigation

Content

Titel (richtige Reihenfolge)

Barrierefreiheit WAI-ARIARole

States

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

Soziale NetzwerkeKennzeichnung der Relevanten Elemente

HTML

➔ Neue semantische Features

➔ 2D / 3D Kontext

➔ Multimedia

➔ Application Features

➔ CSS3

ABER: Fallback!

Fragen?

Danke für Ihre Aufmerksamkeit