Flash & HTML5 – Grundsätzliches
Adobe Flash ist ein beliebtes Browser-Plug-In für die Darstellung interaktiver Inhalte wie z.B. Foto-Alben, Slideshows, Filme, Animationen, Werbebanner, E-Learning, Spiele oder virtuelle Rundgänge. Für die korrekte Anzeige muss der (Adobe) Flash Player installiert sein. Auf mobilen Geräten (Google Android, iOS) funktioniert dieser im Allgemeinen nicht und man sollte davon ausgehen, dass die Webseite nicht korrekt angezeigt wird.
Der Flash Player kann prinzipiell Zugriff auf Hardware-Komponenten wie Webcam oder Mikrofon erhalten. In diesem Zusammenhang ist es besonders beunruhigend, dass der Player eine Vielzahl von kritischen Sicherheitslücken aufweist, die von Hackern für diverse Angriffsszenarien missbraucht werden können. Um diesen Punkt zu veranschaulichen: aktuell sind über 850 Sicherheitslücken (höchste Stufe) bekannt [1].
Unabhängig davon hat Adobe bereits das Support-Ende von Flash auf 2020 festgelegt [2]. Spätestens bis zu diesem Zeitpunkt muss die Migration auf eine andere Technologie abgeschlossen sein. Aber was ist die Alternative?
Die Alternative zu Flash ist HTML5, eine „Hypertext markup“ Sprache mit der elektronische Dokumente mit zusätzlichen Inhalten wie z. B. Videos angereichert werden können. Der entscheidende Vorteil dabei ist, dass dies ohne die Installation irgendeines Plug-Ins funktioniert, da der Browser die für die Verarbeitung der Seiten benötigten Werkzeuge bereits mitbringt.
An dieser Stelle bleibt nur zu klären, ob der jeweilige Browser HTML5 unterstützt, wobei das für die aktuellen Versionen der Standardbrowser (Opera, Firefox, Edge, Safari, Chrome) schon gilt. Im Zweifelsfall kann man das auch ganz leicht online überprüfen [3]. Problematisch wird es nur, wenn man aus anderen Gründen noch ältere Browser-Versionen einsetzt (also z. B. ältere Versionen des Internet Explorers). Diese Fälle müssen zwar konkret analysiert werden, aber, grundsätzlich ist es aus Sicherheitsgründen immer eine gute Idee, möglichst aktuelle Browser-Versionen zu verwenden.
Die Migration von Flash-Inhalten ist durch das bereits erwähnte Support-Ende faktisch unabwendbar geworden. Der frühzeitige Umstieg auf HTML5 lohnt sich aber auch dahingehend, als dass damit Multimedia-Inhalte wesentlich natürlicher in die Seite integriert werden können. Insbesondere entfällt auch das erwähnte Darstellungsproblem auf Smartphones und Tablets. Die geräteunabhängige Anzeige lässt sich dabei durch die Implementation eines „responsive Designs“ verbessern. Das bedeutet, man verwendet ein einziges Design, welches sich dann automatisch an die Gegebenheiten des jeweiligen Geräts anpasst [4].
Viele der Neuerungen von HTML5 betreffen die semantische Ebene von Dokumenten [5, 6] und unterstützen damit die Lesbarkeit der Seite für Suchmaschinen. Zum Beispiel gibt es neue Hierarchie-Elemente (<header>, <footer>, <section>), mit denen man Dokumente besser strukturieren kann. Zusätzlich machen sogenannte Microdata-Elemente den Inhalt für Suchmaschinen verständlicher. Im absoluten Idealfall kann man damit sogar die Webseiten-Anzeige in den Suchmaschinenergebnissen beeinflussen [7]. Die Standort-Bestimmung (Geo-Lokalisierung) ist ein weiteres spannendes Feature, da man damit die Webseite direkt an den Aufenthaltsort des Benutzers anpassen kann. Die Genauigkeit verbessert sich dabei, wenn GPS-Daten verfügbar sind (daher z.B. auf Smartphones), und umfasst auch Zusatzinformationen wie z.B. Geschwindigkeit oder Höhe über Meeresgrund.
Die Migration von Flash nach HTML5
Wie bereits erwähnt, lassen sich mit Flash recht unterschiedliche Multimedia-Formate darstellen. Daraus folgt auch unweigerlich, dass es kein Patent-Rezept für die Migration von Flash-Inhalten gibt.
Vielmehr besteht der erste wichtige Schritt in einer Bestandsaufnahme, geleitet von folgenden Fragen:
- Welche Art von Inhalt (Foto-Album, Tag-Cloud, Filme, E-Learning System) soll migriert werden?
- Sind die Originaldateien (z.B. im JPEG, MP4-Format) bzw. Flash-Source-Files (FLA) noch vorhanden?
- Soll der Inhalt überarbeitet bzw. neue Elemente hinzugefügt werden?
- Soll das Design auf mobile Endgeräte erweitert werden?
Bei umfangreicheren Projekten (z.B. E-Learning Systemen) muss man zusätzlich eine Risiko-Abschätzung durchführen [8, 9]. Die Kern-Idee dabei ist, dass man das Gesamtsystem in kleinere Blöcke unterteilt, und deren Migration priorisiert. Zum einen bringt das den offensichtlichen Vorteil, dass wichtige System-Komponenten rasch in dem neuen Format zur Verfügung stehen. Zum anderen wird dadurch aber auch die Migration besser testbar. Insbesondere kann man zunächst einmal nur eine kleinere Komponente umstellen (als Pilot-Projekt) und dann das neue Design mit dem Feedback von Test-Usern iterativ verbessern.
Die technische Kernfrage ist: Sollen bestehende Inhalte konvertiert oder neu gemacht werden? Wiederum kommt es hierbei auf den Inhalt und die Komplexität der Flash-Komponente an. Für einfache Videos und Animationen kann es oftmals schon ausreichen, wenn man das Element mit einem Screen Recorder abfilmt [10]. Tag-Clouds lassen sich ebenso relativ einfach mit HTML5 umsetzen. Für 3D-Panorama bzw. virtuelle Touren bietet sich die Neu-Konvertierung mit einem der gängigen Standardtools an. Das setzt aber voraus, dass man das Ausgangsmaterial noch hat. Für die Neu-Implementation einer Animation mit ActionScript kann die Analyse der Flash Source-Dateien hilfreich sein. Es gibt auch die Möglichkeit SWF-Dateien nach JavaScript zu konvertieren. Das Verfahren weist aber eine gewisse Komplexität auf, und die Sinnhaftigkeit hängt von den bereits erwähnten Randbedingungen (Umfang, Wartbarkeit, Erweiterbarkeit, usw.) ab [11]. Deswegen geht man am besten iterativ vor: Zuerst probiert man die Migration anhand einer Beispielkomponente aus und überprüft das Ergebnis.
Je nach Art der Flash-Komponente gibt es weitere Punkte zu bedenken. Bei Videos stellt sich die Frage, ob man die Inhalte schützen bzw. Untertitel verwenden möchte [12]. Zudem gibt es die interessante Möglichkeit, die Videos adaptiv zu streamen. Das bedeutet, dass sich die Qualität an die Bandbreite anpasst). Bei Werbebannern ist es wichtig, eventuell vorhandenen Lizenzen von Firmen-Schriftarten um die Nutzung in Online-Anzeigen zu erweitern [13]. Bei eLearning-Systemen besteht die zentrale Herausforderung in der Umgestaltung auf die geräteunabhängige Webseiten-Nutzung (z.B. mit Hilfe des bereits erwähnten „responsive Designs“) [14].
Last but not least, stellt sich in komplexeren Migrations-Szenarien noch die Frage nach den geeigneten Tools. Zum Beispiel, benötigt man für die Konvertierung von SWF-Dateien nach JavaScript zusätzliche Decompiler und Transpiler [11]. Die Erzeugung von neuen virtuellen Touren, Werbebannern oder eLearning-Systemen benötigt ebenso dementsprechende Software [13, 15, 16]. Da dies unter Umständen mit neuen Lizenzkosten bzw. Schulungen verbunden ist, sollte man genügend Zeit für die Evaluierung marktüblicher Produkte einplanen.
Fazit
Sofern man einen bestimmten Flash-Inhalt noch über einen längeren Zeitraum Nutzen möchte, ist die Umstellung auf HTML5 zwingend erforderlich. Die Neu-Implementation in HTML5 ist praktisch immer möglich. Alternativ dazu, kann man in vielen Fällen bestehende Flash-Inhalte direkt konvertieren. Ein wichtiger Aspekt für die Wahl der richtigen Migrations-Strategie ist die Komplexität der Flash-Komponente. Bei umfangreicheren Anwendungen empfiehlt es sich, diese aufzuteilen und die Umstellung in einem Pilot-Projekt zu testen.
Die Migration von Flash-Inhalten bürgt zwar einige Herausforderungen, aber auch die Chance, dass man die korrekte Darstellung der Homepage auch auf mobilen Geräten sicherstellt.
Referenzen
[4] www.konversionskraft.de/strategie/strategische-entscheidungshilfe-responsive-vs-adaptive-webdesign.html
[5] www.tutorialspoint.com/html5/html5_quick_guide.htm
[6] www.selfhtml5.org/html5-features/
[7] www.massiveart.com/blog/bessere-suchergebnisse-dank-html5-microdata
[8] www.tandemseven.com/technology/flex-to-html5-migration-5-step-framework/
[9] www.eidesign.net/flash-html5-migration-7-tips-step-learning-experience/
[10] www.e-teaching.org/news/eteaching_blog/wege-weg-von-flash-videos-und-animation-konvertieren-und-ersetzen
[12] developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video/Planning
[13] www.monotype.com/de/aktuell/best-practice/der-wechsel-von-flash-zu-html5/
[14] elearningindustry.com/flash-to-html5-toolkit-migration
[15] www.g2crowd.com/categories/virtual-tour
[16] elearningindustry.com/the-ultimate-list-of-html5-elearning-authoring-tools
