html 5, css 3 e o futuro da web
DESCRIPTION
Apresentação realizada no III Encontro de Comunicação Digital no dia 10 de novembro de 2010. Por Diego Pessoa (@diegopessoa)TRANSCRIPT
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
VISÃO GERAL
1. Histórico de versões
•HTML+, HTML 2.0 e HTML3.0
1993-1995•H
TML 3.2
•Torna-se padrão mantido pela W3C
1996
•HTML 4, HTML 4.01
1998-1999
•XHTML 1.0, XHTML 1.1
2000-2001
•W3C inicia trabalhos no XHTML 2
2002
1. Histórico de versões•Sur
ge o WHATWG
•Grandes empresas se unem para escrever o HTML 5
2004•W3
C se junta ao WHATWG na produção do HTML 5
2006
•XHTML 2 é descontinuado
2009
•Possível lançamento do HTML 5
2012
2. HTML 5 e suas mudançasLanç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 atributoselementos; 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
5. Novos elementos e atributos
<div id="header">
<div id="footer">
<div id="content"><divid="nav">
<divid="right">
<div class="article">
Como era...
5. Novos elementos e atributos
<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;
5. Novos elementos e atributos• Define uma seção genérica do documento. Ex.: introdução, destaque, contato.<section>
• Introdução ou elementos de navegação. (Índices, campos de busca, logomarcas)<header>
• Contém links para páginas internas do site. Ex.: Menu, links no rodapé<nav>
• Parte que poderá ser distribuída e reutilizada em Feeds, por exemplo. (Post, artigo, bloco de comentário)<article>
• Bloco de conteúdo que referencia o conteúdo envolta. Ex.: publicidade, informações secundárias<aside>
• Rodapé da página. Seria o último elemento a aparecer antes do fechamento da tag html<footer>
• Grupo de títulos. Agrupa elementos H1 a H6 quando possuem vários níveis.<hgroup>
• Marca um texto que exibe horário ou data precisa no calendário gregoriano<time>
6. Elementos descontinuados
Efeitos Visuais
• basefont• big• center• font• s• strike• tt• u
Acessibilidade / Usabilidade
• frame• frameset• noframes
Função substituída por outro elemento
• acronym (usa-se abbr)
• applet (usa-se object)
• dir (usa-se ul)
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
Safari Chrome Opera Firefox IE 8 IE 9Local Storage s s s s s sHistórico de
Sessão s s s s s sAplicações
Offline s s n s n nNovos tipos de
campos s s s n n n
Form: Autofocus s s s n n nForm:
Autocomplete n n s n n n
Form: Required s s s n n nVideo, Audio e
Canvas Text s s s s n s
FORMULÁRIOS
•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 contatos
•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-local
datetime
•Validação e formatação;
•Componente personalizado.
number
•Componente personalizado para números.
range
•Seletor de cores
color
1. Novos valores para o atributo type
2. Datas e Horas
<input type=“datetime“ step=“10” />
Outros tipos disponíveis:datetimedatemonthweektimedatetime-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>
5. COMPONENTES WEB APPLICATION
<div contenteditable=“true“>Edite-me</div>
• Conteúdo editável
• Revisão ortográfica e gramaticalspellcheck=“true“
• Utiliza o revisor ortográfico disponível na plataforma• Controle pode ser feito individualmente para cada elemento
5. COMPONENTES WEB APPLICATION• 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
MULTIMÍDIA
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 DEAPLICAÇÕ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>±</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 1id: 1
data: mensagem com duasdata: linhasid: 2
data: mensagem 3id: 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/answer.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.execCommand('redo')
document.execCommand('undo')
CSS 3
1. BORDAS ARREDONDADAS
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/
DEMONSTRAÇÕES
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: [email protected]: @diegopessoa