HTML5 Technical Executive Summary

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 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

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

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 - 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 Categories
More 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 – Mobile Browsers

Detecting HTML5 Support – Run Time
http://modernizr.com

Polyfills – DHTML Fallbacks for HTML5
Google: “html5 polyfills”

HTML5 Native Mobile Integration
http://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…

HTML5 Hype – Search Trends
Google Search trends for “HTML5” iPad
2004- 2011 iPhone released,
Released, no Flash
HTML SDK
Only

Work on Native
HTML5 iPhone
Started SDK
Released

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 – Usage Types
 Games, charts, vector maps etc…

Multimedia
 Audio element
 Video element
 WebRTC

Audio
 Playing sounds without flash
 Caveat – no standard for codecs

Audio - Codecs
 Requires maintaining content in multiple formats
 Requires server side setup (MIME Type)
 Pollyfill availbale – audio.js

Video
 Playing videos without flash
 Caveat – no standard for codecs

Video - Codecs
 Requires server side setup (MIME Type)
 Pollyfill availbale – http://videojs.com/

Video - API
 Requires server side setup (MIME T

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

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 – Amazon Kindle Cloud Reader

Geolocation

 Get current geographical location
 Widely supported across mobile platforms
 Plan for opt-in permission dialogs

jQuery Mobile Platform Support

HTML5 Mobile R&D Strategies
Optional 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 features
If 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

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 – 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

HTML5 Technical Executive Summary

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to HTML5 Technical Executive Summary (20)

Recently uploaded (20)

HTML5 Technical Executive Summary