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.

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)

Die Features

• Als CMS wird die Blogsoftware WordPress eingesetzt – jedoch ohne klassische Blogfeatures wie Kommentarfunktionen o.ä.– So ist es auch für Lene selbst ein Leichtes die Seite zu pflegen.
• Jedes Bild linkt auf ein Popup mit einer Flash-Diaschau der Fotogeschickte.
• Die Diaschau basiert auf Slideshowpro und kann ausgesprochen angenehm dank Slideshowpro-Director mit neuen Bildern gefüttert werden.
• Die Diaschau kann mit Cursortasten oder Maus durchgeblättert werden.
• Auch in der Diaschau kann die Beschreibung der Geschichte eingeblendet werden.
• Das Popup für die Diaschau wird Standardkonform geöffnet und schließt sich beim Verlassen automatisch
• Es gibt auch eine kleine Hilfe für die Dischau die per Ajax Scriptaculous ein und ausgeblendet werden kann.
• Die Meta-Infos werden ebenfalls per Scriptaculous ein und ausgeblendet.
• Untypisch für ein Fotografenportfolio gibt es einen RSS Feed.
• Natürlich werden auch etwas aufgehübschte URLs statt der »index.php?xyz« Sache verwendet.

Also unbedingt lenemuench.de besuchen

Also all die DIV-Tags, Links und Meta-Teile die dazu führen daß eine HTML-Site eben so ausschaut wie sie ausschaut.

Inzwischen findet sich natürlich auch schon die entsprechende Flickr-Sammlung mit diversen Screensots wie die Seitenstruktur sonst noch so ausschauen kann.

 
 

Natürlich haben die kleinen Farbpünktchen auch ein bissel was zu bedeuten:

• blue: for links (the A tag)
• red: for tables (TABLE, TR and TD tags)
• green: for the DIV tag
• violet: for images (the IMG tag)
• yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
• orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
• black: the HTML tag, the root node
• gray: all other tags

gefunden via chat und wiederentdeckt via spreeblick.

• Weitere Bilder Meinereiners finden sich bei Plainpicture unter den Bildnummern p1610078, p1610069, p1610067, p1610066
• Die Internetseite die meine Wenigkeit schmück: www.dgb-jugendbildung.de
• Die Broschüre als PDF zum download gibt’s z.B. hier oder direkt unter diesem Link

Die Zimmer:

• X-Large Rooms
• Large Rooms
• Medium Rooms
• Small Rooms

Making-Of

Außerdem gibt es noch einen nett gemachten »Making-of-Film« von der Aktion den man hier als Windows-Media-Player-Film herunterladen kann. (26,1 MB)

Gefunden via Werbeblogger

60 Optical Illusions & Visual Phenomena
(Visual Illusions – Optische Täuschungen) by Michael Bach, University of Freiburg, Germany
Einfach mal bei michaelbach.de/ot/ vorbeischauen. Ach ja, man sollte aber schon einen aktuellen Flashplayer haben um die Sachen zu sehen…

Motion & Time

• »Stepping feet« illusion 1 – strong, beautiful and (relatively) easy to understand
• Motion Induced Blindness – an unexplained optical illusion of disappearing dots
• Stereokinetic Phenomenon – an optical illusion of 3D from motion (aka »kinetic depth effect«)
• »Rotating Snake« Illusion – with a new explanatory twist
• Pinna-Brelstaff Illusion
• Motion Aftereffect – also known as »waterfall effect«
• Spoke Illusion – a motion illusion + an unexpected (?) aftereffect
• Stroboscopic Artifacts – making a teaching point out of a nuisance
• Sigma Motion – an optical illusion due to an interaction of image dynamics and eye movements
• Eye Jitter – more on eye movements, involuntary ones
• Biological Motion – for me the most beautiful class of visual illusions
• Flash-lag Effect – moving and stationary objects perceived at different times
• Ramp Aftereffect – an aftereffect in time
• Enigma by Isia Leviant
• Reverse Phi Motion – something for the specialist
• »Stepping feet« illusion 2 – radial version of »Stepping feet 1«, weaker
• Motion-Bounce Illusion – sound influencing perception of motion (crossmodally)
• Motion Binding
• Missing-fundamental motion inversion
• Frequency-doubling illusion

Luminance & Contrast

• Hermann’s Grid – fleeting luminance illusions
• Hermann’s Grid bent – a new twist, refuting the classical explanation
• Scintillating Grid – strong fleeting luminance illusions
• Induced grating – classical brightness contrast
• Craik-O’Brien-Cornsweet – collaboration of retina & cortex
• Wertheimer-Koffka-Ring – pitting Gestalt vs. lateral inhibition
• Simultaneous Contrast – here dynamic
• Pyramid Illusion – Vasarely revealed
• Munker-White Illusion – contrary to lateral inhibition
• Adelson’s »Corrugated Plaid« – context affecting brightness
• Adelson’s »Checker Shadow« illusion – more context affecting brightness
• Contrast Constancy – demonstrating space-average-based contrast gain control
• Contrast Gain Control – demonstrating temporal contrast gain control

Colour

• »Lilac Chaser« – a rapid aftereffect, you pursue colours which aren’t really there
• Benham’s Top – colour from spatio-temporal patterns
• Neon Colour Spreading
• Structure from motion – fails at equiluminance

Geometric– & Angle Illusions

• Hering Illusion – and other angular interactions
• Poggendorff Illusion – a classical geometric optical illusion with a new twist
• Fraser’s Spiral
• »Café Wall« Illusion

Size Constancy

• Müller-Lyer Illusion – test your bisection accuracy
• Moon illusion
• T-illusion
• Luminance Looming
• Shepard: »Turning the Tables«
• Shepard: »Subterranean Terror«

Cognitive– / Gestalt Effects

• Blur & picture content – spatial filtering (or high frequency masking)
• Hidden message – blur & figure-ground discrimination
• Kanisza’s Triangle – depends on context
• Blotted letters – Gestalt completion
• Hidden Figures – Dalmatian Dog with 2 helpers
• Rotation – changes the interpretation
• Impossible Objects – draw your own impossible object

What’s special about faces?

• Rotating face mask – hollow faces
• Find the Face (in the Beans) – a picture puzzle
• The face on Mars – imaginations of perception
• The »Thatcher Illusion« – inverted faces lose their emotional message
• Dr. Angry and Mr. Smile – two messages in two spatial frequency band
• The Lincoln Effect

Folgt einfach der Anleitung oben auf dieser Internetseite, und aus rosa wird grün … wird grau…

Das Magazin lässt sich unter arstueblich.ch herunterladen. Gefunden hab ich das gute Stück über artnetz.de