Html 5 e Css3

HTML 5
II Jornada de Sistemas para
Internet - FATESM
1sexta-feira, 22 de outubro de 2010

O que é o HTML 5?

XML
APIs
HTML 5
CSS 3
JavaScript

Histórico
HTML HTML 4 XHTML HTML 5
1990 1997 2000 2010+

w3c e o xhtml 2
<img />

XHTML 2 não é web!

Grupos de Trabalho
HTML WGWHAT WG

Princípios básicos
Simplicidade Adaptação

Enxergar o futuro
Compreender o passado
Tradição

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

<!DOCTYPE html>

- XML + HTML

WEB 3.0

Quando vai estar
pronto?

W3C: não utilize HTML 5!
Mito ou verdade?

Chrome Opera Internet
Explorer
SafariFirefox

CNN
Flickr
The NewYork Times
Time
Vimeo
Apple
Google
Youtube
Nike
Globo.com
Facebook
Adobe
National
Geographic
Videolog

Progressive
Enhancement
■ conteúdo e funcionalidades básicas
disponível para qualquer browser
■ marcação semântica
■ CSS e JavaScript em arquivos
externos e modularizados
■ manter os padrões do browser do
usuário

Shims, Fallbacks e
Polyﬁlls
@rem // Remy Sharp
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls
http://goo.gl/KQDB

Estamos coletando todos os shims, fallbacks e polyfills a fim de
implementar a funcionalidade do HTML 5 em browsers que não oferecem
suporte ao mesmo.
A ideia geral é: nós, desenvolvedores, devemos ser capazes de desenvolver
com as APIs do HTML 5 e scripts podem criar os métodos e objetos que
precisam existir. Desenvolver nesse modo “a prova de futuro” significa que
enquanto os usuários se atualizam, seu código não precisa mudar e assim
eles já migram para uma experiência melhor e nativa, através de uma
forma limpa.

Novos elementos

header
hgroup
section
article aside
nav
footer
audiovideo
ﬁgure ruby progress
Elementos estruturais

section
uma seção genérica do documento
div
passa a ser somente um bloco qualquer

header
cabeçalho do documento ou seção
footer
rodapé do documento ou seção

aside
conteúdo que não representa o assunto principal do documento
ou seção
nav
seção de navegação

article
uma seção independente do documento
hgroup
conjunto de títulos e subtítulos em um cabeçalho

video
coisa mais linda do mundo
audio
coisa mais linda do mundo, só que você não vê

video
elemento contento vídeo nativo, sem utilização de plugin
externo
audio
o mesmo que acima, mas obviamente indica um áudio

Mas como funciona
essa estrutura?

header
footer
section

header
footer
section#container
asidesection#artigos

header
footer
section#container
hgroup
h1 com título da página
h2 com um subtítulo bem legal
nav
home contato faq docs
ul
li:
section / div
pesquisar...

header
footer
section#container
asidesection#artigos
article
article
article

article
h1 com título do artigo
header
algumas informações nesse rodapé do artigo, sobre o artigo
footer
algum texto aqui, o próprio conteúdo do artigo

H1 no artigo?? E a
hierarquia???!?!

Nova ordenação hierárquica dos títulos

Como ﬁca a marcação?

Temos mais elementos?

E o que não temos
mais?
acronym
font
big
frame
applet
frameset
marquee!!!

A marcação HTML não deﬁne
estilização visual

O HTML 5 não tem
<marquee>!

Mais simplicidade

<head> e <body>
podem ser omitidos...

<head> e <body>
podem ser omitidos...
Mas não faça isso!

tags únicas não
precisam de /
<br /> <br>

Esqueça os blocos

Problema Estrutural

É muito simples
resolver...

Podemos criar
elementos “novos”
document.createElement(‘article’);
article { display: block }

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>

As APIs do
HTML 5

- WebForms 2.0
- Web Storage
- Web Sockets
- Web Workers
- Geolocation
-Video & Audio
- Canvas & SVG
- Aplicações Ofﬂine

SVG
<svg>
<circle id="sol"
cx="50%" cy="50%" r="100"
fill="yellow"
/>
</svg>

