SlideShare ist ein Scribd-Unternehmen logo
1 von 42
HTML5 versus Flash
 Über die Zukunft von Multimedia in interaktiven
 Anwendungen




 07. Dezember 2011




 Monika Steinberg


                                                                Quelle: http://vimeo.com/11551721

M. Steinberg              HTML5 versus Flash       07.12.2011                                 1
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
M. Steinberg              HTML5 versus Flash   07.12.2011   2
Einleitung



M. Steinberg   HTML5 versus Flash   07.12.2011   3
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.


M. Steinberg               HTML5 versus Flash      07.12.2011                   4
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.

M. Steinberg               HTML5 versus Flash       07.12.2011                   5
Wer von Ihnen hat schon
   mit Flash gearbeitet?


M. Steinberg   HTML5 versus Flash   07.12.2011   6
Und wer mit HTML5?



M. Steinberg        HTML5 versus Flash   07.12.2011   7
Flash oder HTML?



M. Steinberg      HTML5 versus Flash   07.12.2011   8
Beispiele: HTML5 oder Flash?

   Beispiel 1:
          9elements


   Beispiel 2:
          Is your data safe?




M. Steinberg               HTML5 versus Flash   07.12.2011   9
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 in
    interaktiven 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.
M. Steinberg                HTML5 versus Flash   07.12.2011                  10
Was ist Adobe Flash?



M. Steinberg   HTML5 versus Flash   07.12.2011   11
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.
M. Steinberg                  HTML5 versus Flash         07.12.2011     12
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.
M. Steinberg              HTML5 versus Flash      07.12.2011      13
Was ist HTML5?



M. Steinberg     HTML5 versus Flash   07.12.2011   14
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.

M. Steinberg                     HTML5 versus Flash          07.12.2011                 15
Web
                                                                     Graphics
                                                                     Library




  Web Accessibility Initiative –
   Accessible Rich
  Internet Applications




                                                                                Scalable
                                                                                Vector
                                                                                Graphics




                                                                                JavaScript
                                                                                Optimierung –
                                                                                Threads für
                                                                                JavaScript




M. Steinberg                       HTML5 versus Flash   07.12.2011                         16
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.

M. Steinberg                     HTML5 versus Flash     07.12.2011                    17
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.
M. Steinberg                 HTML5 versus Flash   07.12.2011        18
Welche Vor-/Nachteile
          sehen Sie bei Flash
          gegenüber HTML5?


M. Steinberg   HTML5 versus Flash   07.12.2011   19
HTML5 und Flash
                 im Vergleich



M. Steinberg      HTML5 versus Flash   07.12.2011   20
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.

M. Steinberg                  HTML5 versus Flash          07.12.2011               21
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.

M. Steinberg                HTML5 versus Flash        07.12.2011   22
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.

M. Steinberg          HTML5 versus Flash    07.12.2011            23
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).


M. Steinberg                 HTML5 versus Flash          07.12.2011              24
Audio und Video
                   in HTML5



M. Steinberg      HTML5 versus Flash   07.12.2011   25
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.

M. Steinberg                  HTML5 versus Flash         07.12.2011              26
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.

M. Steinberg                      HTML5 versus Flash    07.12.2011                      27
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.
M. Steinberg                  HTML5 versus Flash   07.12.2011                 28
Multimedia-Dateiformate im Browser

    Codec-Problematik aus Browser-Giganten-Streit hier zu
     erkennen:
       Offenes OGG-Containerformat wenig unterstützt.
    Noch nicht rundum zufriedenstellend.
    Gewisser Mindestumfang unterstützt.

   Codec                         Firefox       Safari        Chrome   Opera        IE 9   IE 6-8
                                 3.5+          4+            3+       10.50+
   Theora/ orbis (OGG)
         V                       j
                                 a             nein          j
                                                             a        j
                                                                      a            nein   nein
   H.264/ A (MPEG-4)
        AC                       nein          j
                                               a             j
                                                             a        nein         j
                                                                                   a      nein
   MP3                           nein          j
                                               a             j
                                                             a        nein         j
                                                                                   a      nein
   WAV                           j
                                 a             j
                                               a             j
                                                             a        j
                                                                      a            nein   nein
   WebM                          j (v.4)
                                 a             nein          j
                                                             a        j
                                                                      a            nein   nein
          Angaben basieren auf: HTML5, Peter Kröner, 2011.

