Best practices im Frontend -Barcamp Mainz 2011

1,474 views

Published on

Kompakte

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,474
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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/

×