Vor genau einem Jahr habe ich das eigene Weblog mal wieder optisch grunderneuert. Zuvor hat keine Gestaltung den ersten Geburtstag feiern können, zu kritisch und gierig war ich, was neue Verbesserungen betrifft. Nach zwölf Monaten ist es aber kein Zufall, dass ich hier kaum etwas verändert habe. Als ich neulich die Frage gestellt bekam, auf was ich als Produkt meiner Arbeit so richtig stolz bin, dann ist es ganz klar die aktuelle Form dieser Seite.

Dass individuelle Artikelgestaltung so ein großes Thema wird und weiter bleiben wird, habe ich selbst wirklich nicht erwartet. Gefühlt waren es endlose viele, wirklich dann wohl fünf Listen, in denen dieses Weblog mit vielen anderen als Vorzeigeobjekt zum Thema unique article design vorgestellt wurde. Viele davon haben mich dann doch sehr breit grinsen lassen. Das wichtige jedoch ist der eigene Spaß am Schreiben, Gestalten und Entwickeln neuer Inhalte. Auch nach einem Jahr bin ich vom Ansatz hier mehr als überzeugt und wenn ich nicht viel ändern werde, dann heißt dies, dass hier vieles wirklich funktioniert.

individuelle Artikelgestaltung

Als ich Sieben veröffentlicht habe, gab es fünf individuell gestaltete Artikel. Heute sind es mehr als fünfzig. Offensichtlich ist der Ablauf heute viel effektiver als früher. Ich glaube auch meine Form des Formats gefunden zu haben. Kurz und doch wiedererkennbar. Ich bin weggekommen von den episch langen Blogartikeln. Ich glaube dafür funktioniert dieses Format weniger gut. Wenn ich frühe und heutige Film-Einträge miteinander vergleiche, gibt es doch große Unterschiede, aber das neue Format ist was ich selbst mittlerweile bevorzuge. Vielleicht kommt mal wieder die Zeit wo Text dominiert, aber in naher Zukunft bleibt alles wie gehabt.

Uniques ist von einer kleinen persönlichen Sache ziemlich groß geworden. Seit der Veröffentlichung ist diese Seite, die mit Abstand populärste. Der Feed hat in kurzer Zeit alle anderen Feeds deklassiert. Wenn ich gewusst hätte, wie gut es angenommen wird, hätte ich Uniques auf eine andere Domain installiert. Möchte mich nicht selbst loben, aber ich habe seitdem viele andere Angebote dieser Art gesehen, finde meine aber die effektivste. Hier werde ich bald an der Seite selbst was ändern. Ziel ist es mehr Beispiele pro Seite darzustellen, was mir noch zu viel Browserperformance verbraucht. Zwanzig Bilder zu skallieren, zu interpolieren und mit CSS3 auszustatten, bringt die Rendering-Engines der Browser unter Last.

Ich habe sehr viele Details im Hintergrund verändert und glaube jetzt wunschlos glücklich zu sein. Mittlerweile bietet mir die WordPress-Installation wirklich jedes Werkzeug. Ein Schnellschuss ist heute nicht mehr als solcher zu erkennen. Wenn ich gut drauf bin, dauert ein aufwendiger Artikel nicht länger, als früher nur was Textlastiges. Ich gebe zu, dass dies sicherlich ein positiver Nebeneffekt ist, Sieben noch lange nicht einzustampfen. Ich bin jezt gerade mal an dem Punkt, wo ich wirklich schnell und effektiv damit arbeiten kann und das ist etwas, was ich nicht mehr missen möchte.

vorwärts

Große Änderungen spare ich mir noch lange auf. Wenn ich hier mal wieder Grundlegendes ändere, dann so richtig. Auf meiner Liste für eine mögliche achte Version stehen “echtes” HTML5, ein flüssiges Grundraster, Small-Screen-Version und ein paar mehr Freiheiten bei der Artikelgestaltung. Diese Ziele sind noch ganz weit weg. Was ich in naher Zukunft ändern möchte sind kleine Details.

Der Kopf der Seite ist zum Sorgenkind geworden. Das Logo zerstört in vielen Fällen die Hierarchie der Seite. Zusätzlich sind einige Menüpunkte hinzu gekommen, die eigentlich nicht angedacht waren. Zeit hier mal aufzuräumen. Wie genau weiß ich noch nicht. Ich möchte definitiv die “Ecke” behalten, da diese wunderbar optisch funktioniert. Vermutlich werden Logo und Menü nur etwas schrumpfen und neu positioniert. Muss ich mal schauen, wie sehr einzelne Artikel davon profitieren.

Natürlich mache ich mir immer wieder Gedanken, wie ich aktuell gestaltete Artikel in fünf oder zehn Jahren behandeln werde. Grundsätzlich gilt: die Gestaltung ist nur Oberfläche, die sich einfach abziehen lässt. Inhalt und Form sind nicht miteinander verbunden. Ich habe auch versucht die CSS-Struktur möglichst flexibel zu halten. Wenn plötzlich HTML5-Tags auch hier Einzug halten, sollte alles weiter funktionieren. Allerdings sind alte Artikel wirklich alte Artikel und vermutlich wird meine Lösung so aussehen, dass ich Sieben als Basis dafür nutzen werde. Wer im Jahr 2013 jemand über E.T. lesen möchte, wird hoffentlich die aktuelle Gestaltung sehen.