M. Steinberg                          HTML5 versus Flash              07.12.2011                   29
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>




M. Steinberg        HTML5 versus Flash   07.12.2011    30
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>




M. Steinberg        HTML5 versus Flash   07.12.2011      31
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>


M. Steinberg           HTML5 versus Flash      07.12.2011   32
Zusammenfassung



M. Steinberg      HTML5 versus Flash   07.12.2011   33
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.



M. Steinberg               HTML5 versus Flash     07.12.2011               34
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.


M. Steinberg              HTML5 versus Flash     07.12.2011             35
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.



M. Steinberg                  HTML5 versus Flash        07.12.2011                    36
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.
M. Steinberg                    HTML5 versus Flash       07.12.2011                  37
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.




M. Steinberg                                 HTML5 versus Flash                              07.12.2011   38
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/multipag
    , aktualisiert: 02.12.2011.
   Dynamische iPhone-Anwendungen entwickeln, Lee. S.
    Barney, Addison-Wesley, ISBN 978-3-8273-2918-9, 2010.

M. Steinberg       HTML5 versus Flash   07.12.2011         39
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.




M. Steinberg                 HTML5 versus Flash         07.12.2011                       40
Vielen Dank für Ihre
                 Aufmerksamkeit!



M. Steinberg        HTML5 versus Flash   07.12.2011   41
Fragen?
 Anmerkungen?
 Diskussion?

 Offener, zukunftsweisender
 Web-Standard
 gegenüber
 erhöhtem Entwicklungs-
 /Einarbeitungsaufwand?

M. Steinberg      HTML5 versus Flash   07.12.2011   42

Weitere ähnliche Inhalte

Ähnlich wie Html5 versus Adobe Flash

Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
Thomas Christinck
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
chmoser79
 

Ähnlich wie Html5 versus Adobe Flash (20)

Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Technologievergleich für RIA
Technologievergleich für RIATechnologievergleich für RIA
Technologievergleich für RIA
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Blogdienst der FAU
Blogdienst der FAUBlogdienst der FAU
Blogdienst der FAU
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
 
Mobile App Stores- HTML5 & Web apps
Mobile App Stores- HTML5 & Web appsMobile App Stores- HTML5 & Web apps
Mobile App Stores- HTML5 & Web apps
 
User Interface Trends für Geschäftsanwendungen
User Interface Trends für GeschäftsanwendungenUser Interface Trends für Geschäftsanwendungen
User Interface Trends für Geschäftsanwendungen
 
HTML5 Update [Vortrag bei der NZZ]
HTML5 Update [Vortrag bei der NZZ]HTML5 Update [Vortrag bei der NZZ]
HTML5 Update [Vortrag bei der NZZ]
 
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
W3C/DFKI Automotive Workshop
W3C/DFKI Automotive WorkshopW3C/DFKI Automotive Workshop
W3C/DFKI Automotive Workshop
 
Bigbangii de-html5presentation4-110518102622-phpapp01
Bigbangii de-html5presentation4-110518102622-phpapp01Bigbangii de-html5presentation4-110518102622-phpapp01
Bigbangii de-html5presentation4-110518102622-phpapp01
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
 
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 

Mehr von Monika Steinberg

A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
Monika Steinberg
 
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
Monika Steinberg
 
Prozedurale Generierung digitaler Medien am Beispiel abstrakter Formen
Prozedurale Generierung digitaler Medien am Beispiel abstrakter FormenProzedurale Generierung digitaler Medien am Beispiel abstrakter Formen
Prozedurale Generierung digitaler Medien am Beispiel abstrakter Formen
Monika Steinberg
 
Utilizing Open Data for interactive knowledge transfer
Utilizing Open Data for interactive knowledge transferUtilizing Open Data for interactive knowledge transfer
Utilizing Open Data for interactive knowledge transfer
Monika Steinberg
 
Adaptivität im Lernmanagement
Adaptivität im LernmanagementAdaptivität im Lernmanagement
Adaptivität im Lernmanagement
Monika Steinberg
 
