YAML total Technikwürze 123

Herzlich willkommen zur Technikwürze 123, der zweiten Sendung, um ein Spezialthema, nämlich wir reden heute über YAML und dazu begrüße ich den Macher Dirk Jesse. Hallo Dirk.

Hallo David.

Und zum ersten Mal dabei den Nils Poger. Hi David.

Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast. Von und mit David Maciejewski.

Genau, euch ein herzliches Willkommen. Ihr hattet euch, mehrfach schon mal beschwert oder vielmehr den Gedanken angeregt: „Mensch, mach doch mal 'n bisschen Spezialsendung." Und jetzt haben wir die zweite Spezialsendung hintereinander. Es geht heute um YAML. Aber bevor wir wirklich ins Thema einsteigen, möchte ich dich, Nils, mal bitten, dich kurz vorzustellen, denn du bist das erste Mal in der Technikwürze. Das stimmt, da freue ich mich auch drüber. Ja, mein Name ist Nils Pooker.

Ich bin freier Webdesigner, lebe hier in Schleswig-Holstein. Das heißt, für viele ist das schon Südskandinavien, in einer Kleinstadt namens Preetz. Das liegt zwischen Kiel und Lübeck. Mal so für die Südländer ist es auch egal. Für die ist es sowieso egal, also ganz weit oben. Und,, ja, bin hier Einzelkämpfer, mach also alles von der, von der Kundenakquise bis zur Ausführung, Konzeptionierung, Planung, alles, was dazu gehört. Und auch Mitglied bei den Webkrauts.

Mitglied bei den Webkrauts, stolzes Mitglied bei den Webkrauts, ganz genau. Und, ja. Sagst du deinen Blog noch mal kurz? Mein Blog beziehungsweise meine Website ist, www pokerart.de, wie mein Nachname, wie das Glücksspiel mit Doppel-O und das A-R-T dahinter kommt daher, dass ich aus dem Kunstbereich komme ursprünglich. Also pokerart.de slash WordPress. Da ist dann auch mein Blog zu finden, was ich lange nicht gepflegt habe, weil ich 'n Fachbuch geschrieben hab, was jetzt in Kürze rauskommt.

Das wird jetzt aber auch mal Zeit, dass da auch mal wieder was passiert. Ich glaub, da sind die Webkrauts-Artikel von 2007 noch mal drin, aber ist ja auch nicht schlecht. Nee, kann man ja noch mal gut nachlesen. Okay, ja, herzlich willkommen. Wie gesagt, es geht heute um YAML. Einige Hörer unter euch werden sicherlich mit YAML bisher noch nichts, zu tun haben beziehungsweise können sie damit nichts anfangen.

Andere von euch, werden, sehr viel mit YAML zu tun haben beziehungsweise wissen, worum es geht. Wir machen euch heute, also wir machen einen Rundumblick sozusagen um das Thema YAML oder überhaupt: Was sind Layout-Frameworks? Und, da gehen wir zuerst mal drauf ein.

Das Thema.

Also bevor wir, wie gesagt, mit YAML direkt anfangen, Dirk, möchte ich dich mal bitten, einfach zu sagen, in welche Richtung geht YAML, ohne jetzt ins Detail zu gehen, beziehungsweise was sind Frameworks denn im Allgemeinen? Wozu sind die gut?

Ja. Frameworks sind in erster Linie dazu da, Alltagsaufgaben, zu übernehmen und, sagen wir mal so, die Ungereimtheiten, jetzt speziell bei den Layout-Frameworks, der Browser ein bisschen im Hintergrund zu beseitigen und dem Anwender, der Layouts erstellen möchte, die Arbeit einfach zu erleichtern, cross-browser funktionierende Layouts zu erstellen.

Sehr schön, ja.

Als, ja, als Abgrenzung ein bisschen zu dem, also was man früher kannte, wenn man sich vor drei, vier Jahren, durchs Netz bewegt hat und gesucht hat nach einem Basislayout, was man verwendet hat, dann waren das in der Regel Layoutvorlagen. Die haben sich dadurch ausgezeichnet, dass, beispielsweise ein Ein-, ein Zwei-, ein Dreispalter irgendwo zur Verfügung gestellt wurde, der in verschiedenen Browsern funktionierte.

Das war meistens so weit noch dokumentiert und dann gab's, entweder zum Download ein kleines ZIP, wo eben das HTML und das CSS drin war. In der Regel war es dann einfach nur, wirklich fünf, sechs Zeilen CSS, um die wichtigsten Positionierungen hinzukriegen und, der leere Ma-- das leere Markup für, für die einfache Seite und das blieb mehr oder weniger ohne jegliche Dokumentation, sodass man, wenn man damit sich auskannte, konnte man damit arbeiten.

Wenn man keinen Durch hatte, dann war das in der Regel was, was nicht viel weitergeholfen hat.

Das haben auch so einige Webentwickler für sich gemacht, dass die wirklich gesagt haben: „Also ich, ich mach mir hier so 'ne kleine Minibasis, dass ich das nicht jedes Mal abtippen muss." Und das haben auch, viele veröffentlicht. Zum Beispiel Gerald van Hagen, kann ich mich dran erinnern, hatte auch mal so 'n, Miniding veröffentlicht, auf seinem Blog, wo, ganz einfach so die, die Basis-CSS-Sachen, die man immer reinmacht und das HTML quasi raushaut.

Also das ist sozusagen, summa summarum die kleinste Einheit eines Frameworks, wenn man's denn so nennen will. Also eines Fertigtemplates schon eher, ne?

Jein, nee. Das würde ich wirklich als maximal irgendwie, weiß nicht, noch nicht mal 'ne, 'ne Vorlage für die normale Arbeit-

Layoutvorlage dann, ja. Mhm.

Layoutvorlage ist für mich im Prinzip, ich, ich hab mich hingesetzt, hab mir mal 'n Dreispalter zusammengebaut, der ist irgendwie entstanden und den, diesen Arbeitsstand speicher ich quasi ab, um ihn fürs nächste Mal benutzen, zu benutzen. Und ein halbes Jahr später setze ich mich noch mal hin und ich muss beispielsweise einen Zweispalter mit einem Teaser bauen und fang wieder bei null an, speicher den ab und leg den mir für die nächste Arbeit wieder irgendwo in die Ecke.

Vermutlich ist es dann meistens eben nicht so und das ist eben bei den vielen Layoutvorlagen, selbst wenn sie von denselben Leuten entwickelt wurden, merkt man's, - Dass die, dass die beiden Codes, die man da erstellt hat, über eine gewisse Zeitspanne nicht wirklich zusammenpassen. Also man kann den einen ohne Weiteres, mit dem anderen CSS benutzen. Da, da klemmt's immer wieder. Das ist, man fängt immer wieder von vorn an.

Was jetzt, ein Framework ist eigentlich dazu da, dass das, dass ich eine Basis habe, mit der ich immer wieder arbeiten kann. Mhm. Ne, die also mir eine gewisse Vielfalt auf irgendeine Weise bindet. Was jetzt, was Gerrit beispielsweise gebaut hat, das hilft sicherlich auch beim Arbeiten, aber das ist ja mehr, da ist eine Verzeichnisstruktur angelegt, da ist, da liegen sicherlich, da liegt ein Reset-Style Sheet schon zur Benutzung frei drin, da ist jQuery schon mit dabei.

Das hat aber für das Layout an sich nichts zu tun. Das ist einfach nur, wenn ich ein neues Projekt anfange, dann, gliedere ich mein Projekt versc-- in, in verschiedene Bereiche und ich lege eine Verzeichnisstruktur an und dort liegen einfach schon die wichtigsten Dateien drin. Denn das eigentliche CSS und das HTML, ist in diesen Fällen in der Regel leer. Da ist wirklich nicht viel drin. Und darum geht's ja eigentlich.

Vielleicht, vielleicht, auch von, von meiner Seite aus dazu. Man macht es im Normalfall so, dass, man sich dieses Konzept, dass man also ein, ein, sich ein Layout zusammengeschustert hat, das man auch wieder immer, das man immer wieder verwendet. Ich glaube, das macht jeder. Gerade bei, den Quick-and-dirty-Geschichten ist das halt,, das einzig Sinnvolle.

Und, genauso hat man einzelne kleine Snippets, kleine Codebeispiele, die man immer wieder verwendet für verschiedene Absatzklassen oder, verschiedene IDs. Und, das ist dann so, wenn man, wenn man dann allerdings sagt, wir machen ja ein, ein ganz rudimentäres Projekt, wie Gerrit das gemacht hat, das ist im Grunde genommen dieses Beispiel. Damit kann man dann immer wieder arbeiten, aber es ist nur eine, es ist nur eine Basis, es ist eine Grundlage.

Und ich glaube, es ist ganz wichtig, auch mal, verschiedene Sachen einfach mal auseinanderzuhalten, und zwar nicht nur innerhalb der Frameworks. Wir haben ja auch die Baukastensysteme bei den Providern mal als Beispiel, ja, so ein 1&1-Homepage-Baukasten. Es funktioniert im Grunde genommen auch nicht anders. Das sind, das sind Templates. Dann haben wir solche Editoren, ich kann als Webuser, als Mac-User jetzt nur, nur mal so Sachen wie iWeb oder RapidWeaver mal anbringen.

Die haben verschiedene Templates und Themen, die man verwenden kann. Und, und dann wird es immer individueller und immer,, auch, auch, komplizierter so. Dann hat man dann schon Grid Frameworks wie YUI oder, andere Lösungen, auf die Dirk, glaube ich, noch eingeht. Und YAML ist dann eben schon eine Geschichte, die noch mehr in Richtung Entwicklung geht. Das heißt also auch, die Kontrolle und die Bearbeitung per Hand Quote.

Ich glaube, das ist auch ganz wichtig, mal diese einzelnen Bestandteile zu sehen. Es gibt ja nicht nur einmal, das Baukastensystem und das Handgedengelte. Es gibt auch ganz, ganz viele Sachen dazwischen. Und das führt ja auch zu diesem, zu diesem Problem der, der genauen Verifizierung. Was ist jetzt YAML und was ist überhaupt ein CSS-Framework?

Mhm. Vielleicht kann ich dazu was sagen. Ich habe vor anderthalb Monaten einen Vortrag in Erlangen dazu gehalten. Den habe ich jetzt hier noch mal verlinkt, der wird ja dann mit dabei sein und habe versucht, ein bisschen aufzupriesen, diese Benennung. Also das, wenn man, wenn man im Netz sucht, dann findet man eigentlich immer sofort mittlerweile das Schlagwort CSS Frameworks und da ist irgendwo bei der englischsprachigen Wikipedia stehen, glaube ich, jetzt vierzehn, fünfzehn Einträge drin.

Wenn man verschiedene Blogartikel findet, die sich mit Frameworks beschäftigen, die untersuchen auch immer gleich zehn Stück. Aber es ist immer alles CSS Framework und im Prinzip gibt es, lässt sich schon, unterteilen in zwei vollkommen verschiedene Ansätze. Das eine und, die habe ich e-- ich bezeichne sie als Grid, als Grid Frameworks. Da fällt so was wie Blueprint CSS, das 960 Grid System und andere runter. Die sind wirklich dafür da, möglichst schnell in der Anwendung zum Ziel zu kommen.

Dort werden Klassen für ein vordefiniertes Grid, im CSS, in, in dem Framework festgelegt. Beispielsweise bei Blueprint ist es, glaube ich, ein Vierundzwanzig-Spalten-Raster oder so was.

Bei 960 GS ist es ein Zwölf- und ein Sechzehn-Spalter, die da einfach, die sind fest vorgegeben und man baut jetzt einfach sein HTML und fügt den einzelnen HTML-Elementen die Klassennamen zu, um zu sagen: „Du bist jetzt ein Container, der ist ein so eine Gridspalte breit, zwei oder drei.“ Und das fängt man einfach von links oben nach rechts unten an oder arbeitet sich von links oben nach rechts unten durch. Und, wenn man unten angekommen ist, ist das Layout im Prinzip fertig.

Und man baut dann, ja, das ist ein, das ist ein reiner, reines Baukastensystem. Das ist eben das riesige, der riesige Vorteil daran. Du bist viel zu schnell. Man muss sich, als, wenn man das Layout erst mal zusammenbauen will, diese ganz grobe Struktur muss man im Prinzip von CSS so gut wie nichts kennen. Man muss einfach nur wissen: Wie sieht dieses Grid aus?

Ich kann mir auf dem Papier eine Skizze machen mit diesen vierundzwanzig Spalten und Zwischenräumen, kann sagen, über wie viele von diesen Gridspalten soll ein einzelner Container laufen, suche mir die entsprechenden Klassenbezeichnung raus und trage die, übergebe die dem Element als Klassennamen und dann bin ich fertig. Und dann, so, so kann ich mich eben zeilen- und spaltenweise vorhangeln und wenn ich unten angekommen bin, dann steht mein Layout.

Hat sehr viel, von der Art und Weise, wie man, wie man Tabellen baut und ist deswegen ganz vielen Leuten relativ gut vertraut, die mit CSS, Erstellung sicherlich vielleicht auch ihre Schwierigkeiten haben. Der Riesenvorteil ist aber wirklich die Geschwindigkeit, in der das abläuft.

Ja, und den anderen ist es eben ein Graus. Das wird ja auch, da-das hat ja dazu geführt, dass, der Begriff Frame, CSS Frameworks auch so einen bitteren Beigeschmack gekriegt hat durch, durch die Problematik des, des, des, des Overheads im, im HTML und, der nicht wirklich vorhandenen Individualisierbarkeit, und der nicht wirklich vorhandenen Flexibilität, nämlich all die Sachen, die Webstandards ja ausmachen. Ne?

Also es wäre so ein bisschen konterkariert, diese Idee von Trennung, der, der Trennung von Inhalt und Layout. Das ist das Problem.

Ja. Ja, man, sagen wir mal so: Es wird dem, man unterwirft sich diesem Raster und das Raster ist vorgegeben.

Ja, genau.

Und wenn man damit leben kann, dem unterwirft man sich. Man gewinnt sehr viel an Geschwindigkeit, zulasten dessen, dass ich beispielsweise, diese Trennung habe zwischen, Struktur und Layout, HTML und CSS.

Denn so wie es eben bei der Tabelle ist, wenn ich eine einzelne Zelle einer, einer Tabelle an einen anderen Fleck auf dem Layout setzen will, dann muss ich in diesem Tabellenkonstrukt sehr, sehr viel umbauen, weil ich sowohl in der Zeile, in der ich es rausnehme, als auch in die Zeile, in die ich es reinfüge, Veränderungen vornehmen muss.

Und wenn ich es irgendwo oben in einer anderen Stelle reinfüge, dann ist automatisch wieder da ein Element zu viel, was ich wahrscheinlich wieder umschichten muss. Und so setzt sich das fort. Das ist sehr viel Umarbeit. Und das ist eigentlich ja, was man mit CSS nicht wollte, sondern man hat eigentlich gesagt, wir haben HTML wie Struktur.

Dort legen wir uns Inhalte an und strukturieren sie beispielsweise noch mit, mit Div-Elementen, dass man sie grob in den Header, in den Footer, in ein paar Spalten und vielleicht noch sonst noch was einteilen und sagen dann mit CSS, wo diese Elemente auf dem Bildschirm erscheinen sollen. Sicherlich ist auch das nicht vollken, vollkommen voneinander trennbar.

Also so sauber ist das eben dann, ist auch CSS oder so, so mächtig ist CSS nicht, aber es, es gibt doch sehr viele mehr Möglichkeiten, wenn man sich daran hält, Element auf einer Seite umzupositionieren, ohne jetzt jedes Mal direkt in den Markup eingreifen zu müssen. Und das ist eben das, was ein CSS Framework ausmacht vom Gedanken her, dass ich, keinen festgenagelten oder, oder vollständig festgenagelten HTML-Quelltext habe, aber zumindest eine, Struktur mit wiederkehrenden Bausteinen.

Bei Jamel sind's eben diese typischen Elemente, die hat, die jedes Layout hat. Wir haben eine Kopfzeile, wir haben einen Inhaltsbereich mit ein paar Spalten, wir haben eine Fußzeile. Wir brauchen ein Element, was diese ganzen zusammenfasst, wenn's ein einheitliches Layout mit einer einheitlichen Breite sein soll. So, und dann schicke ich CSS drüber und sage, wo jedes Element hin soll, wie groß es sein soll.

Vielleicht noch mal gerade den Unterschied-

Das Wissen darüber, dass ich eben, also da, da bin ich gezwungen, ich mache die Gestaltung mit CSS und da muss ich ein bisschen was über CSS wissen.

Ja. Sollte man sowieso. Vielleicht erklären wir noch mal ganz kurz den Unterschied genau zwischen den angesprochenen Gil, Grid Frameworks, und den CSS Frameworks. Gibt's da einen großen Unterschied oder ist das jetzt wirklich nur die Kategorie, die, die einen sind ein bisschen enger geschnürt und, CSS Frameworks wie Jaml sind ein bisschen flexibler, bisschen leistungsfähiger. Wo ist da jetzt genau der Unterschied für diejenigen, die jetzt Framework gerade zum ersten Mal hören heute?

Ja, vielleicht sage ich mal was dazu. Einfach mal den, den Vergleich: Ich habe auch lange überlegt, wie, wie kann man das hier darstellen? Vor allen Dingen für diejenigen, die Jaml noch nicht kennen oder noch nicht gut genug kennen. Also du gehörst ja genauso dann zur Zielgruppe dieses, dieser, dieser Sendung, David. Genau, ich werde ihn nachher noch mal anhören. Genau, kannst dir da noch, kannst dir noch, noch mal reinziehen in aller Ruhe.

So ein Grid Framework, ist, ist, ja, das, das kann man so ungefähr vergleichen, mit, mit einem, mit einem Theme für WordPress. Ja, also da ist es ja auch so: Du kannst dir also ein Thema runterziehen für dein WordPress-System und, kannst es deinen Bedürfnissen entsprechend ein bisschen angleichen.

