Meine allerersten (Übungs-) Websites *
September/Oktober 2012
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.
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
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
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
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
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.
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.
Die Animation für Prior Art Publishing
Im Frühjahr 2012 bekam ich einen Auftrag von einem Spezialbuchverlag. Der Verlag wendet sich an Entwickler, Erfinder, Patentanwälte und die Patentabteilung von Groß- und mittelständischen Unternehmen sowie an Start-Ups.
Ideen und Erfindungen der Unternehmen und Einzelpersonen werden dokumentiert, in dem Journal Technik Up2date gezielt veröffentlicht, d. h. an ein Netzwerk aus Bibliotheken übergeben, dort nachweisbar inventarisiert und gelten dann offiziell als "Stand der Technik".
Diese sog. "Defensivpublikation" ist als Bestandteil des Patentwesens wichtig für moderne Forschung und Entwicklung und wird auf der Site des Verlages ausführlich erklärt. Für die Startseite jedoch wünschte der Auftraggeber (Verlagseigentümer) eine verspielte Art und Weise, das Thema in Bildern dem Besucher in einem ersten Schritt nahezubringen. Ich erarbeitete im Frühjahr/Sommer 2012 einen comic-ähnlichen Animationsfilm mit kindlichen Figuren und stark vereinfachtem "Jemand-hat-eine-Idee-die-der-Verlag-publiziert"-Ablauf, der dennoch das Wichtigste zeigt.
Die Animation entstand über viele Wochen hinweg auf Grundlage sehr vieler Skizzen und Zeichnungen, coloriert mit Illustrator; als Film mit 122 Frames (Einzelbildern) in Photoshop zusammengestellt. Platziert ist die Animation nun auf der Startseite des Verlages (siehe hier). Erst wenn der Besucher seine Sprache gewählt hat, wird es "ernst", und kann sich vollumfänglich über Hintergrund und Procedere informieren.
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.
Enzo und seine Startseite
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
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
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.
"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.
Übrigens... wirklich bemerkenswert ist der Aufwand, den ich mit dieser Seite betrieb. Jegliche Illustrationen sind selbst erdacht und in Illustrator und Photoshop handgezeichnet. Alles folgt der "Enzo"-Linie: Farben und Formen sind kindlich verspielt, mit bunten Schlagschatten und runden Ecken. Enzo spricht den Besucher in kindlicher Sprache an.
Die bei Start der Site-Erstellung bereits existierende Illustration Enzos samt Hund war Aufhänger, den ich bei der Themensuche für eine Site nutzte, doch bleibt die Site nicht sinnfrei: das Kind erzählt über sich, bietet Action, indem der Betrachter zum Mitmachen aufgefordert wird. Enzo bittet seine Besucher auch, ihm zu schreiben und von sich zu erzählen.