html5 technical executive summary
DESCRIPTION
90 slides of HTML5 introduction for technical executivesTRANSCRIPT
HTML 5
OverviewGilad Khen
September 2012
HTML5 Technical Executive Overview
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
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
Background
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)
JavaScript - Definition
Browsers scripting language
Interpreted, weakly typed
Popular version – 1.5 / 1.6
(published - 2000)
HTML = HTML + JS + CSS
Language vs. API
CSS - Definition
Controls 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
Last Call Working Draft
Call for implementation
Call for Review
Recommendation (REC)
Version++
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
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)
HTML5 - Introduction
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
HTML5 - Features CategoriesMore details later…
HTML5 - A Moving Target
Specifications / support changes rapidly
Browser / version / feature readiness – http://caniuse.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
Polyfills – DHTML Fallbacks for HTML5
Google: “html5 polyfills”
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 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
HTML5 Hype - Job Trends
What’s Next?
HTML5 Hype – Forecast
Features Overview
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
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
Requires server 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 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?
If we have time left…
Even more features
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
Run background 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
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
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
Target most 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
OverviewThanks!