1. HTML & suas APIs Luciano Borges http://www.slideshare.net/lusabo lucianosantosborges@gmail.com

2. Culpados WHATWG 3. Uma nova viso Compatibilidade Utilidade Interoperabilidade Acesso Universal 4. Compatibilidade No se preocupe, o HTML5 no uma revoluo perturbadora! Um dos seus princpios bsicos manter tudo funcionando. Muito esforo tem sido colocado na pesquisa de comportamentos comuns.

5. Utilidade Separao da Apresentao e do Contedo id=erbase id=erbase ID=erbase Prioridade de Constituintes usurio > autores > navegadores > especificao Seguro pelo Projeto Introduz um novo modelo de segurana que permite fazer coisas antes impossveis. 6. Interoperabilidade Especificao 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: tipografia sia oriental Independncia de Mdia 8. O que h de novo em HTML5? DOCTYPE HTML 4.01 XHTML 1.0 HTML 5 No uma tag HTML e sim uma instruo para o browser sobre qual verso do HTML a pgina est escrita. Deve ser a primeira linha de cdigo do documento antes da tag HTML. 9. O que h de novo em HTML5? META HTML 4.01 HTML5 Metatag responsvel por chavear qual tabela de caracteres a pgina est utilizando. 10. HTML Semntica 11. O HTML 5 define uma marcao semntica para descrever o contedo de um elemento; Usar marcao semntica simplifica o projeto das suas pginas HTML; Os novos elementos semnticos podem receber estilos CSS, favorecendo a separao do contedo com a apresentao. Elementos Semnticos 12. HTML4 HTML5 13. HTML Conectividade 14. Permite a comunicao segura entre diversas origens por meio de iframes, abas e janelas; Define a API postMessage como uma forma padro de enviar mensagens; Cross Document Messaging XMLHttpRequest Level 2 (Cliente Servidor) XMLHttpRequest a API que tornou o AJAX possvel; Melhorias: XMLHttpRequest de Mltiplas Origens Eventos de progresso 15. Canal de comunicao full-duplex, que opera atravs de um nico socket pela web; WebSocket (Servidor Cliente) WebRTC (Cliente Cliente) API que permite aos navegadores executar aplicaes de chamada telefnica, video chat e compartilhamento P2P sem a necessidade de plugins; 16. Cross Document Messaging postMessage Fornece passagem assncrona de mensagens entre contextos JavaScript; Pode ser usada para a comunicao entre documentos com a mesma origem, mas especialmente til quando a comunicao ocorre entre documentos de origens diferentes; 17. HTML Acessoadispositivos 18. A especificao define um mecanismo baseado em eventos, a API do JavaScript, e uma marcao adicional para declarar que qualquer tipo de elemento possa ser arrastado em uma pgina. Drag and Drop drag medrag me drag me 19. FullScreen Fornece uma maneira programtica para solicitar visualizao fullscreen do usurio, e sair do fullscreen quando desejado. API que permite que um nico elemento possa ser visto em tela cheia. API destinado a imagens, vdeos e jogos rodando dentro de um continer. 20. HTML Multimdia 21. Possibilidade de usar udio e vdeo sem plugins. 22. Possibilidade de usar udio e vdeo sem plugins. 23. HTML Offline&Storage 24. WebStorage Devs podem armazenar dados no lado do cliente; Session Storage Os dados ficam disponveis apenas para a janela que criou o dado at que seja fechada. Local Storage No depende da sesso. Os dados ficam disponveis para qualquer janela. Permanece disponvel at que seja explicitamente deletada pelo programador do site ou pelo o usurio. 25. WebStorage 26. Web Offline Os usurios podem navegar por todo o site quando esto off-line; Os recursos armazenados em cache so locais e, portanto, so carregados mais rapidamente; O navegador far download do servidor apenas dos recursos que forem alterados. CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js 27. HTML Performance 28. Web Workes Capacidade para processamento em background para aplicaes web; So executados em threads separadas; Permite executar tarefas como disparar scripts de longa durao para executar tarefas muito dispendiosas, mas sem bloquear a interface de usurio ou outros scripts para manipular interaes com o usurio; Possibilidade de tirar proveito de CPUs com mltiplos ncleos. 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 dinmica. 31. API Selectors getElementById() getElementByName() getElementByTagName() querySelector() HTML4 HTML5 Retorna o primeiro elemento da pgina que satisfaa (s) regra(s). querySelector(input.error) querySelectorAll() querySelector(#results td) Retorna todos os elementos que satisfaam regra ou regras especificadas. 32. HTML Grficos&3D 33. Canvas Elemento HTML que pode ser usado para desenhar grficos 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; fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever XML para voc. Com Canvas voc s manda desenhar, e pronto. O contedo acessvel a leitores de tela; O grfico escalvel, no perde resoluo ou serrilha ao redimensionar; O contedo acessvel via DOM. Canvas x SVG 36. WebGL API em JavaScript, disponvel a partir do novo elemento canvas da HTML5, que oferece suporte para renderizao de grficos 2D e grficos 3D. 37. Fim? 38. Fim? 39. Geolocation API que define uma interface de alto nvel para as informaes de localizao (latitude e longitude) associado apenas com o dispositivo que hospeda a implementao. 40. Geolocation Geolocalizao IP o mtodo usado pela maioria dos navegadores web em computadores. Atravs de consultas whois e servios de localizao de IP, vai determinar a cidade ou regio em que voc est. Triangulao GPRS Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o GPS desligado, podem determinar sua posio pela triangulao das antenas GPRS prximas. bem mais preciso que o mtodo baseado em IP, vai mostrar em que parte do bairro voc est. GPS o mtodo mais preciso. Em condies ideais, a margem de erro de apenas 5 metros. 41. Forms O HTML5 trouxe novos campos para formulrios e novos comportamentos para enriquecer a experincia disponvel para os formulrios. Agregam a semntica do seu HTML para definir o tipo de informao que o formulrio precisa, apesar de no causar mudanas drsticas ao visual dos seus elementos. 42. Forms 43. Forms 44. Forms Nome: Nome: 45. Forms Fotos: 46. Agora sim, tchau!