Meine allerersten (Übungs-) Websites *
![](images/tn_prior.jpg)
September/Oktober 2012
![](images/tn_enzo1.jpg)
November/Dezember 2012
* Um Screens, Beschreibungen und Besonderheiten der Projekte zu sehen, bitte eine Vorschaubox anklicken.
Willkommen bei den Prior Art Männchen - SEASON II | Herbst 2012
Diese allererste Site war mein Spielplatz all der neuen Dinge, die ich ab Herbst im HTML-/CSS-/Javascript- etc. Kurs anfing kennen zu lernen. Als Thema wählte ich die Prior Art Männchen; die Animation über deren Wirken war der Aufhänger Info. Es gibt Spiel & Spaß, ein Suchbild und eine Skizzengalerie. Ich wollte das frisch Gelernte bunt und lustig umsetzen. Sehr "bunt", das heißt chaotisch und nicht sehr planvoll angelegt sind die HTML-Struktur (oftmals auf Basis von Tabellen) und das Stylesheet dieser ersten Site.
![](images/pam-season2_1.jpg)
Auf der Startseite öffnet sich nach Klick auf INFO eine Box, der den Hintergrund dieser Seite erklärt. Die Box ist ein modaler Dialog, hat eine eigene HTML-Datei und muss per Hand vom Leser wieder geschlossen werden. - Die gelbe Headergrafik ist eine Imagemap; durch Klick auf die Worte "Prior Art" gelangt man zur Website des Verlages. - Auch die platzierte Grafik der Männchen ist verweissensitiv: durch Klick auf den Kopf des ersten Männchens gelangt man zur Subsite der Animation.
Die Seiten What's about... Die Männchen & Die Technik
![](images/pam-season2_whatsabout.jpg)
Auf zwei Seiten wird erklärt, was die Männchen eigentlich den ganzen Tag so machen, und wofür die Technik im Detail da ist. Dargestellt sind zunächst jeweils sechs Buttons: auf der Männchen-Erklär-Seite drei Köpfe zum Öffnen und drei zum Schließen. Klickt man ein vollfarbiges Köpfchen, erscheint ein Bild des jeweiligen Männchens und die Beschreibung dessen, wofür es zuständig ist.
Beim Überfahren des Erklär-Bildes mit der Maus wird ein anderes "Aktivitäts"-Bild des Männchens gezeigt. Bei Klick auf die ausgegrauten Weg-Köpfchen schließt sich die jeweilige Infobox wieder. Jeder figürliche Button ist ein zweites Mal, mit einer 1-Pixel-Tiefersetzung und kleinerem Schatten, hinterlegt. Bei Klick wird per Javascript das JPG ausgetauscht, so wirkt es, als drücke man den Kopf in die Oberfläche - siehe links.
Das Suchbild # 1 - "Finde die Unterschiede!" - Suche selbst
![](images/pam-season2_suchbild.jpg)
Die Seite Suchbild ist mit zwei Unterseiten vertreten: Suche hier selbst und Lass suchen. Für das Suche hier selbst - Suchbild platzierte ich zuerst ein originales Standbild der Animation und darunter dasselbe Bild, jedoch mit 18 eingebauten "Fehlern". Der Spieler soll die Fehler finden und unten in das Textfeld eintragen. Das Script prüft nun 1., ob der Wert der Variablen (Inhalt des Textfeldes) eine Zahl ist; wenn nicht, erscheint eine modale Dialogbox „...bitte gib eine Zahl ein!“. Wenn der Spieler 2. die falsche Fehleranzahl eingibt, erscheint ein entsprechender Dialog. Und 3., bei Eingabe des richtigen Ergebnisses, ploppt der "...sehr gut gemacht!" Dialog auf.
Das Suchbild # 2 - "Finde die Unterschiede!" - Lass suchen
![Klick in's Bild um die Demo abzuspielen](images/pam-season2_ANI-startbild_suchbild-lass-suchen.jpg)
Die Seite Lass suchen öffnet sich in einer modalen Dialogbox. Mit der Maus kann man nun über das Bild fahren. Bei den Bildstellen mit eingebauten Fehlern erscheint das Händchen und ein "hier". Bei Klick auf diese Stellen ploppen unter dem Bild die Lösungskacheln mit dem richtigen Bildausschnitt auf. Lass Dir oben anzeigen, wie es vor sich geht: klicke in's Bild und bleib während der Animation mit der Maus im Bild (Maus runter = Stop der Animation).
Besonderheiten | Bemerkenswertes dieser Site
![](images/pam-season2_buttons.jpg)
Jeder Button ist als ein Bild hinterlegt: ob nun klassisch rechteckig oder figürlich, z. B. als Männchenkopf oder als Stempel. "Check answer" ist in 3 Varianten vorhanden: 1. von der Maus unberührt, 2. als Hover (wenn Maus darübergeht, erscheint leuchtenderer Button) und 3. als "klickend": mit kleinerem Schatten und ein wenig nach unten rechts versetzt.
Diese Methode ist sehr aufwendig - allein, dass jedes Buttonbild im HTML mit mehreren Javascript-Events belegt werden muss... - und sehr unflexibel; da die Buttons und ihre Farbtöne und Schattierungen fein aufeinander abgestimmt sind, müssten sie bei einer gewünschten Tonänderung in Photoshop generalüberholt werden. Zugleich aber zeigt allein diese Button-Arbeit meine Liebe zum (pixelgenauen) Farbdetail.
![](images/pam-season2_ballerspiele.jpg)
In diese allererste Website wollte ich alles einbringen, was ich neu lernte, vor Allem viele Javascript-Funktionalitäten. Dass beim Registrieren- und dem Mailformular die Eingaben des Nutzers geprüft werden, ist zwar nichts Besonderes. Dass allerdings dem Nutzer, wenn er "Ballerspiele in Echt" als Hobby angeben will, eine Warnung angezeigt und die Checkbox daraufhin unklickbar wird... dies als witzige Idee ist eher ungewöhnlich.
Mag auch die Navigation eine Tabelle sein und das CSS chaotisch geschrieben: Diese Site ist dafür, dass ich erst seit wenigen Wochen mit Webgestaltung bekannt war, erstaunlich komplex und sinnvoll strukturiert und gekennzeichnet durch einen großen Einfallsreichtum in der Darbietung der Inhalte. Ich denke, meine Begeisterung für diese neue Welt ist spürbar.
My Name is Enzo | Herbst 2012
Ein kleiner Junge namens Enzo. Sein kleiner Hundi und Dinge, die das Kind auch noch mag. Eine Galerie seiner Lieblings-Cupcakes, ein Mail-Formular... Auf dieser zweiten Seite habe ich alle neu gelernten Dinge - Animation per Javascript abspielen, Bilder per Klick zeigen und wieder verschwinden lassen, Bilder per Hover austauschen, Popup-Fenster aufrufen, Formulareingaben prüfen, etc. - eingebaut. Enzo und seine zartlila Site bildet den Rahmen.
![](images/enzo_1b.jpg)
Enzo und seine Startseite
![](images/enzo_ani-blatt_startbild.jpg)
Blatt fliegen lassen
Blatt anhalten
Das Bild des Jungen Enzo hatte ich irgendwann in Illustrator gezeichnet (siehe unten „Suchbild“). - Auf der Startseite stellt das Kind sich vor und bei Klick auf seinen Kopf in der Headergrafik (#1a) erscheint das Popup mit seinem Hundi (#1b). Im Quelltext: eine Imagemap, mit einem Onclick-Event belegt.
Enzo erzählt , was er so mag. Hier ist eine kleine Gif-Animation mit Blatt im Fluge hinterlegt: bei Klick auf den Button „Blatt flieg los!“ (#2a) wird das JPG mit dem Gif ausgetauscht, das 17 Einzelbilder enthält - die Animation dauert ca. eine Sekunde. Bei Klick auf den Button „Blatt halt an!“ (#2b) tritt wieder das JPG an die Stelle des Gif. Hier zum Ausprobieren:
Blatt fliegen lassen
Blatt anhalten
Enzo und sein Suchbild
![](images/enzo_2.jpg)
Für das „Finde die Unterschiede!“-Suchbild veränderte ich die ursprüngliche Illustration an 15 Stellen. Der Nutzer zählt und gibt das Ergebnis in das Textfeld unten ein (#1a). Das Script prüft, ob der Wert der Variablen (Inhalt Textfeld) eine Zahl ist; wenn nicht, erscheint eine modale Dialogbox „Bitte Zahl eingeben!“. Dann switcht es und prüft, ob 15 der Wert ist - wenn nicht, erscheint der „Leider falsch...“ Dialog. Bei Eingabe des richtigen Ergebnises sieht man den „Richtig gemacht“ Dialog (#1b).
Besonderheiten | Bemerkenswertes dieser Site
![](images/enzo_3.jpg)
Die Navigation und manche Inhalte sind auf Grundlage von Tabellen erstellt. Bei zeitgemäßen Webseiten ist das verpönt. Heute undenkbar ist die muntere Mischung von HTML und CSS: in vielen Tags finden sich Style-Angaben, und dies trotz umfangreichen Style-Sheet. Es gibt unnötige "Einboxungen", z.B. Überschriften in einem div für Stylezwecke.
Heutzutage nur als Ausnahme praktiziert (und auch nicht wirklich praktisch): alle Buttons sind als JPGs hinterlegt. Manche Buttons sind figürlich: z.B. der Hundekopf beim Suchbild. Für das "Klick-Gefühl" ist der Kopf mit einer 1-Pixel-Tiefersetzung und kleinerem Schatten hinterlegt. Bei Klick wird per Javascript das JPG ausgetauscht, so wirkt es, als drücke man den Kopf in die Oberfläche - siehe links.
![](images/enzo_4.jpg)
"Alle Buttons als JPGs", das war sehr aufwendig - passend dazu, dass die Site an sich voller Javascript-Spielereien ist. Der EINZELNE Hundekopfbutton z.B. liegt im Quelltext so: <img src = "images / hundekopf-b_oben.jpg" name = "schalter1" onmousedown = "document.schalter1.src = 'images/hundekopf-b_unten.jpg';" onmouseup = "document.schalter1.src = 'images/hundekopf-b_oben.jpg';" onclick = "richtiggemacht();" />
Ich war fasziniert von den Möglichkeiten, die Javascript bietet, auch in Verbindung mit CSS: In der Cupcake-Galerie z.B. erscheint nach Klick auf die Cupcake-Thumbnails der Cupcake als großes Bild. Beim Darüberfahren mit der Maus wird wiederum dies Bild ausgetauscht und zeigt ein Detail des Cakes rangezoomt. Ein Klick auf das Wort "Weg" des jeweiligen Cakes lässt das Bild wieder verschwinden.