Baixado 16 vezes
![<!--[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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-21-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-22-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-23-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-24-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-30-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-31-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-32-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-33-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](https://image.slidesharecdn.com/html5css3-111015020017-phpapp02/85/Realize-mais-com-HTML-5-e-CSS-3-EDTED-RS-36-320.jpg)
Carregado porLeonardo Balter
Realize mais com HTML 5 e CSS 3 - EDTED / RS
O documento resume uma palestra sobre HTML5 e CSS3. O palestrante discute novos elementos semânticos no HTML5 como <header>, <nav>, <section>, <article>, e <footer>. Ele também fala sobre compatibilidade com navegadores antigos, uso de polyfills e progressive enhancement. Finalmente, o palestrante apresenta recursos como geolocalização, arquivos drag-and-drop, mídia queries e @font-face.
Mais conteúdo relacionado
Semelhante a Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
- 1. HTML 5 &CSS 3 16 EDTED - POA Leo Balter
- 2. QUEM É @LEOBALTER? •Pós Graduação de Engenharia de Software • Frontend na Intervir • Desconferência
- 6. • Precisamos sentir a internet
- 8. •A internet deve interagir com a gente
- 10.
- 12. Uma web paratodos, onde a comunidade pode participar abertamente e todos podem empreender em igualdade. Sem limitações de sistemas proprietários...
- 13. O HTML 5é agora e não depois, não perca tempo!
- 14.
- 16. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter
- 17. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter
- 18. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter
- 19. <header> <nav> <section> <aside> <article> <article> <footer> @leobalter
- 20. novos elementos nãosão renderizados como blocos! OMG! @leobalter
- 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
- 22. <!--[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
- 23. <!--[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
- 24. <!--[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
- 25. Encurtando o caminho...
- 26.
- 27. http://html5boilerplate.com/ @leobalter
- 28. <!--[if lt IE7 ]> <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
- 29. <!--[if lt IE7 ]> <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
- 30. <!--[if lt IE7 ]> <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
- 31. <!--[if lt IE7 ]> <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
- 32. <!--[if lt IE7 ]> <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
- 33. <!--[if lt IE7 ]> <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
- 34. O melhor hacké não precisar de hacks @leobalter
- 35. #elemento { padding-right: 0; _padding-right: 10px; } O melhor hack é não precisar de hacks @leobalter
- 36. #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
- 37. Progressive Enhancement & Polyfills!
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. http://css3pie.com/ @leobalter
- 44. Media Queries Como media queries seu site vai impressionar diversas mídias como um camaleão
- 45. http://goo.gl/DWOJj @leobalter
- 46. /* Portrait */ @mediascreen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter
- 47. /* Portrait */ @mediascreen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter
- 48. /* Portrait */ @mediascreen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter
- 49. /* Portrait */ @mediascreen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter
- 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
- 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
- 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
- 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
- 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
- 55.
- 56. @font-face não é maisum truque, é uma realidade!
- 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; } @leobalter
- 58. é muito fácilutilizar @font-face mas temos ferramentas que tornam isso ainda mais simples @leobalter
- 59. http://fontsquirrel.com @leobalter
- 60. http://goo.gl/atq0A @leobalter
- 61. <link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet'type='text/css'> <style> body { font-family: ‘Zeyada’, serif; } </style>
- 62. Podemos carregar váriasfontes juntas pelo Google Web Fonts: http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
- 63. Também podemos carregarsó o texto a ser utilizado para otimizar a nossa performance! http://fonts.googleapis.com/css?family=Droid+Sans&text=Olá
- 64. Drag & Drop File Api
- 65. http://min.us @leobalter
- 66. Geolocation a gente jásabe onde você está, e você?
- 67. http://maps.google.com @leobalter
- 68. http://maps.google.com @leobalter
- 69. Google Maps APIFamily http://goo.gl/sTm1a @leobalter
- 70.
- 71. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 72. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 73. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 74. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 75. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 76. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 77. <video preload controlsautoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p> </video> @leobalter
- 78.
- 79.
- 81. SVG podemos ir muitoalém de uma marcação tradicional
- 83. Canvas & WebGL a última pá de cal no flash!
- 84.
- 85.
- 86.
- 87.
- 88. Já passamos hámuito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3
- 89. Obrigado! http://goo.gl/QJpOf leo@balter.com.br @leobalter