Your SlideShare is downloading. ×
Agilidade e Semântica com HTML5 e CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Agilidade e Semântica com HTML5 e CSS3

1,737
views

Published on

As novas features que essas duas tecnologias trouxeram para o mundo da Web. Formas de se ter agilidade com elas e a semântica ao documento. Bem-vindo ao mundo do HTML5 e CSS3!

As novas features que essas duas tecnologias trouxeram para o mundo da Web. Formas de se ter agilidade com elas e a semântica ao documento. Bem-vindo ao mundo do HTML5 e CSS3!

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,737
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
90
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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 colocaramumas “tagzinhas” a mais.umas “tagzinhas” a mais.
  • 2. 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 ummundo por trásmundo por trás
  • 3.  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
  • 4.  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.
  • 5. PROCESSOS DO W3CPROCESSOS DO W3CA 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 Draft3.Candidate Recommendation (CR)3.Candidate Recommendation (CR)4.Proposed Recommendation (PR)4.Proposed Recommendation (PR)5.W3C Recommendation (REC)5.W3C Recommendation (REC)
  • 6. 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çãoa 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 comunidadecomeçar a rever o documento.começar a rever o documento.
  • 7. Last Call Working DraftLast Call Working DraftAnúncio: O Grupo de Trabalho deve anunciar a última chamada para outrosAnúncio: O Grupo de Trabalho deve anunciar a última chamada para outrosgrupos 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 gruposde 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 deque:que:
  • 8. 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 sidoamplamente 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 deimplementação.implementação.
  • 9. 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 amplarevisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivorevisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivodo W3C para aprovação final.do W3C para aprovação final.
  • 10. 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 diretrizesque, 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 doW3C e do Diretor. W3C recomenda a ampla implementação das suasW3C e do Diretor. W3C recomenda a ampla implementação das suasrecomendaçõesrecomendações
  • 11. SEMÂNTICASEMÂNTICA
  • 12. POR QUE SE PREOCUPAR COMPOR QUE SE PREOCUPAR COMA 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 debuscasbuscas......
  • 13. ONDE O HTML5 ME AJUDA COMONDE O HTML5 ME AJUDA COMA SEMÂNTICA?A SEMÂNTICA?
  • 14. 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 queeles tem um uso constante, se tornou um padrão essaeles tem um uso constante, se tornou um padrão essanomenclatura na web, por quê não criar tags com essesnomenclatura na web, por quê não criar tags com essesnomes mais utilizados???nomes mais utilizados???Então...Então...
  • 15. FORMULÁRIOSFORMULÁRIOS
  • 16. HTML5 tem vários novos tipos de entrada. Esses novosHTML5 tem vários novos tipos de entrada. Esses novosrecursos permitem um melhor controle de entrada erecursos permitem um melhor controle de entrada evalidaçã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
  • 17. Assim como os tipos surgiram também alguns novosAssim como os tipos surgiram também alguns novosatributos...atributos...InputInputheight and widthheight and widthlistlistpattern (regexp)pattern (regexp)placeholderplaceholderrequiredrequired……FormFormautocompleteautocompletenovalidatenovalidate
  • 18. AGILIDADEAGILIDADE
  • 19. Fonte: http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png
  • 20. Fonte: http://html5boilerplate.com/
  • 21. Fonte: http://www.initializr.com/
  • 22. Faça as ferramentas trabalharem ao seu favor, automatizarFaça as ferramentas trabalharem ao seu favor, automatizartarefas, criar templates, etc.tarefas, criar templates, etc.
  • 23. Depois de decidir quais ferramentas utilizar, e deixar oDepois de decidir quais ferramentas utilizar, e deixar oambiente de desenvolvimento configurado, é só alegria!ambiente de desenvolvimento configurado, é só alegria!
  • 24. COLOR
  • 25. TransparênciaValores:0.0 significa totalmentetransparente1.0 significa totalmenteopaco.opacity
  • 26. RGB com canal alpha(opacidade/transparência)Valores:0.0 significa totalmentetransparente1.0 significa totalmenteopaco.rgba
  • 27. HSL(hue,saturation,lightness)com canal alpha(opacidade/transparência)Valores percentuais de 0a 360. Alpha igual aoRGBA.HSL/A Color
  • 28. BACKGROUNDS
  • 29. background-imagePossibilidade de incluirmais de um backgroundno mesmo elemento.As imagens devem serseparadas por vírgula(,)
  • 30. BORDERS
  • 31. border-colorPermite colocar mais deuma borda na mesmadefinição.Devem ser separados porespaço.
  • 32. border-radiusArredondamento debordas.
  • 33. box-shadowSombreamento doelemento.Ordem: espaçamentohorizontal, espaçamentovertical, blur, cor dasombra.
  • 34. TEXT
  • 35. text-shadowSombreamento do texto.Ordem: espaçamentohorizontal, espaçamentovertical, blur, cor dasombra.
  • 36. @font-facePermite associar fontesdiferentes das existentesdo SO. Após associadoestará disponível napropriedade font-family.Obs.: IE suportaapenas .eot e os outrosbrowsers suportam alémdo .eot o .ttf e o .otf
  • 37. TRANSFORMATION
  • 38. rotatePossibilidade derotacionar um elementoem determinado ângulo.
  • 39. scaleDimensionar a escala deum elementocom base nas posiçõesX e Y.Ordem: X,YCaso seja passadoapenas um parâmetro omesmo será aplicado emX e Y.
  • 40. skewInclinar um elementocom base nas posiçõesX e Y.Ordem: X,YCaso seja passadoapenas um parâmetro ovalor de Y assumirá ovalor 0.
  • 41. translateMover um objeto aolongo do eixoespecificado. É aceitoem px, em, %, etc.
  • 42. Can I use... Support tables for HTML5, CSS3, etcFonte: http://caniuse.com/
  • 43. Nossaaa! Que tanta coisa! Não precisa aprender tudo deNossaaa! Que tanta coisa! Não precisa aprender tudo deuma vez só, vá com calma.uma vez só, vá com calma.
  • 44. And on the next episode…
  • 45. http://commons.wikimedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.pnghttp://www.w3schools.com/html/html5_intro.asphttp://www.slideshare.net/1Marc/html5-essentialshttp://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3http://www.w3schools.com/html/html5_form_input_types.aspREFERÊNCIAS
  • 46. https://twitter.com/andersonaguiarhttps://github.com/andersonaguiarhttp://www.slideshare.net/andersonagr