Dokumentation
Team
Das Entwickler-Team besteht aus zwei Personen:
Martin-R. Bartz, zustaendig fuer Retro-Grafiken, Animationen und Funktionsideen
Florian Werner, Programmierung und Realisierung von Funktionen.
Das Thema
Infografik zum Konsolenkrieg der 4. Generation von Sega's Mega Drive (bzw. Genesis) und Nintendo's SNES. Mit dem Thema verbinden wir viele Erinnerungen an ein laengst vergangenes Videospiel-Zeitalter. Bei der Erstellung dieser interaktiven Infografik stiessen wir auf viel neues Wissen und haben ferner Erfahrungen gesammelt.
Herangehensweise, Probleme & Loesungen
Als es hiess, dass das Thema frei ist, war fuer uns klar: Videospiele! Ueber das grobe Thema hatten wir uns schon laengst entschieden; es sollte um die Konkurrenten Nintendo und Sega gehen. Erst im spaeteren Arbeitsverlauf haben wir uns auf die beiden Konsolen der 4. Generation spezialisiert. Der Grund? Eine allgemeine Infografik ueber Nintendo und SEGA wuerde erstens viel zu komplex werden und zweitens wuerde SEGA ziemlich in die Warproehre schauen, da Nintendo schon Ende des 19. Jahrhunderts existiert und heutzutage die neuste Heimspielkonsole auf dem Markt anbietet.
Nach der Themenwahl haben wir zunaechst unser eigenes Wissen ueber die Konsolen und deren Software zusammengetragen.
Zwecks Ideenanregung haben wir im Anschluss zunaechst aehnliche Infografiken verglichen, damit wir ungefaehr wissen, in welche Richtung wir gehen und was wir an Informationen noch mit einbringen koennen. Das Interessante hierbei war fuer uns, dass es bisher noch keine Infografik zu diesem Thema gab. Dies diente ferner als weiterer Ansporn fuer das Projekt.
Bei einer solchen Informationsflut waeren wir fast virtuell ertrunken, haetten wir uns nicht nebenbei ein paar kleinere Scribles gemacht, die uns geholfen haben, den Fokus nicht aus den Augen zu verlieren. Dabei kamen fast in jeder Unterrichtseinheit immer neue Einfaelle, alte Ideen wurden ueber Bord geworfen oder so stark abgeaendert, dass es wieder etwas ganz anderes war.
Informationsbeschaffung
Nach einigen Wochen haben wir uns ueber das entgueltige Design geeinigt. Nun fehlten Informationen. Unsere erste Informationsquelle waren da natuerlich die Entwickler selbst, aber das haetten wir uns auch sparen koennen, da sich zwar sowohl Nintendo als auch Sega "bald darum kuemmern" wollten, was jedoch bis heute nicht passiert ist. Uns blieb dann nichts anders uebrig, als mit Tastatur und Maus bewaffnet die Weiten des Internets zu erforschen. Dabei stiessen wir auf viele informative Seiten, welche aber alle eines gemeinsam hatten: sie waren unvollstaendig, hatten ungenaue Informationen und unterschieden sich untereinander so stark, dass man nicht mal etwas abschaetzen konnte.
Loesung des Problemes, wir haben uns auf wenige Seiten beschraenkt, damit das Ergebnis nicht komplett verfaelscht ist.
Informationen waren nun da, allerlei Entwuerfe gab es auch schon, jetzt fehlte noch der Ablauf. Was sollte wo hin und wieso, in welcher Reihenfolge und wie praegnant sollten die einzelnen Bloecke sein? Viele Fragen, welche im Projekt immer wieder auftauchten und uns zum Verzweifeln brachten.
Irgendwann mussten wir uns entscheiden...
Screen-Layout
Als dies geschah, haben wir uns dann endlich an die ersten effektiven Screen-Layouts gemacht. Sega und Nintendo standen schon immer fuer Farbe und die hiess es natuerlich mit einzubringen. Und was koennte besser sein, als Screens aus den Spielen selbst? Hier und da mussten die pixeligen Bilder natuerlich angepasst werden. Fuer ein Retro-Feeling haben wir uns entschiedne einen Zoomfaktor von 4 bei den Grafiken zu verwenden und die einzelnen Informationsbloecke immer gleich gross zu gestalten. Das hatte ferner den Vorteil, dass fuer uns die Grafikerstellung deutlich leichter war.
Zur Interaktivitaetssteigerung und um den Benutzer an zu regen, die Maus nicht nur zum Scrollen zu benutzen, haben wir einige Informationen hinter Links versteckt, welche sich nur beim Klicken auftun.
Programmierung
Als wir dann endlich alles beisammenhatten, konnten wir uns an die Vorprogrammierung wagen. Dabei kam die Frage auf, was fuer Skript- und Programmiersprachen wir benoetigen. Dabei haben wir einige Sachen auch verworfen, zum Beispiel Canvas Elemente, welche on the Flow erzeugt werden und mit einer Animation versehen werden koennen. Wir blieben dann bei PHP fuer einfache kleine Funktionen und Javascript, um unter anderem Lightboxes einzublenden.
Das Geruest stand dann schon ein paar Tage bevor wir anfingen, es mit Informationen und Animationen (GIFs) zu fuellen. Die Animationen bastelten wir uns aus einzelnen Sprite-Sheets der jeweiligen Spiele zusammen, welche schon seit Aeonen auf heimischen Computern von Nerds wie uns verweilten und quasi nur darauf gewartet haben.
Nachdem dann alles aus unserer Sicht fertig war, haben wir die Grafik in verschiedenen Browsern getestet. Ein Schritt, den wir haetten schon viel frueher machen sollen; es stellte sich heraus, dass einige Browser mit dem Code nicht zurechtkamen. Dies war ein Moment der Verzweiflung und wir standen kurz davor, das ganze Projekt programmiertechnisch von vorne zu beginnen. Dank einigen Foren-Usern konnten die Fehler behoben und der Neustart verhindert werden.
Es folgte die Finalisierung grafischer Elemente. Das Schwierigste war somit geschafft und wir konnten in aller Ruhe noch hier und da Ergaenzungen hinzufuegen...
Technik
Eingebundener Webfont
Lightbox
Funktionierendes Formular auf Basis einer Flat-File-DB
Bewertungssystem im Formular