Descobrindo o CSSDescobrindo o CSS

Paula Mariano

uma garagem é tão valiosaquanto as idéias que nascem dentro dela.

Garage Spirit é o nosso mantra. Em maior ou menor

grau, é o espírito de inovação que está presente em

tudo o que a gente faz. É como se fosse um guia de

conduta, que nos desafia a encontrar idéias novas o

tempo todo. Funciona como uma consciência coletiva,

que está sempre nos dizendo para onde temos que ir.

Entregar idéias inovadoras para nossos clientes, baseadas em novas formas criativas de utilização da tecnologia

Trabalhamos no modelo “full interactive services”Programas de marketing que integram todo tipo de IP media (internet,

mobile, games, IPtv, outdoor interativo etc.)

nossa visão

ESTRATÉGIA + USER EXPERIENCE + TECNOLOGIA

13

No passado

O HTML era usado para marcação de conteúdo e para definir a sua apresentação também.

Os designers descobriram o <table border=“0”>.

Os layouts então, se tornaram mais complexos, mas também menos semânticos.

14

Web 2.0

Web 2.0 – termo usado pela primeira vez em 2004 em uma série de conferências sobre o tema.

Regras sugeridas: Conteúdo é Rei Beta perpétuo ‘Software’ acessível em mais de um dispositivo, e não

mais sendo vendido como um pacote, e sim como um serviço.

Aplicativos beneficiando-se do efeito rede, para serem melhores quanto mais pessoas usarem, aproveitando a ‘Inteligência Coletiva’.

Padrões Web ou Web StandardsReferência:

http://pt.wikipedia.org/wiki/Web_2.0

15

O que a Web 2.0 tem a ver com CSS

O que é : Visão Geral

Cascading Style Sheets – Folhas de estilo em cascatas.

Tableless – Muito mais que ausência de tabelas.

• HTML para marcação do conteúdo• CSS para apresentação• JavaScript para comportamento

Referência:http://pt.wikipedia.org/wiki/Cascading_Style_Sheetshttp://pt.wikipedia.org/wiki/Tableless

16

CSS – melhor explicado

CSS – Cascading Style Sheets (Folhas de Estilo em cascata)

É uma coleção de regras que define a apresentação de uma página web.

CSS é uma forma de atribuir propriedades visuais a um mesmo elemento html ( ou vários ) de forma hierárquica e sem ser repetitivo.

• HTML é a estrutura para o conteúdo.• CSS é a aparência desse conteúdo.

As regras ditadas, valem para todos os elementos ‘filhos’ no html, a não ser que exista uma nova regra para um dos filhos.

17

Tipos de uso

Estilos externos – arquivo separado, aplicando estilo à todas as páginas que o chamam.

<link rel=”stylesheet” type=”text/css” src=”arquivo.css” />Peso 001

Estilos escritos ( embedeed ) – fragmento de código na página, será aplicado apenas a página que está.

<style type=”text/css”> p strong { color : #666 ; } </style>Peso 010

Estilos inline – fragmento aplicado na tag HTML, valendo apenas para o elemento com o estilo.

<p>texto muito <strong style=” color: #666 ; ”>importante</strong></p>

Peso 100

18

Modo de usar

Sintaxe CSS

seletor { propriedade : valor ; }

• Seletor:elemento HTML ( h1, p, strong );classe ( .myclass );id ( #id ).

• Propriedade: é o atributo a ser declarado a regra ( color, font, border,

background... )

• Valor: é o valor da propriedade ( cor azul, fonte Arial, borda de 1 pixel…)

19

Um exemplo

Um layout de 3 colunas com largura variável e mesma altura.

<div id="container">

<div id="center">

Conteúdo principal<br />

largura: toda a área disponível<br /><br />

altura: se o conteúdo cresce, o sidebar acompanha

</div>

<div id="leftRail">

Conteúdo < esquerda<br /> largura: 150pixels

</div>

<div id="rightRail">

Conteúdo > direita<br /> largura: 200pixels

</div>

</div>

20

Um exemplo

Código CSS usado

<style type="text/css">

body{

font: 12px Tahoma;

margin: 0;

padding:0 200px 0 150px;

}

#container{

background-color:#9cc;

float:left;

width:100%;

border-left:150px solid #cf9;

border-right:200px solid #c33;

margin-left:-150px;

margin-right:-200px;

display:inline;

position: relative;

}

#leftRail{

float:left;

width:150px;

margin-left:-150px;

position:relative;

}

