Zeitgemäße Webentwicklung Anforderungen, Vorgehen und Best Practices
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