Aber wenn du ein kom-- aus diesem Thema, was du jetzt hast, aus diesem Layout ein komplett neues Ding stricken willst und kennst dich nicht so gut aus mit, den Innereien von WordPress, dann kommst du ganz schnell an irgendwelche Grenzen und denkst: „Was ist denn das für ein dämliches System?" So. Dann könntest du nämlich gleich anfangen und dein eigenes Thema von null zusammenstricken.

Und, Jaml, geht erst mal nicht davon aus, dass es also wirklich nur ein oder zwei, feste Themen gibt, es keine fertigen Lösungen, keine fertigen Template-Lösungen, auch keine fertigen Themen. Das zeigt sich ja auch an den, an den Fragen in den Foren, wo gesagt wird: „Kann ich mit, kann ich mit Jaml also auch ein Dropdown-Menü realisieren?" Das ist ja gar nicht drin in den Beispielen. Ja, haben Dirk und ich gestern noch drüber gesprochen.

Das ist, das ist dann halt typisch, weil es dann eben das Missverständnis gibt, dass Jaml ist eine Fertiglösung. Das ist es nicht. Im Gegenteil. Jaml ist im Grunde genommen dafür da, dass man professionell – und ich nehme das Wort absichtlich in den Mund – dass man professionell, ein, eine Website konzeptionieren und planen und auch umsetzen kann. Und zwar es geht darum, effektiv zu arbeiten und sich auf das Wesentliche zu konzentrieren.

Und das Wesentliche sind zum Beispiel nicht die, die Bugs und,, irgendwelche, irgendwelche Parser-Bugs oder irgendwelche anderen Probleme, die, die, etwas ältere Diva aus Webment, nämlich der IE sechs eben dort uns Webentwicklern jeweils immer bereitet. So, und, bei den Grid Frameworks hast du die Möglichkeit, verschiedene Lösungen zu machen, aber du bist eingeschnürt.

Sobald du da rangehen willst und möchtest etwas tiefer in die Materie gehen und möchtest eine Individu-Individualisierbarkeit haben, eine Individualisierung von irgendwelchen Geschichten, dann ist es problematisch. Das hast du eben-- dieses Problem gibt es bei YAML eben nicht. YAML ist da flexibel.

Das ist sogar dafür da, dass es-- YAML verlangt von dir eigentlich, dass du auch, im Quellcode, Bescheid weißt, dass du dich mit CSS auskennst, dass du dich mit XHTML beziehungsweise HTML auskennst, dass du die Syntax kennst und auch die Semantik beherrscht. Wenn das nicht so ist, dann ist YAML eigentlich auch nicht das richtige, das richtige Konzept. Das ist ein Konzept für Profis, nicht für Anfänger. Okay.

Ja, als kurzen Vergleich: Im Prinzip in-- bei einem Grid Framework kannst du dir das vorstellen, du hast eine große Kiste mit bunten Bausteinen, die alle unterschiedlich groß sind, die aber irgendwie aufeinander abgestimmt sind, dass sie zusammenpassen. Das heißt, du kannst immer wieder daraus was Neues bauen und die kannst du jetzt beliebig miteinander kombinieren. Aber es sind Bausteine.

Es wird niemand auf die Idee kommen, wenn ich mein-meiner kleinen Tochter so eine Bausti-Baustein, -steinkiste hinlege, die wird die nicht anfangen zu zersägen.

Wer weiß. Wer weiß? Genau. Noch nicht.

Im Moment, im Moment würde sie dran lecken. Und, sagen wir mal so, du hast-- du kannst dich mit diesen Bausteinen austoben, aber die sind halt, wenn, wenn du halt eckige hast, dann sind die eben für immer und ewig eckig und das ist nicht eigentlich der Sinn, jetzt diese einzelnen, an diesen einzelnen Bausteinen groß rumzufummeln, weil dann dauert's eben lange, ehe du wieder was hast, was zusammenpasst. Sondern das ist wirklich nehmen und so verwenden, wie es ist.

Und YAML, und oder beziehungsweise überhaupt CSS-Frameworks haben eigentlich den Ansatz: Ich präsentiere dir jetzt hier ein Regelwerk, innerhalb dessen kannst du dich austoben. Und wenn du in den Regeln, wenn du dich an diese Regeln hältst, dann passiert dir auch nichts im weitesten Sinn. Das heißt, dann spielen auch alle Browser mit. Ja?

Aber- -du musst dich nicht auf irgendwelche Abschwände, an irgendwelche, Größen oder innerhalb eines gewissen kannst du dich als, als Anwe-- als Layoutersteller frei bewegen. Das ist, ne, das verlangt, m-m-mehr eigene Kompetenz. Dass ich-- ich muss wissen, was ich tue. Ne? Ich muss das Regelwerk zuerst mal gelesen haben und ich muss es verstanden haben.

Das ist sicher-- deswegen ist die Einstiegshürde in ein CSS-Framework in der Regel höher und deswegen steht bei YAML als Erstes immer Doku lesen und einige Leute sagen eben, das ist Mist. Ich will ein Framework, damit ich es anwenden kann, nicht, dass ich es lesen muss. Aber es geht eigentlich anders. Also ich muss dieses Regelwerk ja irgendwie erst mal verstanden oder kommunizieren und es muss-- man muss es verstehen können.

Na ja, im Grunde genommen musst du ja auch HTML und CSS lernen beziehungsweise es verstehen können, damit du's richtig einsetzen kannst. Also von daher, gilt diese Vorstellung von wegen ich, ich will's nicht lesen, sondern direkt anwenden, ja nicht unbedingt, ja. Und, w-was ihr schon gut erklärt habt, ist, dass es eben, 'ne Leis-- also YAML ist eine leistungsfähige Entwicklungsumgebung und von daher, als solche zu verstehen.

Und wie gesagt, erst Doku lesen und dann kann man's richtig gut einsetzen, denk ich, ne?

Also dass es sich an Einsteiger richtet, das ist sicherlich auch, zu großen Teilen richtig, denn dafür hat YAML eine sehr umfangreiche Dokumentation. Die ist einfach daraus entstanden, dass, YAML auch im Prinzip mit dem gewachsen ist, wie sich mein CSS-Wissen gesteigert hat in den letzten Jahren. Das war einfach, das ist ein Hobbyprojekt entstanden und natürlich auch wie es ist anzuwenden, sondern warum funktioniert es so und warum solltest du das auch so machen.

Und das macht es für Einsteiger sicherlich hilfreich. Ich denke auch, es ist halbwegs verständlich geschrieben, um eben auch Einsteigern den, den Zugang zu ermöglichen. Und gleichzeitig liegen, liegen eben eine ganze Menge Beispiele dabei, an denen man sich, auch wenn man's, noch keine großen Erfahrungen damit gesammelt hat, indem man sich einfach langhangeln kann und dann Stück für Stück ertasten, was denn noch so alles geht.

Genau, es gibt ja auch diese zwei Arten von, von Lernen sozusagen. Also die einen, bevor sie irgendein HTML- oder CSS-, Codefragment sich anschauen, die lesen komplett erst mal die Doku und, setzen sich dann ran. Dann gibt es natürlich auch die anderen, die vielleicht erst mal diese Codebeispiele, ohne dass sie die Doku lesen, einfach reinsetzen und versuchen damit, zu spielen und lesen sich dann dazu die Doku durch.

Und, YAML, du hast es gesagt, in der Dokumentation bietet eben beider, beiden Gruppen diese Möglichkeit, da einen guten Einstieg zu finden. Das Problem ist, glaube ich, dass die, das zum Abschluss dazu, das Problem ist, glaube ich, dass die, die Anfänger, die mit YAML arbeiten möchten, weil sie glauben, dort eine ganz schnelle Lösung zu bekommen, die dann standardkonform ist, dann, plötzlich merken, dass ganz schnell die Grenzen da sind. Das ist das Thema.

Also die CSS-Kenntnisse sollten da sein. Und auch von meiner Seite aus kann ich nur sagen: Lest die Dokumentation. Es gibt ja auch mittlerweile in zweiter Auflage, das Buch dazu. - Das ist nicht, und das hat nicht umsonst mehr als zwanzig Seiten, ne. Das hat auch nicht hundert Seiten, sondern 'n paar hundert. Und das ist es auch, das, das hat seinen Grund, ne. Da sind keine Bilder drin oder es besteht auch nicht nur aus Screenshots, sondern es ist sehr umfangreich und es lohnt sich, es zu lesen.

Und die Gefahr besteht halt da, dass der Anfänger dieses, dieses, dieses Konzept nimmt und es so behandelt wie eine Template-Lösung oder ein fertiges Thema aus irgend'nem Baukastensystem aus'm Web. Und das ist es eben nicht. Mhm. Okay, dann denk ich, kommen wir zum zweiten Teil der Sendung, nämlich zusammenfassend zu der YAML-Kurzvorstellung beziehungsweise dann später zu den ersten Schritten mit YAML. Bitte Dirk, YAML, Kurzvorstellung. Du hast 'n bisschen was erzählt.

Auf jeden Fall sollte man die Dokumentation lesen. Wir haben auch gesagt, warum oder wer da, schnell einsteigen kann. Aber wie sieht's denn eigentlich so mit der, mit der Lizenz aus? Oder, oder dein Einstieg in, in YAML sozusagen.

Ja, ich würd mal mit den, mit den, mit den groben Schlagworten anfangen.

Gern, mhm.

Und zwar stände da als Erstes die flexiblen Layouts. Das war eigentlich das Anliegen, das Hauptanliegen bei der Entwicklung von YAML, dass es mir darum ging, verschiedene Layoutmöglichkeiten mit einem Grund-, zugrunde liegenden Konzept erstellen zu können. Also ob ich nun 'n fixes Layout, 'n flexibles oder 'n elastisches oder 'n fluides baue, das sollte, wenn möglich, irgendwo immer wieder ineinander überführbar sein, um eben schnell Änderungen vornehmen zu können.

Und das ist das Hauptaugenmerk, was hinter der ganzen Entwicklung liegt. Dann war ein weiterer Punkt, dass ich mir, dass ich das eben nicht mag, immer wieder alles neu schreiben zu müssen, auch diesen selbst, den Header von 'nem HTML-Dokument immer wieder aufsetzen zu müssen, weil ich 'n Mensch bin, der regelmäßig Fehler macht und das vergi... wieder vergisst. Deswegen hab ich YAML so angesetzt, dass es, auf dem Top-down-Prinzip basiert.

Man fängt also nicht immer wieder bei null an, sondern man auf das HTML bezogen, es gibt für die Standardanwendung auch einen Standard-Markup, den, der ist einfach da und ich nehme mir daraus die Elemente, die ich brauche, beziehungsweise ich lasse sie drin und alles, was ich nicht benötige im aktuellen Layoutentwurf, das schmeiß ich raus. Und nach demselben Prinzip, funktioniert das CSS von YAML.

Es stellt in der Grundvariante 'n dreispaltiges Layout dar und auf der Basis fange ich an, als, als Nutzer des Frameworks, mein eigenen Layoutvorstellungen umzusetzen, indem ich, Elemente ausblende, umpositioniere, vergrößere, verkleinere, Randabstände festlege, Farben, Grafiken und so was einbaue.

Und ich habe aber immer wieder den Fallback auf eine funktionierende Grundvariante, auf dieses funktionierenden Grundspalter, der mir einfach nicht kaputtgehen kann, weil es bei YAML diese Trennung gibt, dass es 'n Basis-Style-Style-Sheet gibt, was erst mal für die browserübergreifende Funktionalität sorgt und die Nutzereingaben, das Nutzer-CSS ist komplett getrennt davon.

Mhm. Sehr schön.

Der dritte Teil ist das, was ich an YAML sehr liebe und was ich ehrlich gesagt bei vielen anderen CSS Framework oder C, überhaupt Layout Frameworks vermisse und eigentlich sollten das alle haben, ist diese, was, ich nenne es 'ne Bug-Prävention. Es ist vielfach so, dass ich, grade der Internet Explorer, er hat zwar viele Bugs, aber die sind grade für die Sechser-Version extrem gut auch dokumentiert. Und, es treten viele Bugs nur in ganz bestimmten Anwendungsfällen auf.

Und wenn man die kennt, dann ist es auch im Prinzip kein Problem, sie vor, von vornherein zu fixen. Beispielsweise, Listen generell ihre Hintergrundfarben und Hintergrundgrafiken verlieren bei einzelnen Elementen, wenn sie keine relative Positionierung mitbringen. Das ist aber grade, 'ne Eigenschaft, die ist so gut wie nie störend, also kann ich sie von vornherein schon mal definieren.

Oh, jetzt bist du kurz weg. Nils, du bist noch da? Ja, ich bin noch da, mhm. Dirk ist grade weg. Dirk ist noch da. Ah, da ist er wieder. Ja.

Ich hab die ganze Zeit ins Leere gequatscht?

Nein, wir haben's gehört. Nein, nein. Nur so circa fünf bis zehn Sekunden maximal.

Das heißt, die Bug-Prävention war noch mit drin?

Die hat man noch mit drin, genau.

Gut. Ja, so weit eben zu den, zu den Zielen, was, was, was damit umgesetzt werden sollte. Ansonsten ja zu der Lizenz. YAML wird unter 'ner Creative-Commons-Lizenz, veröffentlicht, die es erlaubt, das System kostenfrei komplett zu verwenden, sowohl für private Webseiten als auch für kommerzielle Webseiten. Einzige Randbedingung ist die Rückverlinkung zu YAML selbst und das kann entweder geschehen in der Fußzeile des Layouts oder

Na?

Also auf der Seite dann irgendwo nur in einem Impressum.

Na, wir haben 'ne kleine technische Störung, in Richtung Dirk. Ich fasse es für-- Dirk, ich hör dich jetzt wieder, aber ich fasse es noch mal kurz zusammen. Die zwei Möglichkeiten gibt es: Entweder man packt es in den Footer, also die Rückverlinkung zu YAML, oder du sagtest es grade, es reicht auch wirklich, im Impressum, wenn da steht, "Wir benutzen YAML".

Ganz genau. Noch ich bin wieder da, ja?

Genau, mhm.

So. Als Alternative dazu, weil es eben auch seit, jetzt mittlerweile zwei Jahren, im Agenturumfeld, sehr beliebt ist. Da ist eben immer das Problem, dass 'ne Agentur jederzeit sagt: „Na ja, meine Kunden, die wollen auch diesen einen Link nicht.“, da gibt es zwei kommerzielle Modelle, wo ich einfach sage, da über eine Einmalzahlung, gibt's dann 'ne lebenslange Lizenz für lebenslange Updates für Yaml, die eben einmal mit entweder fünfzig oder hundert Euro zu Buche schlägt.

Ist das denn pro Webseite, pro Agentur oder wie verhält sich das?

Das ist einmal 'ne Projektlizenz, die mit fünfzig Euro dabei ist bei, zum Nettopreis. Das ist wirklich dann an eine, quasi an einen, an ein Projekt gebunden, an eine Webseite. Und die generelle Lizenz gilt für beliebig viele Projekte und wird dann quasi auf eine Person oder auf eine Agentur ausgestellt.

Mhm. Sehr schön.

Und damit kann man dann einfach beliebige viele Sachen umsetzen für sich selbst, für seine Kunden, kann von mir aus Fertigtemplates, Fertiglayouts erstellen und die in seinem eigenen Webshop verkaufen, und ja.

Ist auf jeden Fall eine schöne Geschichte. Also für diejenigen, die jetzt den Link nicht unbedingt da haben wollen, weil die Kunden das eventuell nicht sehen wollen. Ich finde, im, im Projektumfeld beziehungsweise also die Lizenzierung, ist das wirklich, wirklich kein Budget, wo man den Kunden extra fragen müsste. Also das, das würde ich direkt so von der Agentur aus mit einplanen. Das ist jetzt wirklich kein Geld, wo man was investieren müsste.

Richtig. Das ist trotzdem sicherlich, was, was, ich will nicht sagen ungewöhnlich, aber sagen wir so, wenn man sich die anderen Frameworks anguckt, dann ist es in der Regel, sind diese anderen in der Regel irgendwie als GPL-Lizenz, freigegeben. Das kommt zum Teil, für mich kommt es einfach daher, ich bin hauptberuflich in einer ganz anderen Sparte tätig.

Ich bin Bauingenieur und für mich ist das wirklich aus einem Hobbyprojekt entstanden und, hat natürlich aufgrund des Supports auch einen entsprechenden, bedeutenden entsprechenden Aufwand, eben nachdem ich von meiner Hauptarbeit nach Hause komme. Und sagen wir so, für mich ist es kein Projekt, was ich online stelle und sage, ich, ich bekomme einfach die Reputation davon und, und akquiriere damit Aufträge für die, für die Erstellung von Webseiten.

Und in der Folge ist das für mich quasi mein Obolus, um weiterhin Spaß dran zu haben.

Mhm. Zu Recht. Das sehe ich auch so. Ja, das ist also wirklich hundert Euro netto, für eine lebenslange Lizenz. Das ist im Grunde genommen, wenn man es genau auf den Blecher legt, für die Arbeit, die man hat, für die ständigen Updates. Yaml wird weiterentwickelt und, also es gibt noch den Yaml Builder, auf den sind wir noch gar nicht eingegangen, das kommt noch. Da hängt ja auch eine Menge Arbeit dran und von daher ist das also wirklich, mehr als günstig. Okay.

Wie sieht's denn mit den Downloads aus von Yaml selbst?

Ja, da sind wir jetzt eigentlich kurz vor dem nächsten Schritt schon, um jetzt in die Einzelheiten zu gehen. Also es gibt einerseits, das ist das große Paket, das ist das Yaml Download Package. Dort ist, dort sind die eigentlichen Yaml-Dateien drin.

Dort liegen auch einige Hilfsdateien drin, um beispielsweise mit dem Dreamweaver zu arbeiten, wenn man statische HTML-Seiten erstellt, da die Dreamweaver-interne Ans-Ansicht von, CSS-Webseiten nicht sonderlich fehlerfrei ist, sind da also zwei Hilfsdateien drin, glaube ich, für den Internet, für den Dreamweaver sieben und acht, um ihm dort etwas auf die Sprünge zu helfen, damit er mit, dem CSS von Yaml klarkommt.

