Html5 versus Adobe Flash

42
1 M. Steinberg HTML5 versus Flash 07.12.2011 Monika Steinberg 07. Dezember 2011 HTML5 versus Flash Über die Zukunft von Multimedia in interaktiven Anwendungen Quelle: http://vimeo.com/11551721

description

Über die Zukunft von Multimedia in interaktiven Anwendungen.

Transcript of Html5 versus Adobe Flash

Page 1: Html5 versus Adobe Flash

1M. Steinberg HTML5 versus Flash 07.12.2011

Monika Steinberg

07. Dezember 2011

HTML5 versus FlashÜber die Zukunft von Multimedia in interaktiven Anwendungen

Quelle: http://vimeo.com/11551721

Page 2: Html5 versus Adobe Flash

2M. Steinberg HTML5 versus Flash 07.12.2011

Ablauf

Einleitung Multimedia im Web Warum Flash versus HTML5?

Beispiele: Flash oder HTML5?

Was ist Adobe Flash? Multimedia in Flash

Was ist HTML5? Multimedia in HTML5

HTML5 und Adobe Flash im Vergleich

Audio und Video in HTML5

Zusammenfassung und Ausblick

Page 3: Html5 versus Adobe Flash

3M. Steinberg HTML5 versus Flash 07.12.2011

Einleitung

Page 4: Html5 versus Adobe Flash

4M. Steinberg HTML5 versus Flash 07.12.2011

Einleitung: Multimedia im Web

Immer mehr interaktive Anwendungen im Web: Online-Communities, Spiele, Groupware, Wikis, Blogs, …

Jede zweite Webapplikation enthält Audio- und Video-Inhalte: YouTube, Last.fm, Vimeo, MyVideo, Soundcloud, Mixcloud, ... drehen

sich auschließlich um Multimedia.

Außer über Adobes Flash-Technologie (Flashplayer-Plugin im Browser) bisher keine brauchbare Möglichkeit, Ton und Film als native Objekte (ohne Plugin) in HTML einzubetten.

HTML5 greift aktuell Problem mit neuen Media-Elementen auf: erstmals möglich, Bewegtbild und Ton ohne Plugins von

Drittanbietern zuverlässig in Webseiten einzubetten.

Page 5: Html5 versus Adobe Flash

5M. Steinberg HTML5 versus Flash 07.12.2011

Einleitung: Warum Flash versus HTML5?

Adobe Flash als kommerzielle, geschlossene Technologie schon lange kritisiert.

Interessante Entscheidung im November 2011: Adobe entwickelt kommerzielles Flashplayer-Plugin für mobile Geräte

nicht weiter. Gerade mobiler Markt boomt. Adobe setzt auf HTML5 für mobile Endgeräte.

Langanhaltender Glaubenskrieg zwischen Apple und Adobe bald zu Ende?

Vision „freies Internet“ verträgt eigentlich keine proprietären Standards aber Adobe Flash in vergangenen Jahren in vielen Anwendungsfällen

als Quasi-Standard etabliert.

Page 6: Html5 versus Adobe Flash

6M. Steinberg HTML5 versus Flash 07.12.2011

Wer von Ihnen hat schon mit Flash gearbeitet?

Page 7: Html5 versus Adobe Flash

7M. Steinberg HTML5 versus Flash 07.12.2011

Und wer mit HTML5?

Page 8: Html5 versus Adobe Flash

8M. Steinberg HTML5 versus Flash 07.12.2011

Flash oder HTML?

Page 9: Html5 versus Adobe Flash

9M. Steinberg HTML5 versus Flash 07.12.2011

Beispiele: HTML5 oder Flash?

Beispiel 1: 9elements

Beispiel 2: Is your data safe?

Page 10: Html5 versus Adobe Flash

10M. Steinberg HTML5 versus Flash 07.12.2011

Einleitung: Neue Möglichkeiten von HTML5

Neue Möglichkeiten von HTML5 stellen Flash erneut auf die Probe.

Wird Adobes Eigenentwicklung künftig noch gebraucht? Auseinandersetzung zwischen Apple und Adobe um Flash auf iPhone

