Agilidade e Semântica com HTML5 e CSS3

O QUE É?O QUE É?
Ahhh... essa é fácil...Ahhh... essa é fácil...
HTML5 é a nova versão do HTML, apenas colocaramHTML5 é a nova versão do HTML, apenas colocaram
umas “tagzinhas” a mais.umas “tagzinhas” a mais.

O QUE É?O QUE É?
HTML5HTML5 é o novo padrão HTML. Ok.é o novo padrão HTML. Ok.
HTML5HTML5 são novas tags. Ok.são novas tags. Ok.
HTML5HTML5 deu semântica ao code. Ok.deu semântica ao code. Ok.
Mas oMas o HTML5HTML5 vai um “pouco” além disso, existe umvai um “pouco” além disso, existe um
mundo por trásmundo por trás

 Suporte CSS3 completaSuporte CSS3 completa
 Áudio e Vídeo(SIM! Sem flash!)Áudio e Vídeo(SIM! Sem flash!)
 Gráficos 2D/3D(canvas, SVG)Gráficos 2D/3D(canvas, SVG)
 GeolocalizaçãoGeolocalização
 Armazenamento localArmazenamento local
 CacheCache
 Web WorkersWeb Workers
 MicrodataMicrodata

 Novos elementos para cabeçalhos, rodapés, menus,Novos elementos para cabeçalhos, rodapés, menus,
seções e artigosseções e artigos
 Novos elementos de formulário, novos atributos,Novos elementos de formulário, novos atributos,
novos tipos de entrada, validação automática.novos tipos de entrada, validação automática.

PROCESSOS DO W3CPROCESSOS DO W3C
A recomendação progride através de cinco níveis de maturidade:A recomendação progride através de cinco níveis de maturidade:
1.Working Draft (WD)1.Working Draft (WD)
2.Last Call Working Draft2.Last Call Working Draft
3.Candidate Recommendation (CR)3.Candidate Recommendation (CR)
4.Proposed Recommendation (PR)4.Proposed Recommendation (PR)
5.W3C Recommendation (REC)5.W3C Recommendation (REC)

Working Draft (WD)Working Draft (WD)
A Working Draft é um documento que o W3C publica para a comunidade,A Working Draft é um documento que o W3C publica para a comunidade,
incluindo membros do W3C, o público e outras organizações técnicas. Essa éincluindo membros do W3C, o público e outras organizações técnicas. Essa é
a fase onde ocorre opiniões, debates, e definições sobre a recomendação.a fase onde ocorre opiniões, debates, e definições sobre a recomendação.
Anúncio: O Diretor deve anunciar o primeiro projeto de trabalho da publicaçãoAnúncio: O Diretor deve anunciar o primeiro projeto de trabalho da publicação
a outros grupos do W3C e para o público.a outros grupos do W3C e para o público.
Objetivo: A primeira publicação para o público é um sinal para a comunidadeObjetivo: A primeira publicação para o público é um sinal para a comunidade
começar a rever o documento.começar a rever o documento.

Last Call Working DraftLast Call Working Draft
Anúncio: O Grupo de Trabalho deve anunciar a última chamada para outrosAnúncio: O Grupo de Trabalho deve anunciar a última chamada para outros
grupos do W3C e para o público. Um anúncio Last Call deve :grupos do W3C e para o público. Um anúncio Last Call deve :
•especificar o prazo para comentários de revisão;especificar o prazo para comentários de revisão;
•identificar dependências conhecidas e solicitar a revisão de todos os gruposidentificar dependências conhecidas e solicitar a revisão de todos os grupos
de trabalho dependente;de trabalho dependente;
•solicitar revisão pública.solicitar revisão pública.
Objetivo: Última Chamada anúncio de um Grupo de Trabalho é um sinal deObjetivo: Última Chamada anúncio de um Grupo de Trabalho é um sinal de
que:que:

Candidate Recommendation (CR)Candidate Recommendation (CR)
A Recomendação Candidate é um documento que acredita W3C tem sidoA Recomendação Candidate é um documento que acredita W3C tem sido
amplamente revisto e satisfaz os requisitos técnicos do Grupo de Trabalho.amplamente revisto e satisfaz os requisitos técnicos do Grupo de Trabalho.
W3C publica uma recomendação Candidate para reunir a experiência deW3C publica uma recomendação Candidate para reunir a experiência de
implementação.implementação.

Proposed Recommendation (PR)Proposed Recommendation (PR)
A recomendação proposta é um relatório técnico madura que, após uma amplaA recomendação proposta é um relatório técnico madura que, após uma ampla
revisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivorevisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivo
do W3C para aprovação final.do W3C para aprovação final.

W3C Recommendation (REC)W3C Recommendation (REC)
A Recomendação do W3C é uma especificação ou um conjunto de diretrizesA Recomendação do W3C é uma especificação ou um conjunto de diretrizes
que, após uma extensa formação de consenso, recebeu o aval de membros doque, após uma extensa formação de consenso, recebeu o aval de membros do
W3C e do Diretor. W3C recomenda a ampla implementação das suasW3C e do Diretor. W3C recomenda a ampla implementação das suas
recomendaçõesrecomendações

