Marcus VBP

Faz muito tempo que eu não escrevo sobre CSS ou mesmo tutoriais de caráter geral no blog.

Parte da culpa disso é o tempo, mas também tem o fato que hoje, layouts utilizando CSS são a norma, e não há tanta necessidade de divulgar os Padrões Web. Além disso, existe material extenso espalhado pela rede, e não quero ficar replicando este conteúdo.

Contudo, esta semana eu parei para estudar um tema do meu gerenciador de conteúdo preferido (sim, é o Drupal), pois descobri que um problema que acontece eventualmente em meus layouts CSS, não ocorre no tema.

Existe várias maneiras de se resolver o mesmo problema usando CSS, e provavelmente o meu problema não afeta todos os desenvolvedores de internet. Contudo, a minha forma de criação de layouts de 3 colunas é uma das mais comuns, então esse problema eventual (que na verdade não é um problema, é o comportamento esperado, mas é um pé no saco) deve afetar várias pessoas

Que problema seria este? É que quando você cria um layout de três colunas (duas menores laterais e 1 central, mais larga), você pode colocar elementos com a propriedade clear:both na coluna central, ou seu layout irá quebrar.

Descrição do problema passo-a-passo

1. Você cria um layout simples em CSS, de três colunas, que tem a seguinte estrutura:

e utilizando o seguinte CSS para formatar:

O resultado até agora pode ser visto aqui.

2. Você adiciona uma caixa, feita com uma div de dimensões fixas e com float: left. Só que como é uma div flutuante, a caixa excede as dimensões do seu container. Veja um exemplo aqui.

3. Eu não quero que isso aconteça. Quando você não quer que um elemento flutuante invada ou ultrapasse um elemento, você pode usar a propriedade clear. clear: left impede elementos flutuantes à esquerda do elemento formatado, clear: right à direita, e both de ambos os lados. Eu posso aplicar clear: both (ou left, ou right) a por exemplo, àquela linha "hr" que sucede a caixa. Só que isso faz com que o hr seja exibido apenas depois das colunas laterais (que são posicionadas com float), gerando um buraco enorme na página. Veja um exemplo.

Uma solução alternativa seria definir uma altura mínima à div que engloba a caixa, mas esta solução não é muito boa, especialmente se você está lidando com elementos de tamanho variável.

A solução Passo-a-Passo

A solução é bem simples. Em vez de simplesmente tentar contornar o problema, vamos mudar a forma como a página é construída. O resultado vai ser o mesmo.

1. Pegue a mesma estrutura da página utilizado nos exemplos 1, 2 e 3, e adicione mais uma div, englobando a coluna central. Eu chamei esta div de "center".
2. Posicione as colunas laterais naturalmente, ou seja, utilizando float. Mas aplique position: relative e z-index: 2 em ambas as colunas laterais, para contornar um problema com o Internet Explorer 6 e 7 (os links nas colunas laterais ficariam inclicáveis sem isso).
3. Aplique uma margem negativa esquerda e direita à div center equivalente às larguras totais das divs laterais. Aplique também à esta div a propriedade float: left e width: 100%.
4. Na div da coluna central (que eu chamei de conteudo), adicione uma margem esquerda e direita equivalente às larguras totais das divs laterais.

Basicamente só seria necessário este procedimento para que o layout funcione certinho, mas infelizmente devido à interpretação equivocada do modelo de caixa do IE6, talvez seja necessário adicionar um CSS Hack, que pode ser feito colocando um "_" no início da propriedade, ou o mais recomendado, utilizar um arquivo à parte e usar comentários condicionais para inserí-lo na página. Antes que eu esqueça, vejam o resultado no exemplo 4.

Obviamente, ambas as formas de criar o layout estão corretas, e possuem as suas vantagens e desvantagens. A que eu utilizava anteriormente é muito mais simples de ser feita, mas apresenta seus problemas com elementos com clear. A segunda é mais complexa, requer mais divs e mais linhas de CSS, mas não tem problema com clear. Fica como mais uma opção para desenvolver o layout.

A sim, antes que eu esqueça, a solução apresentada aqui funcionou em todos os navegadores (testado usando o site Browsershots), e também funciona com layout fluido e com layout de apenas duas colunas.

Duas notícias de interesse geral dos desenvolvedores para internet, em especial os designers.

A primeira é que foi anunciado que a versão do Wine, software que provê a API do Windows para sistemas Unix, com o objetivo de executar aplicativos windows fora do seu ambiente nativo, lançada dia 25 (e cujo pacote compilado para Ubuntu/Debian foi lançado hoje) passou a suportar o Adobe Photoshop CS e CS 2. Eu instalei aqui o Photoshop CS e funcionou lindamente, mas não cheguei a executar testes com plugins ou efeitos, apenas funções básicas.

Esta é uma ótima notícia para projetistas de interface que queiram experimentar o Linux mas não conseguem se acostumar com a interface do ótimo GIMP. Mesmo que este primeiro release não tenha um suporte ideal, o projeto Wine avança muito rápido, com lançamentos a cada 15 dias.

A outra notícia é que dia 12 de Fevereiro a Microsoft irá lançar uma atualização do Windows XP, que irá substituir o Internet Explorer 6 pela versão 7. O IE7 não é uma Brastemp no que se refere aos suportes aos Padrões, mas mesmo assim é bem melhor que o 6. Resta agora esperar que atualização seja feita, reduzindo drásticamente a base de IE6 no mercado. O sonho seria se a mudança fosse total e absoluta, mas isso é impossível. Vi esta notícia no Tech News.

Hoje é um post depois de outro, rsrsrs.

Um dos pré-requisitos para ser formar no Curso Superior de Web Design é fazer um estágio curricular de pelo menos umas 400 horas. Outro pré-requisito é realizar um Relatório de Estágio.

Ele é de certa forma muito semelhante a uma monografia. Só que enquanto uma monografia é uma defesa de tese, um relatório de estágio é um guia prático das atividades realizadas um projeto no seu estágio.

Resolvi disponibilizar o meu relatório completo no site. Escolhi o projeto de desenvolvimento da nova versão do site do Paraíba Jovem, um site de eventos e rádio online bem conhecido e de grande visitação. O site foi desenvolvido utilizando os Padrões Web (na medida do possível), e foi utilizado muitas técnicas CSS, que são explicadas no relatório.

O documento possui uma linguagem didática, apesar de não ser um guia passo-a-passo. Se fosse feito desta forma, explicando detalhadamente cada uma das etapas envolvidas, o relatório teria mais de 200 páginas, brincando. Digamos que o documento é didático entre profissionais, que sabem do que estão falando. É quase como uma documentação do projeto.

Inicialmente eu pretendia apenas postar os capítulos do documento como páginas no blog. Isso seria interessante para tornar as páginas bem acessíveis aos mecanismos de busca. Mas não seria prático para estudantes que desejassem estudar desconectado da internet. Além disso uma parte importante do relatório não poderia ser mantida, que é a formatação de acordo com as normas da ABNT.

Por isso também está disponível em formato PDF. Espero que seja muito útil. Eu estou disponível para tirar qualquer dúvida sobre os processos envolvidos, ou até discutir melhoramentos ou novas técnicas.

A sim, eu deveria dizer que meu relatório foi o único da turma a tirar nota máxima, mas a modéstia me impede ;-).