Padrões para Criação e Interpretação de Conteúdos Web com HTML5

414 views

Published on

Slides para iniciantes no mundo front-end.
HTML5 version of this presentation: talks.vagnersantana.com/infoeste

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
414
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Padrões para Criação e Interpretação de Conteúdos Web com HTML5

  1. 1. Padrões para Criação e Interpretaçãode Conteúdos Web com HTML5Vagner Santana - Web Developer at Associação Educacional PrudentinaInfoeste 2013 - 14/05/2013
  2. 2. Futuro?
  3. 3. WHATWGOpen Web Platformtalks.vagnersantana.com #infoeste2013 3/36
  4. 4. dowebsitesneedtolookexactlythesameineverybrowser.com
  5. 5. Browser Enginestalks.vagnersantana.com #infoeste2013 5/36
  6. 6. Perca tempo configurando suasferramentas...
  7. 7. Sublime Texthttp://www.sublimetext.comSublime Package Controlltalks.vagnersantana.com #infoeste2013 7/36
  8. 8. Emmethttp://emmet.iotalks.vagnersantana.com #infoeste2013 8/36
  9. 9. HTMLInformaçãoCSSAparênciaJavaScriptComportamentoDe que é a responsabilidadetalks.vagnersantana.com #infoeste2013 9/36
  10. 10. Estruturatalks.vagnersantana.com #infoeste2013<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><head><title>Document</title></head><body></body></html>HTML10/36
  11. 11. Semântica
  12. 12. Formulários#f55c00 Insira seu texto name@mail.comGotalks.vagnersantana.com #infoeste2013 13/36
  13. 13. MultimediaAudio / Videotalks.vagnersantana.com #infoeste2013 14/36
  14. 14. CSS (3)
  15. 15. CSSSeletores Básicostalks.vagnersantana.com #infoeste2013/* Selecionando uma tag */p { color: #b23464; }/* Selecionando um ID */#menu{font-size: 30px;text-align: center;}/* Selecionando uma classe */.box{width: 600px;height: 600px;}CSS16/36
  16. 16. CSSSeletores Avançadostalks.vagnersantana.com #infoeste2013/* Primeiro elemento parágrafo da div com aclasse article */div.article p:first-child {font-style: italic;}/* Estados */a:link{ color: #00b295; }a:active{ color: #005a4c; }a:hover{ color: #a4a4b2; }input[type=text]:focus {background: #f7ff47;}CSS17/36
  17. 17. CSS3 Newstalks.vagnersantana.com #infoeste2013Border-radiusTransparency / OpacityGradientsAnimationsText-shadowBox-shadowBackground DecorationBox Sizing········18/36
  18. 18. Fontes com CSS3
  19. 19. @font-facetalks.vagnersantana.com #infoeste2013@font-face {font-family: icomoon;src:url(fonts/icomoon.eot);src:url(fonts/icomoon.eot?#iefix) format(embedded-opentype),url(fonts/icomoon.woff) format(woff),url(fonts/icomoon.ttf) format(truetype),url(fonts/icomoon.svg#icomoon) format(svg);font-weight: normal;font-style: normal;}.ico{ font-family: icomoon; }CSS20/36
  20. 20. Animaçõestalks.vagnersantana.com #infoeste2013a .circle{transition: all 2s ease;}a:hover .circle{transform: rotate(-720deg);}CSS21/36
  21. 21. Vendors Prefixestalks.vagnersantana.com #infoeste2013a .circle{-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}a:hover .circle{-webkit-transform: rotate(-720deg);-moz-transform: rotate(-720deg);-o-transform: rotate(-720deg);transform: rotate(-720deg);}CSS22/36
  22. 22. http://leaverou.github.io/prefixfree
  23. 23. Crie seus padrões!
  24. 24. http://html5boilerplate.com/
  25. 25. http://www.initializr.com
  26. 26. http://modernizr.com
  27. 27. http://caniuse.com/
  28. 28. Onde buscar conhecimento?
  29. 29. http://diveintohtml5.com.br
  30. 30. http://www.html5rocks.com
  31. 31. http://html5doctor.com
  32. 32. http://tableless.com
  33. 33. Livrostalks.vagnersantana.com #infoeste2013 34/36
  34. 34. Obrigado =Dhttp://vagnersantana.comhttp://github.com/vagnervjs@vagnervjstalks.vagnersantana.com #infoeste2013 36/36

×