Embed Size (px)
DESCRIPTION
Citation preview
HTML 5 & CSS 3
Leo Balter
16 EDTED - POA
QUEM É @LEOBALTER?
•Pós Graduação de Engenharia de Software
•Frontend na Intervir
•Desconferência
• Precisamos sentir a internet
• A internet deve interagir com a gente
@LEOBALTER
Uma web para todos, onde a comunidade pode participar abertamente e todos podem empreender em igualdade. Sem limitações de sistemas proprietários...
O HTML 5 é agora e não depois, não perca tempo!
<!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
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>
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
Polyfills!
Progressive Enhancement
&
CSS 3
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;" }}
@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;}
@leobalter
é muito fácil utilizar @font-face mas temos ferramentas que tornam isso
ainda mais simples
<link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>
<style>body {
font-family: ‘Zeyada’, serif;}</style>
http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
Podemos carregar várias fontes juntas pelo Google Web Fonts:
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!
Drag & Drop
File Api
Geolocationa gente já sabe onde você está, e você?
@leobalter
http://goo.gl/sTm1a
Google Maps API Family
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
SVGpodemos ir muito além de uma marcação
tradicional
Canvas & WebGLa última pá de cal no flash!
Quero jogar!
chrome.angrybirds.com
Já passamos há muito tempo da web 2.0, estamos na web 8
com HTML 5 e CSS 3
@leobalter
Obrigado!
http://goo.gl/QJpOf
![[EDTED] 3D para Internet](https://img.document.onl/doc/110x75/559e86fb1a28ab900b8b4858/edted-3d-para-internet.jpg)
