• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rapid Prototyping mit YAML4
 

Rapid Prototyping mit YAML4

on

  • 687 views

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. ...

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.

Statistics

Views

Total Views
687
Views on SlideShare
687
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rapid Prototyping mit YAML4 Rapid Prototyping mit YAML4 Presentation Transcript

    • Jens GrochtdreisYAML 4 - Rapid Prototypingmit HTML und CSS
    • ‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung‣ twitter.com/Flocke
    • Photoshop ist nicht für Webdesign geeignet.
    • Es war es nie!
    • http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
    • http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
    • Das passt dazu nicht
    • Rapid Prototyping macht eine Zusammenarbeit mit Designern und Konzeptern einfacher.http://www.flickr.com/photos/artrock2006/4177475479/
    • http://www.yaml.de/
    • YAML definiert Layout, kein Design
    • Design-Dateien sind zurDemonstration und zureigenen Bequemlichkeit.
    • Diese sind nützlich für Rapid Prototyping.
    • YAML ist gross
    • Quatsch!
    • 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
    • 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.
    • base: 4,5 KB minifiziertie-hacks: 1,9 KB minifiziert
    • Klare Regeln lernen
    • 1 Die Klassen haben alle einen Namespace: ym-
    • 2 Es gibt zwei wichtige Bausteine
    • Die Kerndateienin zwei Varianten Produktionsdateien
    • 3Layoutbestandteile werdengedoppelt. Wegen des alten Boxmodells!
    • Die zwei ContainerBei Nutzung des border-box-Modells oder fixenLayouts sind die inneren Container verzichtbar!
    • 4 Es gibt eine klare Nomenklatur
    • Nomenklatur der Module‣ ym-wrapper: Wrapper-Modul‣ ym-column: Column-Modul‣ ym-grid: Grid-Modul‣ ym-form: Formular-Modul
    • Nomenklatur der inneren Container ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣ ym-fbox: Formular-Modul
    • Nomenklatur der Formulare ‣ .ym-fbox-text ‣ .ym-fbox-select ‣ .ym-fbox-check ‣ .ym-fbox-button
    • Das Column-Modul
    • Das Grid-Modul
    • YAML4 YAML3
    • ‣ 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!
    • Individuelles Zweier-Grid
    • Formulare
    • Ausrichtung derFormularelemente durch Zuweisung einer Klasse
    • Default
    • .ym-full
    • .ym-columnar
    • Viele Goodies
    • 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.
    • Zwei Navigationsvorlagen
    • Basis-Typographie
    • Accessible Tabs
    • Mikroformate
    • Use the Doc, Luke!
    • Einfache Konfigurationhttp://www.yaml.de/docs/index.html
    • Kopieren erwünscht!
    • Quick-Start Demos
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Grab the code
    • Das reicht alles nicht?!
    • Eigene Elemente hinzufügen.
    • Aus alten Projekten sammeln.
    • Von anderen Projekten bedienen
    • http://foundation.zurb.com/
    • http://twitter.github.com/bootstrap/
    • http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
    • http://bootsnipp.com/
    • Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.dehttp://slideshare.net/Flocke669