EDTED BH - HTML 5 e CSS 3 - Julho de 2011
1 gostou439 visualizações
Uma homenagem ao amigo Maujor, seu livro de HTML5 e muita coisa bacana nessa edição do EDTED de Belo Horizonte/MG!
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-18-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-19-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-20-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-21-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-25-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-26-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-27-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-28-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-29-320.jpg)
![<!--[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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-30-320.jpg)
![#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
sábado, 16 de julho de 2011](https://image.slidesharecdn.com/html5css3cpia-110716055502-phpapp01/85/EDTED-BH-HTML-5-e-CSS-3-Julho-de-2011-33-320.jpg)
Mais conteúdo relacionado
Mais de Leonardo Balter (12)
Último (15)
EDTED BH - HTML 5 e CSS 3 - Julho de 2011
- 1. Leo Balter @leobalter sábado, 16 de julho de 2011
- 2. sábado, 16 de julho de 2011
- 3. Desconferência #horaextra jQuery Br Small Acts Manifesto Dojo Rio FrontInRio Frontend Br sábado, 16 de julho de 2011
- 4. sábado, 16 de julho de 2011
- 5. sábado, 16 de julho de 2011
- 6. #leotroll @leobalter sábado, 16 de julho de 2011
- 7. sábado, 16 de julho de 2011
- 8. O HTML 5 é agora e não depois, não perca tempo! @leobalter sábado, 16 de julho de 2011
- 9. <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" sábado, 16 de julho de 2011
- 10. sábado, 16 de julho de 2011
- 11. sábado, 16 de julho de 2011
- 12. sábado, 16 de julho de 2011
- 13. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
- 14. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
- 15. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
- 16. <header> <nav> <section> <aside> <article> <article> <footer> @leobalter sábado, 16 de julho de 2011
- 17. novos elementos não são renderizados como blocos! OMG! @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 22. Encurtando o caminho... @leobalter sábado, 16 de julho de 2011
- 23. http://www.modernizr.com/ sábado, 16 de julho de 2011
- 24. http://html5boilerplate.com/ @leobalter sábado, 16 de julho de 2011
- 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 sábado, 16 de julho de 2011
- 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 sábado, 16 de julho de 2011
- 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; } @leobalter sábado, 16 de julho de 2011
- 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; } @leobalter sábado, 16 de julho de 2011
- 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; } @leobalter sábado, 16 de julho de 2011
- 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; } @leobalter sábado, 16 de julho de 2011
- 31. O melhor hack é não precisar de hacks @leobalter sábado, 16 de julho de 2011
- 32. #elemento { padding-right: 0; _padding-right: 10px; } O melhor hack é não precisar de hacks @leobalter sábado, 16 de julho de 2011
- 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]--> @leobalter sábado, 16 de julho de 2011
- 34. Progressive Enhancement & Polyfills! @leobalter sábado, 16 de julho de 2011
- 35. http://goo.gl/KjSdM sábado, 16 de julho de 2011
- 36. http://goo.gl/KjSdM sábado, 16 de julho de 2011
- 37. CSS 3 sábado, 16 de julho de 2011
- 38. Seletores CSS3 tudo tem que ser encontrado @leobalter sábado, 16 de julho de 2011
- 39. Selectors test: http://goo.gl/IM0tc sábado, 16 de julho de 2011
- 40. http://goo.gl/WWYtR sábado, 16 de julho de 2011
- 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/ @leobalter sábado, 16 de julho de 2011
- 42. http://goo.gl/E5OxD sábado, 16 de julho de 2011
- 43. http://css3pie.com/ @leobalter sábado, 16 de julho de 2011
- 44. Media Queries Com o media queries seu site vai impressionar diversas mídias como um camaleão @leobalter sábado, 16 de julho de 2011
- 45. http://goo.gl/DWOJj @leobalter sábado, 16 de julho de 2011
- 46. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter sábado, 16 de julho de 2011
- 47. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter sábado, 16 de julho de 2011
- 48. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter sábado, 16 de julho de 2011
- 49. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter sábado, 16 de julho de 2011
- 50. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter sábado, 16 de julho de 2011
- 51. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter sábado, 16 de julho de 2011
- 52. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter sábado, 16 de julho de 2011
- 53. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter sábado, 16 de julho de 2011
- 54. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter sábado, 16 de julho de 2011
- 55. http://mediaqueri.es/ sábado, 16 de julho de 2011
- 56. @font-face não é mais um truque, é uma realidade! @leobalter sábado, 16 de julho de 2011
- 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 @leobalter sábado, 16 de julho de 2011
- 58. é muito fácil utilizar @font-face mas temos ferramentas que tornam isso ainda mais simples @leobalter sábado, 16 de julho de 2011
- 59. http://fontsquirrel.com @leobalter sábado, 16 de julho de 2011
- 60. http://goo.gl/atq0A @leobalter sábado, 16 de julho de 2011
- 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. Podemos carregar várias fontes juntas pelo Google Web Fonts: http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans sábado, 16 de julho de 2011
- 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. Drag & Drop File Api @leobalter sábado, 16 de julho de 2011
- 65. http://min.us @leobalter sábado, 16 de julho de 2011
- 66. Geolocation a gente já sabe onde você está, e você? @leobalter sábado, 16 de julho de 2011
- 67. http://maps.google.com @leobalter sábado, 16 de julho de 2011
- 68. http://maps.google.com @leobalter sábado, 16 de julho de 2011
- 69. Google Maps API Family http://goo.gl/sTm1a @leobalter sábado, 16 de julho de 2011
- 70. Vídeos! @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 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> @leobalter sábado, 16 de julho de 2011
- 78. Bocoup! http://popcornjs.org @leobalter sábado, 16 de julho de 2011
- 79. sábado, 16 de julho de 2011
- 80. SVG podemos ir muito além de uma marcação tradicional sábado, 16 de julho de 2011
- 81. http://www.progettystudio.com sábado, 16 de julho de 2011
- 82. Canvas & WebGL a última pá de cal no flash! @leobalter sábado, 16 de julho de 2011
- 83. http://pepetz.com sábado, 16 de julho de 2011
- 84. Quero jogar! @leobalter sábado, 16 de julho de 2011
- 85. http://helloracer.com/webgl/ sábado, 16 de julho de 2011
- 86. chrome.angrybirds.com sábado, 16 de julho de 2011
- 87. Já é muito fácil criar animações em HTML 5, por exemplo: Hype Hype sábado, 16 de julho de 2011
- 88. Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3 sábado, 16 de julho de 2011
- 89. http://livrohtml5.com.br sábado, 16 de julho de 2011
- 90. Maujor é o cara! sábado, 16 de julho de 2011
- 91. Obrigado! [email protected] @leobalter sábado, 16 de julho de 2011