• http://www.gimp.wisdomplug.com/
• http://gimp-tutorials.net/
• http://www.gimp-tutorials.com/ (muitos tutoriais)

Neste tutorial mostrarei uma técnica de construção de layout para uma página Web, sem uso de tabelas. O entendimento das propriedades de posicionamento é fundamental para a construção de layouts baseados em CSS . Conhecer com detalhes o comportamento de elementos posicionados com uso de:

position: relative; — position: absolute; — position: fixed; — float

é condição indispensável para começar suas primeiras tentativas de criar um layout.

Depois de conhecer como se comportam os elementos posicionados você terá que se aprofundar no estudo do comportamento diferenciado dos navegadores com relação a cada posicionamento.

A estrutura da página

Vamos construir um layout constituido por:

1. um topo;
2. uma coluna principal;
3. uma coluna de navegação;
4. um rodapé.

A marcação XHTML pura e a renderização podem ser vistas nesta página exemplo -1

O layout a construir

Nossa página terá as seguintes características:

1. largura fixa de 760px;
2. topo com 80px de altura na cor #df7ddf;
3. coluna principal com 578px de largura na cor #99ccff;
4. coluna de navegação com 180px de largura de altura na cor #ffbe7d;
5. rodapé com 20px de altura na cor #b5daa2;
6. coluna de navegação à esquerda e principal à direita

Notar que a soma da largura das colunas é igual a 578px + 180px = 758px.
Como a largura total disponível é de 760px, teremos um espaçamento de 2px entre as colunas.

As primeiras regras CSS e a renderização podem ser vistas nesta página exemplo -2

Posicionando as colunas

Os elementos do layout estão com suas larguras e cores definidas, mas posicionados um embaixo do outro, formando uma pilha de DIVs (elementos nível de bloco), na ordem exata em que aparecem no código.

Vamos deixar o topo em cima, o rodapé embaixo e as colunas uma ao lado da outra. Para isto temos que posicionar as colunas. Usamos a declaração float: right; para a coluna principal e float:left; para a coluna de navegação. E complementarmente temos que “clarear” os elementos flutuados, para que empurrem o que estiver abaixo (no nosso caso o rodapé), declarando clear: both; para o rodapé.
Conforme já observado acima, esperamos um espaçamento de 2px entre as colunas, já que flutuamos uma para cada lado.

O efeito das novas regras CSS e a renderização podem ser vistas nesta página exemplo -3

Adicionando conteúdo nas colunas

Vamos adicionar conteúdo nas colunas para ver como se comportam elementos floats com conteúdos.

Primeiro, conteúdo na coluna principal. Veja o que acontece nesta página exemplo -4

Ops! a coluna principal cresceu para acomodar o conteúdo e “empurrou” o rodapé para baixo.
Mas, a coluna de navegação não acompanhou o crescimento (o que era de se esperar) e deixou um fundo diferente abaixo.

A seguir, conteúdo na coluna de navegação. Veja o que acontece nesta página exemplo -5

Ops! a coluna de navegação cresceu para acomodar o conteúdo e “empurrou” o rodapé para baixo.
Mas, a coluna principal não acompanhou o crescimento (o que era de se esperar) e deixou um fundo diferente abaixo.

Conclusão: As colunas crescem independentes uma da outra, de acordo com o conteúdo nelas existente, e se tiverem cores de fundo diferentes o layout “quebrará” conforme mostrado nos dois exemplos.

A solução

A solução baseia-se em uma técnica CSS que foi denominada por Dan Cederholm de “Faux Columns” que podemos traduzir para “Falsas Colunas”. Trata-se na verdade de simular a cor das colunas com uso de uma imagem de fundo.
Notar contudo, de que nada adiantará colocar a imagem como fundo da coluna individualmente.
Temos que colocar a imagem no elemento que está por trás das duas colunas, para que quando acabe a coluna o fundo apereça por trás, dando a impressão de continuidade até o rodapé.

Vamos em frente.
O elemento que está por trás das colunas é a div#tudo. É nele que colocaremos uma imagem de fundo para simular a cor das colunas.
Uma imagem vale mais que mil palavras. Então, para entender o que vai acontecer, veja a seguir a imagem que colocarei como fundo e farei com que ela se repita na vertical, preenchendo todo o elemento.

Imagem para faux columns:

A regra CSS para colocar a imagem de fundo na div#tudo e o resultado no nosso layout, pode ser visto nesta página exemplo -6.

Hum! agora sim, deu para ver que apesar de a coluna de navegação ter esticado para baixo, a cor da coluna principal estendeu-se até o rodapé.
Compare com o a mesma página sem faux column.

E se o conteúdo esticar a coluna principal? Sem problemas e você já deve ter concluido o que acontecerá. Veja nesta página exemplo -7. Compare com o a mesma página sem faux column.

Notar por fim que aquele espaço de 2px entre as colunas foi preenchido com a cor preta existente na imagem da faux column, simulando uma borda. É claro que você pode deixar uma espaço maior ali e projetar uma borda decorativa entre as colunas.

Adicionando margens nos conteúdos

