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

<section>
<article>
<aside>
<hgroup>
<header>
<footer>
<nav>
<figure>
<figcaption>
<video>
<audio>
<source>
<track>
<embed>
<mark>
<progress>
<meter>
<time>
<ruby>
<rt>
<rp>
<bdi>
<wbr>
<canvas>
<command>
<details>
<summary>
<datalist>
<keygen>
<output>

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

Pick your favorites

Semantics

Use in old browsers

Use in bad browsers

CSS3 Styling

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

Demo

demo/demo/index.html

How browsers handle CSS

Safari:
IE < 9:

Welcome to prefix hell!

How about Internet Explorer?

Shadows

demo/demo1/speakers.html

Rounded corners and Gradients

demo/demo2/speakers.html

Transforms and Transitions

demo/demo3/speakers.html

Animations

demo/demo4/speakers.html

History

demo/demo4/speakers.html

Use Ajax to get content

Add History

Benefits

Offline

WebSockets

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

Benefits

demo/demo6/speakers.html

Server (Jetty)

JavaScript

Conclusions