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

aaltowebapps.com

Nobody
told
you ?


1.2 billion

active mobile Web users in 2011

20-25% Web users are only mobile
Apps vs Web

Building good web apps is not easy

Performance was/is (sometimes) not enough

Browser support (on mobile) is fragmented

Web is evolving fast


I think the biggest mistake we made as a company is betting too much on HTML5 as opposed to native.
Mark Zuckerberg, Facebook CEO

No client-side rendering

No templating

No local storage of data

No tolerance for high-latency

No JSON API

No mobile optimization

He still claimed their biggest mistake was betting on HTML5 when their real biggest mistake was incompetent execution

Yehuda Katz

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

Packaging and installing an app

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
How do we build

Web Apps

with HTML5 ?
Types of Web Apps:

Hosted Web App ( Cache Manifest )

Tizen ( W3C Widget )

Firefox OS ( Open Web App )

PhoneGap

Diagram showing the various components of the Web platform
The Web as an application development platform
Is it really that easy ?
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
Responsive Design

Server-side Detection
Nokia 113

128 x 160 pixels

1.8 inches display (114 ppi)

33€

Proxy Browser

Google Nexus 10

2560 x 1600 pixels

10.1 inches display (299 ppi)

999,90€

Various browsers

Mobile usability
Content Parity
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