Feedback: 1 Kommentar

Zur Zeit werden hier einige Dinge wohl nicht so richtig funktionieren. Es entsteht grad ein neues Archiv und irgendwie entpuppt sich das Ding als echt gemein und fies. Nicht nur dass ich schon _ben einspannen musste. Soweit funktioniert auch alles wie gewünscht, nur kommen jetzt die nervigen Details ans Tageslicht.

Bisher nutze ich hier mit Zufriedenheit das Widon’t-Plugin, was Witwen¹ (primär bei Überschriften) vermeiden soll. Widon’t greift hier im WordPress-Backend ein und bearbeitet alles, was als Titel eines Eintrags ausgegeben wird. Um es kurz zu halten: ich brauche nun eine Titelausgabe mit und ohne Widon’t, was nicht so einfach wie gedacht ist.

Eine neue Möglichkeit wäre jQuery und auch hier existieren schon Lösungen, die allerdings bei mir nicht makellos laufen möchten. Den Effekt brauche ich nur nur bei Titeln als Überschrift und den Zwischenüberschriften eines Eintrags. Die jQuery-Lösung ist jedoch tag- und nicht inhaltsbasiert. Widon’t arbeitet mit Inhalt. jQuery mit Tags oder besser formuliert, mit Selektoren. Da einmal ein H2- und einmal ein H2 mit Link (h2 a) zu bearbeiten wären, brauche ich hier schon ein zusätzliches Event. Nicht die elegante Lösung aber immerhin eine funktionierende. Wünschenswert wäre, Widon’t im Template als Variable bei Ausgabe der Titel zu nutzen oder halt zu deaktivieren.

Feedback: 1 Kommentar

Ich brauche mal Hilfe bei WordPress, Google kann mir keine brauchbares Antwort liefern. Ich möchte mein Archiv nochmal ändern. Hierzu brauche ich eine passende HTML-Struktur und diese aus WP zu quetschen, entpuppt sich als Problem.

Einfach ausgedrückt, benötige ich logische (separate) HTML-Elemente für eine Ordnung aller Artikel nach Jahren und Monaten. Momentan bekomme ich nur eine lange Liste, die sämtliche Artikel nach Datum in die entsprechenden Monate ordnet. Damit bekomme ich aber bisher keine separate Liste für jedes einzelne Jahr. Solch eine Liste möchte ich für jedes Jahr separat, ohne dafür manuell jede Jahreszahl hart als fixe String-Variable zu nutzen. Ungefähr sowas möchte ich erreichen. Es müssen nicht unbedingt Lisen sein. Kernpunkt ist, dass ich eine quasi doppelte Einordnung für jeden Artikel benötige. Einmal für den Monat und für das Jahr.

2008
    - Januar
    - Februar
        - Artikel 1
        - Artikel 2
        - Artikel 3
        - ...
    - März
    - ...
    
2007
    - Januar
    - Februar
        - Artikel 1
        - Artikel 2
        - Artikel 3
        - ...
    - März
    - ...

2006
    - Januar
    - Februar
        - Artikel 1
        - Artikel 2
        - Artikel 3
        - ...
    - März
    - ...   

Ich stecke hier fest. Eigentlch doch keine schwierige Sache. Sowas muss sich doch irgendwie umsetzen lassen.

Update

Mal ein Ausschnitt aus dem Quellcode derzeit. Alles noch nicht ansehnlich, zum Testen halt.

Feedback: 11 Kommentare

Wieder ziemlich viel gelernt beim Machinist-Eintrag, was WordPress und CSS betrifft. Wie üblich waren eigentlich nur die Details schwieriger. Ich glaube es war an der Zeit mal mehr auszuprobieren. Gleichzeitig habe ich jedoch auch aus dem Wechsel von Movable Type zu WordPress gelernt, wie wichtig es ist, Daten möglichst neutral zu halten, skalierbar, importierbar…

Drum mein Ansatz auch diesmal, Änderungen Ja mit einem dicken Aber hinterher. Ziel ist es, jeden noch so individuell gestalteten Eintrag, auch ohne seine eigenen Änderungen, also mit den Standard-Formaten, funktionieren zu lassen. Grundlage dafür ist, sämtliche Änderungen der Optik, fern vom WordPress-Backend zu halten. Kein Skript und kein CSS soll mit dem Inhalt vermischt werden.

Schon jetzt löse ich diese kleinen Bildchen bei neuen Einträgen mit WordPress’s Customfields/Spezielfeldern. Diese kleine versteckte Option beim Schreiben neuer Einträge. Damit ist es möglich, Einträgen zusätzliche Daten zu verpassen und diese an beliebiger Stelle abzufragen. Dafür reichen sogar meine sperlichen PHP-Kenntnisse.

Um also einem Eintrag ein individuelles Stylesheet zu verpassen, habe ich eine neue Variable generiert. Diese lautet ‘entry_css’ und dafür existiert nun auch ein Custom-Field im Backend von WordPress:

Spezialfelder im WordPress-Backend

Jetzt gilt es, diese Variable im Template zu testen, abzufragen und entsprechend für Fall-X, den gewünschten HTML-Code einzufügen. Die Variable entry_css soll überprüft werden und im Fall eines entsprechendes Eintrags soll anschließend ein Stylesheet geladen werden. Stylesheets werden im head-Tag der Seite geschrieben, also das Header-Template rauskramen und diese wenige Zeilen einfügen:

[RAW]
<?php // teste entry-css
    $entrycss = get_post_meta($post->ID, 'entry_css', $single = true); ?>
<?php if($entrycss !== '') { ?>
<link rel="stylesheet" href="<?php echo get_option('home') ?>/archiv/entry-styles/<?php echo $entrycss?>.css" type="text/css" media="all" />
<?php } else { echo ''; } ?>
[/RAW]

Der Zauber findet in Zeile 2 und 3 statt. Zeile 2 generiert eine neue Variable Namens ‘entrycss’, dafür liest es das Custom-Field ‘entry_css’ aus, aber auch nur, für den Fall, den WP als Single-Archive definiert. Einfach ausgedrückt, ich brauche dieses Stylesheet nur, wenn die Seite allein betrachtet wird. Diese Aufgabe übernimmt dieses kleine $single = true in der zweiten Zeile. Zeile 3 wiederrum leitet eine kleine if-Abfrag ein. Ich brauche den zusätzlichen HTML-Code nur, wenn ‘entrycss’ einen Wert enthält. Findet die Abfrage einen Wert, wird Zeile 4 ins Template geschrieben. Falls ‘entrycss’ leer ist, wird auch nichts Zusäzliches ins Template geschrieben (Zeile 5).

Die vorherige Lösung, sah vor, dem body-Tag jeweils eine andere ID zu geben und diese in solch ein Spezial-Feld zu schreiben. Allerdings ist man damit recht unflexibel und schreibt endlos viele Styles in das Standard-Stylesheet. Damit geht nach kurzer Zeit die Übersicht komplett flöten und man findet zu einer Klasse/ID dutzende verschiedene Formate. Keine gute Lösung und drum lieber ein separates Stylesheet. Das war schon alles an Vorarbeit, der Rest ist Gestaltung.

der eigentliche Aufwand - Gestaltung

Der Gestaltung geht immer erst die Erfassung vom Inhalt vorraus. Im Falle von The Machinist, war es schon eine Weile her, dass ich den Film gesehen habe, also DVD einlegen, Bierchen holen, Film genießen und Notizen machen. Meistens notiere ich mir ein paar wichtige Zeit-Marker im Film (um später schneller Bilder zu finden), Zitate und erste kleine Denkansätze, was man wie formulieren könnte.

Das reine Schreiben der Texte, erstreckt sich meist über mehrere Tage. Je nach Lust und Zeit. Manchmal fließen die Wörter und manchmal eben nicht. Steht der Text, habe ich einen Überblick über den Umfang. Bilder werden oft immer ganz zum Schluss gemacht, das ist so ziemlich das Unangenehmste an der ganzen Prozedur.

Lange Zeit sah die Überschrift so aus. Ebenfalls zu sehen, ein Versuch die Pullquotes wieder mit einer Serifen-Schrift zu setzen. Passte aber nicht wirklich zum Rest der Seite und wurde deshalb ersetzt.

Ist der Text erfasst und die Bilder vorbereitet, kann ich mir Gedanken, über das Layout machen. Ich bin kein Vorreiter, was Individualisierung einzelner Seiten im Web betrifft. Da waren schon viele vorher dran. Gemeinsamkeiten sind jedoch sofort erkennbar. Bei fast allen Beispielen bleibt das Grundrastergleich. Variation findet man primär bei:

• Schriften
• Farben
• Position der Elemente auf dem Raster (wobei sekundäre Elemente nicht varrieren)

Dieses Beispiel brachte so ziemlich gute Vorrausetzungen mit. Die Optik des Films bietet sich zu sehr an. Was fehlte war ein passendes Hintergrundbild. Stock.XCHNG bietet hier eine sehr große Auswahl an Bildern, die kostenlos für solche Zecke wie meinem, genutzt werden können. Nach wenigen Minuten waren mehr tolle Bilder gefunden, als ich verwerden konnte.

So oder so ähnlich sieht mein Dokument aus, dass alle gesammelten Bilder für die Gestaltung enthält. Wenn ich hier was Interessantes finde, dann definiert sich daraus automatisch die Farbigkeit und auch die Typografie. Der Rest ist Finden und Ausfeilen von Details.

Die Bilder landen im Bildbearbeitungsprogramm, bis ich einen optischen angenehmen “Haken” für die Seite finde. Daraus entwickeln sich ein paar kleine Skizzen auf Papier, um dann im Indesign deren Funktion zu testen. Das klappt erstaunlich gut bisher. Die Bilder lassen sich leicht rüberziehen und platzieren, während ich gleichzeitig die Schrift zum Bild testen kann. Einziger Haken ist die Darstellung oder genauer gesagt die Größe. Für Indesign sind halt alle Elemente skalierbar und so sieht entsprechend die Darstellung aus, für meinen Zweck jedoch, funktioniert es.

Farbigkeit, Details und Stolperfallen

Mit heller Schrift auf dunklem Hintergrund ist gute Lesbarkeit schwieriger zu erzielen. Trickreich ist ein angenehmer Kontrast und die richtige Schriftgröße. Im normalen Stil, hat meine Schrift eine Größe von 12 Pixeln. Bei umgekehrtem Kontrast, erschien mir die Lesbarkeit mit 12 Pixeln einen Tick zu klein. Es mag nur 1 Pixel sein, aber dieser sorgt für deutliche angenehmere Lesbarkeit. Ein weitere winzige Änderungen ist die Laufweite bei heller kursiver Schrift auf dunklem Grund. Hier habe ich im CSS einen Tick (einen halben Pixel im genau zu sein und ja das funktioniert) den Abstand zwischen den Buchstaben (letter-spacing) erhöht.

