SlideShare une entreprise Scribd logo
1  sur  62
Télécharger pour lire hors ligne
Frontend Best Practices
Die drei wichtigsten
             Best Practices




Nachdenken             Recherchieren            Experimentieren
 http://goo.gl/NYGeI      http://goo.gl/HbFx0      http://goo.gl/LohPq
Semantik
Mangelnde Professionalität
   erzeugt in anderen
    Bereichen Spott
http://blog.zdf.de/zdfdasblog/2011/10/31/55-milliarden-zu-viele-nullen/
In unserer Profession wird
das kritiklos hingenommen
Warum keine Überschrift?




http://www.faz.net/
Warum keine Überschrift?




http://www.sueddeutsche.de/
Warum keine Überschrift?




http://www.stern.de/
Ein Slider - Grobskizze


                     IMAGE                                  IMAGE                                  IMAGE

                                                                                                                        

    Kategorie                Infos         Kategorie                Infos         Kategorie                Infos
    Überschrift              Zusatzinfo1   Überschrift              Zusatzinfo1   Überschrift              Zusatzinfo1
    Hier steht ein kurzer    Zusatzinfo2   Hier steht ein kurzer    Zusatzinfo2   Hier steht ein kurzer    Zusatzinfo2
    erklärender Text.                      erklärender Text.                      erklärender Text.
Mal ohne Semantik
Mal mit Semantik
Das falsche Element!
Versteckspiel



http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
Über Barrieren nachdenken
Keine vermeidbaren
                              Barrieren
                 ‣ Das Netz ermöglicht es
                     erstmals, dass JEDER auf
                     Informationen zugreifen
                     kann und in Interaktion
                     treten kann.
                 ‣ Warum also sich selber und
                     die Reichweite des eigenen
                     Angebotes beschränken?




http://failblog.org/2010/04/08/epic-fail-photos-hand-rail-fail/
mehr ...

      mehr ...

           mehr ...

 mehr ...
Konkretes Beispiel
Lösung dafür: WAI-ARIA
 Kleiner Bildschirm
 Keine Maus
 Keine Popups
Paradigmenwandel: Barrierefreiheit als
                  nachträglicher Einfall, drangedübelt
http://www.flickr.com/photos/beelzebozo/1503756/
Barrierefreiheit als integrales Element




http://www.flickr.com/photos/pixeldiva/2109688648/
http://www.flickr.com/photos/johnmcbride1109/2875819859/
Farbkontraste
http://www.ctrl-verlust.net/
https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
http://snurl.com/t58gj
Fokus
So nicht!
Den Fokus nicht vergessen!
Nicht in Tools und Techniken
     zu sehr verlieben
‣ Nach sinnvollen Einsatzzwecken von Techniken
  suchen.
‣ Nicht alles machen, weil es gerade möglich ist.
‣ Immer an die Semantik denken.
http://benthebodyguard.com/
http://jsfiddle.net/Flocke/e6KDU/
moderne Selektoren
‣ Können ältere IE (bis einschließlich Version 8)
  nicht.
‣ Ihnen kann mittels Javascript geholfen werden.
‣ Wenn es sich um keine „lebensnotwendigen“
  Operationen handelt, ist eine Nachhilfe via
  Javascript okay.
http://jsfiddle.net/Flocke/VCSEB/
neue semantische Elemente
An die Konsequenzen
                          denken
               ‣ HTML5-Seiten funktionieren in alten Browsern
                    nur mittels Javascript. Das betrifft im
                    Wesentlichen IE bis einschließlich Version 8.




http://code.google.com/p/html5shim/                           http://www.modernizr.com/
Mit Javascript
Ohne Javascript
Was konnten wir bisher mit
      CSS machen?
‣ Texte formatieren
‣ Farben für Vorder- und Hintergründe
‣ Positionierungen
‣ Floats
‣ Bilder werden für viele Lösungen benötigt
‣ Manchmal wird Extra-Markup für Bilder-
  Lösungen benötigt
‣ Transparenz mit Nebenwirkungen
Welche Lücke füllt CSS3?
neue Layoutmodelle

mehr Möglichkeiten mit Rahmen und Hintergründen


       Verringerung des
        Grafikeinsatzes
                              Animationen
 neue Selektoren
Transparenz
     mit rgba()                   runde Ecken



                         Verläufe (gradient)

Transitions

                  media-queries

         calc()                   mehrere Spalten
Die Vorteile

‣ Weniger Schmuckbilder werden benötigt.
‣ Weniger Javascript wird benötigt.
‣ Animationen und Transitionen sind mittels CSS
  schneller, als mittels Javascript.