OS hat Thema wieder hochgebracht. Aktuell sogar Occupy Flash und Occupy HTML Bewegung.

Beeinflusst Entwicklung, Werkzeuge und Techniken ininteraktiven Anwendungen und bei Erstellung von Multimediainhalten im Informationsmanagement enorm.

Browser als Anwendungsplattform nicht mehr nur für statische

Webseiten. HTML5 hieß vorher Web

Applications 1.0. Viele neue Elemente für

komplexere Webseiten.

Page 11: Html5 versus Adobe Flash

11M. Steinberg HTML5 versus Flash 07.12.2011

Was ist Adobe Flash?

Page 12: Html5 versus Adobe Flash

12M. Steinberg HTML5 versus Flash 07.12.2011

Was ist Adobe Flash?

Kommerzielle Plattform zur Programmierung und Darstellung multimedialer, interaktiver und animierter Inhalte Video, Audio, Vektorgrafiken, Rastergrafiken, 3D mit hohem Interaktivitätsgrad.

Bidirektionales Streaming von Audio- und Videoinhalten.

Verarbeitung von Nutzereingaben über Maus, Tastatur, Mikrofon und Kamera.

Objektorientierter Skriptsprache ActionScript 3.0.

Darstellung von 3D-Inhalten über Stage3D-API.

Proprietäres, kostenlos verfügbares Abspielprogramm Adobe Flash Player (Browser-Plugin) erforderlich.

Offene Web-Standards (HTML5, AJAX, CSS3) sowie Microsoft Silverlight, OpenLaszlo, JavaFX von Oracle konkurrieren mit Flash.

Page 13: Html5 versus Adobe Flash

13M. Steinberg HTML5 versus Flash 07.12.2011

Flash und Multimedia

Veröffentlichungsformat SWF mit dynamisch erzeugten Vektorgrafiken, Animationen und Sounds. Hohe Komprimierung, geringe Dateigröße.

Alle gängigen Dateiformate integrierbar: Bildformate wie JPG oder PNG. Videoformate wie MOV, AVI oder MPEG. Audioformate wie WAV oder MP3.

Verbreiteter Einsatz als Basis für Media-Player im Internet durch Flash-Video-Format FLV Z.B. bei YouTube (Wechsel zu WebM in Arbeit). Qualitativ hochwertige Übertragung von Videos. Übertragung in High Definition durch H.264-Standard.

Page 14: Html5 versus Adobe Flash

14M. Steinberg HTML5 versus Flash 07.12.2011

Was ist HTML5?

Page 15: Html5 versus Adobe Flash

15M. Steinberg HTML5 versus Flash 07.12.2011

Was ist HTML5?

Textbasierte Auszeichnungssprache Hyper-Text-Markup-Language für Strukturierung von Dokumenten. Semantische Auszeichnung von Texten, Bildern und Hyperlinks. Von W3C (World Wide Web Consortium, z.B. Tim Berners-Lee) und

WHATWG (Web Hypertext Application Technology Working Group, AG großer Browserhersteller Apple, Mozilla, Opera und Google) entwickelt.

Nachfolger von HTML4 Zur Zeit noch in Entwicklung. Ausgereifte Entwürfe zweier Entwicklerteams liegen vor. Noch keine fertige Empfehlung des W3C (draft).

Ersetzt Dokumentbeschreibungsstandards HTML 4.01, XHTML 1.0 und DOM HTML Level 2.

Neue Funktionalitäten insbesondere für Video, Audio und dynamische 2D-/3D-Grafiken von HTML4 vorher nicht direkt unterstützt.

Page 16: Html5 versus Adobe Flash

16M. Steinberg HTML5 versus Flash 07.12.2011

Web Accessibility Initiative – Accessible Rich Internet Applications

JavaScriptOptimierung – Threads für JavaScript

Scalable Vector Graphics

Web GraphicsLibrary

Page 17: Html5 versus Adobe Flash

17M. Steinberg HTML5 versus Flash 07.12.2011

Multimedia in HTML5

JavaScript-Bibliotheken wie Media-API für Audio und Video, jQuery für Effekte, Drag-And-Drop, Offline-Storage, File-API, Geolocation-API Viele Neuerungen über JavaScript, nicht über HTML.

