Embed Size (px)
DESCRIPTION
Uma homenagem ao amigo Maujor, seu livro de HTML5 e muita coisa bacana nessa edição do EDTED de Belo Horizonte/MG!
Citation preview
Leo Balter@leobalter
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
Desconferência
#horaextra
jQuery Br
Small Acts Manifesto
Dojo Rio
FrontInRio
Frontend Br
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
@leobalter#leotrollsábado, 16 de julho de 2011
sábado, 16 de julho de 2011
@leobalter
O HTML 5 é agora e não depois, não perca tempo!
sábado, 16 de julho de 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
@leobalter
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
sábado, 16 de julho de 2011
@leobalter
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
sábado, 16 de julho de 2011
@leobalter
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
sábado, 16 de julho de 2011
@leobalter
<header>
<nav>
<section> <aside>
<footer>
<article>
<article>
sábado, 16 de julho de 2011
@leobalter
novos elementos não são renderizados como blocos!
OMG!
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@leobalter
Encurtando o caminho...
sábado, 16 de julho de 2011
http://www.modernizr.com/
sábado, 16 de julho de 2011
@leobalter
http://html5boilerplate.com/
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@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; }
sábado, 16 de julho de 2011
@leobalter
O melhor hack é não precisar de hacks
sábado, 16 de julho de 2011
@leobalter
#elemento {padding-right: 0;_padding-right: 10px;
}
O melhor hack é não precisar de hacks
sábado, 16 de julho de 2011
@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
sábado, 16 de julho de 2011
@leobalter
Polyfills!
Progressive Enhancement
&
sábado, 16 de julho de 2011
CSS 3
sábado, 16 de julho de 2011
@leobalter
Seletores CSS3tudo tem que ser encontrado
sábado, 16 de julho de 2011
Selectors test: http://goo.gl/IM0tc
sábado, 16 de julho de 2011
@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
sábado, 16 de julho de 2011
@leobalter
Media QueriesCom o media queries seu site vai impressionar
diversas mídias como um camaleão
sábado, 16 de julho de 2011
@leobalter
http://goo.gl/DWOJj
sábado, 16 de julho de 2011
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
sábado, 16 de julho de 2011
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
sábado, 16 de julho de 2011
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
sábado, 16 de julho de 2011
@leobalter
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
sábado, 16 de julho de 2011
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
sábado, 16 de julho de 2011
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
sábado, 16 de julho de 2011
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
sábado, 16 de julho de 2011
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
sábado, 16 de julho de 2011
@leobalter
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
sábado, 16 de julho de 2011
@leobalter
@font-facenão é mais um truque, é uma realidade!
sábado, 16 de julho de 2011
@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
sábado, 16 de julho de 2011
@leobalter
é muito fácil utilizar @font-face mas temos ferramentas que tornam isso
ainda mais simples
sábado, 16 de julho de 2011
@leobalter
http://fontsquirrel.com
sábado, 16 de julho de 2011
<link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>
<style>body {
font-family: ‘Zeyada’, serif;}</style>
sábado, 16 de julho de 2011
http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
Podemos carregar várias fontes juntas pelo Google Web Fonts:
sábado, 16 de julho de 2011
http://fonts.googleapis.com/css?family=Droid+Sans&text=Olá
Também podemos carregar só o texto a ser utilizado para otimizar a nossa performance!
sábado, 16 de julho de 2011
@leobalter
Drag & Drop
File Api
sábado, 16 de julho de 2011
@leobalter
Geolocationa gente já sabe onde você está, e você?
sábado, 16 de julho de 2011
@leobalter
http://maps.google.com
sábado, 16 de julho de 2011
@leobalter
http://maps.google.com
sábado, 16 de julho de 2011
@leobalter
http://goo.gl/sTm1a
Google Maps API Family
sábado, 16 de julho de 2011
@leobalter
Vídeos!
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@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>
sábado, 16 de julho de 2011
@leobalter
http://popcornjs.org
Bocoup!
sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
SVGpodemos ir muito além de uma marcação
tradicional
sábado, 16 de julho de 2011
http://www.progettystudio.com
sábado, 16 de julho de 2011
@leobalter
Canvas & WebGLa última pá de cal no flash!
sábado, 16 de julho de 2011
@leobalter
Quero jogar!
sábado, 16 de julho de 2011
http://helloracer.com/webgl/
sábado, 16 de julho de 2011
chrome.angrybirds.comsábado, 16 de julho de 2011
Hype
Já é muito fácil criar animações em HTML 5, por exemplo: Hype
sábado, 16 de julho de 2011
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
http://livrohtml5.com.br
sábado, 16 de julho de 2011
Maujor é o cara!
sábado, 16 de julho de 2011
