Introdução ao HTML5

Twitter
Nome
contato@caiotarifa.com
E-mail
Site

Formaweb

nossaequipe

Hugo Demiglio Gregório Ferrari Matheus Cáceres Wagner Guerrero
Programador Designer Programador Desenvolvedor

Programador web, Sonysta fanático, Perdido, lutador, Nintendista, nerd, fã dos
empresário, adorador nervoso, formado em trabalha com web, ama heróis da Marvel e
de eletrônica nas horas games pela faculdade RubyOnRails e Linux. Já desenvolve sites nas
vagas e MacFag. Anhembi Morumbi. falei perdido? horas vagas.

HTML5

Formaweb

nossosclientes

Não Intendo Ducoco Alimentos DomHost Escava Forte

Fantasia Ariboni Casinha Colorida Conselheiro
Criativo

HTML5

Para falarmos de HTML5, iremos dividir o
conteúdo em 8 capítulos.

HTML5 Semantics

doctype
O doctype indica para o navegador qual a versão do HTML que
você está utilizando.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

HTML5

HTML5 Semantics

charset
Já o charset serve para indicar ao browser qual tabela de
caractéres está utilizando.

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

<meta charset="utf-8">

HTML5

HTML5 Semantics

novastags
<div id=‘header’>

<div id=‘nav’>

<div id=‘article’>
<div id=‘side’>
<div id=‘section’>

<div id=‘footer’>

HTML5

HTML5 Semantics

novastags
<header>

<nav>

<article>
<aside>
<section>

<footer>

HTML5

HTML5 Semantics

forms
Novos formulários
Antes do HTML5 estávamos restringidos ao uso de poucos tipos
de formulários, como text, hidden, textarea, select, radio e
checkbox.
Agora, existem novos tipos de formulários que podemos utilizar,
assim podemos informar ao browser exatamente o dado que
você espera receber. No caso de um telefone, por exemplo, o
navegador mobile pode exibir um teclado especial.
Os novos tipos são tel, search, email, url, datetime, date, month,
week, time, datetime-local, number, range e color.

HTML5

HTML5 Semantics

forms
Tipos de dados e validadores.
Ainda em formulários temos alguns novos atributos!

Autofocus Required

Placeholder Pattern

HTML5

HTML5 Semantics

microdata

Recipe Products
People

Events

HTML5

HTML5 Semantics

microdata
Existem mais formatos de data, como softwares e
músicas. Esses padrões podem Products
Recipe ser encontrados no site:
People

http://www.data-vocabulary.org/
Events

HTML5

HTML5 Semantics

acessibilidade

Offline & Storage

applicationcache
Arquivos cacheados para MANIFESTO
serem utilizados quando
offline.

Arquivos que não
funcionam sem conexão
com a Internet.

Indica arquivos
cacheados para substituir
quando offline.

HTML5

Ofﬂine & Storage

webstorage
Banco de dados
Muito mais espaço de
armazenamento.
Dados ﬁcam guardados ao
mudar de página.
Não tem data para expirar.

localstorage sessionstorage

HTML5

Ofﬂine & Storage

webstorage
sessionstorage
Fica disponível apenas para a janela que guardou o
dado até que seja fechada.

localstorage
Não depende da sessão. Ao setar um dado, este
ﬁcará automaticamente disponível para qualquer
janela. Além disso ela permanecerá ativa até que seja
deletada pelo programador do site ou pelo usuário.

HTML5

Ofﬂine & Storage

exemplos

HTML5

Device Access

dispositivos
Hoje em dia existem muitos dispositivos diferentes que
acessam a Internet.

HTML5

Ofﬂine & Storage

multitouch

Através de uma API, será possível resgatar eventos como touchstart,
touchmove e touchend.

HTML5

Ofﬂine & Storage

draganddrop

Antes era necessário o uso de
JavaScript para conseguir arrastar
objetos dentro de uma página. Com exemplo
a chegada do HTML5, este recurso http://html5demos.com/drag
passou a ser nativo e conta com
vários eventos: dragstart, drag,
dragend, entre outros.

HTML5

Ofﬂine & Storage

geolocation
Existem três populares maneiras
de resgatar a localização de um
usuário: GPS, GPRS e IP.
Cada navegador tem seu próprio
método de calcular esta alta
precisão.
Com a latitude e a longitude
obtida é possível gerar mapas,
submeter via ajax, enviar os
dados para um webservice, entre
outros...

