YAML
Montag10. September 2007

Erst vor ein paar Tagen habe ich hier im Blog über den Ansatz von Chris Heilmann berichtet, gleichlange Spalten nicht mit CSS sondern nachträglich per Javascript zu erzeugen.

Dieser Weg ist immer dann sinnvoll, wenn gleichlange Container einen optisch ein reizvollen Effekt darstellen, für die Funktion der Webseite jedoch nicht zwingend relevant sind. Aus eigener Erfahrung würde ich sagen, dass dies in den meisten Fällen zutrifft. Nicht lange nachdem mein Blogbeitrag im Netz stand, meldete sich Dirk Ginader und wir bastelten eine Lösung für YAML auf Basis von jQuery. Die wenigen Codezeilen waren schnell geschrieben,  doch letzte Woche hatten wir beide viel umdie Ohren, sodass ich erst jetzt dazu komme, unser kleines Plugin mit dem Namen SyncHeight kurz vorzustellen.

Das Plugin synchronisiert die Höhe einer beliebigen Anzahl von Elementen innerhalb eines Layouts. Einzige Voraussetzung: Die Elemente müssen sich lediglich über einen gemeinsamen CSS Selektor ansprechen lassen (also beispielsweise eine gemeinsame CSS-Klasse). Als Beispiel hier der Aufruf zur Anpassung der Containerhöhen der YAML Subtemplates:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
}); 

Für Layouts mit fixer Breite war’s das bereits. Innerhalb eines flexiblen Layouts kann es nötig sein, die Angleichung der Containerhöhen zu aktualisieren wenn die Breite des Browserfensters geändert wird. Dazu kann der Resize Event von jQuery genutzt werden:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
  $(window).resize(function(){ 
    $('.subcolumns > div').syncHeight();
  });
});

Nachtrag 11.9: Befinden sich gleich mehrere Subtemplates auf der Seite empfielt es sich, den gewünschten Subtemplate-Container direkt über eine ID anzusprechen. Sollen hingegen ALLE Subtemplates innerhalb einer Webseite mit einem Schlag bearbeitet werden, so sind noch ein paar mehr Zeilen Javascript nötig. Hier hat sich Reinhard Hiebl bereits Gedanken gemacht schlägt folgenden Code vor:

$(document).ready(function(){
  var eachCase = '.subcolumns'; // for each lines/paragraphs
  var element = '> div'; // elements within lines/paragraphs from eachCase

  $($(eachCase)).each(function() {
    var el = $(this).find(element);

    el.syncHeight();
    $(window).resize(function(){
      el.syncHeight();
    });
  });
});

In diesem Fall werden alle Subtemplates einer Webseite erfasst, jedoch die Container-Höhen immer nur jeweils innerhalb eines Subtemplates synchronisiert.

Letztlich ist die Anwendung nicht auf YAML begrenzt. Über den Selektor können beliebige Elemente in ihrer Höhe manipuliert werden.

Download des Plugins (v1.0): jquery.syncheight.zip (Dual licensed under the MIT and GPL licenses)


Donnerstag06. September 2007

Am 29.09. nehme ich die freundliche Einladung war und werde wieder einmal einen Vortrag über YAML halten. Anlass ist der 21. Multimediatreff mit dem ambitionierten Thema “Web 2008: Konzeption & Praxis” (hier das Programm). Wie bereits beim Frankfurter Barcamp werden Jens Grochtdreis und ich gemeinsam eine etwa einstündige Session halten. Während Jens das Konzept des Frameworks beleuchten wird und, werde ich mich der Anwendung widmen und sowohl den YAML Builder vorstellen als auch ein konkretes Beispiel zusammenbauen.

Soweit die Kurzfassung von mir, denn die Planungen für den Vortrag laufen gerade erst an. Jens informiert bei sich deutlich umfangreicher, daher verlinke ich dankend. Flug und Hotel sind bereits gebucht und ich freue mich, endlich wieder ein paar neue Webkrauts-Gesichter kennen zu lernen.

Bis dahin ...


Donnerstag16. August 2007

Heute ist ein schöner Tag denn heute kann ich nach vielen Stunden abendlicher Spielerei mit jQuery ein kleines aber feines Tool vorstellen, welches in Zukunft die Arbeit mit YAML und das Verständnis für die Anwendung des Frameworks deutlich verbessern wird. Der YAML Builder startet als kleine Machbarkeitsstudie in der Version 0.3.

Nachdem ich mich jahrelang erfolgreich um Javascript gedrückt habe, waren die anfänglichen Erfolge umso mehr Ansporn, die Flexibilität von YAML über den Builder für den Nutzer sichtbar und leichter zugänglich zu machen. Die Inspiration für die Oberfläche kam - wie unschwer zu erkennen - vom Grids Builder für das YUI Framework von Yahoo. Wie beim Grids Builder schwebt die Toolbox über dem Layout und ist frei verschiebbar.

