Mehr als 1700 Besucher aus mehr als 45 Ländern haben die Internetseite bereits in den ersten Tagen besucht. Über Social-Networks wie eine Facebook-Seite und Twitter können sich Interessierte über die Aktivitäten des Kollektiv25 auf dem Laufenden halten.

Das neu gegründete Kollektiv25 – bestehend aus den Fotografen Florian Manz, Lene Münch, Julius Schrank und Lucas Wahl – hat sich der journalistischen Fotografie verschrieben. Die vier Fotografen aus Bremen, Berlin, Hannover und Frankfurt möchten mit ihren Bildern Geschichten erzählen. Der Fokus liegt dabei auf sorgfältig recherchierten Themen, die sowohl visuell als auch inhaltlich eine hohe Qualität aufweisen. Sie möchten Hintergründe erfragen, sie verstehen und ihre eigene Sicht auf die Dinge zeigen.

Die entstandene Website ist, wie das von mir zu erwarten ist, natürlich in WordPress realisiert und mein erster Kontakt zu einem WordPress-Theme-Framework. Ich habe mich für Thematic als Grundgerüst entschieden.

Thematic

Ich habe mich für das Framework Thematic entschieden da es mir durch eine ganze Reihe an vorbereiteten Features einiges an Arbeit bei der Umsetzung abgenommen hat.

• Ein angenehmes bereits integriertes jQuery Flyout-Menu
• Sinnvoll vorbeitete Sidebars (auch wenn Kollektiv25 kaum welche braucht)
• Eine wunderbar angenehme CSS-Browser & Co Weiche. So werden dem Body-Tag einfach eine Reihe an Klassen wie der verwendete Browser, Benutzerlevel u.ä. angehängt
• Fast alles ist in einer einzigen Functions.php einzustellen
• Sehr schön verteilte detaillierte CSS-Klassen in den einzelnen Templates

Ein ganz gewöhnliches WordPress Theme umzustricken kam für mich einfach nicht in Frage. Dazu war das was ich mit Kollektiv25.de vorhatte zu speziell um einfach was von der Stange zu nehmen und ein bissel anzupassen. Aber das Rad wiedermal mit einem ganz neuen Theme von Anfang an neu zu erfinden – das war mir auch wieder zu mühsam.

PDF-Funktion: TCPDF

Wenn man sich ein bissel auf der Website umschaut, bemerkt man vielleicht daß zu jeder Geschichte ein PDF heruntergeladen werden kann. Sowas kann man natürlich ganz herkömmlich per Hand im Layoutprogramm der Wahl selbst erstellen hochladen und einfach zum Download anbieten, doch man muß sich ja auch nicht zu sehr quälen und die Fotos samt Bildunterschriften sind ja im CMS alle schon ordentlich abgelegt. Mit TCPDF existiert auch bereits eine stabile Open-Source PHP-PDF-Klasse die man nur noch mit den WordPress-Daten verknüpfen muß.

Vorteile

• Garantierte konsistente Anwendung des Corporate-Designs, da ein klares einfaches und festes Template das Design des PDFs bestimmt
• Die Fotografen müssen nicht eine Online– und eine PDF-Version separat pflegen (noch dazu in 2 Sprachen)

Natürlich war es nicht so ganz trivial umzusetzen was schon schlicht die Verbindung von WordPress, dem NextGenGallery Plugin von WordPress und TCPDF selbst geht. Auch hat sich wiedermal gezeigt, daß Umlaute immer noch gern Probleme im Web machen. Aber TCPDF erstellt immerhin recht ordentliche PDFfe (wenn man das mal mit OpenOffice und Co vergleicht) und sogar das Einbinden eines Vektorlogos klappt.

WordPress Plugin 1: Mehrsprachigkeit

WordPress ist von Haus aus nicht in der Lage mehrsprachige Websites zu liefern, aber auch wenn Mehrsprachigkeit immer doppelte Arbeit bedeutet, habe ich mit qTranslate auch auf lenemuench.de schon ganz gute Erfahrungen gemacht. Ich habe nahezu alle WordPress-Plugins zu dem Thema immer wieder auf’s neue ausprobiert, doch irgendwie zicken die schnell rum, machen mit anderen Plugins Probleme, oder man verzweifelt weil irgendwo im Theme ein Textschnipsel dann doch wieder nicht übersetzt werden kann.

WordPress Plugin 2: Fotogalerie

Natürlich ist bei einem Fotografenkollektiv die Verwaltung der Fotos der wichtigste Punkt schlechthin. Auf meinem eigenen Portfolio nutze ich Slideshowpro zusammen mit dem Slideshowpro Director als eigenes Bild-CMS. Eine wunderbare nahezu perfekte Lösung. Doch zum einen ist das nicht kostenlos als Open-Source zu haben und zum anderen ist es zwar machbar mit Slideshowpro Director klassisch ohne Flash die Bilder via PHP als HTML auszugeben, aber naja ich hatte damals vermutet, daß das aufwendiger werden würde.

