1. HTML5 Technical Executive Overview HTML 5 Gilad Khen Overview September 2012
3. What’s In This Lecture For YouSome questions to be answered: What is HTML5? Is it ready yet? What are the top features of HTML5? Which clients support HTML5? Can we use HTML5 in our company? How are other companies using HTML5? What tools and libraries work with HTML5? What R&D strategies to consider for HTML5?* Special attention to video and mobile features
5. HTML - DefinitionThat thing behind your browser “View Source” button HyperText Markup Language Describes Document Object Model (DOM) Popular version – 4.01 (published - 1999) Open standard (W3C / WHATWG) Various implementations (browsers / platforms)
7. CSS - DefinitionControls the look of HTML documents Cascading Style Sheets Popular version – 2.1 (published - 2004) HTML = HTML + JS + CSS
8. HTML Standard Release Cycle (W3C) Working Draft Version++ Last Call Working Draft Recommendation (REC) Call for implementation Call for Review
9. Cross-Platform R&D Challenge Designing for multiple platforms Implementing for multiple platforms Testing in multiple platforms
10. The Good News HTML5 was designed (among other things) to solve the multiple- platforms problem
11. The Bad News It didn’t.
12. The Ugly News It made it worse.
13. Don’t Panic (Unless it’s IE6) Same old story as 10 years ago (HTML4) New features available Not all browsers are equal X-browser Infrastructure available R&D overhead remains
14. HTML5 - Introduction
16. HTML5 - Features CategoriesMore details later…
17. HTML5 - A Moving Target Specifications / support changes rapidly Browser / version / feature readiness – http://caniuse.com
18. Is HTML5 Ready Yet? (according to Google…)http://ishtml5readyyet.com
19. HTML5 Readiness - 2008
20. HTML5 Readiness - 2009
21. HTML5 Readiness - 2010
22. HTML5 Readiness - 2011
23. HTML5 Readiness – Timeline
24. HTML5 Readiness – Mobile Browsers
25. HTML5 in Browser Wars
26. HTML5 in Browser Wars
27. Detecting HTML5 Support – Run Timehttp://modernizr.com
28. Polyfills – DHTML Fallbacks for HTML5Google: “html5 polyfills”
29. Detecting HTML5 Support – Run Timehttp://modernizr.com
30. HTML5 Native Mobile Integrationhttp://phonegap.com acquired by Adobe
31. The Million $ Question “Can we write our app in HTML5 Today?” Yes No We already did (HTML4 ?) All of the above
32. So What Is HTML5 Good For? The short answer: Rich features where there’s no Flash (iPhone etc…) Building mobile apps outside App Stores Alternative to SOME native apps functionality (desktop/mobile) Steer towards rich client architecture The long answer: Coming up…
33. Why are we here (now)?
34. HTML5 Hype – Search TrendsGoogle Search trends for “HTML5” iPad2004- 2011 iPhone released, Released, no Flash HTML SDK Only Work on Native HTML5 iPhone Started SDK Released
35. HTML5 Hype - Job Trends
36. What’s Next?
37. HTML5 Hype – Forecast
38. Features Overview
39. Graphics – Features PNG Alpha SVG effects for HTML Transparency elements Data URLs SVG SMIL animation CSS3 Colors SVG Fonts SVG (basic support) SVG filters Canvas (basic support) CSS3 Animation Video element Inline SVG in HTML5 CSS Transforms 3D Canvas graphics / Text API for Canvas WebGL SVG in CSS CSS 3D Transforms Backgrounds
80. New Form Elements Date pickers, sliders, validation, placeholders Partially implemented in most browsers No standard for display
81. Semantic Elements <section> <article> <header> <footer> <nav> <aside> SEO game changer?
83. Web Sockets Bi-directional, full-duplex communications channels over TCP Currently disabled in some browsers due to security issues
84. Cross-document Messaging Sending information between pages in different domains IE – not between tabs
85. So what’s the catch?
86. Crossing The Hype Chasm Aim Here
87. HTML5 - Buzz vs. Reality HTML5 is backward compatible Yep HTML5 is cross-browser Maybe Nope HTML5 will supersede libraries like jQuery HTML5 will make apps run faster HTML5 will make apps more rich HTML5 will replace Flash / Silverlight HTML5 <video> makes displaying videos easier HTML5 will replace native desktop platforms HTML5 will replace native mobile platforms HTML5 will make the web more semantic
88. Implications - Today Today we can Steer towards rich client architecture Steer towards HTML/JS platform Reduce Flash dependency Target new platforms Build apps outside App Stores Leverage the buzz Today we can’t Serve HTML5 clients the same content (codecs, etc…) Rely on pure HTML5 solutions
89. Implications In the future we will (hopefully) be able to Targetmost platforms using HTML5 Leverage more and more HTML5 features
90. HTML5 - Summary
91. HTML5 – R&D Guidelines Look what big companies have already achieved “If it was done, it’s doable” Think “Browser”, think “Rich Client” Know your target audience platform support matrix Plan for cross-browser R&D overhead Plan for content-distribution overhead (codecs, formats) Use infrastructure for abstraction