Emimafia

Im ersten Semster mussten wir in Gruppenarbeit eine Website erstellen und damit unser Können im Team und mit verschiedenen Webtechniken unter Beweis stellen. Dazu sollten wir eine Website in Form eines Stadtführers erstellen. Uns war es freigestellt, ob wir ein bestimmtes Thema oder einfach nur verschiedene Punkte aus Dresden auswählen. Auf jeden Fall sollten mindestens fünf in Text, Bild, Ton und Video darstellt werden. Unser Ergebnis lässt sich durchaus sehen und erfüllt mich ein wenig mit Stolz.

Ich präsentiere: Der Emimafia Cityguide Dresden.

Was zu Hölle ist die Emimafia?

Nun ja. Emimafia ist eigentlich nur der Versuch einen provozierenden Namen zu kreieren.

EMI ist der Name des Moduls in dem wir dieses Projekt erstellen sollten. EMI steht für Einführung in die Medieninformatik. Es war mehr oder weniger ein Spaßfach.

Die Mafia kommt einfach von meinem Faible für Familienstrukturen und den Paten.

Was sehe ich jetzt auf der Website?

Unsere Points of Interest sind so ziemlich die üblichen Verdächtigen für Dresden. Das ist größtenteils dessen geschuldet, dass wir zum Ende der Arbeit in Zeitnot geraten sind.

• Frauenkirche
• Semperoper
• Altmarkt
• Großer Garten
• Waldschlösschen Brücke

Womit ist die Website gebaut?

Die komplette Seite basiert auf HTML5 und wurde mit CSS3 gestaltet. Im Hintergrund arbeiten ein paar kleine PHP-Logiken und die Navigation ist komplett mit Ajax realisiert. Des Weiteren sind ein paar Elemente, wie gefordert in SVG geschrieben. Eigentlich sollte die komplette Karte eine Standalone SVG Version werden aber aufgrund von Abspracheproblemen ist diese Version leider nie von unserem SVG-Verantwortlichen vernünftig beendet worden. Also mussten wir uns darauf beschränken Marker und Stadtwappen in SVG zu schreiben. Dafür haben wir eine Karte von OpenStreetmap eingebunden, wodurch uns das Handling abgenommen wurde.

SVG-Karten - Performance ade

Die Erstellung einer SVG-Karte aus den Daten von OpenStreetMap scheint eine nicht gerade einfache Aufgabe zu sein, zumindest laut Aussage des SVG-Verantwortlichen bei uns. Auch ist die Performance wesentlich geringer als eine gestreamte Karte.

Warum kein Google Maps?

Es war explizit gefordert, sich mit OpenStreetMap zu beschäftigen. Da auch Caching und Kompression aufgrund vom Hoster nicht explizit beeinflussbar sind, hat sich daran nichts gebessert.

AJAX - Zwischen Verzweiflung und return false;

Die Auseinandersetzung mit AJAX war wohl die größte Herausforderung. Dank eines video2brain-Lehrgangs und der Hartnäckigkeit von unserem AJAX-Verantwortlichen kann sich die Navigation sehen lassen. Da Javascript ja so eine wunderschöne Sprache ist und das Debuggen absolut kein Problem darstellt </ironie> war dieser Prozess eine ganz schön nervenaufreibende Sache. Ein Semikolon an der falschen Stelle oder das return false; eine Klammer zu früh oder zu spät und schon flog einem die komplette Seite um die Ohren.

PHP - Das Altbekannte

Da wir schon mit PHP gearbeitet hatten, ließ sich vieles wieder verwenden. Die größten Anpassungen mussten im Bereich der Gallerie getätigt werden. Das Laden der statischen Seiten war noch eine kleine Herausforderung aber auch ohne größere Probleme realisierbar.

Kann ich mal unter die Haube schauen?

Wenn die Website gemeint ist immer gerne. Nahezu der kompletter Quellcode ist auf github.com zu finden. Falls Fehler zu finden sind, sind Pull-Requests immer willkommen.

Wie geht’s weiter?

Das Projekt ist eigentlich beendet. Alle Anforderungen sind erfüllt und wir haben unser Ergebnis (20/20 + 5 Zusatzpunkte) bekommen. Trotzdem lassen sich auf jeden Fall noch weitere Verbesserungen an der Website durchführen.

• Navigation Nutzer- und SEO-freundlich machen. (Clean-URLs bzw. überhaupt URLs)
• Das Kontaktformular fixen
• Eine Javascript unabhängige Version bereitstellen
• Ein Backend zaubern
• Datenbank restrukturieren und mehr Daten auslagern