Sonstige Sites - "Ernst Gemeintes" & Verspieltes *
![](images/tn_pam-extension.jpg)
Juni 2015
![](images/tn_b-day-anis.jpg)
ab Juni 2014
![](images/tn_pam-season3.jpg)
Dez 2015 - Mai 2016
* Um Screens, Beschreibungen und Besonderheiten der Projekte zu sehen, bitte eine Vorschaubox anklicken.
ERste Site
Was wann wie wo
Mini Spielseite 21/2 Jahre nach "Willkommen bei den Prior Art Männchen"
Diese kleine Seite - nur 1 Seite, keine Navigation, Inhalt 600 px breit - war eigentlich für Demonstrationszwecke für die Beschreibungen eines Spiels beiPrior Art Männchen von 2012 gedacht. Wieso ist sie jetzt herausgelöst und an dieser Stelle als eigenes Projekt vorgestellt? Weil ich im Jahre 2015 eine völlig andere Darstellung / andere "Programmier"-Logik gewählt habe, was Fehlermeldungen und Lösungen betrifft. So sieht sie aus - zum Spielen hier klicken (oder in's Bild).
![](images/pam-extension_1.jpg)
Die erste Aufgabe
Platziert ist das Originalbild in Klein und ein etwas reingezoomter Ausschnitt. Hier im Ausschnitt ist die Illustration an einigen Stellen verändert. Die erste Aufgabe ist es, die Fehler (Unterschiede) zu ermitteln und die Fehleranzahl ins Kästchen unter dem Bild einzugeben. Die Eingabe des Spielers wird anhand eines Scriptes auf dreierlei Weise geprüft.
Dementsprechend gibt's 3 verschiedene Reaktionen des Scripts, d. h. der Spieler kann 3 Meldungen erhalten: 1., dass er eine Zahl eingeben soll - falls er einen Buchstaben oder ein Wort eingegeben hat. 2., dass er sich verzählt hat - wenn er die falsche Zahl eingegeben hat. 3., dass er richtig gezählt hat - bei Eingabe der korrekten Fehleranzahl.
![](images/pam-extension_2c.jpg)
Die Meldungen können jeweils vom Spieler durch Klick darauf wieder geschlossen werden. Das Script leert gleichzeitig das Eingabefeld für den nächsten Versuch. - Bei Klick in's Eingabefeld wird es hellgrün; der Platzhaltertext "Zahl" steht darin (Javascript onFocus).
Die zweite Aufgabe
Das fehlerhafte Bild ist als verweissensitive Grafik hinterlegt. Um die Fehler im Bild herum sind klickbare Rechtecke definiert. Wird mit der Maus über das Bild gefahren - die "Fehlersuche" - wird der Cursor zum Zeigehändchen und sagt "Hier?". Bei Klick auf diese Bereiche erscheint unten je das falsche Detail (mit einem roten "F"), daneben das richtige Detail (mit einem grünen "R"), und ein kurzer Satz erläutert das Ganze.
![](images/pam-extension_3.jpg)
Wird ein neuer fehlerhafter Bildbereich angeklickt, wird der Inhalt unten - falsches Detail, richtiges, etc. - mit der neuen Fehlererläuterung ausgetauscht. Das Script ist so geschrieben, dass jegliche Fehlererläuterung auch dann wieder verschwindet, wenn der Spieler von dieser zweiten Aufgabe noch einmal hoch zur ersten springt und etwas in's Textfeld eingibt. Die Erläuterung mit den Bildern unten wird dann nicht unschön überdeckt, sondern wieder unsichtbar.
Mini Sites mit Animationen als online Geburtstagskarten
Wenn Familienmitglieder oder der beste Freund Geburtstag haben und ich weiß, ich werde das Geburtstagskind an diesem Tag nicht sehen, sende ich gern einen online gestellten Geburtstagsgruß in Form einer Mini Site mit Animation. Das Ganze muss zeitig geplant werden, da einige Morgende und Abende bei der Erstellung der Animation vergehen.
![](images/b-day-anis_1.jpg)
Wie fange ich an?
Zuerst überlege ich mir entweder ein grobes Storyboard oder starte mit der Zeichnung irgendeiner Figur, um auf Ideen zu kommen. Bei Ini hatte ich die Idee einer tanzenden Kerze, bei Anki die einer sich aufbauenden Blume, bei Jörg zeichnete ich mehrere Figuren und entschied mich dann für den Hasen; bei Mama ließ ich von einem Taschentuchpäckchen inspirieren: mir gefielen die Punkte darauf in kräftigen Farben...
... so kam mir die Idee, dass sich das Bild zuerst mit farbigen Konfetti-Punkten aufbaut, bis es komplett bunt bedeckt ist, dann kommen die Worte. Anrede, Wortgruppen und/oder Sätze gibt es bei jeder Animation. Ein "Happy Birthday" bzw. "Herzlichen Glückwunsch" ist immer mit dabei sowie erläuternde oder beschreibende Sätze vor und nach dem Gruß.
![](images/b-day-anis_2.jpg)
Das Storyboard
Das sah für Jörgs Animation wie folgt aus: Die Tierfigur baut sich auf, indem zunächst jedes "Tierteil" (Ohr, Arm, Leib) zusammen mit einem Wort erscheint, bis Figur komplett ist und der Satz "Das ist der Geburtstagsbär" da steht. Das "Bär" leuchtet... Das Tier verliert sein Lächeln, wird sauer, fragt "Was für'n Tier?", da es ein Hase ist. "Bär" wird durchgestrichen, "Hase" erscheint. "Mit Farbwechsel" wird angekündigt; Hase wechselt eine Weile wild die Farbe...
... "der Dir gratuliert" erscheint, Blumenbukett füllt Bild aus, tritt zurück, bis in Hases Arm liegend. Dann hintereinander "Happy", "Birthday", "lieber", "Jörg". Dann verblassen Hase und Satz und in der Farbe des Hasen steht Abschlusssatz da.
- In der Praxis fange ich meist die Animation an, ohne das Storyboard komplett im Kopf zu haben. Während der Gestaltung komme ich auf weiterführende Ideen oder erkenne, dass eine Idee nicht so funktioniert, wie ich mir das vorgestellt habe.
![](images/b-day-anis_3.jpg)
![](images/b-day-anis_3_xs.jpg)
Oder dass es anders viel besser wäre: zum Beispiel sollte bei obiger Story der Hase einen Blumenstrauß hinter dem Rücken hervorholen, nachdem der Farbwechsel des Hasen stattgefunden hat. Doch dann wollte ich genau an jener Stelle eher einen Knalleffekt, da der Hase schon so "lange" in dieser Stellung dasteht. Und der Knalleffekt besteht nun darin, dass der Blumenstrauß ganz plötzlich fast das ganze Bild ausfüllt und mit seinen Farben nahezu blendet... dann "zieht" er sich in kurzen Schritten "zurück", bis er im Arm des Hasen liegt. Es wirkt also, als würde der Strauß ruckartig vor die Kamera gehalten - ein guter Kontrast zum "ruhigen", lächelnden Hasen.
Vorgehen beim Bau der Animation - Beispiel Konfetti
Die Filmchen erstelle ich als GIF-Dateien in Photoshop. Für die Konfetti-Animation zeichne ich zuerst einen einzelnen farbigen Punkt auf weißem Hintergrund. Dieser Punkt ist der erste Frame (= Phasenbild), so etwas wie eine Standszene. Der nächste Punkt, der dazukommt, bildet den zweiten Frame = 2te Standszene. Ich lege fest, wie viel Zeit zwischen erster und zweiter Szene vergehen soll. In diesem Fall, je von Punkt zu Punkt, sind es entweder 0,15 oder 0,2 Sekunden.
Mit 104 Frames baue ich den Konfettihintergrund auf, das heißt ich zeichne 104 Punkte mit immer anderer Farbe und immer anderer Position und lege die Zeit fest, die vergehen soll, bis ein neuer Punkt (= Frame) dazukommt. In der 105ten Szene schreibe ich links oben das Wort "Happy". In der 106ten Szene dupliziere ich das Wort, mache es größer; mache das kleinere "Happy" unsichtbar. In der 107 Szene setze ich das große "Happy" auf unsichtbar, das kleinere auf sichtbar. Zwischen diesem Größenwechsel liegen je 0,5 Sekunden. Die Wirkung: "Happy" ploppt nach vorn und wieder zurück. In Szene 108 kommt das Wort "Birthday" dazu, dann ploppt es auf und zurück, "liebste" kommt...
![](images/b-day-anis_4.jpg)
So geht es mit Worten und Sätzen weiter bis Szene 154 - und wie gesagt, jede Szene bedeutet eine Veränderung im Bild. Von Szene 155 bis 164 wird das Konfettibild samt Schrift mit einer blauen Farbfläche überblendet. Dann erscheint ein großes weißes Herz, das sich mit einem Satz füllt. Das Herz wird wiederum sanft mit Blau überblendet. Szene 179 zeigt die blaue Fläche mit "Deine Bettina", geschrieben in Weiß, 1,6 Sekunden lang. Dann kommt noch ein weißes Herz hinter den Gruß. Die letzte Szene 181 zeigt dies kleine Herz, nun in Blau, auf weißer Fläche. Die 181 Szenen ergeben einen Film von 1 Minute, 4 Sekunden & 7 Millisekunden.
![](images/b-day-anis_5.jpg)
Wie kommt es von der Animation zum online Geburtstagsgruß?
In Photoshop speichere ich den Film als GIF und lege die Schleifenwiederholung fest, d. h., entweder unbegrenzt oder 1 mal. Wenn man nämlich eine gif-Datei im Browser öffnet, spielt die Animation ab, ganz automatisch. Das ist schon mal gut. Was ich aber will: das Geburtstagskind erhält einen Link, den es klickt. Daraufhin gelangt es zur Mini-B-Day-Site. Die hat eine Überschrift, zeigt ein Startbild der Animation und einen Button zum Abspielen oder 2 Buttons (Abspielen und Stoppen).
Zur Einbettung der Animation erstelle ich eine schlichte HTML-Datei. Es gibt den Head (meist "Geburtstagsgruß"), die die Animation wrappende "Box", ein oder zwei Buttons. In der wrappenden Box platziere ich ein startbild.jpg, das ein statisches Bild vom Anfang der Animation ist. Nun bedarf es noch einer winzig kleinen Javascript-Funktion, damit das statische Startbild mit der gif-Datei ausgetauscht wird. Wenn das passiert, wird der "Film abgespielt".
1 <script type="text/javascript">
2 function anistart()
3 {
4 document.getElementById("film").src="ani.gif";
5 }
6 </script>
[...]
7 <body>
8 <div id="wrapper">
9 <h1>Geburtstagsgruß</h1>
10 <div id="wrap-gif">
11 <img id="film" src="startbild.jpg">
12 </div> <!-- end div wrap-gif -->
13 <div id="start-ani" onclick="anistart();">PLAY</div>
14 </div> <!-- end div wrapper -->
[...]
Man betrachte bitte die Zeilen 2 bis 5 des oben abgebildeten Quelltextes. Die Funktion anistart() besteht aus einer einzigen Zeile, die übersetzt Folgendes aussagt: wenn Funktion aktiviert, greife aufs aktuelle Dokument zu und gehe zu dem Element mit der ID "film". Setze deren Source (Quelle) auf "ani.gif". Man kann auch sagen: die Quelle des Elementes mit der ID "film" soll ani.gif sein.
In Zeile 11 ist das HTML-Element mit der id="film" zu finden. Solange die Funktion nicht aktiviert ist, ist deren Standard-Quelle die Datei "startbild.jpg", das statische Bild. In Zeile 13 nun ist der Container mit dem Button zu finden, der die Funktion aktiviert. Der Button trägt die Aufschrift PLAY - es ist aber egal, was hier drauf steht...
... wichtig ist der Javascript Event Handler onclick. Der Button ist, wie man sagt, mit einem Onclick-Event belegt. Bei Klick auf den Button - also die mit div id="start-ani" definierte Fläche auf der Site, gestaltet wie ein Button - wird die Javascript Funktion aktiviert. Das heißt nun nicht mehr und nicht weniger als wie oben beschrieben: sofort wird der Inhalt (die Quelle) des Image-Tags (Bild-Container, siehe Zeile 11) ausgetauscht. Statt statischem JPG liegt hier jetzt das GIF. Und ein GIF spielt sich von allein ab, sobald in einem Browser offen, wie bereits oben zu lesen war. Das heißt, bei Austausch von JPG zu GIF geht die Animation los.
Die online Geburtstagsgrüße komplett ansehen:
Die Prior Art Männchen - SEASON III
Diese Seite PAM SEASON III ist die Neuauflage meiner allerersten Website "Willkommen bei den Prior Art Männchen - SEASON II" (beschriebenhier). Die SEASON III erstellte ich 4 Jahre später. Inhalte, Spielereien und Ideen wurden übernommen. Neu geplant und geschrieben wurden HTML-Struktur und Stylesheet; Bilder und Grafiken größtenteils erneuert.
Auf der Startseite stellen sich die Männchen mit ein paar Worten vor. Das heißt sie sagen, warum es diese ihre Männchen-Seite gibt und was den Besucher und Spielwilligen erwartet.
![](images/pam3_1.jpg)
Zum Beispiel die Animation der Prior Art Männchen @work (die im Jahre 2012 der Aufhänger der SEASON II war, wobei die Animation an sich die SEASON I darstellt). Desweiteren wird dem Besucher angekündigt: die Skizzengalerie, ein Suchbild mit 2 Aufgaben, die "Erklär-Bär-Seiten" What's about, bei denen man mehr über die Arbeit von Männchen und Technik erfahren kann, sowie die Kontaktseiten mit Registrierungs- und Kontaktformular. - DiePrior Art Männchen SEASON III können auch gut und gerne online und komplett durchforstet werden.
Wieso eine alte Seite erneuern - wieso die SEASON III?
Weil die Inhalte der ersten Männchen-Site (die Animation, die Skizzen zur Animation, das Suchbild und die Idee, wie dessen Lösungen präsentiert werden, die Erklärbärseiten What's about, das Registrierungsformular mit den Spielereien...) weil die Inhalte an sich schön und witzig waren und ich das "bewahren" wollte. Doch HTML Struktur und Stylesheet waren (natürlich!) unerfahren konzipiert und so auch (relativ!) chaotisch und unpraktisch geschrieben...
![](images/pam3_2.jpg)
... zum Beispiel ist die Navigation sowie andere Inhaltsbereiche mit Tabellen gelayoutet - besonders die Navigation ist unschön verrutscht. Die ganze Site ist nicht symmetrisch, es gibt kaum gliedernde Linien. Bei vielen Specials und Meldungen ploppen die heute so unpopulären und als störend empfundenen modalen Dialoge in Extra-Fenstern auf, die der Nutzer extra schließen muss. Wo es bei SEASON II noch 19 einzelne HTML-Dateien gab, gibt es jetzt nur noch 10. Aufploppende Meldungen werden hier in die entsprechende Datei integriert und deren Sichtbar- bzw. Unsichtbarkeit per CSS gesteuert:
Vergleich: Browser-Popups (alt) vs. Eigene Meldungsboxen (neu)
![](images/pam3_3.jpg)
Beim obigen Beispiel zeigt sich gut der Vorteil dieser Arbeitsweise: wo die modale Dialogbox, das Extra-Fenster, vom Browser immer oben links und womöglich weit weg von der Stelle geöffnet wird, die das Fenster ausgelöst hatte, können die in's HTML geschriebenen Boxen nun schön passend platziert werden - über Browser-Dialogboxen hat der Gestalter weit weniger Kontrolle. Bei "meinen" Boxen bin ich absolut frei in der Gestaltung, ob ich nun an zwei Ecken Rundungen will oder rote oder grüne Rahmen... Ich platziere meine Box an exakt der Stelle, die ich bevorzuge: in diesem Falle mittig auf der Seite neben der Stelle, deren Klicken die Box öffnet.
Die Seite Animation
Bei der Unterseite Die Animation ist an erster Stelle die Endfassung der Animation zu sehen, wie sie auch auf der Seite des Verlages Prior Art Publishing platziert ist - die Animation, die damals im Winter 2012 die Gestaltung der SEASON II anregte.
Dann folgen drei Zwischenschritte: eine geisterhafte Hand, die von rechts in's Bild nach einem Umschlag greift; eine Männchen, das noch recht unbeholfen einen Brief leert und dann ein Männchen, das nach einem Umschlag greift. Diese Studien sind noch Schwarz-Weiß. Eine Bilderschichtenansicht samt Erklärung bringt dem Interessierten ein wenig die Funktionsweise bzw. Aufbau und Machart der Animation näher, die völlig ohne Animationssoftware auskommt.
![](images/pam3_bilderschichtenansicht.jpg)
Die Spiele-Seite Suchbild
![](images/pam3_suchbild-richtigbox.jpg)
Schon bei SEASON II gab es ein Suchbild ("Finde die Unterschiede"). Hier ist zuerst ein Standbild der Animation platziert. Auf einem zweiten Bild, direkt darunter, sind Fehler eingebaut. Der Spieler soll die Fehler suchen. Die Anzahl muss in ein Kästchen eingetragen werden, worauf das Javascript im Hintergrund prüft, ob 1. ein Buchstabe statt einer Zahl eingegeben wurde und 2., ob die eingegebene Anzahl an Fehlern stimmt.
Entsprechende Meldungen mit fröhlichem oder grimmigem Männchen werden, nachdem der Spieler den "Check"-Button geklickt hat. Bei der alten Site kamen die Meldungen in Browser-generierten Popup-Boxen, hier bei SEASON III sind die Meldungen eleganter gelöst, wie oben beschrieben.
Das Suchbild - Extended in SEASON III
Diese Spieleseite ist hier in Season III noch erweitert: Das fehlerhafte Bild kann mit der Maus überfahren werden. An den Bildstellen mit Fehler erscheint ein "HIER" und der Mauszeiger wird zum Händchen. Beim Klick auf diese Stelle erscheint in einer Box der falsche und der richtige Bildausschnitt und eine kurze Erklärung.
Wie funktioniert das? Das fehlerhafte Bild ist als Imagemap, als sog. verweissensitive Grafik hinterlegt. Die Fehlerstellen sind mit Koordinaten markiert, die auf die Maus-Berührung reagieren: zunächst zeigen sie das "HIER". Bei Klick setzen sie die Aktion in Gang, die kleine Erklärbox mit Falsch/Richtig-Bildausschnitt samt Text zu zeigen: jede gesetzte Koordinaten-Kombination zeigt eine andere Erklärbox.
![](images/pam3_suchbild-mit-loesung.jpg)
Die Erklärbär-Seiten What's about
![](images/pam3_whats-about-hover.jpg)
Bei What's about... gibt es als Bilder platzierte Buttons (die drei Männchen, Layout-PC, Druckmaschine, Stempels). Die Bild-Buttons liegen in den Versionen "oben" und "unten" vor: Wenn man klickt, erscheint die "unten"-Version, die einen kleineren dunkleren Schlagschatten hat und je ein Pixel nach rechts und nach unten versetzt ist.
Bei Klick auf die Buttons wird die bebilderte Info-Spalte sichtbar. Hier kann nachgelesen werden, welches Männchen was macht bzw. welche Technik wofür verantwortlich ist. Die platzierten Bildern wechseln beim Darüberfahren mit der Maus und geben so einen Eindruck von der Tätigkeit des Menschen bzw. des Technikteils; pro Einzelpunkt gibt es zwei Bilder.
Die Meta-Seite: Wieso SEASON III?
![](images/pam3_was-hat-es.jpg)
Indem man auf den roten Schriftzug SEASON III am Kopf jeder Seite klickt, gelangt man zur Season-Info. Dies ist eine Spezialseite, die sich der Frage widmet, was es mit den Seasons auf sich hat. Sie fängt mit der Animation an, die ich vor einigen Jahren für einen Spezialbuch-Verlag gestaltete, als ich noch keinen Schimmer von HTML und Webgestaltung überhaupt hatte.
Die Season-Info-Site hebt sich als Meta-Informationsseite auch gestalterisch von der eigentlichen Seite ab. - Mit vielen Bildern und natürlich auch Text wird hier die SEASON II, die "alte" Site, mit der SEASON III, der "neuen", verglichen: besonders was technische Verbesserungen und Vorteile betrifft und natürlich auch, was das Design angeht.