EDTED SP - HTML 5 e CSS 3 - Junho de 2011

2,507 views
2,425 views

Published on

Palestra apresentada no EDTED de SP sobre HTML 5 e CSS 3. Tema: "Realize mais com HTML 5 e CSS 3". Público super bacana!

Qualquer pergunta, sugestão, etc entre em contato: @leobalter ou leo@balter.com.br

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
2,507
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
64
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

EDTED SP - HTML 5 e CSS 3 - Junho de 2011

  1. 1. Leo Balter @leobalter
  2. 2. sim, esse slide vai estar online com todos os links!
  3. 3. @leobalter
  4. 4. @leobalter
  5. 5. @leobalter
  6. 6. #leotroll @leobalter
  7. 7. O HTML 5 é agora e não depois, não perca tempo! @leobalter
  8. 8. <!DOCTYPE html
  9. 9. <!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
  10. 10. <header><nav><section> <aside> <article> <article><footer> @leobalter
  11. 11. novos elementos não sãorenderizados como blocos! OMG! @leobalter
  12. 12. <!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, aside, figure, footer, header, hgroup,  menu, nav, section { display: block; }</style> @leobalter
  13. 13. Encurtando o caminho... @leobalter
  14. 14. http://www.modernizr.com/
  15. 15. http://html5boilerplate.com/ @leobalter
  16. 16. <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
  17. 17. #elemento { padding-right: 0; _padding-right: 10px; }O melhor hack é não precisar de hacks <!--[if lt IE 7 ]> <link href=”ie6.css” /> <![endif]--> @leobalter
  18. 18. ProgressiveEnhancement & Polyfills! @leobalter
  19. 19. http://goo.gl/KjSdM
  20. 20. CSS 3
  21. 21. Seletores CSS3tudo tem que ser encontrado @leobalter
  22. 22. Selectors test: http://goo.gl/IM0tc
  23. 23. http://goo.gl/WWYtR
  24. 24. Propriedades CSS3 sua página não precisa ser tão quadrada Leia também: http://goo.gl/9Ijci http://www.css3.info/preview/ @leobalter
  25. 25. http://goo.gl/E5OxD
  26. 26. http://css3pie.com/ @leobalter
  27. 27. Media QueriesCom o media queries seu site vai impressionar diversas mídias como um camaleão @leobalter
  28. 28. http://goo.gl/DWOJj @leobalter
  29. 29. /* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }} @leobalter
  30. 30. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  31. 31. http://jasonweaver.name/
  32. 32. http://mediaqueri.es/
  33. 33. @font-facenão é mais um truque, é uma realidade! @leobalter
  34. 34. @font-face { font-family: ActionManRegular; src: url(Action_Man-webfont.eot); src: url(Action_Man-webfont.eot?#iefix) format(embedded-opentype), url(Action_Man-webfont.woff ) format(woff ), url(Action_Man-webfont.ttf ) format(truetype), url(Action_Man-webfont.svg#ActionManRegular) format(svg); font-weight: normal; font-style: normal;} http://h5c3.heroku.com/fontface @leobalter
  35. 35. é muito fácil utilizar @font-face mastemos ferramentas que tornam isso ainda mais simples @leobalter
  36. 36. http://fontsquirrel.com @leobalter
  37. 37. http://goo.gl/atq0A @leobalter
  38. 38. <link href=http://fonts.googleapis.com/css?family=Zeyada rel=stylesheet type=text/css><style>body { font-family: ‘Zeyada’, serif;}</style>
  39. 39. Podemos carregar várias fontes juntas pelo Google Web Fonts:http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
  40. 40. Também podemos carregar só o texto a ser utilizado para otimizar a nossa performance!http://fonts.googleapis.com/css?family=Droid+Sans&text=Olá
  41. 41. Drag & Drop File Api @leobalter
  42. 42. http://min.us @leobalter
  43. 43. Geolocationa gente já sabe onde você está, e você? @leobalter
  44. 44. http://maps.google.com @leobalter
  45. 45. Google Maps API Family http://goo.gl/sTm1a @leobalter
  46. 46. Vídeos! @leobalter
  47. 47. <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
  48. 48. Bocoup!http://popcornjs.org @leobalter
  49. 49. @leobalter
  50. 50. Canvas & WebGL a última pá de cal no flash! @leobalter
  51. 51. http://pepetz.com
  52. 52. http://goo.gl/jWUfu
  53. 53. Quero jogar! @leobalter
  54. 54. http://helloracer.com/webgl/
  55. 55. chrome.angrybirds.com
  56. 56. Já é muito fácil criar animações em HTML 5, por exemplo: Hype Hype
  57. 57. Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3
  58. 58. Obrigado!leo@balter.com.br @leobalter

×