EDTED SP - HTML 5 e CSS 3 - Junho de 2011
7 gostaram662 visualizações
O documento discute as novas tecnologias da web como HTML5 e CSS3. Apresenta novos elementos semânticos no HTML5 como header, nav, section e article. Também discute recursos como geolocalização, vídeos, canvas, WebGL e APIs para incorporar mapas e fontes. Aponta ferramentas para facilitar a utilização dessas tecnologias como Modernizr, HTML5 Boilerplate e media queries.
![<!--[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-110611121454-phpapp02/85/EDTED-SP-HTML-5-e-CSS-3-Junho-de-2011-16-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-110611121454-phpapp02/85/EDTED-SP-HTML-5-e-CSS-3-Junho-de-2011-20-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-110611121454-phpapp02/85/EDTED-SP-HTML-5-e-CSS-3-Junho-de-2011-21-320.jpg)
Anúncio
Mais conteúdo relacionado
Destaque (13)
Semelhante a EDTED SP - HTML 5 e CSS 3 - Junho de 2011 (20)
Anúncio
Mais de Leonardo Balter (14)
Anúncio
Último (15)
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
- 1. Leo Balter @leobalter
- 4. sim, esse slide vai estar online com todos os links!
- 6. @leobalter
- 7. @leobalter
- 8. @leobalter
- 9. #leotroll @leobalter
- 11. O HTML 5 é agora e não depois, não perca tempo! @leobalter
- 12. <!DOCTYPE html
- 13. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter
- 14. <header> <nav> <section> <aside> <article> <article> <footer> @leobalter
- 15. novos elementos não são renderizados como blocos! OMG! @leobalter
- 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. Encurtando o caminho... @leobalter
- 19. http://html5boilerplate.com/ @leobalter
- 20. <!--[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
- 21. #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
- 22. Progressive Enhancement & Polyfills! @leobalter
- 24. CSS 3
- 25. Seletores CSS3 tudo tem que ser encontrado @leobalter
- 28. 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
- 30. http://css3pie.com/ @leobalter
- 31. Media Queries Com o media queries seu site vai impressionar diversas mídias como um camaleão @leobalter
- 32. http://goo.gl/DWOJj @leobalter
- 33. /* Portrait */ @media screen and (orientation:portrait) { " body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) { " body { opacity: 0; } } @leobalter
- 34. @media screen and (max-device-width: 480px) { " html, body { " " -moz-background-size: 80% auto; " " -webkit-background-size: 80% auto; " " background-size: 80% auto; " } } @leobalter
- 37. @font-face não é mais um truque, é uma realidade! @leobalter
- 38. @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
- 39. é muito fácil utilizar @font-face mas temos ferramentas que tornam isso ainda mais simples @leobalter
- 40. http://fontsquirrel.com @leobalter
- 41. http://goo.gl/atq0A @leobalter
- 42. <link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'> <style> body { font-family: ‘Zeyada’, serif; } </style>
- 43. Podemos carregar várias fontes juntas pelo Google Web Fonts: http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
- 44. 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á
- 45. Drag & Drop File Api @leobalter
- 46. http://min.us @leobalter
- 47. Geolocation a gente já sabe onde você está, e você? @leobalter
- 48. http://maps.google.com @leobalter
- 49. Google Maps API Family http://goo.gl/sTm1a @leobalter
- 50. Vídeos! @leobalter
- 51. <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
- 52. Bocoup! http://popcornjs.org @leobalter
- 53. @leobalter
- 56. Canvas & WebGL a última pá de cal no flash! @leobalter
- 60. Quero jogar! @leobalter
- 64. Já é muito fácil criar animações em HTML 5, por exemplo: Hype Hype
- 65. Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3
- 66. Obrigado! [email protected] @leobalter