HTML5, o que já é e o que pode ser.

Mozart Diniz
mozart.diniz@gmail.com
@mozartdiniz
Friday, September 20, 13

WHATWG

HMTL + CSS + JS
+ +

<!doctype html>
<meta charset="utf-8" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Antes
Agora

<div id="header"></div>
<div id="navigation"></div>
<div id="article">
<div id="section">
</div>
</div>
<div id="aside"></div>
<div id="foorter"></div>
Antes

<header></header>
<navigation></navigation>
<article>
<section>
</section>
</article>
<aside></aside>
<foorter></foorter>
Agora

Muitas novas <tag>s

Vídeo em HTML é apenas para não ter que usar mais
Flash e ter algo para reproduzir mídía, certo?
Vejamos o que conseguimos fazer.
Apple showcase
This Shell
Vídeo

<video width="640" height="480" id="video1" controls="controls">
<source src="media/mov_bbb.mp4" type="video/mp4">
<source src="media/mov_bbb.ogg" type="video/ogg">
O seu navegador não dá suporte à vídeo com HMTL5
</video>
Vídeo

function videoControl(){
var v = document.getElementById("video1");
if(v.paused) {
v.play();
} else {
v.pause();
}
};
Que tal um pouco de controle?
Vídeo

Balldroppings.com
Tuner | Instinct
Soundcloud.com
Audio
Simples e poderoso como o vídeo.

<audio controls="controls" id="audio1">
<source src="media/naturesounds.ogg" type="audio/ogg">
Seu browser deve ser o IE6-8, não suporta audio
</audio>
Audio

Audio
function videoControl(){
var v = document.getElementById("audio1");
if(v.paused) {
v.play();
} else {
v.pause();
}
};
Que tal um pouco de controle?

Audio Api
http://chromium.googlecode.com
http://chromium.googlecode.com

Canvas
Um novo e completo mundo para o HTML,
praticamente tudo que possa ser representado
por um desenho 2D ou 3D pode ser feito com o
<canvas>

Kaleidoscope
Jscloth
Cnn-ecosphere.com
Canvas

var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.fillRect(10,20,50,50);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.lineWidth = 3;
ctx.strokeRect(9, 19, 52, 52);
Canvas

Picozu
Tenha seu próprio Photoshop online.
Canvas

Primeiro, alguns clássicos.
Atari Arcade Games
Games
Canvas + Audio +Vídeo + Muito JavaScript

Hex GL
http://hexgl.bkcore.com/
Que tal esse então?
Epic Cidadel
Suporte a eventos de Touch!
http://www.contrejour.ie/#fbid=SEAxT7ZGYCn
Games
Jogando com 3D

Muita coisa pode acontecer com um pouco de
<canvas> e uma web cam.
Webcamtoy.com
Devices

Easysubtitles.com
Armadillog
File API
Não é só um upload com drag and drop.

WebRTC | demo
WebRTC
(Web Real-Time Communication)

Com a adição do Media Types e o Media
Queries ao CSS3 podemos ter um único
conjunto de regras de CSS que mudam
completamente nos mais diferentes dispositivos
e tamanhos de telas.
Layout Responsivo

Mais do que um Fluid Layout

www.fork-cms.com
myrainbownursery.co.uk
www.printgr.am
Mais do que um Fluid Layout

Transitions
No more JavaScript to donkey tasks
Agora com o CSS você pode animar várias mudanças de
estilos entre os diferentes níveis de interação.
Hover Effects
Transitions em Listas
Planetarium

Animation
Mostre-me algo mais animado do que isso!
BetaFishIE
http://demo.tutorialzine.com/2012/02/css3-product-
showcase/#/upload
CSS3 :A new hope

3D Effects
Movie Info
Time Machine
Swatch Book
3D Thumbnail

Apps
Existe todo um novo mercado voltado para as novas
possibilidades de aplicações com HMTL5,
principalmente no mundo mobile.
http://www.sencha.com/
http://phonegap.com/

Além dos frameworks mobile as grandes empresas estão
adotando o HMTL5 como possibilidade de camada de
interface com o usuário, ou como plataforma.
MacOs Dashboard
Windows 8 Apps
Gnome Desktop Apps
Firefox OS
Chrome
Além dos sites
Apps
SO

<duvidas todas="true">
Apps

<obrigado>
Apps

HTML5, o que já é e o que pode ser.

Recommended

Recommended

More Related Content

Featured

Featured (20)

HTML5, o que já é e o que pode ser.