Im Download-Archive können Sie YAML 3.3.1 und das »Simple Project« downloaden und damit die Kapitel 35 bis 37 durcharbeiten. Dirk Jesse schreibt in seinem Blog:

»Wer ... will, dem steht der 3.x Versionspfad von YAML, einschließlich des YAML-Builders auch weiterhin zur Verfügung.«

Die Dokumentation zu YAML 3.3 gibt es nur noch offline

YAML4 ist ein Werkzeug für Profis, was sich unter anderem in der Dokumentation widerspiegelt, die nicht mehr das "warum" erläutert, sondern nur noch das "wie". Die ausführliche Dokumentation zu YAML 3.3 gibt es nur noch als PDF (Download). Die im Little Boxes-Buch abgedruckten Links zur alten YAML-Dokumentation funktionieren nicht mehr.  

Den »YAML Builder« gibt es nur für YAML 3.3

Den in Kapitel 37 gezeigten YAML Builder gibt es nur für YAML 3.3, und das Tool wird nach Aussage von Dirk Jesse auch nicht für die für die Version 4 aktualisiert. Stattdessen gibt es in der YAML4-Doku einige Code-Beispiele, die man direkt in seine eigenen Projekte kopieren kann, und voraussichtlich im Laufe des Jahres 2012 erblickt Dirks neuestes Projekt namens Thinking Tags das Licht der Welt.

YAML muss nicht upgedatet werden

Nach dem Release von YAML4 war eine der ersten Fragen von YAML-Nutzern, ob Projekte mit älteren YAML-Versionen jetzt upgedatet werden müssen, und die Antwort ist ein deutliches "Nein". Sie müssen YAML nicht updaten. Neue YAML-Versionen sind für neue Projekte, die Sie demnächst beginnen. 

Was ist neu in YAML 4? 

Auf den ersten Blick sieht buchstäblich alles neu aus, auf den zweiten merkt man, dass sich eigentlich nur das Erklärmodell und die Klassennamen geändert haben (IDs gibt es bei YAML 4 gar nicht mehr). Die Funktionsprinzipien sind die gleichen geblieben, was wiederum bedeutet, dass Kapitel 35 bis 37 immer noch eine lohnenswerte Lektüre sind, wenn man YAML wirklich verstehen möchte. 

YAML geht einen Schritt weg vom reinen Spaltenlayout und gibt quasi mit seinem »Layout-Module« (Wrapper) eine Hülle vor, die man mit dem »Grids Module«, dem »Columns Module«, dem »Navigation Module« und so weiter füllen kann. Hier die wichtigsten Neuerungen:  

• »Namespaces«. Das bedeutet schlicht und einfach, dass alle Klassennamen mit den Buchstaben ym- beginnen, wodurch die Chance sinkt, dass man beim CSS mit anderen Klassennamen kollidiert. ym-wrapper ist halt seltener als wrapper. 
• »Grids Module«. Die in Kapitel 36.6 erklärten »Subcolumns« waren ihrer Zeit damals ein bisschen voraus und lieferten ein Grid-Layout, bevor es diesen Begriff überhaupt gab. «Grids sind Grids sind Grids«, und somit heißen die Subcolumns jetzt »Grids Module«.
• Zwei Bausteine von YAML 3.3 gibt es in der alten Form gar nicht mehr: der YAML Builder funktioniert nicht für YAML 4, und die ausführliche Dokumentation gibt es nur noch als PDF zum Download. Beide Änderungen wurden weiter oben bereits erwähnt. 

Fazit: Auf den ersten Blick ist bei YAML 4 kein Stein auf dem alten geblieben, auf den zweiten haben sich eigentlich nur das Erklärmodell und die Klassennamen wirklich geändert. Die Funktionsprinzipien sind im Wesentlichen noch genauso wie sie in »Das große Little Boxes-Buch« erklärt werden. 

Nützliche Links zu YAML

Falls Sie die Beispiele aus dem Little Boxes-Buch durcharbeiten möchten, sind die folgenden Links sehr nützlich:

• Das Download-Archiv auf yaml.de
• Download des »Simple Project«. 
• Download der Dokumentation zu YAML 3.3 als PDF (als ZIP, ca. 2,5 Mb).

Zu YAML 4 gibt es unter anderem die folgenden interessanten Links und Beiträge: 

