Inhalt total: In der zweiten Themenspezialsendung sprechen Nils Pooker, David Maciejewski und der Macher Dirk Jesse über das CSS-Framework YAML, erklären die Hintergründe und Funktionen, gehen auf Fragen ein und zeigen auf, was man alles mit YAML anstellen kann.

Diese Folge jetzt anhören

Aufnahmeset Technikwürze
In dieser Sendung geht im Fokus um YAML. Das Buch zu YAML, CSS Layouts – Praxislösungen mit YAML 3.0 könnt ihr auch über Amazon (Affiliate-Link) bestellen.
Wenn ihr wissen wollt, wie es auf unserem Screen ausschaut, wenn wir Technikwürze aufnehmen, dann schaut mal bei Flickr vorbei. Dort findet ihr auch eine Beschreibung des Aufnahmesets.

Layout-Frameworks

  • Was sind Frameworks?
    • Abgrenzung von einfachen Layoutvorlagen und Fertigtemplates
    • Zielgruppe: Agenturen, professionelle Webentwickler (und auch Hobbybastler)
  • Weshalb sinnvoll?
    • Beschleunigung von Standardaufgaben
    • Individuelle Schwächen der verschiedenen Browser(generationen)
    • Versionsabhängige CSS-Fähigkeiten der Browser
    • Gemeinsame Sprache bei Arbeit im Team …
  • Begriffe klären:
    • Sinn und Zweck von Grid-Frameworks sind schnelle Ergebnisse in der Anwendung.
    • Sinn und Zweck eines CSS-Frameworks ist eine leistungsfähige Entwicklungsumgebung
  • Bekannte Vertreter …

YAML – Kurzvorstellung

  • Schlagworte:
    • Flexible Layouts (Flexibel = Freie Wahl der Maßeinheiten + Gestaltungsvielfalt)
    • TOP-DOWN-Prinzip (Weglassen, was nicht benötigt wird)
    • Bug-Prävention (IE-Bugs werden präventiv abgefangen, soweit möglich)
    • Barrierefreiheit (Skip-Links, Tabnavigation in Menüs, flexible Layouts)
    • Trennung von Framework- und Nutzer-CSS
  • Online-Dokumentation + Buch
  • Ein paar Worte zur Lizenz von YAML
  • Downloads (YAML-Package | Simple Project)

Erste Schritte

  • Doku lesen !!!
  • Download und Entpacken des Simple-Projects
  • Fertige Projektstruktur (Trennung von Framework- und Nutzer-CSS)
  • Änderungen in …
    • my_layout.html -> Markup
    • css/screen/basemod.css: Screendesign
    • css/screen/content.css: Content

Sinnvolle Anwendung

  • YAML Builder – Visuelle Layouterstellung, abgestimmt aufs Simple-Project
    • Drag & Drop
    • Automatische Code-Generierung

Tiefer einsteigen

  • Bug-Prävention: Ein Segen für Entwickler – mit Grenzen
  • Subtemplates: Die flexiblen Grid-Elemente von YAML

Ein paar Antworten zu allg. Kritikpunkten an Layout-Frameworks

  • Markup
    • DIV-Schachtelung: Bloated Code?
  • CSS
    • CSS Kommentare: Bloated Code?
    • Modulare Stylesheets: HTTP-Requests + schlechte Performance?

Fragen & Antworten

  • Worauf beruht die Flexibilität der YAML-Beispiele?
  • Funktioniert YAML mit drop-down-Menüs?
  • Weiterentwicklung von YAML
    • Wann (in etwa) wird die nächste YAML-Version kommen?
    • Welche Highlights bzw. interessante Features sind vorgesehen?
    • Sind neue Beispiele in der Rubrik „spezial interest“ angedacht?
    • Wie wird der YAML-Builder weiterentwickelt?
  • Weiterentwicklung von “YAML für TYPO3”?
  • Neue Layouttechnik mit CSS-Tabellen?
  • Wie minimiert man bei YAML mit möglichst wenig Zeitaufwand die Größe des HTML-Grundgerüsts sowie der CSS-Dateien?
  • Besteht die Notwendigkeit zum Updates bei fertigen Projekten?
  • CMS-Einbindung
    • Verwendung der fertigen Projekte (z.B. jYAML für Joomla) oder …
    • Einbindung der Ausgaben des YAML-Builders von Hand?
