Download - HTML5 Technical Executive Summary
![Page 1: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/1.jpg)
HTML 5
OverviewGilad Khen
September 2012
HTML5 Technical Executive Overview
![Page 2: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/2.jpg)
About Me
Gilad KhenProfile:
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
http://linkedin.com/in/giladkhen
![Page 3: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/3.jpg)
What’s In This Lecture For You
Some 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
![Page 4: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/4.jpg)
Background
![Page 5: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/5.jpg)
HTML - Definition
That 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)
![Page 6: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/6.jpg)
JavaScript - Definition
Browsers scripting language
Interpreted, weakly typed
Popular version – 1.5 / 1.6
(published - 2000)
HTML = HTML + JS + CSS
Language vs. API
![Page 7: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/7.jpg)
CSS - Definition
Controls the look of HTML documents
Cascading Style Sheets
Popular version – 2.1
(published - 2004)
HTML = HTML + JS + CSS
![Page 8: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/8.jpg)
HTML Standard Release Cycle (W3C)
Working Draft
Last Call Working Draft
Call for implementation
Call for Review
Recommendation (REC)
Version++
![Page 9: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/9.jpg)
Cross-Platform R&D Challenge
Designing for multiple platforms
Implementing for multiple platforms
Testing in multiple platforms
![Page 10: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/10.jpg)
The Good News
HTML5 was designed (among other things)
to solve the multiple-
platforms problem
![Page 11: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/11.jpg)
The Bad News
It didn’t.
![Page 12: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/12.jpg)
The Ugly News
It made it worse.
![Page 13: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/13.jpg)
Don’t Panic
Same old story as 10 years ago (HTML4)
New features available
Not all browsers are equal
X-browser Infrastructure available
R&D overhead remains
(Unless it’s IE6)
![Page 14: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/14.jpg)
HTML5 - Introduction
![Page 15: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/15.jpg)
HTML5 - Definition
A natural evolution of HTML4
New DOM elements
New JavaScript APIs
New CSS tricks
“HTML5 is a brand”
Typically also means “CSS3”
Additional associated JS APIs
Everything new cool thing on the web
![Page 16: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/16.jpg)
HTML5 - Features CategoriesMore details later…
![Page 17: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/17.jpg)
HTML5 - A Moving Target
Specifications / support changes rapidly
Browser / version / feature readiness – http://caniuse.com
![Page 19: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/19.jpg)
HTML5 Readiness - 2008
![Page 20: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/20.jpg)
HTML5 Readiness - 2009
![Page 21: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/21.jpg)
HTML5 Readiness - 2010
![Page 22: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/22.jpg)
HTML5 Readiness - 2011
![Page 23: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/23.jpg)
HTML5 Readiness – Timeline
![Page 24: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/24.jpg)
HTML5 Readiness – Mobile Browsers
![Page 25: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/25.jpg)
HTML5 in Browser Wars
![Page 26: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/26.jpg)
HTML5 in Browser Wars
![Page 28: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/28.jpg)
Polyfills – DHTML Fallbacks for HTML5
Google: “html5 polyfills”
![Page 31: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/31.jpg)
The Million $ Question
“Can we write our app in HTML5 Today?”
Yes
No
We already did (HTML4 ?)
All of the above
![Page 32: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/32.jpg)
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…
![Page 33: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/33.jpg)
Why are we here (now)?
![Page 34: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/34.jpg)
HTML5 Hype – Search Trends
Work on
HTML5
Started
iPhone
Released,
HTML SDK
Only
Native
iPhone
SDK
Released
iPad
released,
no Flash
Google Search trends for “HTML5”
2004- 2011
![Page 35: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/35.jpg)
HTML5 Hype - Job Trends
![Page 36: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/36.jpg)
What’s Next?
![Page 37: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/37.jpg)
HTML5 Hype – Forecast
![Page 38: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/38.jpg)
Features Overview
![Page 39: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/39.jpg)
Graphics – Features
PNG Alpha Transparency
Data URLs
CSS3 Colors
SVG (basic support)
Canvas (basic support)
Video element
CSS Transforms
Text API for Canvas
SVG in CSS Backgrounds
SVG effects for HTML elements
SVG SMIL animation
SVG Fonts
SVG filters
CSS3 Animation
Inline SVG in HTML5
3D Canvas graphics / WebGL
CSS 3D Transforms
![Page 40: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/40.jpg)
Canvas – 2D
Generating vector graphics using JavaScript
Support already widely implemented
![Page 41: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/41.jpg)
Canvas – 3D
Generating 3D graphics using JavaScript
Not really part of W3C HTML5 Standard
Partial desktop support, no mobile suppport
![Page 42: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/42.jpg)
Canvas - API
![Page 43: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/43.jpg)
Canvas - API
![Page 44: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/44.jpg)
Canvas – Cross Browser
![Page 45: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/45.jpg)
Canvas – Usage Types
Games, charts, vector maps etc…
![Page 46: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/46.jpg)
Example - Zynga
![Page 47: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/47.jpg)
Example - Disney
![Page 48: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/48.jpg)
Multimedia
Audio element
Video element
WebRTC
![Page 49: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/49.jpg)
Audio
Playing sounds without flash
Support already widely implemented
Caveat – no standard for codecs
![Page 50: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/50.jpg)
Audio - Codecs
Requires maintaining content in multiple formats
Requires server side setup (MIME Type)
Pollyfill availbale – audio.js
![Page 51: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/51.jpg)
Audio - API
![Page 52: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/52.jpg)
Example - exfm
![Page 53: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/53.jpg)
Video
Playing videos without flash
Support already widely implemented
Caveat – no standard for codecs
![Page 54: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/54.jpg)
Video - Codecs
Requires maintaining content in multiple formats
Requires server side setup (MIME Type)
Pollyfill availbale – http://videojs.com/
![Page 55: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/55.jpg)
Video - API
Requires maintaining content in multiple formats
Requires server side setup (MIME T
![Page 56: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/56.jpg)
Example - YouTube
![Page 57: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/57.jpg)
Video – Performance Benchmark
![Page 58: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/58.jpg)
WebRTC
Not part of the HTML5 standard
Packages multiple technologies
Access to local camera feed
NAT traversal
P2P
Beta Browsers – Chrome, Opera IE, Firefox
![Page 59: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/59.jpg)
WebRTC
![Page 60: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/60.jpg)
WebRTC
![Page 61: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/61.jpg)
Offline
Create desktop/mobile offline apps with HTML5/JS
Requires server setup
Use along with web storage / web SQL database
![Page 62: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/62.jpg)
Web Storage
Like cookies, but up to ~5MB
Stored as string name value pairs
Saves on cookie traffic!
![Page 63: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/63.jpg)
Example – Gmail Mobile
![Page 64: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/64.jpg)
Gmail Mobile
![Page 65: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/65.jpg)
Example – Amazon Kindle Cloud Reader
![Page 66: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/66.jpg)
Amazon Kindle Cloud Reader
![Page 67: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/67.jpg)
Geolocation
Get current geographical location
Widely supported across mobile platforms
Plan for opt-in permission dialogs
![Page 68: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/68.jpg)
Geolocation - API
![Page 69: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/69.jpg)
Geolocation - API
![Page 70: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/70.jpg)
Example - Nokia
![Page 71: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/71.jpg)
HTML5 with Mobile Devices
![Page 72: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/72.jpg)
jQuery Mobile (open source)
![Page 73: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/73.jpg)
jQuery Mobile Platform Support
![Page 74: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/74.jpg)
jQuery Mobile Platform Support
![Page 75: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/75.jpg)
Example- Twitter for iPad
![Page 76: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/76.jpg)
Counter Example - Facebook
![Page 77: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/77.jpg)
Example - Sencha
![Page 78: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/78.jpg)
HTML5 Mobile R&D Strategies
Optional strategies:
Pure HTML
Pros:
Easy
Target multiple platforms
Offline capabilities
Bypass App Stores
Cons:
Sandboxed
x-browser overhead
Limited performance?
Native shell, HTML frame
Pros:
Access native functionality
(phonegap / custom)
Shared HTML codebase
App Store friendly
Cons:
Requires initial “stitching”
Limited performance?
![Page 79: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/79.jpg)
If we have time left…
Even more features
![Page 80: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/80.jpg)
New Form Elements
Date pickers, sliders, validation, placeholders
Partially implemented in most browsers
No standard for display
![Page 81: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/81.jpg)
Semantic Elements
<section> <article> <header> <footer> <nav>
<aside>
SEO game changer?
![Page 82: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/82.jpg)
Web Workers
JavaScript threads
Run background tasks, separate from UI thread
Create responsive UI
![Page 83: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/83.jpg)
Web Sockets
Bi-directional, full-duplex communications channels over
TCP
Currently disabled in some browsers due to security issues
![Page 84: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/84.jpg)
Cross-document Messaging
Sending information between pages in different
domains
IE – not between tabs
![Page 85: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/85.jpg)
So what’s the catch?
![Page 86: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/86.jpg)
Crossing The Hype Chasm
Aim Here
![Page 87: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/87.jpg)
HTML5 - Buzz vs. Reality
HTML5 is backward compatible
HTML5 is cross-browser
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
Yep
Maybe
Nope
![Page 88: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/88.jpg)
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
![Page 89: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/89.jpg)
Implications
In the future we will (hopefully) be able to
Target most platforms using HTML5
Leverage more and more HTML5 features
![Page 90: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/90.jpg)
HTML5 - Summary
![Page 91: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/91.jpg)
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
![Page 92: HTML5 Technical Executive Summary](https://reader033.vdocuments.us/reader033/viewer/2022052822/554e69eab4c90545698b4657/html5/thumbnails/92.jpg)
HTML 5
OverviewThanks!