So hab ich mir Nextgen Gallery mal angeschaut. Sicherlich DAS Bild-Plugin für WordPress schlechthin, und naja schlecht ist das auf jedenfall nicht. Im Nachinein hätt’ ich aber lieber doch auf Slideshowpro-Director zurückgegriffen denn die Templates für Nextgen-Gallery zu programmieren war nach anfänglichem flotten Fortschritten eine ziemliche Qual. Ob’s mit Slideshowpro wirklich einfacher gewesen wär weiß ich natürlich auch nicht…

Foto-Slideshow: Coda Slider

Ich hab mich eine ganze Weile im Web umgetan um eine sinnvolle Foto-Slideshow zu finden mit der man per Javascript die Bilder zeigen kann und ich muß schon sagen, trotz abertausend verschiedener Lösungen gibt’s echt enorm viel Misst.

Anforderung 1: Die Bilder sollten vorgeladen werden
Damit man flott und ohne unheimlich nervige Wartepausen durch die Bilder klicken kann, sollten die Bilder vorgeladen werden (oder einfach schon geladen sein). Erstaunlich wieviele Slideshows die Bilder erst nach einem Weiter-Klick anfangen zu laden. Das mag bei gigantischem Traffic wichtig sein, ist aber für den Besucher eine Zumutung.

Anforderung 2: schlicht und schlank
Ne Slideshow soll einfach ein Bild durch das andere austauschen und evtl. noch etwas Text darstellen mehr nicht eine klassische Form-Follows-Funktion Anforderung. Auch da war ich sehr erstaunt was da teils an Feature-Itis so geboten wird. Das überfordert nicht nur mich in der Programmierung sondern auch den Besucher der Website der sich eigentlich auf die Bilder konzentrieren wollte.

Anforderung 3: Flüssige Bewegung
Es wäre auch eine schöne Überblendung oder ähnliches denkbar gewesen. Wichtig war mir daß eine flotte flüssige natürliche Animation die Bilder tauscht. Auch hier gilt wieder »Die Funktion steht im Vordergrund«. Die Animation sollte einfach nur ein angenehmes haptisches Feedback an den Besucher zurück geben. Die Animation selbst sollte nie der Hauptdarsteller weden und sich all zu sehr in den Vordergrund drängen.

Anforderung 4: Wie schaut’s ohne Javascript aus
Natürlich sollte die Geschichte auch ohne eingeschaltetes Javascript einigermaßen funktionieren.

Meine Wahl: Coda Slider
Der Coda-Slider der seinen Namen von der Website meines Programmier-Werkzeugs Coda trägt passte da wunderbar rein.

Performance

Da auf Kollektiv25.de doch ein bissel was an Javascript und ne ganze Menge CSS zusammenkommt hab ich mich umgeschaut wie man zur Performance-Steigerung die Sache etwas optimieren kann. Ich habe Minify eingesetzt das wunderbar geeignet war.

Zum einen kombiniert Minify mehrere CSS– oder Javascript-Files zu einer einzelnen Datei um die Anzahl der zu ladenden Dateien (und damit der HTTP-Requests) zu verringen, und zum anderen werden die Dateien automatisch live per PHP komprimiert.

Das hat der Website schon auf meiner Testumgebung deutlich den Trägheits-Zahn gezogen, und ich konnte weiter mit einzelnen Dateien arbeiten. Es macht einfach keinen Sinn mit Frameworks wie Thematic zu arbeiten um dann die Browser-Reset-CSS und die Basis-Layout-CSS u.ä. alle wieder in eine zusammenzuschieben. Beim nächsten Release des Frameworks müsste ich dann alles wieder auseinander klöppeln und schauen was geändert wurde. Das gleiche gilt natürlich für die jQuery Plugins.

Doch damit nicht genug – Auch meine Flickr-Bilder sind wieder anwesend. Nachdem das Plugin in den letzten Wochen – oder waren es Monate? – einige Probleme hatte, funktioniert es jetzt wieder wunderbar, doch nun sind auch wieder meine kleinen Bildchen auf 72Quadrat zu sehen – neuerdings sind meine typografischen Versuche dort übrigens prominent im Kopf vertreten. (siehe hier)

Nach ersten Anfängen – Ich glaub’ es war 2005 – mit einer Serifenbetonten habe ich vor ein paar Wochen die wenigen schon vorgezeichneten Versalien von ihren Serifen befreit und krätftig an den Formen geschraubt. Vielleicht bekommt mein Schätzchen irgendwann Ihre Serifen wieder, doch vorerst ist genug zu tun. Heute sind zumindest die Minuskeln hinzugekommen teils noch recht grob und unvollkommen oder schlicht zu eigensinnig, doch auch das werde ich den Staben schon noch austreiben.

Doch die Arbeit ist eine regelrechte Freude und man sollte vielleicht wieder jeden einzelnen Studenten und Gestalter der täglich mit Buchstaben hantiert dazu zwingen einmal eine Schrift zu zeichnen. Es war nicht nur eine große Freude die Formen zu entwickeln – es war auch ungemein lehrreich.

Die nächsten Schritte

