SOBRE O PALESTRANTE
Desenvolvedor Web e líder técnico do projeto
ICD (Intercâmbio de Conteúdos Digitais) pela
Dynavideo
Me...
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
1. Histórico de versõ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 for...
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 tra...
3. ESTRUTURA BÁSICA
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/cs...
4. Novos elementos e atributos
elementos;HTML deve indicar o
tipo da informação exibida;
Robôs de busca não
conseguem dif...
5. Novos elementos e atributos
<div id="header">
<div id="footer">
<div id="content">
<div
id="nav">
<div
id="right">
<div...
5. Novos elementos e atributos
<header>
<footer>
<section>
<nav> <aside>
<article>
Como será...
HTML 5 trouxe
elementos qu...
5. Novos elementos e atributos
6. Elementos descontinuados
7. SUPORTE ATUAL PELOS BROWSERS
Desenvolvimento Modular
Motores de renderização:
Motor Browser
Webkit Safari, Google Chrom...
8. COMPATIBILIDADE COM HTML5
Atualmente Webkit é o motor mais compatível
Firefox e opera já estão compatíveis com boa parte
FORMULÁRIOS
• Não há máscara ou validação;
• Integração com agenda de contatos, útil em celulares.tel
• Muda ligeiramente de acordo co...
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=...
4. TIPOS DE DADOS E VALIDADORES
<input name=“login“ type=“autofocus“/>
• Foco automático antes do carregamento da página:
...
4. TIPOS DE DADOS E VALIDADORES
<input name=“CEP“ pattern=“d{5}-?d{3}“/>
• Validação com REGEX:
<input type=“submit” formn...
5. COMPONENTES WEB APPLICATION
<progressbar max=“100“ value=“75“/>
• Barra de progresso
• Detalhes e sumário
<details>
<su...
5. COMPONENTES WEB APPLICATION
<div contenteditable=“true“>Edite-me</div>
• Conteúdo editável
• Revisão ortográfica e gram...
5. COMPONENTES WEB APPLICATION
• Drag and Drop
<div id="box" ondrop="return dragDrop(event)" ondragover="return
dragOver(e...
MULTIMÍDIA
1. ÁUDIO
<audio src=“musica.oga“ controls=“true”
autoplay=“true” />
• Se controls for desabilitado será preciso controlar ...
1. ÁUDIO
<audio controls=“true” autoplay=“true”/>
• Nem todo browser suporta o codec livre OggVorbis
• É preciso oferecer ...
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” />
...
2. VÍDEO - CODECS
• É importante incluir informações a respeito do
container e codecs utilizados
• Isso antecipa a detecçã...
2. VÍDEO
• ELEMENTO DEVICE
• É possível inserir no HTML um elemento de acesso
à Webcam do usuário
• Solicita confirmação d...
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>...
2. SVG
• Linguagem para marcação de gráficos vetoriais
• Também pode ser incorporada com facilidade
<svg width=“400” heigh...
2. SVG
• A maioria dos editores
gráficos vetoriais exporta e
importa automaticamente SVG
• Pode-se construir javascript
pa...
3. CANVAS API
• Permite desenhar na tela do navegador via Javascript
• O único elemento HTML existente para isso é o canva...
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 serrilh...
4. SERVER-SENT EVENTS
• Cria-se em javascript um objeto
EventSource:
es = new
EventSource(‘messages.php’);
es.onmessage=fu...
4. SERVER-SENT EVENTS
• Protocolo de comunicação
• A página “messages.php” deve enviar mensagens
no seguinte formato:
data...
5. MENUS E TOOLBARS
<menu type=“toolbar”>
<menu label="File”>
<command onclick="fnew()" label="New..." />
<command onclick...
6. MICRODATA
• Permite tornar a estrutura semântica um pouco mais
específica, definindo o que é o conteúdo de cada
element...
6. MICRODATA
• Já existem vários padrões de metadados pré-
definidos:
<section itemscope itemtype="http://data-vocabulary....
7. HISTÓRICO DE SESSÃO
• Um grande desafio de aplicações web é
apresentar um modelo de navegação
consistente para o usuári...
8. STORAGE API
• Nova maneira de armazenar dados
no cliente (alternativa aos cookies)
• Objeto Storage possui os métodos:
...
9. APLICAÇÕES OFF-LINE
• HTML5 provê uma maneira
de se indicar ao navegador
que elementos devem ser
postos em cache para q...
10. GEOLOCATION API
• Três métodos:
• Geolocalização IP: localização através de consultas whois
• Triangulação GPRS: rede ...
11. UNDO
• Navegador guarda um histórico de
alterações para cada documento;
• Histórico controlado pelo objeto
UndoManager...
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-...
4. FONTES EMBUTIDAS
@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.my_CSS3_class {
font-fami...
4. E MUITO MAIS...
• Bordas com imagem
• Degradê em background
• Transparência de elementos
• Layouts multi-ccolunas
• Tra...
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: diegope...
HTML 5, CSS 3 e o futuro da Web
Próximos SlideShares
Carregando em…5
×

HTML 5, CSS 3 e o futuro da Web

5.750 visualizações

Publicada em

Apresentação realizada no III Encontro de Comunicação Digital no dia 10 de novembro de 2010.
Por Diego Pessoa (@diegopessoa)

Publicada em: Tecnologia, Design
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.750
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
248
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML 5, CSS 3 e o futuro da Web

  1. 1. 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
  2. 2. ROTEIRO VISÃO GERAL FORMULÁRIOS MULTIMÍDIA A NOVA GERAÇÃO DE APLICAÇÕES WEB CSS 3 DEMONSTRAÇÕES
  3. 3. VISÃO GERAL
  4. 4. 1. Histórico de versões
  5. 5. 1. Histórico de versões
  6. 6. 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
  7. 7. 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
  8. 8. 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)
  9. 9. 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
  10. 10. 5. Novos elementos e atributos <div id="header"> <div id="footer"> <div id="content"> <div id="nav"> <div id="right"> <div class="article"> Como era...
  11. 11. 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;
  12. 12. 5. Novos elementos e atributos
  13. 13. 6. Elementos descontinuados
  14. 14. 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
  15. 15. 8. COMPATIBILIDADE COM HTML5 Atualmente Webkit é o motor mais compatível Firefox e opera já estão compatíveis com boa parte
  16. 16. FORMULÁRIOS
  17. 17. • 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
  18. 18. 2. Datas e Horas <input type=“datetime“ step=“10” /> Outros tipos disponíveis: datetime date month week time datetime-local
  19. 19. 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” />
  20. 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:
  21. 21. 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:
  22. 22. 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>
  23. 23. 5. COMPONENTES WEB APPLICATION <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
  24. 24. 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
  25. 25. MULTIMÍDIA
  26. 26. 1. ÁUDIO <audio src=“musica.oga“ controls=“true” autoplay=“true” /> • Se controls for desabilitado será preciso controlar as operações do player via javascript
  27. 27. 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>
  28. 28. 2. VÍDEO <video src=“video.ogv“ width=“400” height=“300” />
  29. 29. 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>
  30. 30. 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:
  31. 31. 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” />
  32. 32. A NOVA GERAÇÃO DE APLICAÇÕES WEB
  33. 33. 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">&minus;</mo><mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>
  34. 34. 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>
  35. 35. 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
  36. 36. 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>
  37. 37. 3. CANVAS API www.effectgames.com/demos/canvascycle/
  38. 38. 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.
  39. 39. 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
  40. 40. 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
  41. 41. 5. MENUS E TOOLBARS <menu type=“toolbar”> <menu label="File”> <command onclick="fnew()" label="New..." /> <command onclick="fopen()" label="Open..." /> […] </menu> </menu>
  42. 42. 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>
  43. 43. 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
  44. 44. 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;
  45. 45. 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
  46. 46. 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">
  47. 47. 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)
  48. 48. 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')
  49. 49. CSS 3
  50. 50. 1. BORDAS ARREDONDADAS
  51. 51. 2. SOMBRAS •Regular • Interna box-shadow: -3px -3px 10px #212121; box-shadow: 0px 0px 10px #212121;
  52. 52. 2. SOMBRAS • Compatibilidade dos navegadores:
  53. 53. 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
  54. 54. 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; }
  55. 55. 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/
  56. 56. DEMONSTRAÇÕES
  57. 57. 1. Recursos / APIs •HTML5 Canvas animation • WebSocket (Chat)
  58. 58. 2. JOGOS • Legend of Sadness •PACMAM •Adventure Game • Torus (Tetris 3D)
  59. 59. Perguntas? Referências: http://tableless.com.br/html5/ http://dev.w3.org/html5/spec/Overview.html Contato: E-mail: diegopessoa12@gmail.com Twitter: @diegopessoa

×