Als PDF, PPTX herunterladen
Hochgeladen vonJens Grochtdreis
Rapid Prototyping mit YAML4
Das Dokument beschreibt die Verwendung von YAML 4 für Rapid Prototyping in der Frontend-Entwicklung, betont die Vorteile von modularen und flexiblen Layouts sowie die Trennung von Breiten- und Floatdefinitionen für eine einfachere Erstellung von Grids. Es enthält auch Empfehlungen zur Verwendung von klaren Namenskonventionen und die Bedeutung von Accessibility-Tools. Jens Grochtdreis, der seit 1999 im Webbereich tätig ist, bietet weitere Ressourcen und Hinweise zur Integration von YAML in bestehende Projekte.
Rapid Prototyping mit YAML4
- 1. Jens Grochtdreis YAML 4- Rapid Prototyping mit HTML und CSS
- 2. ‣ Frontendentwickler ‣ seit1999 Arbeit im und fürs Web ‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung ‣ twitter.com/Flocke
- 3. Photoshop ist nichtfür Webdesign geeignet.
- 4. Es war esnie!
- 5.
- 6.
- 7. Das passt dazunicht
- 8. Rapid Prototyping machteine Zusammenarbeit mit Designern und Konzeptern einfacher. http://www.flickr.com/photos/artrock2006/4177475479/
- 9.
- 10. YAML definiert Layout,kein Design
- 11. Design-Dateien sind zur Demonstrationund zur eigenen Bequemlichkeit.
- 12. Diese sind nützlichfür Rapid Prototyping.
- 13.
- 14.
- 15. 96 Zeilen CSSfür ... ‣ unfallfreie Spaltenlayouts ‣ Grids, die beliebig erweitert werden können ‣ Accessibility-Tools ‣ Formularbaukasten ‣ Basis Print-Styles ‣ alles für px, em und % ‣ Grid sind schon responsive! ‣ HTML5-ready
- 16. 45 Zeilen IE-CSS ‣Alle Layouts funktionieren bis einschließlich IE 5! ‣ Nicht mehr um fiese Bugs kümmern. ‣ HTML5-Elemente werden mit berücksichtigt.
- 18. base: 4,5 KBminifiziert ie-hacks: 1,9 KB minifiziert
- 19.
- 20. 1 Die Klassen haben alle einen Namespace: ym-
- 21. 2 Es gibt zwei wichtige Bausteine
- 22. Die Kerndateien in zweiVarianten Produktionsdateien
- 23. 3 Layoutbestandteile werden gedoppelt. Wegendes alten Boxmodells!
- 24. Die zwei Container BeiNutzung des border-box-Modells oder fixen Layouts sind die inneren Container verzichtbar!
- 25. 4 Es gibt eine klare Nomenklatur
- 26. Nomenklatur der Module ‣ym-wrapper: Wrapper-Modul ‣ ym-column: Column-Modul ‣ ym-grid: Grid-Modul ‣ ym-form: Formular-Modul
- 27. Nomenklatur der inneren Container ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣ ym-fbox: Formular-Modul
- 28. Nomenklatur der Formulare ‣ .ym-fbox-text ‣ .ym-fbox-select ‣ .ym-fbox-check ‣ .ym-fbox-button
- 29.
- 32.
- 33. YAML4 YAML3
- 34. ‣ Die Breitendefinitionist von den restlichen Regeln getrennt. ‣ Dadurch können schnell neue Grids erstellt werden. ‣ Neue Grids werden nur an einer Stelle definiert. ‣ Breite und Floatrichtung sind getrennte Klassen. ‣ Mehrere Klassen auf einem Element, dafür einfach erweiterbar!
- 36.
- 37.
- 38. Ausrichtung der Formularelemente durch Zuweisung einer Klasse
- 39.
- 40.
- 41.
- 42.
- 43. Fertige Buttons ‣ Zeichenwerden mittels „content“ als ASCII eingebracht. ‣ Dadurch sind sie skalierbar ‣ Der IE zeigt sie erst ab Version 8. ‣ Ältere IE zeigen den Button ohne Zeichen.
- 44.
- 45.
- 46.
- 47.
- 48. Use the Doc,Luke!
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. Das reicht allesnicht?!
- 63.
- 64. Aus alten Projekten sammeln.
- 65. Von anderen Projekten bedienen
- 66.
- 67.
- 68. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
- 69.
- 71. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669