Eine der größten Attraktionen in HTML5 Canvas-Element (Leinwand) als dynamische 2D-Zeichenfläche. Fläche, auf der mittels JavaScript gezeichnet wird:

Canvas allein macht nichts. Weite, aber nicht 100%tige Unterstützung aller Browser. Animationen, Diagramme, eigene Interface-Elemente, Videos manipulieren.

WebGL für 3D Web Graphics Library Nicht direkt HTML5 sondern andere Spezifikation. Bestandteil von Webbrowsern für hardwarebeschleunigte 3D-Grafiken direkt

im Browser – ohne zusätzliche Erweiterungen. 3D-Programmierschnittstelle auf Basis von OpenGL mit JavaScript.

Page 18: Html5 versus Adobe Flash

18M. Steinberg HTML5 versus Flash 07.12.2011

Neues in HTML5

Neue Funktionalitäten für Bild, Audio und Video: Native Videounterstützung, native Audiounterstützung, lokaler Speicher, dynamische 2D- und 3D-Grafiken.

Video-Erweiterung von HTML5 als offener, frei zugänglicher Standard konkurriert mit Adobe Flash beim Abspielen von Videos.

Zusätzlich neue semantische HTML-Elemente, Formular Widgets, DOM Erweiterung, Dateiverarbeitung, u.v.m.

Offline-Webanwendungen möglich.

Page 19: Html5 versus Adobe Flash

19M. Steinberg HTML5 versus Flash 07.12.2011

Welche Vor-/Nachteile sehen Sie bei Flash gegenüber HTML5?

Page 20: Html5 versus Adobe Flash

20M. Steinberg HTML5 versus Flash 07.12.2011

HTML5 und Flash im Vergleich

Page 21: Html5 versus Adobe Flash

21M. Steinberg HTML5 versus Flash 07.12.2011

Vorteile von Flash

Über Plugin keine Probleme mit Browserkompatibilität. Effektivere Cross-Browser-Entwicklung.

Einfaches Einbetten von Multimedia-Content wie Animationen, Audio, Video.

Stabile Plattform mit weit verbreitetem Plugin. Ausgereifte Werkzeuge und Entwicklungsumgebungen

Z.B. Adobe Flex oder Air. ActionScript inzwischen deutlich mächtiger als JavaScript

Entwicklerhilfen wie z.B. Code Completion, Refactoring. 3D-Unterstützung ausgereift und weiter auf Vormarsch

Stage3D-API (Molehill) mit 3D-Hardwareunterstützung. Über DirectX (Windows) oder OpenGL (Linux) bzw. softwarebeschleunigt.

Auslesen und Ansteuern von Ausgabegeräten in Echtzeit, Multi-Touch-Anwendungen, Motion-Steuerung und komplexe Interfaces möglich.

Schnelle Weiterentwicklung durch kommerziellen Hintergrund.

Page 22: Html5 versus Adobe Flash

22M. Steinberg HTML5 versus Flash 07.12.2011

Nachteile von Flash

Proprietäres, geschlossenes Format: Adobes kommerzielle Eigenentwicklung. Plugininstallation in Form von Flashplayer nötig.

Mangelnde Performance für Nicht-Windows-Nutzer.

Sicherheitslücken über Plugin.

Kein Flashplayer für iPhone/iPad.

Auffindbarkeit von Informationen problematisch über kompiliertes swf-Format: Suchmaschinenunfreundlich, Problem der Indexierung.

Stage3D-API in Konkurrenz mit offenem Standard WebGL.

Page 23: Html5 versus Adobe Flash

23M. Steinberg HTML5 versus Flash 07.12.2011

Vorteile von HTML5

Keine Plugins mehr notwendig für Multimedia.

Offener Standard wird über W3C und WHATWG weiter entwickelt.

Vorantreiben des Übergangs zu wohlgeformten Dokumenten.

Integration semantischer Standards.

In meisten Browsern bereits (wenn auch unvollständig) implementiert.

Suchmaschinenfreundlich über Metadaten – auch bald für semantische Suche.

