Hochschule für angewandte Wissenschaften Fachhochschule Deggendorf. Fakultät Elektro- und Medientechnik. Entwicklung eines jquery Plugins

Transkript

1 Hochschule für angewandte Wissenschaften Fachhochschule Deggendorf Fakultät Elektro- und Medientechnik Entwicklung eines jquery Plugins Development of a jquery Plugin for creating interactive infographics Bachelorarbeit zur Erlangung des akademischen Grades: Bachelor of Engineering an der Hochschule Deggendorf vorgelegt von: Fulda, Johanna Prüfer: Prof. Dr.-Ing. Udo Garmann am: 30. Mai 2012

2 2

3 Inhalt Einleitung Infografiken in der Zeitung Interaktive Infografiken Daten als Basis für Infografiken Datenjournalismus Daten sollen zugänglich werden Konzept: Open-Data Beispiele Open-Data Plattformen 15 Offener Haushalt 15 Städte und ihre Daten 16 The Truth about Crime 17 Farmsubsidy.org 18 Entwicklungszusammenarbeit und Transparenz HTML5 als Alternative zu Flash Benutzeroberflächen zum Erstellen von HTML5-Animationen Flash-Umwandlungs-Tools HTML5-Benutzeroberflächen 22 Adobe Edge 22 Sencha Animator 24 Tumult Hype jquery Ein JavaScript-Framework jquery als Bindeglied zwischen Programmierer und Designer Im Vergleich mit anderen JavaScript-Frameworks jquery für interaktive Infografiken Grundlagen für die Verwendung von jquery Beachtenswertes bei der Entwicklung für Desktop- und mobile Browser Anwendungsgebiet Anwendung 33 4

4 3.3 Aufbau des DOM, Styles und allgemeine Variablen Z-Index Plugin-Elemente als Unterelement Style Sheets Allgemeine Variablen zur Browser-Abfrage Vereinen von Touch- und Klick-Events Funktionen defineformat - Festlegen des Formats 39 Übersicht 39 Umsetzung 39 a) Größe des Dokuments festlegen 39 b) Orientationlock und Ausrichtung erkennen 40 c) Darstellung auf anderen Devices 41 d) Bild ohne Bilddatei 42 Parameter 43 Beispiel definelegend - Befüllen der Legende 44 Übersicht 44 Umsetzung 44 Parameter 45 Beispiel poigenerator - Setzen von Points of Information 46 Übersicht 46 Umsetzung 46 a) XML-Datei 46 b) Tooltips 47 c) Pulsieren 48 Parameter 49 Beispiel menuegenerator - Ein Menü generieren 50 Übersicht 50 Umsetzung 51 a) Menübuttons erzeugen 51 b) Klassen der Buttons 51 c) Farbverlauf 52 d) Div-Container der Buttons 52 Parameter 54 Beispiel 55 5

5 3.4.5 slidergenerator einen Slider generieren 56 Übersicht 56 Umsetzung 56 a) Sliderstationen 56 b) Fallback für IE 56 c) Sliderknopf bewegen 57 d) Feststellen der Klick- bzw. Touchposition 57 Parameter 58 Beispiel checkbox Checkboxen erstellen 59 Übersicht 59 Parameter 59 Beispiel startscreen Einen Einleitungstext hinzufügen 60 Übersicht 60 Parameter 61 Beispiel XML-Befüllungstool Resümee 65 Quellen 68 Externe Bildquellen 70 6

6 7

7 8

