Pra começar, uma das mais básicas: borda

Não vou colocar aqui simplesmente como aplicar bordas em imagens, isso todo mundo já sabe. O que pouca gente sabe é que também é possível aplicar padding e background em imagens via CSS. A princípio, pode parecer estranho aplicar fundo em imagens, mas isso pode ser usado de maneira bastante versátil, veja os exemplos abaixo:

Como funciona?

Simples: nestes exemplos as bordas em si são apenas a última parte do ‘contorno’ das imagens, são os traços mais finos (sólido na primeira e tracejado na segunda). O que vemos no espaço entre as bordas e as imagens é o background e o tamanho deste espaço é determinado pelo valor do padding. Veja o esquema:

Como disse, nada demais. Agora o código CSS:
.efeito1 { border:1px solid #ccc; background:#fff; padding:12px; }
.efeito2 { border:4px dashed #97915f; background:#e1dc69; padding:10px; }
.efeito3 { border:1px dotted #d5d5cb; background:url(bg_stripes.png); padding:12px; }
.efeito4 { border:1px solid #d5d5cb; background:url(bg_pattern.gif); padding:12px; }
Dessa forma podemos combinar todas as variações de borda (cores, sólida, tracejada, pontilhada, etc) com o background, no qual podemos usar cores, como nos dois primeiros exemplos, ou imagens, como nos dois últimos.

Faça o download dos arquivos.

Estas são amostras simples do que é possível fazer, lembre-se que usamos apenas 3 propriedades. Podemos combiná-las com muitas outras para alcançar resultados ainda melhores, no próximo post trarei mais idéias.

Primeiro: o Firefox também tem seus bugs, a própria Mozilla Foundation mantém uma página exclusivamente dedicada à eles, a Bugzilla. Claro, é verdade que se o erro for apenas no Firefox, é possível simplesmente corrigir o CSS para ele e usar um hack do IE para que as coisas fiquem perfeitas nos dois browsers.
Porém, a questão é: O Firefox 3 interpreta algumas propriedades diferentemente do Firefox 2, o que hora ou outra pode causar problemas. E nesses casos é preciso alterar o CSS para apenas uma das versões.

Segundo: Em alguns casos é necessária uma correção urgente, que não demande tempo para vários testes, alterações no HTM ou várias linhas de CSS. Se o seu site tem milhares de acessos por hora, o ideal é corrigir primeiro, refinar depois.

Seguem então algumas soluções que venho usando:

CSS Hack apenas para Firefox 2

Se o seu site está apresentando erro apenas no Firefox 2, agradeça. É o cenário mais simples de resolver, basta usar o seguinte hack:
#meudiv { background:red; } /* todos os navegadores */
#meudiv[id=meuDiv] { background:green; }/* só Firefox 2 */
Como funciona: usamos o seletor de atributos entre chaves para selecionar todos os elementos que tenham id = ‘meuDiv’. Porém perceba que o ‘D’ está maiúsculo. Só o Firefox 2 é case-insensitive, ignorando letras maiúsculas e minúsculas. Ou seja, para o Firefox 2 meudiv é igual a meuDiv, para todos os outros navegadores não.

CSS Hack para Firefox 3

O problema só aparece no Firefox 3? Bem, aqui as coisas complicam um pouco. Isso porque todos os hacks específicos para esta versão não são totalmente confiáveis em todas as plataformas [windows, mac, linux]. O único hack para FF3 que se comporta de maneira constante em todos os sistemas tem um porém: é reconhecido também pelo IE7:
#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */
Então é preciso, ao final, adicionar uma linha para restabelecer o valor para o IE7:
#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */
#meudiv { *background:red; } /* Restabelece valor para o IE7 */

E, só pra relembrar: ‘Hack’ para qualquer Firefox

Se o problema está aparecendo nas duas versões do Firefox, a solução mais simples é corrigir o CSS focando este erro e, caso o erro venha a ocorrer no IE após a correção, utilizar hacks para o navegador da Microsoft:
background-color:red; /* Corrige o problema no FF */
*background-color:blue; /* Retorna o valor para IE */

Se tiver dúvida dê uma olhada aqui: CSS Hacks - IE6, IE7, Firefox

Enfm, mais hacks… Eu gostaria de não precisar deles, gostaria de escrever meu CSS 100% válido e não ter que redeclarar margin, padding, float duas, três vezes no mesmo código por causa de um ou outro navegador. Mas infelizmente isso não é possível..

A Sprint, empresa de telefonia mobile, criou uma peça viral interessante para divulgar seu serviço broadband. Para convencer os consumidores a comprar seu produto, apoiando-se no bom e velho argumento de que o mundo não pára e de que hoje em dia é cada vez mais necessário estar sempre conectado [blá, blá, ..], criaram um hotsite que mostra informações em tempo real sobre tudo o que está acontecendo no mundo neste exato momento.

Como se fosse um painel, o site mostra informações como: quantos emails estão sendo mandados, qual a população mundial, quantas chamadas estão sendo feitas para o 911, qual o vídeo está sendo mais assistido no youtube e até o volume de petróleo consumido, além de imagens de câmeras espalhadas pelo mundo. A idéia não é das mais novas, assim como os dados obviamente são projeções baseadas em estatísticas, mas a execução foi muito bem sucedida.

Fico feliz em contar que o Top Rated foi selecionado hoje pelo CSSclip para fazer parte da sua galeria. O CSSclip é um site que agrupa diversos layouts baseados em… CSS é claro, para servir de inspiração a outros designers. Ao menos é o que eles dizem.
Então faça o favor de dar um pulo até lá e votar agora mesmo neste humilde blog, de preferência colocando 5 estrelas. :)

No site Photofunia você faz o upload de uma foto sua [ou daquele seu amigo :)] e pode aplicá-la em várias outras fotos, bem divertido. Não precisa de cadastro e dá pra salvar a foto no seu computador.

Ótima matéria do Gizmodo relacionando em uma linha do tempo todos os bonecos Lego já fabricados desde 1978. Cada um dos modelos tem uma foto ampliada e é classificado por ano de produção.

Meta name=”robots” content=”noindex, nofollow”

O que significa: Com os valores “noindex” e “nofollow” indica aos robôs dos sites de busca (Google, Msn, etc) que o conteúdo do site não deve ser indexado e os os seus links não devem ser ’seguidos’. Ou seja, as páginas do site não serão cadastradas pelos mecanismos de busca e não irão aparecer no resultado de nenhuma pesquisa. Péssimo. Se seu site tem essa meta tag configurada desta maneira retire-a agora mesmo, a menos é claro que, por algum motivo, você queira continuar ‘invisível’.
O correto: <meta name=”robots” content=”follow, all” />

Meta name=”description” content=”palavra-chave, chave, palavra, palavra site, palavra-chave grátis, muita palavra-chave”

O que significa: é a descrição da sua página, e dependendo da busca pode aparecer abaixo do nome do site na lista de resultados de busca. Se estiver abarrotada de palavras chave e termos repetidos é o mesmo que dizer: “olhe só! esta página é spam, procure conteúdo relevante em outro lugar!”.
O correto: coloque uma descrição sucinta e que realmente conte ao usuário sobre o que a página trata, algo como: “Todas as características da palavra-chave com análises e preços”

Meta name=”keywords” content=”palavra-chave, chave, palavra, palavra site, palavra-chave grátis, muita palavra-chave”

O que significa: São as palavras-chave da página. Mais uma vez, se estiver cheia de termos repetidos será o mesmo que dizer ao buscador “Olhe só! Isso aqui provavelmente é spam”.
O correto: Ao contrário do que muitos pensam, a meta tag keywords já não é tão relevante para o ranking do Google. O mais importante é usar palavras-chave que também apareçam no conteúdo da página, esse sim essencial para um bom posicionamento.

Muitas meta tags

Outro engano bastante comum é pensar que o header da página deve ter todas as meta tags possíveis e imagináveis. Na verdade, hoje em dia, o Google e os outros buscadores já não dão tanta importância pra isso, o conteúdo da página é o que realmente importa (além dos links externos, código bem estruturado, etc..). Muitas meta tags acabam deixando seu código sujo e dificulta o acesso ao corpo da página.

<title>Super site sobre tudo o que você quer saber sobre a palavra-chave e outras dicas e truques para ganhar mais dinheiro e gastar menos</title>

Toda a relevância da sua palavra-chave será diluída entre cada um dos termos do título, será muito mais difícil encontrá-la em uma pesquisa. Mantenha o título das páginas curto, simples e real.

Estas são informações bastante básicas sobre como otimizar sua página para os mecanismos de busca, mas, mesmo que pareçam simplistas, ignorá-las pode dificultar bastante a busca por novos visitantes.