In Zukunft universal auf allen Endgeräten und mit Inhalt in allen Weltsprachen verwendbar.

Page 24: Html5 versus Adobe Flash

24M. Steinberg HTML5 versus Flash 07.12.2011

Nachteile von HTML5

Nicht alle HTML5-Funktionalitäten in allen Browsern verfügbar Noch keine fertige Empfehlung des W3C - geplant für 2014 bzw. 2022.

Anhaltende Cross-Browser-Problematik auch mit CSS3 Erhöhter Aufwand über mehrere Versionen und Browserweichen.

HTML5-Spektrum mit JavaScript-APIs sehr komplex. Zwei Entwicklerteams mit W3C und WHATWG. Kein Standard für Audio/Video-Codecs – wie eigentlich geplant. Auch proprietäre Techniken wie Canvas enthalten:

Erst Teil von Mac OS und Safari, Mangel an Zugänglichkeit über Screenreader.

JavaScript-Sicherheitslücken über Cross-Site-Scripting.

Noch keine ausgereiften und stabilen Entwicklungsumgebungen verfügbar (z.B. Adobe Edge neu).

JavaScript bietet noch keine ausgereifte 3D-Technologie (evt. mit ECMA-Scipt 5.0).

Page 25: Html5 versus Adobe Flash

25M. Steinberg HTML5 versus Flash 07.12.2011

Audio und Video in HTML5

Page 26: Html5 versus Adobe Flash

26M. Steinberg HTML5 versus Flash 07.12.2011

Audio-Video-Funktionalitäten: Flash

Flashplayer-Plugin fasst problemlos alle gängigen Video- und Audioformate

zusammen und spielt sie ab. Video nicht mit vollem Hardwarezugriff abspielbar. Performance-Einbußen.

2D-Vektorgrafiken, 2D/3D-Animationen und Interaktion: Grafische Werkzeuge und All-In-One-Entwicklungsumgebung. Umfangreiche und komfortable Zeichenwerkzeuge:

Insbesondere mit Grafik-Tablett für Freihand-Animationen oder Cartoons.

Visuelle, zeitleistenbasierte Anordnung von Bewegtbild und Audio. Objektorientiere Programmiersprache ActionScript 3.0 sehr

mächtig inzwischen. Eigene 3D-API Stage3D (Molehill) mit 3D-Hardwareunterstützung.

Page 27: Html5 versus Adobe Flash

27M. Steinberg HTML5 versus Flash 07.12.2011

Audio-Video-Funktionalitäten: HTML5

HTML5 (ohne Plugin und zusätzliche Codecs) Audio- und Video-Inhalte direkt aus Dokument referenzierbar:

Im Browser verfügbar und direkt manipulierbar über JavaScript. Oberfläche mit CSS einfach anpassbar - Flash-Videoplayer-Anpassungen

oft schwierig.

Standardisierung von Audio/Video-Codecs nicht so schnell zu erwarten:

Theora Video und Vorbis Audio in Ogg Containern (offene Standards) geplant, aber wieder verworfen.

Dynamische 2D/3D-Grafiken und Animationen über JavaScript, WebGL und Canvas-Element: Oft erhöhter Programmieraufwand und viele verschiedene APIs. 3D: Nicht ausreichende Funktionalitäten und teils schlechte

Performance. Cross-Browser-Unterstützung noch unkomplett.

Page 28: Html5 versus Adobe Flash

28M. Steinberg HTML5 versus Flash 07.12.2011

Neue HTML5 Elemente: <audio> und <video>

Direktes Einbinden und Abspielen von Audio- und Videodateien in reinem HTML.

Audio- und Videosteuerung über JavaScript Media-API.

Audio- und Video-Elemente als native Browserobjekte ohne externes Plugin oder zusätzlichen Codec.

Dateiauswahl nach Media-Typ für Video und Audio: Verschiedene Dateitypen und Codecs bereitstellen. Mehraufwand über Konvertierung in verschiedene Formate bei Video

und Audio (Werkzeuge verfügbar, z.B. Miro Video Converter). Browser überprüft eigenständig, was abspielbar ist.

Z.B. Mp4, WebM, Ogg, mp3, wav.

