SEO – Search Engine Optimization (O que é e como usar)

Otimização para Buscas, ou SEO (acrônimo de Search Engine Optimization). Tudo se resume a técnicas que te permitem aprimorar o desempenho de um site diante dos mecanismos de busca. E essa melhoria não está ligada somente à quantidade de visitas, mas também à qualidade das visitas, pois te permitirá chamar para o seu site principalmente o seu público-alvo e isso é muito importante nos dias de hoje em que existem tantos sites falando sobre taaaaantas coisas não é mesmo??

Em um mercado onde existem tantos ‘sobrinhos’ vendendo o serviço de desenvolvimento de sites, cabe aos profissionais buscar e investir tempo em coisas que serão o seu diferencial no momento de oferecer o seu produto/serviço. Entendo que conhecer técnicas SEO contam muito na hora de vender o serviço de desenvolvimento de sites. Vamos lá então:

  • O primeiro passo importante está em fazer o levantamento das palavras-chave do seu negócio/serviço/assunto tratados no site em questão. Para ajudar a escolher as melhores palavras-chaves a serem utilizadas, podemos utilizar os serviços do Google AdWords e do Google Trends que nos guiam nessa escolha.
  1. O Google AdWords nos permite fazer uma pesquisa da concorrência e quantidade de pesquisas realizadas nos últimos 12 meses para as palavras e frases-chave selecionadas. É possível pesquisar por todas as palavras-chave de uma vez só, basta  colocá-las uma por linha.
  2. O Google Trends permite verificar qual das variações de palavras é mais pesquisada (sinônimos, plural e sazonalidade). Por exemplo: carro x automóvel, site x sites, sistema x sistemas.
