CSS & XHTML
Offensichtlich hat sich Chris Heilmann die Nacht um die Ohren geschlagen (oder auch nur ein paar Minuten davon) und heute morgen eine recht nette Lösung für YUI Grids und das immer wieder gern diskutierte Problem gleich langer Spalten gepostet. Der Ansatz gefällt mir. Man verzichtet auf das leidige CSS-Gehacke, welches je nach Komplexität des Layouts gelegentlich zu unerwarteten Nebeneffekten führen kann und überlässt die Sache Javascipt. Wer mehr zum Thema wissen möchte, Ed Eliot hat dazu vor einiger Zeit eine schöne Übersicht veröffentlicht.
Bei der Gelegenheit trifft es sich natürlich gut, dass sich der Aufwand innerhalb eines CSS-Frameworks mit bekannten Containerbezeichnungen sehr in Grenzen hält. Was sind nun die Vorteile? Erstens, das CSS-Gehacke entfällt vollständig. Zweitens diese Lösung funktioniert bei angeschaltetem Javascript auch in älteren Browsern - ein Punkt, bei dem CSS-Lösungen regelmäßig scheitern und drittens - wer Javascript ausgeschaltet hat, der bekommt die Seite dennoch in normalem Look & Feel, denn auch hier könnte man per min-height noch evlt. Probleme sehr leicht abfangen. Der einzige Aufwand der entsteht - man muss ein kleines Script in sein Layout einbauen.
Ehrlich, ich finde diesen Weg knuffig und und in Verbindung mit meinem geliebten jQuery auch für die YAML Subtemplates für vorstellbar.
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.
cssneustart.de hat es sich auf die Fahnen geschrieben, das deutsche Äquivalent zum cssreboot.com zu werden. Die Idee hatten die vier Jungs bereits vor einigen Monaten, der offizielle Start war für den 1. Juli geplant, musste jedoch kurzfristig auf den 1. August verschoben werden. Nun ist die Seite zwar bereits seit einigen Tagen online, der offizielle Start ist jedoch heute denn seite heute morgen sind die ersten 41 Neustartwilligen mit Ihren Layouts zu bewundern und zu bewerten.
Hintergrund der Aktion ist es, Beispiele für Modernes Webdesign zu zeigen (und zwar vom Hobbybastler bis zum Profi) sowie das Verständnis für Webstandards und Barrierefreiheit in Deutschland zu wecken. Mit dieser Motivation sind die vier angetreten und daher gilt es sie in aller Form zu unterstützen.
Ich bin mit YAML übrigens einer der Neustart-willigen, denn ursprünglich hätte der Start von Neustart.de und die Veröffentlichung von YAML 3 auf dem 1. Juli gelegen. Aber wie es so ist - Verzögerungen gehören zum Spiel - und davon lassen wir uns alle den Spaß an der Sache nicht verderben.
Bleibt mir nur noch, dem Projekt viel Erfolg, viele willige Neustarter zu wünschen. Ich stöbere jetzt jedenfalls erstmal die Liste durch ...
Dass YAML sich hervorragend für die Erstellung flexibler Layouts eignet, hat sich mittlerweile - zumindest im deutschsprachigen Bereich - schon sehr weit herumgesprochen. Dass sich YAML auch über die deutschen Grenzen hinaus herumgesprochen hat, wurde mir vor kurzem so richtig deutlich.
Ich bekam eine freundliche Mail von Pralos Filo, dem Koodinator des ukrainischen KDE Entwicklerteams. Er wollte gern mein O.K. für die Einbindung von YAML in einen neuartigen Linux-Desktop. Das Projekt mit dem Namen “P.I.O.S. for all” (eine Webseite ist bereits in Vorbereitung) klingt außerordentlich spannend. Auf Grundlage eines Entwicklerzweigs des KDE-Desktops der Version 4, soll ein völlig neuer Ansatz bei dem Rendering der Oberfläche verfolgt werden, die vollständig als Weboberfläche zu verstehen ist. Die Basis der Rendering-Engine wird dabei die KHTML-Bibliothek sein, die auch Konqueror und Apples Safari (indirekt) antreibt. Dieser Desktop nutzt XML, XHTML, CSS, Javascript und XSLT. Interne Basis der Fensterroutinen soll YAML werden, da es sich für die Darstellung flexibler Inhalte bereits bestens bewährt hat. Die Dynamik wird von jquery beigesteuert. Eine erste Alpha-Version soll Ende April vorgestellt werden. Auslöser der Idee war wohl Trovsters XHTML/CSS-Version des XP-Desktops.
Welche Vorteile hat ein solcher Desktop? Er vereint die Stabilität und Effektivität aktueller Webtechnologien und erlaubt Nutzern wie Softwareentwicklern einen einfachen und direkten Eingriff in die Oberfläche. Für den Nutzer bieten sich damit ganz neue Gestaltungsmöglichkeiten. Die Wahl eines Hintergrundbildes ist in P.I.O.S. nicht mehr als kalter Kaffee. Auf diesem Desktop können sogar die Hovereffekte der Systemicons nach Belieben modifiziert werden, wenn man sich ein klein wenig mit CSS und Javascript auskennt. Für Softwareentwickler könnte der Deskop ebenfalls sehr interessant werden, weil auf diese Weise die Grenzen zwischen der Offline- und Onlinewelt bei der Erstellung von Benutzeroberflächen entgültig verschwinden. Dank CSS und der Flexibilität von YAML lässt sich der Desktop sehr leicht an unterschiedlichste Ausgabemedien vom 24’’ TFT bis hin zum PDA anpassen. Er kommt dabei mit einem Minimum an Speicherplatz aus. Weitere Anwendungsmöglichkeiten bieten sich im Sektor der Unterhaltungselektronik (z.B. HiFi-Anlagen), wo grafische Benutzeroberflächen immer beliebter werden, bei gleichzeitig begrenzten Hardware-Resourcen. Und in allem mitten drin: YAML.
Sobald es Neuigkeiten zu vermelden gibt, werde ich natürlich hier weiter davon berichten, bis dahin noch ein schönes Wochenende.
Nachtrag 2. April: Vielen Dank fürs Mitmachen an alle, die wussten, was läuft und diesen Beitrag verlinkt haben. Ein fröhliches “April, April ...” an alle, die mir geglaubt haben. Übrigens, “PIOS for all” und “Pralos Filo” sind zwei Anagramme für “Aprils Fool”.
Dieses Zitat von Mathias Schäfer klingt nun wirklich nicht gut:
Nachdem sich mehrere Protagonisten aus dem Projekt verabschiedet haben, ist die Zukunft von SELFHTML tatsächlich unsicher. Die Stimmung ist durch die bedauerlichen Entwicklungen wie gelähmt und das Projekt scheint unstrukturiert und ziellos zu treiben.
Offensichtlich hat es bereits arg geknirrscht im Gebälk des Projekts und hat nun zum Absprung von u.a. SELFHMTL-Gründer Stefan Münz geführt. Auslöser der Misere ist offensichtlich die Uneinigkeit der Redakteure über die technische Basis für die geplante grundlegende Überarbeitung der bekannten Online-Dokumenation. Wäre schade, wenn dieses Projekt aufgrund dessen sterben würde.
Neueste Kommentare
- molily | 30.07.10 (20:21 Uhr)
Alles valide oder was?
- Jens Grochtdreis | 30.07.10 (14:56 Uhr)
Alles valide oder was?
- Ingo Chao | 30.07.10 (13:06 Uhr)
Alles valide oder was?
- Jens Grochtdreis | 30.07.10 (11:54 Uhr)
Alles valide oder was?
- domingos | 29.07.10 (14:03 Uhr)
Alles valide oder was?
- Eric Eggert | 29.07.10 (11:22 Uhr)
Alles valide oder was?