8 Einleitung Mit der Verbreitung der Tablet-PCs entstand eine völlig neue Publikations-Möglichkeit für Verlagshäuser. Tageszeitungen, Zeitschriften und Magazine entwickelten Applikationen, mit denen man die Möglichkeit hat, alle Ausgaben digital auf einem Tablet-PC zu lesen. Das spart Papier und bietet ein handlicheres Format als z.b. die große Tageszeitung. Diese Art der Publikation bringt neue Aufgaben in der Produktion mit sich. Zwar werden meist die Inhalte aus dem Print-Produkt eins zu eins übernommen, doch zusätzliche Angebote sollen die digitale App interessanter machen und dem Leser einen Anreiz geben, für den digitalen Inhalt den gleichen Preis zu zahlen wie für die Print-Version. Die zusätzlichen Angebote sind meist multimedial: Videos, Audio oder Inhalte, bei denen dem Leser Interaktionsmöglichkeiten geboten werden, beispielsweise in Form von interaktiven Infografiken. In der folgenden Arbeit geht es um die Produktion dieser interaktiven Grafiken im allgemeinen und speziell um die der digitalen Ausgabe der Süddeutschen Zeitung. Schon bevor es die digitale Ausgabe der SZ gab, wurden interaktive Grafiken für das Online-Portal der Zeitung produziert. Da sie viel Zeit für Vorbereitung und Umsetzung in Anspruch nahmen, wurden sie hauptsächlich für große Ereignisse erstellt, z.b. für Wahlen oder Sportmeisterschaften. Für das tagesaktuelle Geschehen waren sie weniger geeignet. Doch seit dem Release der digitalen Ausgabe für das ipad (eine App für Android-Geräte gibt es bisher noch nicht) wurde die Anzahl der Produktionen deutlich erhöht. Täglich wird mindestens eine Infografik aus der Print- Version für das ipad optimiert und mit interaktiven Elementen erweitert. Um jeden Tag eine interaktive Grafik zu produzieren, benötigte man ein System, mit dessen Hilfe immer wiederkehrende Elemente schnell und unkompliziert eingesetzt werden können. Da nicht immer ein Spezialist für die interaktiven Grafiken zur Verfügung steht, muss das System leicht verständlich und einfach anwendbar sein. Dies wurde in Form eines Plugins erstellt, das auf der JavaScript-Bibliothek jquery basiert und die am häufigsten auftretenden Fälle abdeckt. Welche Möglichkeiten es bietet und wie genau der Einsatz funktioniert wird im dritten Teil der Arbeit erläutert. Zunächst wird im ersten Teil ein Überblick über den Einsatz von Informationsgrafiken gegeben und insbesondere auf den Datenjournalismus eingegangen, der Infografiken auf eine spezielle Art nutzt. Der zweite Teil beinhaltet die technische Umsetzbarkeit der interaktiven Grafiken. Zunächst wird der Begriff HTML5 definiert und Benutzeroberflächen dafür genauer betrachtet. Anschließend wird die JavaScript Bibliothek jquery vorgestellt. 9

9 10

10 Informationsgrafiken begegnen uns in vielen Situationen. Sei es als U-Bahn-Übersicht, als Notausgangs-Plan, als erklärendes Bild an der Wand einer Arztpraxis oder als Bedienungsanleitung. Bilder sagen, laut Sprichwort, mehr als viele Worte. Blickbewegungsstudien ergaben, dass die meisten Leser eines Textes zunächst die dazugehörigen Bilder überfliegen.[1] Sie können schnell erfasst werden und das Interesse für den Text wecken. Diese Bildelemente sind in Zeitungen Fotos oder Grafiken, die Zusatzinformation oder eine Zusammenfassung des Textes bieten. In fast jedem Zeitungsverlag gibt es daher eine Grafikabteilung. Dorthin leiten Redakteure meist ihre Anfragen, wenn sie für ihren Artikel ein grafisches Element benötigen. Häufig handelt es sich dabei um Diagramme (z.b. in Form von Balken, Torten oder Kurven), um Landkarten (auf denen gezeigt wird, wo sich etwas abspielt) oder um Zeitleisten (auf denen wichtige Stationen zu einem Thema zusammengefasst werden). Durch sie soll leicht verständlich, optisch ansprechend und vor allem übersichtlich ein komplexer Zusammenhang dargestellt werden. Erstellt werden die Grafiken meist in Vektorprogrammen wie z.b. Adobe Illustrator. Dort gibt es die Möglichkeit, automatisch aus einer Tabelle Grafen zu erstellen. Diese wandeln Zahlen z.b. in die Höhe eines Balkens oder in das Volumen eines Kreises um. Ein in Illustrator erstelltes Beispiel zeigt Abb. 1. Abb. 1: Im Vektorprogramm Illustrator kann man aus einer Tabelle mit Zahlen z.b. Balken-, Kuvenund Torten-Diagramme erstellen lassen. ten und Nachrichtenagenturen oder von freien Grafikern, Designer und Gestaltern. ausgezeichnet werden ging der 1. Platz des dpa-infografik Award z.b. an Ole 11

