Foram necessários somente poucos anos para que SEO se tornasse um negócio sério, com empresas especializadas no assunto e “agências de otimização” surgissem, com o mesmo objetivo de antigos mercados (além de ganhar dinheiro, claro): ser o melhor do ramo. Mas, nesse meio tempo, alguns mitos sobre SEO surgiram e foram devidamente criados por aqueles que se interessam em angariar a fatia maior do mercado e erroneamente propagados por aqueles que não se interessam em estudar/testar.

Evidentemente quem não trabalha especificamente na área, às vezes comete/propaga enganos sobre SEO por descuido ou falta de conhecimento; e é por esse motivo que devemos sempre ter critério na hora de escolher nossas fontes de estudo e dar todo o crédito aos diversos “gurus” que se apresentam (e se autointitulam assim).

Então, antes de gastar tempo e dinheiro em uma campanha SEM/SEO, veja quais são os 6 maiores mitos sobre SEO e aprenda os verdadeiros fatos sobre eles.

Mito de SEO 1: todas metatags tem igual importância

Algumas meta tags são úteis, mas outras podem não ser tão relevantes assim. Atualmente, os motores de busca estão mais preocupados com o conteúdo do site do que as metatags que foram escolhidas.

Mito de SEO 2: SEO é caro

SEO é como qualquer coisa: há SEO que é caro e SEO baratinho. Você só tem que saber o que procurar e quais as melhores técnicas de SEO que irão beneficiá-lo.

SEO orgânico é menos dispendioso e muitos do que é feito não tem custos. Uma campanha PPC ou banner publicitário pode ser mais caro porque você paga por cliques ou impressões. Com o SEO, os cliques não custam nada (para você).

Mito de SEO 3: Sites devem ser submetidos a mecanismos de busca semanal ou mensalmente

Você deve submeter seu site para um mecanismo de busca somente uma vez. Automaticamente o bot daquele mecanismo de busca irá voltar. Para acelerar o processo de ter seu site indexado, faça link(s) para um site de alto tráfego ou alto PageRank. Suas URLs serão encontrada pelos motores de busca e serão indexados automaticamente.

Mito de SEO 4: Fornecer conteúdo basta para ficar bem posicionado

Evite esse mito a todo custo! Você deve fornecer conteúdo otimizado de qualidade de SEO off site com a densidade de palavras-chave adequada. Ter de backlinks para o seu site é fundamental para a boa classificação no Google e outros mecanismos de busca.

Mito de SEO 5: Palavras-chave e termos competitivos não são recomendados

É imperativo que você utilize as palavras-chave que todo mundo está usando (e, consequentemente, as pessoas estão procurando), já que as pessoas procuram seu tema ou produto digitando palavras-chave. É recomendável que você use uma variedade alta, média e baixa de frases e palavras-chave competitivas.

Mito de SEO 6: SEO orgânico não é tão eficaz quanto PPC

Enquanto isso poderia realmente ser uma afirmação verdadeira a curto prazo, a longo prazo isso não é verdade. Isso acontece porque as pessoas tendem a confiar mais nas informações encontradas em buscas orgânicas e não muito para as informações pagas em uma base PPC.

Agora que está ciente dos 6 maiores mitos de SEO, você está melhor preparado para criar uma campanha de SEM/SEO que realmente irá beneficiar você!

jQuery é um framework javascript que está se tornando se tornou incrivelmente popular. É rápido, fácil de usar e criar plugins personalizados e componentes são feitos rapidamente. Atualmente, todo mundo é um desenvolvedor jQuery e o repositório de plugins está praticamente explodindo com a adições praticamente diárias.

À luz de tudo isto, aqui estão 8 excelentes dicas para fazer códigos melhores com jQuery e se tornar um melhor programador em jQuery que você deve considerar antes de começar seu próximo projeto.

Mantenha a acessibilidade através da degradação

Com jQuery ser popular é assim, mais e mais pessoas estão escrevendo plugins e criando pacotes de componentes que estão prontos para uso. Mas alguns desenvolvedores tem em mente que projetos online também devem funcionar sem javascript ativado. Essa é uma das principais razões para fazer javascript não obstrusivo. Como exemplo, vejam:

CSS

.animate {
color:red;
display:none
}

jQuery

$('.animate').fadeIn();