Você com certeza notou, quando viu a página exemplo -6, que os conteúdos das colunas tocam na borda esquerda. Para afastar o conteúdo alguns pixels do limite interno do seu container, usamos padding no container. Certo?
Sim, certo. Vamos colocar 8px de padding na coluna de navegação e 20px de padding na coluna principal, para as duas colunas, em ambos os lados do container.

A regra CSS para adicionar estes paddings e o efeito no nosso layout podem se vistos nesta página exemplo -8 onde eu retirei a faux column para melhor visualização.

Uau! isto ruiu meu layout. Sim ruiu, você viu né?
Era esperada a ruína do layout. Vejamos:
Coluna principal: 578px + 20px + 20px = 618px.
Coluna navegação: 180px + 8px + 8px = 196px.
Soma das colunas: 618px + 196px = 814px

O container das colunas tem 760px e obviamente, não consegue conter 814px. A coluna principal não deixa espaço para acomodar a coluna de navegação à sua esquerda, e esta tem que flutuar logo abaixo dela como constatamos na página visitada.

Solução imediata: Diminuir 16px na largura da coluna de navegação e 40px na largura da coluna coluna principal.
Alternativa: Em lugar de padding para o container, definir margin padding para todos os elementos do conteúdo. Isto faz o mesmo efeito e não altera a largura das colunas.
Usamos o seletor universal estrela (*) para casar todos os elementos do container.

A regra CSS e o resultado no nosso layout, pode ser visto nesta página exemplo -9.

Curiosidade: Se você visualizar a página exemplo -8 no IE 5.0 ou no IE 5.5 o layout estará perfeito, sem quebra. Você sabe responder porque isto acontece naqueles navegadores?

Bônus extra

Como bônus extra desta matéria, vamos centralizar nosso layout na página.

A regra CSS e o resultado no nosso layout, pode ser visto nesta página exemplo -10.

Fonte: http://maujor.com/tutorial/lay2col-faux-colunm.php

Kemel Zaidan aka Legendario em http://www.ubuntu-sp.org/2010/promotoras-da-microsoft-se-rendem-ao-ubuntu/

Agora você vai poder acompanhar o melhor sobre Linux, Informática, Webdesign, Comunicação e Web Standards.

Boa leitura!

Foto: Divulgação

G1, da HTC, é o primeiro a adotar o sistema operacional Android.  (Foto: Divulgação)

O Google liberou, nesta terça-feira, o código do sistema operacional para telefones celulares Android. Com essa oferta, disponível aqui, a empresa pretende fazer com que mais empresas adotem sua plataforma para dispositivos móveis e também que desenvolvedores criem novos aplicativos e funcionalidades para aparelhos que usam o Android.

O primeiro telefone celular a adotar o sistema operacional do Google é o G1, produzido pela HTC, lançado nas lojas dos Estados Unidos na noite de terça-feira. “Dedicamos muito esforço ao primeiro aparelho que usa o Android. Mas o Android não se limita a um equipamento: é uma plataforma que pode ser adaptada para rodar em diversos celulares”, diz um texto publicado no blog oficial do projeto.

A oferta do código fonte tem como alvo fabricantes de dispositivos móveis e também os desenvolvedores. Os usuários não podem baixar a plataforma diretamente em seus celulares, pois esse sistema precisa vir instalado de fábrica.

Apresentado em novembro de 2007, o Android faz parte de uma parceria entre o Google e outras dezenas de empresas chamada Open Handset Alliance. Segundo o Google, essa plataforma ajudará a indústria de celulares a fazer com que a internet funcione em telefones da mesma forma como funciona em computadores – isso contribuiria para o aumento de tráfego nos sites da empresa.

A novidade representa um desafio para o iPhone, da Apple, e também para outras empresas envolvidas no comércio de celulares inteligentes, como a Palm, Research in Motion, Microsoft e Nokia.

Fim do sigilo

A Apple também permite que desenvolvedores criem aplicativos para o iPhone, como no caso do Android. Depois do anúncio do G1, a empresa de Steve Jobs desistiu de um acordo de sigilo feito com os programadores, que era visto por muitos como um obstáculo para a criação de novas ferramentas.

A Apple exigia que os profissionais não divulgassem ou comentassem nem com seus colegas informações relacionadas ao kit de desenvolvimento de software para o iPhone. Recentemente, a companhia também proibiu os programadores que tiveram seus aplicativos rejeitados de divulgar os motivos pelos quais não foram aceitos. Essa iniciativa gerou uma nova onda de críticas sobre o processo de aprovação da Apple, visto por muitos como sigiloso e motivado por caprichos.

A companhia de Steve Jobs defendia que seu acordo de sigilo tinha o objetivo de proteger as inovações da Apple “para que outros não roubassem suas idéias, como já aconteceu”. No entanto, os programadores reclamavam que isso proibia a troca de dicas ou soluções para problemas enfrentados por toda a comunidade. O Android permite a criação e venda de novos programas sem qualquer restrição.

“O G1, em sua seção de Tecnologia, destaca a nova versão do OpenOffice, fazendo uma análise muito boa das novas funcionalidades, destacando algumas inovações e encerra recomendando fortemente o uso em substituição à ferramenta da Microsoft.”

Veja aqui!

Fonte: BR-Linux