11 stehen der Grünen veröffentlicht wurde. (Siehe Abb. 2) Inzwischen gibt es diese Auszeichnungen auch für interaktive Infografiken aus den Online- oder Digital-Ausgaben. International sticht dabei besonders häufig die New York Times heraus, die häufig sehr aufwändig recherchiert und umfangreiche in- Verlauf der Ölkatastrophe im Golf von Mexiko im Jahr Zu jedem einzelnen Tag zwischen dem Sinken des Öltankers (22.April) und zwei Wochen nach dem Verschließen des Lecks (am 2. August) indet man detaillierte Informationen, Quelle: New York Times 12

12 Das Verhalten im Betrachten von Bildern hat sich verändert, durch die Masse an Infor mationen, die wir täglich, vor allem über das Internet, konsumieren. Wir hantieren mit vielen nebeneinander geöffneten Fenstern, scrollbarem Text, Pop-ups. Videos und Musik können wir sehen und hören wann immer wir wollen. Das Tempo hat sich beschleunigt.[2] Bilder reduzieren die Rezeptionszeit. Unzählige visuelle Einflüsse überfordern die Aufnahmekapazität, weshalb Bilder immer origineller, schlichter und auffälliger sein müssen, um aus der Masse herauszustechen. Daher ist das Wissen um die Informationsverarbeitung für Designer von großer Bedeutung. In Zeitungen ist der Platz für Grafiken begrenzt. Je nach Thema und Redakteur werden einige Spalten oder dafür veranschlagt - ganz selten, zu besonderen Anlässen kann sich eine Grafik über zwei Zeitungseiten erstrecken. Für digitale Grafiken gilt diese Platzbeschränkung weniger. Hier hat man zwar immer das gleiche Format, kann sich aber durch Interaktion Informationen hinzu- oder wegschalten. Bisher fand man interaktive Grafiken vor allem auf den Internetportalen von Zeitungen und Zeitschriften. Inzwischen gibt es sie, durch die Verbreitung der Tablet-Computer, auch in den damit einhergehenden Digital-Ausgaben der Zeitungen und Zeitschriften. Einige Verlage beschränkten sich zwar zunächst darauf, eine App für das ipad von Apple anzubieten und den Android-Markt zu vernachlässigen. Da das Zeitunglesen auf dem Tablet aber gerade erst beginnt, wird wohl früher oder später auch noch eine Android-Alternative angeboten werden. Die Zeitungs-Apps bieten meist den kompletten Inhalt der Print-Versionen und stellen noch zusätzliche Multimedia-Angebote zur Verfügung. Dies sind zum einen Audio- oder Video-Dateien, zum anderen Bildergalerien oder Grafiken, in denen man interagieren kann. In diesen Versionen der Infografiken hat man die Möglichkeit mehr Information unterzubringen. Zahlen und Fakten, die in der Zeitung aus Platzgründen weggelassen werden, kann eine interaktive Grafik zusätzlich zur Verfügung stellen ohne die Gefahr überladen zu wirken. Zum Beispiel können auf einem Grafen, der den Verlauf eines Aktienkurses zeigt, Wende-/Maximal-/Minimalpunkte etc. markiert werden. Der Nutzer kann diese anwählen und erfährt was zu diesem Zeitpunkt genau geschah bzw. was dazu führte. Auch Fotos können dabei eingebunden werden, denn der Umfang einer interaktiven Grafik ist prinzipiell (bis auf die Tatsache, dass viele Fotos viele Kilobytes haben und das zu längeren Ladezeiten führt) unbeschränkt. Kleine Animationen, wie z.b. die Änderung der Größe von Balken, die animierte Neusortierung einer Liste oder die Umfärbung einer Fläche, geben den Grafiken einen besonderen optischen Reiz und können auch von Tablet-Prozessoren leicht umgesetzt werden. Zu große und aufwändige Animationen sorgen aber leider oft für Darstellungsfehler, Ruckeln oder im schlechtesten Fall für Abstürze der App (oder des Browsers). 13