Usaria jQuery para dar um fadeIn() com a classe “animate”. Mas se o javascript estiver desativado, o navegador ainda analisa a CSS e, naturalmente, os elementos nunca serão mostrados!

Ao invés disso, tenha sempre o hábito de separar “javascript CSS” e “CSS puro”. Tente isto:

CSS

.animate {
color:red
}
 
.animate_js {
display:none
}

jQuery

$('.animate').addClass('animate_js').fadeIn();

Dessa forma, você pode estilizar os elementos para cada situação e manter a degradação de uma forma sensata. Como sempre, sem testar seu código javascript ativado antes da implementação.

Mover efeitos visuais para a camada de apresentação

Quando for escrever javascript, mantenha sempre o foco nos comportamentos. jQuery não é CSS, então esteja atento as diferenças fundamentais entre a apresentação e comportamento.

Por exemplo, quase sempre é uma boa ideia adicionar classes ao invés de trabalhar com somente propriedades CSS. Evite fades e “glamour” nas funções. Guarde os efeitos para uma fantástica apresentação, mas cuidado no uso em funções javascript - nem todos compartilham seu gosto visual!

Usar Firebug e console.log

Firebug é seu amigo quando está desenvolvendo com jQuery – na verdade, no desenvolvimento web, geral. E assim é o comando console.log, que graciosamente substitui o alert() chato.

Basta digitar console.log() para debugar sempre que você precisar no seu código. Mas lembre-se de remover essas instruções antes da produção, uma vez que muitos navegadores terão conflitos, incluindo o IE (claro!).

E, para outras funcionalidades do Firebug, confira a Console API.

Definir padrões sensatos e utilizar uma quantidade limitada de parâmetros

Quando você é mordido pelo inseto jQuery e começa a criar plugins, frequentemente tenta maximizar o número de parâmetros para tornar o desenvolvimento o mais flexível possível.

Isso tudo é muito nobre, mas que fique claro e que tente não confundir o desenvolvedor web com parâmetros minúsculos que quase não fazem diferença (como fades, velocidades, etc.). Ao invés disso, passe paràmetro de objeto e defina padrões sensíveis. Seu código não precisa fazer literalmente tudo!

Encapsular seu próprio alias

jQuery não é o único framework que usa a abreviação de dólar ($). Vários plugins JQuery e trechos de código também o utilizam para definir onDomReady callbacks e funções de seletores CSS, mas você pode acabar (e evitar) com esse conflitos.

Você pode usar seu próprio alias (que pode continuar sendo o “$”) desse jeito:

jQuery(function($) {
    // código usando alias próprio
});

O exemplo acima usa tanto o atalho para $(document).ready(), quanto o argumento para escrever código jQuery em failsafe usando o alias $, sem contar com o alias global. Você pode e deve, igualmente, integrar o $ quando for criar plugins:

(function($) {
    // código do plugin, usando $ quantas vezes quiser
})(jQuery);

Definir callbacks próprios

Quando estiver criando plugins para jQuery, é uma boa idéia deixar o desenvolvedor atribuir callbacks próprios como como parâmetros de funções, tornando possível personalizar ainda mais o plugin. Então, ao invés de forçar os efeitos de callback dentro do plugin, engatilhe funções de eventos e defina os efeitos livremente.

Aqui está um exemplo em que passamos a função onFade para o plugin, escrito como um simples plugin fadeIn:

/*
This plugin fades an element and triggers the onFade when completed
 
EXAMPLE USAGE:
  $('.fademe').customFade({
    fadeSpeed: 50,
    onFade: function(elem) {
      console.log(elem+' has faded!')
    }
  });
*/
 
jQuery.fn.customFade($params) {
  var $defaults = {
    fadeSpeed: 1000,
    onFade: function(element){}
  };
  var $p = $.extend($defaults, $params);
  $(this).fadeIn($p.fadeSpeed,$p.onFade($(this)));
}

Ficar atento com as diferenças entre navegadores

jQuery é bastante propenso a ser crossbrowser. Mas ainda existem falhas, especialmente com os navegadores como o Safari, que tem um trigger diferente para onLoad, e IE, evidentemente. Sempre teste em vários navegadores e preste muita atenção em quando e onde as falhas ocorrem.

Não ser excessivo e definir seu propósito

