Im Kurs „Web Basics“ bei Tina Deiml-Seibt ging es in erster Linie um die Grundlagen und gestalterischen Möglichkeiten von HTML5 und CSS3. Daneben wurden auch Javascript und jQuery Grundlagen vermittelt, die die Einführung in die Webentwicklung abrundeten. Die neu erlernten Fähigkeiten konnten ausgiebig in einem Abschlussprojekt angewandt werden, welches sich in meinem Fall mit Netart beschäftigt.

Copyright

©Constantin Eichstaedt

Mein Ziel lag darin, eine völlig verrückte Netart-Webseite zu gestalten, die den Besucher immer wieder mit neuem und unerwartetem Inhalt überrascht. Ganz im Gegensatz zu den heutigen Usability-Standards, die darin bestehen, Webseiten möglichst benutzerfreundlich zu machen, soll diese Seite eher undurchschaubar sein und einem Chaos ähneln. Der Besucher soll die Chance haben, die Seite selbst zu erforschen und dadurch, dass er nicht vorhersehen kann, was bei einem Klick geschieht, oder wohin ihn die Seite führt, entdeckt er immer wieder etwas Neues. Angelehnt an Netart-Seiten wie jodi.org soll diese Seite ebenfalls möglichst bunt und unübersichtlich sein, sodass immer wieder neue, interaktive Kunstwerke entstehen. Diese sollen an Begebenheiten aus dem Computeralltag erinnern, die heute eher seltener geworden sind: Abstürze, wirre Fehlermeldungen, Zahlencodes, Bluescreens, Bildfehler und Spam.

Copyright

©Constantin Eichstaedt

Da der größte Teil der Netart aus den Neunzigern stammt und mit einfachsten Mitteln auskommen musste, lassen sich Webseiten heute dank HTML5 und CSS3 viel interaktiver gestalten. Besonders mit CSS3-Transitions lassen sich interessante Effekte erzielen und mit Hilfe von Unicode kann man verrückte Symbole anzeigen und über den Bildschirm wandern lassen, die kaum irgendeinen realen Bezug haben.

Die relativ simple Interaktion besteht darin, dass der Besucher der Seite sich durch eine Ansammlung von Seiten klickt. Interessant wird dies erst dadurch, dass es in keiner Weise offensichtlich ist, worauf geklickt werden muss. Zudem ist es schwierig auf sich bewegende Objekte zu klicken, sodass sogar eine Herausforderung besteht.

Bemerkenswert ist auch der Bezug zwischen angezeigter Webseite und dem dazugehörigen Quelltext, da durch verschiedene Formatierungen die gleichen Symbole völlig unterschiedlich dargestellt werden. Statt Formen in Bilddateien werden ausschließlich Unicode-Symbole verwendet; lediglich die Hintergrundbilder sind JPG-Bilder.

Ein weiterer wichtiger Aspekt ist, dass die Seiten ohne JavaScript auskommen. Die Animationen sind mit webkit-keyframes erstellt. Die Herausforderung dabei war, die Animationen abgehackt darzustellen, statt in langsamen und weichen Übergängen.

Copyright

©Constantin Eichstaedt

Genug geredet. Am besten lässt sich alles nachvollziehen, wenn man es ausprobiert. Hier ist der Link dafür:

[◥ Klick!](http://interface.fh-potsdam.de/Users/web_basics/Constantin%20Eichstaedt/006-Projekt/ „Klick!“)

(Seiten sind für Safari optimiert, bitte mit Safari öffnen)

Obwohl ich schon einige kleine Vorkenntnisse in HTML und CSS hatte, konnte ich definitiv viel in diesem Kurs lernen. Besonders interessant war es, sich mit den Neuerungen in HTML5 und CSS3 auseinanderzusetzen, die Animationen im Web auch ohne Javascript ermöglichen. Außerdem konnte ich mit diesem Projekt auch einmal abseits von nutzerorientierten Webseiten und strikten Layouts arbeiten, was mir wirklich gefallen hat.