Após descobrir quais as melhores palavras-chave a serem utilizadas para o seu site, cabe-nos utilizar os ‘fatores de otimização onpage para começar o trabalho. Fatores de otimização onpage estão ligados ao próprio site, como a URL, o título, o conteúdo, o tempo de carregamento e etc. Vamos a elas:
  • Título – a tag de título <title> informa tanto aos mecanismos de busca quanto aos usuários qual o tema de cada página. O ideal é criar um título único para cada página do seu site. Quando a sua página retorna como resultado de uma pesquisa é o conteúdo do título que aparece na primeira linha do resultado.
    • Descreva com precisão o conteúdo da página. Evite títulos que não tenham relação com a página, ou títulos genéricos como ‘Sem título’ ou ‘Página1’.
    • Crie títulos únicos para cada página. Evite usar o mesmo título em todas as páginas do seu site ou em um conjunto grande de páginas.
    • Crie títulos descritivos e curtos. Evite usar títulos muito longos pois o Google só exibirá parte dele no resultado  de pesquisa, evite também títulos pouco úteis ou com palavras-chave desnecessárias.
  • Meta tag descrição – a tag <meta name=”description”> permite a inserção de uma descrição da página em formato de até um parágrafo. Essa tag de descrição é importante porque talvez o Google utilize esse texto nos resultados de pesquisas (snippet).
    • Faça diferentes descrições para cada uma de suas páginas.
    • Resuma precisamente o conteúdo de cada página permitindo que o usuário tenha o seu interesse despertado. Evite preencher a descrição somente com palavras-chave, evite replicar o conteúdo da sua página como descrição, evite utilizar descrições genéricas ou sem relação com o conteúdo da página como por exemplo ‘Esta é uma página da internet’.
  • Meta tag “keywords” – nesta tag é possível listar as principais palavras-chave de cada página, separando-as por vírgula.
    • Evite utilizar palavras-chave que também estejam presentes no texto da página e também não repita mais de uma vez a mesma palavra-chave na tag, pois isto pode ser considerado como spam.
  • Estrutura das URLs – melhore as suas URLs dando nomes descritivos a elas, dessa forma o site não só ficará mais organizado como também obterá um melhor rastreamento dos mecanismos de busca. Evite utilizar URLs extremamente longas ou que possuam poucas palavras reconhecíveis, pois elas não serão facilmente decoradas pelos seus usuários além de que não os deixarão à vontade.
    • Utilize suas palavras-chave nas URLs.  Evite nomes genéricos como ‘pagina1.html’.
    • Utilize uma estrutura de diretório simples que permita aos seus usuários saber onde estão em seu site. Evite nomes genéricos de diretórios ou muitos subdiretórios como ‘../dir1/dir2/dir3/dir4/di5/dir6/pagina.html’.
    • Utilize apenas UMA url para cada documento.
  • Heading Tags – as tags de cabeçalho começam com <h1>, a mais importante, e terminam com <h6>, a de menos importância. Essas tags aumentam o tamanho da fonte ajudando os usuários a perceberem a importância do texto exibido.
    • Utilize tags de cabeçalho com moderação pois elas podem dificultar a leitura do texto, tirando a nitidez de onde um assunto começa a outro termina.
  • Imagens – todas as imagens podem ter um nome de arquivo e um atributo “alt” que te permite inserir um texto alternativo para a imagem, caso ela não possa ser exibida por algum motivo, como por exemplo ao visualizar o site em um navegador que não suporta imagens.
    • Utilize nomes de arquivos e atributos “alt” curtos e descritivos. Evite informar nomes genéricos como “imagem1.jpg” e evite preencher o atributo “alt” com palavras-chave ou frases inteiras copiadas.
    • Ao utilizar imagens como link forneça o atributo “alt” pois os mecanismos de busca utilizam essa informação para  compreender melhor a página que você está apontando. Textos “alt” muito longos podem ser considerados spam.
    • Guarde suas imagens em um diretório separado, por exemplo “www.seusite.com.br/imagens”.
    • Utilize arquivos em formatos amplamente suportados (jpeg, gif, png e bmp).
  • Robots.txt – este arquivo deve ser colocado na raiz do site e informa aos mecanismos de busca se eles podem ou não acessar e varrer partes do seu site. Para saber mais como bloquear URLs assista ao vídeo do engenheiro do Google Matt Cutts.
    • Para conteúdos confidenciais ou delicados é mais  seguro utilizar criptografia ou proteção através de senha utilizando .htaccess, pois mecanismos de busca desonestos ou não compatíveis podem não obedecer as instruções no robots.txt.
  • Melhore seus textos âncora ( <a href=”…”></a> ) – o texto clicável inserido dentro da tag âncora servirá não só para o seu usuário entender para onde você está apontando como também para o mecanismo de busca.
    • Escolha um texto descritivo que informe o mínimo sobre a página que ele aponta. Evite escrever textos âncora genéricos ou utilizar a URL como texto âncora.
    • Escreva textos concisos, geralmente algumas palavras ou uma pequena frase.
    • Deixe seus links facilmente reconhecíveis através de estilização (CSS).
  • Utilize rel=”nofollow” para links quando necessário – o atributo “rel” de um link como “nofollow” informa ao Google que um determinado link não deve ser seguido ou passar a reputação da sua página para as páginas vinculadas a ela.
<a href="http://www.siteindesejado.com.br" rel="nofollow">Conteúdo para não seguir</a>

Se você tiver interesse em utilizar nofollow para todos os links de uma página, você pode usar nofollow na sua meta tag robots da seguinte forma.

<html>
<head>
<title>Nome da página</title>
<strong><meta name="robots" content="nofollow"></strong>
</head>
<body>
...
  • Ofereça conteúdo de qualidade – com toda a certeza, criar conteúdo útil e atraente será o fator de maior influência do que todos os fatores anteriores.
    • Escreve textos fáceis de ler. Evite erros ortográficos.
    • Fale sobre um tema de cada vez, de nada adianta gerar conteúdos muito grandes e que falem sobre muitos assuntos ao mesmo tempo.
    • Utilize uma linguagem adequada ao público principal que deseja atingir.
    • Crie os seus próprios conteúdos e os mantenha atualizados – isso fará com que seus usuários atuais retornem, além de buscar novos visitantes.
    • Ofereça conteúdo e serviços exclusivos.