• Blog-Beitrag von Dirk Jesse: YAML 4 Release - Generationswechsel eingeläutet 
• Jens Grochtdreis Beitrag "YAML4 ist veröffentlicht" (mit Präsentation zu YAML4). 
• yaml.de - Startseite und Docs & Demos 

• yaml

Nach der Aktivierung der Erweiterung im Backend-Modul System - Einstellungen - Bereich Download-Statistiken werden die erfolgten Downloads gezählt. 

Neu in der Version 2.10 von [dlstats] ist übrigens, das man die Anzahl der Downloads auch im Frontend ausgeben (Link führt zum Forumsbeitrag) kann, und zwar ganz einfach mit einem Contao-Inserttag. 

In Aktion sieht man die Erweiterung und den Inserttag auf der Downloadseite. Dort wird angezeigt, wie oft die Beispieldateien von Little Boxes heruntergeladen wurden. 

• contao

Und wenn dann einmal ein Schild am Wegesrand stand, war es ungefähr so hilfreich wie der ZEN-Wegweiser in Kyoto, der nach links und rechts zeigt und einfach nur sagt: »This way«. Hierlang. »Die Homepage-Schule« ist dieser fehlende Wegweiser und der wahrscheinlich effektivste Weg zur eigenen Website.

• »Die Homepage-Schule« - die Website zum Buch 
• »Die Homepage-Schule« bei Amazon bestellen

Anmerkung für »Little Boxes«-Leser:
»Die Homepage-Schule« basiert auf »Little Boxes Teil 0». Man könnte sagen, dass das Buch in gewisser Weise das ist, was »Teil 0« einmal werden wollte ;-) 

• tools
• bücher

Das Hardcover gibt einen stabilen Rahmen, die Umschlaginnenseiten sind in einem hübschen Knallgelb und das Ganze wirkt nicht so dick wie ich befürchtet hatte. Nach dem Öffnen bleibt das Buch offen liegen und man kann damit arbeiten, ohne das man erst mühsam mit dem Daumen über die Seiten ziehen oder einen schweren Gegenstand auf das Buch legen muss. 

Als I-Punkt hat das Buch einen gelben Lesefaden, den man an die gerade gelesene Stelle legen kann. Kurzum: Ich finde es richtig gut gelungen.

Um trotz 800 Seiten den Preis von 34,95 Euro halten zu können, hat das Buch keine nicht wirklich nötigen Extras. Eine Beilegekarte gibt es zum Beispiel nicht mehr. Die von den vorherigen Ausgaben bekannte Karte mit dem Box-Modell kann man hier auf der Site downloaden.

Auch eine CD sucht man vergebens. Die Beispieldaten gibt es hier auf der Site zum Download. Das hat den zusätzlich den Vorteil, dass die Leser eigentlich mindestens einmal hier auf little-boxes.de vorbeischauen müssen, und dann bekommen Sie auch gleich die aktuellen Updates zum Buch dazu (Errata). Auf Wunsch auch ausgedruckt oder als PDF.

• das-große-Buch

Im Oktober 2010 hat der Verlag eine Aktion gestartet, bei der es Little Boxes Teil 1 und 2 im Doppelpack zum Sonderpreis von 39,80 Euro gab. Daraus haben sich zweierlei Dinge ergeben: 

1. Seit Beginn der Aktion wurde eigentlich nur noch das Doppelpack verkauft.
2. Anfang 2011 deutete sich an, dass die Papierversion der Bücher bald alle ist.

Also habe ich zusammen mit dem Verlag überlegt, was wir am Besten machen, und herausgekommen ist, dass wir aus den beiden Teilen einen einzigen machen.

Aus zwei mach eins 

Besonders Teil 2 war ein bisschen in die Jahre gekommen und für mich war das die Gelegenheit, die beiden Bände grundlegend zu aktualisieren und dabei perfekt aufeinander abzustimmen. 

»Das große Little Boxes-Buch« ...

• enthält die Teile 1 und 2 in einem Buch. Komplett aktualisiert und erweitert.
• hat ein Hardcover, sodass es trotz ca. 800 Seiten noch gut zu handeln sein sollte.
• kostet mit 34,95 Euro noch einmal fast fünf Euro weniger als das Doppelpack. 

Fachgutachter war übrigens Jens Grochtdreis, der das Manuskript gründlich gelesen, ausführlich kommentiert und ein kurzes Geleitwort zum Buch geschrieben hat. 