Diese Folge jetzt anhören

Tags: , , , , , , ,

Dieser Beitrag wurde am Montag, 17. November 2008 um 00:00 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von Thomas Weise Thomas Weise
    am 17. November 2008, 10:19 Uhr

    Also ich fand diese “Spielfilmlängen-Sendung” hochinteressant. Danke an euch, wirklich sehr gelungen, hat mir sehr viel gebracht.

  • Avatarbild von hyperkeks hyperkeks
    am 17. November 2008, 10:32 Uhr

    Obwohl ich es noch nie in einem Projekt verwendet habe, halte ich YAML für ein ziemlich großartiges Stück Software.

    Und zur Länge der Sendung – Podcasts können nicht zu lang sein. Im Gegensatz zu Fernsehn und Radio gibt es an MP3-Playern einen Pause-Knopf! ;)

  • Avatarbild von Ralph Ralph
    am 17. November 2008, 20:28 Uhr

    Hallo David
    Bezugnehmend auf Deine Sendung zu YAML von Dirk Jesse kann ich folgendes sagen. Ich forsche, teste und arbeite schon sehr lange mit YAML, bisher zwar leider nur “im stillen Kämmerlein” aber ab Januar 2009 wird das anders. Ich kann zu YAML nur sagen, dass die Arbeit von Dirk Jesse größtes Lob verdient. YAML wird die Grundlage meiner zukünftigen Arbeit sein, denn je mehr man sich mit dem Framework beschäftigt um so mehr lernt man den hohen Stellenwert von YAML schätzen.

    Ich kann jeden ernsthaften Webentwickler nur empfehlen zumindest ein Blick darauf zu werfen, die Arbeit von Dirk Jesse ist es auf alle Fälle Wert. Allen, die “nur mal eben schnell eine Hompage basteln” wollen und YAML nutzen möchten, kann ich sagen lest Euch zuerst die ungewöhnlich umfangreiche Top-Doku durch und entscheidet dann ob Ihr nur eine “Hompage basteln” wollt oder ernsthaftes Webdesign betreiben möchtet.

    Ich bin begeisterter Leser der Bücher von Dirk Jesse und hoffe noch mehr davon zu bekommen.
    Das besondere für mich persönlich… es ist alles in deutsch, es ist alles super ausführlich beschrieben und alles ist verständlich, ausführlich und zusammenhängend stimmig.

    Einfach nur super, kann ich nur sagen.

    MfG
    Ralph

  • Avatarbild von Markus Delbrouck Markus Delbrouck
    am 18. November 2008, 19:20 Uhr

    Der Versionswechsel von 2.5 auf Version 3 hat es nicht leichter gemacht, YAML einzusetzen. Schlussendlich sind für eine Webseite doch erhebliche Modifikationen notwendig. Mal sehen was der Wechsel der Lizens nun bringt.

  • Avatarbild von Dieter Dieter
    am 18. November 2008, 23:05 Uhr

    Hallo David,

    eine sehr informativer Podcast. Herzlichen Dank an Dich, Nils und Dirk dafür.

    Ich habe doch in der Tat es nicht geschafft, den Podcast an einem Stück zu hören. Aber dank der Möglichkeit ihn als mp3-Datei zu speichern und dann an der Stelle weiterzuhören, wo man aufgehört hatte, ist das auch alles kein Problem.

    Macht weiter so.

    Beste Grüße
    Dieter

  • Avatarbild von Dirk Dirk
    am 19. November 2008, 10:09 Uhr

    @Markus

    Wo liegen denn die Schwierigkeiten genau? Du kannst mir auch gern eine Email schreiben, falls die Liste der Sorgen länger ist.

    Gruß
    Dirk

  • Avatarbild von rockpianist rockpianist
    am 19. November 2008, 22:52 Uhr

    Ich bin auf Yaml bei der Lektüre von Little Boxes by Peter Müller gestoßen. Habe mir Anfang des Jahres Dirks Buch bestellt. So richtig konnte ich mich damals mit dem “Tool” nicht anfreunden. Habe das Buch vor drei Wochen bei booklooker zum Verkauf gestellt …
    … und heute wieder herausgenommen.

    Ich werde nach dem motivierenden, ausführlichen und interessanten Podcast einen zweiten Anlauf wagen. Egal, ob ich es hinbekomme oder nicht: – Solch ein Projekt nebenberuflich – und mit Familie – aufzuziehen ist bewundernswert. – Es auch noch kostenlos zur Verfügung zu stellen ebenfalls.

    In meinen Augen wäre eine Kommerzialisierung mit entsprechendem Support für Premiumkunden zumindest eine Überlegung wert und der schrittweise Übergang in einen Teilzeitjob. (jaja, meine Dollarzeichen) ;-)
    Viele Grüße an Dirk aus Radeberg BEI DRESDEN
    rp

  • Avatarbild von Lars Lars
    am 20. November 2008, 10:33 Uhr

    interessantes Thema, aber mir fehlte ein Punkt auf jeden Fall..
    Wer ist die Zielgruppe? Warum soll ich Geld für CSS Frameworks ausgeben?

    Brauche ich YAML..
    .. nur wenn ich CSS nicht beherrsche – oder nicht valide?
    .. auch wenn ich guter Webdev bin, aber zu faul für jedes Projekt CSS von 0 zu schreiben und ein Std-3 Col-Layout brauche, was ich lediglich noch anpassen muss?

    Fungiert YAML als gute CSS Lösung für das, was die meisten früher mit den vorgegebenen Frame-Templates in Frontpage o.ä. gemacht haben!?0

    Aber sonst find ich das sehr schick. Aber ich programmier mir mein CSS lieber selbst :) Oder nutze gegebenenfalls meine eigenen CSS Frameworks :)

    Mich würde eine Folge über PHP Frameworks interessieren. Das Thema reizt mich schon lange, aber ich hatte bisher nicht die Zeit und Muße mich mit dem Thema ausführlich auseinanderzusetzen. Cake / RoR, etc..

    Schönen Dank und nen lieben Gruß aus Bonn,

    Lars

  • Avatarbild von Dirk Dirk
    am 20. November 2008, 12:50 Uhr

    Hallo Lars,

    das Wort “Zielgruppe” fiel im Gespräch nicht explizit, aber wie Nils gleich zu Beginn bemerkt: YAML richtet sich in erster Linie an professionelle Webentwickler. Für Einsteiger ist YAML interessant aufgrund des Aufbaus der Dokumentation. Denn diese entält nicht nur das Wie der Anwendung, sondern auch das Warum – viele CSS Grundlagen werden dabei gleich mit vermittelt.

    Warum Du dafür Geld ausgeben solltest? Nun, musst Du ja nicht. Wie in der Sendung besprochen, kann YAML im privaten und kommerziellen Umfeld durchaus (unter Creative Commons Lizenz) kostenfrei eingesetzt werden. Darüber hinaus steht für Dich einfach die Frage, ob Dir die Erleichterungen, die YAML mitbringt, den einmaligen Obulus einer kommerziellen Lizenz wert sind? Das kannst nur Du selbst beantworten.

    Wer braucht YAML? Gute Frage. Wer CSS nicht beherrscht, kommt mit YAML vermutlich ein ganzes Stück weiter – aber sicher nicht in jedem Fall ans Ziel. Für CSS-erfahrene Nutzer kommt der Vorteil, den Du ansprichst, zum Tragen. Mit wenigen Zeilen CSS lässt sich das Grundlayout bereits in die verschiedensten Layoutformen verwandeln und viele Alltagsaufgaben (der Schritt von 0 bis zum effektiven Arbeiten am Layout) entfällt bzw. verkürzt sich enorm, genauso wie das Bugfixing.

    Insofern ist Dein Vergleich zu den Frontpage-Vorlagen ok, auch wenn die Technik dahinter eine völlig andere ist. YAML stellt das technische Grundgerüst und Handwerkszeug zur Erstellung robuster Webseiten bereit (den Rohbau), der Anwender kümmert sich um die Gestaltung des Rohbaus.

    Viele Grüße
    Dirk

  • Avatarbild von macx macx
    am 20. November 2008, 13:04 Uhr

    @Lars Eine Total-Sendung zum Thema PHP-Frameworks wird es geben. Im Fokus stehen dann wahrscheinlich CakePHP und das Zend Framework

  • Avatarbild von Clemens Clemens
    am 20. November 2008, 13:31 Uhr

    Schöne Sendung, werde YAML auf jeden Fall mal ausprobieren.

    @macx kein CodeIgniter? Da könntest du doch Eric Eggert1 fragen…
    [1] http://yatil.de/Weblog/codeigniter

  • Avatarbild von Torsten Torsten
    am 21. November 2008, 12:59 Uhr

    @Clemens
    sag ich doch :)
    http://technikwuerze.de/podcast/technikwuerze121/#comment20199

  • Avatarbild von Lars Lars
    am 21. November 2008, 14:21 Uhr

    @Dirk
    Wenn ich dich richtig verstehe ist es eine “Arbeitshilfe” oder Vereinfachung für Fortgeschrittene / Profis und eine erste Anleitung – mit Hilfe der Docs – ins Thema CSS?!

    Das die Technik grundverschieden ist, ist mir bewusst ;) Es ging lediglich darum, dass die Screenstruktur per Baukasten bzw. Vorlagen bereits vorhanden ist.

    @macx Das freut mich zu hören :)

    Schöne Grüße,
    Lars Igl

  • Avatarbild von Dirk Dirk
    am 21. November 2008, 18:23 Uhr

    @Lars

    Ja, so kann man es beschreiben.

  • Avatarbild von Roland Roland
    am 23. November 2008, 16:21 Uhr

    Hey!

    Wie wärs mit einem JQuery-Special, ihr dürftet ja alle Ahnung davon haben, ich möcht grad mehr mit AJAX machen, etwas über JQUERY oder allgemein über AJAX-Frameworks wäre echt cool!

    lg
    Roland

  • Avatarbild von macx macx
    am 24. November 2008, 07:56 Uhr

    Hatte ich in der Sendung nicht erwähnt, dass es ein jQuery-Spezial geben wird? Es kommt.

  • Avatarbild von Stefan Nitzsche Stefan Nitzsche
    am 24. November 2008, 13:03 Uhr

    Der Nils muss öfter ran, der macht das gut! :) Eine tolle Folge!

  • Avatarbild von André André
    am 25. November 2008, 23:19 Uhr

    Ich habe in der Vergangenheit immer mal wieder einen verstohlenen Blick auf YAML geworfen – herunter geladen, reingeschaut, nicht auf Anhieb verstanden und wieder gelöscht. Auch wenn ich die Idee hinter YAML großartig finde, habe ich bislang den Einarbeitungsaufwand gescheut und mein CSS manuell entlang bewährter Code-Snippets aus der Vergangenheit aufgebaut. Und ich habe Abstriche bei der Darstellung im IE6 billigend in Kauf genommen.
    Ich arbeite hauptsächlich im Print-Bereich, Webtechniken sind mehr eine nebenberufliche Leidenschaft. Daher gehöre ich natürlich auch nicht zur Kern-Zielgruppe von YAML, den “professionellen Webentwicklern”. Aber die Sendung hat erneut mein Interesse an diesem CSS-Framework geweckt – und diesmal werde ich mir die Zeit nehmen, mich tief in das Thema einzugraben. Eigentlich kann man durch die Nutzung von Frameworks ja nur gewinnen und kaum verlieren; der Aufwand lohnt sich am Ende sicher.

    Danke David und danke Dirk für die sehr ausführliche und interessante Sendung!

    Und da ich einmal dabei bin:

    @Dirk:
    In der aktuellen Folge 124 der Technikwürze sagst Du, dass Du selbst “nicht offiziell Webentwickler” bist. Das macht Deine Arbeit an YAML ja noch um einiges beeindruckender! Ich frage mich, wie man als “nicht offizieller Webentwickler” ein derartiges Framework auf die Beine stellen kann: Auch wenn die Eigenheiten der einzelnen Browser bei der Interpretation von CSS gut dokumentiert sind, stelle ich es mir unglaublich schwer vor, allgemein gültige, cross-browser-fähige CSS-Regeln aufzustellen. In der Softwareentwicklung gibt es den Leitspruch “eat your own dog food”, was wohl bedeutet, dass man die eigenen Produkte selbst im Alltag einsetzt. Wenn Du nun kein Webentwickler bist, wirst Du ja YAML nicht jeden Tag produktiv einsetzen (können)… wie testest Du dann das Framework auf “Stabilität” in allen möglichen Umgebungen?? Basiert die Weiterentwicklung vorrangig auf Feedback “offizieller Webentwickler”, die YAML einsetzen? Auf jeden Fall: Ganz ganz großen Respekt!

    Beste Grüße von einem Mit-Sachsen aus Leipzig

  • Avatarbild von MacKP MacKP
    am 25. November 2008, 23:23 Uhr

    Die Folge war wirklich sehr schön und Informativ.
    Durch diesen Podcast bin ich erst auf diese Seite gestoßen :-)
    Ich nutze Yaml schon seit einer Weile und finde es einfach genial für alle Webdesigner. Ich brauch mir wirklich kaum noch um Bugs von Browsern zu kümmern (nur ein kleines Prob: IE6 und sliding Effekte bei mootools funktionieren nicht richtig bei Listen Elementen… Das liegt an Quirks Mode in den der IE6 gesetzt wird.).
    Wirklich gut ist auch das Buch: Endlich mal alle Bugs gesammelt gut erläutert und mit schönen Mitteln bereinigt.
    Die Sendung habe ich schon mehreren Leuten empfohlen, die noch nicht mit Yaml gearbeitet haben als schnelleinstieg.

    Auch sehr schön einfach -> Integration von Yaml in verschiedene CMS. Momentan nutze ich vorwiegend Typolight (wäre auch mal eine Sendug wert!) und da nutze ich auch Yaml, obwohl das CMS ein eigenes Framework nutzt.

    Weiter so und vielen Dank ;-)

  • Avatarbild von Dirk Dirk
    am 26. November 2008, 15:26 Uhr

    @André

    die gesamte Entwicklung läuft neben-/freiberuflich. Natürlich nutze ich YAML auch selbst produktiv auf meinen eigenen Webseiten und 2..3 Projekten, die ich im Laufe eines Jahres erstelle. Diese dienen dann auch meist dem Experimentieren mit neuen Funktionen.

    Für die Stabilitätstests dient ein großer Parkour an Browsern, den ich in einer VM installiert vorhalte in Verbindung mit den Beispiellayouts als Testumgebung, die den Funktionsumfang weitgehend abdecken und in YAML 3.1 (was ja bald kommt) diesbezüglich noch erweitert wird.

    Auf Nutzerfeedback bin ich natürlich ganz besonders angewiesen, vor allem was die Bugprävention angeht. Die Vielfalt der Anwendungssituationen ist für mich unersetzlich und zum Glück hilft hier die Community mit Bugreports seit Jahren mit, sodass YAML diesen hohen Grad an Reife und Stabilität erreichen konnte.

    Was die Weiterentwicklung betrifft, halte ich enge Kontakte zu professionellen YAML-Anwendern, um die praxistauglichkeit der Entwicklungen zu gewährleisten. Daneben steht mein Feedreader immer gut im Futter, sodass ich mit aktuellen Entwicklungen im Bereich HTML, CSS & JavaScript recht gut versorgt bin.

    Viele Grüße
    Dirk

  • Avatarbild von Philipp Philipp
    am 29. November 2008, 17:03 Uhr

    Hallo,
    tolle Sache die ihr da macht habe nur ein paar Anregungen:
    1. Dirk Jesse war immer recht leise im Vergleich zum “Rest”
    2. Das Tippen und klicken beim Sprechen stört schon vllt. einfach mal das Mic. ausschalten wenn man nicht spricht
    3. Verbindungsabbrüche waren auch nicht so schön vllt. gibt es da auch eine andere Lösung wie eine Telefonleitung?

    Naja ich fand es Trotzdem sehr Interessant und Informativ weiter so!
    Mfg Philipp

  • Avatarbild von Matt Matt
    am 3. Dezember 2008, 21:38 Uhr

    Philipp nimmt mir die Worte aus dem Munde ;-)

    Ich höre Podcasts auf meiner täglichen Pendelroute im Auto und Dirk war teilweise richtig schlecht zu verstehen, vor allem dann, wenn David auf seiner lauten Tastatur losgetrommelt hat. Vielleicht sollten wir mal für ein Alu-Keyboard sammeln.

    Ansonsten super Sendung. Ich hab gestern gleich mal das noch ungelesene YAML-Buch der 1. Auflage wieder aus dem Schrank geholt. Ich muss mich doch mal damit beschäftigen, hab heute auch ein Projekt bekommen, dass dafür prädestiniert wäre, aber es eilt (wie immer) und der beteiligte Kollege war irgendwie nicht so empfänglich, als ich heute meinte, da könnte man doch auch mit Framework und so…

  • Avatarbild von macx macx
    am 4. Dezember 2008, 07:35 Uhr

    Hmmm… wie oft darf ich eigentlich noch erwähnen, dass das nicht meine Tastatur ist? Denn ich habe die Alu-Tastatur, eben weil man sie nicht hört. :D

  • Avatarbild von Matt Matt
    am 4. Dezember 2008, 09:14 Uhr

    Muss ich dann beim überfliegen der Kommentare überlesen haben :D

    Für wen dürfen wir dann sammeln?

  • Avatarbild von Damien Damien
    am 22. Dezember 2008, 14:37 Uhr

    Nachdem ich erst im Laufe der letzten Woche Zuhörer geworden bin, kann ich erst jetzt meinen Kommentar abgeben:)

    Also ich habe YAML im Sommer entdeckt und nutze es seither begeistert.

    Mich würde es interessieren ob es auch Alternativen gibt? Also ein direktes “Konkurrenzprodukt” mit ähnlicher Funktionalität.

    Viele Grüße aus Österreich

  • Avatarbild von Theo Theo
    am 14. Januar 2009, 09:06 Uhr

    Hallo zusammen
    Kompliment für diese Sendung! Ich war begeistert.

    Ich habe mir YAML vor ca. drei Monaten mal runtergeladen und zuerst (!) die Doku studiert (sehr umfangreich). Beim Studium ist mir aufgefallen, dass hier sehr viele Probleme (wenn nicht alle), die ich bisher mit den verschiedenen Browsern hatte, aufgeführt und erklärt sind. Ich hatte sehr viele Aha-Erlebnisse. Der Lerneffekt (nur durch das Lesen) war enorm. Danke!

    Für unser neuestes Projekt wollte ich nun YAML einsetzen. Ich habe ein Example genommen und angepasst. Leider ging es nicht so, wie ich es wünschte.
    Vor drei Tagen habe ich nun diese Sendung gehört und siehe da: einige Tipps und Tricks aus der Sendung waren extrem wertvoll!
    Gestern habe ich nun beim Projekt nochmals von vorne begonnen und schaffte es innerhalb von 3 (!) Stunden das Design komplett (also eigentlich “nur” die Vermassung, Crossbrowser-Checks, Specials, …) aufzubauen. Nun muss “nur” noch unser Grafiker die Bilder liefern und das Farbkonzept bekannt geben. Dann steht das Desgin definitiv.

    Also ich bin begeistert. Ich erspare mir mit dem YAML Framework viel Arbeit (vor allem in der Browserunabhängigkeit) bei der Fehlersuche (weil es eigentlich keine mehr gibt ;-)).
    Ich möchte auch das in der Sendung erwähnte Firefox-Plugin Firebug allen empfehlen. Auch allen CSS Neulingen. Denn dort kann man sehr schön sehen, wie die Kaskade in CSS funktioniert und man kann auch kleine Änderungen “on the fly” testen und deren Auswirkung anschauen.

    Besten Dank für die tolle Arbeit an Dirk!

    Theo

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.