Page 29: Html5 versus Adobe Flash

29M. Steinberg HTML5 versus Flash 07.12.2011

Multimedia-Dateiformate im Browser

Codec Firefox 3.5+

Safari 4+

Chrome 3+

Opera 10.50+

IE 9 IE 6-8

Theora/Vorbis (OGG) ja nein ja ja nein nein

H.264/AAC (MPEG-4) nein ja ja nein ja nein

MP3 nein ja ja nein ja nein

WAV ja ja ja ja nein nein

WebM ja (v.4) nein ja ja nein nein

Codec-Problematik aus Browser-Giganten-Streit hier zu erkennen: Offenes OGG-Containerformat wenig unterstützt.

Noch nicht rundum zufriedenstellend. Gewisser Mindestumfang unterstützt.

Angaben basieren auf: HTML5, Peter Kröner, 2011.

Page 30: Html5 versus Adobe Flash

30M. Steinberg HTML5 versus Flash 07.12.2011

Beispiele HTML5-Elemente: <audio>

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mp3" />

Your browser does not support the audio element.

</audio>

</body>

</html>

Page 31: Html5 versus Adobe Flash

31M. Steinberg HTML5 versus Flash 07.12.2011

Beispiele HTML5-Elemente: <video>

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

Your browser does not support

the video tag.

</video>

</body>

</html>

Page 32: Html5 versus Adobe Flash

32M. Steinberg HTML5 versus Flash 07.12.2011

Beispiele HTML5-Elemente:<canvas>

<!DOCTYPE html><html><body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.</canvas>

<script type="text/javascript“>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>

</body></html>

Page 33: Html5 versus Adobe Flash

33M. Steinberg HTML5 versus Flash 07.12.2011

Zusammenfassung

Page 34: Html5 versus Adobe Flash

34M. Steinberg HTML5 versus Flash 07.12.2011

Zusammenfassung: HTML5 versus Flash

HTML5 wahrscheinlich schnell auf mehr Plattformen verfügbar, als Flash: Innovative Alternative und Erweiterung zu HTML4.

Flash auf verfügbaren Plattformen fast 100% kompatibel: War bei HTML/CSS noch nie der Fall.

Komplexe Animationen wie Spiele, Touch-Interaktion, Ansteuerung externer Geräte, aufwendige Effekte, Motion Steuerung, 3D in HTML5 noch Zukunftsmusik. HTML5 kann teilweise das, was Flash bereits seit Jahren kann.

Flash wird zu berechtigter Nischenlösung: Orientiert sich immer mehr zu 3D und Spielesektor.

Page 35: Html5 versus Adobe Flash

35M. Steinberg HTML5 versus Flash 07.12.2011

Zusammenfassung: Einsatz von HTML5

HTML5 für einige Funktionen geeignet, die bisher nur mit Flash sinnvoll waren: Kleinere Animationen mit HTML5 gut möglich mittels Canvas. Native Audio-/Videoeinbindung sehr einfach.

HTML5 faktisch in fertigem Zustand und nutzbar: Mit Release Candidate vergleichbar.

HTML5 in meisten Browser (wenn auch unvollständig) implementiert.

Verwendung von HTML5-Teilen bereits heute: Ggf. mit Fallback. Empfehlung von W3C. Prüfung Browserkompatibilität immer notwendig.

Page 36: Html5 versus Adobe Flash

36M. Steinberg HTML5 versus Flash 07.12.2011

Zusammenfassung: Komplexe interaktive Anwendungen Flash und HTML5 in Zukunft immer mehr Schnittmengen:

Keine so schnelle Verdrängung sondern Nebeneinander. Neuverteilung und Verschiebung Aufgabenbereiche.

Flash in naher Zukunft noch überlegen bei: Spieleentwicklung (insbesondere Browsergames).

ca. 70 Prozent aller Browserspiele sind mit Flash erstellt. 9 von 10 der Topgames auf Facebook entstanden mit Flash. Google+ verlässt sich bei 70 Prozent angebotener Spiele auf Adobe-

Technologie. Komplexen Interaktionsszenarien. Produkt- und Markeninszenierung (Marketing, Corporate Media)