Und es ist ein recht umfangreicher Beispielordner drin, in dem, ich hab's jetzt nicht genau im Kopf, aber deutlich über zwanzig Beispiele, glaube ich, drin sein dürften, wo eben verschiedene grundlegende Variationsmöglichkeiten mal gezeigt sind. Immer wieder an demselben Standardlayout. Da geht's wirklich prinzipiell nur darum, was ist so alles vom Grunde her möglich. So, und das Zweite ist, das Simple Project.

Das ist eine abgespeckte Variante, die eine einzige HTML-Datei enthält, und zwar den Standardquelltext von Yaml. Das Yaml-Verzeichnis selbst mit allen seinen Dateien, damit alle Bausteine, die man eventuell benötigen könnte, auch da sind, wenn man sie denn benutzen möchte.

Und, das CSS-Verzeichnis, in dem, die Screen-Layout, für den Bildschirm sowie die CSS-Dateien für die, die Dateien, reduziert aufs Nötigste, in 'nen, 'nen Yaml gepackt in 'ne Verzeichnisstruktur, mit der man sofort losarbeiten kann.

Also ein Quick Starter sozusagen. Ich lad mir das runter, wenn ich jetzt direkt anfangen will und kenne mich mit Yaml aus, dann, das quasi runtergeladen und, ich sag mal jetzt in Anführungszeichen „installiert“ und schon habe ich quasi, den Grundbaustein schon da und kann direkt mit meiner Arbeit, beginnen, die einen Webentwickler auszeichnet. Das heißt, eigene Grafiken und so weiter einbauen und Navigation und so weiter und so fort.

Ganz genau. Im, im großen Download Package, es liegt alle, liegt alles beispielsweise in, in dem Yaml-Ordner noch mal drin. Da liegt also wirklich dieses HTML-Template als, als Vorlage, als Draft drin und auch viele andere Dateien als Vorlage für die Nutzung, da YAML aber mit verknüpften CSS-Dateien,, arbeitet. Also ich hab eigentlich 'n zentrales Stylesheet, aus dem raus ich erst alle weiteren importiere.

Steht eben in der Dokumentation, die projek-- wie man sein Projekt organisiert, ist jedem ja freigestellt, sodass man sich, wenn man sich diese da eigenen Dateien erst mal irgendwohin kopiert, man erst sowohl im HTML die Verlinkung dieses zentralen Stylesheets wieder aktualisieren muss, auch als auch i-i-innerhalb dieses Stylesheets, die relativen Pfade zu den einzelnen CSS-Bausteinen jedes Mal wieder neu anlegen müsste.

Und das macht natürlich für den Einstieg 'n bisschen Aufwand und deswegen gibt's eben dieses Simple Project, dass es alles im Prinzip schon fertig ist. Man sieht an, man hat sofort 'ne Seite, die funktioniert und kann sich da erarbeiten und durchsehen.

Ja, und jetzt mal die Anwenderstimme: Ich benutze nur das Simple Project, ausschließlich. Das große, Paket nehm ich gar nicht mehr. Ich verwende das Simple Project in Verbindung mit dem YAML Builder und ich weiß jetzt nicht, wie weit wir sind, ob wir darauf nicht auch an dieser Stelle wohl mal eingehen sollten. Ich glaub, da kommen wir noch später drauf ein.

Eine Sache, die wir noch erwähnen sollten in der YAML-Kurzvorstellung: Es gibt wie gesagt die Online-Dokumentation, die wir schon paarmal erwähnt haben, linkt dann auf technikboerse.de. Aber es gibt natürlich auch, und das haben wir nur ganz kurz erwähnt, ein Buch zu YAML für diejenigen, die noch tiefer in die Materie einsteigen wollen. Wolltest du dazu noch kurz was sagen, Dirk?

Ich kann, ja.

Du musst natürlich nicht.

Ich hatt's in der Liste hier gar nicht drin, weil ich eigentlich, soll ja keine Werbetour werden.

Ja, ist es doch sowieso. Nein. Dafür sorg ich dann ja. Nee.

Ja. Das Buch, enthält sicherlich einer, einigersei, einerseits in den Kapiteln vier und fünf, noch 'n etwas tieferes, tieferer gehende Erläuterung, wie YAML aufgebaut ist und warum YAML so aufgebaut ist und wie die einzelnen Elemente, die entweder im CSS als Klassen oder IDs schon definiert sind beziehungsweise die man im, im, im Web gut findet, wie ich denke, dass sie anzuwenden sind.

Das Buch hat aber ganz paar Kapitel mehr und da geht es wirklich drum, als, so, als ich in den letzten drei Jahren, so wie ich CSS gelernt hab, hat mich das eigentlich immer sehr gestört, dass man in vielen Tutorials wunderbar erklärt bekommen hat, wie es in Standard-Conform-Browsern alles so funktioniert die Welt. Es hat mir, es sagt einem aber in der Regel an vielen Stellen niemand, was passiert, wenn man diese Konstrukte, die man da erstellt, auf den Internet Explorer loslässt.

Und deswegen hab ich mir einfach gewünscht, dass das mal jemand zusammenpackt.

Und da es das bis dahin noch nicht gab, hab ich mich einfach nur ir-irgendwann selber daran versucht, und hab in diesem Buch, in diesem Buch sind viele Sachen, wie man, Layouts erstellt, von 'nem einfachen, von den Positionierungen her, dass wenn man mit, mit der Position-Eigenschaft arbeitet, wie Floats funktionieren, wie man Floats einschließt, diese ganzen Sachen, prinzipiell erklärt, wie es letzten Endes in allen Browsern dann funktioniert, damit man wirklich am Ende auch mal zum Ziel kommt.

Und wenn wir schon bei allen Browsern sind, ja, Thema IE sechs noch mal: Es gibt viele CSS-Bücher und es gibt viele tolle CSS-Bücher und da werden die, die Bugs und die Probleme mit, mit dem IE so am Rande irgendwo am Ende der Kapitel kurz erwähnt oder kurz aufgelistet.

Für jeden, der sich auch intensiv mal damit auseinandersetzen will – es ist ja nicht nur Hair's Layout – dem sei dieses Buch von meiner Seite aus mal ganz wärmstens empfohlen, weil wirklich detailliert auf jeden dämlichen Fehler eingegangen wird, den wir, mit dem wir jeden Tag zu tun haben, wenn wir dann mal wieder testen, ob das im IE sechs denn doch einigermaßen aussieht oder eben mal wieder nicht. Und, das, das ist für mich sehr, sehr wertvoll.

Also wenn es darum geht, warum irgendetwas nicht klappt oder weil ich wissen möchte, warum es nicht klappt, schlag ich das, dieses Buch auf. Genau, und Dirk, da kannst du dich wehren, wie du willst, ich verlinke es. Genau. Okay, dann denk ich, dann denk ich, kommen wir zum nächsten Kapitel: Erste Schritte mit YAML. Okay, wie geht's denn los, nachdem ich die Doku gelesen habe?

Nils, du bist dran.

Okay, danke. Ich bin Freiwilliger jetzt. So, mein Vorschlag: Simple Project runterladen. Nicht das große Paket. Dirk hat das eben schon angesprochen. Unter Umständen muss man da, noch mal Verlinkungen vornehmen, die Links neu setzen, die Referenzen verändern, dass man... Das macht keinen Spaß. Erst recht nicht für denjenigen, der sich zum ersten Mal mit YAML befasst. Downloaden und entpacken des Simple Projects. Hier haben wir auch 'ne fertige Projektstruktur.

Die Index-Datei heißt dort MyLayout HTML. Man kann das jetzt umbenennen, wie man möchte. Das ist ja völlig egal. Fürs Screen Design haben wir, Haben wir die Base Mode und die, Content CSS-Datei. Das ist eindeutig definiert in einem Ordner Screen. Da weiß ich gleich: „Aha, hier sind die CSS-Dateien für Screen." Und man findet sich sehr schnell zurecht. In Zusammenhang mit dem Jaml-Builder macht das Ganze richtig Sinn. Der kommt auch beim nächsten Tag,, gleich anschließend noch mal als Thema.

Und, wenn man die Doku gelesen hat oder sie, wie David eben sagte, parallel liest, während man sich mit, mit dem Aufbau befasst, man sollte sich erst mal das Markup genau ansehen, dann sollte man sich die CSS-Dateien ansehen. Und, was, zuerst für den Anfänger super verwirrend ist, ist die auf den ersten Blick verwirrende, Vielfalt der Ordnerstruktur. Also im Normalfall kennt man das ja, wenn das auch eine kleine Seite ist, dann hat man, zwei CSS-Dateien.

Einmal Screen und einmal Print CSS und das war's dann. Und hier hat man es gleich mit einer ganzen Reihe zu tun. Und dann hängen da auch noch CSS-Dateien und die, Patches in irgendwelchen, in irgendwelchen Unterordnern im Ordner Jaml. Man sollte sich also erst mal mit der Struktur der, Dateien befassen. Die ist nicht, einfach nicht intuitiv ganz schnell zu erfassen. Das wäre auch gelogen, wenn ich jetzt sagen würde, das kann jeder. Das dauert ein bisschen.

Das dauert ein bisschen, bis man sich da durchgefrickelt hat. Wenn man's, wenn man das aber weiß, wie der Aufbau ist, wie es aussieht und, nach welchen Kriterien, diese Struktur aufgebaut wurde, dann wird es auch sehr schnell transparent. Das ist also erst mal das Wichtigste. Nicht nur die Doku lesen, sondern sich auch das Markup ansehen, die CSS-Dateien ansehen und nach dem Top-down-Prinzip auch sehen: Was ist alles vorhanden? Was kann ich alles schon nutzen? Welche Klassen sind schon da?

Welche IDs sind vorhanden? Und, was brauche ich eventuell auch gar nicht? Und da sind wir wieder beim Thema, dass man sich einfach komplett mit, mit den einzelnen Dateien befassen muss. Es geht nicht, es geht eben nicht darum, da mal eben was, mit drei Mausklicks fertig zu machen.

Vielleicht kann ich was zu dieser Einteilung, die du angesprochen hast, schon für die Dateien kurz sagen..

Verteidige dich ruhig.

Ich sag jetzt einfach mal, im ersten Anlauf sollte, kann man den Jaml-Ordner erst mal links liegen lassen und-

Stimmt.

-sollte sich wirklich erst mal in den, in den CSS-Ordner begeben und da liegt eben eine Datei, eine, ein pa-- die, das zentrale Stylesheet drin. Das kann man angucken. Da werden eben verschiedene Bausteine eingebunden und dann gibt's eben zwei Verzeichnisse. Das ist das Patches und, das Screen. Und dann geht man eben als Erstes mal in den Screen rein und jetzt roll ich schon das R.

Aber schön gerollt.

Es kommt, weil ich ganz nah bei Lache wohne. Das ist bei uns in Görlitz um die Ecke. Also alles rund um Görlitz. Da, in Görlitz hat man einen halbwegs vernünftigen Dialekt, behaupte ich. Und wirklich die Dörfer darum herum, die, die rollen das R wirklich katastrophal. Und manchmal färbt's ab.

Ja, zurück zum Thema.

Sei dir mal verziehen.

Ja, Base Mode und Content. Die Base Mode vom Namen her, ich hatte es vorhin schon mal a-angesprochen: Jaml stellt selber über die Base CSS, die tief im Jaml-Ordner liegt, grundsätzlich ein dreispaltiges oder, oder das CSS für ein dreispaltiges Layout zur Verfügung. Das ist auch das, was man sich, was man sieht, wenn man, die HTML-Datei sich anguckt, die im Simple Project drin liegt.

Und das B-Base Mode ist also die Modifikation dieser Grundvariante, in der ich wirklich, mein eigenes Screen-Design reinsetzen kann. Sodass das, dass man hier wirklich die Kaskade von CSS nutzt, indem ich Vorgaben, die die Base macht, ergänze beziehungsweise überschreibe. Hat den Vorteil, dass wenn ich meine Base Mode lösche, immer noch die Base da ist, und es kann einfach nichts kaputtgehen, weil im Zweifel muss ich meine Gestaltung noch mal hinzufügen, wenn ich da irgendwo mich vertan habe.

Aber prinzipiell, das erst mal browserübergreifende funktionierende Layout ist noch da.

Die Base sollte deshalb, sorry, die Base sollte deshalb ja auch nicht angefasst werden. Das hat, gute Gründe, ja. Das muss auch nicht. Man muss auch nicht.

Deswegen ist sie einfach, räumlich getrennt und liegt im Jaml-Ordner und nicht im CSS, den jeder Nutzer Or-- den jeder Nutzer kennt, ne.

Stimmt. Es ist nur so: Wenn man zum ersten Mal-- Ich weiß vom, von meinem ersten Mal, mein erstes Mal mit Jaml. Ja, romantische Stunden. Da öffnet man eben diesen, kompletten Projektordner und, man versteht es nicht. Man versteht hinterher, warum du welchen Schritt getan hast und wieso du verschiedene Ordner angelegt hast. Nur am Anfang steigt man nicht sofort durch und das kann auch jeder, das kann auch jeder bestätigen, der,, mit Jaml aus dem FF oder einfach völlig routiniert arbeitet.

Das, das ist halt so. Darum mein Rat an jeden, der damit, arbeiten möchte, sich damit erst mal zu befassen. Es reicht dann auch nicht mehr die Doku in dem Moment, wo man's,, wo man's hat, weil man sich vielleicht wundert, man möchte etwas ändern und man weiß nicht, warum, klappt das jetzt nicht, weil vielleicht etwas eben nicht korrekt überschrieben ist oder weil man die Kaskade, die-- Man muss ja die Kaskade erst mal kennenlernen, in diesem, in diesem Konzept. Darum geht's eigentlich.

Es kommt auch oft die Frage, zumindest im Jamits-Forum:, ich möchte jetzt eine Änderung machen. Wo bitte schön soll ich sie denn reinschreiben? Weil ich habe ja so viele Dateien zur Verfügung.

Ja, genau.

Deswegen sagen wir so: Innerhalb des CSS-Ordners darf sich jeder austoben, wo er will. Man kann auch alles in eine Datei schmeißen. Es ist lediglich ein Vorschlag, den ich hier anbiete, wie man es gliedern kann. Und mein Vorschlag ist eben das eigentliche Screen Layout, also wo ich sage, wo ist welcher Container platziert, we-welche Farbe hat er, welche Hintergrundgrafiken sind vielleicht irgendwo drin.

Das packe ich oder empfehle ich eben in die Base Mode zu packen und alles, was wirklich Content ist, also wie sehen Überschriften aus? Wie sehen Schriften aus? Wie werden Listen formatiert, Tabellen, Formulare, was auch immer auf der Seite zu finden ist an Inhaltselementen. Das in die Content. Ne?

Weil einerseits kann ich eben die Inhalte unabhängig vom, vom umgebenden Screen Layout habe ich erst mal getrennt, sodass ich beides immer wieder nutzen beziehungsweise beides unabhängig voneinander erst mal pflegen kann. Und ganz im Hintergrund, liegt dann noch YAML und, sorgt unten drunter quasi für den Rest, dass alles zusammen funktioniert.

Und von mir hier auch eine Warnung aus der Praxis:, bei den ersten YAML-Projekten, habe ich's auch so gemacht, dass ich einige Sachen, die eigentlich in den, in die Content gehörten, du warst vor zwei Jahren auch mal anders aufgebaut. Muss man mal so vor, vor- Ja, vor zweieinhalb Jahren. Da habe ich, das habe ich auch in die Base Mode geschrieben. Ja. Das ist, solange man da nicht wieder irgendwie ran muss, ist das alles in Ordnung.

Aber wenn dann doch der Kunde anruft und sagt: "Können Sie das dann doch mal wieder rückgängig machen?" Und man hühnert da irgendwie, in der Base Mode rum und gleichzeitig hat man genau die gleiche Klasse dummerweise auch noch mal in der Content CSS geschrieben, ja, da sucht man sich einen Wolf in der Base Mode natürlich. Und, das heißt also, das auch wirklich ganz streng getrennt halten.

Das ist jetzt nach dem, mit, mit dem, nach dem aktuellen Stand des YAML-Konzeptes eigentlich auch kein Problem mehr, denn in der Base Mode, das, die ist wirklich ganz schlank. Da steht nur das drin, was das Layout eigentlich ausmacht, das CSS-Layout und, in der Content ist eigentlich alles Wichtige drin, was man, in den, in, in, was man alles, was man in seinen Div-Containern macht.

Ja. Man kann eigentlich nur sagen, also den besten Freund des Webentwicklers würde ich hervorholen, den Firebug. Wenn ich irgendwo nicht weiß, wo ich was hingeschrieben habe, also wenn die Projekte wirklich mal größer werden, das Element anklicken, im Fire, Firefox aufmachen, Firebug öffnen, das Element anklicken und sich wirklich zeigen lassen, wo in welcher Datei das Element steht.

Spart den Alkohol auf jeden Fall. Firebug ist gut.

Wir kommen ja später noch dazu, wie man mit diesem ganzen Tool von CSS-Dateien in, in der Produktivumgebung umgeht. Da können wir nachher noch mal was zu sagen.

Ist sowieso, eins der wesentlichen Bestandteile, warum man, solche Webentwickler-Tools im Browser benutzen sollte, um einfach mal zu gucken, welche Eigenschaft in CSS aus irgendwelcher Datei überschreibt denn jetzt diesen Wert? Und wo muss ich wirklich den ansitzen oder wo kommt das her, damit ich das machen kann? Und gerade zum Lernen von YAML ist es ein perfektes Werkzeug eigentlich.

Ich denke, Firefox, im Einsatz mit Firebug oder Konsorten in anderen Browsern, erhöhen auch ungefähr, also ich kann superschnell einsteigen, indem ich mir das eben anschaue und gucke, wie sieht denn die Kaskade aus, ne? Ja.

Ja. Und vor allen Dingen, es ist das ideale Tool, um im Alltag Fehler zu suchen. Deswegen, also für den, für den, für den Firefox ist es das Firebug, für den Internet Explorer kann ich eben auch mal empfehlen, die, was ist das, Developer Toolbar für den Internet Explorer zu installieren. Die ist nicht so komfortabel wie, wie der Firebug.

