Schlagwort-Archive: JavaScript

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 , ,

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 , , ,

Geschichte des Webdesigns

Im Folgenden sind die Ergebnisse unserer Recherche zur Geschichte bzw. zu der Entwicklung des Webdesigns aufgelistet. Mit diesem Teil unserer Infografik wollen wir zeigen, dass Responsive Webdesign das Ergebnis einer Rückbesinnung auf die Flexibilität des ursprünglichen, textbasierten HTML Webdesigns ist. Zudem spielt in diesem Zusammenhang natürlich die Entwicklung von mobilen Endgeräten eine wichtige Rolle. Wir werden im weiteren Verlauf entscheiden, welche der gesammelten Informationen für unsere Infografik von Bedeutung sind, wie wir diese präsentieren müssen und ob weitere Informationen für das Verständnis erforderlich sind.

1991 – 1993
Einspaltige, textbasierte Seiten mit sehr kleinen Bildern und blauen unterstrichenen Links, reines HTML, Text passte sich an Bildschirmgröße an, Umbrüche wurden automatisch generiert – die Website hat ein flexibles Layout.

1994
Gründung des World Wide Web Consortium W3C, welches HTML als Standard Auszeichnungssprache festlegte.

Mitte der 1990er
Tabellenbasiertes Design (ermöglicht Strukturierung des Contents), gekachelte (tabellarisch zerteilte) Hintergrundbilder, animierte GIFs, schrille Farben, Ästhetik steht über der Struktur: Spacer GIFs werden als Platzhalter im Tabellen Layout eingesetzt.
Entwicklung der ersten WYSIWYG-Web-Design-Applikationen die mit Tabellen als Layout Grundlage arbeiteten und in der Lage waren, Tabellen von enormer Komplexität zu generieren.
1996: Macromedia stellt Flash vor

Ende der 1990er
Flash nahm bei Webdesignern an Beliebtheit zu. Websites waren oft eine Mischung aus Flash- und tabellenbasierten Seiten. Websites werden interaktiv. Musik wird eingesetzt. 1998 wurde PHP3 vorgestellt (dynamische Design Sprache)

2000
Cascading Style Sheets (CSS) gewinnt an Beliebtheit. Es stand zwar bereits vorher zu Verfügung, aber die Unterstützung in vielen Browsern war noch nicht ausreichend gewährleistet. CSS erlaubt die Trennung von Struktur (HTML) und Design (CSS) und bietet eine effektive Alternative zu tabellenbasierten Layouts mit HTML. Durch die Trennung von Design und Inhalt wird die Verwaltung von Websites enorm erleichtert, da das Layout unabhängig vom Inhalt verändert werden kann.

Anfang 2000
JavaScript, welches bereits im Jahre 1995 vorgestellt wurde, nimmt an Beliebtheit zu. Mit JavaScript entstanden bzw. entwickelten sich folgende Elemente :

  • Navigationsmenüs (die nun ganz Oben an der Seite platziert sind)
  • Drop-down Menüs
  • Web Formulare (Zur Eingabe durch Nutzer)
  • Vom Nutzer generierter Inhalt (Profile, Journals, Foto-Sammlungen)

Zudem entstehen die ersten Sozialen Netzwerke wie Friendster oder MySpace: das Web wird mehr und mehr zum Informationsaustausch (Foren, Wikis & Blogs) sowie zur Selbstdarstellung eingesetzt.

Mitte 2000
2005 geht die Video Plattform YouTube das erste Mal online. Blogs, Soziale Netzwerke, Wikis und Foren werden immer populärer. Das Web wird vom Nutzer mit Informationen gefüllt und gestaltet. Das Web sollte also möglichst Nutzer freundlich gestaltet sein und die Anmutung des Design sollte dem Nutzer Freude machen. In dieser Zeit sind unter Anderem Design-Elemente mit Hochglanzeffekten sehr beliebt. Die Websites sind bunt, verschiedene Brushes und Verläufe werden eingesetzt und die Webelemente wirken plastisch.

2008
Das Web wird mobil. Es gibt zum ersten Mal spezielle mobile Websites, die für die Nutzung auf einem mobilen Gerät angefertigt sind. Diese Websites wurden zu dieser Zeit noch separat von der Desktop Variante entwickelt.

2012 Responsive Webdesign
In seinem Artikel “Responsive Webdesign” spricht ETHAN MARCOTTE (2010) bereits von der Notwendgkeit eines reaktionsfähigen Webdesigns und bietet als Lösung die Verwendung von Media Queries. Er prägt außerdem (wie der Titel) verrät den Begriff Responsive Webdesign.
Obwohl CSS3 seit 2001 entwickelt wird sind die “Media Queries” erst seit 2012 ein vom W3C anerkannter Standard.

Getaggt mit , , , , , ,