(PDF) Realize mais com HTML 5 e CSS 3 - EDTED / RS

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>

<head>

...

@leobalter

<!doctype html>

<head>

...

@leobalter

<!doctype html>

<head>

...

@leobalter

<nav>

@leobalter

novos elementos não são renderizados como blocos!

OMG!

@leobalter

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>

@leobalter

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>

@leobalter

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>

@leobalter

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>

Encurtando o caminho...

http://www.modernizr.com/

@leobalter

http://html5boilerplate.com/

@leobalter

<html class="no-js" lang="en">

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

@leobalter

<html class="no-js" lang="en">

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

@leobalter

<html class="no-js" lang="en">

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

@leobalter

<html class="no-js" lang="en">

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

@leobalter

<html class="no-js" lang="en">

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

@leobalter

<html class="no-js" lang="en">

.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;

}

O melhor hack é não precisar de hacks

Polyfills!

Progressive Enhancement

&

http://goo.gl/KjSdM

CSS 3

http://goo.gl/0z6WQ

http://goo.gl/WWYtR

@leobalter

http://css3pie.com/

Media QueriesCom o media queries seu site vai

impressionar diversas mídias como um camaleão

@leobalter

http://goo.gl/DWOJj

http://www.thecssninja.com/demo/css_chameleon/

@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;" }}

http://mediaqueri.es/

@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

@leobalter

http://fontsquirrel.com

@leobalter

http://goo.gl/atq0A

<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

@leobalter

http://min.us

Geolocationa gente já sabe onde você está, e você?

@leobalter

http://maps.google.com

@leobalter

http://maps.google.com

@leobalter

http://goo.gl/sTm1a

Google Maps API Family

http://code.google.com/apis/maps/index.html

Vídeos!

@leobalter