Die zeigt beispielsweise nicht an, aus welcher Datei die, die CSS-Eigenschaft kommt, aber sie zeigt zumindest an, welche CSS-Eigenschaften an ein Element geknüpft sind. Und das eben auch schön durch den DOM browsen und Elemente anklicken. Das hilft doch sehr viel weiter, vor allen Dingen bei der Fehlersuche. Man kommt mit ein bisschen Übung sehr, sehr schnell dahin.

Genau. Für diejenigen, die vielleicht Technikwürze nicht regelmäßig hören in der letzten Sendung mit Jens Grothas, das war die Nummer einhundertzweiundzwanzig, haben wir genau Browser- und Entwicklungsmethoden angesprochen. Da könnt ihr ja noch mal reinhören und, habt dann quasi, in Verbindung mit dieser Sendung von heute YAML eigentlich den perfekten Einstieg, wenn ihr zum Beispiel ganz neu anfangt. Wunderbar. Denke ich, kommen wir zum nächsten Thema.

Genau, den, im nächsten Abschnitt geht es um die sinnvolle Anwendung, und zwar um den YAML Builder. Den hatten wir ein bisschen schon angesprochen. YAML Builder. Was ist das? Soll ich? Ja, gut. Der YAML Builder ist eine, jQuery-Anwendung, richtig? Im Grunde genommen ist es das, was man sich immer gewünscht hat, mit ein paar Mausklicks sich ein Layout zusammenzukloppen.

Der Witz dabei ist, bei YAML ist es ja nicht nur so, dass man mit ein paar Mausklicks sich einen Drei-, Zwei- oder Einspalter, fix oder flexibel oder wie auch immer zusammenklickt, sondern, man bekommt eben das komplette Markup, die ganzen Patches, den ganzen Kram dazu. Es ist so, dass die, dass man direkt den Quellcode oder auch ganz neu Teile des Quellcodes, angezeigt bekommt.

Den kann man sich rauskopieren und dann in sein Simple Project, was man sich ja vor, wie wir eben gesagt haben, schon mal heruntergeladen und entpackt hat, einfach dort einfügen in my Layout, HTML oder wo auch immer. Und, das heißt, der, der YAML Builder ist die schnellste Möglichkeit, um auch komplizierte CSS-Layouts, wirklich sich zusammenzuklicken.

Und es ist ein, ein, ein, ich, ich würde ohne das Ding nicht mehr klarkommen und würde Herzrhythmusstörungen kriegen- Oh, jetzt müssen wir kurz unterbrechen, denn ich hab die Verbindung zu dem Nils verloren. Wir melden uns gleich wieder. So, und da sind wir wieder dabei. Wir haben wieder die Verbindung zu Nils. Bitte. Alles klar. Ich weiß nicht, ob das mit den Herzrhythmusstörungen schon da war. Das war schon da. Ja, genau. Okay, das ist auch angekommen.

Also, der YAML-Builder Layout zu generieren, und zwar nach seinen, nach seinen Vorgaben. Ich weiß, dass der ständig in Entwicklung ist und der Dirk hat da auch einiges vor. So wie er jetzt aussieht, sind wahnsinnig viele Variationen, machbar damit. Also ich kann auch wirklich nur empfehlen, da, darüber kann man auch nicht viel reden. Angucken, klicken, probieren und einfach mal damit rumspielen. Das macht richtig Spaß. Es ist wirklich so 'ne klassische Drag-and-Drop-Anwendung.

Die, der Code wird automatisch generiert und man muss da nicht mehr rumfrickeln, wenn man nicht möchte. Und, das ist also-- Es gibt also keine Vorgaben, dass man jetzt dreißig verschiedene Templates hat und da sucht man sich halt das Schön, das Schönste aus, sondern hier kann man wirklich sagen: „Ich weiß genau, was ich will. Wie viel, wie breit soll meine linke Spalte sein? Und brauche ich überhaupt einen Dreispalter oder soll's nur ein Zweispalter sein, bitte schön?

Das kann-- Soll dann eine Navigation überhaupt drin sein? So, brauche ich überhaupt einen Footer oder brauche ich noch einen Teaser? Sollen hier noch,, Grids rein? Will ich hier mit Subtemplates noch innerhalb einer, der Content-Spalte arbeiten?“ Das kann ich alles bestimmen und, das gibt mir ei-ei-eine riesengroße Freiheit. Ohne-- Ich muss nachher nur noch wirklich, mir im, im Markup ansehen: Was möchte ich jetzt wirklich noch individuell ändern? Und das ist, unschlagbar gut.

Also auch für diejenigen, die sich, nicht mit YAML beschäftigen, bisher beschäftigt haben, die sollten auf jeden Fall auch noch mal den YAML-Builder sich anschauen, weil das ist wirklich ein, ein richtiges Werk für sich. Dirk, wir reden ja auch sehr oft darüber und tauschen uns aus in Sachen jQuery-Fragen, und, und reden eigentlich sehr intensiv über jQuery, auch grade in Entwicklung des YAML-Builders. Und, ich muss auch feststellen und mich tief verneigen, vor dir wirklich, vor diesem Werk.

Und, wer sich das angeschaut hat und, und sieht alleine die Funktionalität, der kann dann auch genau das Ganze projizieren auf YAML selbst und die Ordnerstruktur, wie sie denn aufgebaut ist. Also für diejenigen, die denken: „Oh Mensch, jetzt bin ich erst mal abgeschreckt von dem Thema, weil da so viel zu beachten ist.“ Nein, es steckt wirklich Sinn und Verstand dahinter.

Und allein wenn man sich den YAML-Builder anschaut und klickt da mal, 'ne Minute rein, dann, dann versteht man, glaube ich, das Ganze drumherum und dass da wirklich sehr, sehr viel Arbeit drinsteckt und dass es wirklich ein pro, professionelles, Framework ist.

Vielleicht kann ich noch was dazu sagen.

Gern.

Anwendung noch mal von dem Builder erst mal. Der ist also von seiner Codeausgabe, auf das Simple Project direkt abgestimmt. Das heißt, er spuckt, wenn man auf diesen schönen kleinen Knopf „Get Code“ drückt, genau die Dateien aus und auch mit den richtigen Dateinamen schon, die man auch im Simple Project finden würde. Und zwar gibt er aus einerseits den HTML-Quelltext für das Layout, was man sich gerade erstellt hat, als auch, die wichtigsten, Stylesheets.

Und die kann man, entweder, per Klick einfach sich ins Clipboard kopieren oder eben per Copy-Paste aus dem, aus dem Builder rausholen und kann, die vorhandenen Dateien aus dem, YAML, aus dem Simple Project, deren Inhalte vollständig einfach per Copy-Paste ersetzen. Es gibt im Moment noch keine Möglichkeit, dass ein fertiges Zip-Projekt ausgeliefert wird vom Builder.

Im Moment läuft's halt über diese Schiene, dass man dann Layout erstellt und dann per Copy-Paste im Texteditor, die Dateiinhalte ersetzt. Aber wie gesagt, es ist so weit schon drauf abgestimmt, dass alle Pfade, sofort richtig stehen und dass eben auch, das Layout, das was man sich im Builder zurechtgeklickt hat, eins zu eins dann in fertigen statischen Seiten hat.

Und für die Zukunft, für die Zukunft ganz kurz, ist natürlich noch einiges geplant. Was verraten wir noch nicht beziehungsweise wirst du nicht verraten. Aber so weit, wie ich mit dir darüber gesprochen habe, wird das spannend. Soll euch aber auch die, Sicherheit geben, dass du, Dirk, weiterhin wirklich dabei bist und entwickelst das Projekt weiter.

Also das ist kein Ding, was aus dem Boden gestampft wurde und sich dann irgendwann verliert, sondern die Entwicklung geht, schreitet voran und das ist wirklich ein aktives Projekt. Sehr aktiv.

Ja. Nee, also es macht mir ja schon seit drei Jahren mittlerweile Spaß. Ich muss natürlich, sehen, dass es mit der Familie und dem normalen Job, noch sich vereinbaren lässt. Das ist gelegentlich gar nicht so einfach und deswegen ist auch dieses Jahr ein bisschen die Geschwindigkeit, zurückgegangen, was jetzt, wirklich Neuentwicklungen betrifft. Maßgeblich schuld hat da mein Töchterchen, dem ich aber keine Schuld geben kann. Aber es geht auf alle Fälle weiter.

Wie gesagt, wir haben schon drüber gesprochen, was alles an Ideen da ist. Da ist noch ein reichlicher Fundus für die nächsten Jahre. Was jetzt noch zum Builder zu sagen wäre, der Nils hat vorhin auch schon angesprochen, die Flexibilität oder was man alles damit machen kann.

Das sind zum einen sicherlich die Möglichkeiten, dass ich erst mal diese Standardspalten, über die wir bis jetzt geredet haben, ein bis drei Spalter bauen kann und einfach mir, die Größen der einzelnen Spalten und die Größen des Layouts festlegen kann. Sehr interessant ist, ist deshalb, weil ich einerseits eben – und das zeichnet ja YAML aus – ich kann flexibel arbeiten, ich kann in vielen, Die aus wenig Einheiten mischen.

Das heißt, ich kann also wirklich sagen, meine linke Spalte, da sind Grafiken drin, da sind beispielsweise Werbebanner drin, die möchte ich bitte zweihundertfünfzig Pixel breit haben, damit da nichts passiert. In der anderen Spalte liegt das Menü. Wenn ich das skaliere, auch im älteren Browser, da soll nichts kaputtgehen. Also nehme ich das mal mit zwanzig, dreißig EM an und ich will noch mal ein flexibles Layout haben. Also bitte die Mitte passt sich dem an, was übrig ist.

Und, er generiert also immer das entsprechende Layout, sodass es vollständig funktioniert. Und das ist eines der Sachen, die, wo ich selber sage, das ist das Feature von Yaml, eins der wichtigsten, dass das überhaupt möglich ist. Man hat ganz viele Layouts, wo eben entweder alles Pixel oder alles Prozent oder alles EM-basiert sein muss, damit da nichts auseinanderfällt.

Und genau das halte ich eben selber nicht für Gestaltungsfreiheit, sondern das ist das Ziel, von Yaml gewesen, eben dort so viel wie möglich Freiheiten reinzubauen, dass es eben möglich ist zu verwenden.

Genau, da möchte ich auch noch, da, da möchte ich dran anknüpfen gern. Hier genau mit diesem Beispiel, darum habe ich das ganz am Anfang schon gebracht, den Yaml Builder, da sieht man wirklich den Unterschied zu diesen fertigen Templates oder auch zu den sogenannten Grid Frameworks, oder wenn man die jetzt mal so benennen sollte, als Unterschied zu Yaml oder überhaupt zu einem flexiblen CSS Framework. Der, der Yaml Builder zeigt das.

So etwas wäre, kaum möglich oder es würde immer nur eine, Gleichheit der, der Layouts rausschicken, wenn man das jetzt mit, festen Grids machen würde. Und durch dadurch ist auch der Yaml Builder in meinen Augen ein ideales Mittel für Einsteiger in das Thema CSS, CSS, XHTML, Webstandards, Trennung von Inhalt und Layout, diese ganze, diese ganze Thematik.

Wenn man sich schon ein bisschen auskennt und man möchte einfach mal mehr sehen als nur den CSS Zen Garden, kann man mit diesem, Yaml Builder einfach mal versuchen, Sachen zu generieren, rumzuspielen, verschiedene Lösungen, zu machen, die, die, ganzen Dips einfach mal einzufärben, und sich das mal anzeigen zu lassen und zu sehen, es klappt und wenn's ordentlich gemacht ist und, man die Patches ja auch dabei hat, dass es auch im, im Internet Explorer ganz vernünftig aussieht.

Also auch in dem Moment für Anfänger auf jeden Fall sinnvoll. Yaml als Konzept zum Zusammenbauen von fertigen Lösungen nicht geeignet. Den Yaml Builder kann man aber schön, verwenden, um sich in dieses ganze Thema einzuarbeiten. Wunderbar. Denke ich, kommen wir zum nächsten Thema, ne? Na, wo ist meine Taste? Da ist sie. Okay, steigen wir ein bisschen tiefer ein. Wer möchte?

Ja. Soll ich mal wieder anfangen?

Gern. Mhm.

Gleich jetzt noch mal im Anschluss an den Builder würde ich, mal als Erstes auf die Subtemplate, zu sprechen kommen, die dieses, das Spaltenkonzept, was ich, womit ich vor drei Jahren damals gestartet bin, mit der ersten Version von Yaml, erweitern sollten.

Es war also bis dahin ging es mir also in erster Linie darum, wie kriege ich eben ein, zwei oder drei Spalter auf die Reihe, dass ich das immer wieder, dass ich den gleichen Quellcode verwenden kann, wie kann ich eben verschiedene Einheiten nehmen.

Das hat nicht lange gedauert, als ich es veröffentlicht hatte beziehungsweise auch schon vor der Veröffentlichung hatte mich, der damals gelöchert habe wegen irgendwelcher Fragen, weil irgendwas nicht funktioniert hat und er konnte mir dann einen Link schicken, wo ich nachlesen konnte, gesagt hat, das ist gut und schön, das Layout zu haben, aber was passiert mit den Inhalten? Denn in der Regel geht es dann los, das trifft auch, sagen wir, hoffentlich Einsteiger in das, in das Ganze.

Selbst wenn ich mir ein mehrspaltiges Layout irgendwo hingesetzt habe, jetzt geht es erst so, dass ich beispielsweise, ein Element links und gleichzeitig auf gleicher Höhe ein Element nach rechts schieben möchte. Ja? Wie mache ich das? Wie positioniere ich was links und was rechts gleichzeitig in glei, auf gleicher Höhe?

Es gibt so viele Beispiele, wo die Leute als allererstes eine Tabelle reinsetzen, weil sie sich einfach nicht zu helfen wissen und weil floats dann doch an der Stelle relativ kompliziert sind. Und daraus sind, letzten Endes die Subtemplates von Yaml geboren, die nichts weiter sind als ein einfaches, einfache Grid-Bausteine.

Nur mit dem einzigen Unterschied, dass sie eben nicht wie bei den zahlreichen Grid Frameworks, dass sie auf irgendwie Pixel oder EM basieren, sondern dass sie einfach logische Teilungen in Prozent anbieten. Das heißt, es gibt die Möglichkeit, den zur Verfügung stehenden Platz, in einem Container entweder in zwei, drei oder vier, gleiche Teile zu unterteilen.

Also wir haben prozentuale Trennung für fünfzig Prozent, für dreiunddreißig Prozent und dann die entsprechenden Mischkombinationen sechsundsechzig, dreiunddreißig und es gibt auch noch eine Teilung für den Goldenen Schnitt. So, und als dieses System da war, war es natürlich schön, dass man einerseits innerhalb der Spalten damit arbeiten konnte, aber es ist natürlich auch, gleichermaßen so wie man mit einem Grid Framework das gesamte Layout erstellt, kann man auch das nutzen.

Die Subtemplates, um die Spalten komplett beiseite zu lassen und deutlich freier den, den zur Verfügung stehenden Raum einer Webseite zu gestalten und das Ganze mit Subtemplates zu machen, die dann, es gibt die Willung, wie gesagt, die dreiunddreißig, fünfundzwanzig Prozent noch und die entsprechenden ergänzenden Bausteine, um weiter und feiner zu gliedern.

Vor allen Dingen, wenn man von, von, von einer großen weißen leeren Seite anfängt, gibt's die Möglichkeit, die Dinger ineinander zu schachteln.

So, und das macht dann den Builder erst noch mal so richtig spannend, weil man eben genau diese Bausteine im Builder jetzt beliebig per Drag and Drop und da kommt das nämlich erst her, ins Layout werfen kann und sich eben um diese ganze Containerschachtelung, die da entsteht, nicht kümmern muss, sondern die generiert wirklich der Builder fehlerfrei am Ende hinten raus.

Ja, das wär's von mir erst mal zu der technischen Beschreibung der Subtemplates, die neben dem, was man mit, einem einfachen Header und ein paar Spalten hinbekommt, dann doch erst richtig,, Möglichkeiten bieten, noch eine ganze Menge mehr an Layouts mit dem System umzusetzen. Ich weiß nicht, Nils. Ja. Wie oft benutzt du sie? Ja, ich benutze die Subtemplates auch gelegentlich. Ursprünglich nur, um, gar nicht mal um das Layout komplett zu ändern.

Das heißt also innerhalb, des, des, des Con, Content Containers, dort, weitere Spalten anzulegen, sondern zum Beispiel für Bilder Spalten oder, also nicht einmal eben komplett von oben bis unten, sondern wirklich nur einzelne Bestandteile, oder einzelne Seitenteile, innerhalb des, des Content Diffs, dort zu strukturieren und dort mal die Inhalte reinzubringen.

Ja, also ganz oft hat man das Bedürfnis, dann sollen dann irgendwie noch mal drei oder zwei oder auch vier kleine, Sponsoren-Gimmick-Gifs irgendwo reingefeuert werden. Machen Sie doch mal eben schnell. Und ja, mit dem Jaml Builder kann man das dann eben auch mal schnell machen, ohne dass es irgendwie zerschießt.

Ja und, Subtemplates sind einfach klasse und natürlich habe ich auch schon probiert, direkt komplett,, einzelne Seiten kom-- also komplett darauf zu verzichten, überhaupt, ein, ein Dreispalter, die floatenden Diffs zu nehmen, sondern gleich komplett, ein Einspalterlayout zu nehmen und den Rest mit Subtemplate zu machen. Ist überhaupt kein Problem. Angucken und ausprobieren.

Also grundsätzlich, wenn ich ja mit dem Jaml Builder oder mit Jaml direkt arbeite, könnte ich als Unbedarft natürlich die Befürchtung haben, dass also auch wenn mein Layout jetzt komplizierter wird, dass es vielleicht in Standards Bro-- in standardunterstützenden, Browsern gut aussieht, nur im Internet Explorer sechs, dem großen Problemkind nicht mehr so. Aber da hat Jaml natürlich gut vorgesorgt, mit der sogenannten, Bug-Prävention, ne? Ja, korrekt.

