Best practices im Frontend -Barcamp Mainz 2011
-
Upload
jens-grochtdreis -
Category
Documents
-
view
995 -
download
0
description
Transcript of Best practices im Frontend -Barcamp Mainz 2011
![Page 1: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/1.jpg)
Frontend Best Practices
![Page 2: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/2.jpg)
Die drei wichtigsten Best Practices
Nachdenken Recherchieren
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experimentieren
http://goo.gl/LohPq
![Page 3: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/3.jpg)
Semantik
![Page 4: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/4.jpg)
Mangelnde Professionalität erzeugt in anderen Bereichen Spott
![Page 5: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/5.jpg)
http://blog.zdf.de/zdfdasblog/2011/10/31/55-milliarden-zu-viele-nullen/
![Page 6: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/6.jpg)
In unserer Profession wird das kritiklos hingenommen
![Page 8: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/8.jpg)
Warum keine Überschrift?
http://www.sueddeutsche.de/
![Page 10: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/10.jpg)
Ein Slider - Grobskizze
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
![Page 11: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/11.jpg)
Mal ohne Semantik
![Page 12: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/12.jpg)
Mal mit Semantik
![Page 13: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/13.jpg)
Das falsche Element!
![Page 14: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/14.jpg)
Versteckspiel
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
![Page 15: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/15.jpg)
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
![Page 16: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/16.jpg)
Über Barrieren nachdenken
![Page 17: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/17.jpg)
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/
![Page 18: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/18.jpg)
mehr ...
mehr ...
mehr ...
mehr ...
![Page 19: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/19.jpg)
Konkretes Beispiel
![Page 20: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/20.jpg)
Lösung dafür: WAI-ARIA
![Page 21: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/21.jpg)
Kleiner Bildschirm
Keine Maus
Keine Popups
![Page 22: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/22.jpg)
Paradigmenwandel: Barrierefreiheit alsnachträglicher Einfall, drangedübelt
http://www.flickr.com/photos/beelzebozo/1503756/
![Page 23: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/23.jpg)
Barrierefreiheit als integrales Element
http://www.flickr.com/photos/pixeldiva/2109688648/
![Page 24: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/24.jpg)
http://www.flickr.com/photos/johnmcbride1109/2875819859/
![Page 25: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/25.jpg)
Farbkontraste
![Page 27: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/27.jpg)
https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
![Page 29: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/29.jpg)
Fokus
![Page 30: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/30.jpg)
So nicht!
![Page 31: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/31.jpg)
Den Fokus nicht vergessen!
![Page 32: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/32.jpg)
Nicht in Tools und Techniken zu sehr verlieben
![Page 33: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/33.jpg)
‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.
‣ Nicht alles machen, weil es gerade möglich ist.
‣ Immer an die Semantik denken.
![Page 35: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/35.jpg)
http://jsfiddle.net/Flocke/e6KDU/
![Page 36: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/36.jpg)
moderne Selektoren
![Page 37: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/37.jpg)
‣ 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.
![Page 38: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/38.jpg)
![Page 39: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/39.jpg)
http://jsfiddle.net/Flocke/VCSEB/
![Page 40: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/40.jpg)
neue semantische Elemente
![Page 41: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/41.jpg)
An die Konsequenzen denken
http://code.google.com/p/html5shim/
‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.
http://www.modernizr.com/
![Page 42: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/42.jpg)
Mit Javascript
![Page 43: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/43.jpg)
Ohne Javascript
![Page 44: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/44.jpg)
![Page 45: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/45.jpg)
![Page 46: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/46.jpg)
Was konnten wir bisher mit CSS machen?
![Page 47: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/47.jpg)
‣ 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
![Page 48: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/48.jpg)
Welche Lücke füllt CSS3?
![Page 49: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/49.jpg)
Animationen
Verringerung des Grafikeinsatzes
neue Layoutmodelle
mehr Möglichkeiten mit Rahmen und Hintergründen
neue Selektoren
![Page 50: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/50.jpg)
runde Ecken
Verläufe (gradient)
Transitions
mehrere Spaltencalc()
Transparenz mit rgba()
media-queries
![Page 51: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/51.jpg)
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.
![Page 52: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/52.jpg)
Die Nachteile
Es gibt keine!
![Page 53: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/53.jpg)
Oder doch einen kleinen
![Page 54: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/54.jpg)
Realistische Dummy-Inhalte
![Page 55: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/55.jpg)
Navigation
![Page 56: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/56.jpg)
Vorsicht bei horizontaler Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
![Page 57: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/57.jpg)
Dummybilder
http://dummyimage.com/ http://lorempixel.com/
![Page 59: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/59.jpg)
http://www.blindtextgenerator.de/
![Page 61: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/61.jpg)
http://geekandpoke.typepad.com/geekandpoke/2009/07/geeks.html
![Page 62: Best practices im Frontend -Barcamp Mainz 2011](https://reader036.fdocuments.net/reader036/viewer/2022070316/555e2593d8b42a6a4c8b4e9b/html5/thumbnails/62.jpg)
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://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/