Towards enhanced user interaction to qualify web resources for higher-layered...
Towards enhanced user interaction to qualify web resources for higher-layered...Towards enhanced user interaction to qualify web resources for higher-layered...
Towards enhanced user interaction to qualify web resources for higher-layered...
Monika Steinberg
 

Mehr von Monika Steinberg (9)

Neue Medien und Medienkonvergenz
Neue Medien und MedienkonvergenzNeue Medien und Medienkonvergenz
Neue Medien und Medienkonvergenz
 
eAssessment mit Moodle - eine exemplarische Einführung
eAssessment mit Moodle - eine exemplarische Einführung 	eAssessment mit Moodle - eine exemplarische Einführung
eAssessment mit Moodle - eine exemplarische Einführung
 
Web 2.0: Einstieg und Überblick
Web 2.0: Einstieg und ÜberblickWeb 2.0: Einstieg und Überblick
Web 2.0: Einstieg und Überblick
 
A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
A Social Interaction Taxonomy: Classifying User Interaction Tasks in Web Appl...
 
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
Soziale Medien: Hype, Lebensart, Interaktion und mehr über Live Streaming, Ga...
 
Prozedurale Generierung digitaler Medien am Beispiel abstrakter Formen
Prozedurale Generierung digitaler Medien am Beispiel abstrakter FormenProzedurale Generierung digitaler Medien am Beispiel abstrakter Formen
Prozedurale Generierung digitaler Medien am Beispiel abstrakter Formen
 
Utilizing Open Data for interactive knowledge transfer
Utilizing Open Data for interactive knowledge transferUtilizing Open Data for interactive knowledge transfer
Utilizing Open Data for interactive knowledge transfer
 
Adaptivität im Lernmanagement
Adaptivität im LernmanagementAdaptivität im Lernmanagement
Adaptivität im Lernmanagement
 
Towards enhanced user interaction to qualify web resources for higher-layered...
Towards enhanced user interaction to qualify web resources for higher-layered...Towards enhanced user interaction to qualify web resources for higher-layered...
Towards enhanced user interaction to qualify web resources for higher-layered...
 

