Your SlideShare is downloading. ×
html5, 5 things that might challenge Flash
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

html5, 5 things that might challenge Flash


Published on

HTML5 brings some important new features with it but it is currently not a …

HTML5 brings some important new features with it but it is currently not a
Flash killer. In this hands-on presentation
the main novelties demonstrated. In half
hour, we try to make a rich, interactive video application
with HTML5, CSS, Javascript, some APIs and plugins. The
application runs in both a browser and on the iPad. We discuss
video encoding settings, custom video player behavior, video overlays,
twitter integration and data visualization using the canvas element and

Published in: Technology
  • It should also be noted that actually, two of these “5 things that might challenge Flash” aren’t HTML5. Geolocation and CSS3 are both separate specs and not part of HTML5.
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey Matthias

    1. moet zijn: supported by all current browsers (except IE and FF). Codecs zijn geen deel van de spec, wat ik eigenlijk wilde zeggen: het wordt gesupporteerd door de meeste HTML5 browsers (behalve FF). Is inderdaad een beetje verwarrend geformuleerd
    2. ik had het SVG voorbeeld gegeven om er een beetje geschiedenis rond te vertellen. Raphaeljs gebruikt zowel canvas als SVG als VML (voor IE). Dat is wel wat slordig behandeld in de presentatie zelf en het zal idd wel verwarrend zijn overgekomen :-S

    Twee juiste opmerkingen dus, ik verbeter het met de volgende presentatie :)


    Are you sure you want to  Yes  No
    Your message goes here
  • goeie presentatie en heel tof gebracht gisteren.
    Are you sure you want to  Yes  No
    Your message goes here
  • Erg goede presentatie, Hendrik! Ook enorm goed gebracht, trouwens.

    Twee zaken die ik me afvroeg:

    * Slide 34: H.264 adopted in HTML5? Wat bedoel je hier in godsnaam mee? :)
    * Op slide 66 heb je ’t over . Vervolgens ging je naadloos over naar een SVG-voorbeeld, verkondigend dat het nog steeds was. What’s up with that?

    Zalige als typo vermomde steek op Flash in slide 46 btw ;)
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. html5 5 things that might challenge Flash
  • 2. 6 december
  • 3. google
  • 4. no jihad
  • 5. no specs
  • 6. “In three years time, desktops will be irrelevant”
  • 7. ˜ html5 in 5 minutes
  • 8. source
  • 9. XHTML 1.0
  • 10. HTML5
  • 11. caching
  • 12. caching
  • 13. Incompatible Compatible but who can read the docs Compatible 46% Incompatible 54% source
  • 14. 46% of the pie is eaten HTML5 incompatible browsers HTML5 compatible browsers FF < 3.5 7% chrome IE6 26% 16% IE8 FF 3.5+ 47% 46% IE7 Safari 3+ 29% Opera 24% 4%
  • 15.
  • 16. source
  • 17. HTML5 Shiv Modernizer Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5
  • 18. ˜ html5 HTML + JS api + CSS3
  • 19. HTML ˜ 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG)
  • 20. JS api ˜ 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation
  • 21. CSS3 ˜ 1.Typography 2.Visuals 3.Transitions, transforms and animations
  • 22. ˜ 5 things that might challenge Flash
  • 23. 1. multimedia
  • 24. codec requirements Good coding performance Low power implementations (hardware) Free as in Beer
  • 25. the applicants html5
  • 26. the good old days
  • 27. flash Flash is a container for animation and video Default for video on Web Two codecs : On2 VP8 en MPEG-4 AVC Bad CPU performance, solved by new version 10.1 it’s not a candidate
  • 28. MP4 - H264/AVC ISO Standard The majority of online video content is encoded in H264 “Free” to use until 2016 Licensors: Apple, Microsoft, Sony (and 25 others) Licencees: Adobe, Google (and 785 others) Hardware implementations FF refuses to support it Adopted in HTML5, IE9 will support it
  • 29. Ogg Theora Based on open source ON2 VP3 Adopted by HTML5: support in FF, Chrome and Opera OGG content is virtually nonexistent Codec performance : reasonable No hardware implementation Royalty-free
  • 30. the good old days
  • 31. l’histoire se répète
  • 32. ON2 VP8 Open source Adopted by HTML5: support in FF (webkit following) Codec performance : good ( ≈ H.264 basic profile) Royalty-free Every video on YouTube will be transcoded into WebM not just google apple support doubtful
  • 33. you know... “we shouldn't end up in a situation where H264 is the only codec choice”
  • 34. yet another codec battle
  • 35. still some issues fullscreen support Firefox 3.6 (right-click no API) Webkit (API) HTTP streaming / adaptive bitrates Long-form video content is a problem range request header / pseudo-streaming
  • 36. HTML + Flash
  • 37. swfobject
  • 38. HTML5
  • 39. HTML5 with fallback
  • 40. full screen
  • 41.
  • 42. 2. web sockets
  • 43. Realtime Web Ajax - Timeout requests Comet - long polling Flash XMLSocket HTML5 web sockets
  • 44. WebSockets Part of HTML5 Bi-directional communication between browser and server Works with Proxy/Firewall low-complexity and low-latency Faster than Ajax/Comet
  • 45. More Details It’s own protocol (ws://) different headers Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
  • 46. Browser Support Chrome and WebKit support now Safari 4.x (anticipated) Firefox 4.0 (expected in November 2010) Internet Explorer (no indications it’ll be supported in IE 9) Fallback to our old friend... Flash
  • 47. 3. geo location
  • 48. getCurrentPosition
  • 49. 4. fancy charts
  • 50. ☐ Canvas
  • 51. a circle
  • 52. Raphaëljs
  • 53. gRaphaël
  • 54. source: http://localhost:8080/GwtQuake.html
  • 55. 5. CSS 3 eyecandy
  • 56. better design tools rgba / hsla text strokes gradients rounded corners shadows transitions multiple backgrounds transforms @font-face animation!
  • 57. better design tools rgba / hsla t e x t s t r o k e s gradients rounded corners shadows transitions multiple backgrounds transforms @font-face
  • 58. Pixar, here I come!
  • 59. about me @studiomuscle studiomuscle
  • 60. resources episode-
  • 61. demos toolkits-and-players/