• Grauwert einiger Zeichen angleichen (insbesondere die Versalinen XYWZ)
• Einigen Buchstaben ihre Macken austreiben – Es werden täglich mehr.
• Die Ziffern zeichnen – auf jeden Fall nicht nur Versalziffern
• Interpunktion
• Sonderzeichen
• Ein paar Alternativformen von denen ich mich nicht trennen kann
• Zurichtung endlich fest zurren
• Kerning,… Kerning,…

Ach ja, das Schätzchen braucht noch einen Namen – wem da was einfällt, immer her damit.

Was im Portfolio so geschehen ist

Zunächst einmal habe ich meine Slideshow-Pro-Diaschau im Kopf der Seite recht kräftig überarbeitet. Das gute Stück ist nun deutlich in meinem Portfolio-Braun-Grau gehalten, hat dank einer neuen Version kleine Thumbnails erhalten und auch die Geschichte mit dem Link zu weiteren Diaschauen aus anderen Kategorien meines Portfolios habe ich etwas klarer und hoffentlich auch verständlicher gemacht – so denke ich zumindest.

Unter der Diaschau gibt’s nun einen kleinen Einstiegstext in dem man durch eine Liste mit ein bissel von dem schon angesprochenen Ajax-Kram verschiedene Arbeitsproben aus meinen Portfolio-Kategorien einblenden kann.

Nebenbei hat das Portfolio nun auch eine ganz schlichte horizontale Unternavigation. Wie übrigens auch alle anderen Seiten nun eine solche Subnavi spendiert bekommen haben.

Neuerungen im Magazin

Hier gibt’s eigentlich neben der neuen Subnavigation nur einen neuen Header ganz ohne flashige Spielereien und ähnliches Zeug. Vielleicht gibt’s in bälde mal wieder ein kleines Sideblog für’s Magazin auf 72Quadrat – wenn ich nur wüßte wie ich das sinnvoll einbinde.

Sonst noch

• Die Kontaktseite liefert nun neben nem Emailformular auch ganz klassisch Postanschrift, Telefonnummer und meine Chat-Namen.
• Das Archiv ist etwas schlichter geworden und verfügt nicht mehr über eine Listung der Beiträge nach den zugeordneten Kategorien. Das entsprechende WordPress-Plugin war aber leider eh nicht in der Lage das Archiv einigemaßen ordentlich und hübsch in der Kategorie-Ansicht darzustellen – darum also raus damit.
• Die Weblinks haben natürlich jetzt auch wieder ihre Subnavigation bekommen. Die war ja eine ganze Zeit lang schlicht nicht vorhanden. Umso öfter ich mir die Seite aber anschaue umso dringlicher wirkt der Kopf hier ziemlich mies.
• Nen bissel Fehlerkrams wie inkonsistente Beschriftungen bei meiner Bildergalerie, dumme Links zu den hässlichen Einzelbildseiten Derselbigen oder auch ein bisschen CSS-Aufräumen und Plugin-Müll entsorgen. Inzwischen ist meine Bildergalerie deaktiviert.
• Schließlich hab ich den Cache für mein Blog wieder aktiviert. So richtig flott ist’s aber auch auf diesem neuen Server leider nicht.
• Dank einer neuen Version meiner Portfolio-Diaschau kann man jetzt 72Quadrat auch endlich wieder ohne das dümmliche WWW nutzen und ganz frisch und frei auf http://72quadrat.de rumsurfen ohne immer auf http://www.72quadrat.de umgeleitet zu werden.

Denn natürlich bringt so ein Umzug auch immer ein paar Probeleme mit sich – wie richtige Umzüge im wahren Leben eben auch.

• Irgendwie ist mir meine Titelschrift beim Umzug kaputt gegangen. Darum sehen die Headlines noch ziemlich dirty aus. (Beispiel) Darum bin ich mal vorerst auf was komisches Handgemachtes umgestiegen
• Das alte Kontaktformular war wohl auch nicht mit meinem neuen Server kompatibel, aber ich hab einfach ein neues rausgesucht.
• Bisher läuft auch die Startseite noch nicht so recht. Die kleine Liste mit den neusten Beiträgen will noch nicht erscheinen.

Neues Jahr – neues 72Quadrat

Neben so schlicht schnödem Technik-Gedöns soll 2007 natürlich auch noch ein paar andere Neuigkeiten bereit halten. So liegt eine etwas optimierte Fassung des Portfolios schon in der Pipeline und auch an manch anderen Stellen werde ich sicherlich wieder Hand anlegen. Einfach weil es etwas juckt zwischen den Fingern, und jetzt wo der Server wieder hungrig ist, und ich nicht mehr in der Wartschleife liege sollte ich mich auch mal am Riemen reißen und wieder regelmäßiger schreiben…

Und auf das gleiche Paket habe ich schließlich eine Kopie von 72Quadrat gestellt. Ich will da jetzt mal lieber nicht hinlinken, damit Google die Seite nicht gleich indiziert, aber die Adresse ist: www.timohoener.de/72quadrat_v1/ und es ist wirklich deutlich flüssiger, obwohl dort keinerlei Caching aktiviert ist.

