HTML5 & suas APIs
Upcoming SlideShare
Loading in...5
×
 

HTML5 & suas APIs

on

  • 309 views

 

Statistics

Views

Total Views
309
Views on SlideShare
292
Embed Views
17

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 17

https://twitter.com 17

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 & suas APIs HTML5 & suas APIs Presentation Transcript

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