html5, o que já é e o que pode ser
Post on 24-May-2015
691 Views
Preview:
DESCRIPTION
TRANSCRIPT
Mozart Diniz
mozart.diniz@gmail.com
@mozartdiniz
Friday, September 20, 13
Friday, September 20, 13
Friday, September 20, 13
Friday, September 20, 13
WHATWG
Friday, September 20, 13
HMTL + CSS + JS
+ +
Friday, September 20, 13
<!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
Friday, September 20, 13
<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
Friday, September 20, 13
<header></header><navigation></navigation>
<article> <section> </section></article>
<aside></aside><foorter></foorter>
Agora
Friday, September 20, 13
Muitas novas <tag>s
Friday, September 20, 13
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 showcaseThis Shell
Vídeo
Friday, September 20, 13
<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
Friday, September 20, 13
function videoControl(){ var v = document.getElementById("video1"); if(v.paused) { v.play(); } else { v.pause(); }};
Que tal um pouco de controle?Vídeo
Friday, September 20, 13
Balldroppings.comTuner | Instinct
Soundcloud.com
AudioSimples e poderoso como o vídeo.
Friday, September 20, 13
<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
Friday, September 20, 13
Audio
function videoControl(){ var v = document.getElementById("audio1"); if(v.paused) { v.play(); } else { v.pause(); }};
Que tal um pouco de controle?
Friday, September 20, 13
Audio Api
http://chromium.googlecode.com
http://chromium.googlecode.com
Friday, September 20, 13
CanvasUm 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>
Friday, September 20, 13
KaleidoscopeJscloth
Cnn-ecosphere.com
Canvas
Friday, September 20, 13
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
Friday, September 20, 13
Picozu
Tenha seu próprio Photoshop online.Canvas
Friday, September 20, 13
Primeiro, alguns clássicos.Atari Arcade Games
GamesCanvas + Audio + Vídeo + Muito JavaScript
Friday, September 20, 13
Hex GLhttp://hexgl.bkcore.com/
Que tal esse então?Epic Cidadel
Suporte a eventos de Touch!http://www.contrejour.ie/#fbid=SEAxT7ZGYCn
GamesJogando com 3D
Friday, September 20, 13
Muita coisa pode acontecer com um pouco de <canvas> e uma web cam.
Webcamtoy.com
Devices
Friday, September 20, 13
Easysubtitles.comArmadillog
File API
Não é só um upload com drag and drop.
Friday, September 20, 13
WebRTC | demo
WebRTC(Web Real-Time Communication)
Friday, September 20, 13
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
Friday, September 20, 13
Mais do que um Fluid Layout
Friday, September 20, 13
www.fork-cms.com
myrainbownursery.co.uk
www.printgr.am
Mais do que um Fluid Layout
Friday, September 20, 13
TransitionsNo 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 EffectsTransitions em Listas
Planetarium
Friday, September 20, 13
AnimationMostre-me algo mais animado do que isso!
BetaFishIE
http://demo.tutorialzine.com/2012/02/css3-product-showcase/#/upload
CSS3 : A new hope
Friday, September 20, 13
3D Effects
Movie InfoTime MachineSwatch Book3D Thumbnail
Friday, September 20, 13
AppsExiste 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/
Friday, September 20, 13
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 DashboardWindows 8 AppsGnome Desktop Apps
Firefox OSChrome
Além dos sites
Apps
SO
Friday, September 20, 13
<duvidas todas="true">
Apps
Friday, September 20, 13
<obrigado>
Apps
Friday, September 20, 13
top related