Den Trailer direkt am Anfang zu zeigen funktioniert eigentlich relativ gut und wird sicherlich in einem anderen Beispiel Anwendung finden.

Der Kopf bzw. die Überschrift hat auch knapp ein Dutzend Versionen gesehen. Irgendwie erschien mir keine wirklich passend. Wenn schon, denn schon, also mal was ganz anderes. Weg mit der Übrschrift und rein mit einem Bild. Die Schrift ist per CSS nur mikroskopisch verkleinert und trägt eben jenes Titelbild des Films, als Hintergrundgrafik.

Zweispaltigkeit war kurze Zeit ein Thema. Mit aktuellen CSS-Methoden jedoch, ist hier schlicht nichts zu gewinnen. Man schreibt den Text für’s Layout und nicht umgekehrt. “Ich habe X-Anzahl von Wörtern, für diesen Absatz.” Lösung wäre, einen langen Absatz zu schreiben, dann allerdings scrollt man wie blöd und ohne passendes 2-Spalten-CSS, wäre die Lesbarkeit unterirdisch. 2-Spalten kommen, wenn der Text es zulässt. Der Machinist-Text war nah dran, aber eben noch nicht nah genug. Spalten bleiben ein Thema, aber hier hat es noch nicht geklappt.

4 Absätze gefloated. Leider funktioniert ein CSS-Fluss nicht so wie unser gewohnter Lesefluss. Um einen solchen zu erziele brauch es entweder zusätzliches Markup oder perfekt aufeinander bemaßte Absatzlängen. Für besser funktionierende Text-Spalten, muss man wohl auf CSS3 warten.

Das Bild zur Überschrift war eine späte Idee, die schließlich auch jetzt zu sehen ist. Das Bild in diesem Beispiel war farblich perfekt. Hier auch zu sehen, nochmal die zwei Spalten im Text. So wäre es geblieben, wenn nur diese Spalten einfacher und sinnvoller zu beherrschen wären.

Pullquotes, sIFR und die Folgen

sIFR steht für salable Inman Flash Replacement und ist sicherlich die bisher effektivste Lösung, jeden beliebigen Font auch auf einer Website darzustellen, unabhängig davon, ob dieser auf dem Rechner des Nutzers ist. Man erstellt ein Flash-Filmchen der die Schrift enthält. Ein Javaskript schaut dann, welches HTML-Element für sIFR bestimmt ist, versteckt dieses mit CSS und ersetzt es mit dem Flash-Film, der den Text des HTML-Tage bekommt.

Pullquotes mit sFIR, leider mit zu vielen Einschränkungen.

sFIR funktioniert eigentlich auch wirklich gut. Mir machte es kleine Sorgen, weil ich 1) sFIR nur auf dieser Seite nutzen möchte und 2) der Aufruf des Javaskripts nicht im Template oder im Inhalt der Seite stehen soll. Somit rufe ich sFIR und alles was dafür nötig ist, auch über solch ein Spezialfeld auf. Dafür gibt es eine neue Variable, die den Namen des Javaskripts trägt. Findet das Template diesen Wert, lädt es alles, was sIFR so braucht. Für den Fall, wieder auf ein Standard-Design wechseln zu wollen, nehme ich den Aufruf der zusätzlichen Variablen raus und weder zusätzliches Stylesheet noch sIFR-Daten werden geladen.

sIFR nutze ich im ersten Beispiel nur für die Zwischenüberschriften (H3). Eigentlich sollten auch die Pullquotes mit dieser Schrift ersetzt werden, aber leider erlaubt mir CSS hier noch mehr Optionen als sFIR. Was im HTML mit einem em-Tag makiert und mit CSS leicht anders gefäbrt ist, als der Rest dieses Elements, lässt sich so nicht bzw. nur sehr schwer mit sIFR realisieren. An dieser Stelle hab ich deshalb auf die Flash-Lösung verzichtet und der HTML-Variante dem Vorzug gegeben. Premiere hat dabei der Lucida-Font auf dieser Seite. Lucida ist immer noch ein Tabu, denn noch immer statten viele Seiten, damit in winzigen Größen ihre Mengentexte aus und schauen sich das Ganze wohl nicht mal auf einem PC an. Lucida ist in kleinen Größen der Erzfeind von Windows ClearType-Technologie.

Die Pullquotes an sich haben bestimmt ein knappes Dutzend verschiedene Gestaltungen gesehen. Einige davon finden sicherlich den Weg in kommende Einträge. Auch wenn sFIR an dieser Stelle irgendwie versagt, finde ich es sehr einfach in der Anwendung und ideal auch für meine Seite hier.

das Wichtigste zum Schluss

Auch wenn alles irgendwie länger gedauert hat, es war die Mühe wert. Ich hatte durchaus Spaß am Schreiben und Gestalten. Auch deshalb wird dies nicht der letzte Eintrag seiner Art sein. Ein neuer ist schon fertig geschrieben (deutlich kürzer im Umfang) und wartet drauf jetzt den richtigen gestalterischen Haken verpasst zu bekommen. Hab diesmal noch nicht das Richtige gefunden.