Schlußendlich habe ich mich an meinen derzeitigen Provider gewendet um zu besprechen wie ich meinen Umzug am besten abwickle, doch neben zwei Ideen für meinen Umzugsabwicklung hatte ich wohl die dritte Möglichkeit ganz vergessen. Bei meinem derzeitigen Provider einfach – zum gleichen Preis – auf einen neuen Server umzuziehen. Das gefällt mir natürlich mit Abstand am besten und so wird in Zukunft vielleicht mal wieder alles etwas flüssiger hier.

Zusätzlich stehen noch einige kleinere Faceliftings in’s Haus, die sich einfach während der Umzugsarbeit aufdrängten. Ich bin auf jedenfall schon einmal sehr gespannt, was der Umzug bringen wird.

Update

Die Flickr-Bildergalerie auf meine Homepage ist inzwischen verschwunden da das Plugin einfach nur noch MISERABEL funktioniert und mich zu tode nervt.

Wie das mit den Links bei Lightbox 2 so ist

Die Darstellung der vergrößerten Bildansicht wird bei meinem Blog – wie auch bei einigen anderen – durch das wunderbare Lightbox 2 Script erzeugt. Diesem Script ist es ja möglich einem Bild eine Bildbeschreibungszeile zu gönnen. Genau diese Zeile verwende ich um den Link darzustellen. Auch die Frage ob Links in dieser Unterzeile wurde auf der Seite von Lightbox 2 (etwas weiter unten) gestellt und beantwortet:

Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents. For example:
<a href=»images/image-4.jpg« rel=»lightbox« title=«&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;«>Image</a>

Also noch einmal kurz zurück zu den Lightbox-Basics

Wenn das Lightbox-Script wie auf der Website beschrieben korrekt installiert wurde und es durch beispielsweise folgende Zeilen geladen wurde:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

So wird das Script durch einen einfachen Link gestartet mit entsprechend gesetztem Tag rel="lightbox" in dem Link-Tag gestartet. Will man mehrere Bilder als Gruppe darstellen und auch durch die Bilder blättern können, so kommt einfach eine eindeutige Albenbeschreibung in eckigen Klammern hinzu: rel="lightbox[album1]".

Bei einer Reihe von drei Bildern würde das also so ausschauen:
<a href="images/image-1.jpg" rel="lightbox[album1]">thumbnailimage #1</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #2</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #3</a>

Die Bildbeschreibung einfügen
Um nun zu einem Bild eine Bildunterschrift anzuzeigen fügt man noch einen weitere Kleinigkeit dem Link-Tag hinzu: Das Title-Element.
Ein Link würde also inkl. der Bildunterschrift folgendermaßen ausschauen:
<a href="images/image-1.jpg" rel="lightbox[album1]" title="Bildunterschrift">thumbnailimage #1</a>

Und schließlich einen Link als Bildunterschrift

So. Nun haben wir wunderbar einfach Bildunterschriften eingefügt, und wie in der FAQ-Frage auf der Lightbox2 Website unter der Frage »Can I insert links in the caption?« schon kurz beantwortet wurde, ist es natürlich auch möglich Links in diese Bildunterschrift zu packen.

Man könnte zunächst meinen, daß man einfach einen Link wie z.B. <a href="http://www.meinlink.de">Link</a> einfach in die Title-Geschichte einbaut und fertig. Das würde dann z.B. so ausschauen:<a href="images/image-1.jpg" rel="lightbox[album1]" title="<a href="http://www.meinlink.de">Link</a>">thumbnailimage #1</a>.

Doch ganz so einfach geht’s leider nicht.
In dem Title-Element dürfen selbstverständlich keine weiteren Tags reingeschachtelt werden. Das würde den Link-Tag vollkommen zerschießen und der Browser wüsste nicht mehr was er mit so nem zerschossenen Link anfangen soll. Damit die Sache aber trotzdem funktioniert, werden einfach die Sonderzeichen wie Anführungszeichen, und die Größer-Klein-Zeichen in HTML-Entities umgewandelt. Denn das Lightbox-Script macht schließlich nichts anderes als diesen Text dann unter das Bild als HTML-Text zu schreiben – ganz so als hätte man es per Hand reingeschrieben.

Hier eine kleine Liste der zu ersetzenden Zeichen:

• « = &quot;
• < = &lt;
• > = &gt;

Wenn man dies nun auf unseren Link-Tag anwendet, schaut er schließlich folgendermaßen aus. Zur besseren Übersicht habe ich einmal die ersetzen Zeichen fett gesetzt.
<a href="images/image-1.jpg" rel="lightbox[album1]" title="&lt;a href=&quot;http://www.meinlink.de&quot;&gt;Link&lt;/a&gt;">thumbnailimage #1</a>

Die ganze Schose für das Flickr-Plugin verwenden

So, nun habe ich einmal geschildet wie das mit Lightbox2 ausschaut wenn man die Links händisch in statische HTML-Seiten einbaut. Natürlich geht das ganze auch in einer PHP Umgebung und auch mit dem wunderbaren Flickr-Photgalerie Plugin für WordPress.

