Você está na página 1de 87

HTML5 & CSS3

Jonas Keizo Hirata


TREINAMENTOS

Wednesday, May 25, 2011

TREINAMENTOS

O QUE VEREMOS?

Uma breve histria do HTML Estrutura de um documento HTML5 Comparao entre HTML4/XHTML e HTML5 Apresentar a especicao Descobrir as novas possibilidades

Wednesday, May 25, 2011

TREINAMENTOS

O QUE NO VEREMOS?

Cdigo e mais cdigo Explicao detalhada de uso das APIs Exemplos de Elementos e ou APIs que no foram implementados por nenhum browser Explicaes passo a passo de tcnicas de como tentar tornar um browser compatvel com o HTML5

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: UM POUCO DE HISTRIA

1998: HTML 4.01 2000: XHTML


Transitional Strict
Frameset

Gerao de desenvolvedores preocupados com cdigo vlido e bem estruturado. Quebraria a compatibilidade com browsers mais antigos

2002: XHTML 2.0


Prometia uma revoluo na linguagem

2004: Web Forms 2.0

WHATWG Web Hypertext Application Technology Working Group


www.whatwg.org

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: UM POUCO DE HISTRIA

2006: W3C cai na real (XHTML 2.0)

W3C

WHATWG

Processo de especicao totalmente diferente: aberto e emprico

2009: W3C direciona os esforos para o HTML5 2010 ~ 2011: Suporte ao HTML5 aumenta a cada release dos browsers.

2012: O mundo acaba :P


Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Vamos comear pelo comeo e por aquilo que ningum lembra de cabea como se ecreve: DOCTYPE

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Vamos comear pelo comeo e por aquilo que ningum lembra de cabea como se ecreve: DOCTYPE

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Vamos comear pelo comeo e por aquilo que ningum lembra de cabea como se ecreve: DOCTYPE

HTML5

<!doctype html>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

HTML 4.01
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

HTML 4.01
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

HTML 4.01
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

HTML5

<meta charset="utf-8">
Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Hora de juntar tudo...


<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo da pgina</title> </head> <body> <!-- Contedo aqui --> </body> </html>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

E aquele negcio de SGML e XML?

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

E aquele negcio de SGML e XML?

HEIN?!
Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="pt-BR"> <head> <meta charset="utf-8" /> <title>Ttulo</title> </head> <body> <p>Texto simples.</p> </body> </html>

E aquele negcio de SGML e XML?


<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo</title> </head> <body> <p>Texto simples. </body> </html>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="pt-BR"> <head> <meta charset="utf-8" /> <title>Ttulo</title> </head> <body> <p>Texto simples.</p> </body> </html>

E aquele negcio de SGML e XML?


<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo</title> </head> <body> <p>Texto simples. </body> </html>

text/html HTML Parser/Serializer


Wednesday, May 25, 2011

application/xhtml+xml Pgina XML Parser/Serializer

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Como um blog se parece?

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Como um blog se parece? Um possvel wireframe seria...

Cabealho (header) Post

Post Rodap (footer)


Wednesday, May 25, 2011

Menu lateral (sidebar)

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

E em HTML, como caria?

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

E em HTML, como caria? Provavelmente assim...


<div id="header"> <h1>Meu BLOG</h1> </div> <div id="sidebar"> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </div> <div class="post"> <h2>Ttulo do Post 1</h2> <p>Texto do Post 1</p> </div> <div class="post"> <h2>Ttulo do Post 2</h2> <p>Texto do Post 2</p> </div> <div id="footer"> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </div>

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Apenas para visualizarmos o HTML em nosso wireframe...

<div id=header> <div class=post>


<div id= sidebar>

<div class=post> <div id=footer>


Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Que diabos esse tal <div>?!

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

De acordo com a especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

De acordo com a especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes. HEIN?! Inline?! Block-level?! Calma...
Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Uma palavrinha sobre semntica HTML...


