 Adventskalender als HTML-Widget Kalender ist aktiv
Meinen Adventskalender im i-frame anzeigen lassen. Ein Adventskalender für Ihre Webseite ohne viel Aufwand. Informationen zur Einbindung und Funktion eines externen Adventskalenders finden Sie auf dieser Seite.
|
|
Der 3 Minuten-Kalender - Adventskalender im i-frame
Die Datumsprüfung ist nun aktiv und eingeschaltet. Der Kalender wird bis Ende Januar 2012 erreichbar sein. Ab 1. Feb. wird lediglich ein Hinweis angezeigt.
Ein Adventskalender für Ihre Webseite in nur 3 Minuten. Dazu wird mein Adventskalender in einem i-frame angezeigt (HTML-Widget). Der Kalender als HTML-Widget ist nun einsatzbereit. Sie können dieses Widget bereits testen und die Codezeilen in Ihre Seite einkopieren. Die Datumsprüfung wird Anfang November eingeschaltet! Ich habe alles vorbereitet und arbeite zurzeit noch am letzten Feinschliff für die Tagesdateien als I-Pad-Display.
 Dieser Kalender ist für die kostenlose Version von Beepworld-Homepages geeignet!
Das Angebot richtet sich an HTML-Beginner oder Webmaster, die bei ihrem Hosting-Anbieter nur begrenzten Zugriff zur Modifizierung des Quellcodes haben.
Als Tagesdateien werden vor einer Hintergrundgrafik eines Mobiles oder eines i-Pads kurze, manchmal lustige SMS-Sprüche angezeigt.
|
|
Der Kalender hat 24 Klickbereiche, die bei MouseOver die Fensternummer (Tageszahl) anzeigen (rechts Tag 18) und beim Anklicken die jeweilige Tagesdatei öffnen (eine von 24).
Ein JavaScript überwacht, an welchem Tag ein Fensterchen geöffnet werden darf.
Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.
Der Kalender beansprucht eine Breite von 540 Pixeln und eine Höhe von 455 Pixel.
Unterhalb des Kalenders wird Informationstext (Counter) eingeblendet. Beispiel:
|
|
Sa. 29. Oktober 2011 - Noch 57 Tage bis Weihnachten, 33 Tage bis zum ersten Fensterchen
Dieser Adventskalender ist auch für kostenlose Beepworld-Homepages interessant. Der Code für den i-frame muss bei Beepworld im Modus 'Seitenbearbeitung - Widget - HTML-Widget' eingetragen werden.
Mehr Info zur Vorgehensweise lesen Sie weiter unten.
Den i-frame-Kalender habe ich entwickelt, weil im letzten Jahr sehr viele Anfragen für eine einfache Einbindung eines Kalenders eingingen. Mit dieser Version sollten Sie keine Probleme haben, wenn Sie in der Lage sind, im Quellcode eines HTML-Dokuments Inhalte einzufügen (kopieren + einfügen).
Querverweis: Für erweiterte Beepworld-Accounts (mehr als 5 Seiten) und Webmaster mit mehr Erfahrung gibt es den Kalender 01-14. Eine Variante meines Adventskalenders 01, allerdings ohne Anzeige der Tageszahl bei MouseOver.  Kalender 01-14.
Natürlich können auch Webmaster mit anderen Providern diese simple Möglichkeit durch Kopieren + Einfügen nutzen, einen Adventskalender auf den eigenen Seiten darzustellen.
Was ist ein HTML-Widget?
HTML-Widgets zur Einbindung in Webseiten werden im Gegensatz zu anderen Widgets häufig nur als kleine Fragmente von HTML- und JavaScript-Code angeboten. Im Rahmen des W3C wird derzeit an einem Standard für Widgets gearbeitet. Mein Adventskalender-HTML-Widget ist nichts anderes als ein eingebetteter HTML-Code für einen i-Frame, in dem eine fremde HTML-Seite (mein Adventskalender) angezeigt wird.
Arbeitsschritte
Einen Adventskalender in nur 3 Minuten in Ihre Seite 'einbauen'
Was ist zu tun?
- Codezeilen auf dieser Seite kopieren
- eine (neue?) Seite im Editor öffnen
- Einfügemarke (Cursor) dort platzieren, wo der Kalender stehen soll
- Codezeilen in die Seite einfügen + speichern
- die Seite im Browser ansehen / testen
- (Seite auf Ihren Server hoch laden)
1) Codezeilen kopieren
|
2) neue Seite im Editor öffnen
|
3) Code einfügen + speichern
|
4) Seite testen
|
Life-Demo des eingebetteten Kalenders
Alles, was unten innerhalb des roten Rahmens angezeigt wird, stammt aus einer anderen, externen Datei. Diese Datei wird hier in einem 'Kasten' (i-frame) von 540 x 455 Pixel dargestellt. Sie können diese externe HTML-Datei oder den eingebetteten Kalender auch einmal in einem extra Browserfenster ansehen:
externe Kalenderseite ansehen  (das, was im i-frame angezeigt wird)
Demo: Den Kalender im i-frame ansehen (Demo der Funktion)
Life-Demo bei Beepworld ansehen (i-frame mit Kalender auf einer Beepworld-Seite)
Hier habe ich das HTML-Widget in meine eigene Seite eingebaut
Im roten Rahmen unten sehen Sie den Kalender im i-frame - klicken Sie auf ein Kästchen
Adventskalender des Fotoclubs Geilenkirchen
(die Überschrift ist nicht Bestandteil der externen Seite)
Die Datumsprüfung ist nun aktiv und eingeschaltet. Der Kalender wird bis Ende Januar 2012 erreichbar sein. Ab 1. Feb. wird lediglich ein Hinweis angezeigt.
Die Datumsprüfung wurde aktiviert! Die Tagesdateien können Sie nun (ohne Verstellen des Systemdatums) nicht mehr abrufen. Wenn Sie möchten, können Sie einen Blick auf eine Demo-Version werfen, bei der ich die Datumsprüfung deaktiviert habe. Die Tagesdateien sind in der Demo-Version abrufbar.
Demo-Kalender ansehen
So funktioniert das mit dem Kalender im i-frame:
Innerhalb Ihrer Seite gibt es ein kleines Fenster (i-frame), in dem mein Kalender angezeigt wird. Während Ihre Seite von dort abgerufen wird, wo Sie Ihre Seiten hosten, wird der Inhalt des i-frames von der Web-Toolbox angefordert.
2 Einschränkungen für diesen Kalender:
a) Auf das dargestellte Hintergrundbild des Kalenders haben Sie keinen Einfluss.
Vorgesehen für dieses Angebot sind Kalender ähnlich dieser Abbildung. Ich habe mich zunächst für den Kalender mit dieser Grafik entschieden. Beschreibung / Fotograf:
Largo do Toural, com as iluminações de Natal 2008, © CC GNU, Autor: Feliciano Guimarães
Möglicherweise erweitere ich mein Angebot später auf weitere Kalender mit unterschiedlichen Grafiken.
|
|
b) Auf den Inhalt der Tagesdateien haben Sie keinen Einfluss.
Die 24 Texte können Sie natürlich vorher einsehen (siehe unten).
- Die Tagesdateien sind und bleiben absolut frei von Werbung, versprochen
- Die Tagesdateien enthalten keine Verweise (außer den Schließen-Links)
- Der Adventskalender hat einen Link zur Web-Toolbox
- Zugriff + Erreichbarkeit des Kalenders bis Ende Januar
- Rechtsanspruch auf Erreichbarkeit siehe Impressum
Quellcode für den Kalender-i-frame
Für die Einbindung müssen Sie lediglich ein paar Zeilen Code in Ihre Kalender-Seite einkopieren. Quelltext für den i-frame mit dem externen Kalender:
1 Quellcode hier kopieren
Der Ouellcode im Kasten oben, muss kopiert und in eine HTML-Seite eingefügt werden. Sobald Sie den Code in eine Seite eingefügt haben und bei einer aktiven Internetverbindung die HTML-Seite aufrufen, wird der Kalender angezeigt. Das sollte auch auf Ihrem Rechner zu Hause funktionieren.
2a Quellcode mit einem Editor einfügen
HTML-Code einfach kopieren und in ihre HTML-Seite einfügen.
 
