HTML5 e suas APIs - Uma introdução completa

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

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.

● 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

● 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;

● 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.

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>

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.

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

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.

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.

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.

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
<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>

HTML5 e suas APIs - Uma introdução completa

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (7)

Semelhante a HTML5 e suas APIs - Uma introdução completa

Semelhante a HTML5 e suas APIs - Uma introdução completa (20)

Mais de Luciano Borges

Mais de Luciano Borges (7)

HTML5 e suas APIs - Uma introdução completa