Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

HTML 5, CSS 3 e o futuro da Web

5 861 vues

Publié le

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

Publié dans : Technologie, Design
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×