Beispielhaft will ich einmal meine Umsetzung für meine Hauptseiten einer Photogalerie zeigen – wie z.B. die Seite mit den Typo-Fundsachen Das Flickr-Album hab ich entfernt. Man kann ja für das Flickr-Plugin eigene Template-Dateien anlegen. In dem Fall der Galerie-Übersichtsseite ist die entsprechende Template-Datei. photoalbum-album.html und liegt im WordPress-Theme Ordner rum. Anhand dieser Datei möchte ich einmal aufzeigen wie man da nun die Links in die Lightbox-Darstellung reinbekommt. Inzwischen hat das Flickr-Photogalerie-Plugin bereits eine Lightbox2 Unterstützung serienmäßig vorbereitet, doch ich nutze weiterhin meine händische Einarbeitung, da ich Lightbox2 auch an anderen Stellen verwende und die Javascript-Daten nicht x-mal neuladen möchte.

Zunächst an welcher Stelle geht’s nu los?
Die Darstellung der einzelnen Bilder auf der Galerie-Übersichtsseite wird innerhalb eines PHP-Loops erzeugt. Den Loop findet man in der Datei recht flott: Es geht um den Kram zwischen <?php foreach ($photos as $photo):?> und <?php endforeach?>. Ich habe unten einen Screenshot aus Textmate erstellt, wo man meinen Code auch lesen kann. Jetzt wäre wahrscheinlich ein guter Augenblick sich den mal anzuschauen…

In unserem Fall geht es ja vor allem um den Link-Tag, den ich nun einmal kurz Schritt für Schritt – also Zeile für Zeile – erläutern will.

Zeile 27: href
Direkt nach dem öffnen des a-Tags beginnt’s natürlich mit href. Die Zeile ist nicht weiter spannend, und verweist einfach auf das Bild selbst. Das Flickr-Plugin generiert den entsprechenden korrekten Link aus der echo Befehl, den ich hier nicht weiter erklären will:
href="<?php echo $photo['sizes']['Medium']['source']?>"

Zeile 28 rel
Hier wird’s schon ein bissel interessanter da wir anfangen Lightbox2-artige Dinge zu tun. Damit Lightbox2 überhaupt genutzt wird muß halt das rel-Tag genutzt werden.:
rel="lightbox[<?php echo $album['title']?>]"
Damit die Bilder auch als Set dargestellt werden wird in den eckigen Klammern der immer identische Titel des Albums mithilfe des Befehls echo $album['title'] ausgegeben.

Bei meinem Album mit den Typo-Fundsachen schaute diese Zeile schließlich im Ergebnis folgendermaßen aus:
rel="lightbox[Typo Fundsachen]"

Zeile 29: title
In dieser Zeile geht’s nun schließlich an’s Eingemachte. Die Geschichte beginnt zunächst mit:
title="<?php echo htmlentities($photo['title'])?> wodurch einfach der Titel des Bildes ausgegeben wird. durch echo htmlentities wird der Titel auch in korrekten Entities ausgegeben, was für Umlaute in Bildtiteln ganz sinnvoll ist.

Nach dem Titel folgt nun endlich der eigentliche Link in der Bildbeschreibung. Der Bereich wirkt vielleicht ziemlich erschreckend, ist aber wenn man genau hinschaut dann doch verständlich:
&lt;a href=&quot;album/<?php echo $album['id']?>/photo/<?php echo $photo['id']?>/<?php echo $album['pagename2'] .'-'. $photo['pagename']?>&quot; &gt;[mehr]&lt;/a&gt;

Der Link zu einer Bildseite schaut halt bei dem Flickr-Plugin etwas kurios aus, und ist auch nicht gerade besonders kurz:
http://www.72quadrat.de/blog/photos/album/99593/album/99593/photo/3126402/Typo_Fundsachen-Druck_eines_alten_BuchdruckKlischees.html.
Dieser ganze Kram muß nun für jedes Bild generiert werden, und nicht’s anderes tut der Rest der Zeile.

Die Geschichte beginnt mit <a href="album/… wodurch zunächst einmal auf die Hauptseite des Flickr-Plugins verwiesen wird. In meinem Fall liegt das Plugin auf der Seite photos. Wie zu erkennen ist, wurden die Anführungszeichen und die Größer-Klein-Zeichen (s.o.) Lightbox2-entsprechend in HTML-Entities umgewandelt. Ich will mir mal ersparen den ganzen Rest jetzt zu erklären. Durch die diversen PHP-Befehle wird schlicht die URL zu dem Bild geschriben:
…?php echo $album['id']?>/photo//…
Nach dem letzten PHP-Befehl für die Erstellung der korrekten URL wird schließlich das Link-Tag geschlossen – wieder indem die Anführungszeichen und Co in Entities umgewandelt werden, und es wird der Text angegeben, der den Link abbildet – bei mir das Wort »mehr« in eckigen Klammern:
…" >[mehr]</a>.

Soweit erstmal…

Warum bloggst Du?

