Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

No post de hoje, apresentarei como detectar colisões entre Movie Clips no Flash 8. Tal recurso é importantíssimo, por exemplo, no desenvolvimento de jogos. A animação abaixo demonstra um exemplo de colisão, onde dois “smiles” se chocam. Quando a colisão ocorre, um fica vermelho de raiva e o outro fica roxo após a pancada (comentário infame… relevem…)! Para colidir os smiles, clique sobre a animação e pressione a tecla direcional -> do teclado para mover o smile esquerdo em direção do direito.

Let’s go! Crie um novo documento flash. Desenhe ou importe algo para a área de desenho e o converta para Movie Clip (selecione o objeto, pressione F8 e escolha a opção Movie Clip). Copie e cole o Movie Clip para a área de desenho (mesmo layer, mesmo frame). Procure deixá-los distantes um do outro, alinhados. Selecione o Movie Clip da esquerda, pressione Ctrl + F3 e, na aba Properties (propriedades), nomeie o Movie Clip para smile1 (em instance name). Faça o mesmo com o Movie Clip da direita, nomeando-o para smile2.

Agora vem a inteligência da “parada”. Copie o código abaixo e cole nas ações de um dos Movie Clips (selecione um Movie Clip, pressione F9 e cole o código abaixo na aba Actions, ou ações):

onClipEvent(enterFrame)
{
if (_root.smile1.hitTest(_root.smile2)) {
var cor1:Color = new Color(_root.smile1);
cor1.setRGB(0xFF0000);
var cor2:Color = new Color(_root.smile2);
cor2.setRGB(0x330033);
}

if(Key.isDown(Key.RIGHT))
{
this._x = this._x + 10;
}
}

Explicarei o código: Como o código acima é aplicado em um Movie Clip, precisamos programar o action script no corpo da trigger onClipEvent. O parâmetro enterFrame da trigger indica que o evento ocorrerá logo quando o primeiro frame do MovieClip for ativado.

