Rapid Prototyping mit YAML4

869 Aufrufe

Veröffentlicht am

Vortrag auf der Webtech 2012. Die Nomenklatur von YAML wird erklärt sowie die vielen Addons und die helfende Dokumentation genauer vorgestellt. Alles als Basis für das später folgende Livecoding. Damit konnte ich zeigen, dass man mit YAML schnell zu einem testbaren Ergebnis, einem Prototypen, kommen kann. Der kann dann die Basis weiterer Designiterationen sein und später in den produktiven Code übergehen.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
869
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Rapid Prototyping mit YAML4

  1. 1. Jens GrochtdreisYAML 4 - Rapid Prototypingmit HTML und CSS
  2. 2. ‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung‣ twitter.com/Flocke
  3. 3. Photoshop ist nicht für Webdesign geeignet.
  4. 4. Es war es nie!
  5. 5. http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
  6. 6. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
  7. 7. Das passt dazu nicht
  8. 8. Rapid Prototyping macht eine Zusammenarbeit mit Designern und Konzeptern einfacher.http://www.flickr.com/photos/artrock2006/4177475479/
  9. 9. http://www.yaml.de/
  10. 10. YAML definiert Layout, kein Design
  11. 11. Design-Dateien sind zurDemonstration und zureigenen Bequemlichkeit.
  12. 12. Diese sind nützlich für Rapid Prototyping.
  13. 13. YAML ist gross
  14. 14. Quatsch!
  15. 15. 96 Zeilen CSS fü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. 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.
  17. 17. base: 4,5 KB minifiziertie-hacks: 1,9 KB minifiziert
  18. 18. Klare Regeln lernen
  19. 19. 1 Die Klassen haben alle einen Namespace: ym-
  20. 20. 2 Es gibt zwei wichtige Bausteine
  21. 21. Die Kerndateienin zwei Varianten Produktionsdateien
  22. 22. 3Layoutbestandteile werdengedoppelt. Wegen des alten Boxmodells!
  23. 23. Die zwei ContainerBei Nutzung des border-box-Modells oder fixenLayouts sind die inneren Container verzichtbar!
  24. 24. 4 Es gibt eine klare Nomenklatur
  25. 25. Nomenklatur der Module‣ ym-wrapper: Wrapper-Modul‣ ym-column: Column-Modul‣ ym-grid: Grid-Modul‣ ym-form: Formular-Modul
  26. 26. Nomenklatur der inneren Container ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣ ym-fbox: Formular-Modul
  27. 27. Nomenklatur der Formulare ‣ .ym-fbox-text ‣ .ym-fbox-select ‣ .ym-fbox-check ‣ .ym-fbox-button
  28. 28. Das Column-Modul
  29. 29. Das Grid-Modul
  30. 30. YAML4 YAML3
  31. 31. ‣ Die Breitendefinition ist 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!
  32. 32. Individuelles Zweier-Grid
  33. 33. Formulare
  34. 34. Ausrichtung derFormularelemente durch Zuweisung einer Klasse
  35. 35. Default
  36. 36. .ym-full
  37. 37. .ym-columnar
  38. 38. Viele Goodies
  39. 39. Fertige Buttons‣ Zeichen werden mittels „content“ als ASCII eingebracht.‣ Dadurch sind sie skalierbar‣ Der IE zeigt sie erst ab Version 8.‣ Ältere IE zeigen den Button ohne Zeichen.
  40. 40. Zwei Navigationsvorlagen
  41. 41. Basis-Typographie
  42. 42. Accessible Tabs
  43. 43. Mikroformate
  44. 44. Use the Doc, Luke!
  45. 45. Einfache Konfigurationhttp://www.yaml.de/docs/index.html
  46. 46. Kopieren erwünscht!
  47. 47. Quick-Start Demos
  48. 48. Grab the code
  49. 49. Grab the code
  50. 50. Grab the code
  51. 51. Grab the code
  52. 52. Grab the code
  53. 53. Grab the code
  54. 54. Grab the code
  55. 55. Grab the code
  56. 56. Grab the code
  57. 57. Grab the code
  58. 58. Das reicht alles nicht?!
  59. 59. Eigene Elemente hinzufügen.
  60. 60. Aus alten Projekten sammeln.
  61. 61. Von anderen Projekten bedienen
  62. 62. http://foundation.zurb.com/
  63. 63. http://twitter.github.com/bootstrap/
  64. 64. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
  65. 65. http://bootsnipp.com/
  66. 66. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.dehttp://slideshare.net/Flocke669

×