Im ersten Versuch ist schon alles drin was ich drin haben wollte: großformatige Bilder, transparente PNGs, Flash-Fonts mehr Details bei den Pullquotes. Auch ist alles schön separat geblieben. Wenn ich mal wieder die Seite grundlegend ändern möchte, muss ich nich manuell im Inhalt stehende Klassen, IDs oder Skripte entfernen. Es ist auch gelungen, die Seite weiterhin validiert zu sehen

Ich glaube auch, dass sich der zusätzliche Aufwand lohnt. Sofern man hier einmal einen richtigen Workflow gefunden hat, hält einem nur die eigentliche Idee auf, aber das ist überall der Fall, nicht nur in diesem Medium. Anzumerken sei vielleicht noch, dass solch eine Gestaltung weder den reinen Gestalter, noch den reinen Programmierer verlangt, sondern irgendeine gute Mischung aus beidem. Man muss wissen, was im Rahmen von HTML/CSS/Flash möglich ist und was nicht und dies ganz gezielt beim praktischen Gestalten beachten. Auch im Web wachsen die gestalterischen Bäume nicht in den Himmel, höher als in anderen Medien aber durchaus. Textlich gibt es Einschränkung, die man halt so gut wie möglich ausgleichen muss. Es wäre wünschenswert wenn auch abseits der privaten Blogs, mehr Abwechslung dieser Art zu finden wäre.

Feedback: 3 Kommentare

Schritt für Schritt kommt auch hier mehr optische Abwechslung rein. Der nächste Film-Eintrag wird zum Versuchskaninchen. Die Vorarbeiten sind hiermit abgeschlossen und alles ohne aufwendige Plugins, WordPress’ Custom Fields sei Dank. Am Kopf der Texte hat sich ja schon eine Kleinigkeit verändert, um Kommenden Platz zu machen.

Einfach ausgedrückt kann nun ein einzelner Eintrag eine völlig separate Optik bekommen. Logischweise braucht’s dafür deutlich mehr Vorbereitung. Jede andere Optik kommt nur mit neuem CSS-Stylesheet, soll heißen, mehr Arbeit für mich. Die übliche Sinn-Frage stellt sich dabei schnell, was mich wieder zum Konzept dieser Seite bringt.

Jedes gute Prinmedium kommt mit Abwechslung daher. Besondere Artikel bekommen auch eine besondere Optik. Wieso also nicht diesen Ansatz auch hier übernehmen? Wie bei einer Zeitung bedeutet auch hier Abwechslung zusätzlichen Aufwand.

Bei meinem Beispiel macht es bei den hoffentlich wenigen Ausnahmen Sinn. Ich schreibe keine dutzenden Einträge pro Tag. Die meisten Artikel haben einen Umfang, der mehr Sorgfalt rechtfertigt. Ich kann jede Kritik daran nachvollziehen, trotzdem werde ich hier den Versuch riskieren. Die ersten Tests sehen übrigens wirklich schick aus. Anders aber nicht völlig fremd.

Bei Seiten mit ähnlichen Grundkonzept wie hier, sehe ich übrigens einen ähnlichen Ansatz. Weg vom Massenprodukt Blogeintrag, hin zum seltenen individuell-gebasteltem Werk.

Eine Frage noch zum Schluss an all die WordPress-Experten. Hat WordPress Probleme, Videos in Feeds einzubetten? Irgendwie werden bei mir alle eingebetteten Videos für die Feeds ignoriert.

Gefragt wäre auch eine Lösung, um gezielt Inhalte für den Feed zu filtern. Beispiel. Ich schreibe einen Text über einen Film. Ich möchte über Details sprechen, die vielleicht einige Leser lieber überspringen würden: Spoiler. Auf der Seite hier, würde ich einfach jQuery nutzen um solche Text-Passagen ein- und auszublenden. Im Feed ist dies nicht möglich, drum suche ich eine separate Lösung.

Feedback: 3 Kommentare

Neue Plattform, neue Test-Seite. Jeder Tüftler braucht so seine kleine abgelegene Werkstatt. Wie vorher auch, habe ich wieder eine Test-Seite für kommende Änderungen und Skript-Spielerein eingerichte. jQuery ist schon auf den ersten Blick beeindruckend. Was ist damit eigentlich nicht möglich?

Wer sich die Testseite kurz anschaut entdeckt ein kleines dezentes Skripts zum Aus- und Einblenden der kurzen Auszüge der jeweiligen Einträge. Ich bin rund um zufrieden damit. Der Effekt ist nicht zu aufgesetzt, sinvoll, artet nicht in einer Klickorgie aus und auch ohne aktiviertes Skript bleiben alle Informationen erhalten.

script to the rescue

Google Reader, besitzt für das eigentliche Lesen der Feeds eine ganz simple Lösung, um zwischen Lesen der Überschrift und ausklappen der Texte hin- und herzuschalten. Mit einem Klick auf den Titel, klappt der komplette Eintrag auf und wird oben im Browser ausgerichtet. Die Lösung ist so simpel und funktioniert so gut, dass man es einfach nicht besser machen kann. Im Prinzip würde ich das einfach so gern übernehmen, aber diese Seite ist kein Feed-Reader und man kann bei der Funktion zwischen Lesen der Überschrift und dem Lesen der eigentliche Seite, noch einen Maus-Klick sparen, indem man eben wie in meinem Beispiel, das Ausklappen aller mit einem Klick steuert. Bei mir macht das auch Sinn, da die Höhe der Auszüge nicht sonderlich groß ist.

