Willkommen zum zweiten Blogeintrag zum Thema „Die Entstehung eines Projektes“.
Nachdem ich letzte Woche den ersten Teil (Idee, Screendesign und der erste HTML Prototyp) veröffentlicht habe möchte ich Heute näher auf die technischen Hintergründe eingehen – Schließlich soll das frische Projekt nicht mit den HTML Prototypen enden!

Ich hatte letzte Woche folgenden Abschnitt geschrieben, den wir uns für den heutigen Eintrag zurück ins Gedächtnis rufen sollten:

[…]

• Wer bloggen möchte, dem kann ich nur zu WordPress raten. Es gibt tonnenweise Plugins und (kostenlose) Themes. Wer sich etwas auskennt kann auch selbst tätig werden!
• Wer ein Portfolio oder eine private/kommerzielle Homepage starten möchte, dem würde ich ProcessWire ans Herz legen. Das CMS ist sehr einfach zu handhaben und Templates lassen sich schnell erstellen. Außerdem ist es exzellent Dokumentiert
• Wer etwas komplett eigenes erstellen möchte, dürfte mit einem Framework wie Kohana gut beraten sein.
• Für das eigene Wiki bietet sich entsprechend MediaWiki an.
• …

Es kommt also bei der technischen Umsetzung letztendlich darauf an, was ihr euch selbst überlegt habt. Als Beispiel soll mir auch Heute wieder mein Künstlerportfolio dienen (sn4ke.de).

Da das Portfolio eine eher statische Seite sein sollte habe ich mit „ProcessWire“ gearbeitet – Es bietet eigentlich alles was ich brauche und mir von einem CMS wünsche (Siehe „Processwire, das geniale OpenSource CMS„). Für mein Projekt brauchte ich nur wenig an den Templates der Beispiel-Seite bearbeiten… Natürlich habe ich überall das eigene HTML aus meinem Prototypen verwendet – Doch seitens PHP war eigentlich alles vorhanden was ich brauchte:

Ein Menü

Dieser Code wurde beinahe komplett aus dem Beispiel-Template übernommen. Er wird benutzt um das Hauptmenü darzustellen – Dazu lesen wir die Startseite ("/") aus und stellen die unterseiten („children“) dar. Alternativ lässt sich auch direkt mit den Seiten-IDs arbeiten.

// Darstellung des Hauptmenüs.
$homepage = $pages->get('/');

// Hole "Photography", "Digital", "Spraypainting" und "Pen'n'Paper".
$children = $pages->get('/art/')->children;

// Setze die Homepage ("/") vorne an das Menü dran.
$children->prepend($homepage);

// Wir iterieren durch die einzelnen Menü-Punkte.
foreach ($children as $child)
{
    // Und stellen diese dar. Die Variable "css_class" wurde von mir in ProcessWire definiert.
    echo '<li class="' . $child->css_class . '">
        <a href="' . $child->url . '">' . $child->title . '</a>
        </li>';
}

Die Darstellung eines Bildes

Dieses Template wird benutzt um die Bildergalerien darzustellen. Im Frontend wird mit Hilfe von jQuery und der Fancybox das Originalbild geladen, sobald auf das Vorschaubild geklickt wird. Ich habe einige CSS Klassen aus dem Quelltext entfernt, damit es den horizontalen Rahmen nicht sprengt.

// Darstellung der Galerie.

// Wir iterieren durch das ProcessWire Feld "images" (Eine Sammlung von Bildern).
foreach ($page->images as $image)
{
    // Ein Vorschaubild wird generiert (und von ProcessWire separat gespeichert).
    $thumb = $image->size(250, 200);

    // Schließlich wird das HTML gerendert. Beachtet die Verwendung von "$image" und "$thumb".
    echo '<div class="image-container">
        <a class="fancy" href="' . $image->url . '">
        <img src="' . $thumb->url . '" alt="' . $thumb->description . '" 
            width="100%" height="100%" /></a>
        </div>';
}

Eine Sitemap

Dieses Template habe ich 1:1 aus der Beispielseite übernommen. Es wird eine rekursive Funktion benutzt um alle Seiten unterhalb der Startseite in einer verschachtelten Liste darzustellen.

