Projetando a nova HP da SBD

Programar websites usando web standards é muito interessante. Você percebe, à medida em que o projeto toma corpo, que todas essas regras e semânticas fazem sentido, apesar de parecerem imposições, na verdade são soluções. O velho estilo de desenhar páginas no Fireworks ou no Photoshop, dividir a imagem em fatias e mandar o programa gerar uma enorme tabela é muito fácil, cômodo e impressiona qualquer cliente, mas é uma verdadeira afronta aos web standards.

Desde que eu passei a trabalhar exclusivamente com web standards, percebi que minha profissão se tornaria mais difícil. Não pelas razões colocadas por alguns colegas meus, que, para justificar a inércia em se atualizarem, alegam que os web standards limitam a criatividade e que todos os sites que seguem esses padrões são idênticos. Tudo conversa fiada. Quem conhece o site CSS Zen Garden sabe que as possibilidades gráficas são infinitas.

A dificuldade maior e verdadeira dos web standards é que… eles não são standards. Pelo menos ainda não. Enquanto houver um mísero micro que rode um odioso software chamado Internet Explorer 6, os web standards serão uma utopia. A versão 7 trouxe avanços significativos: o IE7 está quase tão bom quanto o Firefox, principalmente no que tange à compatibilidade com os padrões web.

Enfim, vamos ao caso – “face lifting” da home page da SBD. Foi-me solicitada uma reforma visual, e eu aproveitei para também reformular a codificação HTML, para resolver alguns problemas que muito me incomodavam: 1) o conteúdo da página era uma das ultimas coisas a aparecer no código HTML, debaixo de centenas de linhas de menus, scripts e outros badulaques. 2) o uso do “float=left” e “float=right” para alinhar as colunas dos menus e das ferramentas laterais gera erros estranhos – adivinha aonde? – em algumas raras versões do Internet Explorer 6. Aparecem espaços enormes entre o título e o texto.

Para resolver os dois problemas de uma só vez, a melhor solução é posicionar as colunas laterais e a do meio usando “position=absolute” para definir exatamente onde entra cada coluna. Isso trouxe à tona novas idiossincrasias do IE6, que eu demorei algum tempo para contornar.

Podemos ver aqui uma página com a estrutura da home page da SBD, sem o conteúdo. A largura da coluna amarela, dentro do miolo da página, teve que ser definida em pixels, porque o IE6 calcula errado larguras definidas em porcentagens e estraga todo o layout.

Em breve essa estrutura será aplicada em todo o site da SBD.