EDTED SP - HTML 5 e CSS 3 - Junho de 2011
66
Leo Balter @leobalter
-
Upload
leonardo-balter -
Category
Technology
-
view
2.298 -
download
3
description
Palestra apresentada no EDTED de SP sobre HTML 5 e CSS 3. Tema: "Realize mais com HTML 5 e CSS 3". Público super bacana!Qualquer pergunta, sugestão, etc entre em contato: @leobalter ou [email protected]
Transcript of EDTED SP - HTML 5 e CSS 3 - Junho de 2011
Leo Balter@leobalter
sim, esse slide vai estar onlinecom todos os links!
@leobalter
@leobalter
@leobalter
@leobalter#leotroll
@leobalter
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">
@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
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
#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
&
CSS 3
@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
@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
@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!
@leobalter
Drag & Drop
File Api
@leobalter
Geolocationa gente já sabe onde você está, e você?
@leobalter
http://goo.gl/sTm1a
Google Maps API Family
@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
@leobalter
Canvas & WebGLa última pá de cal no flash!
@leobalter
Quero jogar!
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
