Byteshift: Webdesign aus Berlin


was| wer| wo| details| english

Zufallsgenerierter Bildwechsel

Autor: Dan Benjamin
Alistapart Ausgabe: 160


Eine von vielen Herausforderungen für den modernen Webdesigner ist die Gestaltung von Websites, die sich bei jedem Besuch frisch und neu darstellen.

Es ist verhältnismäßig einfach, eine Nachrichten-Site zu entwerfen, in der z.B. Beiträge und Überschriften regelmäßig ein Update erfahren, so daß sich der Inhalt stündlich - oder sogar häufiger - aktualisiert. Aber was ist mit denen unter uns, die Sites für Kunden entwerfen, deren Seiten relativ statisch sind und deren Inhalt selten wechselt? Wie können wir unseren Besuchern bei jedem folgenden Besuch frischen, geänderten Inhalt zur Verfügung stellen, ohne davon abzuhängen, daß jemand diesen Inhalt täglich oder sogar stündlich neu bereitstellt?

Die Seite nur leicht und subtil zu verändern kann Wunder für ein ansonsten nur 'statische' website bewirken. Stellen Sie sich z.B. eine Titelzeilengrafik vor, die jedes mal anders aussieht, sobald jemand die Seite neu lädt. Oder wie wäre es mit einem grafischen Produkt-Link, welches sich mit jedem Pageview wie von Zauberhand zu ändern scheint?

Viele Sites setzen diese Technik ein, um ihre Grafiken nach dem Zufallsprinzip anzuzeigen, u.A:

Cleverer Arbeiten (Work Smarter...)

Es herrscht kein Mangel an Skripten, die Bilder austauschen. Viele davon sind in Javascript geschrieben, kranken aber an einer wichtigen Einschränkung: Um zu den Bilder der Rotationsauswahl etwas hinzuzufügen oder zu entfernen, müßen Sie diese Skripte öffnen und den Quelltext selbst bearbeiten. Jedes Mal, wenn Sie eine Änderung brauchen. In jeder Seite mit Bildwechsel. Aber Sie sind nicht Programmierer, Sie sind Webdesigner. Und Bilder zur Rotationsauswahl hinzuzufügen oder zu entfernen sollte einfach sein. So einfach wie, sagen wir, das Hinzuzufügen oder Entfernen von Bildern eines Webserver-Ordners.

Oder?

Na klar! Mit ein bißchen PHP-Zauberei ist die Integration dieser Funktion möglich, eigentlich sogar recht einfach. Können Sie nicht PHP programmieren? Lesen Sie trotzdem weiter. Der ganzer Programmtext wurde bereits für Sie geschrieben, und es ist nicht notwendig, daß Sie alles begreifen (oder, ehrlich gesagt, irgendetwas) um die Sache in Gang zu bringen.

Ich habe das Skript sogar so geschrieben, daß es, sollte ein Fehler auftreten (sich z.B. keine Bilder im angegebenen Verzeichnis befinden) ohne weiteres eine 'Fehlergrafik' generiert und angezeigt wird, anstatt dem Browser eine ungültige Grafikadresse zu senden, welcher seinerseits einen Platzhalter anzeigen würde, denn die sind unschön.

Die Anforderungen

Um allerdings auch nur ansatzweise weiterzukommen, benötigen Sie einen Provider, der PHP anbietet (idealerweise PHP 4.2 oder neuer, aber daß ist nicht ausschlaggebend). Die meisten Provider heutzutage unterstützen PHP, sogar die Sites, die unter Windows betrieben werden. Dies nicht nur weil PHP eine mächtige Programmiersprache ist, sondern auch weil sie zum Open Source Bereich gehört. Sie wurde auf so gut wie jede existierende Serverplattform portiert, es ist also ziemlich wahrscheinlich, daß Ihr Provider sie bereits unterstützt.

War's das schon?

Mit etwas Glück wird es gar nicht nötig sein, das Skript überhaupt zu modifizieren, um es auf der Website, die Sie entwerfen wollen, funktionsfähig zu machen. Legen Sie auf dem Webserver ein Verzeichnis an und laden Sie die Grafiken hoch, die sie im Wechsel anzeigen möchten. Laden Sie dann das Skript - uneditiert - in das gleiche Verzeichnis. Sie können dann Ihre Wechselgrafiken in Aktion sehen, indem Sie das Skript als Quelle Ihrer Grafik festlegen, und zwar so:

