HTML 5 & CSS 3  16 EDTED - POA   Leo Balter
QUEM É @LEOBALTER?• Pós   Graduação de Engenharia de Software• Frontend   na Intervir• Desconferência
• Precisamos   sentir a internet
•A   internet deve interagir com a gente
@LEOBALTER
Uma web para todos, onde a comunidadepode participar abertamente e todospodem empreender em igualdade. Semlimitações de si...
O HTML 5 é agora e não depois, não perca tempo!
<!DOCTYPE html
<!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>...                          @leobalter
<!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>...                          @leobalter
<!doctype html><html lang=”pt-br”><head> <meta charset=”utf-8”> <title>yay!</title>...                          @leobalter
<header><nav><section>     <aside>  <article>  <article><footer>                        @leobalter
novos elementos não sãorenderizados como blocos!          OMG!                            @leobalter
<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, asid...
<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, asid...
<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, asid...
<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, asid...
Encurtando o  caminho...
http://www.modernizr.com/
http://html5boilerplate.com/               @leobalter
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <!...
O melhor hack é não precisar de hacks                                @leobalter
#elemento {           padding-right: 0;           _padding-right: 10px;         }O melhor hack é não precisar de hacks    ...
#elemento {            padding-right: 0;            _padding-right: 10px;          }O melhor hack é não precisar de hacks ...
ProgressiveEnhancement       &      Polyfills!
http://goo.gl/KjSdM
http://goo.gl/KjSdM
CSS 3
http://goo.gl/0z6WQ
http://goo.gl/WWYtR
http://css3pie.com/        @leobalter
Media Queries Com o media queries seu site vaiimpressionar diversas mídias como          um camaleão
http://goo.gl/DWOJj       @leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientati...
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientati...
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientati...
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}/* Landscape */@media screen and (orientati...
@media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size:...
@media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size:...
@media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size:...
@media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size:...
@media screen and (max-device-width: 480px) {" html, body {" " -moz-background-size: 80% auto;" " -webkit-background-size:...
http://mediaqueri.es/
@font-facenão é mais um truque, é uma realidade!
@font-face {  font-family: ActionManRegular;  src: url(Action_Man-webfont.eot);  src: url(Action_Man-webfont.eot?#iefix) f...
é muito fácil utilizar @font-face mastemos ferramentas que tornam isso         ainda mais simples                         ...
http://fontsquirrel.com            @leobalter
http://goo.gl/atq0A                      @leobalter
<link href=http://fonts.googleapis.com/css?family=Zeyada rel=stylesheet type=text/css><style>body {   font-family: ‘Zeyada...
Podemos carregar várias fontes juntas pelo Google Web Fonts:http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
Também podemos carregar só o texto a ser utilizado para               otimizar a nossa performance!http://fonts.googleapis...
Drag & Drop  File Api
http://min.us                @leobalter
Geolocationa gente já sabe onde você está, e você?
http://maps.google.com                         @leobalter
http://maps.google.com                         @leobalter
Google Maps API Family http://goo.gl/sTm1a                         @leobalter
Vídeos!
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
<video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> ...
Bocoup!http://popcornjs.org
@LEOBALTER
SVGpodemos ir muito além de uma marcação               tradicional
Canvas & WebGL a última pá de cal no flash!
http://pepetz.com
Querojogar!
http://helloracer.com/webgl/
chrome.angrybirds.com
Já passamos há muito tempoda web 2.0, estamos na web 8     com HTML 5 e CSS 3
Obrigado!            http://goo.gl/QJpOfleo@balter.com.br                 @leobalter
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Upcoming SlideShare
Loading in...5
×

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

1,457
-1

Published on

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

No Downloads
Views
Total Views
1,457
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×