PNG no IE 6 – Entenda como o problema é resolvido

ATENÇÃO: Para verificar a renderização do png no IE 6 use o próprio Internet Explorer 6 e não o Multiple IE (que por sinal não recomendo pra mais ninguém). Se não tiver acesso a um computador com esse browser é possível testar através do uso de uma máquina virtual.

O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior número de cores e na alta compressão possível. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, não dá suporte nativo à transparência do PNG, mas é possível contornar esse problema com uma propriedade CSS.

Não vou publicar nenhuma solução aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente você deve sumir com a imagem em si e exibi-la somente com a propriedade filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');.

Você pode fazer isso com javascript, com comentários condicionais, com a propriedade CSS behavior ou com uma combinação de todas elas. Aqui no Melancia a logo do cabeçalho é um png e para que ela ficasse do jeito que está usei uma combinação de comentários condicionais e CSS. A imagem está dentro de um span que só existe nos IE < 7, por causa dos comentários condicionais – veja o código-fonte para entender melhor – e nesses navegadores (argh!) a imagem de dentro não é renderizada (display:none) e o span assume sua função.

Para uma solução mais genérica o uso do javascript é mais recomendado, até porque não afeta tanto a acessibilidade. E quer saber do que mais: está mais do que na hora do IE6 começar a sumir.

Para uma solução copy/paste esse site parece muito bom. A do behavior desse site é bem legal também.

Agradeço ao meu grande amigo/irmão Israel Teixeira pela sugestão de tema!

Comece a pensar em HTML

Sabe Matrix? Pois é… Comece a se conformar que olhar para códigos e ver documentos é possível.

Páginas em XHTML (o X antes é só pra dizer que é extensível, não tem nada a ver com os X-men) são os códigos e o que você vê no navegador é o resultado (o que você vê no navegador na verdade é o resultado do seu HTML somado com seu CSS, mas explico depois). O grande problema aparece quando se percebe que para o mesmo resultado existe uma infinidade de códigos possíveis. Existem muitos motivos para se fazer HTML da melhor forma possível indo de profissionalismo e cuidado à otimização para busca.

Para a criação de um bom HTML é preciso um pouco de prática e senso crítico. Para quem nunca viu, o processo normalmente é assim: o webdesigner cria um layout (no Photoshop, no Illustrator ou outro parecido) e você cria o HTML e o CSS (essa função também é conhecida como HTMLer).

Você então olha pra cara do layout e analisa cada elemento buscando identificar qual é o significado daquela parte no todo. Por exemplo o layout de uma página interna de um site: Existe um topo, um menu lateral, o conteúdo e um rodapé.

Se essas partes estão claramente divididas cada uma delas provavelmente será uma div (o provavelmente é porque existem excessões), ou seja, uma divisão da página. Se no topo tem um título provavelmente ele será o <h1> da página, ou seja, o primeiro título, o título de maior importancia. Se ao lado existe um slogan está aí um candidato a <h2>.

O menu lateral provavelmente é uma lista de links, então tasque uma <ul> e pra cada item uma <li>. Tente entender cada tag que você usar para facilitar a memorização – todo nome de tag tem um porquê. A <ul> é ul por ser uma lista desordenada – unordered list – e a <li> por ser um item da lista – list item.

No conteúdo pode ter uma penca de coisas, mas possivelmente será só uma penca de parágrafos então vamos de <p> pra eles.

No rodapé mora um perigo: se for uma lista de itens (tipo “Fale Conosco”, “Mapa do Site”, etc) também vá de <ul>. Mesmo tendo seus itens um do lado do outro continua sendo uma lista.

Quando terminar abra seu HTML e veja se realmente o que está sendo mostrado pelo seu navegador é o que o layout está transmitindo. Se estiver de acordo com o planejado chegou a hora de estilizar, se não volte e melhore seu código.

Um código bem escrito ajuda não só a diminuir o tamanho do arquivo como também a ser entendido melhor pelos buscadores e leitores de tela pra cegos (sim, cegos usam internet).

Para ver se seu código está no mínimo bem formado utilize os validadores da W3C (existe extensão do firefox pra isso), mas lembre-se: nem sempre código validado pela W3C é semântico, ou seja, tem no seu conteúdo o significado desejado.

Antes que surja alguma dúvida: lista não é só pra links não tá?

Outra coisa importante: esqueça a parte estética, isto é, não veja cores, posicionamentos, alinhamentos, negritos, itálicos, nada disso entra no seu HTML. Nele entra só o que cada coisa é. Seu HTML só vai parecer com o layout proposto quando começar a parte de CSS, mas isso fica para um próximo post.

Abraços e comentem!

Aprendendo XHTML e CSS – Um começo

Depois de tomar uma surra do TinyMCE no drupal 6 (faltava um patch para que a opção de desabilitar o rich-text aparecesse) estou postando de novo.

Um dos objetivos da criação do blog é poder passar dicas que gostaria de ter recebido no começo da minha vida de desenvolvedor web. Pra começar nessa carreira você precisa aprender HTML (direito, sem tabelas – só onde é necessário), depois CSS, Javascript (que não tem nada a ver com Java, por favor…), e alguma(s) linguagens de servidor (PHP, ASP, Java, etc).

No começo nada é fácil, você esbarra em expressões e conceitos que nunca viu e que logo de cara percebe que são importantes (SEO ou otimização para busca, validações da W3C, por exemplo) e vem aquela sensação de estar nadando num oceano, mas assim é a vida.

É possível ganhar dinheiro e se destacar na internet fazendo bem as coisas simples que as pessoas fazem de qualquer maneira e, por isso e para isso, é bom ter uma base de conhecimento bem sólida. Conhecimentos de (X)HTML e CSS nunca serão completos, sempre vem alguma coisa nova, uma combinação de coisas que dão um resultado que você precise ou ainda alguma maneira de fazer as coisas funcionarem no IE (acostume-se com isso: as coisas nem sempre funcionam bem no Internet Explorer – principalmente no 6).

Pra começar indico aqui um exercício simples proposto pela Visie nos seus cursos (foi postado no Tableless).

Ah! Uma observação: nos comentários o pessoal fez uma confusão sobre pagar ou não pagar para ver o exercício. É só se cadastrar (grátis) e acessar.

Bons estudos!