Certifique-se de que não está usando jQuery apenas porque você pode. Sempre analise suas necessidades e tenha uma ideia clara do que você quer alcançar antes mesmo de escrever a primeira linha. Faça sketches de seu código e discuta suas ideias com seus pares antes da codificação (se não estiver trabalhando sozinho, claro).

Não reinvente a roda a menos que você esteja fazendo isso para aprender e/ou se educar, analise o código de plugins de qualidade para inspirar-se e ver o que tem sido feito por bons programadores.

Bons códigos!

Otimizar imagens para web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade. Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

Retirar o excesso de espaço em branco

Às vezes uma imagem tem espaço branco ou tem um “excesso” de cor ao redor para que o texto e outros elementos não encostem na imagem. Ao invés disso, recorte esse excesso de espaço em branco e dê o espaçamento desejado usando a propriedade CSS padding.

Não redimensionar imagens pelo browser

Não use propriedades HTML ou CSS para redimensionar suas imagens pelo browser, ao invés disso, redimensione suas imagens em seu programa de editoração de imagens preferido, especificamento exatamente a dimensão de cada imagem que será usada.

Escolher o formato de imagem certo

Para otimizar imagens para web, escolher o formato de imagem correto é fundamental. Então, saiba quando optar entre JPG, GIF e PNG.

JPG

JPG é o formato para fotos. JPG pode ter milhões de cores e ainda conseguir uma excelente taxa de compressão. É um formato “de perda”, o que significa que ter qualidade 100% não significa menor perda). Então você perde qualidade a cada edição da imagem. JPG não suporta transparência.

GIF

GIF é o formato para animações. GIF é um tipo de imagem “paleta” (também chamado “indexed”), que contém até 256 cores indexadas. GIF é um formato sem perda, o que sigfnifica que quando você modifica e salva a imagem, não há perda de qualidade. GIF suporta transparência (os pixels em uma imagem em GIF ou são totalmente transparentes ou são totalmente opacos).

PNG 8

PNG 8 é o formato para logos, ilustrações, ícones, botões, backgrounds e gráficos. PNG 8 é um formato sem perda, assim como GIF. Diferente do GIF, PNG 8 costuma gerar um arquivo de tamanho menor e tem suporte a transparência alpha variável – gerando pixels semitransparentes (recurso não suportado pelo IE6).

PNG 24

PNG 24 é usado quando você precisa de transparência alpha e mais de 256 cores. PNG24 é também a única opção quando você precisa de uma imagem de qualidade superior e o tamanho do arquivo gerado não importa. O tamanho das imagens em PNG 24 é geralmente maior que JPG e PNG8. Truecolor PNG é um formato sem perda que pode ter milhões de cores (16 bits por canal) e pode servir perfeitamente como “intermediário” entre diversas edições.

Usar “Save for Web & Devices” ao invés de “Save as…” no Photoshop

O comando “Save for Web & Devices…” no Photoshop (Alt+Shift+Ctrl+S) existe para exportar imagens otimizadas para web, com um melhor balanceamento tamanho/qualidade. É possível ter um controle refinado através de previews para experimentar diversos tamanhos de imagem e qualidade. Essa opção tenta reduzir o tamanho dos arquivos retirando informações (metadata) dispensáveis – o que pode fazer com que uma imagem tenha o dobro do tamanho necessário quando se trata de imagens para web.

Usar poucas cores para imagens indexadas e experimentar a paleta “Selective”

Se está produzindo ou otimizando imagens para ícones, botões ou outro tipo que possa ser em PNG8, tente reduzir o número de cores para 32 ou 64. Isso pode reduzir significativamente o tamanho sem alterar na qualidade da imagem.

Usar a paleta “Selective” para imagens com cores chapadas permite uma compressão de imagem melhor e mais eficiente em comparação às paletas “Perceptual” ou “Adaptive”.

Converter PNG para Grayscale se você não precisa de cores

Converta as imagens para Grayscale ou Escala de Cinza (Image >Mode > Grayscale) antes de salvá-las em PNG. Isso ajuda a economizar alguns KBs, especialmente em se tratando de imagens semitransparentes.

Experimentar PNG24 ao invés de PNG8

Às vezes imagens pequenas e alguns tipos de gradientes ficam melhores (custo/benefício) em PNG24 ao invés de PNG8. Isso acontece devido à maneira com que os algoritmos de compressão de “sem perda” trabalham e à “sobrecarga” que cores indexed acrescenta.

