Contenu connexe Plus de Leonardo Balter (12) EDTED BH - HTML 5 e CSS 3 - Julho de 20111. Leo Balter
@leobalter
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
6. #leotroll @leobalter
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
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
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
38. Seletores CSS3
tudo tem que ser encontrado
@leobalter
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
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
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
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
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
66. Geolocation
a gente já sabe onde você está, e você?
@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
80. SVG
podemos ir muito além de uma marcação
tradicional
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
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
91. Obrigado!
leo@balter.com.br @leobalter
sábado, 16 de julho de 2011