Artigos etiquetados com ‘CSS’

Extensões do firefox úteis para desenvolvedores web

29 de fevereiro de 2008

Firebug firefox extension FireShot Firefox add-on

Live HTTP Headers
serve para obter informações em tempo real de como o protocolo HTTP está trabalhando, suas requisições, o tipo de servidor remoto que o site está utilizando, quais os cookies estão sendo enviados pelo site, etc.
FireShot
é uma extensão que gosto bastante: ela permite que você insira rapidamente comentários e anotações em tudo o que é exibido no seu browser. É possível gerar um arquivo de saída em JPEG, PNG e BMP. É bastante útil quando, por exemplo você precisa fazer a análise de algum site para o cliente.
Screengrab!
permite salvar sites inteiros como imagem. É possível salvar apenas uma seleção.
Firebug
é um dos principais add-ons para quem trabalha com desenvolvimento web. Com ele é possível editar, depurar e monitorar, em tempo real, o CSS, HTML e o JavaScript de qualquer website.
YSlow
é uma extensão que foi desenvolvida pelo Yahoo para ser utilizada juntamente com o firebug. Ela analisa seu site e exibe uma grade com informações do desempenho do mesmo, indicando em uma lista de 13 elementos quais podem ser aprimorados. Ela é baseada em algumas regras que são descritas mais detalhadamente no site do Yahoo de ajuda aos desenvolvedores.
Web Developer
é um add-on que oferece vários recursos para desenvolvedores testarem seu site. É possível desabilitar Java, imagens, CSS Styles, cores do site, etc. Utilizei essa ferramenta para fazer um teste de acessibilidade no site do meu banco e o resultado foi bastante ruim.
Fangs
falando em acessibilidade, o fangs é um add-on que cria uma representação textual de um site, simulando como ele seria lido por um leitor de tela atual.
IETab
Essa extensão serve para embedar o Internet Explorer em uma aba do Firefox.
MeasureIt
Permite traçar uma régua no site para medir as dimensões de qualquer elemento.
Colorzilla
é basicamente uma ferramenta de eyedropper que permite capturar cores de um determinado site e colar em outro programa. A versão Colorzilla 2 beta permite coisas muito interessantes, como por exemplo criar uma paleta de cores a partir da análise do DOM element, localizar elementos no site a partir de uma cor dada, pesquisar cores específicas nas regras CSS, etc.

Seja sensato ao usar image replacement

22 de fevereiro de 2008

Esta semana, aconteceu uma discussão na lista webstandards-br em relação ao uso de técnicas de image replacement (sim, é uma discussão bastante antiga). Algumas pessoas reclamaram que tiveram sites penalizados no Google por usarem a técnica.

Na central Google de ajuda do webmaster está definida a seguinte regra:

Texto e links ocultos

Ocultar texto e links pode fazer parecer que seu site não tem credibilidade, já que apresenta informações distintas para as ferramentas de pesquisa e para os visitantes. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo:

  • Uso de texto com fonte branca em fundo branco.
  • Inclusão de texto atrás de imagens.
  • Uso de CSS para ocultar texto
  • Configuração do tamanho da fonte para zero

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não vai mais aparecer nas páginas de resultados de pesquisa.

Por outro lado, Matt Cutts, engenheiro de software que trabalha no Google, publicou um post em 2005 no site threadwatch.org fazendo alguns alertas em relação ao uso do CSS para esconder texto:

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have a logo but also have text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.

Como sempre, quando a pergunta se relaciona ao algoritmo do Google a resposta dos engenheiros é um pouco dúbia. Teoricamente se você usa image replacement com responsabilidade não precisa se preocupar. Em princípio, o problema é utilizar textos muito longos ou tentar usar a técnica para obter vantagens com o web crawler do Google.