HTML5 Technical Executive Summary

5,910 views
5,672 views

Published on

90 slides of HTML5 introduction for technical executives

Published in: Technology, Art & Photos
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,910
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
500
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

×