A semntica HTML o uso da linguagem de marcao HTML para dar signicado ao contedo de um documento ao invs de denir a sua apresentao (aparncia).

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Uma palavrinha sobre semntica HTML...


A semntica HTML o uso da linguagem de marcao HTML para dar signicado ao contedo de um documento ao invs de denir a sua apresentao (aparncia).

Exemplo:
<i>: formata um texto em itlico apresentao <em>: indica que o texto deve ser enfatizado signicado <cite>: indica uma citao signicado

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

OK, mas e aquele tal <div>?!

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Apenas para visualizarmos o HTML em nosso wireframe...

<div id=header> <div class=post>


<div id= sidebar>

<div class=post> <div id=footer>


Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

O elemento <div> no possui signicado e, por padro, no afeta a apresentao. Mais uma olhadinha na especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Voltando ao nosso blog...

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

No seria perfeito se fosse assim?

<header> <post>
<sidebar>

<post> <footer>
Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Por qu?

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Por qu?
Dois motivos bem simples: 1 - obviamente, escreve-se menos 2 - traria signicado ao contedo
Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Legal... e da?

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Legal... e da? a que entre o HTML5!


Um dos objetivos do HTML5 trazer uma semntica maior aos elementos da linguagem. Para isso foram introduzidos novos elementos e alguns j existentes foram alterados semanticamente.

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ESTRUTURA

Vamos ver como poderia car o nosso blog em HTML5:


<header> <h1>Meu BLOG</h1> </header> <aside> <nav> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </nav> </aside> <article> <h2>Ttulo do Post 1</h2> <p>Texto do Post 1</p> </article> <article> <h2>Ttulo do Post 2</h2> <p>Texto do Post 2</p> </article> <footer> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </footer>

Wednesday, May 25, 2011

TREINAMENTOS

ESTRUTURA BSICA DE UM BLOG

Apenas para visualizarmos o HTML5 em nosso wireframe...

<header> <article>
<aside>

As tags <post> e <sidebar> que utilizamos na nossa situao perfeita no existem. No lugar delas utilizamos as tags <article> e <aside> que so mais genricas, anal seria impossvel existirem tags para para todo tipo de site com diversos temas diferentes, no mesmo?

<article> <footer>
Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Analysis of Variance
2 2 ___    BSS  n j X j M   X j nj     2 ___   2 WSS = X  n 1 s  ij X j    j j   


2 T

XT
X
2


XT

 

Xj
N

 nj 

TSS = N -1  s

2 T

X

ij

M 

F df b  k

BSS k 1  dfb ,dfw  WSS n k

NOTE:

1, df w  n k, df t  n 1

T = Total M = Grand Mean N = Overall N TSS = BSS + WSS

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Analysis of Variance
2 2 ___    BSS  n j X j M   X j nj     2 ___   2 WSS = X  n 1 s  ij X j    j j   


2 T

XT
X
2

N
 


XT

?!
Xj

 nj 

TSS = N -1  s

2 T

X

ij

M 

N T = Total M = Grand Mean N = Overall N TSS = BSS + WSS

F df b  k

BSS k 1  dfb ,dfw  WSS n k

NOTE:

1, df w  n k, df t  n 1

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Analysis of Variance
2 2 ___    BSS  n j X j M   X j nj     2 ___   2 WSS = X  n 1 s  ij X j    j j   


2 T

XT
X
2


XT

 

Xj
N

 nj 

TSS = N -1  s

2 T

X

ij

M 

F df b  k

BSS k 1  dfb ,dfw  WSS n k

NOTE:

1, df w  n k, df t  n 1

T = Total M = Grand Mean N = Overall N TSS = BSS + WSS

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA
Valores populares para o atributo id
Total: 1.782.769

Valor footer content header logo container main

Frequncia 288.061 228.661 223.726 121.351 119.877 106.327

Valor table1 menu layer1 autonumber1 search nav

Frequncia 101.677 96.161 93.920 77.350 74.887 72.057

Valor wrapper top table2 layer2 sidebar image1

