Poesieautomat Tutorial

IFrame Einbindung

Der Poesieautomat kann sehr leicht in jede beliebige Seite eingebaut werden. Mann muss dazu nur ein IFrame in seine seite einbauen. Das IFrame verbindet sich mit www.posieautomat.com, wo die Poesie generiert wird und dann in das IFrame auf der externen seite geladen wird.

Durch parameter im IFrame kann man auswählen welches Spiel, welche art von Poesie, und im welchen Layout man die Poesie bekommen will.

Mit CSS kann man den Desing vom IFrame an die eigene Seite anpassen.

Parameter

• name: der name vom HTML element
• src: die url von der die poesie geladen wird und parameter
• class: mit class verbindet man das HTML element mit CSS Style sheets. Mehr dazu später.
• frameborder: bestimmt ob der IFrame einen Rand hat
• scrolling: bestimmt ob man innerhalb vom Iframe scrollen kann

Spiele Auswahl

Das Spiel kann man über parameter die im "src" property definiert werden angeben. Folgende Kategorien können ausgewählt werden: 64 Spiele der WM, das WM Finale 1994 und eine WM Allgemein Kategorie ausgewählt werden.

• WM Themen Allgemein
• Spiel 1-64
• WM Finale 1994 Brasilien-Italien

• WM Themen Allgemein mit game=wm
• Spiel 1-64 mit game=01 bis game=64
• WM Finale 1994 Brasilien-Italien mit game=94

Poesie Auswahl

Der Poesieautomat kann 7 verschiedene arten von Poesie generieren:

• Standard
• Abschweifungen
• Die Jungen Wilden
• Reim
• Slogans
• Koans
• Haikus

• Standard: standard
• Abschweifungen: abschweifungen
• Die Jungen Wilden: die_jungen_wilden
• Reim: reim
• Slogans: slogans
• Koans: koans
• Haikus: haikus

Verschiedene Moden

Der Poesieautomat kann in drei verschiedenen Arten angezeigt werden:

• standard: oben wird ein Formular angezeigt mit dem das Spiel und Poesie ausgewählt werden können, unten kann man die Poesie an emails verschicken
• blank: gleich wie standard nur ohne email Feld und Fomular
• automatic: neue Poesie lädt sich automatisch nach gewissen intervallen

Design mit CSS

Mit CSS kann man den Design und Positionierung vom Iframe auf der eigenen Seite bestimmen. CSS Styles können so direkt im HTML integriert werden:

Beispiel 1:

.poesie-fenster-1{
                position: relative;
                float: right;
                width: 500px;
                height: 300px;
                background-color: #FFF;
                border: 1px solid #BBB;
}
               

Beispiel 2:

.poesie-fenster-2{
                position: relative;
                margin: 0px;
                float: right;
                width: 300px;
                height: 300px;
                background-color: #CCCCEE;
                border: 1px dotted #000;
                padding: 5px;
}
               

Beispiel 3:

.poesie-fenster-3{
                position: relative;
                float: right;
                width: 450px;
                height: 250px;
                background-color: #FFF;
                border-top: 1px solid #000;
                border-bottom: 4px solid #000;
                padding: 5px 10px;
}