Da, ja einmal ganz kurz beim, jetzt fange ich mal ganz kurz an dazu. Das war bei mir wirklich der, der Hauptgrund, warum ich mich näher mit Jaml befasst hatte. Weil es ging um ein etwas größeres Projekt, was natürlich bis vorgestern fertig werden sollte und,, und ich wusste, das ist, eine Geschichte, die definitiv vor zweieinhalb, ja knapp drei Jahren, vor zweieinhalb Jahren war's, wo also der Internet Explorer sechs nicht nur am Rande zu erwähnen ist, sondern der war in aller Munde.

Der, der, der Siebener war irgendwo am Horizont gerade sichtbar. Und, da habe ich die größte, das größte Potenzial gesehen in dem Konzept. Nicht einmal in der Flexibilität. Das war sicher auch wichtig. Aber das hätte ich mir, ein komplettes Layout hätte ich mir zur Not auch noch selbst zusammenstricken können. Das wäre nicht das Thema gewesen. Nein, die Bug-Prävention, die war sozusagen mit eingebaut.

Ja, sonst hat man ja immer das Problem, man hat da irgendwie, man fährt mit der schönsten Kutsche los und dann kommt irgendeiner von der Seite an und kommt da mit irgend so einem alten Zossen, ne? Und der heißt IE sechs und der muss nämlich noch mal ganz nach vorne und, und bremst die ganze Klamotte aus. Da können sie, da könnt ihr noch so schön die schönsten und schnellsten Schimmel vorne dran haben, ne. Wenn der Esel da vorne hängt, dann habt ihr verloren.

Und, und, und Jaml mit dieser Bug-Prävention war das irgendwie so, als ob dieser Esel angehoben wird, dass er überhaupt nicht mehr den Boden erreichen kann und man kann also ganz normal weiterfahren. Und das, das war richtig sexy, dieses System, dass ich dachte: „Guck mal hier, du, du musst dich um nichts mehr kümmern." Und das ist auch der Punkt. Der IE sechs hat für mich, seit ich Jaml verwende, seinen Schrecken so gut wie verloren.

Es gibt immer Details und immer wieder irgendwelche Späßchen, Spaß mit dem Browser sechs, aber,, das, der Schrecken ist halt nicht mehr da. Ja, das sind, das sind nur noch Kleinigkeiten, die einen aufregen, aber nicht, dass das komplett, man macht irgendwas, prüft es im Firefox oder im Safari oder sonst wo, dann öffnet man im I, öffnet man das im IE sechs, aber erst, nachdem man einen halben Liter Baldrian vorgetrunken hat, weil sonst hat man das nicht, sonst, sonst ging das irgendwie nicht.

Und, das ist nicht mehr so. Es interessiert mich eigentlich wenig. Der-- es ist sogar so weit, dass ich, dass es mit dem IE fünf geht oder IE fünf fünf sowieso. IE fünf null interessiert, glaube ich, nicht mehr, aber den IE fünf fünf, da gucke ich mir tatsächlich noch die Seiten an und wenn sie da auch einigermaßen identisch, einigermaßen identisch aussehen, ja, da freue ich mich doch. Ja, so.

Also es ist auch, so wie ich, anderen vielleicht, die, die Nutzung oder Eigenarten, im, im positiven Sinne von, von solchen, Frameworks nahe bringe, indem ich einfach sage, ihr könnt das natürlich alles selbst schreiben und wenn ihr wirklich gut in HTML und CSS seid, dann wisst ihr vielleicht auch, wie ihr diese, Bug-Prävention, also, wie ihr diese Bugs des Internet Explorer 6 umschiffen könnt.

Aber, ihr müsst sie entweder aus euren Codebeispielen komplett eben raussuchen und reinsetzen und habt vielleicht nicht die richtigen oder wenn ihr es dann eben schreibt, ihr müsst euch dran erinnern. Und, gerade YAML bietet 'n unglaublichen Vorteil, dass ihr euch mit den immer wiederkehrenden Elementen und seien's die Bugs in den unterschiedlichsten Tiefen.

Ja, es gibt ja, Bugs, die treten nur auf, wenn ein anderer Bug zum Beispiel eintritt, in Kombination dessen und in YAML sind quasi alle Bugfixes schon drin. Das heißt auch grade in Zusammenhang mit den YAML-Buildern, wenn ich mir was zusammenklick und zusammenstelle, dann weiß ich, im größten Teil, es wird im Internet Explorer 6 funktionieren, weil es eben schon da ist.

Und jetzt noch mal auf den Punkt gebracht: Es ist eben den Vorteil, wenn ich YAML einsetze, dann brauche ich mich darum nicht zu kümmern. Das heißt, ich kann mich tatsächlich um die eigentliche Entwicklung, der Webseite für den Kunden befassen und muss mich nicht mehr mit solchen Sachen rumärgern. Und das ist, denk ich, der eins der entscheidenden Vorteile, von YAML. Ganz genau, ganz genau. Man muss sich nicht mehr mit jedem Detail befassen.

Das, die, die Prävention ist eine, ein, ein, ein ganz wichtiger Punkt, weil im Moment grade aktuell haben wir überall die Diskussion, inwieweit soll der IE6 noch unterstützt werden? Ja, Kenneth, das sind jetzt vielleicht noch zweiund-, zwanzig und dreiundzwanzig Prozent. Ja? Das ist ein Fünftel, liebe Leute. Da kann man nicht einfach sagen, ja, zwei von zehn haben denn jetzt eben mal eben Pech gehabt.

Die kriegen jetzt vielleicht irgendwas, wird ein bisschen zerschossen oder sieht nicht mehr so nett aus, aber da müssen die eben durch. Das geht nicht. Und wenn man sich mit YAML eben befasst hat und auch mit den Bugs und, überhaupt mit den,, mit den Problemen, die der IE6 macht, bis heute, dann sieht man aber, es gibt die Möglichkeiten. YAML bietet eben dieses Konzept, dass man sagt, ja gut, dann gibt es eben diese Bugs. Ist mir doch völlig wurscht, darum nutz ich dieses Konzept.

Und ich muss mir auch darüber keine Gedanken machen, ob ich den IE6 unterstütze oder nicht. Ich kann auch nicht zwanzig bis vierundzwanzig Prozent, da schwanken ja die Statistiken, die kann ich nicht einfach ausgrenzen. Das kann ich doch nicht machen. Also, muss ich damit einfach leben.

Ja, früher haben wir uns darüber unterhalten, ob die vier Prozent Netscape 4 User, die es noch gibt, ob man da jetzt noch unterstützen soll oder nicht und ho, ho, ho, ho, wenn man das immer nicht gemacht hat, dann gab's schon irgendwo Diskussionen.

Und heute wird darüber ge-gesprochen, dass man also eine, eine Gruppe von zwanzig Prozent, zwanzig Prozent der User irgendwie, dass man denen sagt: „Ja, das, das will man jetzt nicht mehr unterstützen." Das macht keinen Spaß, diese, diesen, diesen IE6 jedes Mal noch mit sich rumzuschleppen, aber wir müssen damit leben und den werden wir auch noch, den werden wir auch noch trotzdem noch 'n paar Jahre haben, da bin ich sicher. Genau.

Es gibt ja auch grade 'ne Diskussion, ob man, ob man den Internet Explorer 6 unterstützen sollte, ja oder nein. Ich hab ja auch teilweise Großkunden, bei uns in der Agentur, die einfach, weil sie so groß sind, den Internet Explorer 6 nutzen müssen. Und, wenn der Kunde selbst gar keine andere Wahl hat, außer den Internet Explorer 6 zu nutzen, dann muss man ihn zwangsläufig unterstützen.

Ob man jetzt, das machen möchte als Webentwickler ja oder nein, um ihn vielleicht abzulösen, aber man muss es machen. Und wie gesagt, bei YAML brauche ich mir da keine großartigen Sorgen machen. Genau.

Ich würd's vielleicht noch mal von der technischen Seite erklären, warum's jetzt wirklich Prävention heißt, weil's ja eigentlich vor dieser, es geht ja hier wirklich um das Vorausdenken in Anführungsstrichen. Denn natürlich muss man sagen, auch alle anderen Frameworks, die es gibt momentan, kriegen das natürlich nicht hin, dass die Allow Layouts, die man damit erstellen kann, prinzipiell erst mal vollständig funktionieren in allen Browsern.

YAML hat in dem Baustein, der nur dem I-Internet Explorer zugänglich ist, dem, den IE-Hacks, deutlich mehr Bugs, Fixes erst mal drin, als in den normalen Beispielen, die mit YAML mitgeliefert werden, auftreten können oder beziehungsweise die da auftreten, sondern YAML hat, 'ne ganze mehr, K-Kette mehr noch an, an Fixes drin, um Fehler abzufangen, die auftreten könnten, wenn man sich im, im Rahmen der von YAML gesteckten Regeln bewegt. Und das ist aus meiner Sicht eben der Vorteil,.

Oh, jetzt ist der Dirk grade wieder weg. Jetzt bist du wieder da. Entschuldige.

, 'nem Good Framework. Also wenn ich mein HTML jedes Mal neu aufbaue von, von null an und jedes Mal anders zusammen, baue, dann hab ich sehr große Schwierigkeiten, zu vorauszuahnen, was passieren kann. Denn im Internet Explorer ist es, an vielen Stellen so, dass das Auftreten eines Bugs vielfach damit zusammenhängt, wie, der Quelltext strukturiert, strukturiert ist und was, wie jetzt beispielsweise bestimmte Eigenschaften vergeben sind.

Absolut.

Das heißt, wenn ein Float neben 'nem statischen Element ist, dann passieren gewisse Dinge. Und wenn dieser ha-, zugrunde liegende Markup immer derselbe ist, wenn ich wie eben, innerhalb von YAML in dem Container main liegen halt, zwei floatende Spalten und eine statische Spalte. Jetzt die, drei Spalten,, erstellen und die kann ich komplett frei am Bildschirm anordnen. Das zugrunde liegende Markup ist aber immer dasselbe. Demzufolge lässt sich vorausahnen, was passieren kann.

Und dank der guten Dokumentation der IE-Bugs lassen sich viele dieser Sachen eben von vornherein abfangen, obwohl sie in den normalen Beispielen, die ich zerlege, unter Umständen noch gar nicht auftreten. Aber ich weiß halt, es, mit YAML lassen sich diese Sachen alle einstellen und wenn das passiert, na ja gut, dann beheben wir's.

Und zwar auf 'ne Art und Weise, die, die wahrscheinlichen Layout-Einstellungen des Nutzers, Containerhöhen, Containerbreiten, Hintergrundfarben und so was einfach nicht behindert, ne? Der Internet Explorer, vor allen Dingen die Sechser-Variante, ist ga-ganz liebevoll zu jedem, Webdesigner, der Hintergrundgrafiken verwenden möchte.

Wenn der Container kein Has-Layout hat, darin sehe ich entweder die Hälfte von der Hintergrundfarbe oder der Grafik oder gar nichts., 'nem Container Has-Layout zu geben, ist aber auf bestimmt fünf, sechs verschiedene Art und Weisen möglich und demzufolge lässt sich auch fast immer eine finden, die ich einfach präventiv vorgeben kann, wo ich weiß, die wird in der Regel nichts kaputt machen.

Und das sind eben beispielsweise für, wäre das die Eigenschaft Zoom, die es nur im Internet Explorer gibt, also was Propriätares, was kein anderer Browser kann, was aber auch nicht stört, weil das Dashboard ja sowieso bloß in den Internet Explorer ausgeliefert wird. Die macht überhaupt nix, wenn ich jetzt als Eigenschaft Zoom eins, eingebe, aber sie triggert Has-Layout und sorgt damit schon mal dafür, dass, die Container, die ich im Layout habe, ihre Hintergrundgrafiken erhalten.

Was ich vorhin schon mal angesprochen hatte bei den Listen, ne. Es ist doch überhaupt kein Problem, generell unsortierten, sortierten Listen, Definitionslisten in Position relativ mitzugeben, einfach aus dem Grund, es könnte ja jemand daraus, daraus 'n Menü bauen, was mit Grafiken oder mit Hintergrundfarben arbeitet und automatisch werden diese dargestellt.

Und das sind alles so 'ne Sachen, dort sehe ich eigentlich auch für die Zukunft das, was 'n Framework leisten kann, indem's eben genau diese Fallstricke ausbildet. Und das passiert eben nicht nur beim Internet Explorer, auch wenn der eben 'ne spezielle, ganze spezielle Datei für sich beansprucht, sondern das gibt's ganz genauso für den Firefox in YAML. Der Firefox ist, ebenso charmant, wenn's ums Ausdrucken geht von flotenden Containern, die er ganz liebevoll nach der ersten Seite abschneidet.

Auch dort sorgt YAML dafür, dass das einfach nicht passiert. Und das sind eben diese Sachen, die im Moment noch vielen anderen, Frameworks fehlen, wo ich nur wünschen kann, dass sie's eben auch dazubauen, weil, ich finde überhaupt diesen Framework-Ansatz prinzipiell, 'ne tolle Sache. Deswegen gibt's auch keinen Grund zu sagen, YAML ist jetzt ganz toll und alle anderen sind Mist, sondern das sind einfach, Funktionalitäten, die für mich 'n Framework ausmachen, um den Nutzer-

Ja, jetzt, ja, jetzt haben wir wieder 'ne kleine Störung. Ich hoffe, Dirk ist gleich wieder da bei uns. Dirk, sag was.

Ja, ich bin da.

Okay, da bist du wieder da. Wunderbar. Den letzten Satz kannst du vielleicht noch mal wiederholen.

Das Pamphlet ist beendet.

Okay. Okay. Alles klar. Dann haben wir noch, zwei Kategorien, bevor wir euch quasi in die Woche entlassen. Und zwar bevor wir zu Fragen und Antworten kommen, gehen wir noch 'n bisschen, auf die eventuellen Kritikpunkte an Layout Frameworks im Allgemeinen ein. Natürlich ist an YAML nicht nur was gut, könnte man meinen, könnte man philosophieren, sondern auch eventuell was Schlechtes. Aber das ist wie gesagt immer die Sichtweise und, da möcht ich euch beiden bitten, da mal kurz drauf einzugehen.

Ja, gut, kann ich ja mal anfangen. In meinen Gesprächen mit anderen Webdesignern, ob das nun Anfänger oder Profis, sind, spielt das mal keine Rolle. Es ist bei allen so, dass sie sagen, das ist also ein Riesen-, nicht unbedingt ein, ein Overhead im, im, HTML, aber grundsätzlich viel zu viel. Viel zu viele Klassen, viel zu viele IDs werden dort generiert. Es ist alles viel zu kompliziert. Die CSS-Dateien sind aufgebläht, außerdem sind es auch viel zu viel. So, das ist der Tenor vieler Leute.

Und dann gibt es noch den Punkt, dass man sagt: „Also ich verwende doch nicht irgendwas, was da jemand da in Sachsen da hinten da mal eben so fertig gemacht hat, ne? Das will ich doch selbst alles hier mal erledigen.“, beim ersten Punkt ist es so, ich hab ja schon erwähnt, die etwas kompliziertere, auf den ersten Blick komplizierte, komplizierte, verschachtelte, leicht verschachtelte Struktur der Dateien von YAML.

Wenn man denn etwas intensiver mit vielen Leuten spricht, dann merkt man plötzlich eine große Gruppe, der Kritiker, die haben sich noch überhaupt nicht mit dieser Struktur befasst. Ja, die sehen einfach nur, laden sich mal das YAML-Projekt runter, öffnen mal die,, die Ordner, die auf, auf, auf, Betriebssystemebene,, so 'ne, so 'ne Art Listenansicht und merken plötzlich: „Heiliger Witzker, hier ist ja alles voller Dateien.“ Dann sehen sie, in den CSS-Dateien sind überall noch die Kommentare drin.

Ja, das, was man sonst immer,, sich wünscht, ist da plötzlich 'n Problem und dann jetzt mittlerweile auch noch zweisprachig. Also Offensichtlich ein Overhead an Daten, ein Riesen, eine, eine Riesendatenwüste. Wenn man aber genauer hin sieht, dann, dann, dann löst sich diese Geschichte auf. Wenn man mal die, ja, wenn man das in KB ausdrücken will, dann bleibt da ja, dann bleiben da keine Massen übrig.

Ja, also ein mies optimiertes Bild in Photoshop, JPEG-Datei, machen wir mal lieber Qualität Maximum, weil das soll ja gut aussehen und das wird dann in die,, in die Webseite geflanscht. Dagegen haben die CSS-Dateien nachher überhaupt keine Bedeutung mehr. Und dann muss man sehen, wie der Ansatz da ist. Wenn man jetzt sagt, wir haben ein, ein,, ein Konzept und das ist praxisnah und darauf möchte ich mal eingehen, weil das wird immer wieder aus, ausgeklammert.

Es ist sehr oft eine akademische Diskussion. In der Praxis ist es so, dass der Kunde zu euch kommt oder zu uns kommt und sagt, : „Ich möchte gern hier meine Website haben und ich habe hier eine Vorstellung und ich habe hier vielleicht auch ein Photoshop-Layout und setz das jetzt mal um." Und früher war es so, dass man in Gedanken sich die Tabellen überlegt hat, ja. In den Zeiten des Tabellenlayouts hat man sich überlegt: Wie könnte ich das jetzt umsetzen, dass es einigermaßen gut rüberkommt?

Heute muss man ganz anders denken. Nach wie vor ist es aber so, dass die Vorgabe da ist und der Kunde möchte das jetzt so haben. Und, in dem Moment nehme ich jetzt also dieses Konzept von YAML und, sehe erst mal zu, wie ich das, was machbar ist, umsetzen kann und breche dann die Inhalte runter und bearbeite dann auch den Quellcode.

Und hier sind wir auch wieder in der Argumentation, was man beachten soll: Es ist nichts zum, man kann zwar mit Bildern zusammenklicken, die Sachen, aber es ist nichts, was man sich irgendwie so,, aus der Schublade holt und, und, Hokuspokus, fertig ist die Website. So ist es ja nicht. Das ist auch nicht irgendein, ein Theme wie bei WordPress oder bei anderen,, oder bei, bei Content-Management-Systemen, reinen Content-Management-Systemen, sondern, wir haben ja eine Entwicklungsumgebung.

