realize mais com html 5 e css 3 - 16 edted - rj
DESCRIPTION
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011. Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.TRANSCRIPT
Leo Balter@leobalter
@leobalter
@leobalter
@leobalter
@leobalter#fuitroladopeloleobalter
@leobalter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@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
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
@leobalter
Header
Nav
Section Aside
Footer
Article
Article
@leobalter
Problemas no caminho!
@leobalter
novos elementos não são renderizados como blocos!
OMG!
@leobalter
<!--[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
<!--[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
<!--[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
<!--[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
Encurtando o caminho...
@leobalter
<!--[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
<!--[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
<!--[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
<!--[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
<!--[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
<!--[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
O melhor hack é não precisar de hacks
@leobalter
#elemento {padding-right: 0;_padding-right: 10px;
}
O melhor hack é não precisar de hacks
@leobalter
#elemento {padding-right: 0;_padding-right: 10px;
}
<!--[if lt IE 7 ]> <link href=”ie6.css” /><![endif]-->
O melhor hack é não precisar de hacks
@leobalter
Polyfills!
Progressive Enhancement
&
@leobalter
Seletores CSS3tudo tem que ser encontrado
Selectors test: http://goo.gl/IM0tc
@leobalter
Propriedades CSS3
http://www.css3.info/preview/Leia também: http://goo.gl/9Ijci
sua página não precisa ser tão quadrada
@leobalter
Media QueriesCom o media queries seu site vai impressionar
diversas mídias como um camaleão
@leobalter
http://goo.gl/DWOJj
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@leobalter
@font-facenão é mais um truque, é uma realidade!
@leobalter
@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
“à prova de balas”
@leobalter
Drag & Drop
File Api
@leobalter
Geolocationa gente já sabe onde você está, e você?
@leobalter
http://code.google.com/apis/maps/index.html
@leobalter
Vídeos!
@leobalter
<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
<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
<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
<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
<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
<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
<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
WebGLa última pá de cal no flash!
@leobalter
E os jogos?
chrome.angrybirds.com
