HTML 5 & CSS 316 EDTED - Brasília
Leo Balter@leobalter
Engenheiro de Software FrontEnd
Engenheiro de Software FrontEnd
Intervir
Engenheiro de Software FrontEnd
Intervir
HTML 11
Empreender ===
Realizar
Confiança
Confiança
Diálogo
Confiança
Diálogo
Contato Pessoal
Confiança
Diálogo
Contato Pessoal
Transparência
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Auto Organização
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Auto Organização
Exemplo
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Auto Organização
Exemplo
Consistência
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Auto Organização
Exemplo
Consistência
Doe, doe, doe!
Confiança
Diálogo
Contato Pessoal
Transparência
Diversidade
Auto Organização
Exemplo
Consistência
Doe, doe, doe!
Faça!
HTML 5 E CSS 3Uma web para todos, onde a comunidade pode participar abertamente e todos podem empreender em igualdade.
Sem limitações de sistemas proprietários...
<!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">
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>yay!</title>
...
SEMÂNTICA,ACESSIBILIDADEE SIMPLICIDADE
@LEOB
<header>
<nav>
<section> <aside>
<footer>
<article>
<article>
MICRODATAMais sentido pro seu conteúdo!
SCHEMA.ORG
SCHEMA.ORGGoogle, Bing & Yahoo
SCHEMA.ORG
@LEOB
<header>
<nav>
<section> <aside>
<footer>
<article>
<article>
novos elementos não são renderizados como blocos! OMG!
<!--[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>
<!--[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>
<!--[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>
<!--[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>
<!--[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; }
<!--[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; }
<!--[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; }
<!--[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; }
<!--[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; }
<!--[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; }
O melhor hack é não precisar de hacks
#elemento {padding-right: 0;_padding-right: 10px;
}
O melhor hack é não precisar de hacks
#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
&
Selectors test: http://goo.gl/IM0tc
LESS CSS
LESS CSS.border-radius (@radius: 6px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}#box { .border-radius(8px);}#box2 { .border-radius();}
LESS CSS
LESS CSS
LESS CSS
#box { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}#box2 { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
Media QueriesCom o media queries seu site vai impressionar
diversas mídias como um camaleão
http://goo.gl/DWOJj
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
/* Portrait */@media screen and (orientation:portrait) {" body { opacity: 1; }}
/* Landscape */@media screen and (orientation:landscape) {" body { opacity: 0; }}
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@media screen and (max-device-width: 480px) {" html, body { " " -moz-background-size: 80% auto;" " -webkit-background-size: 80% auto;" " background-size: 80% auto;" }}
@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!
@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
é 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ê?
http://goo.gl/sTm1a
Google Maps API Family
Vídeos!
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Bocoup!
@LEOBALTER
SVGpodemos ir muito além de uma marcação
tradicional
Canvas & WebGLa última pá de cal no flash!
chrome.angrybirds.com
Hype
Já é muito fácil criar animações em HTML 5, por exemplo: Hype
Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3
Maujor é o cara!
Recommended
