SlideShare ist ein Scribd-Unternehmen logo
1 von 28
Downloaden Sie, um offline zu lesen
Zeitgemäße Webentwicklung
Anforderungen, Vorgehen und Best Practices
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.
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
2
3
...
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
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 Enhancement)
Responsiveness
Graceful Degradation
@media (max-width: 432px)
@media (max-width: 999px)
definieren
überschreiben
zurücksetzen
Responsiveness
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
Sicherheit
Studie 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
Sicherheit
Server
Konfiguration
Sichtbarkeiten 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-ARIA
Role
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 Netzwerke
Kennzeichnung der Relevanten Elemente
HTML
➔ Neue semantische Features
➔ 2D / 3D Kontext
➔ Multimedia
➔ Application Features
➔ CSS3
ABER: Fallback!
Fragen?
Danke für Ihre Aufmerksamkeit

Weitere ähnliche Inhalte

Ähnlich wie Zeitgemäße Webentwicklung

Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance OptimizationsJakob
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveBokowsky + Laymann GmbH
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro sessionVirttoo org
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Bastian Grimm
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend PerformanceNico Steiner
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleichgedoplan
 
Dr. Thomas Petrik (Sphinx IT Consulting)
Dr. Thomas Petrik (Sphinx IT Consulting)Dr. Thomas Petrik (Sphinx IT Consulting)
Dr. Thomas Petrik (Sphinx IT Consulting)Agenda Europe 2035
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenDavid Schneider
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroidsBlogwerk AG
 
Microservices and Container Management with Mesosphere DC/OS
Microservices and Container Management with Mesosphere DC/OSMicroservices and Container Management with Mesosphere DC/OS
Microservices and Container Management with Mesosphere DC/OSRalf Ernst
 
Performance-Analyse von Oracle-Datenbanken mit Panorama
Performance-Analyse von Oracle-Datenbanken mit PanoramaPerformance-Analyse von Oracle-Datenbanken mit Panorama
Performance-Analyse von Oracle-Datenbanken mit PanoramaPeter Ramm
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)Ulrike Schwinn
 

Ähnlich wie Zeitgemäße Webentwicklung (20)

Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance Optimizations
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep Dive
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Dr. Thomas Petrik (Sphinx IT Consulting)
Dr. Thomas Petrik (Sphinx IT Consulting)Dr. Thomas Petrik (Sphinx IT Consulting)
Dr. Thomas Petrik (Sphinx IT Consulting)
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroids
 
Microservices and Container Management with Mesosphere DC/OS
Microservices and Container Management with Mesosphere DC/OSMicroservices and Container Management with Mesosphere DC/OS
Microservices and Container Management with Mesosphere DC/OS
 
Performance-Analyse von Oracle-Datenbanken mit Panorama
Performance-Analyse von Oracle-Datenbanken mit PanoramaPerformance-Analyse von Oracle-Datenbanken mit Panorama
Performance-Analyse von Oracle-Datenbanken mit Panorama
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
PHP im High End
PHP im High EndPHP im High End
PHP im High End
 
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)
Überblick: 18c und Autonomous Data Warehouse Cloud (ADWC)
 

Zeitgemäße Webentwicklung