Gleich eine schwierige Frage zu Beginn – zunächst einmal bin ich wohl zum bloggen gekommen, da ich einfach eine angenehme Technik haben wollte um meiner Internetseite etwas Leben einzuhauchen. Ich wollte mein Mitteilungsbedürfniss über die Welt mal etwas befriedigen und Freunde Bekannte und unbekannte Leser ein bissel an meinen Fundstücken und Gedanken teilhaben lassen.

Seit wann bloggst Du?

Ich glaube so angefangen habe ich vermutlich irgendwann Anfang 2004. Zunächst habe ich auf fchlcr.de – Die Website zu meinem Fehler-Diplom mein erstes Blog eingerichtet um dort auch in Zukunft Fehler zu sammeln. Damals mit einer komischen Software namens Sunlog. Anschließend brachte mich ein Freund auf Movable-Type (Danke Frithjof) und schließlich habe ich meine ganze Internetseite auf Blogbasis umgestellt und bin zu WordPress gewechselt. Also so richtig bloggen tue ich wohl seid 2005.

Selbstportrait?

Ich bin inzwischen so 28 Jahre und arbeite als Art-Director-Grafiker-Und-So in einer Hannoveraner Agentur. Demnach ist meine Zeit zwar gnadenlos kostbar aber nen bissel Zeit fürs bloggen findet sich immer mal wieder.
Ich bin wohl das was man einen Typomanen nennt, sehr elektrisch und ein großer Freund des Macs.

Warum lesen deine Leser Deinen Blog?

Wieder so eine schwierige Frage – kann ich ja eigentlich nicht so recht beantworten. Meine Besucherzahlen sind auch nicht so derb hoch. Aber es gibt Artikel die bei Google ganz gut einschlagen, und auch die Optik meines Blogs ist vielleicht nicht die übelste die ein Blog haben kann.
Dann lesen zwei Freunde offensichtlich mein Blog die ich nicht schön um mich haben kann da sie in anderen Städten wohnen (Gruß an Frithjof und Herrn Molkenbur) um zu schauen was den Timo wieder so umtreibt.

Wenn ich mal wieder mehr schreiben würd‹ gäbe es vielleicht auch wieder bessere Gründe mein Blog zu lesen ;-)

Welche war die letzte Suchanfrage, über die jemand auf Deine Seite kam?

werbeagentur stundenzettel

Dein aktuelles Lieblings-Blog?

Uiuiuiuiui. Das ist aber schwierig. Mit zu meinen liebsten gehören vielleicht in letzter Zeit das Fontblog und Pixelgraphix.

welche vier Blogs wirfst du das Stöckchen weiter und warum?

Fontwerk
Screenz
Jens Meiert
Sven Lubenau
Warum ich diesen vier das Stöckchen weiter werfe?!? Weiß eigentlich auch nicht.

Merci für’s Stöckchen, hat mal Spaß gemacht Hundi zu spielen…

Im Zuge dessen hat sich auch der Umfang der Diaschau etwas erweitert. So kann man z.B. von Ysop dem legendären Nullnummern-Hoschulmagazin der FH-Hannover jetzt die ganze Nullnummer sehen. Andere Arbeitsproben bedürfen noch einige Handarbeit und ordentlicher Ansichten.

Da werden noch einige Sachen geändert und ausgefeilt – Deshalb auch der nette kleine Alpha-Version-Stern, und demnächst gibt es auch eine ordentliche kleine Beschreibung wie das Teil entstanden ist — Nur soviel bis jetzt: Ich habe die Diashowfunktion des Slideshow-Pro-Plugins benutzt und füttere das gute Stück mithilfe von Slideshow Pro Direktor. Ich hoffe es gefällt euch.

Also direkt hier zum Portfolio weiterklicken.

Die drei Möglichkeiten

• Abo per direktem RSS Feed eines Beitrags
• Abo einfach aller Kommetare auf 72Quadrat
• Abo per Email über ein Plugin
• Abo per CoComment

Wie funktioniert das nun? (per RSS)

Die erste Möglichkeit Abo per direktem RSS Feed eines Beitrags habe ich vor ein paar Tagen wieder aktiviert, und es ist eigentlich ganz einfach: Jeder der einen RSS-Reader verwendet kann auf den kleinen Link am Ende der Kommetare RSS-Feed für Kommentare zu diesem Beitrag. klicken und so den Feed direkt in seinem Feedreader abonieren.

Die zweite Variante ist natürlich noch einfacher, auch wenn man eben schlicht alle Kommentare auf 72Quadrat aboniert, was vielleicht nicht nach dem eigenen Geschmack ist. Hierzu aboniert man einfach den Feed in dem alle Kommentare angezeigt werden. Diesen Feed hier

Und wenn man kein RSS benutzt

Wer RSS noch nicht kennt, kann sich natürlich auf Wikipedia genaustens schlau machen, aber es wird sicherlich auch weiterhin Leser geben die RSS nicht mögen. Für diese Leser gibt’s die Möglichkeit ganz einfach per Email über neue Kommentare zu einem Beitrag informiert zu werden. Genauso wie es auch einen normalen Email-Newsletter für 72Quadrat gibt, so gibt es eben auch die Möglichkeit Kommentare zu abonieren.

