timewarp

früher war alles besser! auch das web-design?

Timewarp will dir genau das zeigen. Die Applikation stellt Websites nach den Design-Trends vergangener Jahre dar. Es soll veranschaulicht werden, wie stark sich das Web im Laufe der letzten Jahre verändert hat.

In nur 4 Schritten in die Vergangenheit reisen

Timewarp benötigt nur 4 Schritte, um eine Website altern zu lassen. Gibt man die gewünschte Adresse ein, analysiert die Applikation im ersten Schritt die Website und erkennt automatisch wichtige Teile und somit den Aufbau der Seite. Im zweiten Schritt werden die Erkenntnisse angezeigt und man kann mit Hilfe eines eigens bereit gestellten Tools Elemente verändern oder ergänzen. Danach baut Timewarp die Website automatisch um: Magic happens here. ;) Im letzten Schritt kann man das Ergebnis betrachten. Wie hätte die Website in den Jahren 2008, 2003, 1998 und 1994 ausgesehen?

Die Geschichte des Webs

Für alle Interessierten stellt Timewarp ein weiteres Feature bereit: Die Geschichte des Webs. Auf einer eigenen Seite wird mit einfachen Animationen veranschaulicht, wie sich das Web seit 1990 entwickelt hat und welche wichtigen Weiterentwicklungen und Innovationen im Laufe der Jahre das Web eroberten.

Technische Umsetzung

Timewarp basiert auf einer Ruby on Rails App. Für die Umetzung des Designs wurden SCSS und HAML eingesetzt. Die Analyse der Website und das Analyse-Tool wurden hauptsächlich mit JavaScript, JQuery und einigen Libraries umgesetzt. Die Besonderheit der Analyse besteht darin, das diese mit jeder Seite lernt. User-Input in Form von eigenen Markierungen merkt sich das Tool und wendet sie bei den späteren Seiten an, um Elemente einer Website besser von selbst erkennen zu können.

Um vorhandene Daten auch editieren und löschen zu können, wurde auch ein eigenes Admin-Interface erstellt. Hier können auch die bereits erlernten Elemente des Analyse-Tools editiert und angepasst werden.