html5, 5 things that might challenge flash
If you can't read please download the document
DESCRIPTION
HTML5 brings some important new features with it but it is currently not aFlash killer. In this hands-on presentationthe main novelties demonstrated. In halfhour, we try to make a rich, interactive video application with HTML5, CSS, Javascript, some APIs and plugins. Theapplication runs in both a browser and on the iPad. We discussvideo encoding settings, custom video player behavior, video overlays,twitter integration and data visualization using the canvas element andraphaeljs.TRANSCRIPT
- 1.html55 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. IncompatibleCompatible but who can read the docsCompatible 46%Incompatible54% source 14. 46% of the pie is eatenHTML5 incompatible browsers HTML5 compatible browsersFF < 3.5 7%chrome IE6 26% 16%IE8FF 3.5+47% 46% IE7Safari 3+29%Opera 24%4% 15. http://ishtml5readyyet.com/ 16. source 17. HTML5 Shiv Modernizer Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5 18. html5HTML + 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 (Notications, 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. ashFlash is a container for animation and videoDefault for video on WebTwo codecs : On2 VP8 en MPEG-4 AVCBad CPU performance, solved by new version 10.1its not a candidate 28. MP4 - H264/AVC ISO StandardThe majority of online video content is encoded in H264Free to use until 2016Licensors: Apple, Microsoft, Sony (and 25 others)Licencees: Adobe, Google (and 785 others)Hardware implementations FF refuses to support itAdopted in HTML5, IE9 will support it 29. Ogg TheoraBased on open source ON2 VP3Adopted by HTML5:support in FF, Chrome and OperaOGG content is virtually nonexistentCodec performance : reasonableNo hardware implementationRoyalty-free 30. the good old days 31. lhistoire se rpte 32. ON2 VP8Open sourceAdopted by HTML5:support in FF (webkit following)Codec performance : good ( H.264 basic prole)Royalty-freeEvery video on YouTube will be transcoded into WebMnot just googleapple 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 issuesfullscreen support Firefox 3.6 (right-click no API)Webkit (API)HTTP streaming / adaptive bitrates Long-form video content is a problemrange request header / pseudo-streaming 36. HTML + Flash 37. swfobject 38. HTML5 39. HTML5 with fallback 40. full screen 41. http://people.mozilla.com/~prouget/demos/ 42. 2. web sockets 43. Realtime WebAjax - Timeout requestsComet - long pollingFlash XMLSocketHTML5 web sockets 44. WebSockets Part of HTML5Bi-directional communication between browser and serverWorks with Proxy/Firewalllow-complexity and low-latencyFaster than Ajax/Comet 45. More DetailsIts own protocol (ws://)dierent headersLanguage support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc. 46. Browser Support Chrome and WebKit support nowSafari 4.x (anticipated)Firefox 4.0 (expected in November 2010)Internet Explorer (no indications itll be supported in IE 9)Fallback to our old friend... Flash http://github.com/gimite/web-socket-js 47. 3. geo location 48. getCurrentPosition 49. 4. fancy charts 50. Canvas 51. a circle 52. Raphaljs 53. gRaphal 54. source: http://localhost:8080/GwtQuake.html 55. 5. CSS 3 eyecandy 56. better design tools rgba / hslatext strokesgradientsrounded cornersshadowstransitionsmultiple backgrounds transforms@font-face animation! 57. better design toolsrgba / hslat e x t s t r o k e s gradientsrounded corners shadowstransitionsmultiple backgroundstransforms@font-face 58. Pixar, here I come! 59. about me @[email protected]://www.studiomuscle.comhttp://www.slideshare.net/studiomuscle 60. resourceshttp://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/ 61. demoshttp://9elements.com/io/projects/html5/canvas/http://html5demos.com/draghttp://bradshawenterprises.com/tests/formdemo.phphttp://hummingbirdstats.comhttp://pusherapp.comhttp://speckyboy.com/2010/04/23/html5-video-libraries- toolkits-and-players/