Downloaden Sie, um offline zu lesen
Hochgeladen vonJens Grochtdreis
Best practices im Frontend -Barcamp Mainz 2011
Das Dokument beschreibt wichtige Best Practices für die Frontend-Entwicklung, darunter die Notwendigkeit, Semantik zu berücksichtigen und Barrieren abzubauen, um die Zugänglichkeit zu verbessern. Zudem werden moderne Technologien wie CSS3 und HTML5 thematisiert, die eine effizientere und ansprechendere Gestaltung ermöglichen. Die Präsentation betont auch die Bedeutung der Nutzerinteraktion und des sinnvollen Einsatzes von Techniken und Tools.
Weitere ähnliche Inhalte
Ähnlich wie Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
- 1.
- 2. Die drei wichtigsten Best Practices Nachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
- 3.
- 4. Mangelnde Professionalität erzeugt in anderen Bereichen Spott
- 5.
- 6. In unserer Professionwird das kritiklos hingenommen
- 7.
- 8.
- 9.
- 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.
- 12.
- 13.
- 14.
- 15.
- 16.
- 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. mehr ... mehr ... mehr ... mehr ...
- 19.
- 20.
- 21. Kleiner Bildschirm Keine Maus Keine Popups
- 22. Paradigmenwandel: Barrierefreiheit als nachträglicher Einfall, drangedübelt http://www.flickr.com/photos/beelzebozo/1503756/
- 23. Barrierefreiheit als integralesElement http://www.flickr.com/photos/pixeldiva/2109688648/
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Den Fokus nichtvergessen!
- 32. Nicht in Toolsund Techniken zu sehr verlieben
- 33. ‣ Nach sinnvollenEinsatzzwecken von Techniken suchen. ‣ Nicht alles machen, weil es gerade möglich ist. ‣ Immer an die Semantik denken.
- 34.
- 35.
- 36.
- 37. ‣ Können ältereIE (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.
- 39.
- 40.
- 41. 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/
- 42.
- 43.
- 46. Was konnten wirbisher mit CSS machen?
- 47. ‣ 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
- 48. Welche Lücke fülltCSS3?
- 49. neue Layoutmodelle mehr Möglichkeitenmit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
- 50. Transparenz mit rgba() runde Ecken Verläufe (gradient) Transitions media-queries calc() mehrere Spalten
- 51. Die Vorteile ‣ WenigerSchmuckbilder 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.
- 52. Die Nachteile Es gibtkeine!
- 53. Oder doch einenkleinen
- 54.
- 55.
- 56. Vorsicht bei horizontaler Navigation http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
- 57. Dummybilder http://dummyimage.com/ http://lorempixel.com/
- 58.
- 59.
- 60.
- 61.
- 62. 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/