Zeitgesteuertes Einblenden von Inhalten und Stilen
Das Zufallsprinzip

Öfter mal was neues

Zeitgesteuertes Einblenden von Inhalten und Stilen

Für einen Online-Redakteur, der mit einem Content-Management-System arbeitet, gehört es zum Alltag: Er versieht Inhalte, die er in eine Site einpflegt, mit einem Zeitstempel, mit dem er festlegt, wann der Artikel erscheinen und wann er eventuell wieder verschwinden soll. Bei einer aktuellen Berichterstattung ist dieses Feature ein Muss. Die Ankündigung einer Veranstaltung ist zum Beispiel spätestens nach dem Beginn des Events nur noch von geringem Interesse. Mit dem Zeitstempel zu dem Artikel kann der Redakteur schon beim Verfassen sicherstellen, dass er automatisch wieder verschwindet, wenn der aktuelle Bezug weggefallen ist.

Ähnliche Effekte lassen sich jedoch auch ohne aufwendige Datenbank-Konstruktionen und ausgefeilte Content-Management-Systeme realisieren. Mit ein paar Tricks können Sie beim Besucher zumindest den Eindruck erwecken, dass sich auf Ihrer Seite etwas tut.

Die Palette der Tricks, die Sie einsetzen können, ist lang. Sie können zum Beispiel eine Hand voll Inhaltsfragmente vorbereiten und diese über ein kleines PHP-Skript nach dem Zufallsprinzip auf der Homepage erscheinen lassen.

Mit Hilfe von Datumsberechnungen können Sie auch festlegen, zu welchem Zeitpunkt und für wie lange eine solche Inhaltsdatei auf Ihrer Site sichtbar sein soll. Natürlich lässt sich dasselbe auch mit Designs, Farben und Layout durchführen. Übertreiben sollten Sie in diesem Bereich jedoch nicht, da sonst schnell der Wiedererkennungswert Ihrer Seite leidet. Jede Stunde ein neues Design oder eine neue Hintergrundfarbe könnte Ihr Stammpublikum eher erschrecken, statt es zu weiteren Besuchen zu animieren.

Fein dosiert eingesetzt lassen sich jedoch auch im Bereich Design mit Zufallszahlen und Datumsberechnungen interessante Effekte erzielen, wie das Beispiel Google zeigt. Zu Anlässen wie Valentinstag, Weihnachten, Ostern oder Halloween erscheint das Google-Logo mit einer dem Anlass entsprechenden Verzierung. Das können Sie auf Ihrer Site und mit Ihrem Logo mit wenigen Zeilen Code ebenfalls realisieren.

Startseite nach dem Zufallsprinzip

Zeitgesteuertes Einblenden von Inhalten und Stilen

Hier einige konkrete Skripts, mit denen man variable Inhalte und Layouts realisieren kann. Ein PHP-Skript, das dem Besucher eine Startseite nach dem Zufallsprinzip präsentiert, besteht nur aus wenigen Zeilen.

Im ersten Teil wird eine Zufallszahl ermittelt, die maximal so groß sein darf wie die Anzahl der vorbereiteten HTML-Dateien. Im zweiten Teil des Skripts wird die ermittelte Zahl in einen Dateinamen umgewandelt, und im dritten Teil wird die Datei geöffnet und der Inhalt im Browserfenster ausgegeben. Das fertige Listing sieht so aus:


// Der Zufallsgenerator wird mit Hilfe der microtime-Funktion initialisiert.
srand ((double)microtime()*1000000);

// die Datei wird gelesen und im Browserfenster ausgegeben
readfile ($datei);
?>


Dieses Miniskript speichern Sie unter index.php ab, um es als Startseite zu definieren. Dazu bereiten Sie noch die gewünschte Anzahl an HTML-Files vor und speichern diese unter 1.html, 2.html et cetera ab.

Wem diese Namensvergabe zu trivial ist, der kann alternativ auch mit Arrays arbeiten. Die aussagekräftigen Dateinamen werden in diesem Array abgelegt und der jeweilige Index per Zufallsgenerator ermittelt. Hier ist zu beachten, dass gewöhnliche Integer-Indizes bei Null beginnen. Nach diesem Prinzip können Sie auch das Logo, das bei einem Seitenaufruf jeweils erscheinen soll, zufallsgesteuert einbinden.

srand ((double)microtime()*1000000);
$zufall=rand(1,3);
?>

Auch hier muss der Name des bereitgestellten Logos jeweils mit der per Zufall erzeugten Nummer übereinstimmen. Die Array-Variante ist hier natürlich ebenfalls möglich. Sie kann zum Beispiel so aussehen:


$bilder = array("bild1.jpg","bild2.jpg","bild3.jpg");
mt_srand ((double)microtime()*1000000);
$zahl = mt_rand(0,(count($bilder) - 1));
echo "";
?>


Zeitsteuerung mit PHP

Zeitgesteuertes Einblenden von Inhalten und Stilen

Wenn Sie das Logo Ihrer Site abhängig von einem bestimmten Datum variieren wollen, liefert PHP auch dafür die passenden Funktionen. Erste Wahl ist dabei die Funktion getdate(). Sie gibt ein assoziatives Array mit Datums- und Zeitangaben des angegebenen Timestamps zurück. Wird kein Timestamp angegeben, wird die lokal gültige Zeit berücksichtigt.