POR QUE SE PREOCUPAR COMPOR QUE SE PREOCUPAR COM
A SEMÂNTICA?A SEMÂNTICA?
 Dar significado ao documentoDar significado ao documento
 Fácil de encontrar determinada informaçãoFácil de encontrar determinada informação
 Padrão para ferramentas de acessibilidadePadrão para ferramentas de acessibilidade
 Informação consistente para os mecanismos deInformação consistente para os mecanismos de
buscasbuscas
......

ONDE O HTML5 ME AJUDA COMONDE O HTML5 ME AJUDA COM
A SEMÂNTICA?A SEMÂNTICA?

header, nav, article, sidebar, footer...header, nav, article, sidebar, footer...
Tantos ids/classes em comum... então quer dizer queTantos ids/classes em comum... então quer dizer que
eles tem um uso constante, se tornou um padrão essaeles tem um uso constante, se tornou um padrão essa
nomenclatura na web, por quê não criar tags com essesnomenclatura na web, por quê não criar tags com esses
nomes mais utilizados???nomes mais utilizados???
Então...Então...

HTML5 tem vários novos tipos de entrada. Esses novosHTML5 tem vários novos tipos de entrada. Esses novos
recursos permitem um melhor controle de entrada erecursos permitem um melhor controle de entrada e
validação dos dados.validação dos dados.
Vamos então a lista desses novos tipos:Vamos então a lista desses novos tipos:
 colorcolor
 datedate
 datetimedatetime
 emailemail
 monthmonth
 numbernumber
 rangerange
 searchsearch
 teltel
 timetime
 urlurl
 weekweek

Assim como os tipos surgiram também alguns novosAssim como os tipos surgiram também alguns novos
atributos...atributos...
InputInput
height and widthheight and width
listlist
pattern (regexp)pattern (regexp)
placeholderplaceholder
requiredrequired
……
FormForm
autocompleteautocomplete
novalidatenovalidate

Fonte: http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png

Fonte: http://html5boilerplate.com/

Fonte: http://www.initializr.com/

Faça as ferramentas trabalharem ao seu favor, automatizarFaça as ferramentas trabalharem ao seu favor, automatizar
tarefas, criar templates, etc.tarefas, criar templates, etc.

Depois de decidir quais ferramentas utilizar, e deixar oDepois de decidir quais ferramentas utilizar, e deixar o
ambiente de desenvolvimento configurado, é só alegria!ambiente de desenvolvimento configurado, é só alegria!

Transparência
Valores:
0.0 significa totalmente
transparente
opaco.
opacity

RGB com canal alpha
(opacidade/transparência)
Valores:
transparente
opaco.
rgba

HSL
(hue,saturation,lightness)
com canal alpha
(opacidade/transparência)
Valores percentuais de 0
a 360. Alpha igual ao
RGBA.
HSL/A Color

background-image
Possibilidade de incluir
mais de um background
no mesmo elemento.
As imagens devem ser
separadas por vírgula(,)

border-color
Permite colocar mais de
uma borda na mesma
definição.
Devem ser separados por
espaço.

border-radius
Arredondamento de
bordas.

box-shadow
Sombreamento do
elemento.
Ordem: espaçamento
horizontal, espaçamento
vertical, blur, cor da
sombra.

text-shadow
Sombreamento do texto.
Ordem: espaçamento
horizontal, espaçamento
vertical, blur, cor da
sombra.

@font-face
Permite associar fontes
diferentes das existentes
do SO. Após associado
estará disponível na
propriedade font-family.
Obs.: IE suporta
apenas .eot e os outros
browsers suportam além
do .eot o .ttf e o .otf

rotate
Possibilidade de
rotacionar um elemento
em determinado ângulo.

scale
Dimensionar a escala de
um elemento
com base nas posições
X e Y.
Ordem: X,Y
Caso seja passado
apenas um parâmetro o
mesmo será aplicado em
X e Y.

skew
Inclinar um elemento
com base nas posições
X e Y.
Ordem: X,Y
Caso seja passado
apenas um parâmetro o
valor de Y assumirá o
valor 0.

translate
Mover um objeto ao
longo do eixo
especificado. É aceito
em px, em, %, etc.

Can I use... Support tables for HTML5, CSS3, etc
Fonte: http://caniuse.com/

Nossaaa! Que tanta coisa! Não precisa aprender tudo deNossaaa! Que tanta coisa! Não precisa aprender tudo de
uma vez só, vá com calma.uma vez só, vá com calma.

http://commons.wikimedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-
Sergey-Mavrody.png
http://www.w3schools.com/html/html5_intro.asp
http://www.slideshare.net/1Marc/html5-essentials
http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3
http://www.w3schools.com/html/html5_form_input_types.asp
REFERÊNCIAS

https://twitter.com/andersonaguiar
https://github.com/andersonaguiar
http://www.slideshare.net/andersonagr

Agilidade e Semântica com HTML5 e CSS3

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (11)

Semelhante a Agilidade e Semântica com HTML5 e CSS3 (20)

Último (10)

Agilidade e Semântica com HTML5 e CSS3