mit Sound, Animation, Video und 3D.

HTML5 unzweifelhaft auf Vormarsch.

Page 37: Html5 versus Adobe Flash

37M. Steinberg HTML5 versus Flash 07.12.2011

Ausblick: Zukunft HTML5 für Audio-Video

Audio-Video Codec-Problematik wegen Streit der Browsergiganten. Cross-Browser-Lösung mit Fallback nötig. Verwendung fertiger HTML5-Mediaplayer empfohlen (z.B.

SublimeVideo-Player oder jPlayer.)

Multimedia-Elemente noch eine der größten Baustellen von HTML5.

Aber gute Fundamente in Zukunft für neue Funktionen: Video-Annotationen mit <track>

Untertitel, Kapitel, Metadaten, ... Audio Data API

Samplingrate, Kanäle, Framebuffer, ... auslesen und manipulieren. Flash und andere Plugin-Inhalte verwenden

<embed> und <object> als Standard.

Page 38: Html5 versus Adobe Flash

38M. Steinberg HTML5 versus Flash 07.12.2011

Ausblick: Zukunft HTML5 für Spiele

HTML5 Browsergames hinken Flash-Games noch hinterher: Muss nicht so bleiben. Alles was derzeit mit Flash entwickelt wird, kann theoretisch auch mit HTML5

und CSS3 umgesetzt werden. Weg zu einem vergleichbaren Ergebnis unter Umständen beschwerlicher,

aber möglich.

Faktoren, die HTML5-Browsergames zum Durchbruch verhelfen könnten: Bessere Grafiken verwenden. Desktop-Spiele-Entwickler sollten einbezogen werden. Einfachere Animationen. Codiere wie in C++. WebGL muss stabiler werden. Bessere WebGL-Tutorials benötigt. Mehr physikalische Engines. Kongregate-Pendant (Online Games Hosting Website) für HTML5.

Quelle: T3N, http://t3n.de/news/html5-browsergames-fehlt-damit-richtig-klasse-333093/, 2011.

Page 39: Html5 versus Adobe Flash

39M. Steinberg HTML5 versus Flash 07.12.2011

Quellen

HTML5 - Webseiten innovativ und zukunftssicher, Peter Kröner, Opensource Press, ISBN 978-3-941841-34-5, 2011.

W3C HTML5 Spezifikation, http://www.w3.org/TR/html5/spec.html#contents, aktualisiert: 25.05.2011.

Web Hypertext Application Technology Working Group (WHATWG), http://www.whatwg.org/specs/web-apps/current-work/multipage/, aktualisiert: 02.12.2011.

Dynamische iPhone-Anwendungen entwickeln, Lee. S. Barney, Addison-Wesley, ISBN 978-3-8273-2918-9, 2010.

Page 40: Html5 versus Adobe Flash

40M. Steinberg HTML5 versus Flash 07.12.2011

Weitere Links

Adobe AIR 3 und Flash-Player 11 sind verfügbar! http://t3n.de/news/adobe-flash-player-11-air-3-verfugbar-334331/, aktualisiert: 04.10.2011.

What do we need for HTML5 games to be awesome? http://www.smashinglabs.pl/what-do-we-need-for-html5-games-to-be-awesome, aktualisiert: 24.09.2011.

HTML5 Website Showcase: 48 Potential Flash-Killing Demos, http://www.hongkiat.com/blog/48-excellent-html5-demos/, aktualisiert: 2011.

Eine kleine Canvas-Einführung, http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/, aktualisiert: 16.03.2009, Peter Kröner.

Comparison of layout engines (HTML5 Media) bei Wikipedia, http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support, aktualisiert: 08.11.2011.

Page 41: Html5 versus Adobe Flash

41M. Steinberg HTML5 versus Flash 07.12.2011

Vielen Dank für Ihre Aufmerksamkeit!

Page 42: Html5 versus Adobe Flash

42M. Steinberg HTML5 versus Flash 07.12.2011

Fragen?

Anmerkungen?

Diskussion?

Offener, zukunftsweisender

Web-Standard

gegenüber

erhöhtem Entwicklungs-

/Einarbeitungsaufwand?