Es ist eine Entwicklungsumgebung und, das heißt, die Kritik führt ganz oft ins Leere. Es ist, es wäre dann richtig, wenn jemand einfach nur die Sachen nimmt und ein Overhead an, Daten da lässt in den, in den CSS-Dateien oder in der XHTML-Datei und, macht nichts mehr. N-nix mehr per Hand codieren, nix mehr kontrollieren, nachher, auch nix streichen und nix optimieren, sondern einfach nur sich irgendwie zusammenklatschen. So, das gilt aber für alles, was, was Webdesign angeht.

Da ist YAML ja keine Ausnahme. Das zieht also vollkommen, also dieses, die, diese Kritik lasse ich nicht gelten, ja. Denn es kommt drauf an, was man damit macht. Und, in Bezug auf die Konzeption oder auf, auf,, Prototyping ist das, YAML, Konzept einfach, unschlagbar gut. Und die, wenn jemand sagt, er möchte die totale Kontrolle haben über das, was er macht und er macht alles per Hand, jedes Mal, dann ist das richtig, aber dann benutzt er sein Framework im Kopf. Er hat ja auch seine Konstruktion.

Wir haben ja darüber am Anfang gesprochen, dass jeder irgendwie seine Konzepte verwendet und selbst wenn er es per Hand eintippt, er benutzt nicht jedes Mal für den Navi-Container einen anderen Namen. Er nimmt, er nennt es Navi und er wird es automatisch, absolut positionieren,, relativ positionieren und er wird,, auch seine Patches im Griff haben. Der hat sein Framework nur im Kopf. Der hat es nicht vorgegeben, aber er hat sein eigenes Framework auch im Kopf. Das ist nichts anderes. So. Ja.

Kein großes Statement.

Zweiteilen, und zwar einerseits, was, die Anzahl und die Schachtel der Bits angeht als Erstes. Da ist es natürlich so, wenn, das ist genau das, was du mir sagst. Wenn ich, von vornherein mein Layout plane und dann muss ich es aber wirklich vorher planen anhand einer festen Vorlage, dann kann ich genau die Container generieren, die ich dazu brauche. Und wenn es eben,, in der Regel oder bei, in vielen Fällen ist es n-n-ne Pixel-basierte Vorlage, die ich umzusetzen habe.

Dann ist es überhaupt kein Problem. Dann brauche ich für jeden modernen Browser einschließlich des Internet Explorers, wenn er sich im Standardmodus befindet, brauche ich einen Container, dem habe ich, dem gebe ich mein Paddings in Pixeln, dem gebe ich meine, mein, die Breite in Pixeln. Da komme ich wunderbar klar, da ist alles definiert und dann füge ich meine Inhalte ein, gebe den Abständen und sonst was.

Aber dazu muss ich genau wissen, was meine Aufgabe ist und genau auf diese Aufgabe zu,, ausgerichtet baue ich jetzt mein Layout zusammen. Das Framework funktioniert ja anders. Dort will ich ein System haben, was ich erstens für viele Layouts, und zwar eben nicht nur für die Pixel-basierten, benutzen kann. Und das ist mir eben auch wichtig: Ich muss nachher auch an Inhalten, bis zu einem gewissen Grad da was reinwerfen können, ohne dass es mir mein Layout kaputt macht.

Und da ist es eben so, das CSS-Box-Model, so wie wir es kennen in CSS 2, geht nicht davon aus, dass man Einheiten mischen sollte. Wenn man beispielsweise die Breite eines Containers bestimmt, fest vorgibt und ein Padding noch vorgibt, dann hat man bei diesem Modell, da als Additiv arbeitet, das heißt, die Gesamtbreite eines Containers addiert sich ja aus Border, Padding und Inhaltsbreite. Die können alle unterschiedliche Einheiten haben.

Nur dummerweise bekomme ich überhaupt nicht mehr raus, wie die Gesamtbreite dann das ist, denn das rendert der Browser. Das gibt man per CSS nicht vor. Und sobald man eben dort eine Mischung vornimmt, hat man keine Kontrolle mehr darüber. Das Gleiche betrifft, oder ein ähnlichen Ansatz betrifft den Internet Explorer im Quirks Mode. Der hat eben bis zum Explorer sechs noch das Problem, dass er das Box Model falsch interpretiert.

Dort gibt es für pixelbasierte Layouts, genügend Hacks, das zu korrigieren. Der bekannteste ist der Tantek-Hack, dass ich einfach eine Standardbreite vorgebe, dann, einen Parser Hack ausnutze, um den Internet Explorer groß zu verwirren und dann noch mal eine, eine korrigierte Breite vorgebe, damit, alle Browser das bekommen, was sie eigentlich, was sie denken, was richtig ist. Das funktioniert aber eben auch nur, solange ich mich im Bereich Pixel bewege.

Sobald ich, das Ganze in irgendeiner Richtung flexibel wird, bin ich mit diesen Hacks auch geschmissen. Die funktionieren einfach nicht mehr, weil ich eben verschiedene Einheiten nicht mehr zusammenrechnen kann.

Und das ist einer der Gründe, warum YAML beispielsweise für Bereiche, wo ich standardmäßig mit vielen Inhalten zu rechnen habe, das betrifft einerseits die Content Spalten als auch die Subtemplates, arbeite ich dort mit einem System, dass ich generell zwei Container ineinander schachte, indem ich dem äußeren, der äußere dort von den beiden bekommt immer die Gesamtbreite zugewiesen, die dieser Block haben soll und der innere Container bekommt je, jedwede Randabstände und, Rahmen und sonst was zugewiesen.

Dieses Konzept ist natürlich auf flexible Layouts ausgerichtet und funktioniert dann auch und ermöglicht eben diese Freiheit, beliebig mit Einheiten zu arbeiten. Wenn ich natürlich denke, ich brauche es nur für Pixelbasiertes, dann ist auf einmal zu viel da. Dann kann ich das natürlich reduzieren und dann muss ich es auch reduzieren, wenn ich sage, ich arbeite professionell. Das ist das, was Nils vorhin angesprochen hat. Ne?

Ich kann es entweder nehmen, zusammenbauen und in dem Stand so lassen, wie es ist. Wenn ich mit einem flexiblen Layout zu tun habe, dann, brauch ich das Fenster zu lehnen und zu sagen, dann ist das ziemlich optimal, was dieser, was, YAML da ausliefert. Da geht's überhaupt nicht viel kleiner, wenn überhaupt. Wenn ich ein rein pixelbasiertes Layout habe, dann besteht Optimierungspotenzial.

Und wenn ich das weiß, dann ist es natürlich, an mir, das auch nachher, wenn das Layout fertig ist, das auch auszunutzen.

Ich habe ja auch die Freiheit, als, als, Anwender, als Webdesigner zu sagen, die, nine hundred sixty Grid Lösung passt jetzt gerade für ein ganz bestimmtes Projekt. Ja, warum nicht? Ja. Es, also, um das jetzt auch noch mal glattzustellen, das heißt ja nicht, dass irgendwie, darum geht's ja auch, ne. YAML ist ganz toll und alle anderen sind scheiße. Darum geht's ja hier gar nicht. Sondern YAML ist einfach flexibel. So.

Wenn man aber jetzt einen, einen, ein, wenn mir jetzt jemand sagt, ich will oder ich brauche oder mein Kunde, vor allen Dingen mein Kunde möchte irgendwas und das ist ein pixelgenaues Layout, meistens wollen die auch ein fixes Layout, das ist eben nun mal so,, dann, dann ist natürlich klar, dann kann ich ja trotzdem mit YAML arbeiten, dann kann ich mir einige Sachen sparen. Es ist ja deshalb nicht obsolet.

Ja, wenn es aber eben flexibel sein soll, dann muss ich mir hier keinen Hals machen, ob das nachher klappt. Und das ist der Punkt. Und, es ist ja, Jens Grochtdreis hat in der letzten Technikwürze einen ganz, ganz wichtigen Satz gesagt in Bezug auf die Kunden, dass die auch mittlerweile wissen, dass es egal sein muss, mit welchem Browser man im Web unterwegs ist. Das, habe ich mir gemerkt, weil das ist ganz, ganz, ganz wichtig.

Wir verlieren ja immer ganz schnell, wenn wir über solche Konzepte reden, dann reden wir theoretisch und in der Praxis ist es aber so, dass,, das ist dem Kunden nicht nur egal, das ist auch dem, dem, dem Nutzer egal. Ja, da sind wir auch beim Thema, wenn wir dem Nutzer sagen, „Ja, du benutzt den IE sechs,, der ist scheiße.", der Kunde weiß gar nicht, was der IE sechs ist. Ja? Der benutzt sein Windows und da ist ein Programm drauf und damit geht er ins Internet.

Was der IE sechs ist, das weiß er nicht, auch wenn er ihn benutzt, ne? Und,, das heißt, es ist 'ne, 'ne, der, der, der Praxisbezug ist da. Und, wenn man dann, sieht, ja, wo ist denn, wo sind denn zu viele Daten, wo ist zu viel da? Dafür haben wir die Prävention, dafür haben wir die Flexibilität. Und die wird natürlich erkauft, in Anführungsstrichen erkauft mit, vielleicht einem, einem, einem gewissen Überhang.

So, und,, aber, aber das, das, das ist wirklich nur auf den ersten Blick so und, man muss sich damit befassen. Und auch hier wieder der Punkt reingehen, bearbeiten, nachprüfen, auch streichen, was nicht benutzt wird. Bitte schön. Und wenn da eine, wenn da ein Div Container vielleicht zu viel sein könnte, ja Himmel noch mal, dann, dann, dann ist das vielleicht so bei irgendeiner Quick and Dirty Geschichte oder bei kleinen Aufträgen bei Mikrosites.

Es geht ja nicht um die großen Projekte für eine groß, für einen großen Konzern. Da, da, da, da ist die Frage, ob, ob YAML da überhaupt an, so richtig, richtig, der richtige Ansatz ist. Aber bei einer, bei einem mittelständischen Unternehmen, der hat genauso das Anrecht, eine gute Seite zu kriegen und meinetwegen auch, auch Pommes Udo und Wurst Willi. Warum nicht?

Warum sollen die verdammt noch mal keine gute Website kriegen, die einfach technisch in Ordnung ist, die dann aber eben relativ schnell zusammengezimmert wird? Das macht doch nichts. Das war der Ansatz von Henry Ford. Der sagte Jeder- Bürger in Amerika, den wollte er, d-d-, da wollte er dafür sorgen, dass er, dass dann, dass die 'n Auto kriegen. Also kam dieses T-Modell auf den Markt zu einem, einem erschwinglichen Preis.

Und, vorher gab es eben auch nur,, die selbst gebauten Dinger, so wie heute noch Rolls Royce. Und ich kann mich nicht erinnern, dass hier an jeder Straßenecke weder in Berlin-Marzahn noch in, in, in,, was weiß ich, Hamburg-Blankenese wirklich an jeder Straßenecke ein Rolls Royce steht. Ich glaube, das ist nicht so, sondern da steht dann irgendwie etwas vom Fließband, was bezahlbar ist. So und das ist nicht schlecht. Das ist der Punkt.

Es geht also auch so 'n bisschen um, um, den, den Respekt diesem Markt gegenüber. Also man kann darüber quaken, dass, ganz viel Schrott ins Netz entlassen wird, jeden Tag von irgendwelchen Webdesignern. Aber hier mit YAML,, haben wir dann eben ein System, ein Konzept und eine Idee, oder mit Frameworks grundsätzlich. Das gilt ja auch für PHP oder mit, JavaScript Frameworks. Da gibt es ja auch, Kritik teilweise.

Dann kann man sagen: „Ja, dafür sind die Frameworks aber eben, die, die sind das Mittel im Moment der Praxis." So, das funktioniert und es ist bezahlbar. Man, man kriegt relativ schnell eine professionelle Lösung. Das ist es. Bitte. Mein Statement dazu. Dirk, du wolltest was sagen?

Ja, ich wollt noch den Hinweis jetzt zum, zum CSS ergänzen. Auch dort ist ja so, dass, wenn's um die Performance geht, natürlich viele CSS-Dateien, bedeuten viele http-Requests und, 'ne schle-- prinzipiell der Hang zu 'ner schlechten Website Performance. Das ist natürlich richtig und, das muss man sich einfach auch, immer vor Augen halten, wenn man damit arbeitet, auf der Seite.

Während ich aber entwickle, dann will ich ja eigentlich, damit ich wirklich 'n, 'n Geschwindigkeitsvorteil habe beim Entwickeln, dann brauche ich wiederverwendbare Bausteine. Und deswegen brauche ich auf der Entwicklerseite natürlich, modular aufgebaute Style Sheets, die ich miteinander kombinieren kann, um eben nicht wieder alles selber schreiben zu müssen, vor allen Dingen nicht immer wieder von vorne anzufangen.

Und dann muss man einfach, wenn das Layout steht, in der Entwicklerfassung schauen, was man am Ende sinnvollerweise in der Produktivumgebung zusammenfassen kann.

Und da gibt's sicherlich, ich weiß es von einigen, zehn Content-Management-Systemen, beispielsweise bei Drupal und auch bei Joomla gibt es meines Wissens, bereits Tools, die komplette Style Sheets parsen und, zusammenknüpfen zu einem großen und das dann auf dem Server ablegen und, bei Bedarf ausliefern, sodass man, es eigentlich und egal welches man, ich sag mal so, wel-- ob man jetzt so ein CMS nimmt, was es automatisch kann oder ob man's selber baut.

Es gibt eigentlich nicht große Gründe zu sagen, ich-- prinzipiell muss meine Entwicklerversion des Style Sheets hundertprozentig genauso ausgehen, wie die Live-Version.

Demzufolge kann ich das natürlich nutzen, dass ich nachher, dass ich meine Style Sheets kommentiere, sodass ich auch in der Agentur oder in der, in der, in der Agentur, für die ich arbeite, jemand was mit meiner Arbeit anfangen kann und ich aber trotzdem für den, Auftritt, den wirklichen auf der Web, dann im Internet, die einzelnen Style Sheets durch CSS-Teil, dass das komprimiert wird von, von Yahoo YAG und vielleicht auch Bausteine, die sich sinnvoll zusammenfügen lassen, eben zu ein oder zwei CSS-Dateien dann zusammenbaue, um da eben das wieder wettzumachen.

Und das ist einfach 'ne Aufgabe, die, die kann das Framework nicht gleichzeitig, anbieten mit der Möglichkeit, du hast jetzt hier modulare Bausteine, mit denen du arbeiten kannst. Also das ist eindeutig dann 'ne Aufgabe, die liegt beim Entwickler und die kann ich ihm nicht abnehmen. Dafür gibt's den Geschwindigkeitsvorteil davor, sodass die Zeit auch dafür da sein sollte.

Mhm, genau.

So.

Okay, denk ich, kommen wir zu unserer letzten Rubrik. Unsere Hörer kommen zu Wort. Wir haben euch im Vorfeld in der letzten Technikbüz-Sendung und in der vorvorletzten Technikbüz-Sendung gebeten, uns E-Mails zu schreiben und, Kommentare zu hinterlassen, wenn ihr Fragen zu YAML habt, die wir in dieser Sendung behandeln. Und auch du, Dirk, hast ja im YAML-Forum, noch mal 'n Thema aufgemacht und um, Feedback gebeten und, du hast ja mal ein, ein Querbeet dieser Fragen quasi, zusammengestellt.

Und, ich würd da ganz gerne, wenn du einverstanden bist, so 'n Frage-Antwort-Spiel mit euch beiden machen, sodass wir deine Fragen, die du von deinen, von den Hörern und Lesern und Benutzern von YAML eben quasi zusammengefasst hast, dass wir die beantworten, ne, sodass, unsere User und Hörer dann auch mal zu Wort kommen. Wollen wir das so machen? Wir sind, wir sind die Telefonjoker sozusagen hier. Ihr seid die Telefonjoker, genau. Ich bin der Unbedarfte und stelle die Fragen.

Okay, worauf beruht die Flexibilität der YAML-Beispiele?

Ja, das denk ich mal, können wir im Moment jetzt kurz machen, weil ich glaube, das hat man jetzt, besprochen. Bei vielen Sachen ist es eben so, dass, ein weitgehend, konstant verwendeter Grundelegender Maßstab dem Ganzen zugrunde liegt, der per CSS dann auf sehr viele verschiedene Weise und vor allen Dingen mit eben beliebigen Einheiten, Maßeinheiten, in Form gebracht werden kann. Mehr willst du damit im Moment gar nicht so zu sagen.

Okay, eine Sache, die hatten wir mal kurz angesprochen, die ich ganz witzig finde eigentlich: Funktioniert YAML denn mit Dropdown-Menüs? Nee, also das geht schon mal gar nicht. Natürlich funktioniert das mit Dropdown-Menüs.

Hier, hier zeigt sich auch wirklich dieses Missverständnis, der Vergleich, dass, dass also von demjenigen, der diese Frage gestellt hat und diese Fragen kommen in dieser Art ja schon öfter., dass dort, dass dort eine, eine, ein, ein falscher Vergleich vorgenommen wird, nämlich von einem komplett fertigen Template oder von einem Theme mit YAML, mit einem Framework. Ja. Man kann ja alles mit YAML machen.

Man kann auch den kompletten Quellcode zerkloppen, so dass er im Internet Explorer genauso aussieht, als ob man nie irgendwie eine Bug-Prävention hätte. Geht ja auch, ne? Kann man alles machen. Einfach nur den Link ändern. Und genauso kann man auch professionelle, gute oder auch weniger gute Sachen, dort implementieren. Und damit sind wir wieder bei der Flexibilität. Also es geht.

Die Frage kommt eigentlich, ich sag mal so deshalb, ich kenne das ja aus dem Support, -

Von den Profis hoffentlich nicht.

Nein, eher nicht.,

Kommt-- würde die--

