Ajuste fino no fazendoacontecer.net
FazendoAcontecer.net.
Produtividade pessoal com GTD? É no FazendoAcontecer.net.
Como mudar sua vida de forma inteligente? É no FazendoAcontecer.net.
Dicas e truques de internet e computação? É no FazendoAcontecer.net.
Lifehacking?
É no FazendoAcontecer.net.
Assine nosso feed RSS.
Esta noite gastei mais algumas horas no desenvolvimento do fazendoacontecer.net. A grande maioria delas em detalhes do layout e fontes, ajuste das cores e na barra lateral. Porém, também precisei otimizar o suporte ao Internet Explorer, principalmente a versão 6.
Eu já tinha decidido parar as atividades de layout e desenvolvimento do site e me concentrar no conteúdo. Mas ontem tomei um susto ao ver o site pela primeira vez no IE6 – como faço tudo em um Macbook Pro, só tinha testado Firefox e Safari. Vi que as imagens, todas em formato PNG com transparência 24-bit, apareciam com um fundo cinza e fora do posicionamento correto, o que acabava estragando todo o layout, inclusive dos textos.
Após buscar ajuda na internet, descobri que o IE6 não suporta transparência 24-bit em imagens PNG. Consegui uma dica através do fórum do webdeveloper.com. A solução sugerida é a inclusão de uma linha de código dentro da tag <head>, chamando um javascript que simula a transparência no IE6. O resultado não é perfeito, a barra de menu e a lateral continuam desorganizadas, mas há uma melhora significativa.
É possível resolver por completo esses problemas com um CSS específico para IE6, mas, após ver a estatística de uso de navegadores de março/09 mostrando que o IE6 só está sendo usado em 18% dos computadores no mundo, achei que não valia a pena o sacrifício. Até porque acredito que, em um blog de computação, este número deve ser ainda menor.
As outras mudanças, e que tomaram bem mais tempo, foram:
- inclusão de feeds de artigos e comentários na barra lateral;
- alteração da fonte padrão para Lucida Grande;
- ajuste no tamanho da fonte e altura da linha;
- alteração das cores de links para uniformizar a apresentação;
- alteração dos ícones de WordPress, RSS e voltar ao topo do rodapé;
- inclusão de ícones e links de validação XHTML 1.0 e CSS 2.1 no rodapé;
- inclusão de imagem da Creative Commons by-nc-sa no rodapé;
- inclusão do mapa do brasil no rodapé.
Vale a pena apontar alguns sites que me ajudaram, principalmente em relação a ícones e cores:
- Icons Etc – vários ícones grátis para web, cores e modelos diferentes, inclusive glassy;
- Wikimedia Commons – desenhos, ícones, fotos, organizados por várias categorias;
- Easy Calculation – Site de conversão e cálculos genéricos. Tem um excelente conversor RGB – HEX (web).
O tema usado base para este blog foi o Jules Joffrin. Já havia feito alterações consideráveis antes do lançamento, no dia 6 de abril, com a inclusão do logotipo, nome, posicionamento de elementos, dimensões e mudança do layout líquido, do tema original, para estático – esta última mudança, por sinal, bem trabalhosa. Com este ajuste fino, posso dizer que se tornou um tema praticamente novo.
Acredito que o resultado é um site claro, uniforme, com ótima legibilidade e validado para XHTML 1.0 Transitional e CSS 2.1. Na minha opinião, um lugar bonito e agradável.
CSS
