Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘tecnicascss’

Image-Replacement x Imagens

Este assunto é muito abrangente e divertido de ser debatido.
Portanto, se você discordar deste texto, quero que lembre que é minha opinião… claro, sempre podemos mudar de idéia. :-D

Para não viajarmos muito, vamos pegar como pauta deste texto, o ponto que discutimos na “Lições Sobre Semântica #3″.
O ponto era fazer títulos com imagens ou image-replacement?

Bem, felizmente temos uma base para nos guiar… O código deve ficar o mais semântico possível.
Se o código deve ser semântico, já sabemos que as tags Hn que são usadas para definir títulos não podem ser descartadas, então elas devem continuar.

Ótimo, sabendo disso, vamos analisar as opções:

  1. Colocoar a imagem dentro de uma tag Hn.
  2. Fazer image-replacement sem tag span.

Eu poderia colocar como opção a técnica de image-replacement com tag span. Acontece que a tag span, suja nosso código, e queremos ter um código descomplicado.

Colocando a imagem dentro de uma tag Hn

A solução seria:
<h1> <img src=”imagem.jpg” alt=”Texto” /> </h1>

Hmm… Essa solução é bastante atraente…
Se o usuário desabilitar as imagens, ou se por ventura a imagem aparecer quebrada, o texto alternativo (alt) irá aparecer no lugar da imagem.
Os browsers mais modernos como Firefox tratam esse texto como um texto normal, dando até para você selecionar. E esse texto pode ficar com o estilo que você definiu no CSS para a tag de título.

Fazer image-replacement

A solução seria:
<h1> Texto </h1>

E assim, sumir com o texto pelo css e colocar a imagem como background.

Essa solução é muito, muito atraente…
Seu código não fica sujo com tags span ou tags img. Se a pessoa entra no site com algum tipo de browser baseado em texto, ela não terá problemas… Existe um porém.
Se o usuário desabilitar apenas as imagens, o texto não aparece.

Mas, agora vem a vantagem que fará você decidir o que fazer.

Se você optar por Image-Replacement, você terá uma flexibilidade que se colocando apenas imagens, você não teria.
Imagine que você tenha um site grande, e que todos os títulos tem que usar uma fonte maluca que o designer escolheu… Fatalmente estes títulos terão que ser imagem.

Um certo dia, o cliente se encheu da fonte maluca e decidiu que a fonte dos títulos devem mudar para Verdana.
Se você tivesse colocado as imagens direto no código, você teria que procurar cada uma das imagens e mudar para texto.
Se você fez com image-replacement, bastava desabilitar a image do background e fazer o texto aparecer… Muito, mas muito mais fácil.

Agora é com você. Essa é a principal diferença.
Os robos de busca, indexam os texto alternativos das imagens bem como o texto do image-replacement, então, não há problemas com isso.

Como disse, o assunto é bastante abrangente. E não é só este “problema” que existe. Mas o importante é analisar o caso, e aplicar a melhor solução para o caso.

10 Comentários

Centralizando um objeto na Horizontal e Vertical com CSS

Objeto no centro da tela

Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!

Colocando a imagem:

Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.

<img src=”imagem.gif” id=”centro” />

Veja o html deste passo.

Definindo as dimensões do objeto:

Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).

#centro {
width:100px;
height:100px;
}

Veja o html deste passo.

Alinhando:

Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%;) e 50% de distância do lado esquerdo do documento (left:50%;).
O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
}

Veja o html deste passo.

O grande final:

Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

Veja o html final.

7 Comentários

Não troque todas as suas imagens por background!

Às vezes é bom repetir os fatos básicos, principalmente porque tem sempre gente chegando e começando a aprender.

Uma dúvida muito comum, que eu vejo se repetir há alguns anos, é onde usar e onde não usar imagens no background via CSS. Para quem está chegando agora, a questão básica é que existem duas maneiras de se fazer uma imagem aparecer na tela. Cada uma delas tem suas vantagens e desvantagens e é melhor usada para um fim específico. Mas muita gente usa apenas um método ou o outro.

Uma delas é inserir uma tag HTML:

<img src="seta.gif" alt="Prosseguir" />

A outra é inserir essa imagem como background de uma tag qualquer através do CSS:

a.prosseguir {
background: white url(seta.gif) top left no-repeat;
}

As diferenças entre eles, embora não apareçam à primeira olhada no site, são substanciais. Experimente, por exemplo, desligar o CSS daqui do Tableless. Você vai ver que todas as imagens que compôem o layout, incluindo logotipo e as sombras laterais, vão desaparecer. Vão sobrar apenas umas imagenzinhas do Feedburner e da barra lateral direita.

Quem trabalha com tabelas geralmente usa apenas o primeiro método. Infelizmente muita gente aprendendo a construir layouts Tableless com CSS, ao aprender o segundo método, tem abandonado completamente o uso da tag img. É um exagero comum entre os novatos, assim como abandonar completamente o uso da tag table.

Por que o Diego escolheu algumas imagens para ir no meio do código HTML e outras para inserir como background CSS? A regra é simples, como todo o resto na dobradinha XHTML+CSS, imagens que fazem parte de seu conteúdo vão no HTML, imagens que são apenas elementos de layout vão no CSS.

Veja, por exemplo, este meu post sobre o Performancing. Há, no topo e no rodapé, dois gradientes. Experimente desligar o CSS. Você vai ver que algumas imagens foram mantidas. Todas elas fazem parte do conteúdo da página:

Há outra maneira, que talvez você ache mais simples, para explicar isso. Imagine-se fazendo o redesign do site. Todas as imagens que você deve manter exatamente como estão são conteúdo. Todas as que você vai querer mudar são layout. Veja isso no exemplo acima. Você não muda um banner, a foto do autor do site ou o screenshot de um programa porque fez um redesign em seu site. Mas, claro, bordas, sombras, fundos, chanfros, linhas separadoras, logotipos, tudo isso pode mudar.

Uma última coisa em que você pode pensar é na indexação pelo Google Bot. Ao fazer uma pesquisa de imagens, você vai querer que as pessoas encontrem em seu site um screenshot de programa, a foto de uma celebridade, um diagrama de explicação de uma teoria ou uma foto de um animal. Mas as imagens decorativas só vão atrapalhar.

Há ainda um terceiro caso que pode confundí-lo, que é o image replacement. Mas sobre isso o Diego já escreveu bastante.

24 Comentários
Voltar para o topo

Outros posts

Aprenda

Histórico