Naja, jetzt sollte’s alles wieder besser laufen.

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.

• Skalen für den goldenen Schnitt
• Fibonacci Reihen, gern auch einfach nur ein paar Zahlenkolonnen
• Ein Zeilenzähler der auch Grundlinienrastersysteme nutzt
• Das Briefbogenfensterlein einfach mal als Maske
• Spickzettel für wirklich täglich Detailtypo-Rätsel
• Schriftgrad-Vergleiche statt Messungen

Besonders überflüssig finde ich inzwischen eigentlich die Standardfunktion eines jeden Typometers: Schriftgrade auszumessen. Im Allgemeinen bin ich doch meist in der glücklichen Situation nicht einen bestehenden Entwurf nachzusetzen, sondern einen Neuen zu erstellen. Da hilft es nicht ausmessen zu können, wie groß ich meine Schrift jetzt gesetzt habe – das kann ich auch einfach in Indesign nachschauen. Viel interessanter wäre wie groß z.B. meine 10-Punkt Schrift im Vergleich zu ein paar anderen 10-Punkt Typen ausschaut.
Ich brauche auch keine Pica, Zoll, oder Sonstwas-Skala – der Goldene Schnitt, 2:3, 3:4, sind mir in meiner täglichen Arbeit viel wichtiger.

Noch im Pre-Beta-Stadium

Aktuell ist mein eigenes kleines Typometer noch in einem frühen Stadium und einige Sachen sind auch noch nichtmal ansatzweise so gelöst wie ich es mir wünschen würde doch bald wird es hoffentlich eine Vorabversion geben die ich dann auch hier zum Download bereitstellen werde.

Wie geht’s weiter

• Weiteres Element für Proportionsmessung einbauen
• 72Quadrat-Logo drauf und nen bissel aufhübschen
• Detailtypo-Block und andere Spickzettel rein
• Eine erste Testbelichtung vornehmen

Weitere typografische Helferlein

Neben dem Typometer habe ich noch ein paar andere Helferlein in der Pipeline. Zum Beispiel ein Tool zur Berechnung eines typografischen Basis-Systems aus Headline, Zwischenheadline, Grundschrift und Bildunterschrift unter Einhaltung einer möglichst sinnvollen Grundlinienraster-Beziehung der einzelnen Elemente untereinander. Aktuell habe ich das Werkzeug in Form einer kleinen Tabellenkalkulation erstellt, dochmal schauen ob’s nicht doch noch anders zu lösen wäre.

Natürlich sollte in Zukunft auch inhaltlich wieder etwas öfter ein neuer Beitrag erscheinen, auch wenn ich sicherlich nicht zu einem wirklich fleißigen Blogger mehr werde.

Es hat sich natürlich – vor allem auch technisch – manches verändert:

Die Startseite

Meine Startseite zeigt nun – ganz trendy – meine aktuellsten Twitter Meldungen und ein paar der letzten Beiträge in schlichter Textform, und weil mein Portfolio sicherlich ein wichtiger Bereich auf 72Quadrat ist eine Diaschau einiger Arbeitsproben.
Die Diaschau läuft – wie das gesamte Portfolio – mit Slideshowpro, einem wirklich angenehmen Flash-Diaschau-Plugin. Vor allem ist die Geschichte dank Slideshowpro-Director ausgesprochen leicht zu verwalten.

Das Magazin und Das Labor

Die ehemaligen Kategorien Weblinks und Labor sind nun direkt im Magazin untergebracht. So daß sich 72Quadrat nur noch in Magazin und Portfolio gliedert. Das Magazin ist also nun der eigentliche Blog-Part geworden.
Alle Artikel sind nun – mehr oder weniger stringent – verschlagwortet oder wie man neudeutsch gerne sagt getaggt. So daß auch eine direkte Navigation über die Schlagworte möglich ist.

Weblinks

Die Blog-Kategorie Weblinks ist ja im Magazin gelandet, und zusätzlich gibt es un – eine aktuell noch recht dürftige – klassische Linkliste. Diese wird ergänzt durch Bookmarks die ich bei delicio.us poste, so daß auch aktuelle kleine Fundstücke aus dem Netz in meinen Weblinks zu finden sind.

Das Portfolio

