XDDeni hat sich denn im Wunschbuch erkundigt, wie man diese Toolbar realisiert – here we go!

Es handelt sich dabei um ein Tool namens Wibiya, das man unkompliziert und ohne Codingkenntnisse in alle Arten von Webseiten einbauen kann, seien es Blogs, statische Seiten, Foren oder was auch immer. Welche Funktionen die Leiste haben soll, steuert man einfach über Drag & Drop der angebotenen Applications.

Nachdem ihr euch auf der Seite www.wibiya.com kostenlos registriert habt, könnt ihr euch eure Toolbar nach euren Wünschen zusammenstellen. Auch das Design lässt sich an die Farbgebung eurer Webseite anpassen. Die Bedienung des Ganzen läuft dabei recht einfach ab, weswegen ich es mir an dieser Stelle erspare, auf Details einzugehen.
Am Ende müsst ihr auswählen, auf welcher Art von Webseite eure Toolbar eingebunden werden soll. Für WordPress wird beispielsweise ein Plugin generiert, auch für andere Blogsysteme gibt es etwas Vergleichbares; bei allen anderen Arten von Webseiten muss man eine Zeile JavaScript in den Quellcode einbinden.

In diesem Artikel werde ich auf die verschiedenen Gestaltungs- und Umsetzungsmöglichkeiten für ein solches Portfolio eingehen. Im Anschluss daran seid ihr herzlich eingeladen, euren Senf dazu abzugeben. :o)

das Layout

Zunächst betrachten wir das Layout der Webseite, die das Portfolio beheimatet. Das Bild soll hier ja eindeutig im Vordergrund stehen, präsentiert werden. Da liegt es auf der Hand, dass die Gestaltung der Webseite nicht vom Foto ablenken sollte – schlichte, dezente Layouts sind hier also zu empfehlen. Aufwendig gestaltete Headergrafiken können zwar auch viel über das designerische Können verraten und die Seite individueller wirken lassen, aber sie sollten den Betrachter keinesfalls vom eigentlichen Inhalt ablenken. Dunklere Grautöne eignen sich gut als Farben für das Layout, wie man beispielsweise in der fotocommunity sehen kann.

Gerade bei großen Fotos ist es wichtig, auf die Darstellung bei niedrigeren Auflösungen zu achten. Nicht jeder besitzt einen so großen Monitor wie viele Designer und Fotografen, und auch bei einer Auflösung von 1024×768 sollte das Layout noch stimmig sein. Auch die Dateigröße und somit die Ladezeit sollte man immer im Auge behalten.

Last but not least: dass Werbeeinblendungen ein höchst unprofessionell wirkendes No-Go sind, brauche ich hier wohl nicht eigens zu erwähnen. ;-)

Anzeige der Bilder

Wie sollen die Bilder nun präsentiert werden? Soll auf der Startseite das jeweils neuste Foto großformatig angezeigt werden oder möchte ich den Besuchern mit lauter kleinen Thumbnails (das sind verkleinerte Versionen der Bilder) gleich eine Übersicht über all meine Werke bieten? Sollen die Bilder nach verschiedenen Kategorien sortiert werden, oder nur chronologisch?

Im Falle von Thumbnails kann man zwischen verschiedenen Formaten wählen. Proportionale Verkleinerungen belassen das Bild bei seinem ursprünglichen Seitenverhältnis und verzerren oder beschneiden es dadurch nicht, aber wenn man verschiedenformatige Bilder hat, gerät eine solche Thumbnailgalerie leicht unsymmetrisch und chaotisch. Ästhetischer wirkt es, wenn die Thumbnails alle die gleiche Größe aufweisen, beispielsweise quadratisch. Hierbei bevorzuge ich es, wenn ein Ausschnitt aus dem Originalbild generiert wird – dass bei der Thumbnailansicht ein Stück vom Bildausschnitt fehlt, finde ich erstmal nicht allzu tragisch, es geht ja nur um einen schnellen ersten Eindruck.

Als nächstes muss man sich überlegen, wie man vom Klick auf das Thumbnail zur Anzeige der Originalgröße gelangt. Am einfachsten ist es hierbei, die Originalversion des Bildes in einem neuen Fenster zu verlinken – aber das ist schnöde und ziemlich hässlich. Hier bietet sich vielmehr der Einsatz von etwas JavaScript an – Stichwort Lightbox, Highslide und wie sie alle heißen. Auf diese Weise kann man einen eleganten Effekt realisieren, sodass sich etwa beim Klick auf das Thumbnail der Bildschirm verdunkelt und stattdessen das große Foto eingeblendet wird, ähnlich einer Diashow.

