EDTED BH - HTML 5 e CSS 3 - Julho de 2011

1,651 views
1,539 views

Published on

Uma homenagem ao amigo Maujor, seu livro de HTML5 e muita coisa bacana nessa edição do EDTED de Belo Horizonte/MG!

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

No Downloads
Views
Total views
1,651
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

EDTED BH - HTML 5 e CSS 3 - Julho de 2011

  1. 1. Leo Balter @leobaltersábado, 16 de julho de 2011
  2. 2. sábado, 16 de julho de 2011
  3. 3. Desconferência #horaextra jQuery Br Small Acts Manifesto Dojo Rio FrontInRio Frontend Brsábado, 16 de julho de 2011
  4. 4. sábado, 16 de julho de 2011
  5. 5. sábado, 16 de julho de 2011
  6. 6. #leotroll @leobaltersábado, 16 de julho de 2011
  7. 7. sábado, 16 de julho de 2011
  8. 8. O HTML 5 é agora e não depois, não perca tempo! @leobaltersábado, 16 de julho de 2011
  9. 9. <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN"sábado, 16 de julho de 2011
  10. 10. sábado, 16 de julho de 2011
  11. 11. sábado, 16 de julho de 2011
  12. 12. sábado, 16 de julho de 2011
  13. 13. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobaltersábado, 16 de julho de 2011
  14. 14. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobaltersábado, 16 de julho de 2011
  15. 15. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobaltersábado, 16 de julho de 2011
  16. 16. <header> <nav> <section> <aside> <article> <article> <footer> @leobaltersábado, 16 de julho de 2011
  17. 17. novos elementos não são renderizados como blocos! OMG! @leobaltersábado, 16 de julho de 2011
  18. 18. <!--[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> @leobaltersábado, 16 de julho de 2011
  19. 19. <!--[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> @leobaltersábado, 16 de julho de 2011
  20. 20. <!--[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> @leobaltersábado, 16 de julho de 2011
  21. 21. <!--[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> @leobaltersábado, 16 de julho de 2011
  22. 22. Encurtando o caminho... @leobaltersábado, 16 de julho de 2011
  23. 23. http://www.modernizr.com/sábado, 16 de julho de 2011
  24. 24. http://html5boilerplate.com/ @leobaltersábado, 16 de julho de 2011
  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; } @leobaltersábado, 16 de julho de 2011
  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; } @leobaltersábado, 16 de julho de 2011
  27. 27. <!--[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; } @leobaltersábado, 16 de julho de 2011
  28. 28. <!--[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; } @leobaltersábado, 16 de julho de 2011
  29. 29. <!--[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; } @leobaltersábado, 16 de julho de 2011
  30. 30. <!--[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; } @leobaltersábado, 16 de julho de 2011
  31. 31. O melhor hack é não precisar de hacks @leobaltersábado, 16 de julho de 2011
  32. 32. #elemento { padding-right: 0; _padding-right: 10px; } O melhor hack é não precisar de hacks @leobaltersábado, 16 de julho de 2011
  33. 33. #elemento { padding-right: 0; _padding-right: 10px; } O melhor hack é não precisar de hacks <!--[if lt IE 7 ]> <link href=”ie6.css” /> <![endif]--> @leobaltersábado, 16 de julho de 2011
  34. 34. Progressive Enhancement & Polyfills! @leobaltersábado, 16 de julho de 2011
  35. 35. http://goo.gl/KjSdMsábado, 16 de julho de 2011
  36. 36. http://goo.gl/KjSdMsábado, 16 de julho de 2011
  37. 37. CSS 3sábado, 16 de julho de 2011
  38. 38. Seletores CSS3 tudo tem que ser encontrado @leobaltersábado, 16 de julho de 2011
  39. 39. Selectors test: http://goo.gl/IM0tcsábado, 16 de julho de 2011
  40. 40. http://goo.gl/WWYtRsábado, 16 de julho de 2011
  41. 41. Propriedades CSS3 sua página não precisa ser tão quadrada Leia também: http://goo.gl/9Ijci http://www.css3.info/preview/ @leobaltersábado, 16 de julho de 2011
  42. 42. http://goo.gl/E5OxDsábado, 16 de julho de 2011
  43. 43. http://css3pie.com/ @leobaltersábado, 16 de julho de 2011
  44. 44. Media Queries Com o media queries seu site vai impressionar diversas mídias como um camaleão @leobaltersábado, 16 de julho de 2011
  45. 45. http://goo.gl/DWOJj @leobaltersábado, 16 de julho de 2011
  46. 46. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobaltersábado, 16 de julho de 2011
  47. 47. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobaltersábado, 16 de julho de 2011
  48. 48. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobaltersábado, 16 de julho de 2011
  49. 49. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobaltersábado, 16 de julho de 2011
  50. 50. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobaltersábado, 16 de julho de 2011
  51. 51. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobaltersábado, 16 de julho de 2011
  52. 52. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobaltersábado, 16 de julho de 2011
  53. 53. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobaltersábado, 16 de julho de 2011
  54. 54. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobaltersábado, 16 de julho de 2011
  55. 55. http://mediaqueri.es/sábado, 16 de julho de 2011
  56. 56. @font-face não é mais um truque, é uma realidade! @leobaltersábado, 16 de julho de 2011
  57. 57. @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 @leobaltersábado, 16 de julho de 2011
  58. 58. é muito fácil utilizar @font-face mas temos ferramentas que tornam isso ainda mais simples @leobaltersábado, 16 de julho de 2011
  59. 59. http://fontsquirrel.com @leobaltersábado, 16 de julho de 2011
  60. 60. http://goo.gl/atq0A @leobaltersábado, 16 de julho de 2011
  61. 61. <link href=http://fonts.googleapis.com/css?family=Zeyada rel=stylesheet type=text/css> <style> body { font-family: ‘Zeyada’, serif; } </style>sábado, 16 de julho de 2011
  62. 62. Podemos carregar várias fontes juntas pelo Google Web Fonts: http://fonts.googleapis.com/css?family=Zeyada|Droid+Sanssábado, 16 de julho de 2011
  63. 63. 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ásábado, 16 de julho de 2011
  64. 64. Drag & Drop File Api @leobaltersábado, 16 de julho de 2011
  65. 65. http://min.us @leobaltersábado, 16 de julho de 2011
  66. 66. Geolocation a gente já sabe onde você está, e você? @leobaltersábado, 16 de julho de 2011
  67. 67. http://maps.google.com @leobaltersábado, 16 de julho de 2011
  68. 68. http://maps.google.com @leobaltersábado, 16 de julho de 2011
  69. 69. Google Maps API Family http://goo.gl/sTm1a @leobaltersábado, 16 de julho de 2011
  70. 70. Vídeos! @leobaltersábado, 16 de julho de 2011
  71. 71. <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> @leobaltersábado, 16 de julho de 2011
  72. 72. <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> @leobaltersábado, 16 de julho de 2011
  73. 73. <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> @leobaltersábado, 16 de julho de 2011
  74. 74. <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> @leobaltersábado, 16 de julho de 2011
  75. 75. <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> @leobaltersábado, 16 de julho de 2011
  76. 76. <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> @leobaltersábado, 16 de julho de 2011
  77. 77. <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> @leobaltersábado, 16 de julho de 2011
  78. 78. Bocoup! http://popcornjs.org @leobaltersábado, 16 de julho de 2011
  79. 79. sábado, 16 de julho de 2011
  80. 80. SVG podemos ir muito além de uma marcação tradicionalsábado, 16 de julho de 2011
  81. 81. http://www.progettystudio.comsábado, 16 de julho de 2011
  82. 82. Canvas & WebGL a última pá de cal no flash! @leobaltersábado, 16 de julho de 2011
  83. 83. http://pepetz.comsábado, 16 de julho de 2011
  84. 84. Quero jogar! @leobaltersábado, 16 de julho de 2011
  85. 85. http://helloracer.com/webgl/sábado, 16 de julho de 2011
  86. 86. chrome.angrybirds.comsábado, 16 de julho de 2011
  87. 87. Já é muito fácil criar animações em HTML 5, por exemplo: Hype Hypesábado, 16 de julho de 2011
  88. 88. Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3sábado, 16 de julho de 2011
  89. 89. http://livrohtml5.com.brsábado, 16 de julho de 2011
  90. 90. Maujor é o cara!sábado, 16 de julho de 2011
  91. 91. Obrigado! leo@balter.com.br @leobaltersábado, 16 de julho de 2011

×