Markieren Sie den HTML-Quellcode auf dieser Seite mit der Maus und kopieren Sie den Text mit Strg + C. Zum Einfügen des HTML-Quellcode in Ihre Webseite setzen Sie den Cursor an die gewünschte Stelle ihrer Seite (irgendwo zweischen <body> und </body>) und drücken Sie Strg + V. Danach müssen Sie die Seite speichern. Wenn Sie die HTML-Seite bei aktiver Internetverbindung aufrufen, sollte der Kalender auch lokal (zu Hause am Rechner) angezeigt werden.
Damit der Kalender innerhalb Ihrer Webseite angezeigt wird müssten Sie die Seite natürlich erst auf Ihren Webspace hoch laden.
2b Quellcode bei Beepworld einfügen
Der Kalender ist für die Basis-Version von Beepworld-Homepages geeignet! Der HTML-Code für den i-frame muss bei Beepworld im Modus Seitenbearbeitung - Widget - HTML-Widget eingefügt werden, damit der Kalender auf Ihrer Homepage erscheint.
Ich habe bei Beepworld einen Test-Account eingerichtet. Die Beepworld-Seite zeigt während der Entwicklung die Demo-Version des Kalenders ohne Datumsprüfung:
Testseite Beepworld-Kanender 01
Tagesdateien als I-Pad-Display
So sieht die beim Klicken aufgerufene Tagesdatei aus (24 SMS-Sprüche). Sie erscheint ebenfalls in dem i-frame und ersetzt die Ansicht des Kalenders, zu dem man durch einen Klick wieder zurück kehren kann. Screenshot:
Der rote Rand veranschaulicht hier lediglich den i-frame-Bereich.
Texte der Tagesdateien
Die Texte der Tagesdateien können Sie auch in der Demo-Version, bei der ich die Datumsprüfung deaktiviert habe, ansehen:
Demo-Kalender ansehen
Text 0: Brave Engel mogeln nicht.
Da hat jemand zu früh geklickt! Die Rute wurde soeben reserviert!
Text 1: Ich bin die kleine Weihnachtsfee und stecke tief im dichten Schnee. Drum schick ich DIR aus weiter Ferne eine Handvoll Zaubersterne. Schöne Adventszeit!
Text 2: Wunschzettel schreiben? Postadresse: An das Christkind, 51777 Engelskirchen
Alle bis zum 20. Dezember eingehenden Briefe werden bis zum 24. Dezember beantwortet (frankierter Rückumschlag)
Text 3: Hell erleuchten alle Kerzen,
mein Weihnachtsgruß,
er kommt von Herzen!
Text 4: Tannenbäume, Kugeln, Lichter,
Bratapfelduft und frohe Gesichter,
Freude am Schenken - das Herz wird weit.
Ich wünsch euch eine schöne Zeit.
Text 5: Christkindlein ich bitte dich:
Denk im Himmel auch an mich!
Teile deine Gaben aus,
bring mir recht viel Glück ins Haus!
Text 6: Ach du lieber Nikolaus
komm ganz schnell in unser Haus.
Hab so viel an dich gedacht!
Hast mir doch was mitgebracht?
Text 7: Christkind, Christkind, guter Gast,
hast du mir was mitgebracht?
Hast du was, dann setz dich nieder,
hast du nichts, dann geh gleich wieder!
Text 8: Weihnachten ist die Zeit des Schenkens
und des aneinander Denkens!
Ich hab zwar keinen Schmuck, keinen Nerz,
doch eine SMS für Dich, mit Herz.
Text 9: Advent Advent mein Handy brennt!
Erst die Antenne,
dann die Tasten
und zum Schluss der ganze Kasten.
Text 10: Lieber guter Weihnachtsmann,
schau mich nicht so böse an,
stecke deine Rute ein,
ich will auch immer artig sein.
Text 11: Wir wollen euch wünschen zum heiligen Feste:
Vom Schönen das Schönste,
vom Guten das Beste!
Text 12: Schnee fällt auf die Autobahn,
darum komme ich heute später an.
Es dauert noch ein paar Minuten,
werde mich jetzt richtig sputen!
Text 13: Bauernregel zum Advent:
Findet der Bauer Lametta im Essen,
weiß er, er soll das Geschenk nicht vergessen!
Text 14: Das Geld ist knapp,
die Zeiten schlecht,
Ich hoff \' die SMS sie ist Dir recht.
Eine schöne Adventszeit
Text 15: Leise rieselt der Schnee,
das Christkind fährt nen VW,
hört nur wie er lieblich der dieselt,
während der Schnee vom Himmel rieselt.
Text 16: Ich mag den roten Früchtetee
und Schlittenfahren, mit viel Schnee.
Drum schreib ich schnell dem Weihnachtsmann,
damit er\'s schneien lassen kann.
Text 17: Am Himmel leuchten viele Sterne,
so glitzernd, hell und klar.
Ein schönes Fest wünsch ich Dir gerne,
und auch ein gutes, neues Jahr!
Text 18: Denkt Euch, ich habe Knecht Ruprecht entdeckt, er hatte sich im Keller versteckt. In seinem Sack steckte eine Rute, die ist bestimmt für die freche Ute. Dann sah ich noch ein schickes Handy, das kriegt denk ich die liebe Mandy.
Was du bekommst wollt\' er nicht sagen, das siehst du dann selbst in wenigen Tagen.
Text 19: Grüner Kranz mit roten Kerzen,
Lichterglanz in allen Herzen.
Heiligabend ist nicht fern,
Weihnachtszeit hab ich dich gern!
Text 20: Nun strahlen hell die Weihnachtskerzen,
und zaubern Wärme in die Herzen.
In Kinderaugen sehen wir,
das Weihnachtsfest steht vor der Tür.
Text 21: Es dunkelt schon bald,
und draußen im Wald,
brummt leise die Säge,
man hört ein paar Schläge,
der Baum, er fällt nieder,
es weihnachtet wieder.
Text 22: Am Himmel leuchten alle Sterne,
so hell und flimmernd und so klar.
Ich wünsche dir ein frohes Fest
und auch ein gutes neues Jahr!
Text 23: Plätzchen, Stollen, Mispelzweig, bald ist wieder Weihnachtszeit. Doch viel früher nämlich heute, freuen sich die kleinen Leute. Heut\' sind sie das letzte Mal, in der Schule (diese Qual). 14 Tage ohne Penne, klingelts gleich, gibt\'s ein Gerenne. Nur schnell weg, wie wunderbar, wir sehen uns im Januar.
Text 24: Ich wünsch frohe Weihnachtstage, das ist doch klar und ohne Frage. Bei Kuchenduft und Kerzenschein, da sollt ihr ganz zufrieden sein. Die Stadt erstrahlt mit 1000 Lichtern, Erwartung steht in den Gesichtern. Menschen shoppen, rennen, laufen, rasch noch ein Geschenk zu kaufen. Onkel Hans kriegt eine Brasil, mein Gott, kosten die so viel? Tante Lia (Ungeheuer), die kriegt garnix, ist zu teuer. Schwager, Freunde, Nichten, Neffen, schwer deren Geschmack zu treffen. Ach ist Weihnachten \'ne Qual, dies\' Jahr ist das letzte Mal.
Nächstes Jahr mach ich mich rar, vom 20. bis nach Neujahr. Sonne tanken, nur nicht hier, die Geschenke spar ich mir.
Zum letzten Mal (von hier) zum Feste, wünsch ich euch das Allerbeste.
|
Home • Adventskalender • Mein Adventskalender im i-frame