Alle Kategorien
Suche

Virtueller Adventskalender - so erstellen Sie die Überraschung

Virtueller Adventskalender - so erstellen Sie die Überraschung2:16
Video von Peter Oliver Greza2:16

Ein virtueller Adventskalender hat den Vorteil, dass Sie diesen relativ einfach einfach individuell an die jeweilige Person anpassen können. Welche Möglichkeiten Sie zum Erstellen des Adventskalenders haben und wie Sie diesen mit HTML und PHP erstellen könnten, erfahren Sie hier.

Möglichkeiten für einen virtuellen Adventskalender

Wenn Sie für das nächste Weihnachtsfest den Adventskalender einmal virtuell gestalten möchten, könnten Sie dies auf verschiedenen Wegen bzw. mit verschiedenen Programmen machen.

  • Zum einen könnten Sie zum Beispiel mit PowerPoint eine Präsentation erstellen, die einen Adventskalender enthält, bei dem die Türen mit einem Klick geöffnet werden.
  • Zum anderen könnten Sie auch einen Onlinedienst wie "Advent 2.0" oder "Nikolaus.com" verwenden, mit dem Sie einen virtuellen Adventskalender mit wenigen Klicks erstellen und dann an die gewünschte Person verschicken können.
  • Wenn Sie über einen eigenen Webserver verfügen sollten und sich etwas mit HTML und PHP auskennen, könnten Sie auch relativ einfach einen Adventskalender selbst gestalten.

So gelingt ein virtueller Adventskalender mit HTML und PHP 

Mit HTML und PHP können Sie mit wenigen Code-Zeilen schnell und einfach einen virtuellen Adventskalender erstellen. Die folgende Anleitung bezieht sich dabei auf das Erstellen des Adventskalenders an sich, also das HTML-Grundgerüst und die PHP-Überprüfung.

  • Ein virtueller Adventskalender sollte wie ein normaler Adventskalender 24 Türen haben, die am besten in 6 Reihen mit je 4 Türen angeordnet sein sollten. Dies könnten Sie am einfachsten mit einer Tabelle erstellen. Dazu brauchen Sie lediglich zwischen die Tags für eine Tabelle ("<table>" und "</table") die erste Zeile mit den Angaben für die Breite der Zellen schreiben und dann fünf Mal je 4 Zellen erstellen. Dies könnte zum Beispiel wie folgt aussehen:
    <table>
    <tr><td width="25%"></td><td width="25%"></td><td width="25%"></td><td width="25%"></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    ...
    </table> 
  • Wenn Sie die Tabelle erzeugt haben, müssen Sie dann eine Tür pro Zelle festlegen. Schreiben Sie dafür am besten zunächst den Tag in eine beliebige Zelle (also zwischen "<td>" und "</td>". 
  • Sobald Sie die Tage gut verteilt haben, können Sie mit PHP eine Kontrollfunktion erstellen. Ein virtueller Adventskalender sollte dabei drei Möglichkeiten umfassen: Der Tag in der Tür ist heute, der Tag liegt in der Zukunft und der Tag ist bereits vergangen. Wenn heute der jeweilige Tag ist, könnten Sie zum Beispiel einen Link erzeugen, der auf eine andere Website oder ein Bild verweist. Sollte der Tag vergangen sein, sollten Sie die jeweilige Aktion (also zum Beispiel das Bild) anzeigen lassen. Bei einem zukünftigen sollte nur die Tür bzw. die Zahl erscheinen.
  • Um diese Möglichkeiten mit PHP zu erzeugen, benötigen Sie zunächst den heutigen Tag. Diesen bekommen Sie mit der Funktion "date("j")". Die Kontrolle könnten Sie mit "switch" erzeugen, wobei Sie überprüfen, ob der heutige Tag dem jeweiligen entspricht oder früher (=kleiner) oder später (=größer) ist. Schreiben Sie dafür zum Beispiel für den ersten Tag:
    <?
    $heute=date("j");

    $tag=1;
    switch(true) 

    case($tag == $heute):    
      echo "heute";   
      break; 
    case($tag < $heute):    
      echo "früher";   
      break; 
    case($tag > $heute):    
      echo "später";   
      break; 
    }
    ?> 
  • Diesen Quellcode müssten Sie für jeden Tag einfügen, wobei Sie "$heute=date("j");" nur einmal verwenden müssen und die Variable "$tag" an den jeweiligen Tag anpassen müssen.
  • Zudem müssen Sie die echo-Ausgabe an Ihre gewünschte Aktionen anpassen. Sollte heute der 12. Dezember sein, könnten Sie zum Beispiel schreiben:
    echo "<a href='bild12.jpg' target='_blank'>12</a>";
    Dadurch würden Sie einen Link auf den Tag "12" erzeugen, der das Bild "bild12.jpg" in einem neuen Fenster öffnen würde.
  • Wenn Sie das Bild eines vergangenen Tages anzeigen lassen wollen, brauchen Sie lediglich schreiben: echo "<img src='bild.jpg' width='120px' height='60px' alt='Tag 12' title='Weihnachtsbild für dern 12. Tag' />";.
  • Sollte der Tag in der Zukunft liegen, würde eine einfache Ausgabe des Tages genügen: echo $tag;
helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.