Am Meisten hat sich sicherlich im Portfolio getan. Bisher waren auch im Portfolio die Arbeitsproben in Form ganz normaler Blog-Beiträge zu finden die sich strikt nach Ihrer Aktualität sortierten, und in verschiedene Unterkategorien aufteilten. Das ist nun Geschichte. Statt dessen gibt es eine Auswahl verschiedener Proben ohne lange Beschreibungen die sich mit ein bissel Ajax auf einer einzigen Seite in Kategorien darstellen lassen.
Das Ganze wird – wie schon kurz beschrieben – durch Slideshowpro gefüttert, und anders als bisher nicht bloß die Flash-Diaschau sondern das gesamte Portfolio. Denn dank der neuen Slideshowpro-Director-API können die Bilder auch in Form klassischer PHP/HTML Seiten dargestellt werden.

• Ein paar Beiträge hier auf 72Quadrat zu meiner Abschlußarbeit
• Eine kleine Fehlersammlung
• www.fchlcr.de

Die wichtigsten Neuerungen

• MacBook Pro 2,2Ghz Santa-Rosa mit LED-Display und 160GBHD
• Cinema Display 23 Zoll
• OKI 5600 Farblaserdrucker

Sonst noch neu

• Crumpler Wack-O-Phone
• XT-Stand Laptop Ständer
• Crumpler The Slip

Keine halben Sachen

Meinen alte Kombination G5 plus iBook wollte ich eigentlich schon seid nem Jahr in die Frührente schicken doch es dauert halt dann immer doch länger als man denkt. Dafür hab’ ich dann aber auch keine halben Sachen gemacht und gleich die Peripherie mitaufgefrischt.

OKI C6500N Farblaser

Zu meinem guten alten Laserdrucker-Veteran dem Apple Laserwriter Select hat sich ein frischer A4-Farblaserdrucker gesellt. Zwar leider ein GDI-Drucker der dummerweise halt im RGB-Modus arbeitet, aber trotzdem eine ausgesprochen hohe Druckqualität aufs Papier bringt und dies für einen Farblaser zudem auch zu einem recht angenehmen Seitenpreis von ca. 23 Cent pro Fotoseite. Hier ein Test des Druckers auf druckerchannel.de

Schließlich habe ich beim Profiler noch ein ordentliches ICC-Profil erstellen lassen, so daß auf die Farbwiedergabe für einen Laserdrucker sehr gut ist. Der Drucker ist nun schon seid ein paar Wochen in Betrieb und gefällt mir eigentlich sehr gut. Ein Test in der Indesign CS3 Trial ergab auch, daß der Druck direkt aus dem Programm sehr gut ausschaut. Aus der Vorgängerversion war’s ärgerlicherweise recht grobauflösend.

23 Zoll Cinema Display

Zuvor arbeitete ich an meinem G5 an zwei 17″ Geräten. Einem 17″ CRT-Monitor von Apple und einem Samsung TFT: Beide in einer Auflösung von 1280 x 1024 Pixeln. Für meinen Umstieg auf’s Macbook Pro musste also eine vergleichbare Bildschirmarbeitsfläche auf meinen Schreibtisch. Zunächst war der interressante HP 2065 20 Zoll-TFT auf meinem Einkaufszettel, doch das Teil war einfach zu hässlich und irgendwie traue ich der PC-Welt nicht so recht. Meine Wahl viel also auf ein gebrauchtes 23 Zoll Apple Cinema Display – eine wunderbare Wahl. Ich muß zwar den Bildschirm noch möglichst bald kalibrieren, doch die 1920 x 1200 Pixel sind ein Traum. Zusammen mit meinem Macbook Pro habe ich nun 3,6 Mio Pixel Arbeitfläche – vorher an meinem G5 hatte ich noch 2,6 Mio zur Verfügung.

WD MyBook 500GB Festplatte

Trotz der Aufrüstung meines Macbook Pros mit der 160GB Festplatte musste einfach zusätzlicher Speicherplatz her. Vor allem halte ich es dank meiner ärgerlichen Schwäche allerlei Dinge in Zügen, Restaurants oder sonst wo, liegen zu lassen für lebensnotwendig ein Backup meines Computers auf dem Schreibtisch stehen zu haben, und zum anderen können 160GB verdammt schnell extrem knapp werden.

Ich kann die WD-Festplatte wirklich wärmstens empfehlen. Dank Firewire 800 ist sie ausgesprochen flott unterwegs, ist nicht allzu aufdringlich was Design und Lautstärke angeht, und zudem recht preiswert. Auch der simple Knopf auf der Festplatte der sie automatisch abmeldet und ausschaltet ist ganz nett.

Für meine Backups nutze ich zum einen das bereits mit der Festplatte mitgelieferte Retrospect Express, und für mein Systembackup das wunderbare kleine Programm Super Duper.

Safety first – Der Taschentick

