HTML5 & suas APIs

676 visualizações

Publicada em

Publicada em: Software
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

HTML5 & suas APIs

  1. 1. HTML & suas APIs Luciano Borges http://www.slideshare.net/lusabo lucianosantosborges@gmail.com
  2. 2. Culpados WHATWG
  3. 3. Uma nova visão Compatibilidade Utilidade Interoperabilidade Acesso Universal
  4. 4. Compatibilidade Não se preocupe, o HTML5 não é uma revolução perturbadora! Um dos seus princípios básicos é manter tudo funcionando. Muito esforço tem sido colocado na pesquisa de comportamentos comuns. <div id='header'></div> → <header></header>
  5. 5. Utilidade Separação da Apresentação e do Conteúdo id=”erbase” id=erbase ID=”erbase” Prioridade de Constituintes usuário > autores > navegadores > especificação Seguro pelo Projeto Introduz um novo modelo de segurança que permite fazer coisas antes impossíveis.
  6. 6. Interoperabilidade Especificação ficou maior e mais precisa. Comportamentos bem definidos para obter verdadeira interoperabilidade.
  7. 7. Acesso Universal Acessibilidade WAI-ARIA (http://www.w3.org/TR/wai-aria) Suporte a todas linguagens do mundo Ex: <ruby> tipografia ásia oriental Independência de Mídia
  8. 8. O que há de novo em HTML5? DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 <!DOCTYPE html> ● Não é uma tag HTML e sim uma instrução para o browser sobre qual versão do HTML a página está escrita. ● Deve ser a primeira linha de código do documento antes da tag HTML.
  9. 9. O que há de novo em HTML5? META HTML 4.01 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5 <meta charset=”UTF-8"> ● Metatag responsável por chavear qual tabela de caracteres a página está utilizando.
  10. 10. HTML Semântica
  11. 11. ● O HTML 5 define uma marcação semântica para descrever o conteúdo de um elemento; ● Usar marcação semântica simplifica o projeto das suas páginas HTML; ● Os novos elementos semânticos podem receber estilos CSS, favorecendo a separação do conteúdo com a apresentação. Elementos Semânticos
  12. 12. HTML4 HTML5
  13. 13. HTML Conectividade
  14. 14. ● Permite a comunicação segura entre diversas origens por meio de iframes, abas e janelas; ● Define a API postMessage como uma forma padrão de enviar mensagens; Cross Document Messaging XMLHttpRequest Level 2 (Cliente → Servidor) ● XMLHttpRequest é a API que tornou o AJAX possível; ● Melhorias: ● XMLHttpRequest de Múltiplas Origens ● Eventos de progresso
  15. 15. ● Canal de comunicação full-duplex, que opera através de um único socket pela web; WebSocket (Servidor → Cliente) WebRTC (Cliente ↔ Cliente) ● API que permite aos navegadores executar aplicações de chamada telefônica, video chat e compartilhamento P2P sem a necessidade de plugins;
  16. 16. Cross Document Messaging postMessage ● Fornece passagem assíncrona de mensagens entre contextos JavaScript; ● Pode ser usada para a comunicação entre documentos com a mesma origem, mas é especialmente útil quando a comunicação ocorre entre documentos de origens diferentes;
  17. 17. HTML Acessoadispositivos
  18. 18. ● A especificação define um mecanismo baseado em eventos, a API do JavaScript, e uma marcação adicional para declarar que qualquer tipo de elemento possa ser arrastado em uma página. Drag and Drop drag medrag me drag me
  19. 19. FullScreen ● Fornece uma maneira programática para solicitar visualização fullscreen do usuário, e sair do fullscreen quando desejado. ● API que permite que um único elemento possa ser visto em tela cheia. ● API é destinado a imagens, vídeos e jogos rodando dentro de um contêiner.
  20. 20. HTML Multimídia
  21. 21. Possibilidade de usar áudio e vídeo sem plugins. <video src=”video.ogg”></video>
  22. 22. Possibilidade de usar áudio e vídeo sem plugins. <audio control> <source src=”music.ogg” type=”audio/ogg;codeccs=vorbis”> <source src=”music.mp3” type=”audio/mpeg”> </audio>
  23. 23. HTML Offline&Storage
  24. 24. WebStorage ● Devs podem armazenar dados no lado do cliente; ● Session Storage ● Os dados ficam disponíveis apenas para a janela que criou o dado até que seja fechada. ● Local Storage ● Não depende da sessão. ● Os dados ficam disponíveis para qualquer janela. ● Permanece disponível até que seja explicitamente deletada pelo programador do site ou pelo o usuário.
  25. 25. WebStorage
  26. 26. Web Offline ● Os usuários podem navegar por todo o site quando estão off-line; ● Os recursos armazenados em cache são locais e, portanto, são carregados mais rapidamente; ● O navegador fará download do servidor apenas dos recursos que forem alterados. <html manifest=”manifesto.appcache”> </html> CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
  27. 27. HTML Performance
  28. 28. Web Workes ● Capacidade para processamento em background para aplicações web; ● São executados em threads separadas; ● Permite executar tarefas como disparar scripts de longa duração para executar tarefas muito dispendiosas, mas sem bloquear a interface de usuário ou outros scripts para manipular interações com o usuário; ● Possibilidade de tirar proveito de CPUs com múltiplos núcleos.
  29. 29. HTML EstilosVisuais
  30. 30. CSS Object Model ● Conjunto de APIs que permitem manipular CSS a partir de JavaScript; ● Permite ler e modificar o estilo CSS de forma dinâmica.
  31. 31. API Selectors getElementById() getElementByName() getElementByTagName() querySelector() HTML4 HTML5 Retorna o primeiro elemento da página que satisfaça à(s) regra(s). querySelector(“input.error”) querySelectorAll() querySelector(“#results td”) Retorna todos os elementos que satisfaçam à regra ou regras especificadas.
  32. 32. HTML Gráficos&3D
  33. 33. Canvas ● Elemento HTML que pode ser usado para desenhar gráficos usando scripts (normalmente JavaScript).
  34. 34. SVG ● SVG is a language for describing two-dimensional graphics in XML.
  35. 35. ● A performance é muito superior ao SVG na maioria dos casos; ● É fácil desenhar via Javascript. Em SVG, é preciso fazer seu script escrever XML para você. Com Canvas você só manda desenhar, e pronto. ● 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 x SVG
  36. 36. WebGL ● API em JavaScript, disponível a partir do novo elemento canvas da HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.
  37. 37. Fim?
  38. 38. Fim?
  39. 39. Geolocation API que define uma interface de alto nível para as informações de localização (latitude e longitude) associado apenas com o dispositivo que hospeda a implementação.
  40. 40. Geolocation Geolocalização IP É o método usado pela maioria dos navegadores web em computadores. Através de consultas whois e serviços de localização de IP, vai determinar a cidade ou região em que você está. Triangulação GPRS Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o GPS desligado, podem determinar sua posição pela triangulação das antenas GPRS próximas. É bem mais preciso que o método baseado em IP, vai mostrar em que parte do bairro você está. GPS É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5 metros.
  41. 41. Forms O HTML5 trouxe novos campos para formulários e novos comportamentos para enriquecer a experiência disponível para os formulários. <input type=”email”> <input type=”tel”> <input type=”number” min=”1” max=”5”> <input type=”url”> Agregam a semântica do seu HTML para definir o tipo de informação que o formulário precisa, apesar de não causar mudanças drásticas ao visual dos seus elementos.
  42. 42. Forms
  43. 43. Forms <input type="color"> <input type="range" min="1" max="10"> <input type="date"> <input type="time"> <input type="month"> <input type="week"> <input type="search">
  44. 44. Forms Nome: <input type="text" placeholder="Digite seu nome" required> Nome: <input type="text" pattern="[A-Za-z0-9_]{1,15}">
  45. 45. Forms Fotos: <input type="file" multiple>
  46. 46. Agora sim, tchau!

×