Estas são algumas dicas para melhorar o posicionamento do seu site diante  dos mecanismos de busca. Em breve espero poder continuar dando algumas informações para ajudá-los a otimizar os seus sites para os mecanismos de busca.
Fontes:
Anúncios

Autocomplete do jQuery UI com PHP

Olá!!!

Bom… depois de muito suor, bateção de cabeça na minha mesa, muitos xingamentos ao meu computador (que não tinha nada a ver ‘coitado’…)… eu consegui implementar no meu sistema o autocomplete “bunitinho”, “lindinho” e “tchuco-tchuco” do jQuery UI!!!! \o/

Bom.. pra início de conversa, favor baixar aqui a versão mais recente do jQuery UI. Descompacta na sua pastinha de trabalho e mãos à obra.

Vamos precisar de dois arquivos: ‘formulario.php’ e ‘buscaDados.php’. O primeiro é onde estará o seu formulário que conterá seu campo autocomplete e o segundo, logicamente, é onde estará a pesquisa dos dados que retornarão para o autocomplete.

Antes de mais nada, em ‘formulario.php’ vamos fazer as chamadas para os arquivos .css e .js que vamos precisar para implementar o autocomplete. Todos se encontram no arquivo que você baixou e descompactou na pastinha de trabalho. No meu caso estou trabalhando com a versão 1.8.9 do jQuery UI que me trouxe a versão 1.4.4 do jQuery.

<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js">
</script><link type="text/css" href="jquery-ui-1.8.9.custom/css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet"/>

Só para lembrar, estas linhas são inseridas dentro das tag’s  <head>e </head>.  =)

Também no arquivo ‘formulario.php’, vamor criar um <form> </form> e dentro dele criar um textfield que vamos nomear de ‘auto’ para facilitar o processo:

<input type="text" id="auto" />

A propriedade ‘id’ do campo é o que permite a referenciação no jQuery. Agora vamos criar uma função ready para criar o campo autocomplete; esta função vem logo abaixo da referenciação dos arquivos .css e .js.

<script type="text/javascript">
  $(document).ready(function() 	{
    $('#auto').autocomplete(
    {
      source: "buscaDados.php",
      minLength: 2
    });
  });
</script>

Viu!? Estou dizendo que o campo ‘auto’ é um campo ‘autocomplete’ e que os dados virão do source ‘buscaDados.php’. Com a propriedade ‘minLength’ eu estou dizendo que o autocomplete será ativado quando eu tiver um mínimo de 2 caracteres digitados no meu campo ‘auto’.

E para finalizar, no arquivo ‘buscaDados.php’ você vai fazer a conexão com o banco de dados e retornar as informações da tabela que você quer:

$hostname = "localhost";
$user = "root";
$pass = "";
$basedados = "teste";
$connect = mysql_connect($hostname,$user,$pass) or die ("Impossível estabelecer conexão com o servidor de banco de dados");
mysql_select_db($basedados) or die ("Impossivel estabelecer conexão com o banco de dados");

//busca valor digitado no campo autocomplete "$_GET['term']
$text = mysql_real_escape_string($_GET['term']);
$query = "SELECT * FROM tabela WHERE campoTexto LIKE '%$text%' ORDER BY campoTexto ASC";
$result = mysql_query($query);
//formata o resultado para JSON
$json = '[';
$first = true;
while($row = mysql_fetch_array($result))
{
  if (!$first) { $json .=  ','; } else { $first = false; }
  $json .= '{"value":"'.utf8_encode($row['campoTexto']).'"}';
}
$json .= ']';

echo $json;

Então… é assim que se cria um campo autocomplete como o da imagem abaixo, que é um print de um pedaço do meu sistema:

Você pode formatar o autocomplete de várias formas, é possível personalizar um tema ou escolher um pré-existente para baixar aqui.

O exemplo que eu me guiei para conseguir aprender a usar esta funcionalidade foi o do burnmind.com que também disponibiliza o fonte para download e um demo. Obs.: o demo deles está configurado para que o autocomplete apareça a partir da 3ª letra digitada (experimente digitar “col”).

