Olá Pessoal,
Antes de começar: o Projetista Digital está no Twitter! A partir de agora você pode me seguir e acessar diariamente os links de artigos, blogs, sites e tudo mais relacionado a nossa área, que eu leio e encontro na web. Achei um tutorial legal, um site maneiro, qualquer coisa interessante: vou postar o link no Twitter. Então me siga no Twitter, e receba atualizações diárias sobre novidades de Design e Desenvolvimento Web. Agora voltamos com a programação normal:
O tutorial de hoje refere-se ao uso de imagens. Incluir imagens em sites é um processo simples, sem maiores complicações. A possibilidade de inserir imagens e gráficos, ajudou, e muito, a enriquecer a experiência dos internautas. Podemos criar layouts sofisticados, além de inserir fotos, gráficos e qualquer outro tipo de informação. O bom uso de imagens é uma ferramenta essencial para o sucesso de um site. As imagens influenciam na acessibilidade, usabilidade, peso e rankeamento de um site nos buscadores: em resumo, o mal uso de imagens pode comprometer seu site em várias áreas.
Formatos de imagens
Todos vocês estão acostumados com imagens: são as fotos de aniversário, natal, álbuns do Orkut, a logomarca do Google… O tempo todo usamos e vemos imagens, seja no nosso computador, seja na web. Todo arquivo possui uma extensão (arquivo HTML possuem extensão .html, Word é .doc, Excel é .xls, PowerPoint é .ppt etc.), e imagens possuem várias extensões, sendo que na web são usadas apenas três:
- GIF – Graphics Interchange Format
- JPG / JPEG – Joint Photographic Experts Group
- PNG – Portable Network Graphics
Qual a diferença entre elas? GIF é um formato que admite apenas 256 cores, sendo usado em desenhos e gráficos; JPG / JPEG admite milhões de cores, é ideal para fotografias; GIF admite fundo transparente; JPG / JPEG NÃO admite fundo transparente; GIF possui melhor compressão para imagens simples; JPG / JPEG possui melhor compressão para imagens complexas; quanto maior a compressão da imagem, menor o tamanho do arquivo, e mais rápido é o carregamento da imagem na página. E como todos sabem: páginas que demoram a carregar são um pé no saco…
E o formato PNG? Esse é um formato relativamente novo, que reúne o melhor dos dois mundos: alta compressão, fundo transparente e milhões de cores para detalhamento.
O que preciso para conseguir imagens?
O XHTML apenas insere as imagens na página: criá-las, editá-las e tratá-las é por conta de ferramentas específicas (editores de imagens). As ferramentas mais usadas: Adobe Fireworks, Adobe Photoshop e Gimp. O Gimp é uma ferramenta gratuita, enquanto as outras duas são pagas. Se você precisar usar um editor de imagens, e não tem dinheiro para comprar um software pago, use o Gimp ou Infran View (uma ferramenta simples e gratuita).
Você pode também baixar imagens diretamente da internet (lembre-se que existem direitos autorais sobre imagens, apesar de não ser o escopo desse tutorial debater o tema), basta clicar com o botão direito do mouse sobre a imagem, e clicar em “Salvar Imagem Como” (o texto varia de navegador para navegador, mas você conseguirá identificar a opção).
Inserindo imagens em uma página web
Para inserir imagens em um documento XHTML você usará a tag <img />. Essa tag possui um atributo chamado SRC, onde iremos declarar o caminho da imagem que desejamos inserir na página. Veja a tag <img /> em funcionamento:
1 | <img src="imagem.jpg" /> |
Resultado:
Simples, né? Não tem segredo: basta colocar o caminho correto da imagem e pronto. Percebam que a tag <img /> é um elemento vazio, ou seja, não possui tag de fechamento </img >; para fechar a tag de imagem usamos a barra (/) na própria tag de abertura: <img />.
Podemos também usar imagens hospedadas em outros sites, como por exemplo:
1 | <img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /> |
Resultado:
Imagens também podem servir de links. Veja como:
1 | <a href="http://www.google.com.br" target="_blank"><img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /></a> |
Resultado:
Atributos alt e title
Nosso site pode ser acessado por vários perfis de usuários: internautas com deficiência visual, sem deficiências, com dificuldades motoras, acessando a partir de celulares e dispositivos móveis, spiders, crawlers e outros robôs usados por buscadores para indexar sites etc. É importante desenvolver sites ACESSÍVEIS, ou seja, que permitam o acesso a qualquer perfil de usuário. Acessibilidade é um tópico à parte, e terá seu próprio minicurso. Mas desde agora podemos aprender a escrever um código XHTML visando a Acessibilidade. E em imagens temos dois atributos visando esse fim: alternativas para usuários que não podem visualizar imagens.
Se por algum motivo o usuário não visualizar imagem (caminho errado, dificuldade visual, configuração do navegador, ser um robô de busca etc.), podemos apresentar um texto alternativo. Esse texto alternativo é uma rápida descrição da imagem, inserida dentro da tag ALT. Veja o código abaixo:
1 2 | <!-- Eu errei o nome da imagem propositalmente --> <img src="http://www.google.com.br/intl/pt-BR_br/images/logoooooo.gif" alt="logomarca do Google - texto alternativo" /> |
Resultado:
Repararam que o texto do ALT apareceu no lugar da imagem? Legal, né? Além de inserir uma descrição alternativa, eu posso inserir uma rápida descrição da imagem, a ser renderizada pelos navegadores sob a forma de uma caixinha amarela, quando passamos o mouse por cima de uma imagem. Essa descrição também será usada em leitores de tela, usados por usuários com deficiência visual; e robôs de buscadores. Veja como funciona:
1 | <img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" alt="Logo do Google" title="Logo do Google" /> |
Resultado:
Pessoal, por hoje é só! No próximo tutorial falaremos sobre “caminhos de arquivos”, um assunto importante para complementar o uso de links e imagens (atributos HREF e SRC). Não percam!
Abraços,
Diego.