HTML5 & suas APIs

  • 263 views
Uploaded on

 

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
263
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML & suas APIs Luciano Borges http://www.slideshare.net/lusabo lucianosantosborges@gmail.com
  • 2. Culpados WHATWG
  • 3. Uma nova visão Compatibilidade Utilidade Interoperabilidade Acesso Universal
  • 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. 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. Interoperabilidade Especificação ficou maior e mais precisa. Comportamentos bem definidos para obter verdadeira interoperabilidade.
  • 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. 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. 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. HTML Semântica
  • 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. HTML4 HTML5
  • 13. HTML Conectividade
  • 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. ● 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. 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. HTML Acessoadispositivos
  • 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. 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. HTML Multimídia
  • 21. Possibilidade de usar áudio e vídeo sem plugins. <video src=”video.ogg”></video>
  • 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. HTML Offline&Storage
  • 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. WebStorage
  • 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. HTML Performance
  • 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. HTML EstilosVisuais
  • 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. 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. HTML Gráficos&3D
  • 33. Canvas ● Elemento HTML que pode ser usado para desenhar gráficos usando scripts (normalmente JavaScript).
  • 34. SVG ● SVG is a language for describing two-dimensional graphics in XML.
  • 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. 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. Fim?
  • 38. Fim?
  • 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. 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. 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. Forms
  • 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. Forms Nome: <input type="text" placeholder="Digite seu nome" required> Nome: <input type="text" pattern="[A-Za-z0-9_]{1,15}">
  • 45. Forms Fotos: <input type="file" multiple>
  • 46. Agora sim, tchau!