Ok ich habe also einen Effekt, der sinnvoll und dezent ist, aber irgendwie nicht vorher eingeplant war und somit zum Problem wird. Der Effekt braucht einen sichtbaren verständlichen Auslöser, der sich nicht so einfach sinnvoll auf dem Raster platzieren lässt. Ich möchte die Funktion auch nich hinter irgendeinem winzigen Icon verstecken. Die jetzige Lösung gewinnt zwar keine Photoshopwettbewerbe, aber sie fällt optisch auf und man versteht worum es geht.

Darstellungsfehler im Firefox. Linien zwischen Textzeilen, die ungewollt sind. Scheint ein globaler Firefox-Bug zu sein, erscheint sowohl in der Mac- als auch PC-Version.

Zusätzlich zickt Safari rum und machte das Positionieren dieser Liste zum Problem. Das Stylesheet insgesamt geht wieder an die Grenzen dessen, was man als Cross-Browser-kompatibel bezeichnen mag. IE7 hat wie üblich sein separates Stylesheet, IE6 teste ich hier garnicht mehr. Safari, IE7 und Firefox sollten ohne größere Mängel arbeiten. Einzig Firefox produziert optische Fehler und erschafft irgendwie immer wieder ungewollte Linien zwischen Textzeilen.

Ansonsten arbeiten nun alle Archiv-Seiten mit diesem kleinen neuen Skript und erlauben so den Wechsel, zwischen einer Ansicht der reinen Überschriften und einen detailierteren, mit einem kurzen Ausszug des Textes inklusive einer Übericht der Schlagwörter. Wenn sich nur dieser Firefox-Fehler beheben ließe. Wünschenswert wäre auch eine WordPress-Funktion, um Archive mit einer Seitenübersicht - oder auch hier wieder der englische Begriff Pagination - zu versehen. Irgendwie navigiert man hier doch sehr blind hin und her.

jQuery

Ich bin kein Programmierer, nie gewesen, werde ich sicherlich auch nicht mehr sein. Dennoch oder gerade deshalb ist jQuery relativ logisch und deshalb einfach, besonders wenn man sich mit CSS auskennt. Das komplette Skript für meine kleine Spielerei hier umfasst ganze 7 Zeilen.

1.   $(document).ready(function(){
2.     $("ul.excerpt").hide();
3.     $('a#toggle').click(function() {
4.          $('ul.excerpt').toggle(500);
5.          return false;
6.        });
7.   });

Es existiert eine große Liste, die wiederrum kleine Unterlisten enthält. Diese Unterlisten beinhalten die Zusammenfassung und die Tags und besitzen die CSS-Klasse “.exerpt”. Wenn die Seite geladen ist (Zeile 1) werden alle Listen mit dieser Klasse versteckt (Zeile 2). Der Link der als Trigger dient besitzt die CSS-ID #toggle. Zeile 3 im Skript leitet eine neue Funktion ein, wenn eben jeder Link mit der ID #toggle geklickt wird. Zum einen werden die vorher versteckten Listen eingeblendet - genauer gesagt in einer 500 milisekundenlangen “Animation” (Zeile 4) und in Zeile 5 wird schließlich der Link als HTML-Element deaktiviert, damit der Browser nicht dem Link folgt. Viel einfacher geht es kaum. Das alles war nach 10 Minuten lesen der Dokumentation und der ersten Tutorials der offiziellen Seite geschrieben. Für den Anfang reicht mir das erstmal, die tieferen Funktionen wollen etwas ausgiebiger als 10 Minuten getestet werden.

Feedback: 1 Kommentar

Hier stapeln sich mittlerweile die imaginären Blätter mit Notizen für noch zu schreibende Einträge. Ich fange mal mit den nervigen Details an. Wer von MT möchte, hat umso mehr zu tun, je stärker MT verändert und je besser die Seite bei Suchmaschinen wie Google indiziert ist. Sofern man nicht völlig auf Page-Ranks und Co. verzichten möchte, empfiehlt sich eine sorgfältige Planung. Die mögliche Änderung der URLs ist von zwei Seiten lösbar. Entweder ahmt man die alten URLs im neuen System nach, oder man arbeitet mit dem Rewrite-Modul vom Server, fängt somit Anfragen auf alte URLs ab, um sie anschließend auf die neuen Adressen umzuleiten.

Für mein Beispiel hatte ich es sehr einfach. Ich habe schon einmal intern mit Movable Type meine URLs geändert. Weg von unlogischen URLs im Stil von “/03285503eintrags_titel.html” zu lesbaren und logischen “/archiv/jahr/monat/eintrags-titel.php”. Um diese Struktur in MT zu erhalten, brauchte es mehrere Plugins und zusätzlich eine .htaccess-Anweisung. Diese Struktur mit WordPress zu übernehmen, ist ein Leichtes, bis auf eine winzige Kleinigkeit.

Mein Movable Type verwaltete Bindestriche im Titel anders, als jetzt WordPress. Einer der wenigen ersten Google-Links zur Seite, findet, wer bei Google nach “paladin makros” sucht. Die angebotene URL lautet wie folgt. Exakt meine alte von Google so indizierte und von Movable Type geschriebene URL.