Espero ter ajudado! Qualquer coisa é só comentar aew…. =)

Até mais.

Erros na criação de Foreign Key’s no MySql

MySqlOlha eu aqui de novo…. continuando o meu projeto de remodelagem do banco de dados do sistema que irei desenvolver daqui pra frente me deparei com vários erros ao tentar criar minhas foreign keys… então vou listá-los aqui para explicar tudo que descobri e quem sabe ajudar você colega desenvolvedor que está batendo cabeça num erro não muito claro que o MySql te oferece… tem horas que chega a cansar a beleza…

Erro 1:


alter table [tabela1] add constraint fk_tabela1_x_tabela2 foreign key (idTabela1) references tabela2 (idTabela2) on delete restrict on update cascade;
[Err] 1005 - Can't create table 'basedados.#sql-11e0_4f' (errno: 150)

Solução 1:

ERRNO 150… o que é!?

No meu caso o problema foi o seguinte… não sei porque cargas d’água que em algumas tabelas os campos que seriam a minha foreign key estava com o UNSIGNED ligado. E o campo referenciado (primary key da outra tabela) logicamente não era UNSIGNED.

Para quem não sabe, o UNSIGNED define que um campo inteiro ou numérico não pode receber valores negativos (somente valores sem sinal).

Ou seja, ao criar integridade referencial, os campos envolvidos devem ser UNSIGNED ou SIGNED. Se forem divergentes o MySql retornará o ERRNO 150.

Para acertar, eu tive que fazer um modify na coluna que seria minha FK em cada tabela para retirar o UNSIGNED:

#se a definição do seu campo é algo mais ou menos assim
campo1 int(6) UNSIGNED NOT NULL AUTO_INCREMENT;

#repita-o somente tirando o UNSIGNED
alter table tabela1 modify campo1 int(6) NOT NULL AUTO_INCREMENT;

Erro 2:


[SQL] alter table [tabela1] add constraint fk_tabela1_x_tabela2 foreign key (idTabela1) references tabela2 (idTabela2) on delete restrict on update cascade;
[Err] 1452 - Cannot add or update a child row: a foreign key constraint fails (`basedados`.`#sql-11e0_4f`, CONSTRAINT `fk_tabela1_x_tabela2` FOREIGN KEY (`idTabela1`) REFERENCES `tabela2` (`idTabela2`) ON UPDATE CASCADE)

Solução 2:

Que que ocorre nesse ERR 1452?!?!?!

Esse erro ocorre não só na criação da foreign key, mas pode acontecer também quando a foreign key já existir na tabela e você estiver atualizando ou inserindo dados nesta tabela. No caso, esse erro está indicando que constraint foreign key falhou…. Mas como falhou!?!?

Muito simples… a informação do campo da foreign key não é encontrada na tabela2 (a tabela que possui a primary key referenciada). No meu caso, como estou criando as relações em uma base que já existe e já possui informações cadastradas, significa dizer que na tabela1 que eu estou tentando criar a foreign key eu tenho uma ou mais linhas que estão referenciando uma chave primária que não existe na minha ‘tabela2’ (a tabela referenciada).

Se a foreign key já existir e você receber esse erro, significará que você está editando ou inserindo um registro e passando um valor para o campo da foreign key que não possui um registro na tabela2 referenciada (tabela da primary key).

Na minha situação, como minhas tabelas já possuem registros e eu não posso simplesmente limpar a tabela toda, tive que fazer sql’s que deletassem os registros que estão referenciando informações inválidas. Ficou assim mais ou menos:


delete a from tabela1 a left join tabela2 b on b.idTabela2 = a.idTabela2 where b.idTabela2 is null;

Ou seja, faço um select com left join nas minhas duas tabelas e deleto as linhas que vierem com as informações da tabela2 nulas.

Erro 3:

[SQL]
alter table orcamento add constraint fk_orcamento_x_seguradora foreign key (codSeguradora) references seguradora (codSeguradora) on delete restrict on update cascade;
[Err] 1005 - Can't create table 'tiseg.#sql-11e0_4f' (errno: 121)

Solução 3:

E o ERRNO 121??

Mais simples ainda… a sua foreign key já existe!!! Pule para seu próximo comando…. =)

Foreign Key’s no MySql

Hoje passei por uma situação interessante. Estou fazendo a remodelagem de um banco de dados MySql de um sistema que estou trabalhando atualmente. Como o banco é um pouco grande (cerca de 100 tabelas) e está muito mal organizado e sem referenciação nenhuma, resolvi começar pela organização das foreign keys para melhor visualizar o meu modelo relacional.

Porém caí na situação em que eu rodava um comando de criação de foreign key e ela simplesmente não aparecia na minha tabela referente do bd. Pesquiso dali, pesquiso daqui, descobri uma coisa muito interessante:

O ‘problema’ estava acontecendo por causa dos tipos das minhas tabelas…. Isso mesmo, as tabelas do MySql podem ser de vários tipos. Aqui no meu MySql 5.0.51a tenho os seguintes tipos: Memory, MyISAM, Blackhole, MRG_MYISAM, CSV, ARCHIVE e InnoDB.

Por padrão, tabelas criadas no MySql e sem definição do tipo, são criadas sob o tipo MyISAM. Este tipo de tabela não permite a utilização de transações e nem de foreign keys.

Este era o meu problema, as minhas tabelas eram do tipo MyISAM. Então eu tive que convertê-las para o tipo INNODB que me permite gerar foreign keys. Para alterar fiz o seguinte sql:

alter table [tabela] type = INNODB;

O tipo InnoDB prove ao MySql um mecanismo de armazenamento seguro com transações com commit, rollback e recuperação em caso de falhas. O bloqueio é realizado a nível de registro (row locking) ao contrário do MyISAM que faz o bloqueio por tabela (table locking). Isto faz aumentar a performance e concorrência de multi usuários [ele foi desenvolvido para obter o máximo de performance ao processar grande volume de dados].

O InnoDB armazena as tabelas e índices em um espaço de tabela, o qual pode consistir de vários arquivos, diferentemente do MyISAM onde cada tabela é armazenada em um arquivo separado.

Além disso tudo, ainda é o primeiro tipo que suporta restrições Foreign Key…. \o/

Utilizando git + github | Parte 2

Continuando…

Fiquei pensando… e quando já houver um repositório no github?? Como eu faço pra baixar os fontes pro meu pc!? Aprendi… segue abaixo:

cd c:/projetos
mkdir novo_projeto
cd novo_projeto
git clone git://github.com/usuarios/repositorio.git

E tchamrammmmm….. todos os fontes do repositório estão no seu computador… =)

Que que aconteceu aqui!?

Linha 1: me posicionei no diretório onde criarei a cópia do repositório
Linha 2: criei a pasta que armazenará o repositório
Linha 3: entrei na pasta que acabei de criar
Linha 4: clonei um repositório do github para a minha pasta

Enquanto estive pesquisando mais, encontrei dois links muito bacanas com várias informações sobre comandos git: Link1 e Link2 .

Utilizando git + github | Parte 1

Mais uma de meus estudos…  Como estou em uma fase de mudança de emprego e estou indo pra um lugar onde acredito que poderei dar mais sugestões de metodologias de trabalho, tenho estudado várias formas de melhorar não só a produtividade, mas a organização da forma de trabalho também. Sendo assim, após estudar e começar a aplicar a Técnica Pomodoro, começei um estudo sobre a utilização de git e github.

Após ler este post1 e este post2, depois de quebrar a cabeça um pouquinho eu consegui finalmente instalar o git no meu windows e fazer o “push” dos meus arquivos de um projeto para um repositório do github.

Só sei que realmente, enquanto eu estudava a forma de utilização do git, eu me lembrei muito do meu ex-professor @klayson…. Juro que pensei em todo instante: “Porque não me dediquei mais às aulas de TETI*!!!”…rsrsrs… enfimmm… #desabafo