<img src="/pfad/zu-den/grafiken/rotate.php" />

Und das war es schon. Lehnen Sie sich zurück und freuen Sie sich an Ihren per Zufallsprinzip wechselnden Grafiken.

Wir können uns auch festlegen

Eine zusätzliche Option dieses Bildwechselskripts ist die Möglichkeit, vorübergehend ein bestimmtes Bild festzulegen. Dies könnte nützlich sein, um z.B. die Aufmerksamkeit auf ein bestimmtes Produkt-Link auf Ihrer Site zu lenken, solange es noch neu ist, oder aber, um den Bildwechsel ganz zu stoppen. Um diese Option zu aktivieren, müßen Sie lediglich beim Aufruf des Skripts einen "bild" Wert festlegen, so etwa:

<img src="/pfad/zu-den/grafiken/rotate.php?img=mein_statisches_bild.jpg" />

Dies zwingt das Skript, ein Bild namens "mein_statisches_bild.jpg" zu laden, welches sich im Verzeichnis der Rotationsauswahl befindet.

Maßarbeit

Möglicherweise möchten Sie das Skript etwas modifizieren, z.B. wenn Sie es vorziehen, das PHP Skript nicht in Ihr Bilderverzeichnis hochzuladen, oder um zusätzliche Grafikformate zu unterstützen.

Als erstes müßten wir dann das Verzeichnis festlegen, in dem wir die Bilder der Rotationsauswahl speichern wollen. Wir bewerkstelligen dies mit einer einfachen Variablen-Zuweisung:

$folder = '.';

Am einfachsten klappt dies, wenn wir das PHP Skript im gleichen Verzeichnis wie die Bilder selbst speichern. Da dies zu empfehlen ist, setzen wir den Vorgabe-Wert für diese Verzeichnis auf ".", das ist PHP-Jargon für: "das gleiche Verzeichnis in dem ich bin". Erfahrenere Anwender können den Punkt durch einen Pfad zu ihren Dateien ändern, z.B. derart:

$folder = '/www/beispiel.de/bilder/wechsel_mich/';

Nun müßen wir festlegen, welche Grafikformate wir für die Rotationsauswahl zulassen wollen. Zum Erscheinungszeitpunkt dieses Artikels sind GIFs, JPEGs, und PNGs die verbreitetsten Formate für Webgrafiken. Deswegen beginnen wir mit diesen als Standardauswahl, einem Array (zu deutsch: einer Variablenkette) mit Dateiendungen zugeordnet:

$extList[] = 'gif';
$extList[] = 'jpg';
$extList[] = 'png';
$extList[] = 'jpeg';

Sollten Sie in Zukunft irgendwann einen neuen Datentyp zufügen wollen, kopieren Sie einfach eine der obigen Zeilen und passen Sie diese durch Zufügung Ihrer eigenen Dateiendungen an.

Das war's! Sie sind fertig mit der Skriptbearbeitung. Laden sie es einfach zum Bilderverzeichnis das Sie angelegt haben, hoch, und verlinken Sie wie oben vorgegeben.

Gibt's das Ganze schon fix und fertig?

Sie können den PHP Quelltext gleich hier herunterladen. (4kb Textdatei - Speichern Sie ihn nach dem Herunterladen oder dem Kopieren und Einfügen als rotate.php)

Der Image Rotator (vulgo teutonicus: Bildwechsler) hat seine eigene Webseite bei Hiveware. Dort können Sie die jeweils neueste Version des Skriptes bekommen und ein bißchen mehr über die Implementierung des Image Rotators auf Ihrer eigenen Website erfahren.

Viel Spaß!


Dan Benjamin ist der Gründer von Automatic Labs, einer Agentur, die sich auf die Entwicklung von Web Applikationen sowie von zugänglichem, auf Standards basierendem Design spezialisiert hat. Dan spendiert Quelltexte und Programme auf Hiveware und 'updatet' sein Weblog The Hivelogic Narrative fast täglich. Die restliche Zeit ist er ziemlich damit beschäftigt, Zigarren zu rauchen.

Originaladresse: www.alistapart.com/articles/randomizer/
Alistapart Diskussionsforum (englisch): www.alistapart.com/discuss/randomizer/

Translated with the permission of A List Apart Magazine and the author[s].

Wichtige Links zum Thema Web Design und Typographie

Valid XHTML 1.0! Valid CSS!