Laboratório de Informática CSS Layout em CSS 27/10/09 27/10/09 Bruno C. de Paula 2º Semestre 2009 > PUCPR > BSI 1

Resumo da aula 27/10/09 Anteriormente trabalhamos com posicionamento CSS através do uso das propriedades float, clear, position e width; O objetivo de hoje é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Resumo da aula 27/10/09 Começaremos a entender que usar tabelas para layout é errado; Leitura obrigatória: Porque utilizar tabelas para layout é estupidez;

Material referente ao assunto da aula 27/10/09 Material referente ao assunto da aula Layout CSS Passo a passo: http://maujor.com/tutorial/layout-css- passo-a-passo.php Propriedade position do CSS: http://www.tableless.com.br/propriedade- position-do-css Flutuando elementos: http://www.pt- br.html.net/tutorials/css/lesson13.asp Posicionando elementos: http://www.pt- br.html.net/tutorials/css/lesson14.asp 27/10/09 4

Material referente ao assunto da aula Layout de forms 27/10/09 Material referente ao assunto da aula Layout de forms Livro:Desenvolvendo CSS na Web - SIMON COLLISON Livro: Web Form Design: Best Practices  Site:http://www.lukew.com/ff Construindo formulários acessíveis: http://www.maujor.com/tutorial/formac-a.php Formulários Geral: http://www.maujor.com/tutorial/cssforms.php Formulários de Contato: http://www.maujor.com/tutorial/formContato.php 27/10/09 5

Material referente ao assunto da aula Layout de forms 27/10/09 Material referente ao assunto da aula Layout de forms Exemplo de Formulário Semântico: http://www.acordapraweb.com/formularios-totalmente-semanticos-com-html-e-css/ Mais um exemplo de formulário semântico: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html Checklist de usabilidade em forms: http://www.alistapart.com/articles/sensibleforms Artigo sobre alinhamento de formulários de cadastro: http://www.lukew.com/ff/entry.asp?504 27/10/09 6

Material referente ao assunto da aula Layout de menus 27/10/09 Material referente ao assunto da aula Layout de menus Origem da técnica de rollover: http://wellstyled.com/css-nopreload-rollovers.html 27/10/09 7

Material referente ao assunto da aula 27/10/09 Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. 27/10/09 8

Tag de estilo: <style>; Tag de link: <link>; 27/10/09 Tags HTML referenciadas na aula (em Português –site Referenciando) Tag de estilo: <style>; Tag de link: <link>; Tag de script: <script>. 27/10/09 9

Tag de estilo: <style>; Tag de link: <link>; 27/10/09 Tags HTML referenciadas na aula (em Inglês – site SitePoint) Tag de estilo: <style>; Tag de link: <link>; Tag de script: <script>; 27/10/09 10

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint) 27/10/09 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint) float: determina o posicionamento de um elemento em relação ao fluxo; clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores; position: tipo de posicionamento de um elemento.

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint) 27/10/09 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint) width: largura de um elemento, obrigatório nos elementos com float; left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado; top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado.

Exemplos da aula Exemplos desta aula: 27/10/09 Exemplos da aula Exemplos desta aula: http://www.brunocampagnolo.com/ 2009li/2009/11/03/layout-de- elementos-em-css/ Exemplos da aula passada: http://www.brunocampagnolo.com/20 09li/2009/10/27/posicionamento-de- elementos-em-css/ 27/10/09 13

Largura fixa variável; Alguns tipos de layout 27/10/09 Largura fixa; Líquido ou fluido; Elástico; Largura fixa variável;

Largura fixa Determinado em pixels; 27/10/09 Determinado em pixels; Redimensiona a janela, layout permanece; Controle exato; Não prevê resolução do usuário.

Exemplo de site com Largura fixa 27/10/09 http://www.pucpr.br

Líquido ou fluido Expande ou contrai conforme resolução do usuário; 27/10/09 Expande ou contrai conforme resolução do usuário; Cuidado com tamanho das imagens; Deve ter largura máxima, pois o texto não é redimensionado.

Exemplo de site com layout líquido 27/10/09 http://www.tabcorp.com.au

Elástico 27/10/09 Expande ou contrai conforme resolução ou preferências do usuário; O texto é redimensionado também; Pode ter largura máxima e mínima.

