 Adventskalender 01-14 Beep-02 für Beepworldseiten
Weil im letzten Jahr sehr viele Anfragen von Beepworld-Webmastern eingingen, erstellte ich zwei Varianten für den Einsatz auf Beepworld-Seiten. Beide Varianten für BeepWorld-Homepages habe ich zur Demo auf einem Account bei Beepworld eingebunden. |
|
a) Adventskalender Beep-02 für Beepworldseiten
Der Kalender Beepworld-02 ist gedacht für Beepworld-Members mit einem erweiterten Account! Der Kalender benötigt 24 + 2 Tagesdateien. Das geht über den Umfang von 5 Seiten beim kostenlosen Beepworld-Account hinaus.
b) Adventskalender Beep-01 für Beepworldseiten
Der Kalender Beepworld-02 ist demnach für die kostenlose Basis-Version von Beepworld-Homepages nicht geeignet! Für Beepworld-Members mit einem kostenlosen Account gibt es aber auch eine Lösung: Mein Adventskalender-HTML-Widget.  Adventskalender Beepworld-01
Beschreibung des Kalenders Beepworld-02
Bem Kalender Beepworld-02 wird eine Kästchengrafik vor einem Hintergrundbild angezeigt. Auf die Anzeige von PopUp-Tageszahlen bei MouseOver und auf den Schneefall wird hier verzichtet.
Beim Anklicken wird dann eine von 24 HTML-Seiten angezeigt, die nicht in Ihrem Menü verlinkt sind.
Der Kalender Beepworld-02 benötigt 24 Tagesdateien und zwei Meldungsdateien, die Sie selbst bei Beepworld erstellen müssen.
| |
|
Für den Beepworld-Kalender habe zur Demo einen Test-Account eingerichtet. Dort können Sie eine Vorschau des Kalenders Beep-02 ansehen. Die Seite zeigt die Demo-Version (Tagesdateien fehlen).
 Beepworld-Kalender 02 ansehen 
Notwendige Schritte - Arbeitsaufwand
Was müssen Sie tun?
- Zip-Datei herunter laden und entpacken
- Quellcode über das HTML-Widget einfügen
- 2 Grafiken hoch laden
- 24 + 2 eigene Tagesdateien erstellen
Die einzelnen Schritte werden unten näher beschrieben.
was steckt im Download?
Im Download für diesen Kalender finden Sie lediglich eine Textdatei mit dem Quellcode und 2 Grafiken. Der Quellcode beinhaltet
- CSS-Code
- JavaScript-Code
- HTML-Code
Den Quellcode müssen Sie in Ihre Beepwold-Seite einkopieren, Die beiden Grafiken müssen hoch geladen werden.
Der für Beepworld entwickelte Kalender benötigt 26 weitere HTML-Seiten (24 Tagesdateien + 2 Meldungen), die selbst bei Beepworld erstellen müssen.
a Quellcode einfügen
Den Quellcode für den Kalender Beep-02 müssen Sie über das HTML-Widget in Ihre Seite einfügen. Den Quellcode finden Sie demnächst auf dieser Seite (als Textdatei in der Zip-Datei enthalten)
Den Quellcode für den Kalender Beep-02 finden Sie weiter unten im Abschnitt 'Downloads'
b 2 Grafiken hoch laden
Der Kalender benötigt 2 Grafiken (siehe rechts), die Sie hoch laden müssen.
Die Kalendergrafik können Sie durch eine eigene Grafik mit den Abmessungen 500 x 375 austauschen.
Laden Sie dazu einfach Ihre eigene Grafik unter der Dateibezeichnung "kalendergrafik06.jpg" hoch. Dann erscheint hinter den Kästchen Ihr eigenes Bild.
| |
|
Die beiden Grafiken 'kalendergrafik06.jpg' und 'transmap-24-05.gif' können Sie hier herunter laden (sind in der Zip-Datei enthalten).
c 26 Dateien erstellen
Der Kalender benötigt 24 + 2 HTML-Seiten, die selbst bei Beepworld erstellen müssen. Bei der Vergabe der Dateinamen müssen Sie sich an die Vorgaben halten!
Die 24 Tagesdateien haben die Namen "tagesdateixx" wobei für 'xx' fortlaufende Nummern von 1 - 24 eingetragen werden.
Zusätzlich müssen zwei weitere Dateien erstellt werden die 'tagesdatei00' (tagesdatei NUll Null) und 'tagesdatei0' (tagesdatei Null) heißen müssen. Die erste wird beim Klicken vor dem 1. Dezember angezeigt, die zweite falls man im Dezember ein Fensterchen zu früh anklickt.
- tagesdatei0.htm
- tagesdatei00.htm
- tagesdatei1.htm
- tagesdatei2.htm
- ...
- tagesdatei23.htm
- tagesdatei24.htm
Die Dateinamen sind allen in Kleinschrift notiert!
Die Tagesdateien sollen im gleichen Verzeichnis wie die Adventskalender-Datei stehen.
Funktion
Das JavaScript zur Überwachung des Datums und Öffnen der Dateien sieht bestimmte Dateinamen vor. Deshalb müssen die Tagesdateien nach bestimmten Vorgaben gespeichert werden. Die Tagesdateien haben den Namen "tagesdatei" mit einer angehängten Zahl.
Die fortlaufende Nummer hinter dem Text "tagesdatei" wird vom JavaScript angehängt. Deshalb sollen die 24 Tagesdateien unter den Namen "tagesdateixx" abgespeichert sein, wobei für 'xx' fortlaufende Nummern von 1 - 24 verwendet werden.
tagesdateixx.htm
Das Script will beim Klicken auf "2" die Datei "tagesdatei2.htm" aufrufen.
Das Script will beim Klicken auf "12" die Datei "tagesdatei12.htm" aufrufen.
Deshalb müssen die Tagesdateien nach diesen Vorgaben gespeichert werden. Dateiname: "tagesdateixx" wobei für 'xx' fortlaufende Nummern von 1 - 24 verwendet werden.
Die 24 + 2 Dateinamen sind:
tagesdatei0.htm
tagesdatei00.htm
tagesdatei1.htm
...
tagesdatei24.htm |
Dezember - zu früh angeklickt
Januar - November
Tagesdateien im Dezember
Tagesdateien im Dezember |
Wo sind die Tagesdateien normalerweise abgelegt?
Das JavaScript zur Überwachung des Datums und Öffnen der Dateien erwartet, dass die Dateien im gleichen Ordner wie die Kalenderdatei abgespeichert sind!
Download - Quellcode + Grafiken
Im Download für den Adventskalender Kal 01-14 (Beep-02) sind lediglich 1 Textdatei + 2 Grafiken enthalten. Sie finden unterhalb der Tabelle aber auch die Möglichkeit die einzelnen Komponenten separat anzeigen zu lassen und dann zu speichern (Grafiken zum Speichern rechtsklicken).
| Variante 01-14 Demo + Download als ZIP-Datei |
 |