WebForms 2.0

Novos tipos de input
email
datetime
etc
range
searchnumber

Se o browser não
reconhece?

Novos atributos dos
inputs
required
min / max pattern
autofocusautocomplete
placeholder

<form>
<input type=”search” id="q"
autofocus required
placeholder=”Pesquisar...”>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Ir">
</form>

Validando um form
<script>
form = document.getElementById(‘f’);
if ( form.checkValidity() )
console.log(‘form válido’);
</script>

Aplicações Off-line
<html manifest=”cache.manifest”>

CACHE MANIFEST
#comentarios e versões
CACHE:
index.html
stylesheet.css
imagens/logo.png
js/script.js
NETWORK:
login.php
/myapi
http://api.twitter.com
FALLBACK:
/main.php /static.html
Arquivos cacheados
Arquivos que necessitam
de status online
Fallback para recurso
não disponível

var cacheStatus = window.applicationCache.status;
window.applicationCache.update();
window.applicationCache.swapCache();

Web Storage
Cookies
Máximo de 20
Limitados a 4KB
Reduzem velocidade da
página pois são
transferidos via headers
do HTTP

localStorage
sessionStorage
domínio de acesso
aba/janela aberta

localStorage.chave = “valor”;
localStorage[‘chave’] = “valor”;
sessionStorage.chave = “valor”;
sessionStorage[‘chave’] = “valor”;

SQL Database

var db = openDatabase(“nome”, “versão”);
db.transaction(function(tx) {
tx.executeSql(“SELECT * FROM tabela”,
callbackSucesso, callbackErro);
});

Geolocation

if (navigator.geolocation) {
var geo = navigator.geolocation;
geo.getCurrentPosition( function (posicao) {
lat = posicao.coords.latitude;
lng = posicao.coords.longitude;
});
}

Web Workers

Script principal
Worker A
Worker B
Worker C
Worker D

main.js:
var worker = new Worker('paralelo.js');
worker.onmessage = function(event) {
alert(event.data);
};
paralelo.js:
self.onmessage = function(event) {
// trabalho a ser exeucado em paralelo.
self.postMessage(dados);
}
http://leobalter.net/html5/webworkers.html

WebSockets

Ajax
Uma requisição ao servidor vale para um pedido e uma resposta

WebSockets
Uma única requisição da pra ﬁcar mandando e
recebendo mensagens do servidor o dia todo!

http://www.rumpetroll.com/

Canvas

<canvas id="myCanvas" width="300" height="300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect( 10, 10, 55, 50 );
ctx.fillStyle = "rgba(0,0,200, 0.5)";
ctx.fillRect( 30, 30, 55, 50 );

Audio
<audio src="sound.mp3" controls></audio>

Video

Tipos deVídeo
WEBM MP4/h.264 OGV
Safari
Chrome 5
Firefox 3.5
Opera 10.5
Safari
Chrome 5
IE 9
iPhone
Android
Safari
Chrome 6
IE 9 com v8
Firefox 4
Opera 10.6

Atributos HTML e JS
para <video>
loop
autoplay
controls
preload

<video src=”exp.mov” controls preload=”false” loop autoplay></video>
var vid = document.getElementById('idVideo');
console.log(vid.controls);
console.log(vid.preload);
console.log(vid.loop);
console.log(vid.autoplay);
HTML:
JS:

Controles JS
play() / play
pause() / pause
volume
muted
currentTime
loadeddata
ended

Como colocar vídeo
para funcionar em
qualquer browser?

<video controls>
<img src="placeholder.jpg" />
</video>
<video controls>
Esse browser não toca esse vídeo super legal
</video>
<video controls>
<object><embed>
// Muito flash no meio disso
</embed></object>
</video>

http://www.thewildernessdowntown.com/

CSS 3

HTML CSSJavaScript

Cascading Style Sheet

1996

Usamos o CSS 2.1

E um pouco de CSS 3

Podemos implementar
100%?

html5readiness.com