Wollen Sie zum Beispiel, dass am Valentinstag (14. Februar) Ihre Site mit ein speziellen Logo erscheint, so können Sie durch einen Vergleich des aktuellen Tages mit den entsprechenden Werten aus dem getdate-Array schnell ermitteln, ob die Bedingung erfüllt ist, und die entsprechende Anzeige veranlassen. Das kann zum Beispiel so aussehen:


$heute = getdate();

if($heute[mday] == "14" && $heute[mon] =="2") {
echo "";
}
else
{
echo "";
}
?>


Nach diesem Muster lassen sich natürlich noch andere Varianten von variablen Bild- oder Texteinblendungen realisieren. Zum Beispiel täglich eine neue Startseite.

Täglich eine andere Seite

Zeitgesteuertes Einblenden von Inhalten und Stilen

Dies stellt eine einfach Methode dar, mit der ein Online-Shop zum Beispiel jeden Tag sein Sonderangebot anpreisen kann. Für die Realisierung wird eine switch-Kontrollstruktur nach folgenden Beispiel eingesetzt:


$datum = getdate();
$heute = $datum[weekday];

case "Sunday": readfile ("sonntag.html");
break;
case "Monday": readfile ("montag.html");
break;
case "Tuesday": readfile ("dienstag.html");
break;
case "Wednesday": readfile ("mittwoch.html");
break;
case "Thursday": readfile ("donnerstag.html");
break;
case "Friday": readfile ("freitag.html");
break;
case "Saturday": readfile ("samstag.html");
break;
}
?>


Wollen Sie Ihre Webseite zu einer bestimmten Uhrzeit automatisch ändern, liefert Ihnen auch hier die getdate-Funktion die passenden Werte (hours). Damit können Sie nach dem obigen Beispiel Ihre Sonderangebote auch zu jeder Stunde wechselnd Ihren Besuchern präsentieren.

Übrigens liefern die beiden Web-Editoren Golive und Frontpage für die zeitabhängige Präsentation von Webseiten vorgefertigte Aktionen, die Sie mit ein paar Mausklicks in Ihre Seite einbauen können. Bei Golive wird dies mit Javascript realisiert und bei Frontpage mit Hilfe der Frontpage-Extensions, die auf dem Server installiert sein müssen.

Prinzipiell sind serverbasierte Lösungen vorzuziehen, denn sie sind im Gegensatz zu Javascript weitgehend browserunabhängig. Trotzdem soll hier eine Javascript-Variante vorgestellt werden.

Selbst gestrickt mit Javascript

Zeitgesteuertes Einblenden von Inhalten und Stilen

Man muss kein Javascript-Programmierguru sein, um Effekte, die Frontpage und Golive als fertige Bausteine präsentieren, mit einem kleinen Skript zu realisieren. Man bedient sich einfach aus dem reichen Sortiment an Datumsfunktionen, die Javascript zur Verfügung stellt, und über eine Switch-Abfrage erfolgt der zeitabhängige Aufruf von Seiten. Ein Beispiel-Skript, das abhängig vom Wochentag die Site einer Zeitung oder eines Magazins aufruft, sieht zum Beispiel so aus:

Dieses Basisskript lässt sich beliebig variieren. Beispielsweise könnte man mit einem Web-Editor wie Dreamweaver eine Seite mit mehreren Layern bauen, die sich überlagern. Abhängig vom Tagesdatum könnten diese dann per Javascript selektiv visible oder hidden geschaltet werden. Mit Hilfe der Funktion getHours() wäre sogar ein Wechsel im Stunden-Rhythmus möglich. Aber Vorsicht, Suchmaschinen wie Google reagieren auf verdeckte Inhalte zum Teil allergisch.

Teile einer Site verändern

Zeitgesteuertes Einblenden von Inhalten und Stilen

Bei den bisherigen Beispielen ging es vor allem darum, ganze Webseiten per Zufall oder Zeitsteuerung in eine Site einzubinden. Das geht natürlich auch mit kleinen Containern, die dann innerhalb einer Seite variabel oder zufällig mit Inhalten wie dem Tipp des Tages oder dem Sonderangebot des Tages gefüllt werden können.

Positionieren Sie dazu mit div einen Container an der gewünschten Position und Größe auf der Seite, zum Beispiel so:


//CSS-Definition
#zentral {
position:absolute;
left: 150px;
top:95px;
width:390px;
height: 220px;
padding: 8px;
font-family: Verdana, sans-serif;
font-size: 9pt;
}
//Div-Container

Bei diesem Beispiel wird der per Zufall einzulesende Inhalt mit der Funktion file in ein Array eingelesen und mit einer foreach-Schleife ausgegeben.

Zu beachten ist bei dieser Variante in jedem Fall die Größe der Inhaltsdatei. Sie sollte so bemessen sein, dass sie die Dimensionen des Containers nicht sprengt. Ein Überlauf oder auch optionale Scrollbalken würden das Layout der Seite stören. Statt mit div-Containern kann man hier natürlich auch mit iframe-Konstruktionen arbeiten.