13 1.3.1 Datenjournalismus denden Trend im Journalismus. Zwar gibt es schon seit den 1950-er Jahren die Möglichkeit, große Mengen an Informationen mit Rechenmaschinen zu durchsuchen, doch standen damals Technik und Information bei weitem nicht allen Interessenten zur Verfügung. Dies ist heute anders. Wenn man den klassischen Journalismus durch Recherchieren und Belegen von Fakten anhand von Daten kennzeichnen möchte, so ist Datenjournalismus die Umkehrung davon. Denn dabei werden Massen von Daten durchforstet, um am Ende eine Geschichte erzählen zu können. Durch das digitale Zeitalter gibt es unendlich viele Datenanhäufungen, die ohne großen Aufwand öffentlich zugänglich gemacht werden könnten. Doch noch ist es in Deutschland nicht soweit, dass diese Daten jederzeit frei verfügbar sind Daten sollen zugänglich werden Konzept: Open-Data resse sind, frei zugänglich sein müssen. Davon ausgeschlossen sind natürlich personenbezogene oder unter einer Geheimhaltungsstufe stehende Daten (ob diese Kennzeichnungen in jedem Fall gerechtfertigt sind, bleibt hier außen vor). Im Prinzip gilt: mit öffentlichen Geldern finanzierte Datensätze sollten der Allgemeinheit zur Verfügung stehen. Seit dem ist auf Bundesebene das Informationsfreiheitsgesetz in Kraft getreten. Dieses besagt, jeder Bürger hat das Recht, abgeschlossene amtliche Informationen von Bundesbehörden (nach Antragstellung und Bezahlen eines bestimmten Betrages) einsehen zu können ohne dafür eine Begründung abgeben zu müssen. Dies können sowohl Akten aus einem Kellerarchiv sein, als auch Pläne, Videoaufzeichnung oder digital hinterlegte Dokumente.[3][4] Auf Landesebene gilt dieses Gesetz allerdings noch nicht flächendeckend. Zwar haben die meisten Bundesländer inzwischen auch ein Informationsfreiheitsgesetz, so dass die Möglichkeit besteht, Daten aus Länder- und Kommunalbehörden einzusehen. In Bayern, Baden-Württemberg, Hessen, Niedersachsen und Sachsen gibt es ein solches Gesetz bisher allerdings nicht. (Stand März 2012) [5] Abgesehen von diesen fünf Ländern, wurden die Weichen für das OpenGovernment- Vorhaben gestellt. Als nächsten Schritt fordert die Open-Data-Bewegung, dass die Daten maschinenlesbar zur Verfügung stehen. Das heißt zum einen digital und zum anderen in einem nicht-proprietären Format, also in einem Format, das offen und nicht an eine firmeninterne Spezifikation gebunden ist. Zudem sollen alle Daten für jeden Internetnutzer frei zugänglich sein. 14