#center{

float:left;

width:100%;

margin-right:-100%;

}

#rightRail{

float:right;

width:200px;

margin-right:-200px;

position:relative;

}

</style>

21

Um exemplo – resultado

Layout testado emWindows = IE 6, IE 7, Firefox 2, Safari 3, Ópera 9

22

Dicas para um bom código

Utilize as tags HTML para aquilo que elas foram criadas h1, h2 … h6 – para definir títulos; ul, ol, dl – para fazer listas; p – para parágrafos; strong – ao invés de b para dar ‘mais ênfase’; table – para dados tabulares

e toda as outras que não caberiam neste documento.

Feche corretamente e ordenadamente o que você abriu <br /> <strong><a href=“#”></a></strong>

Utilize CSS para ditar como elas devem se apresentar

Referência:http://www.w3schools.com/tags/default.asp

23

Exemplo

www.skolbeats.com.br

24

Uso indiscriminado de tabelas

Cliente: Temos um problema, meu site está muito lento para carregar.

Desenvolvedor: Mas não é possível, o banco foi bem estruturado, o servidor tem

banda disponível…

Dias depois de muito quebra cabeça, descobre-se que o problema consistia no fato do layout ser todo montado em tabelas, e o browser, para render tabelas, fica aguardando o fechamento da tabela aberta no início do código para render todo o conteúdo.

25

Validação

Ser ou não ser um site válido.

A ferramenta W3C de validação, é apenas um dispositivo para ajudar no desenvolvimento do código, não sendo de forma alguma um carimbo de site ‘bom ou ruim’

• Um site pode ser inválido para o W3C se possui links com urls do tipo:http://urldosite.com.br/pagina?

parametro=valor&parametro2=valordois

Um código ‘válido’ não significa um bom código.• Um site todo construído em tabelas, pode ser um site válido.

Referência:http://validator.w3.org/

26

Benefícios

Desenvolvedor – ‘front end’ Menos trabalho no desenvolvimento – formato pirâmide Desenvolvimento paralelo com ‘back end’ Visão geral de todo o site em um único documento

Cliente Menos horas trabalhadas – menor custo final Desenvolvimento em paralelo com back end – menos horas

trabalhadas – menor custo final Todo o layout do site em um único documento ( cacheado ) –

menos transferência de dados – menor custo final com servidor.

27

Benefícios

Usuário

Consumo de banda, pois o estilo é declarado uma única vez e cacheado.

Carregamento mais rápido da página

Encontrará o conteúdo quando buscar nos buscadores.

Multi-plataforma ( browser, SO, dispositivos – computador, cpu, palm… )

Usuário deficiente visual conseguirá navegar pelas páginas sem problemas, e conseguirá ver lógica em todo o conteúdo ali disposto.

28

Bons exemplos na web

Css Zen Garden - http://www.csszengarden.com/ Um único html, com dezenas de layouts diferentes, apenas modificando o css da página.

  Concurso Remix - http://visitmix.com/remix/contest/

Organizado pela Microsoft, inspirado no Css Zen garden.

Css Beauty - http://www.cssbeauty.com/gallery/Possui uma galeria com belos trabalhos feitos com layouts baseados em css. Um bom exemplo de que css deve e pode ser usado no dia a dia.

29

Para saber mais

14 regras para páginas mais rápidas:http://www.skrenta.com/2007/05/14_rules_for_fast_web_pages_by_1.html

 Corrija sua página com o doctype correto:http://www.revolucao.etc.br/archives/doctype-dtd-document-type-definition/

 Image Replacements:http://www.mezzoblue.com/tests/revised-image-replacement/

CSS sprites:http://alistapart.com/articles/sprites

Tableless – Padrões Web com Mandioca eStrogonoffhttp://www.tableless.com.br/

CSS para Webdesign – tutoriais e pensamentoshttp://www.maujor.com/