Frequncia 66.730 66.615 57.934 56.823 52.416 48.922

Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining Application

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA
Valores populares para o atributo class
Total: 2.139.184

Valor footer menu style1 msonormal text content title

Frequncia 179.528 146.673 138.308 123.374 122.911 113.951 91.957

Valor style2 header copyright button main style3 small

Frequncia 89.851 89.274 86.979 81.503 69.620 69.349 68.995

Valor nav clear search style4 logo body left

Frequncia 68.634 68.571 59.802 56.032 48.831 48.052 47.822

Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining Application

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Coincidncia alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?

Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Coincidncia alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?

No
Wednesday, May 25, 2011

TREINAMENTOS

UM POUCO DE ESTATSTICA

Lembra que eu disse que o processo de especicao do HTML5 era diferente? Eu disse que era: Aberto Qualquer um pode participar da lista de e-mail do WHATWG Emprico Os responsveis pela especicao no levaram em conta apenas o que era discutido nas listas de e-mail ou o que eles achavam melhor. Eles observaram o comportamento dos desenvolvedores, ou seja, analisaram pginas e mais pginas em busca de um padro.

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

De marcao:

<article> <aside> <gure> <gcaption> <footer> <header> <hgroup> <mark>


Wednesday, May 25, 2011

<nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr>

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

De marcao:

<article> <aside> <gure> <gcaption> <footer> <header> <hgroup> <mark>


Wednesday, May 25, 2011

<nav> <progress> <ruby> X <rt> <rp> <section> <time> <wbr>

Ruby: Linguagem de Programao

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

Mdia:

<audio> <video> <source> <embed>

Safari 5.0.5 Firefox 4.0.1 Chrome 11.0.696.68 Opera 11.11

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

Grco:

<canvas>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: NOVOS ELEMENTOS


// Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();

Grco:

<canvas>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

Grco:

<canvas>

Bibliotecas para manipular o canvas: gury - http://guryjs.org/ EaselJS - http://easeljs.com/ RGraph - http://www.rgraph.net/ Processing.js - http://processingjs.org/
Wednesday, May 25, 2011

TREINAMENTOS

HTML5: NOVOS ELEMENTOS

Formulrio:

<datalist> <keygen> <output>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ELEMENTOS REDEFINIDOS

<ol> <dl> <cite> <address> <em>, <i> <strong>, <b> <hr> <small>

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ELEMENTOS REDEFINIDOS

<input type=TIPO>
button checkbox color date datetime datetime-local email le hidden image month number
Wednesday, May 25, 2011

password radio range reset search submit tel text time url week

TREINAMENTOS

HTML5: ELEMENTOS REDEFINIDOS

<input>
Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ELEMENTOS REDEFINIDOS

<input>
Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step
* The off state indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prell the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ATRIBUTOS GLOBAIS


setAttribute() getAttribute()

contenteditable data-* draggable=true spellcheck tabindex=-1

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ARMAZENAMENTO

Hoje em dia, como armazenamos dados localmente atravs de um documento HTML?

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ARMAZENAMENTO

Hoje em dia, como armazenamos dados localmente atravs de um documento HTML? Uma dica... s

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ARMAZENAMENTO

Hoje em dia, como armazenamos dados localmente atravs de um documento HTML? COOKIES
Compartilhado com o servidor atravs do cabealho de requisio

Chato de criar, chato de manter e chato de remover Para armazenar estruturas de dados um pouco mais complexas, deve ser serializado primeiro

Wednesday, May 25, 2011

TREINAMENTOS

HTML5: ARMAZENAMENTO

Quais as opes do HTML5?

COOKIES Web Storage Web SQL Databases


Wednesday, May 25, 2011

TREINAMENTOS

HORA DE DAR UMA BROCHADA

E a, j posso sair usando o HTML5?!

Sim
Wednesday, May 25, 2011

TREINAMENTOS

HORA DE DAR UMA BROCHADA

E a, j posso sair usando o HTML5?!

Sim... e No
Utilize o bom senso
Wednesday, May 25, 2011

TREINAMENTOS

HORA DE DAR UMA BROCHADA

E a, j posso sair usando o HTML5?!

Sim... e No
Utilize o bom senso
Wednesday, May 25, 2011

TREINAMENTOS

CSS3

Temos vontade de matar o designer quando ele pede para...

Wednesday, May 25, 2011

TREINAMENTOS

CSS3

Temos vontade de matar o designer quando ele pede para...

Fazer caixinhas com bordas arredondadas Colocar uma sombrinha nos textos/caixas Utilizar um background gigante Utilizar um background composto Fazer uma pgina adaptvel ao tamanho da tela Fazer os ttulos das pginas ter uma fonte mais style

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BORDAS ARREDONDADAS


2 border-radius: 10px; border-radius: 5px 10px 15px 20px; -moz-border-radius -webkit-border-radius

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: SOMBRAS

box-shadow: inset 5px 5px 5px #ff0000; -moz-box-shadow -webki-box-shadow box-shadow: 10px 10px 10px #000000;

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND GIGANTE

Qual o problema do background gigante?

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND GIGANTE

Qual o problema do background gigante?

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND GIGANTE

Qual o problema do background gigante? Soluo: SVG + background-size

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND COMPOSTO

Como resolvemos hoje o problema dos backgrounds compostos?

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND COMPOSTO

Como resolvemos hoje o problema dos backgrounds compostos? <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>
Wednesday, May 25, 2011

TREINAMENTOS

CSS3: BACKGROUND COMPOSTO

Como resolvemos hoje o problema dos backgrounds compostos? Soluo: Mltiplas declaraes de background.

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: PGINA ADAPTVEL

Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela?

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: PGINA ADAPTVEL

Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." />

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: PGINA ADAPTVEL

Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." /> CSS3: @media all and (min-width:500px) { ... } @media print and (orientation: portrait) { ... } <link rel="stylesheet" media="print and (min-width: 25cm)" href="..." />
Wednesday, May 25, 2011

TREINAMENTOS

CSS3: FONTES STYLE

E as fontes diferentes das que no so as do padro web?

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: FONTES STYLE

E as fontes diferentes das que no so as do padro web? Como era feito at hoje? Imagem esttica SIFR (Scalable Inman Flash Replacement) Cufn Imagem dinmica (ex: FLIR)

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: FONTES STYLE

E as fontes diferentes das que no so as do padro web? Como era feito at hoje? Imagem esttica SIFR (Scalable Inman Flash Replacement) Cufn Imagem dinmica (ex: FLIR)

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: FONTES STYLE

E as fontes diferentes das que no so as do padro web? Com CSS3 ca assim:


@font-face { font-family: nomeDaFonte; src: url('/local-da-fonte/arquivo-da-fonte') format("tipo-da-fonte"); } Na hora de usar: ELEMENTO { font-family: nomeDaFonte, verdana, helvetica; }
Wednesday, May 25, 2011

TREINAMENTOS

CSS3: FONTES STYLE

Padres de formatos de fonte:


WOFF (webfonts) TTF (Truetype) OTF (Opentype) SVG (Scalable Vector Graphic) iPhone/iPad/WebKit

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: SELETORES

Novos seletores de atributo:


E[foo^="bar"] E[foo$="bar"] E[foo*="bar"]

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: SELETORES

Seletor de irmao genrico:


E~F Funciona exatamente como o E + F, porm F no precisa estar imediatamente precedido de E

Wednesday, May 25, 2011

TREINAMENTOS

CSS3: PSEUDO-CLASSES

Novas pseudo-classes:
E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:rst-of-type E:last-of-type E:only-child E:only-of-type E:empty E:enabled E:checked E:not(s)
Wednesday, May 25, 2011

Wednesday, May 25, 2011

HTML5 & CSS3


Jonas Keizo Hirata
TREINAMENTOS

www.k19.com.br twitter: @k19treinamentos contato@k19.com.br


Wednesday, May 25, 2011