Von an, YAML liefert, ist kein, YAML ist ein Layout Framework, kein Menü Framework. Also ich liefere nicht zwanzig verschiedene Menüvarianten mit, weil ich davon ausgehe, ich mache, ich liefere ganz einfache Listenvarianten aus. In der Regel ist das Menü immer das, was optisch, an das Screen Layout angepasst werden muss. Also brauche ich mir da eigentlich nicht, die Finger wund schreiben und dort schicke Gestaltungsvarianten machen. Die muss eh jeder anpassen.

Deswegen liegen bei YAML wirklich bloß rudimentäre Menüs bei. Gleichzeitig Funktion drin bei YAML, die, gleich hohe Spalten sim-simuliert auf eine ganz einfache Art und Weise. Da steckt einfach im Hintergrund drin, da wird irgendwo mal ein Z-Index gesetzt und der führt einfach bei den, bei den Spalten und der führt einfach dazu, wenn ich mir jetzt irgendein Menü von irgendwo her hole und ganz viele beispielsweise, lieben es bei, jetzt habe ich den Namen vergessen.

Es gibt eine Reihe CSS Dropdowns hier o-mit, mit, -

Diese Menüsammlungen.

Rein CSS.

Mhm, genau. Ja, mhm.

Da sind dann auf einmal,, ex, hier Conditional Comment Konstrukte drin, wo dann mitten ins CSS, in, ins HTML noch, eine Tabelle reingerendert wird für den Internet Explorer, damit der das auch hinkriegt.

Ja. Mir kräuselt sich grad wieder was.

Super ausgeschöpft wird. Wirklich, das ist fantastisch. Aber diese losgelösten, Menüs, Menüsammlungen sind in der Regel auch der Meinung, da ist jedes Menü der Meinung, ich bin das Wichtigste und geben dazu, geben natürlich auch entsprechend ihren Elementen entsprechende Eigenschaften mit. Und kollidieren eben unter Umständen mal, sodass eben das aufklappende Menü auf einmal hinter einer Spalte erscheint.

Das heißt, um das in Ordnung zu bringen, muss ich eben in das Menü mal reingucken und den Z-Index, der da vielleicht definiert wird oder falls einer fehlt, ein Stückchen erhöhen.

Tja, oder man setzt eben so eine Frage sofort gleich ins Forum, ne, was ja auch viel bequemer ist.

Na ja, das ist, sagen wir mal so, an der Stelle muss man auch sagen, der, die Einstiegshürde ist durch den YAML Builder und durch YAML, durch die Dokumentation natürlich schon ein Stückchen runtergesetzt, auch komplexe Sachen zu machen und man traut sich natürlich dann auch ein bisschen mehr. Und genau an der Stelle fällt man dann eben auf die Nase. Also das, grade der Z-Index ist nur eins der Sachen. Ich glaube, da, da sind mal viele von uns, die den nicht hundertprozentig durchdrungen haben.

Also vor zwei Jahren kann ich mich erinnern, dass auch jemand, eine Frage stellte, die, die war auch ungefähr so auf, auf, auf diesem Niveau. Das hat so RTL II Fragen, ne: „So rufen Sie an. Wie heißen die beiden tollen Sänger und einer davon ist Dieter Bohlen, Modern Talking oder Dirty Dancing?“ Oder was weiß ich. So eine Frage. Und, und da habe ich mir das, da habe ich mir angesehen, was der gemacht hat mit, mit YAML, derjenige, der diese Frage gestellt hat.

Dann habe ich gedacht: „Mann, also die Frage, die er gestellt hat, das ist sein geringstes Problem, wenn ich mir das ansehe, den Quellcode.“, aber das ist genau das Problem, dass eben die Einsteiger, die mit YAML erst mal ja auch ein Ergebnis kriegen, dass die denken, so einmal mit YAML gearbeitet, ich bin jetzt hier fit in CSS und XHTML sowieso. Das ist, das ist das Gefährliche.

Mhm, ja.

Gehen wir mal so ein bisschen auf die Weiterentwicklung von YAML ein. Wann in etwa wird die nächste YAML-Version kommen?

Oh.

Im Spielebereich gibt es da so einen schönen Spruch: When it's done..

Das ist die Klugscheißer-Antwort. Genau. When it's done. Es, es gibt vell, es gibt vielleicht im, im Rennsport gibt es so was Ähnliches. Das fällt mir grad jetzt mal spontan ein, wenn ich hier ins Wort fallen darf: If you have to finish first, you have to finish first. Also wenn du als Erster über die Ziellinie fahren willst, dann musst du erst mal zu Ende fahren, nach dem Motto. Ich glaube, das trifft's auch.

Also ich arbeite aktuell relativ intensiv wieder, an der nächsten YAML-Version. Ich habe mit, also es kommt die Version drei eins. Ich habe mit der Version, ich glaube, im Mai angefangen und das heißt nicht, dass wir jetzt November haben und da jetzt en-enorm viel passiert, sondern das heißt einfach, dass über den gesamten Sommer, mich wirklich sehr, sehr viele andere Dinge vollständig aufgehalten haben.

Dass ich, ich glaube, ich hab angefangen und es liegen lassen und wirklich erst im Oktober wieder anpassen können, um weiterzumachen. Und jetzt ist die Zeit wieder da. Jetzt hab ich auch 'ne ganze Menge Sachen sind in der ne-neuen Version schon eingebaut. Was kommt, können wir gleich noch drüber reden, weil ich seh die nächste Frage ja schon.

Die kommt gleich, ja.

Ich hoffe, dass sie noch vor Weihnachten rauskommt und ich hoffe, dass sie auch Spaß machen wird.

Es ist aber auch schon viel, ganz kurz dazu: Es ist ja schon einiges passiert, hab ich gesehen. Es sind viele Kleinigkeiten ja doch immer zwischendurch, obwohl Dirk da ja auch eingebunden war. Es gab Veränderungen im YAML Builder auch, und an der, an der, an der Struktur, innerhalb des, des, ganzen Projektes. Also es ist ja nicht so, dass jetzt gar nix passiert ist. Das muss man, glaube ich, darf man auch ruhig mal sagen. Also es ist, -

Im Oktober war beispielsweise jetzt, da hattet ihr, glaube ich, in einer der letzten Folgen schon mal drüber gesprochen, hier das Geschichte Flash 10, ne?

Genau, mhm.

Die, Flash 10 macht also einfach mal folgendes: Während alle Flash-Versionen vorher, belie-- wunderbar den Zugriff auf das Clipboard erlaubten, das, was in JavaScript browserübergreifend relativ kompliziert ist, beziehungsweise mittlerweile so gut wie gar nicht mehr möglich, ging in Flash eben sehr einfach.

Deswegen ist der YAML Builder einfach so aufgebaut, dass er seine Quelltexte, die er generiert, an ein kleines Flash-Tool weitergibt, und dieses Flash-Tool schreibt diese Inhalte ins Clipboard und damit kann man das Zeug benutzen. Und Flash 10 lässt das eben so nicht mehr zu. Da ist eben irgendwo mal irgendwas passiert, dass irgendwelche Leute ins Clipboard was reingeschrieben haben und das ist auf einmal eine riesen Sicherheitslücke.

Ich hab zwischenzeitlich gedacht: "Ja, könnte sein", weil ich mich mit den Themen dort, das ist, glaube ich, nicht mein Fachgebiet, da sehe ich nicht so unheimlich durch. Ich hab ein paar Leute rumgefragt, die mehrheitlich den Kopf geschüttelt haben, weil ich ei-- mittlerweile, ich kann's eigentlich auch nicht erklären, warum, wenn ich jemand was ins Clipboard schreibe, das eine wahnsinnige Sicherheitslücke sein müsste.

Es ist jedenfalls so, Flash bietet es nicht mehr an und damit ging eben im Oktober auf einmal für jeden, der, in seinem Browser die Flash-Version aktualisiert hat, auf einmal, das Herausholen der Quelltexte nicht mehr. Und das hält natürlich auf. Und da muss eben alles andere liegen bleiben und, dann hab ich mich erst mal darum gekümmert, dort, einen Workaround bereitzustellen, damit auch der Builder weiterhin unter Flash 10 benutzbar wird.

Und das sieht jetzt einfach so aus, dass ich Flash-Version abfrage und im Zweifelsfall, wenn Flash 10 installiert ist oder wenn gar kein Flash da ist auf dem Browser, dann wird eben der Quellcode alternativ in Plain Text dargestellt und nicht in so 'ner schönen farblich gestalteten Variante, sodass man ihn dort einfach mit der Maus mit markieren und kopieren rausholen kann.

Wunderbar. Welche Highlights beziehungsweise interessanten Features sind vorgesehen in den nächsten Versionen von YAML?

Na ja, ich würde erst mal die nächste nehmen, die drei eins. Was kommen wird, es gibt eine kleine Veränderung, was für YAML, für Leute, die jetzt YAML kennen, was die, die Bezeichnung angeht von den IDs, Page Margins und Page, die in Zukunft Klassen sind, mit dem einfachen Hintergrund, dass, Webseiten ja nicht immer so aussehen, dass es wie ein Blatt Papier wirkt.

Also ich hab 'n Hintergrund und dann hab ich eine großen, einen großen Container, in dem ist mein ganzes Layout drin, sondern wenn man sich das Netz mal anguckt, es sind mittlerweile ganz viele, oder die, die Mehrzahl der neuen und wirklich schick aussehenden Layouts, arbeiten damit, dass ich wirklich über die volle Breite irgendeinen Hintergrund liegen habe und mein Layout irgendwo darüber quasi schwimmt oder darüber liegt. Das ist jetzt vielleicht 'n bisschen zu kompliziert zu erklären.

Da hab ich zwei Beispiele mittlerweile dafür gebaut, die das zeigen, was das kann. Es ist einfach, ich, nutze dann einfach, oder ich brauche die Mehrfachbenutzung dieser beiden Elemente, Page Margins und Page. Deswegen keine IDs mehr und in Zukunft Klassen. Hat auf alte Layouts keinerlei Einfluss, weil nach wie vor alles, was darin an Haks oder an Fixes verbunden ist, in den IE-Hacks bleibt weiterhin erhalten, ermöglicht aber wieder, 'ne deutlich größere Vielfalt an Layoutvarianten.

Es ist so, dass man zum Beispiel, ganz kurz dazu, ich hab's gesehen, dass eben der Header komplett über die gesamte Fläche geht oder über die gesamte Breite geht oder,, der, das Main Div oder der Footer, wie man möchte. Also das ist eben nicht, begrenzt, wenn man will, oder,, eben auf diese, auf dieses klassische, auf dieses klassische Layout links und rechts ist dann 'n Rand, zum Browserfenster und in der Mitte spielt sich, der Wrapper, in dem Wrapper alles ab.

So, und das ist, ist natürlich sehr, sehr flexibel dadurch.

Einfaches Beispiel wäre meine eigene Webseite, also www.highresolution.info, da mal draufgucken. Genauso wie's da aussieht, genau das ist dann sehr, sehr einfach möglich mit den gleichen Benennungen und das Wichtige ist eben auch, dass die Container, Page Margin und Page, die behalten ganz genauso ihre Funktion bei.

Das wären einfach nur, das ist keine ID mehr, eine Klasse, können dadurch mehrfach verwendet werden und damit wird die Umstellung, mach ich das eine, die eine Layoutvariante oder mach ich die andere, ist sehr einfach.

Hätte man eigentlich schon eher machen können. Ja, ist halt mir jetzt erst in den Kopf gefangen, dass es doch mal 'ne schöne Idee wäre.

Macht doch nichts.

Was kommt noch? Jetzt muss ich selber mal nachgucken. Hab ich gestern gebaut, hab ich gestern angefangen, hat, sehr gut funktioniert. Kommt nachher noch eine Frage dazu: CSS-Tabellen. Das geht im Moment ein bisschen rum. Ich hab da auch in meinem Blog was dazu geschrieben, dass da im Moment ein riesiger Hype drum gemacht wird, den ich nicht richtig nachvollziehen kann. Nichtsdestotrotz sind sie natürlich, zu was nütze und das hab ich mir eben auch angeguckt.

Es wird, beispielsweise eine Möglichkeit geben, sehr einfach in Zukunft die Subtemplates mit browserübergreifend wieder mal, gleichen einheitlichen Höhen darzustellen.

Mhm. Hast du noch, neue Beispiele in der Rubrik Special Interest angedacht?

Dort ist im Moment, sind ja nur, ist ja dieses Feature drin für die Lage unten. Ich sag mal so: Ich hatte früher Special Interest, das bleibt auch erst mal, weil das wirklich was ist, ich brauch's leider, aber es kam eben so auf, dass hin, dass der Footer unten an, an, am

Jupp

... hängt, dass ich dieses Beispiel einfach mal gebaut habe. Es wird auf alle Fälle nachher in den Beispielen ein, ein Basic Teil und ein Advanced Teil geben und den Advanced Teil, den bau ich im Moment gerade aus, sodass eben doch etwas komplexere Sachen eben mal vorgestellt werden können.

Mhm. Okay. Der-

Weiterhin kommt-- Ach so?

Nee, nee, bitte.

Ach so. Ja, es wird, weiterhin geben die Unterstützung für was.

Wollst du Dirk unterstützen? Die Unterstützung für was? Jetzt bitte wiederhol noch mal, Dirk. Ah, noch ist er weg.

Wie ist die-- Verstanden?

Nein, leider noch nicht. Die DSL-Leitung zu dir scheint 'n bisschen zu klemmen wahrscheinlich.

Immer noch right to left. RTL. Jetzt haben wir's.

Genau, mhm.

Im Zweifel musst du's einfach noch mal wiederholen.

Nee, das haben wir jetzt verstanden. Wie der TV-Sender.

Also da geht's darum, alles, was wir so in, in den lateinischen Schriften eben haben und auch, selbst in, in, in kyrillischen Schriften, dort schreiben wir normalerweise eben von, von, von links nach rechts, während die ganzen arabischen, der ganze arabische Bereich,, das umgedrehten rechts nach links schreibt.

Dort gibt's keine in dem Sinne native Unterstützung von YAML, aber dort wird es in der Form eines Add-ons entsprechend die wichtigsten Dateien, die Coredateien von YAML, geben, die darauf vorbereitet sind und es wird auch ein komplettes Beispiel geben, was zeigt, wie das Ganze funktioniert.

Also grade für die Mehrsprachigkeit dann auch interessant, ne?

Ja, prinzipiell muss dazu gesagt werden, sobald man diesen Umschalter tätigt in CSS, geht man wirklich in eine komplett neue Welt mit ganz neuen Bugs und man wird da eine ganze Menge Überraschungen erleben, die nicht alle fixbar sind, wo ich mir aber auch schon hab erklären lassen, aus dem Bereich, die Leute, die es brauchen und die damit täglich zu tun haben, sind es zum Teil sogar gewöhnt.

Also was da, also grade der Internet Explorer macht dort Dinge, die sind Gegensatz von Gut und Böse und, aber Firefox, Opera, Safari stellen sich recht passabel an, sind aber, wenn man in die Einzelheiten geht, auch nicht gerade fehlerfrei. Aber wie gesagt, diese Unterstützung ist pro forma halber auch mit dabei.

Mhm. Also YAML goes,, Arabia oder, -

Ja, sagen wir mal so, ich hab jetzt nicht mich hingesetzt und gesagt, das muss jetzt sein, sondern, das war eine dankbare Arbeit von dem Alexander Hass, der sich um den Import von,, die Integration von YAML für Drupal, kümmert. Der mir das seiner-- Der, der hat das eine ganze Weile parallel nebenher gepflegt, wahrscheinlich weil, weil sie's auch in der Agentur eventuell gebraucht haben und hat's mir dann zur Verfügung gestellt.

Ich hab's mir noch mal angeguckt, hab das, hab ein entsprechendes Beispiel dazu gebaut und hab's eben jetzt, auf diese Weise wird's mit eingebaut.

Mhm. Super.

Und-

Entschuldige? Bitte, wenn du noch was sagen wolltest.

Nein, im Moment, das wär es quasi zu den neuen Sachen. Es ist noch was in Arbeit, aber dazu sage ich jetzt noch nix, weil ich noch nicht weiß, ob's rein-

Okay. Wo wir grade bei der Integration waren, unter uns sind ja auch ein paar Typo3-Entwickler. Wie sieht's denn da mit der Weiterentwicklung YAML für Typo3 aus?

Ja, da war die Frage, glaube ich, bei, bei Technik, kurz in den Kommentaren, ne. Es ist so: Ich kümmer mich um YAML und, rundherum haben sich eben, in den letzten Jahren einige Entwickler, ge-, gefunden, die Integra, fertige Integrationen von YAML in verschiedene Content-Management-Systeme anbieten. Und da ist YAML von, für Typo3 eins der bekanntesten und auch beliebtesten. Wird von, Dieter Bunkert entwickelt, von ehemals der T3Net GBR.

Und Dieter Bunkert ist seit 'nem Jahr, reichlich etwas über 'nem Jahr, mittlerweile wohnt er in Thailand und arbeitet auch in Thailand und entwickelt das Projekt grade weiter, hat es aber auch grade umbenannt. Und zwar heißt es jetzt, glaube ich, Templates für Templavoila. Das heißt jetzt nicht, dass dort YAML nicht mehr unterstützt wird, aber es ist einfach so, dass sich das, er das im Prinzip weiterentwickelt als eine Art Template Engine für Typo3.

Um einfach dort leichter, innerhalb von TYPO3 im Backend als Entwickler damit umgehen zu können. Gleichzeitig ist das Projekt mittlerweile, unter GPL lizenziert und soll ins TYPO3 Repository einerseits rein, andererseits hat er auch, hat er auch das Ziel, dass es vielleicht irgendwann in den TYPO3 Core aufgenommen werden könnte. Und um es schon ins TYPO3 Repository zu kriegen, darf natürlich kein Nicht-GPL-Code dort mehr drin sein.

