Pra quem estiver no laptop...

http://comousarhtml5semumamaquinadotempo.com

Use as setas para navegar

<!DOCTYPE html PUBLIC "-//W3C
//DTD XHTML 1.0 Transitional//EN" "http://www.w3
.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">

Mas peraí...

Para navegadores antigos uma tag <header> tem o mesmo valor semântico que uma tag <zeno>.

Portanto, precisamos dizer ao navegador que esses elementos devem ser renderizados como blocos.

No JS:

No CSS:

Algumas novidades
para aplicações

carregando...

3/4 carregado

Dispositivos móveis

Cookies

< 4kb
enviado ao servidor a cada requisição
performance #fail

Web Storage

< 5mb
não é enviado ao servidor
performance #win
formato chave/valor (hashtable)

session storage

Armazenamento de dados por sessão sessionStorage.setItem('algumaChave', 'algumValorQualquer'); sessionStorage.getItem('algumaChave'); // 'algumValorQualquer'

local storage

Armazenamento de dados sem limite de tempo localStorage.setItem('algumaChave', 'algumValorQualquer'); localStorage.getItem('algumaChave'); // 'algumValorQualquer'
E mais: localStorage.length; // número de itens armazenados localStorage.key(0); // 'algumValorQualquer' localStorage.removeItem('algumValorQualquer'); localStorage.clear();

Input de áudio

Geolocalização

Device orientation

Event Supported
Tilt Left/Right [tiltLR]
Tilt Front/Back [tiltFB]
Direction [direction]
Motion Up/Down

Áudio

E ainda mais atributos como:

autoplay
loop
preload

Vídeo

E ainda mais atributos como:

poster / muted

SVG

Gráficos vetoriais escaláveis
É o oposto de um bitmap, pois não lida com pixels e sim com um conjunto de curvas e linhas
Linguagem no estilo XML <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" fill="red" /> </svg>

Canvas

Renderização de gráficos via script <canvas id="meuDesenho" width="500" height="500"> var canvas = document.getElementById("meuDesenho"); canvas = canvas.getContext("2d");

WebGL

3D + Browser = Wooow!
JavaScript + GPU = Wooow²!
Utiliza a tag <canvas> só que com um outro contexto <canvas id="meuDesenho" width="500" height="500"> var canvas = document.getElementById("meuDesenho"); canvas = canvas.getContext("experimental-webgl");

Quer brincar de verdade?

http://bit.ly/sY4hv6

text-shadow text-outline box-shadow border-radius gradient transform border-image text-overflow

@font-face

CSS animation

Content precedes design. Design in the absence of content is not design, it's decoration.

Jeffrey Zeldman

A guerra ainda não acabou

☑ Saddam Hussein
☑ Osama Bin Laden
☑ Khaddafi
☐ Internet Explorer

Give, give, give! - you'll be impressed by how fast things will come back

Small Acts Manifesto

Pra quem estiver no laptop...

Use as setas para navegar

Soul Reaper

HTML5 já está pronto?

Semântica

Mas peraí...

Algumas novidades para aplicações

Algumas novidades para formulários

Dispositivos móveis

Dispositivos móveis

Google 404

Armazenamento

Cookies

Web Storage

session storage

local storage

To-do List

Acesso à hardware

Input de áudio

Geolocalização

Device orientation

Terminal

Multimídia

Áudio

Vídeo

Gráficos

SVG

Park

Canvas

Wormz

WebGL

Cube

Skin

Quer brincar de verdade?

CSS

@font-face

Atlantis

CSS animation

Spiderman

Expressive Web

A guerra ainda não acabou

Occupy Flash

Algumas novidades
para aplicações

Algumas novidades
para formulários