Hi there!

This presentation works best in Chrome and Safari, bad in Firefox and worst (if at all) in Opera and Internet Explorer.

Use a spacebar or arrow keys to navigate and . to resize demos.

So, why don't you press spacebar to get started. I hope you will like it.

/Joakim

HTML5 and CSS3

Let's enhance the web today

Joakim Kemeny

@joakimkemeny

HTML5 and CSS3

Why?

To replace Flash!

To be mobile!

To replace HTML 4.01?

Is it ready?

...or when will it be ready?

What?

New elements

<aside>

<nav>

<video>

<audio>

<track>

<embed>

<mark>

<meter>

<time>

<ruby>

<rt>

<rp>

<bdi>

<wbr>

New input types

type = tel

type = search

type = url

type = email

type = datetime

type = date

type = month

type = week

type = time

type = datetime-local

type = number

type = range

type = color

New APIs and technologies

SVG

MathML

Canvas

WebGL

WOFF

Geolocation

Touch Events

User Media

Vibration

Indexed Database

Offline applications

Web Storage

Web Sockets

Server-Sent Events

Session History

Drag & Drop

UndoManager

Web Workers

File

…

How?

First step

Great tool html5boilerplate.com

Pick your favorites

Semantics

5
4
3
2
1

5
4
3
2
1

5
4
3
2
1

5
4
3
2
1

5
4
3
2
1

Use in old browsers

Great tool necolas.github.com/normalize.css

5
4
3
2
1

Use in bad browsers

Great tool modernizr.com

5
4
3
2
1

CSS3 Styling

5
4
3
2
1

CSS Modules

Color

Namespaces

Selectors

Media Queries

Style Attributes

Backgrounds and Borders

Marquee

Speech

Transforms

Transitions

Values and Units

Flexible Box Layout

Fonts

Text

Writing Modes

Device Adaptation

Grid Layout

Lists

Regions

…

5
4
3
2
1

Demo

How browsers handle CSS

Safari:

IE < 9:

5
4
3
2
1

Welcome to prefix hell!

5
4
3
2
1

Great tool sass-lang.com

5
4
3
2
1

How about Internet Explorer?

5
4
3
2
1

Shadows

5
4
3
2
1

Rounded corners and Gradients

5
4
3
2
1

Transforms and Transitions

5
4
3
2
1

Animations

5
4
3
2
1

History

5
4
3
2
1

Use Ajax to get content

5
4
3
2
1

Add History

5
4
3
2
1

Benefits

5
4
3
2
1

Navigation

Bookmarks

Refresh

Great framework backbonejs.org

5
4
3
2
1

Offline

5
4
3
2
1

Offline

Application Cache

Indexed Database

Local Storage

WebSockets

5
4
3
2
1

Example

Let's poll every second (HTTP headers = 500 - 1000 bytes)

1 000 client → 500 000 bytes/s → 3.8 Mbps
10 000 client → 500 000 bytes/s → 38 Mbps
100 000 client → 500 000 bytes/s → 381 Mbps

Let's use WebSockets

1 000 client → 2 000 bytes/s → 0.015 Mbps
10 000 client → 20 000 bytes/s → 0.15 Mbps
100 000 client → 200 000 bytes/s → 1.5 Mbps

5
4
3
2
1

Benefits

5
4
3
2
1

2 bytes overhead

Full duplex

Firewall friendly

5
4
3
2
1

Server (Jetty)

5
4
3
2
1

5
4
3
2
1

JavaScript

5
4
3
2
1

Conclusions

It's ready…

…and you can do really cool things!

Great resource html5please.com

HTML5 is not difficult…

…but old browsers complicates life

Great resource caniuse.com

HTML5 and CSS3

Let's enhance the web today

Joakim Kemeny

@joakimkemeny

HTML5 and CSS3

Why?

Is it ready?

...or when will it be ready?

What?

New elements

New input types

New APIs and technologies

How?

First step

Pick your favorites

Semantics

Use in old browsers

Use in bad browsers

CSS3 Styling

CSS Modules

Demo

How browsers handle CSS

Welcome to prefix hell!

How about Internet Explorer?

Shadows

Rounded corners and Gradients

Transforms and Transitions

Animations

History

Use Ajax to get content

Add History

Benefits

Offline

Offline

WebSockets

Example

Benefits

Server (Jetty)

JavaScript

Conclusions

HTML5 and CSS3

Thank you for coming!

Joakim Kemeny

@joakimkemeny

github.com/joakimkemeny