html5, 5 things that might challenge Flash

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

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 (Notiﬁcations, 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

ﬂash 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 proﬁle) 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 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://) diﬀerent 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/

http://www.slideshare.net	356
http://www.webcoder.de	325

html5, 5 things that might challenge Flash

by Hendrik Dacquin

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 681

Statistics