zusätzliche Infos

Zu einem Bild kann man weitaus mehr Informationen bieten als einfach nur die Bilddatei samt Titel und eventuellen Anmerkungen. So lassen sich beispielsweise die EXIF-Daten auslesen, die von der Kamera automatisch mitgespeichert werden und Angaben zum Kameramodell, den verwendeten Einstellungen wie Belichtungsdauer oder Blendenöffnung, dem Aufnahmedatum etc. beinhalten. Schlagworte (Tags) erleichtern das Auffinden von Bildern in umfangreicheren Portfolios.

Was davon nun eher überflüssiger Schnickschnack ist und was ein Portfolio wirklich bereichert, ist meistens eine recht individuell zu treffende Entscheidung.
Ebenso gilt das für die Überlegung, ob man eine Kommentar- und/oder Bewertungsfunktion anbieten möchte.

hinter den Kulissen

Nun stellt sich natürlich die Frage, wie man sein Portfolio auf technischer Seite realisieren will. Das hängt zum Einen vom Umfang der zu präsentierenden Bilder ab, als natürlich auch vom eigenen Kenntnisstand in Sachen Webdesign und den persönlichen Vorlieben. Rein theoretisch spricht natürlich nichts gegen ein statisches Portfolio, in dem jedes Bild manuell ins HTML eingebunden wird. Komfortabler ist da aber natürlich der Einsatz eines Content Managament Systems – gute Erfahrungen habe ich persönlich hierbei mit WordPress gemacht sowie mit Pixelpost, einem eigens für Bilder gedachten Blogsystem. Für WordPress gibt es mittlerweile zahlreiche Themes und Plugins, die sich speziell an Portfolios richten.

Natürlich kann man sich sein Portfolio, anstatt es selber zu entwerfen, ebenso erstellen lassen wie jede andere Webseite auch, etwa von Webdesign-Agenturen.

… und eure Meinung?

Auf was legt ihr beim Betrachten eines Online-Portfolios wert? Welche Portfolios gefallen euch besonders gut?
Besitzt ihr vielleicht selbst ein Portfolio und wenn ja, wie habt ihr es in technischer Hinsicht realisiert?

In diesem Artikel werde ich darauf eingehen, was ihr kostenlos für euer WBB2 in Sachen Suchmaschinenoptimierung tun könnt. :o)

das Archiv

Das WBB2 bietet mit dem Archiv von Hause aus eine wichtige Funktion. Hierbei werden die Foreninhalte in einer suchmaschinenfreundlichen Weise mit Divs und Listen statt mit Tabellen präsentiert.

Damit alle Forenbereiche im Archiv auftauchen, müsst ihr dies im ACP festlegen: Einstellungen -> Sonstiges -> Forenarchiv mit Suchmaschinenunterstützung aktivieren? auf “ja” stellen. Für jeden einzelnen Forenbereich könnt ihr darüber hinaus einstellen, ob er im Archiv angezeigt werden soll (standardmäßig auf “ja”) oder auch nicht: Foren bearbeiten -> Forum im Archiv anzeigen?
Damit die Bots das Archiv auch finden, müsst ihr es auf eurer Startseite oder im Portal verlinken.

robots.txt

Im Hauptverzeichnis eures Forums solltet ihr eine Datei namens robots.txt erstellen, mit deren Hilfe ihr die Suchmaschinenbots von für sie irrelevanten Bereichen aussperren könnt. Um zu verhindern, dass die Bots auf verschiedenen Unterseiten den gleichen Inhalt vorfinden (beispielsweise bei den “Antwort erstellen”-Links oder wenn die Forenbeschreibung sowohl auf der Startseite, als auch innerhalb der einzelnen Foren auftaucht oder wenn die Themen sowohl im Portal, als auch im Board angezeigt werden), sperrt man sie von den meisten Unterseiten aus. Eigentlich müssen sie nur auf das Portal bzw. die Startseite zugreifen können, auf das Archiv sowie auf eventuell vorhandene statische Seiten wie das Impressum. Somit könnte eure robots.txt etwa so aussehen:

User-agent: *
Disallow: /acp/
Disallow: /attachments/
Disallow: /cache/
Disallow: /images/
Disallow: /js/
Disallow: /styles/
Disallow: /templates/
Disallow: /addreply.php
Disallow: /attachment.php
Disallow: /attachmentedit.php
Disallow: /board.php
Disallow: /calendar.php
Disallow: /editor.jar
Disallow: /editpost.php
Disallow: /forgotpw.php
Disallow: /formmail.php
Disallow: /global.php
Disallow: /login.php
Disallow: /logout.php
Disallow: /markread.php
Disallow: /memberslist.php
Disallow: /misc.php
Disallow: /modcp.php
Disallow: /newthread.php
Disallow: /pms.php
Disallow: /polledit.php
Disallow: /pollstart.php
Disallow: /pollvote.php
Disallow: /print.php
Disallow: /profile.php
Disallow: /regimage.php
Disallow: /register.php
Disallow: /report.php
Disallow: /search.php
Disallow: /thread.php
Disallow: /team.php
Disallow: /threadrating.php
Disallow: /usercp.php
Disallow: /usergroups.php
Disallow: /wiw.php

Session-IDs für Gäste verhindern

Sofern keine Cookies verwendet werden, speichert das WBB2 die einzelnen Sitzungen über Session-IDs. Das sind diese langen Ketten aus Zahlen und Buchstaben, die an das Ende der URL gehängt werden.
Für Gäste (und nichts anderes sind Bots ja) macht dies allerdings herzlich wenig Sinn, da bei ihnen ja keinerleo Einstellungen gespeichert werden. Somit würde für nicht-eingeloggte Besucher bei jedem Seitenaufruf eine neue Session-ID (SID) generiert werden – und in den “Augen” der Suchmaschinenbots würde es sich somit jedesmal um eine neue Seite handeln. Dadurch entstünde der unerwünschte Duplicate Content (siehe unten).

Windapple von gm-d.de hat einen kleinen Hack geschrieben, der diese SIDs für Gäste einfach abschaltet:

Öffne:
/acp/lib/session.php

Suche:
if ((isset($_COOKIE[$cookieprefix.'cookiehash']) && !isset($falsecookiehash))

Ersetze mit:
if ((isset($_COOKIE[$cookieprefix.'cookiehash']) && !isset($falsecookiehash)) || (isset($guestsession) && $filename!=”login.php” && $filename!=”logout.php”))

Ein Danke für diese Tipps geht an www.esports24.net.

allgemeine Tipps

Die folgenden Punkte gelten nicht nur für WBB2-Foren, sondern für sämtliche Webseiten:

Duplicate Content unterbinden

Duplicate Content bedeutet übersetzt “doppelter Inhalt” – wenn zwei Seiten oder auch mehrere Unterseiten einer Domain den gleichen Inhalt liefern. Zum Beispiel ist dies der Fall, wenn eure Seite über www.domain.de. und über domain.de erreichbar ist – allerdings ohne Weiterleitung der einen Adresse auf die andere. Für Google handelt es sich also um zwei verschiedene Seiten, die den gleichen Inhalt werten, und da Google Wert auf individuellen Content legt, wirkt sich dies negativ auf die Wertung eurer Webseite aus. Legt also eine der beiden URL-Varianten als Standard fest und leitet die andere URL auf diese Adresse weiter. Dies ist über einige Zeilen in der .htaccess-Datei im Hauptverzeichnis möglich:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.domain\.de)(:80)? [NC]
RewriteRule ^(.*) http://domain.de/$1 [R=301,L]

(Den Domainnamen müsst ihr natürlich anpassen! :o) )

GZip-Komprimierung

Google hat jüngst angekündigt, nun auch die Ladezeiten einer Webseite in die Bewertung mit einfließen zu lassen. Das macht insofern Sinn, als dass User schnell ladende Webseiten ja auch bevorzugen. Die Ladezeit eurer Seite könnt ihr unter anderem durch die GZip-Komprimierung verbessern. Im WBB2 könnt ihr diese mit einem Klick im ACP unter Einstellungen -> Ausgabeoptionen aktivieren und tut damit auch euren Usern einen Gefallen.

Links, Links, Links…

… sind das A und O, wenn es darum geht, eine Webseite im WWW bekannt zu machen. Je mehr Backlinks auf eure Seite verweisen, desto öfter wird sie von Bots gefunden, was sich positiv auf das Ranking auswirkt. Tragt eure Seite in Webkataloge ein, allem voran DMOZ, tauscht Links vor allem mit Webseiten zu ähnlichen Themen wie eure Seite, … seid kreativ. ;-)