Demzufolge ist einfach, ist die Entwicklung so, wie sie ist,, dass er-- dort wird einfach YAML an der Stelle-- man installiert sich die TYPO3 Extension, holt sich aus dem Repository, installiert dann YAML im Prinzip nach auf Knopfdruck und kann damit trotzdem deswegen weiterarbeiten. Also auch dort geht die Entwicklung weiter. Ist halt nur, jetzt aufgrund, seines Umzugs hier nach Thailand, der Firmenwechsel, die GBR hat sich hier in Deutschland aufgelöst.

Gab's eben ein, ein paar Umstrukturierungen und hat sicherlich 'n bisschen gedauert, ehe's jetzt weiterging. Von daher sicherlich die Frage da, aber ich denk mal, kann da Entwarnung geben. Auch da passiert was.

Okay. Wird's neue Layouttechniken mit CSS-Tabellen geben?

Das hatte ich ja grade schon kurz gesagt. Also wie gesagt, auf-- komplett YAML umstellen macht keinen Sinn, weil ich eigentlich nicht sehe, dass CSS-Tabellen das Ganze revolutionieren. Sie sind im Kleinen, für viele Sachen sinnvoll. Wofür ich's sehr sinnvoll sehe, sind für Grid-Elemente, sowohl für Grid, für die Sub-QPs bei YAML als auch für die zahlreichen Grid Frameworks, die es gibt.

Grade dort ist es so, dass-- dort werden in der Regel Floats eingesetzt, werden aber nicht wirklich benötigt an der Stelle. Und dort bringen einfach die, diese CSS-Tabellen etwas mehr Robustheit rein in den Code, sagen wir so, in, in das Rendering, während Floats ja sehr schnell mal umbrechen, wenn sie nicht sauber gesetzt sind, passiert das also dort einfach nicht mehr.

Und sagen wir mal so, ich könnte mir vorstellen, dass es nicht lange dauert, dass ein Grid Framework mit CSS-Tabellen rauskommt, weil man einfach dann die gleich hohen Spalten hat, hat. Bei YAML, wie gesagt, wird mir 'ne Klasse geben, dass ich, sodass ich jede Sub-Temp--, also jede Sub-Column, was ich anlege, mit 'ner zusätzlichen Klasse Equalize einfach, umbauen kann zu 'ner, zu 'ner CSS-Tabellenvariante und damit dann innerhalb von YAML sehr leicht, gleich hohe Spalten habe.

Und auch da hab ich dann für den Internet Explorer die entsprechenden Fixes eingebaut, sodass es auch dort, funktionieren wird.

Mhm. Jetzt hab ich-

Also es ist an der Stelle spannend, ja, aber eben für, also für 'n komplettes Layout sind Tabellen, die CSS-Tabellen, also sie sind, sie haben schon auch ihre Nachteile, aber ich glaube, das ist 'ne extra Sendung immer wert.

Ich wollt grad sagen, das ist ja auch, CSS-Tabellen an sich ist auch mal 'ne Spezialsendung, bei Technik für ZUWERT. Jetzt hab ich zwei Fragen, die find ich, die kommen mehr so aus der Technikecke, deswegen, sehr spannend eigentlich, die Antwort abzuwarten: Wie minimiert man bei YAML mit möglichst wenig Zeitaufwand die Größe des HTML-Grundgerüst sowie der CSS-Dateien?

Ja, HTML-Grundgerüst, mit mög-möglichst wenig Zeitaufwand, ganz einfach, per Hand das raus, ziehen mit der Maus, dann auf die Entfernen-Taste drücken, was man nicht braucht. Markieren, entfernen. Genau, das ist das Prinzip top to down, ne? Richtig, genau. Das Top-down-Prinzip, einhalten und, wirklich drauf achten, ob man es braucht oder nicht. Im Zuge der Konzeption sollte man erst mal alles drinlassen.

Also Planung und Konzeption, es ist eben, ein, für mich auch ein, eine Möglichkeit des, des, des sogenannten Rapid Prototyping. Solang ich im Kunden, in der Kundenkommunikation hänge, in der ganzen Konzeption und ständig mit dem Kunden in Kontakt hänge, wär's total,, irrsinnig, da jetzt vor, das rauszunehmen, nur weil ich's vielleicht unsichtbar gemacht habe oder weil's einfach nicht dargestellt wird.

Am Ende, bevor's online geht, dann sollte man noch mal rangehen und, die Sachen ergänzen, die man machen will, wie irgendwelche,, Metainformationen und dann das, was nicht gebraucht wird, auch wirklich rauszufeuern. Bei CSS, da gibt es ja verschiedene, Quellen. Teilweise gibt es da, da, so, so, so Online, Online-Tools, dass man sich da seine CSS-Datei mal ein-, eindampfen lassen kann. Funktioniert fast alles ganz gut. Man muss aber trotzdem aufpassen.

Man sollte immer eine Kopie haben, wenn man solche Tools verwendet. Es kann einem auch mal, irgendwelche wichtigen Details zerschießen. Ansonsten, ist damit eigentlich alles gemacht. Man kann die Kommentare rausfeuern.

Ich mache es grundsätzlich nicht, denn, die Kommentare in den CSS-Dateien nehmen auch, hier kommt wieder, mein Argument: Man kann sich hier wirklich über ein paar KB unterhalten, wenn es um Seiten geht, die tausende von Zugriffen haben pro Tag, und es, es, es ein wahnsinniger Traffic vorherrscht. Das ist aber in den seltensten Fällen so. In den normalen kleinen Kundenprojekten, da hat man irgendwas, - Erst mal hat man sowieso 'ne Traffic Flat Rate.

Das andere ist, es gibt, es gibt dann auch noch, es gibt auch noch andere Möglichkeiten, auf die oder beziehungsweise andere Sachen, auf die man achten soll, als einfach nur jetzt die CSS einzudampfen. Ich hab dieses Beispiel bereits bei den Bildern gebracht. Also dass man die, dass man die richtigen Bildformate anwendet, dass man richtig optimiert, das macht wahnsinnig was aus.

Dass man, dass man, Grafiken, sinnvoll verwendet, dass man, auch, auch, CSS Sprites verwendet, dass man sich also auskennt, wie sorge ich überhaupt mal dafür, dass von vornherein erst mal, kein, kein, k-keine redundanten Daten, auf der Seite vorhanden sind. Und dann, wenn ich das alles gemacht hab ganz ordentlich, dann kann ich auch sagen, so und jetzt minimiere ich auch noch mal meine CSS-Dateien und, verschlanke hier mein HTML-Grundgerüst.

Aber meistens wird das auch oder ganz oft nicht meistens, aber ganz oft werden diese Argumente auch von Leuten, kritikmäßig angestellt, die dann eben, wie gesagt, dann geht man da auf eine Seite und sieht da eine Riesen-JPEG-Datei, die, auf, auf sehr hoher, auf sehr hohem Qualitätsniveau und da mit, mit einem gewaltigen Datensatz, sich mal so langsam von oben bis unten runterladen. Siebzig Kilobyte, ja. Genau, genau. Ab siebzig Kilobyte. Und davon vier Bilder. Ja. Genau.

Das ist im Prinzip auch der Punkt. Sagen wir so CSS, wir hatten's vorhin schon mal, hatt ich schon mal angesprochen, man sollte sich bei größeren Projekten schon den Luxus gönnen, 'ne Entwicklungs- und eine Produktivfassung zu haben. Und dann kann man die auch eindampfen. Beim HTML ist es wirklich so: Wer HTML Purist ist und den Code reduzieren möchte, der kann es tun. Aber in der Regel ist es so, das eigentliche HTML, um das Seitenlayout herzustellen, hat ungefähr die Größe eines Kilobytes.

Eine normale Inhaltsseite, hat, ich würd mal sagen, locker leicht zwanzig, dreißig Kilobyte, die ich da runterlade plus Grafiken plus sonst was. Und wenn ich, wenn's um die Reduzierung der Container geht, um jetzt, wenn ich beispielsweise ein fixes Layout baue, dann lassen sich hier in, aus dem, aus dem Standard-Quelltext, vier, fünf Container rauslöschen. Wir reden dann hier wirklich von einem schließenden und einem öffnenden Div-Tag, und 'ner ID-Benennung.

Das sind in der Summe ein paar hundert Bytes, über die wir reden. Ja, und das in einem Verhältnis zu siebzig, achtzig Kilobyte, die standardmäßig auf jeder Seite rumliegen. Das heißt, es lässt sich optimieren. Ja, es ist, da geht auch nichts kaputt, wenn man's richtig macht, aber, sagen wir mal, es gibt immer einen Kosten-Nutzen-Effekt, ne.

Man kann's auch übertreiben.

Sagen wir mal so, ich kann mit, sagen wir, wie heißt-- Pareto-Regel heißt es, ne. Ich kann mit zwanzig Prozent der Zeit, achtzig Prozent der Arbeit schaffen und für die letzten zwanzig Prozent der Arbeit brauche ich achtzig Prozent der Zeit.

Also es ist einfach, wichtig, dass man wirklich guckt, wo, wenn man anfängt zu optimieren, eben nicht nur zwangsweise an dieser einen Stelle oder an diesen zwei Stellen zu gucken, sondern wirklich sich das gesamte Layout mit allen Inhalten, mit allen Dateien, Bildern, JavaScript-Skripten, was alles noch kommt, anzugucken und zu gucken, wo sind jetzt die größten Brocken und wo kann man als allererstes einsparen, um die Seite wirklich schneller zu bekommen.

Es erinnert auch so 'n bisschen an die Frage nach, nach jQuery, ne. Das ist, da kommt, da kommt so was ja auch immer wieder vor. Warum muss ich mir die ganze Bibliothek hier erst mal runterladen? Und kann man das nicht mal richtig eindampfen? Das ist eigentlich, man muss wirklich sagen, das ist meistens eigentlich am Thema vorbei. Definitiv. Es ist am Thema vorbei. Das ist dann auch nicht mehr zielführend, diese Fragestellung.

Man kann das natürlich, man kann das ganz puristisch diskutieren und auch beantworten. Da muss man einfach sagen: „Jawohl, da muss man auch seine, da muss man sein JavaScript, aber genauso, das ist ja genauso 'n Punkt, muss man das alles ganz schön streng halten und dann geht's." Mhm. Wenn man's, wenn man's will, kann man's ja auch machen. So. Wir sind kurz vorm Ende. Besteht denn die Möglichkeit, andersrum, besteht denn die Notwendigkeit zum Update bei fertigen Projekten?

Ganz klar eigentlich nein. Wenn sich nicht, wenn das Projekt zu dem Zeitpunkt, wo es entstanden ist, keine Fehler, keine Rendering-Fehler gezeigt hat, dann gibt's auch keinen Grund, auch wenn YAML Updates ermöglicht, das jedes Mal darüber zu spielen. Prinzipiell ist es so, dass durch die Trennung, durch das CSS und, und das, was YAML liefert, dass Updates jederzeit möglich sind.

Bei vielen, bei einigen Projekten macht das durchaus auch Sinn, aber in der Regel nur, wenn ich neue Funktionen hinzufüge oder zu einer Webseite, wo ich, davon wirklich profitieren kann. Manche Kunden wollen es vielleicht auch, dass, dass wirklich das Automat-- dass es aktuell gehalten wird, aber prinzipiell reicht es dann zu sagen, das nächste Projekt mit der nächsten, mit der jeweils aktuellen Version zu starten. Ne. Wirklich nur im Notfall.

Das ist keine Software, die irgendwelche Sicherheitslücken hat, die wöchentliche, Security-Updates braucht.

Die ver-- Die dampft sich von selbst ein nach ein paar Monaten. Wird abgeschaltet, automatisch. Ja, möchtest du noch auf den letzten Punkt CMS-Anbindung eingehen?

Ja, da war einfach, genau, da war eine Frage hat's eben, war eben, wenn ich mit YAML anfange und ein CMS benutze, ob, was soll ich bauen? Entweder auf, die fertigen Projekte, beispielsweise eben YAML für Drupal, für- TYPO3 oder für Joomla, da gibt's wirklich fertige Integration oder soll ich selbst anfangen? Was geht schneller?

Kann ich eigentlich nur sagen, das kommt drauf an auf die eigenen Fähigkeiten, wie fit man in dem jeweiligen CS, CMS ist und, zum anderen auch, wie das CMS technisch beschaffen ist. Also wenn ich mir beispielsweise, WordPress oder Joomla ansehe, dann weiß ich, die haben keine wirkliche Template Engine, sondern wird, wird mehr oder weniger, PHP und, und, und, HTML in einer Datei vermanscht. Dann macht's natürlich sehr viel Aufwand, das jedes Mal wieder von Neuem zu bauen.

Dann macht's Sinn, solange es irgendwie möglich ist, aus meiner Sicht grade für, für Neueinsteiger, mit diesen fertigen Projekten anzufangen, auch weil man sich davon viel abgucken kann, wie es denn wirklich, funktioniert.

Haben die Content Management, Management Systeme beispielsweise 'ne Template Engine wie CMS Made Simple, wie die Expression Engine, dann ist dieser Bedarf eigentlich aus meiner Sicht nicht so unbedingt da, weil dann hab ich in der Regel, 'ne HTML-Datei, wo ich statt meiner Inhalte einfach nur meine Platzhalter rein kopieren brauche und das Template ist fertig. Das heißt, dort ist einfach auch die Schwelle viel geringer, dass ich sagen kann, ich komm damit relativ schnell klar.

Mhm. Okay, dann denk ich, sind wir so weit am Ende. Jetzt schon? Jetzt schon. Dazu gleich mehr.

Beteiligt euch an der Diskussion im Blog auf Technikwürze.de.

Genau. Einige von euch haben ja auch durchblicken lassen bisher: "Mensch, in Technikwürze könnt ihr doch mal, 'n paar längere Sendungen machen." Und, einige sagten: "Nein, bitte nicht zu lang die Sendung." Und ich muss sagen, wir haben heute den absoluten Rekord aufgestellt. Wir haben einerseits sozusagen, Technikwürze in Spielfilmlänge mit extra, extra Überlängenzuschlag. Wir sind jetzt bei 135 Minuten.

Aber ich muss auch sagen, dass, soweit ich mich zurückerinnern kann und, ich kann mich an 123 Folgen von Technikwürze erinnern. Seit 2005 ist das nicht nur die längste Folge, sondern auch die inhaltsreichste Folge von allen. Wir haben heute gesprochen, noch mal rückwirkend über YAML, YAML Total. Sind am Anfang drauf eingegangen: Was sind, denn generell Layout Frameworks? Wie sind sie sinnvoll einzusetzen? Was ist jetzt der Unterschied zwischen Grid und CSS Frameworks?

Haben so 'n paar bekannte Vertreter aufgezählt, sind dann direkt in YAML eingestiegen, haben es kurz vorgestellt, die Schlagworte, was hängt damit zusammen, wie lädt man's runter, quasi die ersten Schritte. Noch mal anmerken, bitte Dokumentation lesen und eventuell das Buch von Dirk. Ja, wir werden es verlinken, Dirk, da kommst du nicht drum rum. Wie geht man quasi direkt in ein Projekt rein? Haben den YAML-Builder vorgestellt, und, haben Fragen und da Antworten, quasi von euch beantwortet.

Also ich glaube insgesamt, ich fand diese Sendung hyper, hyper interessant. Das geht euch, denk ich, hoffentlich genauso, euch beiden, ne? Es war super.

Ja, hat auch riesig Spaß gemacht. Ich, ich war wirklich erstaunt, wie selten ich dich gehört hab, David.

Aber das hattest du ja von vorneherein angekündigt, dass du moderierend mehr oder weniger eingreifst und ich hab gesehen, du hast hier mehrfach auf die Zeit gedrückt. Ich hab's nur einfach überlesen.

Du hast das souverän gelöst, David. Ihr müsst ver... Ja, es gibt eigentlich, also die heutige Sendung war eine, wo ich mal wirklich 'n bisschen ruhiger war, was auch daran liegt, dass ihr beiden wirklich die Experten seid, was YAML betrifft und, ich heute eher im Moderaten tätig war. Und, ich fand das auch mal 'ne ganz spannende Geschichte. Und, nebenbei, ihr habt vielleicht 'n paar Mal, uns tippen gehört nebenbei.

Das liegt daran, dass wir uns, neben dem her, auch abgesprochen haben, was für Themen wir demnächst ansprechen, und wie das Ganze ausschaut. Auf meinem Bildschirm, ich werd euch noch mal 'n Screenshot dann später auf Technikwürze online stellen. Den werd ich bei Flicker dann auch noch 'n bisschen kommentieren, und euch das zeigen. Das sieht 'n bisschen wirr auf, auf meinem Bildschirm. Wir haben einerseits, diese ganze Aufnahmemaske, ÜBERCASTER, dann ist Skype, das Konferenzgespräch noch drin.

Daneben ist Skype und unser Gespräch selbst, wo wir uns unterhalten und dann noch mal unsere, Sendeplanung in Google. Sieht, schön aus und, ich denke, in dieser Sendung sei es auch mal erwähnt, guckt mal hinter die Kulissen, wie das Ganze ausschaut. Wie gesagt, ich fand's 'ne super interessante Sendung. Wir freuen uns natürlich auf Kommentare. Hinterlasst uns so viel Kommentare wie, wie in den letzten beiden Folgen auch. Ich fand das super.

Die, die, Diskussion ist wirklich gestiegen, auch inhaltlich auf Technikwürze.de. Dort kriegt ihr natürlich auch die ganzen Informationen, zu YAML und, zu den Sachen, die wir wirklich angesprochen haben. Also da könnt ihr noch 'ne ganze Menge nachlesen. Auch, noch mal die Webseite vom Nils, die werden wir auch noch verlinken, ebenfalls vom Dirk. Wir sind jetzt bei 140 Minuten angelangt. Ich denke auch, es ist genug für heute. Nächste Woche gibt's natürlich wieder 'ne neue Technikwürze.

Ich sage danke, Dirk Jesse.

Bitte schön, hat Spaß gemacht.

Auf jeden Fall. Und danke, hoffentlich nicht zum letzten Mal dabei, Nils Burger. Ich danke dir, David. Es war ganz toll. Und, bitte an euch, nächste Woche wieder geht's weiter mit Technikwürze.

Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web. Weitere Informationen und die Links zur Sendung auf Technikwürze.de.