O segredo para detectarmos uma colisão entre Movie Clips no Flash está no uso da função hitTest(), localizado na terceira linha. Podemos interpretar a mesma da seguinte maneira: Se (if) o Movie Clip smile1, localizado na área de desenho (_root.smile1) colidir (hitTest) com o Movie Clip smile2, também localizado na área de desenho (_root.smile2) então ({)…

Então ambos deverão mudar de cor. Poderemos fazer isso através da função setRGB(valor de cor em hexadecimal). Tal função só é aplicada em variáveis do tipo cor. Logo, declaramos a variável do tipo Color cor1 (var cor1: Color) e indicamos que a mesma apontará para a cor do Movie Clip smile1, localizado na área de desenho (= new Color(_root.smile1)). Faremos o mesmo para a variável cor2, que apontará para a cor do Movie Clip smile2. Após a declaração das variáveis de cores, poderemos manipular as cores dos Movie Clips a partir delas, graças a função setRGB (cor1.setRGB(0xFF0000) muda a cor do Movie Clip smile1 para vermelho, e cor2.setRGB(0×330033) muda a cor do Movie Clip smile2 para roxo).

O segundo if faz com que o Movie Clip que contenha o script ande para a esquerda quando o usuário pressionar a tecla direcional ->. Maiores detalhes sobre a movimentação de Movie Clips a partir do teclado foram demonstrados no post Flash - Controlando Movie Clips através do teclado. Visite o referido post para maiores detalhes!

Pronto! Teste sua animação pressionando Ctrl + Enter. Poste suas dúvidas nos comentários e/ou CLIQUE AQUI para baixar o arquivo .fla deste exemplo. E divirta-se!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

No mini-tutorial de hoje apresentarei como aplicar o efeito de máscaras no Flash. O resultado do uso deste efeito pode ser visualizado na animação abaixo.

A máscara é simplesmente uma área delimitadora que define o que realmente será apresentado na apresentação. Tudo que a máscara sobrescreve será visualizado. Tudo que estiver fora do perímetro da máscara será ocultado.

Tal técnica já foi apresentada em um post anterior, que descreve como criar efeitos de assinatura no Flash.

Vamos começar (lembrando que estou utilizando o Flash 8 para descrever o processo de criação)! Crie um novo documento Flash. Neste documento, crie dois layers (novos layers podem ser gerados a partir da opção de menu Insert >> Timeline >> layer). O layer superior conterá frames que utilizaremos para desenhar a máscara, e o inferior conterá algo que será exibido de acordo com o movimento da máscara. Clique com o botão esquerdo do mouse sobre a área de animação e siga até a aba Properties (Ctrl + F3), vá até a lista de cores para o background da animação e defina uma cor para o fundo (no exemplo, utilizo azul marinho).

Selecione o primeiro frame do layer inferior e, na área de desenho, digite a frase “Teste de máscaras no Flash” através da ferramenta Text (pressionando T). Defina a cor da fonte como branca, tipo arial, tamanho 39, negrito (selecione o texto e pressione Ctrl + F3 para definir tais propriedades na aba Properties). Procure deixar a frase no centro da área de desenho.

Clique com o botão esquerdo do mouse sobre o primeiro frame do layer superior e desenhe a máscara que será utilizada na animação. No nosso exemplo, desenharemos um pequeno circulo branco (Ferramenta Oval… pressione O). Selecione o círculo recém-criado, pressione F8 e o converta em gráfico (Graphic). Procure posicionar o gráfico por cima do início a frase digitada anteriormente.

Agora clique com o botão direito do mouse sobre o nome do layer superior e selecione a opção “Mask”. Você notará que o layer inferior ficará “submisso” ao superior, com o título deste layer ficando mais a direita (os ícones dos layers ficarão azuis). Já será possível observar o efeito de máscara em ação na área de desenho.

Provavelmente os dois layers ficarão bloqueados após esta etapa (será apresentado um ícone com cadeados nas duas layers). Portanto, clique sobre os cadeados para desbloqueá-los novamente.

Você também poderá verificar uma prévia do efeito da máscara pressionando as teclas Ctrl + Enter. Só será apresentado parte do texto “coberto” pelo círculo. Mas ainda tudo está muito estático… Vamos animar um pouco!

Segure a tecla Shift e clique com o botão esquerdo do mouse sobre o primeiro frame de cada layer, para selecioná-los. Pressione a tecla F5 até que a animação tenha 60 frames. Selecione o frame 30 do layer superior e pressione F6 para definir o ponto central de animação e, logo em seguida, selecione o último frame do layer superior e pressione F6 para definir o ponto final. Selecione novamente o frame 30 e, na área de animação, arraste o círculo até fim da frase. Clique com o botão direito do mouse sobre o primeiro frame do layer superior e selecione a opção “Create Motion Tween” (criar interpolação de movimento). Clique agora com o botão direito sobre o frame 30 e aplique novamente a interpolação.

Teste sua animação pressionando novamente as teclas Ctrl + Enter! A tendência é sua animação ficar parecida com a animação apresentada neste post. Caso você tenha alguma dificuldade em seguir o passo a passo, CLIQUE AQUI, baixe o arquivo .fla do exemplo e tente acompanhar o tutorial utilizando o mesmo.

Espero que este mini-tutorial tenha sido útil!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Em mais um mini-tutorial de Flash, apresento-lhes como adicionar guias de movimento (Motion Guides) no Flash. Utilizarei a versão 8 para produzir este post, mas presumo que tal técnica também poderá ser aplicada em outras versões.

Através dos Motion Guides, em adição com a técnica de interpolação de movimento, poderemos direcionar nossas animações de acordo com guias definidos por linhas, círculos, etc. O vídeo abaixo demonstra como aplicar esta técnica (decidi criar um vídeo desta vez).

Este vídeo poderá ser visualizado em HD. Assista o mesmo em full screen, para facilitar a visualização.

Para iniciar, deveremos clicar com o botão direito do mouse sobre o layer de trabalho e selecionar a opção de menu “Add Motion Guide”. Será adicionado um novo layer para a animação, onde os frames ligados a ele conterão o guia de animação. O layer inicial ficará “submisso” ao layer adicionado, e seus frames conterão o objeto que se movimentará pela guia de animação.

No layer superior, desenharemos a guia de animação (confira o vídeo acima). Procure não desenhar caminhos com curvas muito “bruscas”, para que a animação funcione corretamente. Já no layer inferior, desenhe ou insira algo de sua preferência e converta-o em gráfico (Pressionando a tecla F8 e selecionando a opção de gráfico).

Defina a duração da sua animação (como apresentado no vídeo) e defina o ponto final da mesma pressionando F6 no último frame do layer que contém o objeto animado. No primeiro frame deste layer, posicione o gráfico no início da guia. No último frame deste layer, posicione o gráfico no fim da guia (procure “seguir” a guia enquanto arrasta o objeto, só para garantir o movimento). Clique com o botão direito do mouse sobre o primeiro frame do mesmo layer e selecione a opção de menu “Create Motion Tween”, para ser adicionada uma interpolação de movimento na sua animação.

Teste sua animação, através das teclas Ctrl + Enter, e divirta-se! Não conseguiu executar este mini-tutorial? Comente suas dúvidas!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

No post de hoje, demonstrarei como controlar Movie Clips através das teclas direcionais do teclado. Tal técnica é útil, por exemplo, na criação de jogos.

Abaixo é apresentada uma animação que aplica esta técnica. O Movie Clip (esse boneco tosco que eu fiz “nas carrera”, hahahahaha) pode ser controlado para baixo, para cima, para a esquerda e para a direita. Para testar, clique sobre a animação e pressione as teclas direcionais do seu teclado.

Utilizei o Flash 8 para produzir este post…

Let’s go! Primeiramente deverás criar um Movie Clip que irá se movimentar. Poderá ser um objeto qualquer, um boneco (de preferência mais produzido do que eu fiz :P), etc. Irei considerar que o leitor já conheça os procedimentos para a criação de Movie Clips. Caso contrário, faça uma solicitação de maiores esclarecimento nos comentários do post, beleza?!

Continuando… Com o Movie Clip já criado, selecione-o e acesse a aba de Ações (Actions), normalmente localizada abaixo da área de desenho (a mesma poderá ser acessada no Flash 8 através da tecla F9). Insira o seguinte código nesta aba:

onClipEvent(enterFrame)
{
  if(Key.isDown(Key.LEFT))
  {
    this._x = this._x - 2.6;
  }
  if(Key.isDown(Key.RIGHT))
  {
    this._x = this._x + 2.6;
  }
  if(Key.isDown(Key.UP))
  {
    this._y = this._y - 2.6;
  }
  if(Key.isDown(Key.DOWN))
  {
    this._y = this._y + 2.6;
  }
}

Pressione as teclas Ctrl + Enter para testar a animação e movimentar seu Movie Clip.

O que tem de mais neste código? O procedimento OnClipEvent(enterFrame) prevê uma ação a ser executada em um Movie Clip, logo quando o primeiro frame do mesmo Movie Clip for apresentado na animação.

O visitante observará 4 blocos com “ifs” para cada tecla direcional: Key.LEFT, Key.RIGHT, Key.UP e Key.DOWN. Explicando um bloco, ficará fácil entender os demais. Por exemplo, no primeiro “if” da série, temos

if(Key.isDown(Key.LEFT)) {

que significa “Se (if) a tecla pressionada (isDown) foi a tecla direcional esquerda (Key.LEFT) então faça ({)”. Fácil, né? Os demais “ifs” tem o mesmo significado, aplicado para as demais teclas. E o que ele irá fazer quando isso acontecer? Irá para a esquerda, horas?! Mas como indicar isso no Flash? Através dos códigos Action Script de posicionamento

this._x e this._y

que identificam a posição do objeto na área de trabalho. São utilizados os parâmetros X e Y porque o Flash trata a área de desenho como um produto cartesiano (x,y) virado para baixo (os valores negativos de Y ficam para cima, inverso ao que estamos acostumados a estudar nas aulas de matemática). Dentro de cada bloco com “if”, encontramos uma função como esta

this._x = this._x - 2.6;

que, neste caso, significa “A nova posição X (_x) do Movie Clip em questão (this) será igual a posição corrente do mesmo (this._x) menos 2.6″. A mesma idéia valerá para os demais blocos, mudando a posição (X ou Y) ou o cálculo (+ ou -). Para que o movimento seja mais espaçado, basta inserir um número maior que 2.6. Para que o movimento seja mais curto, basta inserir um número menor que 2.6. Simples!

Ainda ficou complicado? Então CLIQUE AQUI e baixe o arquivo fonte (.fla) da animação acima! Vasculhe o código e observe como o mesmo foi produzido!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Hoje apresentarei como desenvolver um sistema utilizando PHP e MySQL para o envio automático de Newsletters, respeitando limites de envio impostos pelo servidor de e-mails utilizado.

Vamos começar (Este post promete ser extenso :P)…

O sistema possui uma base de dados que armazena a lista de e-mails utilizada para o envio das Newsletters. Portanto, antes de mais nada, iremos criar tal base de dados e a tabela pertencente a mesma. Acesse seu sistema de gerenciamento de banco de dados em SQL (no nosso caso, o MySQL) e insira as queryes listadas abaixo:

CREATE DATABASE newsletter;
SET DATABASE newsletter;
CREATE TABLE IF NOT EXISTS `lista_emails` (
`id` int(11) NOT NULL auto_increment,
`email` varchar(100) NOT NULL,
`enviou` varchar(1) NOT NULL default '0',
PRIMARY KEY (`id`)
) ;

A primeira linha do código SQL apresentada cria a base de dados newsletter, utilizada para armazenar as tabelas de trabalho do nosso Script PHP. A segunda linha seta a base de dados recém-criada como a base corrente (indica que as próximas queryes irão atualizar a base de dados setada pelo comando SET). O comando CREATE TABLE cria a tabela lista_emails, que armazena a lista de e-mails, com os seguintes campos: id (uma chave primária de identificação auto-incrementada, que identifica unicamente cada e-mail da lista), email (o e-mail propriamente dito), e enviou (que indica se aquele endereço de e-mail recebeu ou não a newsletter da rodada. O char 0 indica que o endereço indicado no campo email ainda não recebeu uma Newsletter; O char 1 indica o contrário).

Passada a primeira etapa, vamos para a implementação do Script PHP que enviará os e-mails. O código segue abaixo:


echo '‘;
$host = “localhost”;
$user = “”;
$pass = “”;
$db = “newsletter”;
$a = @mysql_connect($host, $user, $pass) or die(mysql_error());
@mysql_select_db($db, $a) or die(”erro ao se conectar com o db”);
$cont = 0;
$headers = “Content-type: text/html; charset=iso-8859-1\r\n”;
$y = mysql_query(”select * from lista_emails where enviou = 0″);
while($x = mysql_fetch_array($y))
{
if ($cont <= 130)
{
// Insira aqui o HTML da sua Newsletter
$mensagem = ”;
$enviou = mail($x[email], “Título da Newsletter”, $mensagem, $headers, “-femaildeenvio@emaildeenvio.com.br”);
if($enviou)
$atualizou = mysql_query(”update lista_emails set enviou = 1 where id = “.$x[id].”");
}
}
if ($cont > 130)
break;
$cont = $cont + 1;
}
$y = mysql_query(”select * from lista_emails where enviou = 1″);
echo ‘E-mails enviados até o momento: ‘.mysql_num_rows($y).’
‘;
$y = mysql_query(”select * from lista_emails where enviou = 0″);
echo ‘E-mails a serem enviados: ‘.mysql_num_rows($y).’
‘;


Lembrando que tal código deverá estar entre “menor que e interrogação” e “interrogação e maior que”. Infelizmente não delimitei o código porque minha versão do Wordpress interpreta código em PHP. Caso eu delimitasse, além de não exibir o código, o post tentaria executar o código acima. Peço desculpas pelo incoveniente!

Continuando… A primeira linha prepara o arquivo PHP para execução automática. A mesma atualiza o arquivo de acordo com o tempo especificado pelo argumento content. Desta forma, o usuário do script poderá deixar a aplicação rodando no navegador até que todos os e-mails sejam enviados. No nosso caso, o script será atualizado a cada 3600 segundos, ou uma hora. Este intervalo de envio é estratégico: muitos servidores de e-mail limitam o envio de e-mails em massa a cada hora, sob pena de tirar o serviço de envio e recebimento de e-mails da sua conta caso não seja respeitado tal limite.

Da segunda até a sétima linha são definidos parâmetros de acesso do script PHP ao seu banco de dados. Insira o login e senha do seu banco de dados nas variáveis $user e $pass, respectivamente.

A variável $cont é inicializada em seguida com zero. A mesma armazenará os e-mails enviados até o momento. É a partir da mesma que restringiremos a quantidade de e-mails enviados por hora.

Em seguida, a variável $headers armazena o cabeçalho de tipo de conteúdo dos e-mails enviados pelo script. No nosso caso, precisamos indicar que o tipo de e-mail enviado será em HTML.

A variável $y armazena os resultados da query executada pelo comando mysql_query. Nesta query, serão selecionados todos os e-mails que ainda não receberam uma Newsletter. É claro que, na primeira execução, todos os e-mails serão selecionados.

O laço while obtém todos os valores de $y e os armazena em $x no formato de arranjo, para facilitar o acesso aos campos de tabelas selecionados anteriormente. Enquanto houver dados na seleção armazenada em $y, o laço se repetirá.

Seguindo pelo código (se a maneira que eu uso para explicar o código estiver um pouco complicada, favor comentar sobre a mesma. Poderei tirar possíveis dúvidas através dos comentários de vocês) temos o comando if, que analisa se 131 e-mails já foram enviados ou não. Tal comando limita o envio de e-mails para 131 e-mails por hora. Tal quantidades de e-mails já enviados é armazenada por $cont, incrementada a cada interação do script.

Se o código estiver liberado pelo comando if para enviar e-mails, é iniciado o processo de preparação e envio dos e-mails. A variável $mensagem armazena o código HTML dos e-mails a serem enviados. É nessa variável que o usuário deverá inserir a Newsletter propriamente dita.

A função PHP mail envia um e-mail para o endereço armazenado na variável $x[email] (lembram do array criado no laço while? Poderemos acessar campos da tabela pelo nome das mesmas, a partir do arranjo $x), com o título definido no segundo parâmetro, com o conteúdo definido pela $mensagem, com o cabeçalho definido pela variável $headers, com o remetente indicado pelo último argumento (aqui o usuário deverá definir o e-mail utilizado no envio das Newsletters, seguido de -f). A variável $enviou será utilizada para verificar se houve ou não erros no envio.

O próximo comando if verifica se o e-mail foi enviado. Em caso afirmativo, a tabela da lista de e-mails é atualizada. O campo enviou para o e-mail selecionado é atualizado com 1, indicando que o endereço de e-mail já recebeu uma Newsletter, e estará fora da próxima lista de envio.

O comando if em seguinda analisa se a quantidade de e-mails enviada por hora ainda está no limite imposto. Em caso negativo, o comando break encerra a execução do laço de repetição, encerrando o envio de e-mails naquele momento.

A variável cont é então incrementada, caso ainda tenhamos e-mails a serem enviados.

Da linha 27 a 30 é descrita uma implementação para exibir no navegador quantos e-mails já foram enviados e quantos ainda faltam ser enviados. Não entrarei em detalhes nesta área de código, por ser uma região acessória, além de que já escrevi pra caramba… Qualquer dúvida é só comentar!

E pronto! Código explicado. Insira os e-mails na sua tabela de e-mails, insira seu login e senha de acesso a banco de dados nas variáveis $user e $pass, insira o código HTML da sua Newsletter e teste a aplicação. Caso queiras aumentar ou diminuir o intervalo de envio de e-mails, edite a primeira linha. Caso queiras aumentar ou diminuir a quantidade de e-mails enviados por intervalo, edite as linhas 13 e 23. Qualquer erro ou dúvida, comenta aí!

E até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Hoje demonstrarei como criar cursores personalizados para suas animações em Flash. Utilizarei o Flash 8 para descrever os passos de criação, mas presumo que tais passos também possam ser seguidos utilizando-se versões anteriores e posteriores a esta.

Tal técnica é útil, não apenas para aumentar a interatividade das suas animações, como até para criar jogos do tipo “tiro ao alvo”, por exemplo.

Para início de conversa, inicie um novo documento flash. Desenhe algo que servirá de cursor, e o converta em Movie Clip (no Flash 8, selecionamos o objeto, pressionamos F8 e escolhemos a opção “Movie Clip”). Clique sobre o Movie Clip gerado para selecioná-lo, e siga para a aba de propriedades, localizada abaixo da área de desenho, ou pressione os botões Ctrl + F3. Em “instance name”, batize o Movie Clip com o nome “cursor”.

Após esta etapa, clique sobre o frame em que seu cursor está inserido e siga até a aba de ações, ou pressione F9. Nesta aba, copie e cole o seguinte código:

Mouse.hide();
cursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};

Pressione Ctrl + F9 e teste sua animação. Provavelmente ele funcionará corretamente!

Vamos para a explicação do action script. A primeira linha (Mouse.hide();) oculta o cursor original, para que apenas o cursor criado seja exibido. A segunda linha (cursor.onMouseMove = function() {) inicia a função de controle que prevê uma ação enquanto o mouse estiver em movimento, para o Movie Clip “cursor” (por isso a importância de dar um nome ao objeto). A terceira e quarta linha (this._x = _xmouse; this._y = _ymouse;) atualizam a posição do Movie Clip, setando sua posição para que seja a mesma da posição do cursor do mouse. A quinta linha (updateAfterEvent();) atualiza a execução dos parâmetros definidos nesta função. A última linha fecha a implementação da função.

Qualquer dúvida, escreva um comentário! Tentarei responder o mais rápido possível…

E até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Seguindo com a nossa série de traduções para o guia oficial do Google para boas práticas de SEO, apresento minha tradução para o quarto tópico do manual, intitulado em uma tradução adaptada como “Faça com que seu site seja fácil de navegar”

Boa leitura!

Faça com que seu site seja fácil de navegar

A navegação de um website é importante para que os visitantes encontrem rapidamente o conteúdo que necessitam. Isto também pode ajudar as ferramentas de busca a entenderem qual o conteúdo que o webmaster acha importante. Embora os resultados de pesquisa do Google sejam fornecidos a nível de página, o Google também gosta de ter uma noção do que uma página desempenha no panorama do site.

Todos os sites tem uma página home ou principal, que é usualmente a página mais frequentada do site e o ponto de partida de navegação de vários visitantes. A menos que seu site tenha apenas um punhado de páginas, você deve pensar sobre como os visitantes irão de uma página geral (sua página principal) até uma página que contenha um conteúdo mais específico. Você tem muitas páginas em torno de um tema específico, que faria sentido a criação de uma página que descrevesse estas páginas relacionadas (Ex.: Página principal -> Lista de tópicos relacionados -> Tópico específico)? Você tem centenas de diferentes produtos que necessitam ser classificados em múltiplas páginas de categorias e subcategorias?

Um sitemap é uma página simples em seu site que mostra a estrutura de seu website, e usualmente consiste em uma listagem hierárquica das páginas do mesmo. Visitantes podem visitar esta página caso tenham problemas para encontrar páginas no seu site. Enquanto que ferramentas de busca também podem visitar esta página, obter uma boa cobertura de rastreamento das páginas do seu site, voltada principalmente para os visitantes humanos.

Um arquivo XML sitemap, o qual você pode submeter através das ferramentas para webmasters do Google, faz com que seja fácil para o Google descobrir as páginas do seu site. Usar um arquivo de sitemap é também um caminho (embora não garantido) para comunicar ao Google qual versão de URL você prefere (Ex.: http://thyagomaia.com ou http://www.thyagomaia.com). O Google ajudou criando o script de código aberto “Sitemap Generator Script” para ajudá-lo a criar arquivos sitemap. Para aprender mais sobre sitemaps, o “Webmaster Help Center” provê um guia útil para a produção de arquivos sitemap.

Boas práticas para a navegação de sites

- Crie uma hierarquia que flua naturalmente: Faça isso o mais fácil possível para os usuários seguirem a partir de um conteúdo geral até o mais específico em seu site. Adicione páginas de navegação para que efetivamente estes trabalhem em sua estrutura de links internos. Evite criar webs complexos para links de navegação (Ex.: Linkar cada página do seu site para todas as outras páginas) e criar uma estrutura que leve vinte cliques para chegar ao conteúdo de profundidade;

- Use, na grande maioria, textos para a navegação: Controlando a maior parte da navegação de uma página para a outra em seu site através de links de texto torna mais fácil para as ferramentas de busca rastrearem e compreenderem seu site. Vários usuários também preferem isto em outras abordagens, especialmente em alguns dispositivos que não podem lidar com Flash ou JavaScript. Evite ter uma navegação baseada inteiramente em menus drop-down, imagens ou animações (muitas, mas não todas as ferramentas de busca podem descobrir cada link em um site, mas se o usuário pode alcançar todas as páginas em um site via links de texto normais, isto irá melhorar a acessibilidade do seu site);

- Use uma navegação “breadcrumb”: Um breadcrumb é uma linha de links internos no topo ou abaixo de uma página que permite aos visitantes voltar rapidamente para um setor anterior ou para a página principal. Vários breadcrumbs tem a página mais geral (usualmente a página principal) como o primeiro link, mais a esquerda, e uma lista com outros setores específicos mais a direita. Ex: Principal > Posts > Post de SEO;

- Insira um sitemap em HTML em seu site, e utilize um arquivo sitemap em XML: Uma página sitemap simples com links para todas as páginas ou as mais importantes (se você tem centenas ou milhares) em seu site pode ser útil. Criando um sitemap em XML para seu site ajuda a garantir que ferramentas de busca descubram as páginas do seu site. Evite deixar seu sitemap em HTML obsoleto com links quebrados ou criar um sitemap em HTML que simplesmente lista páginas sem organizá-los, por exemplo, por assunto;

- Considere o que acontece quando um usuário retira parte do seu URL: Alguns usuários podem navegar no seu site de maneira estranha, e você deve antecipar isso. Por exemplo, em vez de usar os links de navegação na página, um usuário pode deixar uma parte do URL na esperança de encontrar o índice mais geral. Ele ou ela pode estar visitando http://www.brandonsbaseballcards.com/news/2008/upcoming-baseball-card-shows.htm, mas depois entra em http://www.brandonsbaseballcards.com/news/2008/ no navegador via barra de endereços, acreditando que isso irá mostrar todas as novidades de 2008. O seu site é preparado para mostrar conteúdo nesta situação ou ele leva o usuário ao 404 (erro de página não encontrada)?

- Tenha uma página 404 útil: Usuários ocasionalmente podem chegar a uma página que não existe em seu site, ou seguindo um link quebrado ou digitando o URL errado. Ter uma página 404 personalizada, que orienta os usuários gentilmente de volta a uma página em seu local de trabalho pode melhorar significativamente a experiência do usuário. Sua página 404 provavelmente deve ter um link para sua página de raiz e também pode fornecer links para conteúdo popular ou relacionados em seu site. O Google oferece um widget 404 que você pode inserir na sua página 404 para preencher automaticamente com muitas características úteis. Você também pode usar o Google Webmaster Tools para encontrar as fontes de URLs causadoras de erros de página não encontrada. Evite permitir que suas páginas 404 sejam indexadas nos motores de busca (certifique-se que seu servidor web está configurado para dar um código HTTP 404 quando páginas não-existentes são solicitadas), fornecer apenas uma vaga mensagem como “Não encontrada”, na página 404, ou o nº 404 em todas elas, ou usar um design para suas página 404 que não é coerente com o resto do seu site.

Meta cumprida! Agora posso aproveitar o final de semana!

Até a próxima!

Related articles by Zemanta

• Is your site ready for Google’s speed ranking factor? (tomdoyletalk.com)
• Crawling & Indexing - It’s Not as Simple as Just In or Out (seomoz.org)
• Search Engine Marketing Secret #3 Revealed: Links are Like Recommendations (questionpro.com)
• An Update on Sitemaps at Google (googlewebmastercentral.blogspot.com)
• Crawling & Indexing - It’s Not as Simple as Just In or Out (mt-soft.com.ar)
• SEO for Drupal (slideshare.net)
• The Importance Of Anchor Text (ronmedlin.com)
• How To Improve Your Search Engine Ranking (ronmedlin.com)
• Cost Benefits of Using a Website SEO Company (domainmacher.com)

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Seguindo com a nossa série de traduções para o guia oficial do Google para boas práticas de SEO, apresento minha tradução para o terceiro tópico do manual, que trata sobre a importância de se preparar boas estruturas de URLs

Boa leitura!

Aprimore a estrutura de seus URLs

A criação de categorias descritivas e nomes de arquivo para os documentos em seu site pode não somente ajudá-lo a organizar melhor seu site, mas também conduz melhor as ferramentas de busca a alcançar o conteúdo do seu site. Também pode-se criar facilmente URLs “amigáveis” para que ferramentas de busca indexem seu conteúdo. Visitantes podem ficar intimidados com URLs extremamente longos ou ocultos que contenham algumas palavras irreconhecíveis.

Ex. (No guia): http://www.brandonsbaseballcards.com/folder1/1089257/x1/00000023a.htm

URLs parecidos com esse podem ser confundidos e pouco amigáveis. Usuários teriam um trabalho duro para recitar o URL na memória ou criar um link para isso. Usuários também acreditariam que uma porção do URL é desnecessária, especiamente se o URL demonstra vários parâmetros não reconhecíveis. Eles podem retirar uma parte, quebrando o link.

Vários usuários podem criar um link para sua página usando o URL da sua página como um texto de âncora. Se seu URL contém palavras relevantes, isto provê aos usuários e páginas de busca maiores informações sobre a página do que uma ID ou um parâmetro com um nome estranho.

Finalmente, lembre-se que o URL para um documento é mostrado como parte dos resultados de busca do Google, abaixo do título do documento e do snippet. Assim como o título e o snippet, palavras do URL nos resultados de busca aparecem em negrito caso eles apareçam nas palavras utilizadas na busca do usuário.

(…)

O Google é bom para obter todos os tipos de estruturas de URL, ainda que estejam bastante complexos, mas gastem seu tempo para fazer seus URLs o mais simples possível para ajudar usuários e ferramentas de busca. Vários webmasters tentam alcançar isto reescrevendo seus URLs dinâmicos para estáticos; Embora o Google seja excelente neste ponto, gostaríamos de salientar que este é um procedimento avançado e, se for feito incorretamente, pode causar erros de acesso em seu site. Para aprender mais sobre boas estruturas de URLs, nós recomendamos a página “Webmaster Help Center” em “Criando URLs amigáveis para o Google”

Boas práticas para estruturas de URL

- Use palavras em URLs: URLs com palavras que são relevantes para o conteúdo e a estrutura do seu site são amigáveis para os visitantes navegarem no mesmo. Os visitantes irão lembrar mais facilmente de URLs nesta formatação e ficarão mais dispostos para acessá-los. Evite URLs muito longos com parâmetros desnecessários e sessões de ID, escolher nomes genéricos como “page1.html” ou usar palavras-chave excessivas como “baseball-cards-baseball-cards-baseball-cards.html”;

- Crie uma estrutura de diretórios simples: Use uma estrutura de diretórios que organize bem seu conteúdo e seja fácil para que visitantes saibam ondem estão no seu site. Tente usar sua estrutura de diretórios para indicar o tipo de conteúdo encontrado no URL. Evite aprofundar demasiadamente seus subdiretórios como “…/dir1/dir2/dir3/dir4/dir5/dir6/page.html”, usar nomes de diretórios que não tenham relação com o conteúdo do site.

- Forneça uma versão de URL para chegar a um documento: Para prevenir que usuários acessem uma versão de URL e outros acessem uma versão diferente (isto poderia dividir a visibilidade dos conteúdos entre as URLs), use e faça referência a um URL na estrutura e links internos para suas páginas. Se pessoas estão acessando o mesmo conteúdo através de múltiplos URLs, redirecionar todos os URLs para o URL dominante é uma boa solução. Evite ter páginas com subdomínios e diretório root que acessam o mesmo conteúdo, misturar versões de URL www e não-www em sua estrutura interna de links ou usar capitalização ímpar de URLs (muitos usuários esperam URLs formadas por caracteres minúsculos e lembrarão deles mais facilmente nesta forma).

Até o próximo tópico!