O.K. ich habe einen kleinen Taschentick und packe meine Maschine immer recht gut ein. Nun hat sich (dank eines recht interessanten 19 Euro Angebots) neben meine Crumpler »Verry Busy Man« (siehe Flickr)eine »Wack o Phone« (auch Flickr) gesellt. Mal schauen. Die Tasche ist nen gutes Stückl kleiner als meine alte – genauergesagt ist sie sogar so klein, daß mein neues MacbooK Pro nicht rein passt. Naja, vielleicht sieht man sie bald bei Ebay wieder.
Nicht bei Ebay landet die wirklich nette Crumpler Neoprenhülle, die sich anders als die alte Tucano-Hülle meines iBooks auch wirklich komplett aufklappen lässt um das Macbook pro auch geöffnet auf der Tasche verwenden zu können. Um dann das gute Stück wirlich vor jedem Kratzer zu bewahren landet dann noch der Slip von Crumpler zwischen Tastatur und Bildschirm, und nebenbei eignet sich das Teil unterwegs wirklich als Mousepad.
Ich hatte zunächst eine Networx Neoprenhülle gekauft, doch irgendwie konnte ich das Networx Logo dann doch nicht so recht ertragen und ich bin auf Crumpler The Gimp umgestiegen.

Nen ordentlicher Laptop-Ständer

So nen Laptop wird ja recht schnell ziemlich warm. Außerdem ist’s einfach angenehmer wenn das Teil zum tippen ein wenig geneigt ist. Leider sind die meisten Laptop-Ständer extrem häßlich oder unangenehm teuer.
In einer Ausgabe der Maclife dand ich dann einen Test des XT-Stands, der zwar auch im normalen Handel für unverschämt viel Geld über die Ladentheke geht, aber bei Ebay auch regelmäßig als Versteigerung zu finden ist. Bei meinem fünften Ersteigerungsversuch schließlich kam ich dann aber doch für (ich glaube) 35,00 Euro an das Teil, und ich kann den XT-Stand wirklich nur empfehlen. Ausgesprochen klein zusammenfaltbar, so daß man Ihn auch mal mitnehmen kann, und sehr solide verarbeitet.

Wie gut ist das neue Santa-Rosa Macbook Pro – Ein erster Test

Das neue LED-Display

Ich muß schon zugeben, ich bin bin recht beeindruckt von dem neuen Macbook Pro. Das neue LED-Display ist unglaublich hell, so daß ich es eigentlich immer zwei Stufen dunkler nutze. Auch ein Flackern des Displays wie an manchen Stellen beschrieben kann ich keineswegs feststellen. Die Qualität des Displays ist auch abgesehen von der angesprochenen hervorragenden Helligkeit sehr gut. Wenn man aus dem idealen senkrechten Betrachtungswinkel herausgeht gibt es zwar einen klar merklichen Gelbstich, doch der Konrtast schwindet dafür kaum, so daß auch in ungünstigen Winkeln das Display lesbar bleibt. Insgesamt würde ich einfach mal behaupten, daß das Display für ein Laptopdisplay wunderbar ist.

Performance

Aktuell sitze ich nun seid ca. 2 Wochen vor dem neuen Teil und es ist wirklich erstaunlich. Ich hätte nicht gedacht, daß das MBP so schnell ist. O.K. mein alter G5 brauchte sicherlich mal wieder ein frisches System und wurde wahrscheinlich von den 30 kleinen Systemhelferlein in die Knie gezwungen, doch das MBP rennt wirklich enorm.

Besonders sympathisch aufgefallen ist mir die Olga. So eine Type hab’ ich schon lang nicht mehr gesehen: Sie hat in dem Regular-Schnitt den Charakter einer ausgesprochen klassischen Renaissance Antiqua, doch wirkt doch ausgesprochen zeitgemäß und entspricht dem aktuellen Schriftgeschmack. Dabei ist sie merkwürdig genug und nicht ein weiterer uninspirierter Klon. Insbesondere die derben Einschnitte und harten Kurven – die wohl einem Linoleumschnitt nachempfunden sind – geben der Schrift in diesen Schnitten ein ausgesprochen interressantes Extra. Vielleicht sind die Einschnitte manchem etwas zu extrem, aber das sei dahingestellt – ich find’s eine schöne treffende Idee. Endlich mal wieder was neues.

Konzept-Text zur Olga