Bom…. após realizar o seu cadastro em github.com você pode criar um novo repositório aqui. Um repositório é o local onde ficam armazenados os arquivos do projeto, versões e históricos. É neste local que os desenvolvedores podem submeter as suas alterações para o projeto. Qual é a idéia!?…. A idéia é a de que você tenha um repositório uma central de arquivos e que a sua equipe de desenvolvedores possam manter os fontes do sistema de uma maneira mais organizada, onde cada desenvolvedor pode e DEVE informar as alterações realizadas no código a cada commit realizado.

Só clareando a idéia aqui, um commit é um ponto histórico no desenvolvimento do projeto, e esses pontos podem ser recuperados quando necessário.

Como utilizo windows, tive que baixar esse git aqui que nada mais é do que um git para windows…. =) … Após baixar e instalar, abra o GitBash, o terminal git onde você fará todos os comandos.

Configurando sua identidade:

A primeira coisa a se fazer é configurar a sua identidade, que será utilizada cada vez que você realizar um commit. Então digite essas linhas no seu terminal, somente trocando para as suas informações…. #logico

git config --global user.name "Nome do Usuário"
git config --global user.email "emailusuario@gmail.com"

Após ter feito esta configuração, é possível verificá-las com o comando:

git config --list

Conectando o git ao github:

Para conectar o seu git ao github é necessário gerar uma chave pública e informá-la na sua conta do github. No terminal execute o seguinte comando:

ssh-keygen -t -rsa

Se estiver no windows, vá em ‘c:/usuários/seu_usuario/.ssh’ e abra o arquivo ‘id_rsa.pub’ no bloco de notas e copie todo o seu conteúdo.
Acesse a configuração de conta no github, vá em ‘SSH Public Keys’ clique em ‘Add another public key’ e cole a informação copiada no campo ‘Key’.
Depois digite no seu terminal o comando abaixo, se estiver tudo certo você receberá uma mensagem de boas vindas:

ssh git@github.com

Enviando um repositório para o github:

Agora vem a parte mais bacana, para enviar um projeto para o repositório que criamos lá em cima você deve seguir estes passos no bash: se posicionar no diretório do projeto, inicializar o git, adicionar os arquivos do projeto para o repositório e enviá-los. Simples assim… \o/

cd c:/caminho/pastadoprojeto
git init
git add --all
git commit -m 'Teste de github'
git remote add origin git@github.com:usuario/repositoriogithub.git
git push origin master

Explicando:
Se diferente de mim você se lembra do que estudou nas aulas de Linux ou se já conhece mesmo, deve identificar que o comando ‘cd’  (linha 1) te leva para um diretório. Estou levando em consideração que você já tenha o seu projeto que deseja enviar para o github… assim como era o meu caso… existem inúmeros post por aí que levam em consideração que você ainda vai criar este diretório (mkdir ok?) … =)

Linha 1 : estou me posicionando no diretório em que estão os fontes do meu projeto
Linha 2: inicialização do git
Linha 3: como já estou posicionada no diretório de trabalho e já tenho todo o meu projeto nesta pasta, vou adicionar ao meu repositório todos os meus fontes [–all] (arquivos e pastas)
Linha 4: o comando commit deve ser feito toda vez que você deseja salvar as informações adicionadas ou modificadas no repositório. O [-m] me permite adicionar uma mensagem explicativa deste commit.
Linha 5: estou informando o caminho do meu repositório no github
Linha 6: estou efetivando o envio

Por enquanto já sabemos enviar um projeto para o github e consequentemente realizar atualizações nesse repositório [add e commit]…. Conforme eu for aprendendo o resto vou postando… Até mais… 😉

* TETI = Tópicos Especiais em Tecnologia da Informação – matéria da UVV em que o professor “escolhe” o que vai dar… se você conhece o Klayson já deve imaginar que estudamos Linux né!? Pois é… foi isso mesmo…rs 😉