das Coding

Achtet darauf, eure Seite semantisch korrekt auszuzeichnen – also Tags wie h1, h2, .. und Konsorten zu nutzen, wichtige Inhalte durch strong und/oder em hervorzuheben und so weiter. Und: Suchmaschinen bevorzugen es, viel Content zu finden und wenig Code. Ein Tabellenlayout verursacht somit nicht nur unnötige Ladezeiten, die auch euren Usern auf den Nerv gehen können, sondern bläht den Quellcode wahnsinnig auf. Steigt stattdessen auf Divs und valides Coding um, das geht übrigens auch mit dem WBB2, wobei das in der Tat Einiges an Nerven kosten kann. :-)

Hier könnt ihr euch über alles austauschen, was mit der Leitung eines Forums zu tun hat, ganz egal ob ihr Administratoren seid oder auch Moderatoren.

Ich bin dort übrigens unter dem altbekannten Nick neontrauma zu finden. ;-)

Susa hat sich im Wunschbuch erkundigt, wie man das Layout (Theme) eines FlatPress-Blogs ändern kann – das erkläre ich in diesem Tutorial.
Wie fast immer hat man auch bei FlatPress die Wahl zwischen einem vorgefertigten oder aber einem komplett selber geschriebenen Theme. Mit Letzterem kann man natürlich all seine Sonderwünsche umsetzen, dies erfordert aber eine gewisse Einarbeitungszeit, um zu verstehen, wie Themes in FlatPress funktionieren. Das genau zu erklären, würde den Umfang dieses Tutorials sprengen, weswegen ich ausführlicher auf den Punkt “ein fertiges Layout installieren” eingehen werde.

ein vorgefertigtes Layout installieren

Zunächst einmal sucht ihr euch ein Theme heraus, das euch gefällt. Stöbern könnt ihr da beispielsweise in der FlatPress-Wiki.
Das heruntergeladene Archiv entpackt ihr auf eurer Festplatte und ladet es ins Verzeichnis /fp-interface/themes auf euren Webspace. Wenn ihr dann im Adminbereich eures Blogs oben in der waagerechten Navigationsleiste auf “Themes” klickt, taucht eurer eben hochgeladenes Theme dort mitsamt einer Vorschaugrafik auf. Über einen Klick könnt ihr es ganz einfach aktivieren.

ein Layout verändern

Wenn ihr einen Blick in das Verzeichnis eures Themes werft, seht ihr dort jede Menge Template-Dateien (mit der Endung *.tpl), eine PHP-Datei sowie die Verzeichnis /res und /images. Letzteres beinhaltet die im Theme verwendeten Bilder und kann auch anders heißen, etwa /imgs, oder vielleicht auch ganz fehlen. Der res-Ordner beinhaltet die Stylesheets (*.css), wobei deren Anzahl unterschiedlich ausfallen kann. Die style.css ist in der Regel für das Layout eures Blogs zuständig und die admin.css für das Aussehen des Adminbereichs. Zusätzliche Stylesheets können beispielsweise spezielle Formatierungen für die Ausgabe im Druck liefern, die interessieren hier aber erst einmal nicht.

Wir werfen jetzt einen Blick auf die Template-Dateien. Deren Namen sollten weitestgehend selbsterklärend sein; die header.tpl wird zu Beginn jeder Seite eingebunden, die footer.tpl am Ende, die index.tpl stellt die Blogeinträge dar, statische Seiten werden über die statics.tpl ausgegeben, den Adminbereich steuert die admin.tpl, und so weiter.

In den Templates selber findet ihr normales HTML bzw. XHTML – und dann eine Art Platzhalter für den eigentlichen Inhalt wie etwa den Blogeintrag. In WordPress werden diese Informationen über die Template Tags abgerufen, FlatPress verwendet Smarty. Beides sind letzlich PHP-Schnipsel, die den eigentlichen PHP-Code vereinfachen, um ihn bequemer im Theme verwenden zu können. Eine Erläuterung, wie Smarty und Themes in FlatPress funktionieren, findet ihr hier.

An dieser Stelle soll es aber lediglich darum gehen, wie ihr ein Theme ändern könnt. Und das geht eigentlich genauso wie bei WordPress-Themes oder selbstgeschriebenen Layouts: Divs und sonstiges MarkUp fügt ihr in die Template-Dateien ein, verseht es nach Herzenslust mit Klassen oder IDs, und formatiert diese anschließend über die Stylesheets. :o)