Skip to content
Menu

Emimafia

Published by BOfH on 16th September 2014

In my first semester we had to build a website as group project. With this we should proof our skills in teamwork and different web techniques. For this we should create a website with a city guide for Dresden. We were free to choose a specific topic or just pick some random points. At least there should be choosen 5 points wich should be displayed in text, picture, audio and video. I am proud of the final result.

I present you: The Emimafia Cityguide Dresden.

What the hell is Emimafia?

Okay. Emimafia is just a try to create a povocative name.

EMI is the name of the module in that we had to create the project. EMI stands for Einführung in die Medieninformatik (Introduction to media computer science)

Mafia comes from my faible for family structures and the godfather.

What I am going to see on the Website?

Our points of interest are more or less the usual suspects in Dresden. Mostly this is caused by our lack of time during the end of our work.

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

What is the site built with?

The complete site is based on HTML5 and was designed with CSS3. In the background are working some small logics in php and the navigation is based on AJAX. Furthermore there are elements written in SVG as requested. Actually the complete map should have been a standalone svg version but because of communication problems was this version never finished properly by the developer in charge. So we had to limit the SVG to the markers of the map and the city arms. In exchange we included a map from OpenStreetmap whereby the handling comes from their code.

SVG-Maps - Performance bye bye

The creation of a SVG map from data of OpenStreetMap seems to be not the easiest task at least after the statement of our SVG developer in charge. Even the performance is way worse than a streamed map.

Why no Google Maps?

It was explicit required to deal with OpenStreetMap. The next thing is, that we could not control the caching and compression beheavior what made things even worse.

AJAX - Between despair and return false;

The examination of AJAX was by far the biggest challenge. Thanks to a video2brain workshop and the persistence of our AJAX developer in charge we are proud to present our navigation. JavaScript is such a beautiful language and debugging it is no problem. </irony> This process was quite nerve-wracking. A semicolon on the wrong place or a return false; one bracket to early or to late and the complete site was in a mess.

PHP - The well-known

Because we had worked with PHP most of our knowledge could be brought into this website. The most adjustment took place in the area of the gallery. The loading of static sites was a bit tricky but I made it without bigger problems.

Can I look under the hood?

If you mean the website of course. Nearly the complete sourcecode is available on github.com. If you find errors pull requests are always welcome.

What’s further on?

Actually the project is finished. All requirements are served and we got our result (20/20 + 5 bonus points). Nevertheless there are improvements that can be made on this website.

  • make navigation user- and SEO-friendly. (Clean-URLs or at least URLs)
  • fix the contact form
  • provide a JavaScript independend version
  • code a backend
  • restructuring database and get more data in it