8 erros de CSS que você não deve cometer

Inspirada pelo meu último post, e pelo artigo do Glen Stansberry resolvi aproveitar o momento para incentivar a avaliação não só da usabilidade de um site, mas também do CSS. Agradecendo a dica do Jamaica ;) segue a minha lista “adaptada” do que eu acho que ninguém deve fazer com o CSS do site:

1. Ignorar a compatibilidade de browser
A gente já falou um monte sobre crossbrowser aqui no Tidbits. Já falamos de truques para checar se o seu site está compátivel com todos os navegadores, ensinamos a utilizar os Global Resets para zerar as propriedades automaticamentes setadas pelos browsers, e o Danilo no post anterior falou sobre o CSS compatível sem uso de hacks. Com esse material todo, você não pode nem pensar em deixar o seu CSS “quebrar”…

2. Não validar o HTML e o CSS
Também no post sobre garantir a qualidade do seu site em todos os browsers, eu dei o link de ferramentas de validação. Passem por elas para garantir um código semântico!

3. Não utilizar classes para formatações que se repetem em vários elementos
Se você tem elementos que tem propriedades de formatação iguais, utilize apenas uma class para definir essas propriedades para todos elementos. Se você tem em uma página, por exemplo, todas as fotos e boxes de um site tem borda e flutuam a direita, você pode simplesmente criar uma class para definir esses atributos e invocá-la em todos os elementos que a utilizam. Se, por um acaso, você precisasse mudar a cor da borda, teria que fazer isso em todos os elementos, se não atribuir a propriedade uma única vez.

4. Utilizar nomeclaturas ruins para classes e ids
Isso pode ser uma questão aparentemente insignificante, mas se você precisar fazer qualquer alteração no CSS depois de um tempo, vai se arrepender amargamente de não ter gastado 2 segundos a mais do seu tempo para pensar em um nome mais descritivo do que #box_top ou .coluna_left. Rótulos orientados à posicionamento ou ao formato do conteúdo dificultam a manutenção e substituição desse CSS.

5. Usar CSS para tudo
Quando se abandonaram os layouts com tabelas as tabelas ficaram tão mal faladas que até quando se precisa de tabelas, as pessoas tentam fazê-las da maneira mais díficil. O conceito é “Tableless” e não “Tablenone” – com o perdão do trocadilho infeliz. Enfim, o HTML precisa ser semântico, e quando você exibe dados em uma tabela, nada mais semântico do que utilizar uma tabela mesmo, não?

6. Usar CSS inline
Um dos piores erros que se pode cometer, é não se utilizar o conceito de “layers” (camadas), na hora de desenvolver uma interface. Na época que eu aprendi a mexer com o Photoshop, eu levei um tempo até perceber o qual importante era esse conceito, de manter cada coisa, em um plano diferenciado, e como isso facilitava a aplicação, manutenção e alteração de qualquer erros. Esse conceito é igualmente aplicável para o CSS, mantenha ele sempre em um arquivo externo. Um dos principais problemas remete ao item 3 dessa lista: com o CSS inline, você precisaria atribuir os valores para cada elemento individualmente, o que se transformaria em um caos, quando precisasse fazer modificações no layout.

7. Carregar muitos arquivos de CSS
Dividir o conteúdo do CSS em arquivos separados, facilita a manutenção – até certo ponto. Se você divide demais o CSS, pode acabar dificultando não só a manutenção, pela dificuldade de encontrar o arquivo que exatamente está procurando, como também o carregamento da página. Arquivos de CSS são bem leves (em sua maioria), o problema é que muitas conexões com o servidor, que precisam ser feitas para cada arquivo de estilo que for baixado, normalmente demoram mais que o próprio download. Normalmente, eu e o Danilo utilizamos um arquivo default.css setando propriedades que replicam em todo o site, por exemplo o CSS do Header, Footer, Menu lateral, e coisas do tipo. E criamos para cada área, o arquivo nomedaarea.css com as propriedades específicas da página, ou por exemplo um conteudo.css com as propriedades de css de páginas geradas dinamicamente.

8. Não utilizar o Firebug para acelerar os ajustes do css
O Firebug é uma ferramenta mais importante que o editor de códigos. Se um layout está com problemas de posicionamento, ou você está com dificuldades de entender porque uma div está herdando um padding fantasma de algum lugar, o Firebug ajuda você identificar quais são as propriedades de css que estão influenciando aquele elemento. Além do CSS, ele também facilita visualizar a estrutura do HTML, e identificar possíveis erros.

Acho que seguindo essa lista, já é possível otimizar o tempo de desenvolvimento, e ao mesmo tempo fazer um CSS de melhor qualidade. E se alguém se lembrar de algum outro erro que também poderia ser evitado, fique a vontade para comentar, e construirmos nossa lista juntos :)

Como evitar que seu conteúdo seja copiado na web

Aqui no Tidbits, a gente já passou por isso algumas vezes, e qualquer um que tem blog ou site, e publica conteúdo original já pode ter passado também. Infelizmente, o número de pessoas interessadas em roubar conteúdo alheio, costuma ser maior do que o número de pessoas interessada em produzir material próprio.

Tidbits sendo copiado, no Copyscape

Mas existem algumas dicas que podem ajudar você a encontrar seu conteúdo espalhado por aí, um deles é o Copyscape, nele você cola a url do post ou da página que quer verificar, e ele faz um match dos sites que tem aquele mesmo conteúdo. Uma outra opção é utilizar a busca do Google, retirando trechos do seu site e buscando entre “aspas” para verificar se uma frase exatamente igual a sua está passeando por outros blogs/sites.

Tidbits copiado no Google
Mas não basta somente identificar as cópias. Também é preciso tomar alguma providência contra elas, e uma delas é utilizar os caminhos absolutos (com http://…) para todos os links de imagem do seu post. Isso porque se a pessoa é preguiçosa o bastante para sair copiando conteúdos alheios a torto e a direito, ela muito provavelmente vai copiar sua imagem também. Usando o caminho absoluto, você vai estar recebendo não só o link externo (que é super importante para o PageRank, como eu já publiquei aqui há um tempo atrás) como também vai indicar aos mecanismos de buscas que você é quem tem o conteúdo original – isso significa que na hora de ordenar esse conteúdo, o buscador identifica os conteúdos replicados e joga pra beeem longe dos primeiros resultados o conteúdo copiado, já que ele não será relevante para o usuário.

Outra solução bastante inteligente foi dada pelo site internacional Conversation Marketing em um post que traz 3 maneiras de se livrar do plágio. Uma delas, a mais inteligente que eu já vi por aí, é você colocar uma pequena imagem da mesma cor do background do seu site, em algum lugar onde ela possa ficar bem disfarçada.

Na hora que seu texto for copiado, é muito provavél que ela seja copiada também. Nesse caso, quando você descobrir que está sendo plagiando – e se a conversa não funcionar (o que acontece em 90% dos casos) – você pode se “vingar” do folgado e substituir a imagem que nem existia por um belo “outdoor” mostrando que aquele conteúdo ali não é desse fulano.