• …/patch-20-der-tag-danach-und-paladinmakros.php

Der exakte Titel lautet “Patch 2.0 - der Tag danach und Paladin-Makros”. Aus diesem Titel macht WordPress:

• …/patch-20-der-tag-danach-und-paladin-makros.php

Mein träges Auge, sah den kleinen Fehler, den MT produzierte erst jetzt. Im Gegensatz zu MT, interpretiert WordPress den Bindestrich im Titel korrekt, MT jedoch kann damit wenig anfangen und wirft das Zeichen beim Erstellen der URL weg. Folglich haben sich alle URLs mit einem Bindestrich im Titel verändert und müssen manuell in WordPress korrigiert werden. Kein Drama, aber aufwändig.

Feeds und 404s

Die URLs einer Feeds haben sich auch geändert. Da die Masse der Leser nur über die Feeds informiert wird, ist es wichtig, hier einen nahtlosen Übergang zu den neuen URLs zu schaffen. Wie immer führen viele Wege nach Rom und viele Wege sollten man auch nutzen.

Als erstes habe ich vorm Wechsel ein letztes Feed-Update geschrieben, dass über die neuen URLs informieren sollte. Mit etwas Glück, aktualisieren dann schon viele Leser ihren RSS-Reader. Da dies aber keine 100% sichere Lösung ist, habe ich zusätzlich die alten Feed-URLs mit einem .htaccess-Redirect, zu den neuen Adressen leiten lassen. Theoretisch sollten somit auch die alten URLs weiter aktuelle Daten bekommen. Mein erster Eindruck sagt mir, das klappt ganz gut.

Einfach wäre hier natürlich ein Wechsel zu einem Service wie Feedburner oder auf die RSS-Funktion von WordPress zu pfeifen und wieder selbst eine statisches File von WordPress mit der alten URL schreiben zu lassen.

Erstellen eines WordPress Themes

Das modulare System für Templates, hatte ich auch in Movable Type schon, denn dank PHP ließen sich auch dort Teile des Quellcodes global verwalten. Neu dagegen war WordPress’ nicht ganz so tolle Vermischung von Form und Inhalt.

Mit MT’s Tag-System lassen sich auch wirklich nur die reinen Daten abfragen, dies machte MT so einsteigerfreundlich. WordPress dagegen mischt teilweise Quellcode in die Datenbankabfragen mit hinein. Mein Paradabeispiel dafür ist mein aktuelles Archiv, noch eher spartanisch, aber es erfüllt seinen Zweck. Diese Listen brauchten eine ganz spezielle Code-Struktur. In MT sah der Code vereinfach so aus:

<ul>
<MTCategories>
    <li><$Kategorie-Titel$><span class="anzahl"><$Anzahl der Einträge$></span></li>
</MTCategories>
</ul>

the loop

Einfach aber effektiv. Jedes Content-Tag MT’s, gibt nur wirklich seinen Inhalt aus, ohne großes Drumherum. Den gleichen Aufbau in WordPress zu reproduzieren war schwieriger. WP arbeitet in seinem Tag-System anders. Oft zitiert “the loop”, ein Begriff der umschreibt, wie man mit WP Contenabfragen an die Datenbank formulieren muss.

Man stelle sich eine große Bibliothek vor. Zwei Leser wollen ähnliche Bücher ausleihen, beide suchen ein Kochbuch um ein asiatisches Gericht zu kochen. Unser erster Leser ist Movable Type. Er kennt den Titel des Buches und weiß genau, was er möchte, er schreitet durch die Bibliothek, auf der Suche nach seinem Buch.

Der zweite Leser ist WordPress. Er ist ungeduldiger hat weniger Zeit und greift so alle Bücher ab, die irgendwie sein gewünschtes Thema betreffen. Statt wie Movable Type das richtige Buch zu suchen, nimmt er alle Bücher mit, die irgendwas mit Kochen zu tun zu haben, um eventuell später das richtige dabei zu haben. Er findet auch das passende Buch, er ist auch wieder schneller aus der Bibliothek heraus als MT, aber er muss viel mehr Bücher mit nach Hause schleppen.

Statt wie oben beschrieben, lautet der Code für WordPress:

<ul>
    <?php wp_list_categories(); ?> 
</ul>

Was so viel einfacher aussieht hat einen Haken. WordPress-Tags leben von den Variablen den man ihnen mit gibt. Der zweite Haken, man hat über den Code der Ausgabe in den eigentlichen Templates absolut keine Kontrolle und wird gezwungen tiefer in die Ordnerebene von WordPress vorzudringen. Wer mit der Standardausgabe von WP unzufrieden ist bekommt doppelte Arbeit.

Am Ende hat man schon wie bei MT auch absolute Kontrolle über die Form der Ausgabe, aber man bearbeitet mehr einzelne Text-Files, als bei MT, was bei einem größeren Update der Plattform zu neuen Problemen führen dürfte.

Noch fehlen mir die wirklichen Ideen, wo “the loop” seine Vorteile ausspielen kann. Ich bin mittlerweile dabei wieder alle Artikel mit Tags zu versehen. Ich hab da eine Idee, bei der “the loop” sich beweisen muss.

der erste Eindruck

