Diary

Diary #16 – Fotophobia ist fertig!

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

screenshot1_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.

Zwangsbüro

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

Diary #15 – Bildflut Ahoi!

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!

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:

Pixelpracht

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 🙂

php-noob

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

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

Diary #13 SEOphobie

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 :/

seitenreport_fotophobia

Diary #12 – Logo und Favicon

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.

Logo Erstellung 1

Screenshot-LogoDesign

Diary #11 – Design und Kopfknoten

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).

screenshot3_fotophobia

screenshot2_fotophobia

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.

Diary #10 – HTML-ready

23:42 Uhr, 8 Tage später und Unterseite 26 ist fertig für die vorerst letzte HTML-Formatierung – YIHAAA!. Die Woche über immer wieder Fummeleien im CSS und dem Text-Layout, ein paar wütende Seitenscribbles später kam ich letztendlich zur Implementierung aller Texte auf den Seiten und Unterseiten. Das Navigationsmenü erstellt sich dadurch praktisch von selbst – angenehm.

Relativ nervig war dagegen die Nachbearbeitung aller Metadescriptions und vergessen habe ich dabei fast das Impressum. Schnell noch in den Footer gepackt und auf „nofollow“ für den Crawler gesetzt.

Die Textformatierungen im Editor gingen dank Frank Bültges „Addquicktag“ schnell von der Hand, die Einrichtung des Plugins mit allen nötigen HTML-Befehlen dauerte allerdings ein bisschen. So ließ sich unter anderem aber problemlos ein einheitliches Teaser-Format erstellen, das sich nun mit einem Mausklick auf sämtlichen Seiten anwenden lässt.

addquicktag_fotophobia

Diary #9 – Content, Content, Kollaps!

Puh, das Wochenende hat sich verabschiedet, das Grundgerüst für Fotophobia steht, die Strukturen sind klar und das Konzept klebt irgendwo zwischen Post-It eins und einhundert. Jetzt hilft nichts mehr, Content, Content, Content muss her. Und wenn ich mir die Seitenstruktur so ansehe, stelle ich fest, dass über 20 Seiten und Unterseiten erstellt werden wollen. Glücklicherweise habe ich schon satte – äh – null. 7 Tage jeden Abend drei Texte und die Teaser dafür auf der Zugfahrt von der Arbeit nach Hause, dann sollte das hinhauen.

Bilder habe ich dann aber auch noch keine, geschweige denn ein Design, geschweige denn ein Logo oder Claim, geschweige denn Backlinks, geschweige denn… aaaah! Schnell! Shake it Stevens!

Diary #8 – CSS-Geschubse

WordPress steht 1A und mit ihm eine Vorauswahl des Themes für fotophobia.de. Und die ist nicht allzu knapp, denn genau 8 Themes kommen in die engere Auswahl. Welches ich davon letztendlich nutzen werde, wird sich erst während dem Designprozess herausstellen, ist zum jetzigen Zeitpunkt aber auch unerheblich.

Bis dahin arbeite ich brav in Twenty-Twelve-Umgebung, führe aber vorher einge CSS-Anpassungen durch, die ich ganz unabhängig vom Erscheinungsbild der fertigen Seite einsetzten werde. Die wichtigsten Änderungen die ich hier aufführe betreffen font-family, font-color und background-color. Allerdings NUR auf den Content-Bereich bezogen, da ich zum jetzigen Zeitpunkt ohnehin noch nicht weiß, wie Navigation, Header und Co. später aussehen werden.

Eine gute Lesbarkeit und Arbeitsumgebung für die Contenterstellung erreiche ich durch eine Zeilenbreite von 55-75 Zeichen in den Vorschau-Beiträgen und einer leicht eingegrauten Schriftfarbe vor dunkelgrauem Hintergrund. Bei hartem schwarzweiß-Kontrast fallen mir die Augen schon nach ein paar Stunden Contenterstellung sonst mit Sicherheit aus dem Kopf.

font_color_fotophobia

Diary #7 – Verdammt! WordPress again

Die Nacht war lang und eigentlich hatte ich am heutigen Sonntag nicht vor, mich noch einmal mit WordPress zu beschäftigen, aber bei den Anpassungen der Permalinks im Backend hatte ich Probleme. Benutzerdefiniert hatte ich folgende Permaregel beabsichtigt:

„/%post_id%/%postname%“

Trotz .htaccess-Anpassungen und vollständiger Vergabe von Schreibrechten (auf 777) an das CMS erhalte ich ständige 404-Errors auf angelegten Testseiten. Ich habe keine Idee, was über Nacht passiert ist, aber plötzlich funktioniert es!?

Schade eigentlich, dass ich mich nun doch entscheide, auf WordPressvorgaben hinsichtlich Permastruktur zurückzugreifen und mit

„fotophobia.de/Beispielbeitrag

arbeite, da die ID nur eine überflüssige Hürde zum Pfad mit eventuellem Keyword-Title bedeutet. Das habe ich zwar nur geträumt und keinerlei Quelle dafür, aber es erschien mir heute morgen irgendwie logisch.