HTML 5, CSS 3 e o futuro da Web

SOBRE O PALESTRANTE
Desenvolvedor Web e líder técnico do projeto
ICD (Intercâmbio de Conteúdos Digitais) pela
Dynavideo
Mestrando em Informática pela UFPB
Tecnólogo em Sistemas para Internet pelo IFPB

ROTEIRO
VISÃO GERAL
FORMULÁRIOS
MULTIMÍDIA
A NOVA GERAÇÃO DE APLICAÇÕES WEB
CSS 3
DEMONSTRAÇÕES

2. HTML 5 e suas mudanças
Lançado o HTML a W3c
alertou sobre as boas práticas;
Como separação da estrutura
do código e formatação;
Porém, HTML4 não trazia
diferença real para semântica;
HTML4 também não
facilitava manipulação de
elementos via Javascript ou CSS
Ex.: Drag and drop

2. HTML 5 e suas mudanças
Criação de APIs que formarão a
base da arquitetura Web
Fácil manipulação de objetos de
forma transparente ao usuário
Ferramentas para CSS e Javascript
Novas tags e recursos
Seções, componentes de
formulário, gráficos, multimídia, etc
Maior semântica, código
interoperável
Retrocompatibilidade

3. ESTRUTURA BÁSICA
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/css"
ref="estilo.css">
<title></title>
</head>
<body>
</body>
</html>
Doctype: indica a
especificação em uso ao
browser ou dispositivo
HTML: lang é necessário
para que os user-agents
saibam a linguagem principal
do documento
Link: rel pode assumir
outros valores como
ALTERNATE, mapeando por
exemplo um feed como
(application/atom+xml)

4. Novos elementos e atributos
elementos;HTML deve indicar o
tipo da informação exibida;
Robôs de busca não
conseguem diferenciá-los.
Em versões anteriores,
era possível diferenciar um
parágrafo de um título, mas
não o rodapé do
cabeçalho;
Quando lemos um livro
é fácil identificar os tipos;
Cabe ao desenvolvedor
marcar a informação;
Essa diferenciação era
percebida apenas
visualmente;
Não havia maneira de
detectar automaticamente
estes elementos

<div id="header">
<div id="footer">
<div id="content">
<div
id="nav">
<div
id="right">
<div class="article">
Como era...

<header>
<footer>
<section>
<nav> <aside>
<article>
Como será...
HTML 5 trouxe
elementos que ajudam
a definir setores
principais;
Pode-se diferenciar
áreas como sidebar,
rodapé, cabeçalho;
Tais mudanças
simplificam o trabalho
dos sistemas de busca;

7. SUPORTE ATUAL PELOS BROWSERS
Desenvolvimento Modular
Motores de renderização:
Motor Browser
Webkit Safari, Google Chrome
Gecko Firefox, Mozilla, Camino
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10
Webkit alcança aparelhos como Blackberry, iPhone,
iPod Touch, iPad e dispositivos que rodam Android

8. COMPATIBILIDADE COM HTML5
Atualmente Webkit é o motor mais compatível
Firefox e opera já estão compatíveis com boa parte

• Não há máscara ou validação;
• Integração com agenda de contatos, útil em celulares.tel
• Muda ligeiramente de acordo com o navegador.search
• Formatação e validação;
• Integração com agenda de contatosEmail
• Endereço web com formação e validação;url
• Validação, formatação e calendários;
• Usa-se também: date, month, week, time e datetime-localdatetime
• Validação e formatação;
• Componente personalizado.number
• Componente personalizado para números.range
• Seletor de corescolor
1. Novos valores para o atributo type

2. Datas e Horas
<input type=“datetime“ step=“10” />
Outros tipos disponíveis:
datetime
date
month
week
time
datetime-local

3. Números
<input value=“7“ type=“number“ step=“1”
min=“1” max=“20” />
<input value=“7“ type=“range“ step=“1”
min=“1” max=“20” />