Das ganze funktioniert ganz einfach in dem man das Häkchen unter dem Kommentar »Benachrichtige mich über weitere Kommentare via E-Mail« angehakt lässt.

Noch Englisch
Leider Leider ist sowohl die Newsletter-Funktion als auch das Abo der Kommentare per Email noch rein englischsprachig – Irgendwie funktionierte die Übersetzung der Sache nicht so toll. Ich überlege auch ob ich diese Funktion wirklich dauerhaft aktiv belasse, da ich diese Emailgeschichten nicht so mag. Aber mal schaun was die Zukunft bringt…

Und was ist nun diese CoComment-Sache?

CoComment ist eine tolle Sache für Leser die öfter mal Kommentare schreiben. Sei es auf meinem Weblog oder anderen, oder bei Flickr oder eben sonst wo im Netz. Denn mit CoComment kann man wunderbar einen Überblick über seine eigenen Kommentare behalten. Man kannn einfach alle seine Kommentare per RSS-Feed abonieren und wird life benachrichtigt wennn andere auf die eigenen Kommentare antworten, und das eben anders als mit dem RSS-Feed für eine einzelne Seite vollkommen Seitenübergreifend.

Wer zudem noch Firefox einsetzt, kann ein nettes Plugin benutzen um die Sache noch einfacher zu machen, oder man begnügt sich mit diesen Bookmarklets die CoComment auch anbietet.

Einführung
Es gibt auch eine recht nette Einführung von CoComment auf deutsch die einem das System erklärt. Darum erspare ich mir hier einmal diese Einführung selbst nocheinmal zu schreiben.

Update 02.03.2007
Inzwischen habe ich CoComment nicht mehr fest auf meiner Seite eingebunden. Scheinbar machte CoComment ein paar unangenehme Probleme. Mindestens ein werter Leser teilte mir mit, daß er gar keine Kommentare mehr schreiben konnte ohne sich bei CoComment zu registrieren. Da das Javascript von CoComment auch nicht gerade klein ist, und die Ladezeit meiner eh nicht gerade flotten Internetseite dadurch nur noch schwieriger wird, habe ich CoComment heute (02.03.2007) deaktiviert.

Was das bedeutet?

Na, daß der Quelltext der Seite ordentlich und zumindest größtenteils technisch fehlerfrei ist. O.K., natürlich ist so ein Validator, der mir dies mit einem mehr oder minder hübschen Button bescheinigt, auch nur eine Maschine und nicht wirklich intelligent, aber’s ist schon eine wichtige Grundvoraussetzung für ordentliche Internetseiten.

Unrühmliches Hannover.de

Daß solch standardkonformes Webdesign noch immer nicht üblich ist sieht man auch bei gerade frisch relaunchten Webseiten wie hannover.de. Bei dieser Seite sind es gar 173 Fehler allein auf der Startseite. (wie hier zu sehen)

Wenn man daran denkt, daß eigentlich nach dem Behindertengleichstellungsgesetz die BITV-Verordnung dazu führen sollte daß ab Januar 2004 alle öffentlichen Seiten mehr oder weniger barrierefrei werden ist das schon schmerzhaft. Klar hannover.de ist da keines Falls eine Ausnahme sondern vielmehr die Regel, doch immerhin wurde die Seite ja auch aus diesem Grund relauncht.

Und sonst? Was ist sonst hier geschehen?

Zum Glück hat sich neben diesen rein technischen Schnick-Schnack-Sachen auch etwas Sichtbares auf 72Quadrat getan. Ich habe z.B. endlich diese kleine Ajax-Trickserei namens Lightbox mit den aufgehenden Boxen bei einem Klick auf ein Bildchen etwas optisch angepasst und aufgehübscht – Lightbox sieht man gerade einfach auf verdammt vielen Seiten und man will sich ja schon ein bissel von der Masse abheben.
Außerdem kann man jetzt unter den vergrößerten Bildern direkt zu dem entsprechenden Beitrag klicken usw.

Sonst noch was?

• Die Header-Bildchen des Labors und der Weblinks sind neu
• Die Sitemap hat ne kleine Grafik bekommen (noch nicht soo hübsch)
• Die Flickr-Bilder in meiner Fotogalerie verwenden nun auch Lightbox
• Die kleine Slideshow im Portfolio ist zumindest etwas von Fehlern befreit worden.
• Und noch so ein paar Kleinigkeiten unter der Haube
• Der Feed hat kleine Links zu del.icio.us und zu den Kommentaren bekommen.
• Der Newsletter ist aus technischen Gründen wieder eine ganz schlichte Text-Mail. (Hoffentlich funktionieren jetzt auch die Links wieder…)

Das Miniblog
Vielleicht habt’ ihr es schon bemerkt. In der Sidebar findet sich seid ein paar Tagen ein Punkt namens Miniblog Einzeiler. Hier werde ich in Zukunft kleine Mini-Beiträge veröffentlichen die es nicht unbedingt wert sind mitten auf der Seite zu landen. Wer meinen Feed abonniert hat wird das sicherlich schon bemerkt haben.

