SlideShare uma empresa Scribd logo

CSS3 e HTML5 com Leo Balter

•
•
Leonardo Balter
Leonardo Balter

Uma homenagem ao amigo Maujor, seu livro de HTML5 e muita coisa bacana nessa edição do EDTED de Belo Horizonte/MG!

TecnologiaDesign
1 de 91
Baixar para ler offline
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
#leotroll @leobalter sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
O HTML 5 é agora e não depois, não perca tempo! @leobalter sábado, 16 de julho de 2011
<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" 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
<!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
<!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
<!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <title>yay!</title> ... @leobalter sábado, 16 de julho de 2011
<header> <nav> <section> <aside> <article> <article> <footer> @leobalter sábado, 16 de julho de 2011
novos elementos não são renderizados como blocos! OMG! @leobalter sábado, 16 de julho de 2011
<!--[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
<!--[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
<!--[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
<!--[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
Encurtando o caminho... @leobalter sábado, 16 de julho de 2011
http://www.modernizr.com/ sábado, 16 de julho de 2011
http://html5boilerplate.com/ @leobalter sábado, 16 de julho de 2011
<!--[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
<!--[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
<!--[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
<!--[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
<!--[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
<!--[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
O melhor hack é não precisar de hacks @leobalter sábado, 16 de julho de 2011
#elemento { padding-right: 0; _padding-right: 10px; } O melhor hack é não precisar de hacks @leobalter sábado, 16 de julho de 2011
#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
Progressive Enhancement & Polyfills! @leobalter sábado, 16 de julho de 2011
http://goo.gl/KjSdM sábado, 16 de julho de 2011
http://goo.gl/KjSdM sábado, 16 de julho de 2011
CSS 3 sábado, 16 de julho de 2011
Seletores CSS3 tudo tem que ser encontrado @leobalter sábado, 16 de julho de 2011
Selectors test: http://goo.gl/IM0tc sábado, 16 de julho de 2011
http://goo.gl/WWYtR sábado, 16 de julho de 2011
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
http://goo.gl/E5OxD sábado, 16 de julho de 2011
http://css3pie.com/ @leobalter sábado, 16 de julho de 2011
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
http://goo.gl/DWOJj @leobalter sábado, 16 de julho de 2011
/* 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
/* 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
/* 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
/* 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
@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
@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
@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
@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
@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
http://mediaqueri.es/ sábado, 16 de julho de 2011
@font-face não é mais um truque, é uma realidade! @leobalter sábado, 16 de julho de 2011
@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
é muito fácil utilizar @font-face mas temos ferramentas que tornam isso ainda mais simples @leobalter sábado, 16 de julho de 2011
http://fontsquirrel.com @leobalter sábado, 16 de julho de 2011
http://goo.gl/atq0A @leobalter 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
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
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
Drag & Drop File Api @leobalter sábado, 16 de julho de 2011
http://min.us @leobalter sábado, 16 de julho de 2011
Geolocation a gente já sabe onde você está, e você? @leobalter sábado, 16 de julho de 2011
http://maps.google.com @leobalter sábado, 16 de julho de 2011
http://maps.google.com @leobalter sábado, 16 de julho de 2011
Google Maps API Family http://goo.gl/sTm1a @leobalter sábado, 16 de julho de 2011
Vídeos! @leobalter sábado, 16 de julho de 2011
<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
<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
<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
<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
<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
<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
<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
Bocoup! http://popcornjs.org @leobalter sábado, 16 de julho de 2011
sábado, 16 de julho de 2011
SVG podemos 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
Canvas & WebGL a última pá de cal no flash! @leobalter sábado, 16 de julho de 2011
http://pepetz.com sábado, 16 de julho de 2011
Quero jogar! @leobalter sábado, 16 de julho de 2011
http://helloracer.com/webgl/ sábado, 16 de julho de 2011
chrome.angrybirds.com sábado, 16 de julho de 2011
Já é muito fácil criar animações em HTML 5, por exemplo: Hype 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
Obrigado! leo@balter.com.br @leobalter sábado, 16 de julho de 2011

Recomendados

Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSRealize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSLeonardo Balter
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFLeonardo Balter
 
Storyboard Technique de commercialisation
Storyboard Technique de commercialisationStoryboard Technique de commercialisation
Storyboard Technique de commercialisationservice_info
 
Gramatica de frances
Gramatica de francesGramatica de frances
Gramatica de francesAna Ribeiro
 
Neculai Monica-Viviana.Magnifier
Neculai Monica-Viviana.MagnifierNeculai Monica-Viviana.Magnifier
Neculai Monica-Viviana.Magnifierviviana
 
Neculai Monica-Viviana.Ubuntu
Neculai Monica-Viviana.UbuntuNeculai Monica-Viviana.Ubuntu
Neculai Monica-Viviana.Ubuntuviviana
 
Spring cm bd institute webinar 0511 final
Spring cm bd institute webinar 0511 finalSpring cm bd institute webinar 0511 final
Spring cm bd institute webinar 0511 finalguest6af661c4
 
Insustentavel js
Insustentavel jsInsustentavel js
Insustentavel jsLeonardo Balter
 

Recomendados

Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSRealize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSLeonardo Balter
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFLeonardo Balter
 
Storyboard Technique de commercialisation
Storyboard Technique de commercialisationStoryboard Technique de commercialisation
Storyboard Technique de commercialisationservice_info
 
Gramatica de frances
Gramatica de francesGramatica de frances
Gramatica de francesAna Ribeiro
 
Neculai Monica-Viviana.Magnifier
Neculai Monica-Viviana.MagnifierNeculai Monica-Viviana.Magnifier
Neculai Monica-Viviana.Magnifierviviana
 
Neculai Monica-Viviana.Ubuntu
Neculai Monica-Viviana.UbuntuNeculai Monica-Viviana.Ubuntu
Neculai Monica-Viviana.Ubuntuviviana
 
Spring cm bd institute webinar 0511 final
Spring cm bd institute webinar 0511 finalSpring cm bd institute webinar 0511 final
Spring cm bd institute webinar 0511 finalguest6af661c4
 
Insustentavel js
Insustentavel jsInsustentavel js
Insustentavel jsLeonardo Balter
 
Unit testing
Unit testingUnit testing
Unit testingLeonardo Balter
 
GruntJS + Wordpress
GruntJS + WordpressGruntJS + Wordpress
GruntJS + WordpressLeonardo Balter
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceLeonardo Balter
 
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Leonardo Balter
 
Testing sucks
Testing sucksTesting sucks
Testing sucksLeonardo Balter
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter
 
Extreme Web Performance
Extreme Web PerformanceExtreme Web Performance
Extreme Web PerformanceLeonardo Balter
 
temp EWP
temp EWPtemp EWP
temp EWPLeonardo Balter
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndLeonardo Balter
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011Leonardo Balter
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011Leonardo Balter
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 

Mais conteúdo relacionado

Mais de Leonardo Balter

Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceLeonardo Balter
 
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Leonardo Balter
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndLeonardo Balter
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011Leonardo Balter
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011Leonardo Balter
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 

Mais de Leonardo Balter (12)

Unit testing
Unit testingUnit testing
Unit testing
 
GruntJS + Wordpress
GruntJS + WordpressGruntJS + Wordpress
GruntJS + Wordpress
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
 
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
 
Testing sucks
Testing sucksTesting sucks
Testing sucks
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
Extreme Web Performance
Extreme Web PerformanceExtreme Web Performance
Extreme Web Performance
 
temp EWP
temp EWPtemp EWP
temp EWP
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front End
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 

CSS3 e HTML5 com Leo Balter

  • 1. Leo Balter @leobalter sábado, 16 de julho de 2011
  • 2. 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
  • 4. sábado, 16 de julho de 2011
  • 5. sábado, 16 de julho de 2011
  • 6. #leotroll @leobalter sábado, 16 de julho de 2011
  • 7. 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
  • 9. <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" sábado, 16 de julho de 2011
  • 10. sábado, 16 de julho de 2011
  • 11. sábado, 16 de julho de 2011
  • 12. 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
  • 22. Encurtando o caminho... @leobalter sábado, 16 de julho de 2011
  • 24. http://html5boilerplate.com/ @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
  • 37. CSS 3 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
  • 43. http://css3pie.com/ @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
  • 45. http://goo.gl/DWOJj @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
  • 59. http://fontsquirrel.com @leobalter sábado, 16 de julho de 2011
  • 60. http://goo.gl/atq0A @leobalter sábado, 16 de julho de 2011
  • 61. <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
  • 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
  • 65. http://min.us @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
  • 67. http://maps.google.com @leobalter sábado, 16 de julho de 2011
  • 68. http://maps.google.com @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
  • 79. 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
  • 84. Quero jogar! @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
  • 90. Maujor é o cara! sábado, 16 de julho de 2011
  • 91. Obrigado! leo@balter.com.br @leobalter sábado, 16 de julho de 2011