| V | px | Tage | Tagszahl | Schnee | Datum | Counter | Tagesdatei | Demo bei
Beepworld | Kalender
Demo | Download | - |
| 14 | 500 | 24 | Beepworld 02 |  | | gleiches
Fenster | öffnen | öffnen |
ZIP-Datei | |
Damit die Tagesdateien geöffnet werden können, habe ich in den Demo-Versionen die Datumsprüfung abgeschaltet!
Hier zur Ansicht noch einmal die beiden verwendeten Grafiken:
(bei der transparenten Kästchengrafik habe ich zur Demo den Hintergrund schwarz hinterlegt)
Das war's schon!
Alles Notwendige ist getan! Wenn Sie die Zip-Datei herunter geladen haben, besitzen Sie den Quellcode und die beiden Grafiken für einen funktionierenden Online-Adventskalender. Sie können den Adventskalender noch weiter anpassen, indem Sie die vorhandene Grafik 'kalendergrafik06.jpg' durch Ihre eigene Grafik mit den Abmessungen 500 x 375 Pixel austauschen.
Wenn Sie für die Kalenderseite zusätzlich ein wenig Schneefall darstellen möchten, finden Sie eine Anleitung im Menü 'Hinweise + Anpassungen'.
Speicherort für Tagesdateien im Script eintragen
Wenn Ihre 24 + 2 Tagesdateien im gleichen Verzeichnis wie der Adventskalender stehen, müssen Sie nichts ändern!
Das Script setzt voraus, dass die Dateien im gleichen Ordner stehen und ruft ohne weitere Verweisangaben z.B. am 12. Dezember die Datei "tagesdatei12.htm" auf. Die für die Variante Beep-02 im Script vorgesehene Information für die Pfadangabe bleibt leer (ohne zusätzliche Pfadangabe).
// Edit-Marker 09
var pfad = "";
Falls Ihre 24 + 2 Tagesdateien nicht im vorgesehenen Verzeichnis stehen, benötigt der Kalender zusätzliche Informationen. Die Info (Pfad zu einem Unterordner) kann an zentraler Stelle eingetragen werden. Sie müssen lediglich einen einzigen Eintrag im Script ändern. Suchen sie im Quellcode der Kalender-Datei den Marker
Edit-Marker 09
Wenn Ihre 24 + 2 Dateien in einem Unterordner mit der Bezeichnung 'tagesdateien' abgespeichert wurden, ändern Sie die Angaben wie folgt:
// Edit-Marker 09
var pfad = "tagesdateien/";
Wenn Ihre 24 + 2 Dateien im Ordner mit der Bezeichnung 'assets/kalender/' abgespeichert wurden, ändern Sie die Angaben wie folgt:
// Edit-Marker 09
var pfad = "assets/kalender/";
Wenn Ihre 24 + 2 Dateien im Ordner mit der Bezeichnung 'assets/kalender/' abgespeichert wurden und Sie möchten eine absolute Pfadangabe eintragen, ändern Sie die Angaben wie folgt:
// Edit-Marker 09
var pfad = "http://www.Domainname.de/assets/kalender/";
|
Home • Adventskalender • Kalender 01 • Adventskalender Beep-02