Was ist neu?  

Während der erste Teil im Wesentlichen nur ein bisschen geschliffen und aktualisiert wurde, ist der zweite Teil rundum erneuert. Der folgende Link führt zu einem Überblick über den Inhalt und die Änderungen: 

• »Das große Little Boxes-Buch« — Was steht drin?

Sobald Inhaltsverzeichnis und Leseprobe als PDF verfügbar sind, werde ich diese hier zum Download zur Verfügung stellen.

• html
• das-große-Buch
• css

Die komplette Linksammlung finden Sie unter folgender Adresse:

• delicious.com/littleboxes

Alle Links sind mit diversen Schlagworten (»Tags«) versehen worden, sodass Sie die Links sehr leicht filtern können. Auf der Seite von delicious.com finden Sie rechts eine komplette Übersicht aller verwendeten Tags. Oberhalb der Linksammlung können Sie die Tags ganz bequem eingeben.

Links mit »Tags« filtern

Die Links sind mit »Tags« verschlagwortet. Jeder Link hat diverse Tags, wie zum Beispiel die Kapitelnummer, und mit Hilfe der Tags kann man die Links filtern. Um also nur die Links zu Kapitel 24 zu sehen, hängen Sie einfach das Tag k24 an die URL:  

• delicious.com/littleboxes/k24

Nur Links zum Thema CSS3? Kein Problem: 

• delicious.com/littleboxes/css3

Tags können auch kombiniert werden. Um nur Links zu Referenzen zu CSS3 sehen: 

• delicious.com/littleboxes/css3+referenzen

Hier noch ein paar Beispiele: 

• delicious.com/littleboxes/editoren+mac
• delicous.com/littleboxes/html5 

Viel Spaß beim Probieren. Eine komplette Liste aller verwendeten Tags gibt's bei delicious am rechten Fensterrand. 

URLs als Lesezeichen speichern oder als RSS-Feed abonnieren 

Die Lesezeichensammlung wird auch nach Erscheinen des Buches weiterhin gepflegt und weil Delicious die Tags einfach an das Ende der URL hängt, können Sie beliebige Tag-Kombinationen

• in Ihrem Browser als Lesezeichen speichern
• als RSS-Feed abonnieren können

So bleiben Sie ganz einfach auf dem Laufenden. 

Besonders cool ist übrigens die Funktion "Browse these bookmarks" rechts oben. Damit kann man sich durch die links angezeigten Links klicken. Einen nach dem anderen. Oben eine Navigationsleiste von delicious und darunter die Webseiten. 

• tools
• html
• firebug
• das-große-Buch
• css

Ursache war übrigens ein Fehler im Modultemplate mod_newsreader.tpl, bei dem ich selbst einige Dinge geändert. Ich weiß noch nicht genau, was es war, aber mit dem Originaltemplate mod_newsreader.tpl funktioniert alles wunderbar.

Es war eine der "Best Practice"-Beispiele  im Workshop auf der Contao-Konferenz 2011 am letzten Donnerstag: "Templates ändern - Nur wenn es unbedingt sein muss". Jetzt muss ich mich nur noch selbst an meine Ratschläge halten...  

• news
• contao
• blog

Es ist fast fertig (bin gerade beim Index) und bietet voraussichtlich über 650 Seiten im Hardcover für ca. 34,95€, also nochmal 5 Euro günstiger als das Bundle von Teil 1 und 2 es zuletzt war. Mehr dazu demnächst in diesem Theater.

• teil2
• teil1

Am Ende des 161-minutenlangen Techniwürze-Podcast "Contao total" habe ich den Song zum Besten gegeben, und David hat heimlich die Videoaufnahme in seinem iPhone aktiviert und die Darbietung gleich zu YouTube hochgeladen: 

• "Little Boxes - Webstandards-Mix" live 

Have fun. Den Text gibt's hier auch zum Nachlesen. 

• news

Erschienen ist das Buch am 28. September 2010 und ich habe eine kleine Website zum Buch erstellt, auf der es eine Leseprobe und weitere Infos zum Inhalt gibt:

• websites-erstellen-mit-contao.de

Wenn Sie also auf der Suche nach einem guten CMSystem sind, schauen Sie sich Site, Buch und Contao mal an.

• tools
• contao
• cms

