Frontend Best Practices
Die drei wichtigsten             Best PracticesNachdenken             Recherchieren            Experimentieren http://goo....
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 wirddas 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                                  ...
Mal ohne Semantik
Mal mit Semantik
Das falsche Element!
Versteckspielhttp://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                     ers...
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übelthttp://www.flickr.com/photos/be...
Barrierefreiheit als integrales Elementhttp://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 Sem...
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...
http://jsfiddle.net/Flocke/VCSEB/
neue semantische Elemente
An die Konsequenzen                          denken               ‣ HTML5-Seiten funktionieren in alten Browsern          ...
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öt...
Welche Lücke füllt CSS3?
neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen       Verringerung des        Grafikeinsatzes            ...
Transparenz     mit rgba()                   runde Ecken                         Verläufe (gradient)Transitions           ...
Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind...
Die NachteileEs gibt keine!
Oder doch einen kleinen
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler                    Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilderhttp://dummyimage.com/                 http://lorempixel.com/
Dummybilderhttp://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                                ...
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
Nächste SlideShare
Wird geladen in …5
×

Best practices im Frontend -Barcamp Mainz 2011

1.344 Aufrufe

Veröffentlicht am

Kompakte

0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.344
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Best practices im Frontend -Barcamp Mainz 2011

  1. 1. Frontend Best Practices
  2. 2. Die drei wichtigsten Best PracticesNachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  3. 3. Semantik
  4. 4. Mangelnde Professionalität erzeugt in anderen Bereichen Spott
  5. 5. http://blog.zdf.de/zdfdasblog/2011/10/31/55-milliarden-zu-viele-nullen/
  6. 6. In unserer Profession wirddas kritiklos hingenommen
  7. 7. Warum keine Überschrift?http://www.faz.net/
  8. 8. Warum keine Überschrift?http://www.sueddeutsche.de/
  9. 9. Warum keine Überschrift?http://www.stern.de/
  10. 10. 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.
  11. 11. Mal ohne Semantik
  12. 12. Mal mit Semantik
  13. 13. Das falsche Element!
  14. 14. Versteckspielhttp://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
  15. 15. http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
  16. 16. Über Barrieren nachdenken
  17. 17. 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/
  18. 18. mehr ... mehr ... mehr ... mehr ...
  19. 19. Konkretes Beispiel
  20. 20. Lösung dafür: WAI-ARIA
  21. 21.  Kleiner Bildschirm Keine Maus Keine Popups
  22. 22. Paradigmenwandel: Barrierefreiheit als nachträglicher Einfall, drangedübelthttp://www.flickr.com/photos/beelzebozo/1503756/
  23. 23. Barrierefreiheit als integrales Elementhttp://www.flickr.com/photos/pixeldiva/2109688648/
  24. 24. http://www.flickr.com/photos/johnmcbride1109/2875819859/
  25. 25. Farbkontraste
  26. 26. http://www.ctrl-verlust.net/
  27. 27. https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
  28. 28. http://snurl.com/t58gj
  29. 29. Fokus
  30. 30. So nicht!
  31. 31. Den Fokus nicht vergessen!
  32. 32. Nicht in Tools und Techniken zu sehr verlieben
  33. 33. ‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.‣ Nicht alles machen, weil es gerade möglich ist.‣ Immer an die Semantik denken.
  34. 34. http://benthebodyguard.com/
  35. 35. http://jsfiddle.net/Flocke/e6KDU/
  36. 36. moderne Selektoren
  37. 37. ‣ 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.
  38. 38. http://jsfiddle.net/Flocke/VCSEB/
  39. 39. neue semantische Elemente
  40. 40. 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/
  41. 41. Mit Javascript
  42. 42. Ohne Javascript
  43. 43. Was konnten wir bisher mit CSS machen?
  44. 44. ‣ 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
  45. 45. Welche Lücke füllt CSS3?
  46. 46. neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
  47. 47. Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten
  48. 48. 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.
  49. 49. Die NachteileEs gibt keine!
  50. 50. Oder doch einen kleinen
  51. 51. Realistische Dummy-Inhalte
  52. 52. Navigation
  53. 53. Vorsicht bei horizontaler Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
  54. 54. Dummybilderhttp://dummyimage.com/ http://lorempixel.com/
  55. 55. Dummybilderhttp://placekitten.com/
  56. 56. http://www.blindtextgenerator.de/
  57. 57. http://bueltge.de/html-ipsum/
  58. 58. http://geekandpoke.typepad.com/geekandpoke/2009/07/geeks.html
  59. 59. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×