Der Gesamteindruck bleibt jedoch positiv. Der Wechsel vollzog sich schließlich weniger mühevoll, als ich erwartet habe. Die wenigen Kleinigkeiten werden auch noch ausgemerzt. Schon jetzt ist WP bei der Performance MT überlegen. Die große Nutzerzahl von WP garantiert einen schier unerschöpflichen Strom an mal mehr, mal weniger sinnvollen Plugins.

Für mich war primär wichtig, bei der Gestaltung mehr Spielraum zu bekommen und insgesamt mal eine neue Plattform nutzen zu müssen. Man lernt ja nie aus und MT war von mir ziemlich ausgeschöpft. Auch die ersten Schritte mit MT verliefen eher nach dem Trial&Error Prinzip. Ich bin noch lange nicht fertig, was hier jetzt zu sehen ist, ist das Ergebnis der ebenfalls ersten Schritte mit WordPress. Auch die WordPress-Version meiner Seite, wird sich kontinuierlich verändern.

Diesem Eintrag werden dann reine gestalterische Artikel folgen. Geplant sind bisher 3 Themen. Ein Abriss zum neuen Raster, einer separater zur Typografie und ein abschließender zum Thema Code-Struktur/Barrierefreiheit.

Feedback: 0 Kommentare

Für’s erste muss ich die Kommentarfunktion etwas limitieren. Es scheint einen definitiven Bug zu geben, der aus einem HTML-Tag innerhalb eines Kommentars, im Backend und somit auch in der Datenbank schöne, wenn auch sinnlose HTML-Codes der jeweiligen Zeichen produziert. Aus den eckigen Klammern werden somit Zeichenfolgen wie “>” und “<”. Es gab damit wohl mal einen bekannten Fehler, wenn man den überladenen internen Texteditor im Backend deaktiviert hat, angeblich schien dieser behoben, nun ja bei mir ist er wieder da. Ich weiß nur, dass es nicht das Markdown-Plugin ist.

Das ist auch wieder so eine Stelle, wo WordPress viel zu viel versteckt bzw. die normalen Optionen an der Oberfläche kratzen. Es gibt in Movable Type ein einfaches Dialogfeld, bei der auch der letzte Anwender einfach festlegen kann, welche Tags erlaubt sind. Um die gleiche Option in WordPress zu finden, muss man ein Text-File bearbeiten und dutzende Zeilen Text auskommentieren. Spaß.

Fazit: HTML-Tags in Kommentaren sind zwar aktiviert, aber auch irgendwie wieder nicht, da die Tags verschlüsselt werden. Eine Lösung sehe ich so schnell nicht. Extrem nervig.

Feedback: 0 Kommentare

So weit so gut. Es gab ein paar kleine Hürden, aber mehr auch irgendwie nicht. Diese Seite läuft ab jetzt relativ fehlerfrei auf WordPress-Basis samt einer neuen Gestaltung, die zwar nicht nicht absolut fertig, aber vorzeigbar ist. Das ist hier quasi mein erster neuer WordPress-Eintrag. /cheer

Ich denke in nächster Zeit wird es viele neue kleinere Artikel geben, gibt viel zu notieren für die Zukunft, mal schauen wie schnell ich die letzten Kleinigkeiten hier so erledigen kann. Ein erster Hinweis jedoch gleich vorweg. Mein geliebtes Notepad++ ist ziemlich überfordert, wenn es um Textverarbeitung im UTF-8 Format geht. Es bringt da immer wieder unsichtbare Zeichen hinein, die zu Fehler später auf dem Server führen.

Ansonsten bin ich erstmal zufrieden. Es darf wieder munter kommentiert und geklickt werden.

Feedback: 7 Kommentare

Kurzer Zwischenstand zum WordPress-Wechsel. So langsam, so ganz langsam, bekomm ich inhaltlich den Quellcode der Ausgabe in den Griff. Ich habe wieder Listen für aktuelle Kommentare, aktuelle Beiträge und so weiter. Der Google-Reader-Shared-Items Feed wird meinen bisher separaten und eingeschlafenen Quicklinks-Micro-Blog ersetzen, auch das funktioniert so weit schon.

Schwierigkeiten habe ich noch funktioniell in der Handhabung der Templates bzw. Template-Stückchen. Früher gab es ein Template für eine separate Seite, mit WordPress ist praktisch jedes kleine Teilchen für sich separat zu speichern und einzubinden. Hier einen goldenen Mittelweg zu finden ist die Kunst.

Meine alte Vorschau für Kommentare klappt auch schon wunderbar. Was jetzt noch fehlt ist ein funktionierendes Archiv und die vielen Details. Auch habe ich noch neue Probleme mit der Gestaltung, genauer gesagt das alte Problem der Mischung großer Bilder mit wenig Text. Da entstehen mir noch zuviele unschöne offene Stellen, klaffende Wunden des Weißraums. Hier muss ich mir noch was einfallen lassen. Im schlimmsten Fall lasse ich alle alten Bilder auf das neue Spaltenmaß hochskalieren. Sieht dann zwar von der Bildqualität nicht so schick aus, aber es verbessert den Fluß der einzelnen Seiten insgesamt deutlich. Hier mal ein Screenshot und die Anmerkung Webseiten immer am PC zu betrachten. Apple’s Schriftglättung verführt zu großen Typo-Orgien, die auf Windows eher nüchtern wirken.

2008 wird dann sicherlich auch hier WordPress zum endgültigen Einsatz kommen.

Feedback: 2 Kommentare