HTML5 Technical Executive Summary
Upcoming SlideShare
Loading in...5
×
 

HTML5 Technical Executive Summary

on

  • 5,182 views

90 slides of HTML5 introduction for technical executives

90 slides of HTML5 introduction for technical executives

Statistics

Views

Total Views
5,182
Views on SlideShare
5,177
Embed Views
5

Actions

Likes
13
Downloads
437
Comments
0

3 Embeds 5

http://www.linkedin.com 2
http://pmomale-ld1 2
http://campusvirtual.duoc.cl 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Technical Executive Summary HTML5 Technical Executive Summary Presentation Transcript

  • HTML5 Technical Executive Overview HTML 5 Gilad Khen Overview September 2012
  • 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
  • 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
  • Background
  • 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)
  • JavaScript - DefinitionBrowsers scripting language Interpreted, weakly typed Popular version – 1.5 / 1.6 (published - 2000) HTML = HTML + JS + CSS Language vs. API
  • CSS - DefinitionControls the look of HTML documents Cascading Style Sheets Popular version – 2.1 (published - 2004) HTML = HTML + JS + CSS
  • HTML Standard Release Cycle (W3C) Working Draft Version++ Last Call Working Draft Recommendation (REC) Call for implementation Call for Review
  • Cross-Platform R&D Challenge Designing for multiple platforms Implementing for multiple platforms Testing in multiple platforms
  • 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 available  Not all browsers are equal  X-browser Infrastructure available  R&D overhead remains
  • HTML5 - Introduction
  • 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
  • HTML5 - Features CategoriesMore details later…
  • HTML5 - A Moving Target Specifications / support changes rapidly Browser / version / feature readiness – http://caniuse.com
  • 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 of the above
  • 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…
  • Why are we here (now)?
  • 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
  • HTML5 Hype - Job Trends
  • What’s Next?
  • HTML5 Hype – Forecast
  • Features Overview
  • 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
  • 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 support, no mobile suppport
  • 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 availbale – audio.js
  • 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 availbale – http://videojs.com/
  • 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 traversal  P2P Beta Browsers – Chrome, Opera IE, Firefox
  • WebRTC
  • WebRTC
  • Offline Create desktop/mobile offline apps with HTML5/JS  Requiresserver setup  Use along with web storage / web SQL database
  • 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 permission dialogs
  • 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:  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?
  • Even more featuresIf we have time left…
  • New Form Elements Date pickers, sliders, validation, placeholders  Partially implemented in most browsers  No standard for display
  • 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 due to security issues
  • 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 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
  • 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
  • Implications In the future we will (hopefully) be able to  Targetmost platforms using HTML5  Leverage more and more HTML5 features
  • HTML5 - Summary
  • 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
  • HTML 5 Thanks!Overview