Html5 versus Adobe Flash

  • 1. HTML5 versus Flash Über die Zukunft von Multimedia in interaktiven Anwendungen 07. Dezember 2011 Monika Steinberg Quelle: http://vimeo.com/11551721 M. Steinberg HTML5 versus Flash 07.12.2011 1
  • 2. 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 M. Steinberg HTML5 versus Flash 07.12.2011 2
  • 3. Einleitung M. Steinberg HTML5 versus Flash 07.12.2011 3
  • 4. 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. M. Steinberg HTML5 versus Flash 07.12.2011 4
  • 5. 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. M. Steinberg HTML5 versus Flash 07.12.2011 5
  • 6. Wer von Ihnen hat schon mit Flash gearbeitet? M. Steinberg HTML5 versus Flash 07.12.2011 6
  • 7. Und wer mit HTML5? M. Steinberg HTML5 versus Flash 07.12.2011 7
  • 8. Flash oder HTML? M. Steinberg HTML5 versus Flash 07.12.2011 8
  • 9. Beispiele: HTML5 oder Flash?  Beispiel 1:  9elements  Beispiel 2:  Is your data safe? M. Steinberg HTML5 versus Flash 07.12.2011 9
  • 10. 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 in interaktiven 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. M. Steinberg HTML5 versus Flash 07.12.2011 10
  • 11. Was ist Adobe Flash? M. Steinberg HTML5 versus Flash 07.12.2011 11
  • 12. 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. M. Steinberg HTML5 versus Flash 07.12.2011 12
  • 13. 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. M. Steinberg HTML5 versus Flash 07.12.2011 13
  • 14. Was ist HTML5? M. Steinberg HTML5 versus Flash 07.12.2011 14
  • 15. 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. M. Steinberg HTML5 versus Flash 07.12.2011 15
  • 16. Web Graphics Library Web Accessibility Initiative – Accessible Rich Internet Applications Scalable Vector Graphics JavaScript Optimierung – Threads für JavaScript M. Steinberg HTML5 versus Flash 07.12.2011 16
  • 17. 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. M. Steinberg HTML5 versus Flash 07.12.2011 17
  • 18. 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. M. Steinberg HTML5 versus Flash 07.12.2011 18
  • 19. Welche Vor-/Nachteile sehen Sie bei Flash gegenüber HTML5? M. Steinberg HTML5 versus Flash 07.12.2011 19
  • 20. HTML5 und Flash im Vergleich M. Steinberg HTML5 versus Flash 07.12.2011 20
  • 21. 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. M. Steinberg HTML5 versus Flash 07.12.2011 21
  • 22. 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. M. Steinberg HTML5 versus Flash 07.12.2011 22
  • 23. 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. M. Steinberg HTML5 versus Flash 07.12.2011 23
  • 24. 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). M. Steinberg HTML5 versus Flash 07.12.2011 24
  • 25. Audio und Video in HTML5 M. Steinberg HTML5 versus Flash 07.12.2011 25
  • 26. 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. M. Steinberg HTML5 versus Flash 07.12.2011 26
  • 27. 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. M. Steinberg HTML5 versus Flash 07.12.2011 27
  • 28. 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. M. Steinberg HTML5 versus Flash 07.12.2011 28
  • 29. Multimedia-Dateiformate im Browser  Codec-Problematik aus Browser-Giganten-Streit hier zu erkennen:  Offenes OGG-Containerformat wenig unterstützt.  Noch nicht rundum zufriedenstellend.  Gewisser Mindestumfang unterstützt. Codec Firefox Safari Chrome Opera IE 9 IE 6-8 3.5+ 4+ 3+ 10.50+ Theora/ orbis (OGG) V j a nein j a j a nein nein H.264/ A (MPEG-4) AC nein j a j a nein j a nein MP3 nein j a j a nein j a nein WAV j a j a j a j a nein nein WebM j (v.4) a nein j a j a nein nein Angaben basieren auf: HTML5, Peter Kröner, 2011. M. Steinberg HTML5 versus Flash 07.12.2011 29
  • 30. 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> M. Steinberg HTML5 versus Flash 07.12.2011 30
  • 31. 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> M. Steinberg HTML5 versus Flash 07.12.2011 31
  • 32. 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> M. Steinberg HTML5 versus Flash 07.12.2011 32
  • 33. Zusammenfassung M. Steinberg HTML5 versus Flash 07.12.2011 33
  • 34. 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. M. Steinberg HTML5 versus Flash 07.12.2011 34
  • 35. 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. M. Steinberg HTML5 versus Flash 07.12.2011 35
  • 36. 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. M. Steinberg HTML5 versus Flash 07.12.2011 36
  • 37. 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. M. Steinberg HTML5 versus Flash 07.12.2011 37
  • 38. 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. M. Steinberg HTML5 versus Flash 07.12.2011 38
  • 39. 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/multipag , aktualisiert: 02.12.2011.  Dynamische iPhone-Anwendungen entwickeln, Lee. S. Barney, Addison-Wesley, ISBN 978-3-8273-2918-9, 2010. M. Steinberg HTML5 versus Flash 07.12.2011 39
  • 40. 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. M. Steinberg HTML5 versus Flash 07.12.2011 40
  • 41. Vielen Dank für Ihre Aufmerksamkeit! M. Steinberg HTML5 versus Flash 07.12.2011 41
  • 42. Fragen? Anmerkungen? Diskussion? Offener, zukunftsweisender Web-Standard gegenüber erhöhtem Entwicklungs- /Einarbeitungsaufwand? M. Steinberg HTML5 versus Flash 07.12.2011 42

Hinweis der Redaktion

  1. http://t3n.de/news/adobe-gibt-flash-mobile-gerate-auf-setzt-html5-341346/
  2. Autoren: 9elements, Alan Becker
  3. Web Hypertext Application Technology Working Group ( WHATWG ) ist eine Arbeitsgruppe
  4. Quelle: http://t3n.de/news/adobe-flash-player-11-air-3-verfugbar-334331/, Dieter Petereit, 04.10.2011. http://t3n.de/news/html5-browsergames-fehlt-damit-richtig-klasse-333093/, Falk Heidemann, 28.09.2011.
  5. http://t3n.de/news/html5-browsergames-fehlt-damit-richtig-klasse-333093/
  6. HTML5 ist die Zukunft, Adobes Flash Player für Mobile Geräte wird aufs Altenteil geschickt. (Foto: slavik_V / flickr.com, Lizenz: CC-BY )