Usar “Posterization” para reduzir o número de cores em PNG

“Posterization” reduz a quantidade de cores, convertendo cores similares em uma só. Para usar esta técnica vá em Image >Adjustment >Posterize, no Photoshop, e experimente um valor em torno de 40.

Evitar salvar em JPG Progressivo (Progressive JPEG)

Salvando um JPG no modo “Progressive” faz com que várias “cópias” em baixa resolução da imagem sejam feitas para aparecerem rapidamente na tela, enquanto, progressivamente, a qualidade vai aumentando.

Em algumas vezes pode ser que salvar no modo Progressivo gere uma imagem em tamanho menor, mas, na maioria das vezes, será maior. Além disso, imagens salvas no modo Progressivo não são exibidas em muitos dispositivos móveis.

Reduzir o “ruído” (noise) para diminuir o tamanho da imagem

Noise (“ruído”) faz com que o algoritmo do JPG precise de mais recursos para salvar, deixando menos espaço para a informação realmente útil, ou seja, a imagem em si. Isso significa que, eliminando o noise, você não somente tem uma imagem com tamanho melhor, mas também melhorar seu aspecto visual.

Você pode usar diversos plugins do Photoshop, como Noise Ninja ou Imagenomic Noiseware ou uma maneira fácil de reduzir o ruído no Photoshop é mudar para o modo de cor Lab e, em seguida, aplicar Filter > Mediana (2-4) para os canais A e B.

Embaçar o fundo

Embaçar o fundo de uma imagem JPG ajuda o mecanismo de compressão a gerar uma imagem de tamanho menor. Para usar essa técnica, faça uma selação no objeto principal da imagem, inverta a seleção (CTRL + I), aplique uma pequena quantidade de Gaussian Blur (1 ou 2px). Agora você pode salvar sua imagem como um JPG de tamanho menor.

Embaçar a imagem quando for Salvar para Web

Devido ao fato de o algoritmo de compressão JPG ter facilidade em lidar com transições sutis de cores, acrescentar um pequeno blur (0,2 ou 0,3) quando for Salvar para Web no Phosothop pode ajudar a reduzir e otimizar o tamanho do arquivo. Diminuir ligeiramente o Contraste e Saturação também tem um bom impacto no tamanho de arquivos JPG.

Otimizar imagens com ferramentas especiais

Existem excelentes ferramentas online e utilitários para download que podem ajudá-lo a reduzir e otimizar significativamente suas imagens sem perda de qualidade.  É uma boa prática usar algumas dessas ferramentas para otimizar suas imagens e obter arquivos de tamanhos menores. Atenção aos termos de uso de algumas dessas ferramentas.

Smush.it

Smush.it é uma ferramenta online que utiliza técnicas de otimização diferentes para cada formato de imagem (PNG, GIF, JPEG) para remover bytes desnecessários da imagem sem perda de qualidade. Você também pode usar Smush.it integrado com o plugin do Firefox YSlow ou através de um plugin WordPress.

punypng

punypng usa diversas técnicas de otimização de imagens para web para reduzir o tamanho dos arquivos. Os desenvolvedores do punypng afirmam que a ferramenta é atualmente mais eficiente do que o Smush.it.

PNG Monster

PNG Monster é uma GUI para compressão de PNG projetada para converter com eficiência grandes números de arquivos PNG automaticamente. PNG Monster usa uma variedade de aplicações “command-line” (PNGRewrite, PNGCrush, OptiPNG, PNGOut, AdvPNG) para comprimir com variados métodos de compressão PNG.

SuperPNG

SuperPNG é um plugin grátis do Phosothop para salvar arquivos PNG significativamente menores em relação ao salvamento nativo do Phosothop. Também inclui algumas características avançadas de PNG, como suporte a 16 -bit color, compressão variável, correção de gama e salvamento de metadata.

SuperGIF

SuperGIF é um utilitário gratuito para Windows e MAC para otimizar imagens GIF. Ele permite comprimir um arquivo GIF em até 50%! A versão gratuita comprime somente um arquivo por vez.

jStrip

jStrip é um programa gratuito que reduz e otimiza imagens e JPG sem sacrificar a qualidade das imagens. JStrip trabalha removendo informações desnecessárias do arquivo JPG sem perda de qualidade ou recompressão.