Was kommt?
Natürlich ist 72Quadrat niemals fertig, und es wird hoffentlich bald wieder einiges geschehen. Die Startseite z.B. hat noch arge Probleme (dank IE), und auch das Portfolio steckt noch dicke in den Kinderschuhen, aber mal schauen was kommt.

Aber leider ist das aktuelle Design noch ziemlich unfertig! Fehler finden sich sicherlich an diversen Stellen. Ich würde mich auch über Kommentare zu auftretenden Schwächen und Fehlern freuen. Also bitte bitte keine Scham, schreibt mir was ich alles falsch gemacht hab.

Definitiv noch schwach ist derzeit:

• Das Impressum hat noch komplett falsche Bildverlinkungen
• Die Slideshow im Portfolio zeigt noch einen sehr kleinen Ausschnitt des Portfolios
• Die Galerie-Ansicht ist in der Slideshow auch noch alles andere als hübsch
• Die Kommentar-Formulare sind im Safari noch recht hässlich
• Die Sitemap wimmelt vor Fehlern
• Ebenso das Archiv
• Das ganze ist noch nicht XHTML-konform

Was ist denn alles geschehen

Technisch
Grundsätzlich bleibt 72Quadrat natürlich ein Weblog. Es gibt weiterhin einen Header, einen zweispaltigen Aufbau, Kommentarfunktionen und ähnliches. Zum einen habe ich stark die Struktur der Seite überarbeitet und neu aufgesetzt – endlich ist 72Quadrat kein Abklatsch eines bestehenden Templates mehr sondern von Grund auf neugestrickt.

Die Seite ist teils fluid also flexibel aufgebaut und passt sich der Größe des Browserfensters an. Das hat natürlich seine Grenzen da die Zeilenlänge sonst einfach zu lang geworden wäre. Die Größen sind nun endlich in ems und nicht mehr in Pixel angegeben und natürlich wurden das Stylesheet und auch die Template-Files endlich ordentlich kommentiert so daß ich vielleicht auch in Zukunft ein bisschen besser durchblicke.

Ajax ist auf 72Quadrat gewandert. Neben der Lightbox 2–Geschichte gibt’s z.B. im Portfolio ein bissel scripaculous Effekte.

Gestalterisch
Neben diesen technischen Überarbeitungen ist natürlich auch einiges an der optischen Erscheinung verändert worden:

• Fließtexte wurden in einer Antiqua abgesetzt (Die Georgia)
• Zur vergrößerten Ansicht der Bilder setze ich nun Lightbox 2 ein
• Die 72Quadrat-Farbe #cc3 taucht deutlich öfter und klarer auf
• Der worn Look ist nicht mehr so kräftig alles wurde ein bissel cleaner
• Die Tapete zeigt sich stärker und nicht nur als Hintergrund
• Die Kommentare wurden stärker abgesetzt und komplett erneuert
• Das Portfolio gliedert stützt sich (in Zukunft) noch stärker auf Flickr-Bilder
• Im Portfolio wurde die Weblog-Systematik etwas aufgebrochen und es gibt aufklappbare Listen zu den Unterkategorien des Portfolios
• Die Navi ist kräftig reduziert worden und nun horizontal
• Die Sub-Navigation ist (noch) in den Flash-Headern der Kategorien gewandert
• Die zweite Spalte schwebt auf dem Hintergrund — so erscheint 72Quadrat wie ein einfacher Einspalter
• Es wurde enorm abgespeckt – Die Plugin-Menge wurde reduziert und ich hab versucht die Seitenansicht etwas zu beschleunigen
• Und unendlich viel mehr…

Hoffnungen

Ich hoffe einmal daß das Redesign euch gefällt und daß ich all die Fehler die sich auf 72Quadrat noch tummeln ausmerze – auch wenn’s wahrscheinlich nie perfekt wird – 72Quadrat ist und bleibt im Fluß und ist auch einfach eine kleine Spielwiese auf der einiges ausprobiert werden will.
Natürlich hoffe ich auch daß ich mich jetzt endlich mal wieder darum kümmere nette und sinnvolle Beiträge zu schreiben, denn was bringt’s schönste Design wenn der Content schwach ist.

Aber keine Angst, 72Quadrat ist nicht gestorben. Vielmehr bin ich gerade mit zwei recht Zeitintensiven Dingen beschäftigt:

1. Unsere neue Wohnung soll bald wie eine solche ausschauen und da braucht’s noch einiges an Zeit bis alles wirklich steht.
2. 72Quadrat wird bald ein kleines Facelifting bekommen.

Das Re-Design dieser kleinen Blog-Site wird aber wahrscheinlich noch ein wenig Zeit brauchen bis es online geht. Nur soviel sei gesagt: Die Seite wird »fluid« werden und auch die Schriftgröße wird Web-Standard-Konform nicht mehr mit festen Pixelwerten generiert sein. Dann wird natürlich der Template-Code mal von Grund auf entschlackt und verschlankt…