Html5 e Geolocalização

Recentemente eu me deparei com a necessidade, de saber a localização de um usuário no momento em que ele está preenchendo uma tela de cadastro. E graças ao HTML5, hoje nós podemos fazer esse tipo de monitoramento.

Primeiro, vamos entender que existem três maneiras do agente de usuário descobrir a nossa posição:

• Geolocalização IP – essa forma é usada pela maioria dos navegadores nos nossos computadores. Utilizam-se de consultas whois e serviços de localização de IP que permitem determinar a cidade ou a região em que você está.
• Triangulação GPRS – basicamente para celulares sem GPS ou com GPS desligado. Para estes casos, é possível determinar a sua posição através da triangulação das antenas GPRS mais próximas. Mais preciso do que a Geolocalização IP, consegue mostrar em qual parte do bairro você está.
• GPS – é a forma de localização mais precisa, com margem de erro de apenas uns 5 metros. Pode ser usada por celulares ou tablets com o GPS ligado.

Pois bem, conhecendo melhor internamente as várias formas de se localizar o nosso usuário. Vamos ao que interessa…. como saber onde ele está enquanto está navegando ou fazendo um cadastro no meu sistema web?

Basicamente, em primeiro lugar precisamos saber se o agente do usuário tem suporte à geolocalização do Html5 e se possuir, eu chamarei o script que busca a geolocalização.

if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(getPosicao, displayError);
}

Percebam que eu chamei a função ‘getCurrentPosition’ e que ela recebe dois parâmetros (getPosicao e displayError). Esses dois parâmetros, são funções callback.

• A primeira função recebe um objeto de posicionamento, e é através dele que conseguimos pegar a latitude e longitude da minha localização.

function getPosicao(position){
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  alert('Sua posicao: '+ lat + ' - ' + lon);
 }

• A segunda função serve para fazer o tratamento de erro. O nosso usuário pode escolher por não compartilhar sua posição, ou qualquer outra coisa pode dar errado na hora de pegar a geolocalização. Cada erro possui um código que vai de 0 a 3. É possível ver os significados dos erros na função abaixo.

function displayError(error) {
  var errors = {
    0: 'Erro Desconhecido',
    1: 'Permissão negada',
    2: 'Posição indisponível',
    3: 'Timeout'
  };
  alert('Ocorreu um erro: ' + errors[error.code]);
}

• Ainda é possível enviar para a função ‘getCurrentPosition’, um terceiro parâmetro que é um objeto de configuração. Esse objeto não será utilizado neste exemplo, mas ele pode ter três propriedades: enableHighAccuracy (true/false para o modo de alta precisão), timeout (tempo máximo em milissegundos para esperar pela posição), maximumAge (tempo máximo em milissegundos que o navegador pode cachear a posição).

Pronto! Com isso você já consegue pegar a localização do seu usuário. A partir daí você pode exibir essas informações na tela, usar a api do google maps e exibir um mapa, mandar essa informação para algum campo hidden no seu formulário e salvar essa informação no seu banco de dados. Enfim, com essas informações você já pode desenvolver a situação que for necessária.

😉

GridView – Exibindo cabeçalho mesmo quando não há dados

Oláa,

Essa dica é muito simples, porém se trata de um detalhe “besta” que eu custei a descobrir como que se fazia. Quando eu estive precisando disso, ao pesquisar no Google encontrei diversos tipos de gambiarras… algumas muito feias por sinal!!!rsrs..

Quando estamos fazendo uma tela em C#, ao utilizar o GridView logo percebemos que quando o DataSource ligado a este gridview não está retornando nenhum registro o grid simplesmente não aparece. E nem sempre isso é o ideal, às vezes precisamos deixar a vista pelo menos o cabeçalho do grid que em algum momento será preenchido com um lista de informações.

Para isso, basta alterar duas propriedades de aparência do grid: ‘ShowHeaderWhenEmpty’ e ‘EmptyDataText’.

ShowHeaderWhenEmpty recebe true/false que neste caso deve receber true.

EmptyDataText recebe o texto que deve ser exibido no grid caso ele não tenha dados, por exemplo ‘Não há registros’.

Como resultado, teremos um grid com esta aparência quando não houverem dados.

Simples né?? São pequenos detalhes que fazem o diferencial na sua aplicação… 😉

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:

Manual Google sobre Otimização de sites para mecanismos de pesquisa

SEO Master :: Curso SEO :: OnPage SEO

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

Olha 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…. =)