A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

8 Descobrindo o CSS Paula Mariano uma garagem é tão valiosa quanto as idéias que nascem dentro dela.

Apresentações semelhantes


Apresentação em tema: "8 Descobrindo o CSS Paula Mariano uma garagem é tão valiosa quanto as idéias que nascem dentro dela."— Transcrição da apresentação:

1

2

3

4

5

6

7

8 8 Descobrindo o CSS Paula Mariano

9

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

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

12 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 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. Os layouts então, se tornaram mais complexos, mas também menos semânticos.

14 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 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 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 17 Tipos de uso Estilos externos – arquivo separado, aplicando estilo à todas as páginas que o chamam. Peso 001 Estilos escritos ( embedeed ) – fragmento de código na página, será aplicado apenas a página que está. p strong { color : #666 ; } Peso 010 Estilos inline – fragmento aplicado na tag HTML, valendo apenas para o elemento com o estilo. texto muito importante Peso 100

18 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 19 Um exemplo Um layout de 3 colunas com largura variável e mesma altura. Conteúdo principal largura: toda a área disponível altura: se o conteúdo cresce, o sidebar acompanha Conteúdo largura: 150pixels Conteúdo > direita largura: 200pixels

20 20 Um exemplo Código CSS usado 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; }

21 21 Um exemplo – resultado Layout testado em Windows = IE 6, IE 7, Firefox 2, Safari 3, Ópera 9

22 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 Utilize CSS para ditar como elas devem se apresentar Referência:

23 23 Exemplo

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

26 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 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 28 Bons exemplos na web Css Zen Garden - 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 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


Carregar ppt "8 Descobrindo o CSS Paula Mariano uma garagem é tão valiosa quanto as idéias que nascem dentro dela."

Apresentações semelhantes


Anúncios Google