Was kann dieses knuffige Teil nun in dieser frühen Version 0.3:

  • Wahl des Doctypes: XHTML steht in der Strict- und in der Transitional-Variante zur Verfügung
  • Freie Wahl der in das Layout integrierten Basiselemente (#header, #footer, ...)
  • Freie Wahl der Anzahl der Content-Spalten (0 ... 3)
  • Beliebige Spaltenanordnung auf dem Bildschirm bei 2- und 3-Spaltenlayouts
  • Freie Eingabe der Layout- und der Spaltenbreiten
  • Innerhalb der Basiselemente können Subtemplates, sowie Dummy-Inhaltselemente per Drag & Drop eingefügt sowie ineinander verschachtelt werden
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des vollständigen XTHML-Markups
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des der relevanten CSS-Regeln für basemod.css sowie das IE-Patch-File
  • Umschaltmöglichkeit zwischen dem Entwurfsmodus und einer Voransicht des fertigen Layouts

Ein klein wenig stolz bin ich insbesondere auf die Möglichkeit des Hinzufügens bzw. des Verschachtelns von zusätzlich in das Layout eingefügten Elementen. Wer sich beispielsweise ein Bild über die Leistungsfähigkeit der Subtemplates machen möchte, dem empfehle ich, die Content-Spalten mal komplett abzuschalten und ein Layout aus frei verschachtelten Subtemplates zu erstellen. Also mir hat das bisher riesigen Spaß gemacht.

Eine ganze Menge für den Anfang. Ich bitte daher ausdrücklich um Feedback (Meinungen, Bug-Hinweise, Verbesserungs- und Erweiterungsvorschläge). Bedanken möchte ich mich in diesem Zusammenhang bei den drei Javascript-/jQuery-Göttern Timo Derstappen, Dirk Ginader und Tom Klingenberg, die sich meine Fragen zu unmöglichen Zeiten angehört und sich mit mir zusammen das Hirn zermartert haben.

Voll Funktionsfähig sollte der YAML Builder unter Firefox, dem IE7, Opera 9 und dem Safari 3 sein.  Im Safari 2.x gibts wohl derzeit noch ein kleines Problem mit den Tab-Reitern aber dieses Problemchen muss zunächst warten. Für das Kopieren des Quellcodes ins Clipboard verwende ich eine kleine Flash-Hilfe, was jedoch in 99% der Fälle installiert sein sollte. Ach ja, liebe Firmenadmins - Javascript sollte man anschalten, sonst geht da nix.

Also dann, viel Spaß beim Klicken.


Mittwoch01. August 2007

Das neue, frische Layout der YAML-Website ist gerade einmal 18 Tage online und schon haben sich die ersten bedient. Die Webseiten des TeamWiki sind zwar ganz offensichtlich noch nicht öffentlichkeitstauglich, sie sind jedoch bereits im Netz erreichbar und zeigen eine 1:1 Kopie meines Layouts. Funktionalität, Grafiken, Navigation - alles gleich. Einzig das YAML-Logo wurde gegen den TeamWiki-Schriftzug ausgetauscht und eine Reihe von Bugs.

Ich biete mein Layout nirgends öffentlich zum Download an, im Footer der Seite steht mein Copyright. Was ist daran bitte unverständlich? Nach Erlaubnis fragen - Fehlanzeige. Die Jungs verwenden übrigens YAML und bedanken sich auch mit einem Backlink. So ist mir die Seite in den Referrern aufgefallen.

Die Jungs sind per Email informiert und angehalten, das Layout umgehend zu entfernen. Wir werden sehen, wie es weitergeht.

UPDATE: Meine Nachricht ist offensichtlich angekommen. Die Jungs haben sich entschuldigt und das Layout entfernt bzw. durch das 2.5.2er Layout aus dem Download Paket ersetzt. Dagegen ist nichts einzuwenden, damit ist der Fall erledigt.


Dienstag31. Juli 2007

Zur Veröffentlichung von YAML 3.0 vor 14 Tagen war ich bei David Maciejewski kurzfristig zu einem Interview bei Technikwürze, dem Design- und Webstandards-Podcast eingeladen. Im Verlauf des Gespräches kam uns die Idee zur Verlosung eines Exemplars von “CSS-Layouts”. Die kleine Aufgabe dafür: Ein passender Slogan für YAML - abzugeben in den Kommentaren zur Podcast-Folge.

Und hier sind die Gewinner: Der gemeinsame erste Preis geht an Nils “1 tool – 1 million solutions” und Robert S. YAML – Ein Konzept – Ein Framework – 1000 Lösungen”. Natürlich sollten beide ein Buch erhalten. Nils hatte sich jedoch bereits im Vorfeld gemeldet und darum gebeten, im Falle des Gewinns (da er das Buch bereits besitzt) seinen Preis weiter zu reichen. Und diesem Wunsch komme ich natürlich gerne nach. Das zweite Buch geht daher an Jan für YAML. Zugänglichkeit trifft Flexibilität.”.

Die Ideen der beiden Gewinner finde ich in Kombination besonders gut, weil kurz und eingänglich: “Ein Konzept - Eine Million Lösungen”. Dieser Slogan wird zum Dank auch demnächst die Startseite ziehren.

Robert S. und Jan sind daher aufgerufen, sich mit der in ihren Kommentaren bei Technikwürze verwendeten Emailadresse bei David Maciejewski zu melden und Ihre Adressen zu hinterlassen. Lohn der kleinen Mühe ist jeweils ein persönlich gewidmetes Exemplar des Buches, welches nun schnellstmöglich per Post zu den Gewinnern gelangen soll. Auch allen anderern Teilnehmern danke ich für die vielen Ideen und wünsche weiterhin viel Spaß mit YAML.

Nachtrag: Aufgrund kleiner persönlicher Differenzen mit der Mehrsprachigkeit meines neuen CMS hinter YAML.de musste dieser Beitrag zunächst hierher verschoben werden. Wär ja auch zu schön, wenn alles gleich reibungslos laufen würde.


Seite 7 von 14 Seiten

« Erste  <  5 6 7 8 9 >  Letzte »