Archiv der Kategorie: Umsetzung

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

Getaggt mit , ,

Entscheidung zur Technischen Umsetzung

Inzwischen haben wir uns nähere Gedanken zur technischen Umsetzung gemacht.
Zur Debatte standen Techniken wie Flash, Processing, VVVV oder HTML5/CSS3/JavaScript. Für Flash sprachen nur wenige Argumente, darunter die Tatsache, dass wir hiermit bereits Erfahrung haben. Keine der anderen Möglichkeiten haben wir zuvor für eine interaktive Anwendung benutzt (HTML und CSS im Zuge des Erstellens von Websites ja, aber den hier wichtigsten Teil JavaScript nicht). Der Fakt, dass es sich jedoch um eine in die Jahre gekommene und nicht besonders performante Technologie handelt war für uns ein K.O. Kriterium. ein Beleg dafür ist unter anderem das komplette Fehlen der Unterstützung in iOS. Noch aktueller und gravierender ist es es in OSX 10.9 Mavericks. Hier ist Flash im Browser eines vollwertigen Betriebssystems als Grundeinstellung deaktiviert.
Da  VVVV und Processing  keine Webtechnologien sind, es in unserer Infografik um das Web geht und wir deshalb als Publikationsmedium auch das Web ausgesucht haben, fallen diese Beiden ebenfalls weg. Als Erleichterung für die Java Script Entwicklung werden wir die JavaScript-Bibliothek jQuery einbinden. Sie sollte alle Möglichkeiten bieten um unsere gewünschten Interaktionen umzusetzen.

Ein weiterer Grund für den Einsatz von HTML5/CSS3/JavaScript ist, dass viele unserer Interaktionen auf den Prinzipien des Responsive Webdesigns basieren. Wenn wir also zeigen wollen, warum man relative Größenangaben verwenden muss, können wir diese Grafik einfach mit relativen Größenangaben umsetzten. Genau so, wie beim Programmieren einer responsive Website. Ich denke, dass es eine große Erleichterung bei der Programmierung sein wird, diese gedankliche Übertragung von HTML5/CSS3/JavaScript in eine andere Technologie nicht machen zu müssen.

Getaggt mit , , ,