Was ist ein „Baustein“?

Bausteine sind mir zuerst als Teil des CMS Textpattern aufgefallen. Diese Bausteine, die im englischen Original „form“ heißen, sind wiederverwendbare XHTML-Codeausschnitte, die mit Textpattern-Code angereichert werden können.

Das Baustein-Prinzip ist jedoch nicht auf Textpattern begrenzt, im Gegenteil: Es hat sich als sinnvoll herausgestellt, wiederverwendbaren Code zu benutzen. Dies beugt auch der missbräuchlichen Verwendung von divs vor.

Zudem bringen Bausteine einen klaren, leichter zu lesenden XHTML-Code. Ein ähnliches System sind Mikroformate. Diese gelten jedoch nicht intern sondern seitenübergreifend, weshalb ich hier nicht auf sie eingehen will.

Bausteine in der Praxis

Bausteine benötigen eventuell eine genauere Auseinandersetzung mit den einzelnen Elementen der Seite. Als Beispiel ziehe ich das Recoding der Startseite von Focus Online heran, das ich im Januar angefertigt habe.

Dort gibt es mehrere Elemente, die einen ähnlichen Aufbau haben: Die Teaser.

Da gibt einen Teaser mit großem Bild und mehrere ohne oder mit kleinen Bildern. Davon sind einige in den beiden Übersichtsspalten am Ende der Seite.

Im Bild sieht man alle drei Teaserarten, von oben nach unten:

Teaserbeispiele des Focus

  1. Der Aufmacher: Steht am Anfang der Seite und erhält die Top-Meldung.
  2. Weitere Top-Meldungen: Steht im oberen Seitenteil in der Mittelspalte.
  3. Top-Meldungen nach Resort: Im unteren Seitenteil in einer der beiden Spalten.

Nun kommt es natürlich darauf an, wie man diese Teaser als XHTML-Code beschreibt, Anhaltspunkte sind auf folgender Grafik mit entsprechend eingezeichneten Bereichen zu sehen:

Teaserbeispiele des Focus mit Markierung der XHTML-Elemente

Code

Schauen wir uns folgenden Codeausschnitt an:

Die Angabe der zusammengesetzten Klassennamen first teaser (Zeile 1) und teaser withimage (Zeile 17) ist dabei unerheblich. So benannte Klassen sind aber wesentlich leichter lesbar als ein äquivalentes teaser first bzw. withimage teaser. Welche Regel letztendlich angewendet wird, wird durch die Spezifität festgelegt, nicht durch die Reihenfolge der Klassennamen.

Von diesen XHTML-Grundgerüsten leiten sich folgende Styleangaben ab:

Dabei wird auf die doppelte Bezeichnung von Klassen im Stil div.ersteklasse.zweiteklasse verzichtet, da der Internet Explorer (zumindest bis Version 6) damit Probleme haben kann1. Stattdessen wird die Spezifität genutzt um das gewünschte Ergebnis zu erreichen. So wird insbesondere im Abschnitt für die Kategorien immer das div#kategorien vorgesetzt um unerwünschte Effekte zu vermeiden.

Anmerkung zu den Zeilen 118-123:
Der Internet Explorer bis Version 6 zeigt den unteren Rand für die Teaser nicht an (definiert in Zeile 4). Diese simulieren wir indem wir einfach den Kategorielinks einen unteren Rand geben. Problem dabei: Browser, die den Quelltext korrekt rendern zeigen zwei übereinanderliegende Linien und dadurch einen doppelt dicken Rand. In den Zeilen 122-124 wird dieser Rand per Child-Selektor wieder entfernt. Der IE versteht die Anweisung nicht und übergeht diese deshalb. Im Internet Explorer 7 tritt diese Anomalie nicht mehr auf, zudem versteht er Child-Selektoren und verhält sich daher wie alle anderen standardkonformen Browser.

Mit wiederverwendbaren Bausteinen erleichtert man sich nicht nur die Arbeit beim Code-Schreiben, sondern vereinfacht auch den CSS-Quelltext, da man eventuelle Doppeldefinitionen vermeidet.

1 Siehe dazu: thestyleworks.de/tut-art/ie7.shtml#multiple-classes


Was macht das Plugin?

Das Plugin erlaubt die Angabe von Screen- und Druck-Stylesheet. Das letztere wird entweder durch die Angabe ?do=print am Ende der URL oder durch das Anhängen eines Zusatzes wie /print/ an die URL angesprochen (Clean URLs).

Vorteile dieser Implementation

Der wohl wichtigste Vorteil ist, dass der Benutzer sieht was er druckt. Zudem sind die “Druckvorschauen” direkt verlinkbar (auch wenn Verlinkbarkeit sooo Web 1.0 ist).

Installation

Einfach das Plugin herunterladen. Den Inhalt der Textdatei per Copy&Paste im Textpattern-Interface unter Administration -> Plugins einfügen und das Plugin aktivieren.

Die Codezeile, die <txp:css /> beinhaltet kann dann mit <txp:egg_printcss /> ersetzt werden. Zur weiteren Benutzung dieses Tags siehe unten.

Für Clean URLs muss die .htaccess-Datei von Textpattern bearbeitet werden. Vor der Zeile RewriteRule ^(.*) index.php muss folgendes eingefügt werden:

RewriteBase /
RewriteRule ==^([^/]+)drucken/?$ drucken== [R,L]
RewriteRule ^(.+)/drucken/?$ ?do=print

Für Übersetzungen kann drucken durch entsprechende Übersetzungen ersetzt werden. Lediglich das letzte ?do=print muss erhalten bleiben.

Parameter für <txp:egg_printcss />