Exemplo de site com layout elástico 27/10/09 http://www.htmldog.com/articles/elasticdesign/ demo/

Largura fixa variável 27/10/09 O layout muda automaticamente para se adaptar à largura do navegador do usuário; Mudança no número de colunas, inclusive; Geralmente construído via JavaScript; Pouco usual.

Layout líquido de 2 colunas Exemplo: Layout líquido de 2 colunas 27/10/09 HTML Básico: <div id="cabecalho"></div> <div id="conteudo"></div> <div id="lateral"></div> <div id="rodape"></div> CSS Básico: #cabecalho {} #conteudo { float:left; width:X%;} #lateral { float: right; width: Y%;} #rodape {clear: both;}

Layout líquido de 3 colunas Exemplo: Layout líquido de 3 colunas 27/10/09 HTML Básico: <div id="cabecalho"></div> <div id="lateral_a"></div> <div id="lateral_b"></div> <div id="conteudo"></div> <div id="rodape"></div> CSS Básico: #cabecalho {}  #lateral_a { float: left; width: X%} #lateral_b {float:right;width: Y%} #conteudo {margin-left:X+Z%; margin-right: X+Z%} #rodape { clear:both}

width; float; clear; margin; min-height. 27/10/09 DEZENAS de variações são possíveis apenas alterando as propriedades: width; float; clear; margin; min-height.

27/10/09 Problema: muitas vezes é obrigatório o uso de hacks para compatibilizar com navegadores antigos. Imagem original em: http://www.flickr.com/photos/mlostracco/435561154/

1) Deixe o problema para seu designer resolver; Minha Recomendação 27/10/09 1) Deixe o problema para seu designer resolver; 2) Aproveite ou modifique algum layout pronto; 3) Use um framework CSS; 4) Crie seu layout em um gerador de layout.

Layouts prontos Sugestões de links http://www.csseasy.com/ 27/10/09 http://www.csseasy.com/ http://layouts.ironmyers.com/ http://www.code- sucks.com/css%20layouts/ http://www.glish.com/css/ http://www.intensivstation.ch/en/templa tes/

Framework CSS Sugestões de links 27/10/09 Cuidado! Frameworks CSS aumentam a distância do desenvolvedor em relação ao código CSS; Não são muito flexíveis e podem sujar o código; Bons para evitar hacks; http://www.blueprintcss.org/ http://960.gs/ http://developer.yahoo.com/yui/grids/ http://delicious.com/bcp/css+framework

Geradores de layout Sugestões de links http://builder.yaml.de/ 27/10/09 http://developer.yahoo.com/yui/grids/bu ilder/ http://www.positioniseverything.net/arti cles/pie-maker/pagemaker_form.php http://builder.yaml.de/

Layout de elementos específicos – Layout de forms 27/10/09 Técnicas de layout de formulários: Tabelas – evitar; Parágrafos – o mais compatível; Listas de definição; Divs. 05-LayoutBaseadoEmTabelas.html - Layout baseado em tabelas, o que vimos até agora, não é a solução ideal; 06-LayoutBaseadoEmParagrafos.html - Layout baseado em parágrafos (<p>) e quebras de linha (<br>); Baseados em float: Layout baseado em listas de definição (<dl>, <dd>, <dt>) Layout baseado em camadas (<div>) Código HTML bastante limpo e acessível; Funciona bem mesmo sem CSS; Fácil leitura pelo usuário; Prevê dispositivos com baixa resolução de largura; CSS Aplicado muda pouco em relação à versão anterior! Não é uma boa abordagem bom para formatações complexas; Sugere-se a colocação de separador entre os itens: fieldset p { margin:3px 0 2px 0; border:1px solid #aaa; padding:5px; background:#ccc; }

Desafio do layout de forms! 27/10/09 Desafio!: Renderização padrão em navegadores diferentes é sempre diferente. Botões NUNCA vão ficar exatamente iguais. Fonte: Página 173 do Beggining CSS

Formulário exemplo 27/10/09

Layout de elementos específicos – Layout de menus 27/10/09 Técnicas de layout de menus: Dezenas! Ver exemplos. Geralmente se usa imagens de rollover; Quando o mouse passa sobre um elemento, a imagem é realinhada.

Rollover 27/10/09