Diary - Dokumentation und Beispiele über die Arbeit an Fotophobia

Diary #16 – Fotophobia ist fertig!

Fertig? Mit was? Wieso und worum geht’s in diesem Blog überhaupt?
->Diary #1 – Projekt Fotophobia

Zwei Nächte Powerphotoshopping zum Abschluss meiner Arbeit an Fotophobia sind vorbei. Die Startgalerie umfasst nun wenige Fotos in vertretbarer Webgröße, wenn man bedenkt, dass sie immer noch Full-HD-Qualität aufweisen. Ein Speed-Test der Website bringt gute Ergebnisse, aber mehr als drei Bilder auf der Startseite machen keinen Sinn, wenn man sich anschaut, wie sie in die Abrufzeit der Homepage einschlagen. (Screenshot Speed-Test)

Die Wahl der Bilder für „Mein Portfolio“ ist mir letztendlich doch ziemlich schwer gefallen. Während meiner abenteuerlichen Reise durch sämtliche Speicherkarten bin ich nicht nur auf Bilder gestoßen, die eigentlich verboten gehören, sondern auch auf wunderschöne Aufnahmen, die das Portfolio aber gesprengt hätten. Zu einem späteren Zeitpunkt werde ich mehrere, thematische Galerien erstellen.

Auch Wasserzeichen sollte ich dann einfügen oder zumindest den Rechtsklick auf die Bildern mit Javascript unterbinden, aber da bin ich kein Fachmann. Zukünftig will ich Fotophobia aber in jedem Fall weiterpflegen und um meinen Kenntnisstand erweitern. Die Bildwelt ist schließlich groß, es gibt noch viel zu fotografieren noch viel mehr zu tun, aber jetzt trinke ich erstmal einen heißen Kaffee.

Dieser Blogpost entstand übrigens dank der Deutschen Bahn in meinem gemütlichen Zwangsbüro.

Diary #15 – Bildflut Ahoi!

in Diary

Ich brauche Bilder, viele, viele Bilder. Zunächst einmal Bilder für die Veranschaulichung und Auflockerung sämtlicher Texte, dann Bilder für mein Portfolio und zuletzt dann auch noch Bilder für die Startseite.

Letztere deswegen, weil ich die Videostartseite eben wieder über Board geworfen habe. Nutzer sollen nicht erst einen Play-Button in der Screenmitte betätigen müssen und eine Autoplay-Variante entpuppte sich als Schnapsidee, weil ich Besuchern keine schnelle DSL-Leitung für zuverlässiges Streaming unterstellen kann.

Stattdessen platziere ich drei bis fünf ausgewählte Fotos aus meinem Sammelsurium an DSLR-Bildern, um Gäste willkommen zu heißen. Fotomaterial für diese Startseitengalerie (so nenne ich sie mal) habe ich genug, aber „leider“ habe ich die schönsten Bilder aus meinem vergangenen Thailand-Urlaubes im .raw-Format geschossen, was eine Bearbeitung über Adobe Camera Raw und anschließend Photoshop voraussetzt. Im Raw-Format fasst jedes meiner Fotos etwa 20MB, Ziel sind webgerechte 50-80kb – unmöglich, aber auf max. 300kb werde ich sie herunter schrauben müssen. Eine Herausforderung, zumal die Galerie im Vollbildmodus laufen soll, wenn die Sidebars links und rechts eingeklappt werden.

Den Content, bspw. das Kapitel „Blende“, werde ich mit Bildern der Wikimedia Commons, oder generell der Creative Commons-Lizenzen, befüllen, um im letzten Schritt dann eine vergrößerte Form der Startseitengalerie in „Mein Portfolio“ anzulegen.

Also dann, start your Engine, Mr. Adobe Camera Raw!

Diary #14 – Achtung php-Dilettant!

in Diary

Bei der Sache mit der internen Verlinkung ist mir etwas aufgefallen, was mir so gar nicht gefiel. Mein php-Dilettantismus machte die Angelegenheit erst richtig knifflig.

– Ziel:
Ein Video soll beim Aufruf der Homepage www.fotophobia.de als Fullscreen erscheinen und die Startseite, aber keine eigene Unterseite mit eigener URL, bilden.

– Problem:
1. In WordPress angelegte Seiten, also auch die Video-Seite, erhalten eine ID und werden als Unterseiten zum Hauptpfad fotophobia.de angelegt – sofern keine Permalinks vorhanden. Meine Videoseite befand sich also hier:

#Startseite#

2. Angelegte Seiten, also auch die Video-Seite mit der id=297, erhält einen Eintrag im Navigationsmenü, das wollte ich schon gar nicht nicht!

