Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome Safari or Firefox browser.

HTML5 and

The Mobile Web Revolution

Claudio Riva

"How is HTML5 maturity level ?"
So, what is

HTML version 5 ?

1998 - W3C decided they will stop evolving HTML beyond version 4.01

1999 - HTML 4.01 becomes a recommendation

2000 - W3C released XHTML 1.0 and force the world to use XML

2002 - W3C released first draft of XHTML 2.0, no backwards compatibility

2004 - WHATWG started working on HTML v5 (Opera, Mozilla and Apple)

2006 - W3C agrees to use WHATWG proposal for HTML5

2009 - W3C stops works on XHTML 2.0 and resources are diverted to HTML5

2012 - HTML5 gets forked up

2014 - HTML 5.0 will become a recommendation (according to W3C)

2016 - W3C plans to release HTML 5.1

Philosophy of HTML v5

Specify undocumented features (e.g. XMLHttpRequest)

Browser behaviour with invalid markup

Support web applications

Define an open standard (opposed to Flash)

Don't break the Web

New Tags

section, header, footer, nav, ...


New Form Controls & Types

date, range, email, url, tel, ...


New Form Validation

by type, required, :valid, :invalid, :required

Offline Usage

Install a package on the device

online/offline events


Storage

Persistent and Session Storage

key/value (strings)

IndexDB and SQL storage

Multimedia

Audio and Video Tags

Javascript API & events

Some codecs supported

3D, Graphics and Effects

2D Canvas API

SVG support

WebGL

Device Access

Accelerometer / gyroscope / magnetometer

Orientation change

Touch events (touchstart, touchmove, touchend)

File API and File Reader

Media Capture API

CSS New Styling

    Rounded borders, shadows, opacity


CSS 2D & 3D transforms

    rotate, scale, skew, translate


CSS Transitions

    basic animations between 2 states

    keyframe animations

Communication

Web Sockets

Server-sent Events

Performance & Optimization

Notifications API

XMLHttpRequest 2

Web Workers

Does this stuff actually work ?
What about

mobile HTML5 ?

What's the

HTML5 promise

for mobile development ?
Mobile Platforms
Smartphone Platforms Shares
Smartphone Languages Shares
Smartphone Browser Shares
Smartphone HTML5 Shares
What really maters to us and to the developers ?
Functionality
  1. W3C / WHATWG
  2. Tizen/Mozilla Device APIs
  3. Phonegap
  4. Mobile jQuery / Sencha / Backbone.js
Responsiveness




Scroll Performance

Touch Performance

2D/3G Graphics

2D Canvas

WebGL



Javascript Performance

JIT




Hardware Acceleration

Video

2D Graphics

WebGL

Compositing

Software Rendering
GPU Accelerated Compositing
Additional Optimizations



Only the graphics layers that intersects with a damage rectangle are repainted
2D Graphics Acceleration



Canvas 2D
Software Rendering
Hardware Assistance/Acceleration
Web Browsers

Too many

Some are limited

Some are too innovative

Some are proxy based

Little debugging support

Various input methods (focus, cursor, touch, multi-touch)

API support

Adaptation

Optimization
Mobile usability
Touch vs Click

Viewport

Full screen

Pixel density

Data URI - inlining content

Hybrid Apps
Mobile web is slow
Performance Optimization

No redirect

Semantic html5

Leverage CSS

Inline images

Reduce HTTP requests

Web Development is fun




Thank You

Use a spacebar or arrow keys to navigate