View
498
Download
3
Category
Preview:
DESCRIPTION
Apresentação sobre HTML5 + CSS3, para alunos da Uneb - Alagoinhas
Citation preview
HTML5 + CSS3Rommel Peixoto
Breve história do HTML Estrutura de um documento HTML5 Comparação entre HTML4/XHTML e HTML5 Conhecer as novidades do HTML5 O estiloso CSS3
Vamos ver! ;)
Códigos, códigos, códigos... Explicação detalhada das APIs Exemplos online
Não vamos ver! :/
1998:
HTML 4.0
Senta que lá vem história!
2000:
XHTML
Senta que lá vem história!
2002:
XHTML 2.0
Senta que lá vem história!
2004:
Web 2.0
Senta que lá vem história!
2006:
W3C + WHATWG
Senta que lá vem história!
2009:
W3C -> HTML5
Senta que lá vem história!
2010 ~ 2011:
HTML5
Senta que lá vem história!
2012:
FIM DO MUNDO!!!
Senta que lá vem história!
Alguém sabe de cabeça como escreve o DOCTYPE?
Estrutura...
HTML5
<!doctype html>
Estrutura...
Outro elemento importante em todo HTML: META
HTML 4.0
<meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>
XHTML
<meta http-equiv=“content-type” content=“text/html;charset=UTF-8” />
HTML5
<meta charset=“UTF-8”>
Estrutura...
Juntando tudo!!!
Estrutura...
Conectividade e aplicações em tempo real Novas possibilidades de estilo com CSS3 Gráficos 2D, 3D e Vetoriais Recursos multimídia Melhor performance Elementos semânticos Armazenamento offline APIs JS: Drag and Drop, Geolocalização, etc...
Algumas novidades do HTML5
Tags de estrutura:
Elementos Semânticos...
Tags de estrutura:
Elementos Semânticos...
Tags de estrutura:
Elementos Semânticos...
Novos tipos de campos:
Novos elementos!
Novos tipos de campos:
Novos elementos!
Tipos de dados e validadores:
Novos elementos!
Tipos de dados e validadores :
Novos elementos!
Conteúdo editável :
Novos elementos!
Áudio:
Novos elementos!
Vídeo:
Novos elementos!
Drag and Drop:
Novos elementos!
Correção Ortográfica:
Novos elementos!
Gráfico:<canvas>
Novos elementos!
Armazenamento:
Cookies Web Storage Web SQL Databases
Novos elementos!
Geolocalização:
Novos elementos!
Quem nao quer matar o designer, quando pede:
Fazer caixinhas com bordas arredondadas Colocar uma sombrinha nos textos/caixas Utilizar um background gigante Utilizar um background composto Fazer uma página adaptável ao tamanho da página Fazer os títulos das páginas ter uma font mais estilosa
CSS3
Bordas arredondadas:
CSS3
Sombras:
CSS3
Background Gigante:
SVG + background-size
CSS3
Gradient:
CSS3
Cores RGBA:
CSS3
Animações:
CSS3
font:
CSS3
Media Queries:
CSS3
rommelweb rommel.com.br
É isso aí!!!
Recommended