Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Realize mais com HTML 5 e CSS 3 - EDTED / RS

1,713 views

Published on

Published in: Technology, Design

Realize mais com HTML 5 e CSS 3 - EDTED / RS

  1. 1. HTML 5 & CSS 3 16 EDTED - POA Leo Balter
  2. 2. QUEM É @LEOBALTER?• Pós Graduação de Engenharia de Software• Frontend na Intervir• Desconferência
  3. 3. • Precisamos sentir a internet
  4. 4. •A internet deve interagir com a gente
  5. 5. @LEOBALTER
  6. 6. Uma web para todos, onde a comunidadepode participar abertamente e todospodem empreender em igualdade. Semlimitações de sistemas proprietários...
  7. 7. O HTML 5 é agora e não depois, não perca tempo!
  8. 8. <!DOCTYPE html
  9. 9. <!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
  10. 10. <!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
  11. 11. <!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
  12. 12. <header><nav><section> <aside> <article> <article><footer> @leobalter
  13. 13. novos elementos não sãorenderizados como blocos! OMG! @leobalter
  14. 14. <!--[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
  15. 15. <!--[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
  16. 16. <!--[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
  17. 17. <!--[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
  18. 18. Encurtando o caminho...
  19. 19. http://www.modernizr.com/
  20. 20. http://html5boilerplate.com/ @leobalter
  21. 21. <!--[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
  22. 22. <!--[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
  23. 23. <!--[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
  24. 24. <!--[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
  25. 25. <!--[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
  26. 26. <!--[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
  27. 27. O melhor hack é não precisar de hacks @leobalter
  28. 28. #elemento { padding-right: 0; _padding-right: 10px; }O melhor hack é não precisar de hacks @leobalter
  29. 29. #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
  30. 30. ProgressiveEnhancement & Polyfills!
  31. 31. http://goo.gl/KjSdM
  32. 32. http://goo.gl/KjSdM
  33. 33. CSS 3
  34. 34. http://goo.gl/0z6WQ
  35. 35. http://goo.gl/WWYtR
  36. 36. http://css3pie.com/ @leobalter
  37. 37. Media Queries Com o media queries seu site vaiimpressionar diversas mídias como um camaleão
  38. 38. http://goo.gl/DWOJj @leobalter
  39. 39. /* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }} @leobalter
  40. 40. /* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }} @leobalter
  41. 41. /* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }} @leobalter
  42. 42. /* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }} @leobalter
  43. 43. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  44. 44. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  45. 45. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  46. 46. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  47. 47. @media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }} @leobalter
  48. 48. http://mediaqueri.es/
  49. 49. @font-facenão é mais um truque, é uma realidade!
  50. 50. @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;} @leobalter
  51. 51. é muito fácil utilizar @font-face mastemos ferramentas que tornam isso ainda mais simples @leobalter
  52. 52. http://fontsquirrel.com @leobalter
  53. 53. http://goo.gl/atq0A @leobalter
  54. 54. <link href=http://fonts.googleapis.com/css?family=Zeyada rel=stylesheet type=text/css><style>body { font-family: ‘Zeyada’, serif;}</style>
  55. 55. Podemos carregar várias fontes juntas pelo Google Web Fonts:http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
  56. 56. 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á
  57. 57. Drag & Drop File Api
  58. 58. http://min.us @leobalter
  59. 59. Geolocationa gente já sabe onde você está, e você?
  60. 60. http://maps.google.com @leobalter
  61. 61. http://maps.google.com @leobalter
  62. 62. Google Maps API Family http://goo.gl/sTm1a @leobalter
  63. 63. Vídeos!
  64. 64. <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
  65. 65. <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
  66. 66. <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
  67. 67. <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
  68. 68. <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
  69. 69. <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
  70. 70. <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
  71. 71. Bocoup!http://popcornjs.org
  72. 72. @LEOBALTER
  73. 73. SVGpodemos ir muito além de uma marcação tradicional
  74. 74. Canvas & WebGL a última pá de cal no flash!
  75. 75. http://pepetz.com
  76. 76. Querojogar!
  77. 77. http://helloracer.com/webgl/
  78. 78. chrome.angrybirds.com
  79. 79. Já passamos há muito tempoda web 2.0, estamos na web 8 com HTML 5 e CSS 3
  80. 80. Obrigado! http://goo.gl/QJpOfleo@balter.com.br @leobalter

×