1. Backup
2. Seitenvorlage fe_*.tpl anpassen 
3. Einbindung von Google Analytics anpassen
4. Live Update. 
5. Fertig. 

Und es hat wunderbar funktioniert. little-boxes.de läuft jetzt unter Contao. 

• typolight
• contao
• cms

Es ist eine gute Idee, HTML und auch CSS zu validieren. Besonders beim Lernen von HTML ist es eine große Hilfe und gut geeignet, um grobe Grammatik- und auch Flüchtigkeitsfehler zu finden, nach denen man später sonst stundenlang sucht. Aber ein Validator ist kein Selbstzweck:

Eine Validitätsprüfung ist eine automatische Grammatik- und Rechtschreibprüfung für HTML- und CSS-Code auf Basis eines definierten Wortschatzes.

 Dieser Vergleich trifft die Sache sehr gut. Der Rest steht in Dirks Beitrag.

• tools

TYPOlight hat ab der V2.9 übrigens einen neuen Namen und wird Contao heißen. Mehr dazu demnächst in diesem Theater, denn neben dem neuen Namen wird es einige phantastische neue Features geben. Great things ahead... 

Auf dem Usertreffen gab's übrigens eine Twitter-Wall. Hier ein kleiner Ausschnitt: 

• Tweets zu "TYPOlight und CSS" - #tlut10 css 

Looks as if they had fun, too ;-) 

• typolight
• css
• contao
• cms

• Keine Deklaration » Vererbung oder Standardwert 
  Findet der Browser überhaupt keine Deklaration, prüft er, ob die Eigenschaft vererbbar ist und schaut dann in den Vorfahrenelementen. Wird auch nichts vererbt, nimmt er den Standardwert.
• Eine Deklaration » Fertig 
  Findet der Browser genau eine Deklaration, gestaltet er das Element damit.
  
• Mehrere Deklarationen » Kaskade 
  Findet der Browser mehrere Deklarationen, werden diese zuerst nach Wichtigkeit (!important), dann nach Spezifität (Typ, Klasse, ID, Inline) und zum Schluß nach Reihenfolge sortiert, bis ein eindeutiger Gewinner feststeht. 

Die folgende Grafik visualisiert diesen Prozess und zeigt den "Browser auf der Suche nach einem Wert" für eine bestimmte Eigenschaft zur Gestaltung des HTML-Elements ist.

Mehr zu diesem Thema finden Sie in Kapitel 11 "Die Kaskade".  

• teil1

Das im Beispiel relativ positionierte #wrapper benötigt im IE6 noch hasLayout, damit die Werte für top, right, bottom und left korrekt berechnet werden. Das könnte z. B. so gehen: 

* html #wrapper { height: 1px; } 

Statt Sternchen-Hack kann man diesen Style natürlich auch per Conditional Comment in einem speziellen Stylesheet ausliefern. 

• teil1
• errata

Insgesamt sieht die Clearfix-Methode ohne Unterstützung des IE5/Mac jetzt so aus:

/* Der Kern von Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }

/* IE-Patch für IE 6*/
* html .clearfix { height: 1%; }

Zu den IE-Patches gibt es noch einige Alternativen wie zoom: 1, die ich in "Teil 2: Patches für diverse Internet Explorer" noch etwas näher erläutert habe. Die Beispieldatei in der Online-Version wurde aktualisiert.

• tipps
• teil1
• errata

In dem Artikel geht es zunächst darum, für wen ein solcher Baukasten in Frage kommt, wobei die Zielgruppe alle sind, "die eine Website brauchen und denen die Kombination aus wenig Webwissen und begrenztem Budget bekannt vorkommt". Danach geht es weiter mit einer kurzen Erklärung das Baukästen ein "gehostetes CMS" sind, bevor vier Vertreter kurz vorgestellt werden:

• Webnode.com (Kurzvorstellung im Artikel)
• Jimdo.com (Kurzvorstellung im Artikel)

Weiterhin werden die 1&1 Branchen-Homepage (Kurzvorstellung) und Edicy.com (Kurzvorstellung) beschrieben und einige Links zu weiteren, englischsprachigen Baukästen gelistet.

Fazit: Moderne Website-Baukästen haben sicherlich ihre Grenzen, aber für viele kleine und mittelgroße Websites sind sie auf jeden Fall eine Option. Da wächst eine echte Alternative zur manuellen Erstellung kleiner Websites heran.

• news
• cms
• teil0