HTML5 Technical Executive Overview HTML 5           Gilad Khen Overview        September 2012
About Me                            http://linkedin.com/in/giladkhen   Gilad Khen    Profile:     Web  architect, experi...
What’s In This Lecture For YouSome questions to be answered:   What is HTML5? Is it ready yet?   What are the top featur...
Background
HTML - DefinitionThat thing behind your browser “View Source” button   HyperText Markup Language   Describes Document Ob...
JavaScript - DefinitionBrowsers scripting language   Interpreted, weakly typed   Popular version – 1.5 / 1.6    (publish...
CSS - DefinitionControls the look of HTML documents   Cascading Style Sheets   Popular version – 2.1    (published - 200...
HTML Standard Release Cycle (W3C)                      Working Draft          Version++             Last Call Working Draf...
Cross-Platform R&D Challenge   Designing for multiple platforms   Implementing for multiple platforms   Testing in mult...
The Good News   HTML5 was designed         (among other things)    to solve the multiple-     platforms problem
The Bad News       It didn’t.
The Ugly News It made it worse.
Don’t Panic                            (Unless it’s IE6)   Same old story as 10 years ago (HTML4)     New features avail...
HTML5 - Introduction
HTML5 - Definition   A natural evolution of HTML4     New DOM elements     New JavaScript APIs     New CSS tricks   “...
HTML5 - Features CategoriesMore details later…
HTML5 - A Moving Target   Specifications / support changes rapidly   Browser / version / feature readiness – http://cani...
Is HTML5 Ready Yet? (according to Google…)http://ishtml5readyyet.com
HTML5 Readiness - 2008
HTML5 Readiness - 2009
HTML5 Readiness - 2010
HTML5 Readiness - 2011
HTML5 Readiness – Timeline
HTML5 Readiness – Mobile Browsers
HTML5 in Browser Wars
HTML5 in Browser Wars
Detecting HTML5 Support – Run Timehttp://modernizr.com
Polyfills – DHTML Fallbacks for HTML5Google: “html5 polyfills”
Detecting HTML5 Support – Run Timehttp://modernizr.com
HTML5 Native Mobile Integrationhttp://phonegap.com acquired by Adobe
The Million $ Question   “Can we write our app in HTML5 Today?”     Yes     No     We   already did (HTML4 ?)     All...
So What Is HTML5 Good For?   The short answer:     Rich features where there’s no Flash (iPhone etc…)     Building mobi...
Why are we here (now)?
HTML5 Hype – Search TrendsGoogle Search trends for “HTML5”                        iPad2004- 2011                          ...
HTML5 Hype - Job Trends
What’s Next?
HTML5 Hype – Forecast
Features Overview
Graphics – Features    PNG Alpha                   SVG effects for HTML     Transparency                 elements    Da...
Canvas – 2D   Generating vector graphics using JavaScript     Support   already widely implemented
Canvas – 3D   Generating 3D graphics using JavaScript     Not really part of W3C HTML5 Standard     Partial desktop sup...
Canvas - API
Canvas - API
Canvas – Cross Browser
Canvas – Usage Types   Games, charts, vector maps etc…
Example - Zynga
Example - Disney
Multimedia   Audio element   Video element   WebRTC
Audio   Playing sounds without flash     Support already widely implemented     Caveat – no standard for codecs
Audio - Codecs   Requires maintaining content in multiple formats   Requires server side setup (MIME Type)   Pollyfill ...
Audio - API
Example - exfm
Video   Playing videos without flash     Support already widely implemented     Caveat – no standard for codecs
Video - Codecs   Requires maintaining content in multiple formats   Requires server side setup (MIME Type)   Pollyfill ...
Video - API   Requires maintaining content in multiple formats   Requires server side setup (MIME T
Example - YouTube
Video – Performance Benchmark
WebRTC   Not part of the HTML5 standard   Packages multiple technologies     Access to local camera feed     NAT trave...
WebRTC
WebRTC
Offline   Create desktop/mobile offline apps with HTML5/JS     Requiresserver setup     Use along with web storage / we...
Web Storage   Like cookies, but up to ~5MB     Stored as string name value pairs     Saves on cookie traffic!
Example – Gmail Mobile
Gmail Mobile
Example – Amazon Kindle Cloud Reader
Amazon Kindle Cloud Reader
Geolocation   Get current geographical location     Widely  supported across mobile platforms     Plan for opt-in permi...
Geolocation - API
Geolocation - API
Example - Nokia
HTML5 with Mobile Devices
jQuery Mobile (open source)
jQuery Mobile Platform Support
jQuery Mobile Platform Support
Example- Twitter for iPad
Counter Example - Facebook
Example - Sencha
HTML5 Mobile R&D StrategiesOptional strategies: Pure HTML                            Native shell, HTML frame     Pros:...
Even more featuresIf we have time left…
New Form Elements   Date pickers, sliders, validation, placeholders     Partially              implemented in most brows...
Semantic Elements   <section> <article> <header> <footer> <nav>    <aside>     SEO   game changer?
Web Workers    JavaScript threads      Runbackground tasks, separate from UI thread      Create responsive UI
Web Sockets   Bi-directional, full-duplex communications channels over    TCP       Currently disabled in some browsers ...
Cross-document Messaging   Sending information between pages in different    domains     IE   – not between tabs
So what’s the catch?
Crossing The Hype Chasm                   Aim Here
HTML5 - Buzz vs. Reality   HTML5 is backward compatible                     Yep   HTML5 is cross-browser                ...
Implications - Today   Today we can     Steer towards rich client architecture     Steer towards HTML/JS platform     ...
Implications   In the future we will (hopefully) be able to     Targetmost platforms using HTML5     Leverage more and ...
HTML5 - Summary
HTML5 – R&D Guidelines   Look what big companies have already achieved    “If it was done, it’s doable”   Think “Browser...
HTML 5       Thanks!Overview
Upcoming SlideShare
Loading in...5
×

HTML5 Technical Executive Summary

5,376

Published on

90 slides of HTML5 introduction for technical executives

Published in: Technology, Art & Photos

HTML5 Technical Executive Summary

  1. 1. HTML5 Technical Executive Overview HTML 5 Gilad Khen Overview September 2012
  2. 2. About Me http://linkedin.com/in/giladkhen Gilad Khen Profile:  Web architect, experience:12 years  Founder at  SharpKit - C# to JavaScript compiler http://sharpkit.net  CloudRows- Cloud Analytics http://cloudrows.com  Consultant for AT&T
  3. 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
  4. 4. Background
  5. 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)
  6. 6. JavaScript - DefinitionBrowsers scripting language Interpreted, weakly typed Popular version – 1.5 / 1.6 (published - 2000) HTML = HTML + JS + CSS Language vs. API
  7. 7. CSS - DefinitionControls the look of HTML documents Cascading Style Sheets Popular version – 2.1 (published - 2004) HTML = HTML + JS + CSS
  8. 8. HTML Standard Release Cycle (W3C) Working Draft Version++ Last Call Working Draft Recommendation (REC) Call for implementation Call for Review
  9. 9. Cross-Platform R&D Challenge Designing for multiple platforms Implementing for multiple platforms Testing in multiple platforms
  10. 10. The Good News HTML5 was designed (among other things) to solve the multiple- platforms problem
  11. 11. The Bad News It didn’t.
  12. 12. The Ugly News It made it worse.
  13. 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. 14. HTML5 - Introduction
  15. 15. HTML5 - Definition A natural evolution of HTML4  New DOM elements  New JavaScript APIs  New CSS tricks “HTML5 is a brand”  Typicallyalso means “CSS3”  Additional associated JS APIs  Everything new cool thing on the web
  16. 16. HTML5 - Features CategoriesMore details later…
  17. 17. HTML5 - A Moving Target Specifications / support changes rapidly Browser / version / feature readiness – http://caniuse.com
  18. 18. Is HTML5 Ready Yet? (according to Google…)http://ishtml5readyyet.com
  19. 19. HTML5 Readiness - 2008
  20. 20. HTML5 Readiness - 2009
  21. 21. HTML5 Readiness - 2010
  22. 22. HTML5 Readiness - 2011
  23. 23. HTML5 Readiness – Timeline
  24. 24. HTML5 Readiness – Mobile Browsers
  25. 25. HTML5 in Browser Wars
  26. 26. HTML5 in Browser Wars
  27. 27. Detecting HTML5 Support – Run Timehttp://modernizr.com
  28. 28. Polyfills – DHTML Fallbacks for HTML5Google: “html5 polyfills”
  29. 29. Detecting HTML5 Support – Run Timehttp://modernizr.com
  30. 30. HTML5 Native Mobile Integrationhttp://phonegap.com acquired by Adobe
  31. 31. The Million $ Question “Can we write our app in HTML5 Today?”  Yes  No  We already did (HTML4 ?)  All of the above
  32. 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. 33. Why are we here (now)?
  34. 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. 35. HTML5 Hype - Job Trends
  36. 36. What’s Next?
  37. 37. HTML5 Hype – Forecast
  38. 38. Features Overview
  39. 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
  40. 40. Canvas – 2D Generating vector graphics using JavaScript  Support already widely implemented
  41. 41. Canvas – 3D Generating 3D graphics using JavaScript  Not really part of W3C HTML5 Standard  Partial desktop support, no mobile suppport
  42. 42. Canvas - API
  43. 43. Canvas - API
  44. 44. Canvas – Cross Browser
  45. 45. Canvas – Usage Types Games, charts, vector maps etc…
  46. 46. Example - Zynga
  47. 47. Example - Disney
  48. 48. Multimedia Audio element Video element WebRTC
  49. 49. Audio Playing sounds without flash  Support already widely implemented  Caveat – no standard for codecs
  50. 50. Audio - Codecs Requires maintaining content in multiple formats Requires server side setup (MIME Type) Pollyfill availbale – audio.js
  51. 51. Audio - API
  52. 52. Example - exfm
  53. 53. Video Playing videos without flash  Support already widely implemented  Caveat – no standard for codecs
  54. 54. Video - Codecs Requires maintaining content in multiple formats Requires server side setup (MIME Type) Pollyfill availbale – http://videojs.com/
  55. 55. Video - API Requires maintaining content in multiple formats Requires server side setup (MIME T
  56. 56. Example - YouTube
  57. 57. Video – Performance Benchmark
  58. 58. WebRTC Not part of the HTML5 standard Packages multiple technologies  Access to local camera feed  NAT traversal  P2P Beta Browsers – Chrome, Opera IE, Firefox
  59. 59. WebRTC
  60. 60. WebRTC
  61. 61. Offline Create desktop/mobile offline apps with HTML5/JS  Requiresserver setup  Use along with web storage / web SQL database
  62. 62. Web Storage Like cookies, but up to ~5MB  Stored as string name value pairs  Saves on cookie traffic!
  63. 63. Example – Gmail Mobile
  64. 64. Gmail Mobile
  65. 65. Example – Amazon Kindle Cloud Reader
  66. 66. Amazon Kindle Cloud Reader
  67. 67. Geolocation Get current geographical location  Widely supported across mobile platforms  Plan for opt-in permission dialogs
  68. 68. Geolocation - API
  69. 69. Geolocation - API
  70. 70. Example - Nokia
  71. 71. HTML5 with Mobile Devices
  72. 72. jQuery Mobile (open source)
  73. 73. jQuery Mobile Platform Support
  74. 74. jQuery Mobile Platform Support
  75. 75. Example- Twitter for iPad
  76. 76. Counter Example - Facebook
  77. 77. Example - Sencha
  78. 78. HTML5 Mobile R&D StrategiesOptional strategies: Pure HTML  Native shell, HTML frame  Pros:  Pros:  Easy  Access native functionality  Target multiple platforms (phonegap / custom)  Offline capabilities  Shared HTML codebase  Bypass App Stores  App Store friendly  Cons:  Cons:  Sandboxed  Requires initial “stitching”  x-browser overhead  Limited performance?  Limited performance?
  79. 79. Even more featuresIf we have time left…
  80. 80. New Form Elements Date pickers, sliders, validation, placeholders  Partially implemented in most browsers  No standard for display
  81. 81. Semantic Elements <section> <article> <header> <footer> <nav> <aside>  SEO game changer?
  82. 82. Web Workers  JavaScript threads  Runbackground tasks, separate from UI thread  Create responsive UI
  83. 83. Web Sockets Bi-directional, full-duplex communications channels over TCP  Currently disabled in some browsers due to security issues
  84. 84. Cross-document Messaging Sending information between pages in different domains  IE – not between tabs
  85. 85. So what’s the catch?
  86. 86. Crossing The Hype Chasm Aim Here
  87. 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. 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. 89. Implications In the future we will (hopefully) be able to  Targetmost platforms using HTML5  Leverage more and more HTML5 features
  90. 90. HTML5 - Summary
  91. 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
  92. 92. HTML 5 Thanks!Overview
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×