– Lösung:
1. Ging noch recht einfach: Statische Startseite in WP angelegt und mit der Video-Seite bzw. deren ID verknüpft. Wunderbar, auf fotophobia.de erscheint nun ohne Umschweife eine ehemalige Unterseite – unsichtbar und frei von hässlichen URL-Anhängseln.
2. Hat mich um meinen Schlaf gebracht, bis ich als php-noob auf den Trichter kam, dass sich Einträge im Navigationsmenü über die header.php entfernen lassen. „Exclude“ hieß das unglaublich fantastische Zauberwort, gefolgt von der page-id meiner neuen Startseite. Die beiden anderen id’s im Screenshot waren Testläufe von unveröffentlichten Entwurfsseiten und -unterseiten.

Und nun? Erscheint die getarnte Unterseite als statische Startseite und wird in der Navigation nicht mehr aufgeführt. Ein Klick auf das fotophobia-Logo führt entsprechend zurück zum Opener, dem Video. Ich bin mir sicher, dass es funktioniert, denn ich teste das nun schon zum 100sten Mal – und freu mich immer wieder :)

Was habe ich php-mäßiges daraus gelernt?

if($Verzweiflung = riesengroß)
echo ‚Shakin Stevens!‘;

Diary #13 SEOphobie auf Fotophobia

in Diary

Ein komplett freies Wochenende liegt vor mir, aber bevor ich mich an das erste Bildmaterial mache, habe ich einen minimalen Seo-Ausflug unternommen.

Schon vor einigen Wochen habe ich Gastartikel geschrieben, die auf fünf unterschiedlichen Webseiten platziert wurden. Themen waren Urlaubsfotografie, Fotografie von Fahrzeugen, Fotografie von Wohnräumen, Einrichtungen etc. Die Keywords für die entsprechenden Backlinks auf fotophobia sind z.B. Fotografie-Tipps, DSLR-Einsteiger und ansonsten „fotophobia.de“. Ein paar Kommentare auf themenverwandten Webseiten habe ich zwischendurch immer mal wieder gesetzt um wenigstens nofollow-links zu generieren und letztendlich vielleicht sogar Traffic. Ein permanenter Blogroll-Link von meinem privaten Blog „rainybrain.de“ besteht ebenfalls.

Die erste Auswertung der Backlinks ist allerdings ernüchternd, von 15 Verlinkungen werden bis dato lediglich 6 aufgeführt. Aber gut, der Seitenreport ist nicht der zuverlässigste, die Backlinks sind erst relativ kurz im Netz und die Ursprungsseiten werden nicht unbedingt oft gecrawlt. Ich belasse es dabei, integriere noch geschwind Analytics in meinem WordPress-Backend und mache mich an ein noch weniger spaßiges Thema: Die internen Verlinkungen aller Seiten und Unterseiten auf fotophobia.de :/

Diary #12 – Logo und Favicon

in Diary

Was für eine Freude :) Weg aus WordPress und auf einen bunten Abstecher in Photoshop. Das Fotophobia-Logo ist fertig, ziert die Webseite und fungiert als Home-Button. Die krisselige Struktur des Logos habe ich unter anderem einem (mit sehr viel Liebe) zerknüllten Papier zu verdanken.

Die gestrigen Screenshots habe ich durch zwei neue mit fertigem Logo ersetzt und für das Favicon habe ich auf ein fertiges .ico aus dem Internet zurückgegriffen.

Diary #11 – Design und Kopfknoten

in Diary

Es war allerhöchste Eisenbahn das Design von fotophobia.de zu erstellen und den ganzen Knoten aus Ideen in meinem Kopf konkret umsetzen. Designarbeit ist nach soviel Buchstabenflut wie eine Flasche Becks nach der Sauna.

Eine statische Startseite ist nun vorhanden, ein Fullscreen-Portfolio mit (demnächst) einigen meiner Fotos und ein (bald mehrere) Video(s) – Live und in Farbe – ebenfalls. Weiter sind nun alle H1-H6, Content-, Navi- und Side-Bar Texte in Sachen Farbe und Kontrast minimal an das Design angepasst. Die Webseite ist also gut gefüllt und bietet dem Crawler genügend Futter, wenn er das erste mal zum Essen vorbeikommt.

Farbgebung:
Das Design ist farblich ziemlich schlicht, aber einheitlich gehalten, ob ein helles Braun oder Grau die Primärfarbe bestimmt weiß ich noch nicht, aber in beiden Fällen rückt die unauffällige Farbgebung den Fokus auf die Bilder in den Texten und den Content überhaupt. Meine Präferenz liegt derzeit auf einem hellgrau-weiß-weinroten Gesamtbild (ohne die Bilder).

Weiter gibt nun eine Socialbar, die ich allerdings auf G+, Facebook und Twitter beschränkt habe. Pinterest folgt sehr viel später, wenn genügend Bildmaterial auf der Webseite vorhanden ist.