IE 6
IE 7
IE 8
IE 9
Firefox 3.6
Firefox 4
Opera
Safari
Chrome
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
caniuse.com (html5 + css3)

IE 6
IE 7
IE 8
IE 9
Firefox 3.6
Firefox 4
Opera
Safari
Chrome
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
caniuse.com (css3)

O que temos de novo?

Novos seletores

tag
#id
.class

tag[atributo=valor]
ex.:
input[type=text]

a[hrefˆ=http]
Toda tag “a” com atributo href em que o valor começa com a
palavra “http”:

a[rel*=nofollow]
Toda tag “a” com atributo rel em que nele esteja contido - em
qualquer parte - o valor “nofollow”:

input[type!=text]
inputs que não sejam do tipo texto:

.linha:nth-child(even) {
background: #dde;
}
.linha:nth-child(odd) {
background: white;
}

:not(.box)
selecionar elementos que não tenham a classe “box”

li:ﬁrst-child
li:last-child

@font-face

Times new Roman é
legal mas...

Quero um texto
assim no meu site...

@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.woff') format('woff'), url
('GraublauWeb.ttf') format('truetype');
}
@font-face à prova de balas!

@font-face Kit
Generator
http://www.fontsquirrel.com/fontface/generator

Google Web Fonts
http://code.google.com/webfonts

text wrapping

p.test {
text-overflow: ellipsis;
}

p {
width: 300px;
overflow: hidden;
height: 50px;
white-space: nowrap;
border: 1px solid #000;
}

Border Radius

#elemento {
border-radius: 10px;
}

CSS 3 Mozilla Webkit
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-
bottomright
-webkit-border-bottom-right-
radius
border-bottom-left-radius -moz-border-radius-bottomleft
-webkit-border-bottom-left-
radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

border-radius: 10px 10px 10px 10px;
A B C D
A
B
C
D
top-left
top-right
bottom-right
bottom-left
A B
CD

border-radius: 10px 10px;
A B
A B
AB

Border Image

border-image: url(border.png) 27 27 27 27 round round;
border-image: url(border.png) 27 27 27 27 stretch stretch;
http://ejohn.org/blog/border-image-in-ﬁrefox/
http://www.lrbabe.com/sdoms/borderImage/

Cores

RGB
HSL
color: rgba(100,100,100, 0.5);
background-color: rgb(230,230,230);
color: hsl(0,100%,50%);
background-color: hsla(120, 100%, 50%, 0.6);

Box-Shadow

#boxshadow {
  -webkit-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );
  -moz-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );
  box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );
}

box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );
Distância horizontal
Distância vertical
“Nitidez”
Cores RGB
Opacidade

Text Shadow
text-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.6 );

Reﬂexos

-webkit-box-reflect: pos dist máscara

-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top,
left bottom, from(transparent),
color-stop(0.5, transparent), to(white));
<img src="http://www.saomateus.edu.br/Images/logo.jpg" />
http://jsbin.com/ufusa4/edit

Transforms

-webkit-transform: rotateZ(5deg);

Gradient

-webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))

-webkit-gradient(radial, 430 50, 0, 430 50, 200,
from(red), to(#000))

background-size

background-size:100%
auto
contain
cover

Múltiplos Backgrounds

background-image: url(image1.jpg), url(image2.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-y;

Colunas

-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-rule: 1px solid #bbb;
-moz-column-gap: 2em;
column-count: 2;
column-rule: 1px solid #bbb;
column-gap: 2em;

Transitions

#bola {
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
}
#bola.left {
margin-left: 0;
}
#bola.right {
margin-left: 780px;
}

Animations

@-webkit-keyframes pulse {
  from {
  font-size: 100%;
  }
  to {
  font-size: 200%;
  }
}
div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

@-webkit-keyframes pulse {
  from {
  font-size: 100%;
  }
  to {
  font-size: 200%;
  }
}
div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
Pulso

http://goo.gl/mc76

http://goo.gl/Vnqe

Leo Balter
@leobalter
leo@balter.com.br
yayquery.com.br

Html 5 e Css3

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Html 5 e Css3 (20)

Último (8)

Html 5 e Css3