exemplo
http://html5demos.com/geo

HTML5

Ofﬂine & Storage

device
Permite o acesso a
webcam do usuário.
Com um
conhecimento
avançado sobre
processamento digital
de imagens é
possível programar
efeitos em tempo real
com JavaScript.

exemplo
http://neave.com/webcam/

HTML5

Connectivity

websockets

HTML5

Connectivity

serversent
Nos dispositívos móveis da Apple
conhecemos as “Push
Notiﬁcations”, que funcionam da
mesma forma no JavaScript.
É aberta uma conexão com o
servidor, que por sua vez ﬁca
escutando uma porta de
comunicação.
Isto pode ser utilizado por
exemplo para implementar uma
interface de chat ou um monitor
de status de alguma operação
demorada ocorrendo no servidor.

HTML5

Connectivity

kinect
Este é um bom exemplo de
dispositivo externo que pode se
comunicar com o JavaScript
através do Web Socket.
O Kinect, através de uma porta
exclusiva, envia as coordenadas,
com uma conexão de escuta é
possível trabalhar com esses
dados dentro do site.

HTML5

Multimedia

audio
Por padrão, todo browser
deveria suportar o codec livre
OggVorbis, mas infelizmente
isso não acontece.
Para contornar este problema,
é possível indicar origens
alternativas, como no exemplo
ao lado.
Uma das vantagens de utilizar
esta especiﬁcação é a
liberdade de criar e modiﬁcar o
visual dos reprodutores.

HTML5

Multimedia

video

A especiﬁcação de vídeo é
semelhante a de áudio, basta
apenas substituir a tag para
<video>.

HTML5

3D, Graphics, Effects

SVG
SVG é a abreviatura de Scalable Vector Graphics que pode ser
traduzido como gráficos vetoriais escaláveis.
Basicamente é uma linguagem XML, parecida com HTML, para
descrever de forma vetorial desenhos e gráficos bidimensionais.
Estes gráficos podem ser estáticos, dinâmicos e até mesmo
animados.

HTML5


canvas
Canvas é uma tela de desenho
manipulada pelo JavaScript, por
hora é possível manipular
apenas gráﬁcos no contexto 2D.
Esta é a tecnologia mais
utilizada para o desenvolvimento
de jogos.

HTML5


webgl
WebGL é uma extensão do elemento Canvas, entretanto,
utilizando sua API é possível criar gráﬁcos no contexto 3D.

exemplo
http://www.chromeexperiments.com/webgl

HTML5

Performance & Integration

webworkers
Web Workers é uma API do
JavaScript para colocar
processos em background.
Assim que o processo é
ﬁnalizado pode-se então
resgatar os dados do
resultado.

HTML5

Performance & Integration

XHR2
XHR2 é a abreviação para XMLHttpRequest Level 2, ou se
preferir Ajax2.

Com ele, novos recursos estarão disponíveis para serem
manipulados com JavaScript:
• Upload seguimentado de arquivos;
• Deﬁnir formato de retorno;
• Enviar formulários (FormData);
• Requisitar páginas em outros domínios;
• Baixar e salvar arquivos para funcionamento ofﬂine.

HTML5

CSS3 Styling

novaspropriedades
• border-radius: Bordas arredondadas.
• box-shadow: Sombra em objetos.
• text-shadow: Sombra em textos.
• linear-gradient: Cria gradientes em backgrounds.
• keyframes: Semelhante ao Flash.
• transition: Cria animações de transição.
• transform: Transforma um objeto podendo rotaciona-lo ou
amplia-lo.

Estas são algumas das propriedades da terceira versão do
CSS. As opções são tantas que seria necessária uma nova
apresentação para falar apenas disto.

HTML5

CSS3 Styling

responsivedesign
O mesmo código HTML com um estilo exclusivo para
cada dispositivo.

HTML5

Já posso usar?

HTML5
Pode!

Modernizr é uma biblioteca JavaScript que implementa
suporte as novas tags do HTML5 nos browsers, além disso
reúne uma série de veriﬁcações as novas tecnologias.

HTML5

Vida longa e próspera!

Dúvidas?

Introdução ao HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introdução ao HTML5

Ähnlich wie Introdução ao HTML5 (20)

Introdução ao HTML5

Hinweis der Redaktion