HTML5 Technical Executive Summary

  • 5,081 views
Uploaded on

90 slides of HTML5 introduction for technical executives

90 slides of HTML5 introduction for technical executives

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,081
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
485
Comments
0
Likes
14

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Technical Executive Overview HTML 5 Gilad Khen Overview September 2012
  • 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. 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. Background
  • 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. JavaScript - DefinitionBrowsers scripting language Interpreted, weakly typed Popular version – 1.5 / 1.6 (published - 2000) HTML = HTML + JS + CSS Language vs. API
  • 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
  • 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. 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
  • 40. Canvas – 2D Generating vector graphics using JavaScript  Support already widely implemented
  • 41. Canvas – 3D Generating 3D graphics using JavaScript  Not really part of W3C HTML5 Standard  Partial desktop support, no mobile suppport
  • 42. Canvas - API
  • 43. Canvas - API
  • 44. Canvas – Cross Browser
  • 45. Canvas – Usage Types Games, charts, vector maps etc…
  • 46. Example - Zynga
  • 47. Example - Disney
  • 48. Multimedia Audio element Video element WebRTC
  • 49. Audio Playing sounds without flash  Support already widely implemented  Caveat – no standard for codecs
  • 50. Audio - Codecs Requires maintaining content in multiple formats Requires server side setup (MIME Type) Pollyfill availbale – audio.js
  • 51. Audio - API
  • 52. Example - exfm
  • 53. Video Playing videos without flash  Support already widely implemented  Caveat – no standard for codecs
  • 54. Video - Codecs Requires maintaining content in multiple formats Requires server side setup (MIME Type) Pollyfill availbale – http://videojs.com/
  • 55. Video - API Requires maintaining content in multiple formats Requires server side setup (MIME T
  • 56. Example - YouTube
  • 57. Video – Performance Benchmark
  • 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. WebRTC
  • 60. WebRTC
  • 61. Offline Create desktop/mobile offline apps with HTML5/JS  Requiresserver setup  Use along with web storage / web SQL database
  • 62. Web Storage Like cookies, but up to ~5MB  Stored as string name value pairs  Saves on cookie traffic!
  • 63. Example – Gmail Mobile
  • 64. Gmail Mobile
  • 65. Example – Amazon Kindle Cloud Reader
  • 66. Amazon Kindle Cloud Reader
  • 67. Geolocation Get current geographical location  Widely supported across mobile platforms  Plan for opt-in permission dialogs
  • 68. Geolocation - API
  • 69. Geolocation - API
  • 70. Example - Nokia
  • 71. HTML5 with Mobile Devices
  • 72. jQuery Mobile (open source)
  • 73. jQuery Mobile Platform Support
  • 74. jQuery Mobile Platform Support
  • 75. Example- Twitter for iPad
  • 76. Counter Example - Facebook
  • 77. Example - Sencha
  • 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. Even more featuresIf we have time left…
  • 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?
  • 82. Web Workers  JavaScript threads  Runbackground tasks, separate from UI thread  Create responsive UI
  • 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
  • 92. HTML 5 Thanks!Overview