Download - Agilidade e Semântica com HTML5 e CSS3
![Page 1: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/1.jpg)
![Page 2: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/2.jpg)
![Page 3: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/3.jpg)
![Page 4: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/4.jpg)
O QUE É?O QUE É?
Ahhh... essa é fácil...Ahhh... essa é fácil...
HTML5 é a nova versão do HTML, apenas colocaram HTML5 é a nova versão do HTML, apenas colocaram umas “tagzinhas” a mais.umas “tagzinhas” a mais.
![Page 5: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/5.jpg)
![Page 6: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/6.jpg)
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 o Mas o HTML5HTML5 vai um “pouco” além disso, existe um vai um “pouco” além disso, existe um mundo por trásmundo por trás
![Page 7: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/7.jpg)
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
![Page 8: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/8.jpg)
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.
![Page 9: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/9.jpg)
![Page 10: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/10.jpg)
![Page 11: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/11.jpg)
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 Draft 2.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)
![Page 12: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/12.jpg)
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ção Anú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 comunidade Objetivo: 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.
![Page 13: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/13.jpg)
Last Call Working Draft Last Call Working Draft
Anúncio: O Grupo de Trabalho deve anunciar a última chamada para outros Anú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 grupos identificar 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 de Objetivo: Última Chamada anúncio de um Grupo de Trabalho é um sinal de
que:que:
![Page 14: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/14.jpg)
Candidate Recommendation (CR)Candidate Recommendation (CR)
A Recomendação Candidate é um documento que acredita W3C tem sido A 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 de W3C publica uma recomendação Candidate para reunir a experiência de
implementação.implementação.
![Page 15: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/15.jpg)
Proposed Recommendation (PR)Proposed Recommendation (PR)
A recomendação proposta é um relatório técnico madura que, após uma ampla A 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ê Consultivo revisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivo
do W3C para aprovação final.do W3C para aprovação final.
![Page 16: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/16.jpg)
W3C Recommendation (REC)W3C Recommendation (REC)
A Recomendação do W3C é uma especificação ou um conjunto de diretrizes A 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 do que, 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 suas W3C e do Diretor. W3C recomenda a ampla implementação das suas
recomendaçõesrecomendações
![Page 17: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/17.jpg)
SEMÂNTICASEMÂNTICA
![Page 18: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/18.jpg)
POR QUE SE PREOCUPAR COM POR 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 de Informação consistente para os mecanismos de
buscasbuscas
......
![Page 19: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/19.jpg)
ONDE O HTML5 ME AJUDA COM ONDE O HTML5 ME AJUDA COM A SEMÂNTICA?A SEMÂNTICA?
![Page 20: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/20.jpg)
![Page 21: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/21.jpg)
header, nav, article, sidebar, footer...header, nav, article, sidebar, footer...
Tantos ids/classes em comum... então quer dizer que Tantos ids/classes em comum... então quer dizer que eles tem um uso constante, se tornou um padrão essa eles tem um uso constante, se tornou um padrão essa nomenclatura na web, por quê não criar tags com esses nomenclatura na web, por quê não criar tags com esses nomes mais utilizados???nomes mais utilizados???
Então...Então...
![Page 22: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/22.jpg)
![Page 23: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/23.jpg)
FORMULÁRIOSFORMULÁRIOS
![Page 24: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/24.jpg)
HTML5 tem vários novos tipos de entrada. Esses novos HTML5 tem vários novos tipos de entrada. Esses novos recursos permitem um melhor controle de entrada e recursos 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
![Page 25: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/25.jpg)
Assim como os tipos surgiram também alguns novos Assim como os tipos surgiram também alguns novos atributos...atributos...
InputInput
height and widthheight and widthlistlistpattern (regexp)pattern (regexp)placeholderplaceholderrequiredrequired……
FormForm
autocompleteautocompletenovalidatenovalidate
![Page 26: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/26.jpg)
![Page 27: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/27.jpg)
AGILIDADEAGILIDADE
![Page 28: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/28.jpg)
![Page 29: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/29.jpg)
![Page 30: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/30.jpg)
Fonte: http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png
![Page 31: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/31.jpg)
Fonte: http://html5boilerplate.com/
![Page 32: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/32.jpg)
Fonte: http://www.initializr.com/
![Page 33: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/33.jpg)
![Page 34: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/34.jpg)
Faça as ferramentas trabalharem ao seu favor, automatizar Faça as ferramentas trabalharem ao seu favor, automatizar tarefas, criar templates, etc.tarefas, criar templates, etc.
![Page 35: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/35.jpg)
Depois de decidir quais ferramentas utilizar, e deixar o Depois de decidir quais ferramentas utilizar, e deixar o ambiente de desenvolvimento configurado, é só alegria!ambiente de desenvolvimento configurado, é só alegria!
![Page 36: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/36.jpg)
![Page 37: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/37.jpg)
COLOR
![Page 38: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/38.jpg)
Transparência
Valores:
0.0 significa totalmente transparente
1.0 significa totalmente opaco.
opacity
![Page 39: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/39.jpg)
RGB com canal alpha(opacidade/transparência)
Valores:
0.0 significa totalmente transparente
1.0 significa totalmente opaco.
rgba
![Page 40: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/40.jpg)
HSL(hue,saturation,lightness)com canal alpha(opacidade/transparência)
Valores percentuais de 0 a 360. Alpha igual ao RGBA.
HSL/A Color
![Page 41: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/41.jpg)
BACKGROUNDS
![Page 42: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/42.jpg)
background-image
Possibilidade de incluir mais de um background no mesmo elemento.
As imagens devem ser separadas por vírgula(,)
![Page 43: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/43.jpg)
BORDERS
![Page 44: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/44.jpg)
border-color
Permite colocar mais de uma borda na mesma definição.
Devem ser separados por espaço.
![Page 45: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/45.jpg)
border-radius
Arredondamento de bordas.
![Page 46: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/46.jpg)
box-shadow
Sombreamento do elemento.
Ordem: espaçamento horizontal, espaçamento vertical, blur, cor da sombra.
![Page 47: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/47.jpg)
TEXT
![Page 48: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/48.jpg)
text-shadow
Sombreamento do texto.
Ordem: espaçamento horizontal, espaçamento vertical, blur, cor da sombra.
![Page 49: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/49.jpg)
@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
![Page 50: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/50.jpg)
TRANSFORMATION
![Page 51: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/51.jpg)
rotate
Possibilidade de rotacionar um elemento em determinado ângulo.
![Page 52: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/52.jpg)
scale
Dimensionar a escala de um elementocom base nas posiçõesX e Y.
Ordem: X,Y
Caso seja passado apenas um parâmetro o mesmo será aplicado em X e Y.
![Page 53: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/53.jpg)
skew
Inclinar um elementocom base nas posiçõesX e Y.
Ordem: X,Y
Caso seja passado apenas um parâmetro o valor de Y assumirá o valor 0.
![Page 54: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/54.jpg)
translate
Mover um objeto ao longo do eixo especificado. É aceito em px, em, %, etc.
![Page 55: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/55.jpg)
![Page 56: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/56.jpg)
Can I use... Support tables for HTML5, CSS3, etc
Fonte: http://caniuse.com/
![Page 57: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/57.jpg)
Nossaaa! Que tanta coisa! Não precisa aprender tudo de Nossaaa! Que tanta coisa! Não precisa aprender tudo de uma vez só, vá com calma.uma vez só, vá com calma.
![Page 58: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/58.jpg)
And on the next episode…
![Page 59: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/59.jpg)
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
![Page 60: Agilidade e Semântica com HTML5 e CSS3](https://reader035.vdocuments.com.br/reader035/viewer/2022081508/557da965d8b42a351d8b46b0/html5/thumbnails/60.jpg)
https://twitter.com/andersonaguiar
https://github.com/andersonaguiar
http://www.slideshare.net/andersonagr