14 Um diese Forderungen durchzusetzen, gibt es in Deutschland seit ca. einem Jahr das OpenData Network (das Netzwerk zur Förderung von Open Government, Open ten aus Politik und Verwaltung, um eine stärkere Beteiligung der Bürgerinnen und Bürger, um die Bekämpfung von Korruption und darum, dass Politik und Verwaltung [6] Die Demokratie soll gestärkt und das Vertrauen der Bürger in die Politik zurückgewonnen werden. Denn dadurch, dass prinzipiell jedem Bürger alle Informationen zur Verfügung stünden, könnten diese sich durch Zahlen und Fakten selbst über bestimmte Themen informieren und wären nicht mehr abhängig von den Interpretationen der Politiker oder Journalisten. Zwar wären es wohl hauptsächlich die Journalisten, die sich mit - so vom Leser überprüft bzw. nachvollzogen und selbst interpretiert werden. Ein Beispiel sei der Bundeshaushalt des Bundesministeriums für Finanzen. Zwar ist es für Deutschland vergleichsweise fortschrittlich, dass auf der betreffenden Internetseite sehr viele detaillierte Haushalts- und Finanzpläne in Form von PDFs zur freien Verfügung stehen, diese sind jedoch - nach der Definition der Maschinenlesbarkeit - untauglich. Maschinenlesbar bedeutet in diesem Zusammenhang, dass Daten in einer eindeutig strukturierten, tabellarischen Form vorliegen, so dass man sie unkompliziert weiterverarbeiten kann, z.b. in Excel. Oder sie sollten in semistrukturierter Form, also nicht in Tabellenform, sondern per Auszeichnung gekennzeichnet sein (z.b. XML oder JSON).[7] Liegen die Daten im vorgesehenen Format vor, kann man sie mit Hilfe von Statistikwerkzeugen verarbeiten und auswerten oder man kann z.b. mit einer Programmierschnittstelle (Application Programming Interface, kurz: API) regelmäßige Aktualisierungen der Daten auslesen und sie direkt in eine Software einfließen lassen. Dadurch können aus bestimmten Zahlen Diagramme erstellt oder Maximal- und Minimalwerte ermittelt werden. Als maschinenlesbare Formate werden meist Dateien im Format XLS, CSV, XML, RSS oder JSON genannt.[8] Beispiele Open-Data Plattformen Offener Haushalt den Steuergeldern in Deutschland geschieht. Dazu haben die Macher alle frei verfügbaren PDFs des Bundeshaushalts in ein maschinenlesbares Format übertragen und anschaulich und verständlich visualisiert (siehe Abb. 4). Es wird darauf hinge- 15

15 wiesen, dass alle Quellen offen liegen und jeder dazu eingeladen ist, mitzumachen oder die Daten zu überprüfen, denn die Übertragung der Massen an Zahlen und Beschreibungen ist ein durchaus fehleranfälliger Prozess. Abb.4: OffenerHaushalt.de mit allen Bestandteilen des Bundeshaushaltes 2011 (oben) und die Auflistung der Posten am Beispiel des Bundesministeriums für Ernährung, Landwirtschaft und Verbraucherschutz (unten). Jeder Punkt enthält noch weitere Unterteilungen. Städte und ihre Daten Einige Städte haben sich auch schon an die offenen Daten heran gewagt. Ein Vorzeigebeispiel ist Frankfurt. Auf der Seite die auch zur OKF gehört, können alle Bürger detailliert einsehen, wofür die Stadt wie viel Geld ausgibt. Die Daten stehen alle im CSV-Format zum Download zur Verfügung. Nach dem bri- für die Politik Handlungsbedarf besteht. Mit Hilfe von OpenStreetMap werden alle Einträge auf einer Karte platziert und entsprechend ihrer Kategorie eingefärbt (siehe Abb. 5). Andere Nutzer können dann die Beiträge bewerten und kommentieren. Frankfurter Politiker sollen sich inzwischen auch schon am Geschehen beteiligen. Wie viele Initiativen aufgrund der Website tatsächlich umgesetzt wurden, ist schwer zu beurteilen. Es ist aber sicherlich eine gute Methode, Bürger zu motivieren, sich am Stadtgeschehen zu beteiligen.[9][10] 16

16 Abb. 5: Aktuelle Geschehnissen auf der Karte von frankfurt-gestalten.de Ähnliche Ideen hatten u.a.: daten.berlin.de und - entstanden durch das Projekt MOGDy - Munich Open Government Day The Truth about Crime Abb. 6: Die Oxford Crime Map zeigt ein erhöhtes Gewaltaufkommen in der Nacht von Samstag auf Sonntag In Großbritannien, der Heimat von Sherlock Holmes und Miss Marple, wo der Open Data Gedanke schon weiter verbreitet ist, wurde im Auftrag des BBC im Zeitraum von November 2007 bis November 2008 eine Karte erstellt, mit der Kriminalitätsmuster aufgedeckt werden können am Beispiel von der, als besonders durchschnittlich betrachteten Stadt Oxford, an welchen Wochentagen zu welcher Tageszeit besonders viel Kriminalität stattfindet. Die Einfärbungen auf der Karte (wie in Abb. 6 zu sehen) ändern sich mit der Fortbewegung auf der Zeitleiste, entsprechend den Vorkommnissen. Es lässt sich zum Beispiel erkennen, dass während normaler Arbeitstage nur wenige Vorfälle zu verzeichnen sind, außer am Nachmittag, wenn die Schule zu Ende ist und es zu Rangeleien zwischen Schülern kommt. Die Abend- und Nachtstunden des Wochenendes bringen, nach Schließung der Bars ein erhöhtes Aufkommen von Gewalt in der Nähe von Pubs.[11] 17

17 Farmsubsidy.org Ein weiteres Beispiel, bei dem etwas mehr Unerwartetes zum Vorschein kam, ist die welche landwirtschaftlichen Betriebe subventioniert. Noch stehen nicht alle Daten von den Betrieben der verschiedenen EU-Länder zur Verfügung, trotz eines Gesetzes das im April 2011, nach einigem hin und her wegen möglicher Urheberrechtsverletzungen, erlassen wurde[12]. Es lässt sich aber unschwer erkennen, dass es nicht nur die kleinen, auf Unterstützung angewiesenen Betriebe sind, die mit großen Subventionspaketen beliefert werden. Für die Verwendung der Gelder aus den Fonds innerhalb Deutschlands findet man auf einer Seite der Bundesanstalt für Landwirtschaft und Ernährung ( die Empfänger der Agrarfonds in den Jahren 2009 und 2010 mit Namen, Postleitzahl, Gemeinde und dem genauen Betrag. Im Zuge der sogenannten Transparenzinitiative verfolgte die Europäische Union das Ziel, die Verwendung der Agrarfonds zugänglicher und transparenter zu machen. Es soll- - [13] deutlich gemacht werden. Diese Veröffentlichung war allerdings sehr umstritten, da auch kleine Betriebe namentlich genannt wurden. Der Bayerische Agrarminister Helmut Brunner (CSU) verweigerte die Veröffentlichung der Zahlungen, da er den Datenschutz der Landwirte gefährdet sah.[14] Entwicklungszusammenarbeit und Transparenz ten fördert, stellt seit über 30 Jahren internationale Projektionen der Bevölkerung über Wirtschaft, Soziales und Umweltschutz auf. Dadurch können sie feststellen, wie effektiv Maßnahmen z.b. zur Armutsbekämpfung sind und sie dann entsprechend auf andere Länder übertragen.[15] Seit dem 22. April 2010 findet man die erhobenen Daten auf öffentlich und frei verfügbar. Unterteilt in über tausend Indikatoren, stehen alle Daten in maschinenlesbarem Format zur Verfügung. Sie gehen teilweise zurück bis Zudem Abb. 7: Visualisierung der Daten zur Pro-Kopf-CO2-Emission kann man sie sich auf einer Weltkarte, durch entsprechende Einfärbung oder in Form eines Graphen anzeigen lassen (siehe Abb. 7). Die Plattform soll dazu dienen, globale Themen zu veranschaulichen. Dadurch, dass 18

18 jeder sich beteiligen kann, sollen neue innovative Ideen entstehen.[16] Außerdem soll sie Skeptikern der Entwicklungshilfe aufzeigen, was mit den Geldern für Hilfsprojekte geschieht. auch die Weltbank angehört). Die IATI entwickelte einen Standard entsprechend Abb. 8: IATI-Standard zur Veröffentlichung der Daten zur Entwicklungshilfe Abb. 8, wie Dokumente zur Entwicklungshilfe in Zukunft ver öffentlicht werden sollen. So könnten die Daten direkt in entsprechende Visualisierungs - Software einlaufen und sofort ausgewertet werden. Dadurch steigt die Transparenz und somit die Glaubwürdigkeit der Organisationen. Inzwischen halten sich immer mehr Teilnehmer an die IATI-Norm.[17] 19

19 Im November 2011 verkündete Adobe, dass die Weiterentwicklung der sehr verbreite- [18]. Noch ist Flash das meist genutzte Tool zur Umsetzung von Animationen, Games und Videostreaming Abb. 9: Dieser Ausschnitt einer Infografik von Microsoft Tag (März 2011) prophezeit, dass in Amerika schon 2014 das Internet primär auf mobilen Geräten genutzt werden wird. und 99% aller Desktop-Browser (laut eigener Aussage Juli 2011 [19]) verfügen über einen Flash-Player. Doch da der mobile Markt sehr schnell weiter wachsen wird (eine Wachstumsprognose von Microsoft Tag ist in Abb. 9 zu sehen), die Entwicklung dafür aber beendet ist mobile Geräte der Firma Apple hatten von Anfang an keine Flash-Unterstützung wird Flash und somit die beliebte Benutzeroberfläche und die Skriptsprache Action Script immer weniger Verwendung finden. Die Alternative zu Flash, die sogar nativ, also ohne Plugin für einen Player verwendbar ist, ist HTML5. HTML5 ist eine Weiterentwicklung der Hypertext-Auszeichnungssprache (HTML - Hypertext Markup Language) zur Gliederung von Inhalten, die in Webbrowsern dargestellt werden. Die Fünf hinter dem HTML steht aber für mehr als nur die Strukturierung von Elementen - die aber auch deutlich vereinfacht wird. Die Neuerung bezieht sich vor allem auf das vereinfachte Zusammenspiel von HTML, CSS und JavaScript. Auch für CSS wird ein neuer Standard entwickelt: CSS3. Damit werden 3D-Transformationen und Animationen möglich, die vorher, wenn überhaupt, nur mit JavaScript umgesetzt werden konnten. Der Umfang von JavaScript hat sich ebenfalls erweitert und ermöglicht eine noch größere Einbindung des Nutzers durch Interaktion und z.b. client-seitige Datenbanken.[20] Abb. 10: Die Statistik (April 2012) zeigt, dass über die Hälfte der Nutzer veraltete Versionen eines Browsers (hier Internet Explorer) verwenden. Quelle: 20 Diese neue Technologie trifft allerdings bisher auf das Problem, dass viele Internetnutzer veraltete Browser verwenden (wie in dem Diagramm in Abb. 10 am Beispiel des Internet Explorers zu erkennen ist). Auf mobilen Browsern (z.b. Safari, Android Browser) kann man bereits die meisten Funktionalitäten nutzen, im Desktop-Bereich wird es noch ein paar Jahre dauern, bis man bei der Ent-

20 wicklung alte Nicht-HTML5-fähige Browser vernachlässigen kann. Und selbst modernen Browsern fehlen oft HTML5- und CSS3-Implementierungen. Eine hilfreiche Plattform, um herauszufinden, welche Eigenschaften oder Funktionen am Beispiel der CSS3-Methode zur 3D-Transformation, wie unterschiedlich die Unterstützung verschiedener Browser ausfällt. Abb. 11: Caniuse.com bietet Übersichts-Tabellen zur Kompatibilität von HTML5-, CSS3- und SVG- Eigenschaften in mobilen und Desktop-Browsern, hier die CSS3-Methode für 3D-Transformationen Beim Erstellen von HTML5-Anwendungen sollte man deshalb immer eine Fallback- Lösung für ältere Browser einbauen (zumindest beim Erstellen von Seiten, die für ein möglichst großes Publikum zugänglich sein sollten). Bei den Fallback-Lösungen kann es vorkommen, dass nicht alle modernen optischen Elemente umsetzbar sind. Die Seiten sollten aber zumindest dieselben Informationen bieten. Helfer, wie z.b. ob die verwendeten HTML5- oder CSS3-Implementierungen vorhanden sind. Wenn das nicht der Fall ist, werden z.b. JavaScript-Lösung angeboten.[21] Im Mai 2011 forderte das W3C (World Wide Web Consortium) alle Nutzer auf, im [22] Offiziell soll HTML5 zwar erst 2014 vom W3C als Web-Standard eingeführt werden, doch schon jetzt ist die Verbreitung, besonders auf mobilen Geräten, sehr groß. Da Apple sich von Anfang an konsequent gegen Flash auf mobilen Geräten entschieden hatte, sind sie sicherlich mitverantwortlich für die schnelle Verbreitung von HTML5.[23] 21

21 2.2.1 Flash-Umwandlungs-Tools Für diejenigen, die dennoch lieber mit Flash arbeiten oder bereits vorhandene Flash- Animationen weiter verwenden möchten, gibt es Anwendungen, die anbieten, eine - laby findet man eine lange Liste von Features, die nicht konvertiert werden, darunter auch ActionScript.[24] Swiffy konvertiert zwar ActionScript, aber nur Version 2.0 (aktuell ist Version 3.0). Der dabei entstehende Code ist so umfangreich, dass man damit kaum weiter arbeiten kann. Dargestellt werden kann das Ergebnis am besten in Webkit-Browsern mit SVG-Unterstützung (z.b. im mobilen Safari-Browser). Als Fallback-Lösung für iphone oder ipad, z.b. für ein auf Flash basierendes Werbebanner, kann eine solche Anwendung sinnvoll sein, für den plattformübergreifenden Einsatz ist sie aber ungeeignet HTML5-Benutzeroberflächen Um von vornherein HTML5-Anwendungen zu erstellen, entstehen im Moment verschiedene Benutzeroberflächen, die versuchen Flash abzulösen. Es folgt ein Überblick über drei dieser Oberflächen, von denen man besonders viel hört. (Beispieldateien befinden sich auf der beigelegten CD): Adobe Edge Adobe entwickelt zur Zeit eine HTML5-Be- native zu Flash. Da es sich noch in der Entwicklungs-Phase befindet (Stand: April 2012), kann man sich eine kostenlose Test- Version über Adobe Labs herunterladen. Momentan ist sie bei Version 5.1. Die Bedienung wirkt auf den ersten Blick verständlich, wenn man bereits mit Programmen von Adobe gearbeitet hat, da die Optik stark an ihre anderen Programme erinnert (siehe Abb. 13). Elemente werden erzeugt, indem man sie auf die Bühne zieht (Rechtecke, abgerundete Rechtecke und Text), dort kann man sie verschieben und frei skalieren, in der Timeline bekommt jedes Element eine Ebene. Es können allerdings keine strukturierenden Ordner erstellt werden, daher wird die Auflistung sehr schnell unübersichtlich. Jedes Element kann nun in der Timeline durch Setzen von die Style-Eigenschaften zum aktuell ausgewählten Element sichtbar und können per Eingabe angepasst werden. 22

22 Abb.13: Benutzeroberfläche von Adobe Edge, mit einer Test-Animation Wie in Flash können jedem Objekt Klick-, Mouseover-, Mousedown-, usw. Funktionen (siehe Abb. 14) gibt es eine Auswahl von Standard-Funktionen, die man verwenden kann, aber auch ein selbst geschriebener JavaScript-Code kann eingetragen werden. Als Ergebnis einer in Edge angelegten Animation erhält man eine HTML-Datei, drei Java Script-Dateien und einen Ordner mit den nötigen Bibliotheken (jquery, jqueryeasing, Edge und Json). Die JavaScript- Dateien enthalten alle verwendeten Elemente und deren Eigenschaften (es gibt keine extra CSS-Datei) und beschreiben die Animationsvorgänge und Events. Die HTML- Datei enthält lediglich einen Skript-Verweis auf die Preload-JS-Datei und einen Div- Container mit entsprechender ID und Klasse. Dadurch könnte man ein Edge-Projekt sehr einfach auch in eine bereits vorhandene HTML-Datei einbinden. In der Actions- JS-Datei können bei Bedarf weitere Funktionen ergänzt werden. Verwendbar ist der erzeugte Code für HTML5-fähige Browser, wobei der Umfang an HTML5-Unterstützung, wie schon erwähnt, bei unterschiedlichen Browsern variiert und somit die Darstellung und der Funktionsumfang verschieden sein kann. 23

23 Fazit: Das Zielpublikum von Edge sind Webdesigner, die gerne mit einer Benutzeroberfläche arbeiten wollen. Allerdings ist sehr deutlich zu erkennen, dass sich Edge noch in der Entwicklungsphase befindet. Viele Möglichkeiten, die man aufgrund von Erfahrungen mit anderen Adobe Programmen erwartet, sind noch nicht gegeben. Der entstehende Quellcode ist unübersichtlich und scheinbar unnötig groß. Darstellen können nur moderne Browser die so erzeugten Anwendungen, deshalb ist die Verwendung von Edge für Animationen, die einem möglichst großen Publikum zugänglich sein sollen, erst einmal nicht zu empfehlen. Sencha Animator Abb. 15: Logo der Soft- che zur Erstellung von Animationen und interaktiven Objek- Testversion zum freien Download zur Verfügung, die Vollversion kostet ca. 200 Dollar. Der Sencha Animator wirkt übersichtlicher als die Testversion von Edge. Wie bei Edge erzeugt man Elemente dadurch, dass man sie auf die Bühne zieht, dort kann man sie verschieben und skalieren. Man kann Elemente ineinander verschachteln und per Drang&Drop als auch durch genaue Zeitangaben verschoben werden. Für verschiedene Animationen legt man Szenen an, zu denen bei einem bestimmten Aufruf gesprungen werden kann. Abb. 16 zeigt die Benutzeroberfläche mit einem Beispiel- Projekt. 24

24 Jedem Element können einfache Klick-/Hover- etc. Funktionen zugeordnet werden, schreiben. Erzeugt wird eine einzige HTML-Datei, in deren head alle Java Script- und CSS-Befehle stehen. Aber auch hier entstehen wieder sehr viele Funktionen und Elemente, die für die Ausführung des Codes unnötig scheinen. Die Darstellung in älteren Browsern funktioniert auch hier nicht. Fazit: geschriebe nem CSS ist einfacher und die Oberfläche ist insgesamt übersichtlicher. Trotzdem auch hier: noch unterstützen zu wenige relevante Browser die Darstellung. lich. Daher ist der Einsatz bisher nicht sehr empfehlenswert. Tumult Hype Abb. 17: Logo der Soft- OS). Dies ist ebenfalls eine Software, die das Erstellen von HTML5 einfach und anschaulich machen soll. Sie kostet im AppStore ca. 40 Euro. Die Benutzeroberfläche hat die gleichen Komponenten, wie die anderen zwei Tools, auch hier kann man Elemente ziehen und skalieren, Szenen anlegen und Keyframes setzen. Selbst geschriebene JavaScript-Funktionen können im integrierten Editor einfach eingefügt werden. Abb. 18 zeigt die Benutzeroberfläche mit einer Test-Animation. 25