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

html5, 5 things that might challenge Flash

on

  • 7,198 views

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
raphaeljs.

Statistics

Views

Total Views
7,198
Views on SlideShare
6,416
Embed Views
782

Actions

Likes
18
Downloads
268
Comments
4

4 Embeds 782

http://www.webcoder.de 424
http://www.slideshare.net 356
http://192.168.6.52 1
http://cache.baiducontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Your message goes here
    Processing…
  • 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 :)

    Thanks

    hendrik
    Are you sure you want to
    Your message goes here
    Processing…
  • goeie presentatie en heel tof gebracht gisteren.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Your message goes here
    Processing…
Post Comment
Edit your comment

html5, 5 things that might challenge Flash html5, 5 things that might challenge Flash Presentation Transcript

  • html5 5 things that might challenge Flash
  • 6 december
  • google
  • no jihad
  • no specs
  • “In three years time, desktops will be irrelevant”
  • ˜ html5 in 5 minutes
  • source
  • XHTML 1.0
  • HTML5
  • caching
  • caching
  • Incompatible Compatible but who can read the docs Compatible 46% Incompatible 54% source
  • 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%
  • http://ishtml5readyyet.com/
  • source
  • HTML5 Shiv Modernizer Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5
  • ˜ html5 HTML + JS api + CSS3
  • 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)
  • 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
  • CSS3 ˜ 1.Typography 2.Visuals 3.Transitions, transforms and animations
  • ˜ 5 things that might challenge Flash
  • 1. multimedia
  • codec requirements Good coding performance Low power implementations (hardware) Free as in Beer
  • the applicants html5
  • the good old days
  • 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
  • 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
  • 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
  • the good old days
  • l’histoire se répète
  • 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
  • you know... “we shouldn't end up in a situation where H264 is the only codec choice”
  • yet another codec battle
  • 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
  • HTML + Flash
  • swfobject
  • HTML5
  • HTML5 with fallback
  • full screen
  • http://people.mozilla.com/~prouget/demos/
  • 2. web sockets
  • Realtime Web Ajax - Timeout requests Comet - long polling Flash XMLSocket HTML5 web sockets
  • WebSockets Part of HTML5 Bi-directional communication between browser and server Works with Proxy/Firewall low-complexity and low-latency Faster than Ajax/Comet
  • More Details It’s own protocol (ws://) different headers Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
  • 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 http://github.com/gimite/web-socket-js
  • 3. geo location
  • getCurrentPosition
  • 4. fancy charts
  • ☐ Canvas
  • a circle
  • Raphaëljs
  • gRaphaël
  • source: http://localhost:8080/GwtQuake.html
  • 5. CSS 3 eyecandy
  • better design tools rgba / hsla text strokes gradients rounded corners shadows transitions multiple backgrounds transforms @font-face animation!
  • 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
  • Pixar, here I come!
  • about me @studiomuscle hendrik@studiomuscle.com http://www.studiomuscle.com http://www.slideshare.net/ studiomuscle
  • resources http://apirocks.com/html5/html5.html#slide1 http://html5doctor.com http://html5demos.com/ http://diveintohtml5.org/ http://validator.nu/?doc=http://blog.whatwg.org/whats-next-in-html- episode- http://html5watch.tumblr.com/ http://dev.w3.org/html5/html-author/ http://people.mozilla.com/~prouget/demos/
  • demos http://9elements.com/io/projects/html5/canvas/ http://html5demos.com/drag http://bradshawenterprises.com/tests/formdemo.php http://hummingbirdstats.com http://pusherapp.com http://speckyboy.com/2010/04/23/html5-video-libraries- toolkits-and-players/