4. TIPOS DE DADOS E VALIDADORES
<input name=“login“ type=“autofocus“/>
• Foco automático antes do carregamento da página:
<input placeHolder=“Seu login aqui”/>
• Suporte a placeholder:
<input name=“login” required />
• Required:
<textarea maxlength=“50”></textarea>
• Max-length para textarea:

4. TIPOS DE DADOS E VALIDADORES
<input name=“CEP“ pattern=“d{5}-?d{3}“/>
• Validação com REGEX:
<input type=“submit” formnovalidate />
• Submeter sem validação:
function vCPF(i){
i.setCustomValidity(validaCPF(i.value)?'':'CPF
inválido!')
}
<input name=“cpf” oninput=“vCPF(this)” />
• Validador personalizado:

5. COMPONENTES WEB APPLICATION
<progressbar max=“100“ value=“75“/>
• Barra de progresso
• Detalhes e sumário
<details>
<summary>Copiando
<progress max="39248" value="14718">
37,5%</summary>
<dl> <dt>Tamanho total:</dt>
<dd>39.248KB</dd> <dt>Transferido:</dt>
<dd>14.718</dd> <dt>Taxa de
transferência:</dt> <dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd> </dl>
</details>

<div contenteditable=“true“>Edite-me</div>
• Conteúdo editável
• Revisão ortográfica e gramatical
spellcheck=“true“
• Utiliza o revisor ortográfico disponível na plataforma
• Controle pode ser feito individualmente para cada
elemento

• Drag and Drop
<div id="box" ondrop="return dragDrop(event)" ondragover="return
dragOver(event)">
<div id="drag" draggable="true" ondragstart="return dragStart(event)">
drag me</div>
<div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag
me</div>
</div>
Eventos do objeto arrastado :
Dragstart, drag, dragend
Eventos do objeto que recebe o outro:
dragenter, dragleave, dragover, drop

1. ÁUDIO
<audio src=“musica.oga“ controls=“true”
autoplay=“true” />
• Se controls for desabilitado será preciso controlar as
operações do player via javascript

1. ÁUDIO
<audio controls=“true” autoplay=“true”/>
• Nem todo browser suporta o codec livre OggVorbis
• É preciso oferecer um formato alternativo de áudio
• Ou até mesmo uma opção para baixar o conteúdo
<source src=“musica.oga” />
<source src=“musica.mp3” />
<source src=“musica.wma” />
<p>Faça o download <a
href=“musica.mp3”>da música</a>.</p>
</audio>

2. VÍDEO
<video src=“video.ogv“ width=“400”
height=“300” />

2. VÍDEO
<video controls=“true” autoplay=“true”/>
• Também suporta controle com vários sources
<source src=“video.ogg” />
<source src=“video.mp4” />
<source src=“video.wmv” />
<p>Faça o download <a
href=“video.mp4”>do vídeo</a>.</p>
</video>

2. VÍDEO - CODECS
• É importante incluir informações a respeito do
container e codecs utilizados
• Isso antecipa a detecção de alguma incompatibilidade
• A extensão do arquivo não é relevante para isso
• Para indicar essas informações usa-se o atributo type
<source src=“video.ogv” type=‘video/ogg;
codecs=“theora,vorbis”’ />
• Para OGG usando os codecs Theora e Vorbis:
<source src=“video.mp4” type=‘video/mp4;
codecs=“mp4v.20.240, mp4a.40.2”’ />
• Para MPEG-4:

2. VÍDEO
• ELEMENTO DEVICE
• É possível inserir no HTML um elemento de acesso
à Webcam do usuário
• Solicita confirmação do usuário para acesso
• Em caso de mais de um dispositivo, será possível
escolher um para fazer stream
<script>
function update(stream) {
document.getElementsByTagName(‘video’)[0].src = stream.url
}
</script>
<device type=“media” onchange=“update(this.data)” />
<video widht=“400” height=“300” />

A NOVA GERAÇÃO DE
APLICAÇÕES WEB

1. MATHML
• O HTML5 incorpora a linguagem de marcação MathML
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi> <mo>=</mo><mfrac>
<mrow><mo form="prefix">−</mo><mi>b</mi>
<mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn>
</msup> <mo>−</mo> <mn>4</mn>
<mo>⁢</mo> <mi>a</mi> <mo>⁢</mo>
<mi>c</mi> </msqrt> </mrow>
<mrow><mn>2</mn> <mo>⁢</mo> <mi>a</mi>
</mrow> </mfrac>
</mrow>
</math>

2. SVG
• Linguagem para marcação de gráficos vetoriais
• Também pode ser incorporada com facilidade
<svg width=“400” height=“400”>
<rect x=“10” y=“10” width=“150”
height=“50” stroke=“#000000”
stroke-width=“5” fill=“#FF0000”
/>
<circle cx="70" cy="240" r="60"
stroke="#00FF00" stroke-
width="5" fill="#FFFFFF" />
</svg>

2. SVG
• A maioria dos editores
gráficos vetoriais exporta e
importa automaticamente SVG
• Pode-se construir javascript
para manipular SVG, usando
métodos do DOM
• Isso possibilita gráficos
dinâmicos, com animação,
escaláveis e com excelente
qualidade visual, programáveis
em javascript e sem
tecnologias proprietáris e
plugins

3. CANVAS API
• Permite desenhar na tela do navegador via Javascript
• O único elemento HTML existente para isso é o canvas:
<canvas id=“x” width=“400” height=“400” />
• Para desenhar:
<script>
function desenhar() {
context=document.getElementById('x').getContext('2d');
context.fillRect(10, 10, 50, 150); //x,y,w,h
context.fillStyle='#ff0‘;
context.fill();
}
</script>

3. CANVAS API
www.effectgames.com/demos/canvascycle/

3. CANVAS X SVG
• SVG:
• O Conteúdo é
acessível a leitores de
tela
• O gráfico é escalável,
não perde resolução
ou serrilha ao
redimensionar
• O conteúdo é
acessível via DOM
• Canvas:
• A performance é
muito superior ao
SVG
• É fácil desenhar
via Javascript. Em
SVG é preciso
escrever XML.

4. SERVER-SENT EVENTS
• Cria-se em javascript um objeto
EventSource:
es = new
EventSource(‘messages.php’);
es.onmessage=function(e){
alert(“Chegaram dados:
"+e.data)
}
• Isso vai abrir uma conexão
HTTP com “messages.php”
• O cliente se mantém
escutando e cada vez que o
servidor enviar dados, o
evento message será
disparado
• Pode ser utilizado para implementar chat ou monitor de status
de alguma operação demorada que esteja ocorrendo no servidor
• Maneira de inverter o fluxo das aplicações Ajax
• Servidor dispara o envio de dados ao cliente

4. SERVER-SENT EVENTS
• Protocolo de comunicação
• A página “messages.php” deve enviar mensagens
no seguinte formato:
data: mensagem 1
id: 1
data: mensagem com duas
data: linhas
id: 2
data: mensagem 3
id: 3
• Pelo ID é possível recuperar a última mensagem
enviada através do valor no header HTTP Last-Event-ID

5. MENUS E TOOLBARS
<menu type=“toolbar”>
<menu label="File”>
<command onclick="fnew()" label="New..." />
<command onclick="fopen()" label="Open..." />
[…]
</menu>
</menu>

6. MICRODATA
• Permite tornar a estrutura semântica um pouco mais
específica, definindo o que é o conteúdo de cada
elemento.
<dl itemscope temtype=“notas">
<dt>nome</dt><dd itemprop="nome">Diego</dd>
<dt>total</dt><dd itemprop="total">9.7</dd>
</dl>
<script>
resultados=document.getItems(‘notas’);
for(var i=0;i<resultados.length;i++){
alert(resultados[i].properties.nome[0].content+": R$ "+
resultados[i].properties.total[0].content) }
</script>

6. MICRODATA
• Já existem vários padrões de metadados pré-
definidos:
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Diego Ernesto Rosa Pessoa</h1>
<h2 itemprop=“nickname">Diego Pessoa</h2>
<a itemprop=“url” href=http://diegopessoa.com “>diegopessoa.com</a>
</section>
• Usar formatos padronizados ajuda os sistemas de
busca a tratar e entender esses dados
• Mais informações em:
http://www.google.com/support/webmasters/bin/ans
wer.py?hl=en&answer=146861

7. HISTÓRICO DE SESSÃO
• Um grande desafio de aplicações web é
apresentar um modelo de navegação
consistente para o usuário.
• Famoso problema do back-button
• O objeto history foi vitaminado no
HTML5 com dois novos métodos:
pushState(data,title[,url]): acrescenta uma
entrada na lista de histórico.
replaceState(data,title[,url]): modifica a
entrada atual na lista de histórico.
Com isso, pode-se acrescentar itens à
lista de histórico, associando dados ou
mesmo uma URL;

8. STORAGE API
• Nova maneira de armazenar dados
no cliente (alternativa aos cookies)
• Objeto Storage possui os métodos:
• getItem(key);
• setItem(key);
• removeItem(key);
• clear();
• Dois objetos disponíveis:
• localStorage
• sessionStorage

9. APLICAÇÕES OFF-LINE
• HTML5 provê uma maneira
de se indicar ao navegador
que elementos devem ser
postos em cache para que
uma aplicação funcione
offline.
• Para permitir que o usuário
acesse uma página offiline é
preciso escrever um arquivo
de manifesto, indicando que
URLs devem ser postas em
cache.
CACHE MANIFEST
meu.html
meu.css
meu.js
<html
manifest=“meu.manifest">

10. GEOLOCATION API
• Três métodos:
• Geolocalização IP: localização através de consultas whois
• Triangulação GPRS: rede de celulares sem GPS ou GPS desabilitado
• GPS: método mais preciso, margem de erro de apenas 5 metros
navigator.geolocation.getCurrentPosition(showpos);
function showpos(position){
lat=position.coords.latitude
lon=position.coords.longitude
alert('Your position: '+lat+','+lon)
}
• Watch Position (rastrear a posição continuamente)

11. UNDO
• Navegador guarda um histórico de
alterações para cada documento;
• Histórico controlado pelo objeto
UndoManager, acessível através
de window.undoManager.
• O histórico guarda dois tipos de
alterações:
• Alterações DOM
• Objetos undo
• Ex.: uma aplicação de e-mail pode
guardar um objeto undo representando
o fato do usuário mover um e-mail de
uma pasta para outra.
document.execCom
mand('redo')
document.execCom
mand('undo')

2. SOMBRAS
•Regular
• Interna
box-shadow: -3px -3px 10px #212121;
box-shadow: 0px 0px 10px #212121;

2. SOMBRAS
• Compatibilidade dos navegadores:

C
3. MÚLTIPLOS BACKGROUNDS
background: url(body-top.gif) top left no-repeat,
url(banner.jpg) top 11px no-repeat, url(body-bottom.gif)
bottom left no-repeat, url(body-middle.gif) left repeat-y;
Suporte atual
apenas dos
navegadores
baseados em
Webkit

4. FONTES EMBUTIDAS
@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.my_CSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
text-shadow: 3px 3px 7px #111;
}

4. E MUITO MAIS...
• Bordas com imagem
• Degradê em background
• Transparência de elementos
• Layouts multi-ccolunas
• Transformações 2D e 3D de imagens (girar,
perspectiva, etc)
• Animações
• Controle do conteúdo de um elemento
• Etc...
Mais informações em:
http://www.css3.com/

1. Recursos / APIs
•HTML5 Canvas animation • WebSocket (Chat)

2. JOGOS
• Legend of Sadness
•PACMAM
•Adventure Game
• Torus (Tetris 3D)

Perguntas?
Referências:
http://tableless.com.br/html5/
http://dev.w3.org/html5/spec/Overview.html
Contato:
E-mail: diegopessoa12@gmail.com
Twitter: @diegopessoa

HTML 5, CSS 3 e o futuro da Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML 5, CSS 3 e o futuro da Web

Semelhante a HTML 5, CSS 3 e o futuro da Web (20)

HTML 5, CSS 3 e o futuro da Web