‣ Es wird seltener Code nur für Optik benötigt,
  der Quellcode schmaler und lesbarer.
Die Nachteile


Es gibt keine!
Oder doch einen kleinen
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler
                    Navigation




http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder




http://dummyimage.com/                 http://lorempixel.com/
Dummybilder




http://placekitten.com/
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
http://geekandpoke.typepad.com/geekandpoke/2009/07/geeks.html
Jens Grochtdreis
                                                     http://grochtdreis.de
                                                   http://twitter.com/Flocke
                                                      http://webkrauts.de
                                                http://slideshare.net/Flocke669




Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/

Contenu connexe

Tendances

Tendances (6)

Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Übersicht Planung Webprojekte
Übersicht Planung WebprojekteÜbersicht Planung Webprojekte
Übersicht Planung Webprojekte
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 

En vedette

interaccion en el interfaz de usuario
interaccion en el interfaz de usuariointeraccion en el interfaz de usuario
interaccion en el interfaz de usuario
Angel Lema
 
Portafolio de servicios
Portafolio de serviciosPortafolio de servicios
Portafolio de servicios
dianavella
 
8b edward ricardo herrera muños anderson franco la evolucion de la in...
8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...
8b edward ricardo herrera muños anderson franco la evolucion de la in...
Daniel Herrera
 
eStrategy Ausgabe 7 - Leseprobe
eStrategy Ausgabe 7 - LeseprobeeStrategy Ausgabe 7 - Leseprobe
eStrategy Ausgabe 7 - Leseprobe
TechDivision GmbH
 

En vedette (20)

Dislexia
DislexiaDislexia
Dislexia
 
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
 
Social Media ist...
Social Media ist...Social Media ist...
Social Media ist...
 
interaccion en el interfaz de usuario
interaccion en el interfaz de usuariointeraccion en el interfaz de usuario
interaccion en el interfaz de usuario
 
Presentation Studie Deutsch
Presentation Studie DeutschPresentation Studie Deutsch
Presentation Studie Deutsch
 
Norman Neu
Norman NeuNorman Neu
Norman Neu
 
Los perros
Los perrosLos perros
Los perros
 
Filosofia
FilosofiaFilosofia
Filosofia
 
Cmc
CmcCmc
Cmc
 
El aborto
El abortoEl aborto
El aborto
 
96884029 trabajo-ntic-s
96884029 trabajo-ntic-s96884029 trabajo-ntic-s
96884029 trabajo-ntic-s
 
Música e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducciónMúsica e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducción
 
Portafolio de servicios
Portafolio de serviciosPortafolio de servicios
Portafolio de servicios
 
Ebay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - GrundlagenwissenEbay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - Grundlagenwissen
 
Presentation1
Presentation1Presentation1
Presentation1
 
Spanisch Und Wassersportarten Fur Jugendliche In Alicante 2009
Spanisch Und Wassersportarten Fur Jugendliche In Alicante 2009Spanisch Und Wassersportarten Fur Jugendliche In Alicante 2009
Spanisch Und Wassersportarten Fur Jugendliche In Alicante 2009
 
8b edward ricardo herrera muños anderson franco la evolucion de la in...
8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...
8b edward ricardo herrera muños anderson franco la evolucion de la in...
 
Uso del email en la educacion
Uso del email en la educacionUso del email en la educacion
Uso del email en la educacion
 
eStrategy Ausgabe 7 - Leseprobe
eStrategy Ausgabe 7 - LeseprobeeStrategy Ausgabe 7 - Leseprobe
eStrategy Ausgabe 7 - Leseprobe
 
Actividad 1
Actividad 1Actividad 1
Actividad 1
 

Similaire à Best practices im Frontend -Barcamp Mainz 2011

Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
Fabian Lange
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
Philipp Naderer
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Eric Eggert
 

Similaire à Best practices im Frontend -Barcamp Mainz 2011 (20)

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Shopleiter Magazin Nr. 4 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 4 - SEO-, SEM- und eCommerce-TippsShopleiter Magazin Nr. 4 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 4 - SEO-, SEM- und eCommerce-Tipps
 
Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008
 
Frameworkism
FrameworkismFrameworkism
Frameworkism
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 

Plus de Jens Grochtdreis

Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
Jens Grochtdreis
 

Plus de Jens Grochtdreis (13)

A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Lightningtalk Erlangen
Lightningtalk ErlangenLightningtalk Erlangen
Lightningtalk Erlangen
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
 

Best practices im Frontend -Barcamp Mainz 2011