Mit Hilfe dieser drei Templates konnte ich die wichtigsten Teile der Seite abbilden! Einzig hinzugekommen ist eine Übersichts- und eine Blankoseite (für die Startseite, das Impressum, usw.).
Für weitere Features, wie z.B. eine Kommantarfunktion, gibt es bereits vorgefertigte Module. Im (Englischsprachigen) ProcessWire Forum findet man auch viele inoffizielle, von Benutzern geschriebene, Module – Es lohnt sich einen Blick hinein zu werfen!
Im Gegensatz zu Systemen wie WordPress war es sehr einfach das eigene Design umzusetzen – Die Beispiel-Seite erleichtert den Einstieg in das CMS ungemein.

Ein wichtiger Punkt: Seo

Damit meine Seite möglichst Suchmaschinen freundlich ist, habe ich -kurz vor Veröffentlichung- etwas umstrukturiert. Ursprünglich hatte ich folgende Struktur geplant…
Allerdings hätte sich hier durch die eindimensionale Struktur die Schwierigkeit ergeben das keine klare Trennung von Inhalten bzw. Kategorien (Bildergalerien, Sitemap, …) auf URL-Ebene besteht.
Also habe ich die Struktur etwas angepasst:
Die Vorteile liegen auf der Hand: Ich kann beliebig zwischen verschiedenem Content trennen und mir dadurch diverse Möglichkeiten zur Entwicklung der Seite offen halten!
Doch diese Änderung bringt auch wieder einen kleinen Nachteil bzw. Mehraufwand mit sich… Die Seiten „Artwork“ (/art/) und „Sonstige Seiten“ (/page/) verfügen über keinen Inhalt und müssen befüllt werden. Hier habe ich dann ein neues Template angelegt, welches automatisiert die Unterseiten und den Beschreibungstext darstellt:

// Template für Übersichtsseiten.
echo $page->body;

echo '<ul>';

$pages = $page->children;

foreach ($pages as $subpage)
{
    echo '<li>
        <a class="' . $subpage->css_class . '" href="' . $subpage->url . '">' . 
            $subpage->title . 
        '</a>' . $subpage->summary . '</li>';
}

echo '</ul>';

Die Darstellung habe ich dann mit CSS etwas aufgehübscht.

Die letzten Schritte

Nachdem wir unsere neue Seite im finalen Layout und Inhalt online gestellt haben ist die Arbeit noch nicht vorbei! Kommen wir zu einigen Feinheiten…

Sind alle Seiten erreichbar? – Ein tolles Tool zum austesten eurer Webseite ist der XENU Linkchecker – Dieser wird eure Seite nach allen Links durchsuchen und euch anschließend Auskunft über ihre Verfügbarkeit geben. Am Ende des Scan-Vorgangs kann auch eine detailierte Statistik erstellt werden!
robots.txt – Ebenso wie das „Robots“ META-Tag sollte die robots.txt unter eurer Domain zu finden sein (z.B. http://sn4ke.de/robots.txt). Mehr dazu könnt ihr euch bei Wikipedia durchlesen.
Sitemap.xml – Ebenfalls wichtig für die Suchmaschinen: Eine sitemap.xml. Diese lässt sich auf Wunsch von XENU erstellen. Doch hier bietet uns auch ProcessWire ein schönes Plugin (gefunden im Forum). Auch für anderen Systeme wie z.B. WordPress gibt es solche Plugins!

Einbindung eines Webtrackings – Um eure Besucherzahlen zu verfolgen solltet ihr ein Tracking einbauen. Ich selbst benutze gerne das „Google Analytics“ Webtracking zusätzlich zu den „Google Webmaster Tools„… Diese beiden Lösungen sind kostenfrei und bieten unglaublich viele Features und Funktionen.

Soziale Netzwerke nutzen – Nutzt für euer Projekt alle Kanäle! Das bedeutet regelmäßige Einträge auf Twitter, Facebook und Google+. Immer dann, wenn es etwas neues auf eurer Seite gibt.
Wenn ihr in den Netzwerken gefunden werden wollt und euch mit bestimmten Themen beschäftigt solltet ihr außerdem mit Hashtags arbeiten!

Abschließende Worte

Wenn ihr auf lange Sicht ein erfolgreiches Projekt starten wollt, müsst ihr euch regelmäßig um euren Auftritt im Internet kümmern. Das bringt euch nicht nur ein besseres Suchmaschinen-Ranking sondern hält auch eure Besucher bei Laune. Welchen Mehrwert hat schließlich eine Seite auf der sich Wochen und Monatelang nichts ändert?

Habt ihr eigene Tipps um ein erfolgreiches Projekt zu starten? Lasst es mich wissen!