Einblicke in die Programmierung

Die Infografik ist nun schon weit fortgeschritten, deshalb möchten wie an dieser Stelle ein paar kleine Einblicke in die Programmierung geben.
Die Wahl HTML5/CSS3/JavaScript als Technologie einzusetzen hat sich als sehr gute Wahl herausgestellt.

CSS Transitions, Transformations und Animations:

Von vornherein war uns klar, dass wir einen großen Wert auf Transitions legen werden. Neben dem statischen Interface machen die Transitions, gerade bei einer interaktive Infografik, einen großen Teil der User-Experience aus. CSS3 bietet dafür eine sehr mächtige, aber auch sehr simple Lösung. Wenn man einem Objekt im Hover-Zustand einen anderen Wert gibt, kann man diesen per Transition animieren. Diese Befehl hat sehr viele Einstellungsmöglichkeiten. Die Vielfältigste ist es, ihnen durch Cubic-Bezier ein individuelles Timing und einen eigenen Ablauf zu geben.

Bildschirmfoto 2013-07-19 um 17.26.16

 

 

 

 

 

 

Diagramme programmieren:

Eine Herausforderung, der wir uns stellen wollten war es, die beiden Diagramme nicht als Grafik einzufügen, sondern sie vom Browser rendern zu lassen. Diese Vorgehensweise hat mehrere Vorteile. Die Ladezeiten der gesamten Infografik wird verkürzt, die Diagramme sind leichter änder- und erweiterbar und dadurch bestehen viel mehr Interaktionsmöglichkeiten (Hover-Funktion über jeden der 250 Punkte). Nach längerer Recherche sind wir auf das jQuery Plugin Flot gestoßen. Es bietet eine API, die alle gewünschten Funktionen ermöglicht. Ein kleiner Nachteil war, dass das Diagramm optisch nicht 1:1, wie im Visual Design vorgesehen, umgesetzt werden konnte. Da es sich aber nur um Kleinigkeiten handelte, sind wir die Kompromisse eingegangen. Außerdem hatten wir so den Vorteil, dass wir für das zweite Diagramm einfach den Code des Diagramms kopieren und andere Daten einfügen konnten. So konnten wir die 250 verschiedenen Auflösungen in einem Array speichern und mussten nicht jeden einzelnen Punkt in Photoshop pixelgenau einfügen.

Bildschirmfoto 2013-07-21 um 11.38.20Bildschirmfoto 2013-07-22 um 14.32.56

 

 

 

 

 

 

 

 

 

 

„Unterschiedliche Layouts“ Grafik

Diesen Teil zu programmieren hat am meisten Spaß gemacht. Der Kasten um die Wireframes hat eine feste Größe. Die Breite der einzelnen Wireframe-Kästen wurde in Prozent angegeben. Anschließend wurde der Slider mit der Pixel-Zahl des Kastens um die Wireframes verknüpft. Dadurch ist das Layout fluid. Jetzt fehlten noch die Breakpoints. Die drei verschiedenen Layouts der Wireframes wurden alle in CSS gelayoutet. Wenn der Slider nun einen bestimmten Wert unterschreitet, wird die aktuelle Klasse an den Wireframes per jQuery entfernt und die Klasse mit dem passenden Layout hinzugefügt. Die Transitions wurden durch Cubic-Bezier-Werte („-webkit-transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.1);“) bei jedem einzelnen Kasten hinzugefügt, und unterschiedlich getimet.
Bildschirmfoto 2013-07-22 um 14.12.44Bildschirmfoto 2013-07-22 um 16.23.19

Advertisements
Getaggt mit , ,

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: