Autoração web aula 12 - camada de apresentação - ticianne ribeiro

Web Design na

China

Por: Smashing Magazine

http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/



O peso do Flash

Shanghai Vive (cosmetics)

Cool Bear Hi (motors)

Mian Dian Fang (breakfast)

Youguan Cookies

Shoebox (shoes brand)

Desing para entretenimento

Lipton Milk Tea (hug game)

M&M China (game)

Moliyo MFM (online videogame)

Desing para “cliques”

Yoho (online shopping for youngin)

China Visual (graphic design resources)

NetEase (news portal)

Desing Cultural

Pizza Hut China

Mc Donalds China

Tong2Studio (graphic design)

Dongpai Design (design studio)

E mais...

The GF Space (design agency)

Shaopan Film Studio

Jossy Jo (clothing brand)

Mole Lele (cartoonist)

Aula 12 – Camada de Apresentação prof. Ticianne Ribeiro

28

Introdução ao CSS

29

Sintaxe Básica do CSS

34

36

seletor { propriedade: valor; }

p {

font-size: 12px; /* ponto-e-vírgula é facultativo */

}

h3 {

font-family: "Comic Sans MS";

}

body {

color: #000;

background: #fff;

font-weight: bold; /*ponto-e-vírgula é facultativo */

}

h1, h2, h3, h4, h5, h6 {

color: #0f0;

}

37

elemento.minhaClasse

{ propriedade: valor; }

.minhaClasse


p.aboutMe {

font-size: 15px;

font-family: “Times New Roman“;

font-weight: bold; text-align: right;

}

<p class =“about Me">

Não presto. Irônico, sarcástico, ansioso, romântico, egoísta, excêntrico, anti social, junto com todos aqueles clichês de quem não quer se igual aos outros.. </p>

38

Não presto. Irônico, sarcástico, ansioso, romântico,

egoísta, excêntrico, anti social, junto com todos

aqueles clichês de quem não quer se igual aos outros..

39

#meuID


#topTitle{

font-size: 35px;

font-family: “Verdana“;

}

<h1 id =“topTitle">

Welcome to the jungle! </h1>

40

Welcome to the jungle!

Como vincular o CSS ao XHTML

41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"

xml:lang="pt-br">

<head>

<title>TÍTULO DA PÁGINA</title>

<link type="text/css" href="seuarquivo.css" media="screen" />

</head>

<body>

<h1>TÍTULO DA SEÇÃO</h1>

<p>CONTEÚDO</p>

</body>

</html>



<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br">

<head>


<style type="text/css" media="screen">

p { text-align:center; }

</style>

</head>

<body>

<p>O texto deste parágrafo deverá ficar centralizado.</p>

<p>Este também.</p>

</body>

</html>




<head>


</head>

<body>

<p style="text-align:center;">O texto deste parágrafo deverá ficar

centralizado.</p>

<p>Este não será centralizado.</p>

</body>

</html>

Prioridade das Regras CSS

49

52

seletor { propriedade: valor !important}

53

body {

font-family: verdana, arial, helvetica, sans-serif;

font-size: 9px;

}

#conteudo p.destaque {

color: #0f0; /* Cor verde */

}

#conteudo p {

color: #00f; /* Cor azul */

font-size: 18px;

}

p {

color: #f00; /* Cor vermelha */

font-size: 26px;

}

<body>

<div id="conteudo">

<p class=“destaque">

Eu escrevi um parágrafo.

</p>

<p>


</p>

</div>

<p>


</p>

</body>




55

Calcular a especificidade

1°) Conte o número (quantidade)

de atributos id no seletor;


de atributos classe no seletor;


de tag's HTML no seletor;

4°) Escreva os números obtidos,

da esquerda para a direita e na mesma

ordem em que foram levantados (id,classe,tag).

Exemplos:

1-) Nesta regra #conteudo p.destaque {...

temos-->uma id, uma classe e uma tag HTML

2-) Nesta regra p span.destaque {...

temos--> zero id, uma classe e duas tag's HTML

Pontuação da primeira regra = 111

Pontuação da segunda regra = 012

Havendo empate na pontuação vale o efeito cascata.

A última regra declarada prevalece.

Tipos de Mídia

56

Tipos de Mídia

Tipos de Media

• Monitores de computadores pessoais; Screen

• Impressoras Braille; Embossed

• Impressoras convencionais; Print

• Leitores de tela para deficientes visuais como DOSVOX e JAWS; Aural

• Monitores em Braille; Braile

• TV Digital; TV

• Dispositivos limitados (sem aplicação prática atualmente); TTY

• Aparelhos móveis como celulares e Palm Tops; Handheld

• Transforma o conteúdo do site em uma apresentação Powerpoint (só funciona no Opera atualmente). Projection




<head>


<link type="text/css" href="screen.css" media="screen" />

<link type="text/css" href="print.css" media="print" />

<link type="text/css" href="handheld.css" media="handheld" />

</head>

<body>

<h1>TÍTULO DA SEÇÃO</h1>

<p>CONTEÚDO</p>

</body>

</html>

Autoração web aula 12 - camada de apresentação - ticianne ribeiro

Documents

Transcript of Autoração web aula 12 - camada de apresentação - ticianne ribeiro