As a designer I know how much pleasure can arise from working on a book or magazine design with »experimental« content and background, like art, illustration or design issues. The choice of typeface is exciting and important, but very often underestimated. In this area of book or magazine design there is often a need for a good working text typeface for use in combination with a prominent and extraordinary typeface for titling and emphasis. Finding the right pair can be difficult and it is not uncommon that the result doesn’t work very well. Having this problem in mind I wanted to design a typefamily with different styles where one style is suitable for bodytext and where the other is experimental and suitable for titling and emphasis. The result is Olga regular and Olga lino. Olga regular is a modern renaissance antiqua with a solid, warm and organic character which makes it legible. Olga lino is based on Olga regular, but is also inspired by linocut illustration technique. With the bold character and the sharp cuts the typeface reflects the roughness and strength of linocut. To keep the handmade and irregular image, Olga lino has different glyphs for the same character.

Da stellt sich nur die Fraqe: Wann wird die Olga das Licht der Welt erblicken, und wo wird man sie wohl einsetzen – hoffentlich in einem ähnlich inspiriertem Magazin. Ich würd’s Olga auf jedenfall wünschen.

Links zur Olga

• Mehr auf der Seite von Christina Bee (kruzbi.de)
• Olga ist unter den TDC2 2007 : Winning Entries

Winning Entries 2007

Text / Type Family

• Corundum Text von Joshua Darden
• Greta Text von Peter Bilak
• Untitled von Joshua Darden
• EMT Lorena von Eduardo Manso
• Olga von Christina Bee
• Tisa von Mitja Miklavčič

Type System / Superfamily

• Arno Pro von Robert Slimbach
• Beorcana von Carl Crossgrove
• Fakir von Underware
• Nassim von Titus Nemeth
• Midan von Kameel Hawa
• Palatino Sans and Palatino Sans Informal von Hermann Zapf and Akira Kobayashi
• Quiosco von Cyrus Highsmith
• Xtra Sans von Jarno Lukkarila

Display

• Flexion von John Langdon
• Manicotti von David Jonathan Ross
• Peanut von Michael Clark
• Subtil von Hanno Bennert and Alexander Gialouris

Pi & Ornament

• Gregoria von Elena Albertoni

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.

Eine weitere Youtube Perle

Wo wir schon mal bei Youtube sind und ich meine innere Hürde vor’m Youtube-Linken gerade mal so nett überwunden habe, möchte ich noch auf einen weiteren sehr schönen aber auch sehr melancholischen Animations-Kurzfilm verlinken: Father and Daughter von Michael Dudok De Wit unbedingt anschauen!

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…

Wegweiser Schrift

Ich bin ja bereits stolzer Besitzer der Klassiker Lesetypografie und Detailtypografie aus dem Hermann Schmidtz Verlag. Leider hat es dieses kleine Heftchen immer noch nicht in mein Buchregal geschafft. Vielleicht ändert sich das ja mal. (Verlags-Link)

EinEinBandBand

Schon wieder ein Typo-Buch – und ein besonders schönes dazu. Einband-Gestaltung kommt leider nicht allzu oft auf meinen Schribtisch, doch dieses feine Buch dürfte dort durchaus mal landen. (siehe Verlags-Link)

Type-Select – Der Farbfächer des Typografen

Das Teile hatte ich schon des öfteren in der Hand – doch ich konnte mich bisher noch nie dazu durchringenes wirklich zu kaufen. (siehe Verlags-Link)

100 T-Varianten

So jetzt aber auch die letzte Typo-Geschenkidee aus dem Hermann Schidtz Verlag – versprochen! Doch für nen Timo sind 100 T-Varianten ja vielleicht ganz nett. (Verlags-Link)

spatium »Hamburgefonts«

Das aktuelle Schriftmuster-Magazin-Heft von Spatium würd’ mir unterm Baum natürlich auchgefallen. (siehe Shop)

Typotheque Kalender 2007

Ich will ja wieder ein bissel mehr offline leben. Darum fang ich nächstes Jahr doch einfach mal mit meinem Kalender an. Bei Typotheque gibt’s einen feinen kleinen Taschen-Kalender der mir verdammt gut gefallen würde. (siehe hier) Update: Das wird mir schon geschenkt !!

Buchstaben für die Bude

Neulicht hatten Lene und ich ja schon überlegt, wo wir in unserer Bude ein paar wunderschöne Buchstaben anbringen können. Jetzt habe ich dank dem Fontblog auch einen Laden in Hamburg gefunden wo man solch nette Staben bekommt.

Radl-Thermo-Trikot

Tja ja, der Timo muß sich ja wirklich mal etwas mehr bewegen. Vielleicht würde da ein Langarm-Thermo-Trikot helfen?

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…