Descobrindo o CSS Paula Mariano 9.

Apresentação em tema: "Descobrindo o CSS Paula Mariano 9."— Transcrição da apresentação:

1

2

3

4

5

6

7

8 Descobrindo o CSS Paula Mariano

9 9

10 uma garagem é tão valiosa quanto as idéias que nascem dentro dela.
10

11 Garage Spirit é o nosso mantra
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. 11

12 Trabalhamos no modelo “full interactive services”
nossa visão 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.) ESTRATÉGIA USER EXPERIENCE TECNOLOGIA 12

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 Standards Referência:

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:

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 seletor { propriedade : valor ; } Sintaxe CSS 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 id="rightRail"> Conteúdo > direita<br /> largura: 200pixels

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{ width:100%; margin-right:-100%; #rightRail{ float:right; width:200px; margin-right:-200px; </style>

21 Um exemplo – resultado Layout testado em
Windows = 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:

23 Exemplo 23 23

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: 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: 25 25

26 Benefícios Desenvolvedor – ‘front end’ Cliente
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. 26 26

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

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 - Organizado pela Microsoft, inspirado no Css Zen garden. Css Beauty - 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:
 Corrija sua página com o doctype correto:  Image Replacements: CSS sprites: Tableless – Padrões Web com Mandioca eStrogonoff CSS para Webdesign – tutoriais e pensamentos

30