Diese Funktion hat zwei Parameter:

  • screen (Vorgabe: default)
  • print (Vorgabe: print)

Die beiden Parameter nehmen als Werte jeweils die Namen von Stilvorlagen auf, wie sie unter Präsentation -> Stilvorlagen zu finden sind.

Beispiel:

<txp:egg_printcss screen="new" print="newprint" />

Ausgabe: <link href="/textpattern/css.php?n=new" media="screen, print" rel="stylesheet" type="text/css" /> (Bildschirmausgabe)

Oder: <link href="/textpattern/css.php?n=newprint" media="screen, print" rel="stylesheet" type="text/css" /> (Druckausgabe)

Der Tag <txp:egg_print_link />

Folgende Parameter können diesem Tag mit auf den Weg gegeben werden:

  • title: Linktext, Vorgabe: “Print”
  • clean: Wenn auf 1 (Vorgabe) gesetzt wird der Clean URL-Modus benutzt
  • cleanstr: Der Name, der in der .htaccess für die Clean URLs benutzt wurde. Vorgabe: “print”

Beispiele:

<txp:egg_print_link title="Print this!" />

Ausgabe: <a href="http://yourdomain.com/section/title/print/">Print this!</a>

<txp:egg_print_link title="Druckvorschau" cleanstr="drucken" />

Ausgabe: <a href="http://yourdomain.com/section/title/drucken/">Druckvorschau</a>

Hilfsfunktionen <txp:egg_if_print /> und <txp:egg_if_not_print />

Diese Funktionen helfen druckspezifischen Code anzuzeigen oder wegzuhalten. Man könnte die Sidebar verstecken oder einen Druckvorschau anzeigen und in derselben verstecken.

Beide Tags haben keine Parameter und können nicht per <txp:else /> angesprochen werden.

Implementationen

Momentan keine bekannt.

Status

Das Projekt ist noch im Entwicklungsstatus, das heißt alles könnte sich noch ändern, das schließt Tagparameter mit ein. Bei entsprechenden Änderungen werden diese natürlich vor einem Update entsprechend kenntlich gemacht.

Download

Version 0.25


Doch “Am Tag als Bobby Ewing starb” beweist etwas anderes viel deutlicher und eindrucksvoller. In den 80ern hatten viel mehr Menschen klare Ideale, und es war auch wesentlich einfacher, diese zu vertreten. Helmut Kohl, die Atommafia, die Polizei – alle hingen irgendwie zusammen und bildeten ein klares Feindbild.

Der Gegner, gegen den es sich zur Verteidigung der Ideale zu richten galt, war somit deutlich auszumachen – umgekehrt natürlich genauso. Den Menschen im Westdeutschland der 80er ging es zudem auch wirtschaftlich ausgesprochen gut. Sorgen machte nicht die nackte Existenz, sondern die Volkszählung, das Waldsterben, die Atompolitik, Kriege und Hunger in fernen Ländern.

“Am Tag als Bobby Ewing starb” macht die Sehnsucht nach all dem deutlich wie kein Film zuvor. Sich in der heutigen Zeit Ideale zu leisten kollidiert mehr denn je mit wirtschaftlichen Existenzfragen, und auch ein klares Feindbild ist nicht auszumachen.

Die kapitalistische Gesellschaftsform in ihrem aktuellen Zustand krankt an so vielen Ecken und Enden, daß die Menschen nicht nur ständig damit beschäftigt sind, Löcher zu kitten, sondern überdies auch überhaupt nicht mehr wissen, gegen wen sich ihr Groll überhaupt richten soll. Da paßt es, daß nun auch das Ende der 68er Generation und ihres immer mehr zur Symptompolitik verkommenen Ausverkaufs der Ideale dräut. Depression ist angesagt.

In Lars Jessens Film liegt all das unter der von ulkiger Ausstattung und nostalgischem Witz geprägten Oberfläche, womit “Am Tag als Bobby Ewing starb” eigentlich mehr über das Heute erzählt als über das Gestern. Schnitt.de

Veröffentlicht in Film

Bei Klingeltonhilfe (alle Links deaktiviert, da Projekt aufgegeben) geht es um Probleme mit Klingeltönen und deren Anbieter in mannigfaltiger Art. Neu ist unter anderem das Layout und die Sektion “News”, die blogartig Neuigkeiten und Fälle aus der täglichen Praxis behandeln soll.

Zum ersten Mal in meinen Projekten werde ich zudem auf Tagging setzen, ich denke, dass sich diese Verschlagwortung positiv auf die Informationsfindung auswirkt.

Update: Zudem habe ich eine Druckvorschau entwickelt, die per Clean URLs funktioniert:

An die meisten URLs kann /drucken/ angehängt werden um die Druckvorschau aufzurufen. Leider funktioniert das noch nicht wirklich überall, bspw. auf den Übersichtsseiten der Sektionen. Ausprobieren:

  • …/jamba-bietet-kindersicherung-an
  • …/jamba-bietet-kindersicherung-an/drucken/

Das ist komplett als Plugin verfügbar. Sobald alles funktioniert steht es der Textpattern-Gemeinde natürlich zu Verfügung.


Willkommen beim ersten jährlichen CSS-Nackt-Tag, der am 5. April 2006 stattfinden wird. Die Idee hinter diesem Event ist die Förderung von Webstandards. Ganz einfach. Das schließt die korrekte Benutzung von (X)HTML, semantischer Textauszeichnung, einer guten Hierarchie und – na ja – ein witziges Wortspiel mit ein. Ich meine, wer will nicht nakt sein? Quelle: CSS Naked Day von Dustin Diaz

Und Erics Weblog macht mit.