Webdev com Café

Desenvolvimento web, tecnologia e insanidade

  • Home
  • About

4

Jun

‘Tuitando’ com PHP

Posted by Robson  Published in PHP

Ainda não descobri a real utilidade do Twitter, mas seu uso como ferramenta de marketing viral vem crescendo enormemente.

Pensando nisso, eu resolvi desenvolver uma forma de ‘tuítar’ diretamente de um site meu sempre que esse fosse atualizado (como o wordpress faz), incluindo a URL encurtada com o link para a atualização, e explico, no código abaixo, como fazer isso.

Considerações:

  1. Pro código funcionar, é necessário baixar a classe Twitter (o endereço está no código) e possuir uma conta no Twitter.
  2. Se desejar inserir uma URL encurtada no seu ‘Twit’ é necessário também uma conta no serviço Bit.ly (existem muitos outros mas este é usado nessa demonstração)
  1. //Iniciando as variáveis
  2. //Do bit.ly
  3. //Para utilizar a API do bit.ly, basta possuir uma conta registrada(gratuitamente)
  4. //Seu login
  5. $blogin = ”;
  6. //Sua API key
  7. $bkey = ”;
  8.  
  9. //Do Twitter
  10. $tlogin = ”;
  11. $tpass = ”;
  12.  
  13. //Texto a ser inserido no twitter
  14. //The number of the beast
  15. //Letra e música de IRON MAIDEN
  16.  
  17. $iron = "’Woe to you, Oh Earth and Sea,
  18. for the Devil sends the beast with wrath,
  19. because he knows the time is short…
  20. Let him who hath understanding reckon
  21. the number of the beast for it is a human number,
  22. it’s number is Six hundred and sixty six’
  23.  
  24. I left alone, my mind was blank.
  25. I needed time to think to get the memories from my mind.
  26.  
  27. What did I see, can I believe,
  28. That what I saw that night was real
  29. and not just fantasy.
  30.  
  31. Just what I saw, in my old dreams,
  32. Were they reflections of my warped mind staring back at me.
  33.  
  34. ‘Cause in my dreams, it’s always there,
  35. The evil face that twists my mind and brings me to despair.
  36. Yeah!!!
  37.  
  38. The night was black, was no use holding back,
  39. ‘Cause I just had to see, was someone
  40. watching me.
  41. In the mist, dark figures move and twist,
  42. Was all this for real, or just some kind of hell.
  43.  
  44. Six, six, six the number of the beast.
  45. Hell and fire was spawned to be released.
  46.  
  47. Torches blazed and sacred chants were praised,
  48. As they start to cry, hands held to the sky.
  49. In the night, the fires burning bright,
  50. The ritual has begun, Satan’s work is done.
  51.  
  52. Six, six, six the number of the beast.
  53. Sacrifice is going on tonight.
  54.  
  55. This can’t go on, I must inform the law.
  56. Can this still be real or just some crazy dream.
  57. But I feel drawn towards the evil chanting hordes,
  58. They seem to mesmerize…can’t avoid their eyes,
  59.  
  60. Six, six, six the number of the beast.
  61. Six, six, six the one for you and me.
  62.  
  63. I’m coming back, I will return,
  64. And I’ll possess your body and I’ll make you burn.
  65. I have the fire, I have the force.
  66. I have the power to make my evil take its course.";
  67.  
  68. //Codificando o texto para utf8 (necessário para acentos e etc)
  69. $txt = utf8_encode($iron);
  70.  
  71. //Mãos à obra
  72.  
  73. //Primeiro, encurtamos a URL utilizando a API do bit.ly
  74. // Iniciamos o CURL
  75. $ch = curl_init();
  76.  
  77. //O parâmetro CURLOPT_RETURNTRANSFER com valor 1 vai fazer com que curl_exec retorne a página
  78. curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
  79.  
  80. //Inserimos a URL a ser encurtada
  81. $url = ‘http://melhordaputaria.com.br’;
  82.  
  83. // É necessário codificar a URL para funcionar
  84. $long = urlencode($url);
  85.  
  86. //Acessamos a API do bit.ly solicitando a URL encurtada e a resposta
  87. //em formato texto
  88. curl_setopt($ch, CURLOPT_URL, "http://api.bit.ly/v3/shorten?login=$blogin&apiKey=$bkey&longUrl=$long&format=txt");
  89.  
  90. //A variável $short recebe a URL encurtada
  91. $short = curl_exec ($ch);
  92.  
  93. // Fechamos o CURL
  94. curl_close ($ch);
  95.  
  96. //Hora de criar a mensagem a ser inserida no Twitter (com, no máximo, 140 caracteres)
  97. //Contamos o tamanho do texto, mais o tamanho da URL encurtada mais 1 (Pra colocar um caracter ‘-’ entre um e outro)
  98.  
  99. if (strlen($txt) + strlen($short) + 1 > 140)
  100.         //Garantimos que o texto a ser atualizado tenha até 140 caracteres (matemática simples)
  101.         $msg = substr($txt,0,140 – (strlen($short) + 4)) . ‘…-’ . $short;
  102. else
  103.         $msg = $txt . ‘-’ . $short;
  104.  
  105. //Inserimos a classe Twitter
  106. //disponível em http://www.phpclasses.org/package/4216-PHP-Update-the-status-of-a-Twitter-user.html
  107. require "Twitter.class.php";
  108.  
  109. // Instanciamos um objeto Twitter, passando o login e senha do Twitter a ser atualizado
  110. $tweet = new Twitter($tlogin, $tpass);
  111.  
  112. //Finalmente, atualizamos o Twitter
  113. $success = $tweet->update($msg);
  114. if ($success)
  115.         //Mostramos uma mensagem de sucesso
  116.         echo "Funciona!";
  117. else
  118.         //Ou o erro ocorrido
  119.         echo $tweet->error;
  120.  
  121.  

Dúvidas e sugestões?? Deixe um comentário

no comment

6

Apr

Novo serviço

Posted by Robson  Published in JQuery, Javascript, PHP

A ON THE WEB, orgulhosamente, apresenta seu novo serviço:

HOTPAGES

Visando tornar mais acessível a confecção de websites de forma que mais pessoas e instituições possam se beneficiar dessa importante ferramenta de marketing, a OTWDD criou um exclusivo sistema de HOTPAGES.

HOTPAGES são websites de baixo custo, pré-construídos, constituídos de 4 (quatro) páginas de conteúdo e mais um formulário de contato além de um formulário de cadastro de emails para envio de newsletters (mala direta virtual). Essa pré-construção visa acelerar o processo de desenvolvimento de cada website e reduzir seu custo, sem diminuir sua flexibilidade. Sendo assim, cada HOTPAGE pode ser customizada para atender às necessidades específicas de cada cliente, podendo, inclusive, possuir ferramentas para AUTOMAÇÃO COMERCIAL.

Cada HOTPAGE possui uma área administrativa privada onde todo o seu conteúdo pode ser atualizado de forma simples e rápida por qualquer pessoa autorizada sem a necessidade de qualquer conhecimento sobre construção de sites, um sistema de envio de newsletters e um link para as estatísticas de acesso ao site, fornecidas pelo GOOGLE ANALYTICS™.

PRINCIPAIS CARACTERÍSTICAS

  • Baixo custo de desenvolvimento.
  • Nenhum custo mensal de manutenção.
  • Desenvolvimento rápido.
  • Flexibilidade.
  • Sistema de envio de newsletters (mala direta virtual).
  • Agilidade para atualização de conteúdo.
  • Domínio próprio opcional (pode ser usado www.bqbuscas.com.br/suaempresa/).
  • Estatísticas de acesso ao site.
  • Possibilidade de incluir ferramentas de AUTOMAÇÃO COMERCIAL.

DEMONSTRAÇÃO

Para ver uma demonstração de uma HOTPAGE, basta acessar www.bqbuscas.com.br/sitebarato/

Para acessar a área administrativa, www.bqbuscas.com.br/sitebarato/admin/index/ .

(Por questões de segurança, a área administrativa não funciona no Internet Explorer 7 ou anterior).

SAIBA MAIS

Para saber mais, basta entrar em contato através do email contato@ontheweb.com.br ou do telefone (32)8803-7769.

no comment

9

Mar

FNF

Posted by Robson  Published in FNF, PHP

No fim de 2008, enquanto negociava com um cliente o maior sistema que já fiz na vida (migrar um sistema em clipper e um em delphi com db em firebird pra PHP/Mysql pra rodar numa intranet) me deparei com a necessidade de algo para agilizar o desenvolvimento e comecei a estudar sobre Ruby on Rails e frameworks PHP.

Achei tudo lindo, principalmente a parte de scaffolding, mas percebi que a curva de aprendizado seria muito grande até poder desenvolver o sistema que eu precisava.

Durante as minhas pesquisas, me deparei com este brilhante texto do Lerdof (sim, o Rasmus) : http://toys.lerdorf.com/archives/38-The-no-framework-PHP-MVC-framework.html (se você não sabe inglês pode testar a api do language no playground do google e descobrir se a tradução é convincente) e decidi começar meu próprio FW.

FNF é uma ferramenta que agiliza o meu trabalho e eu dúvido muito que seja tão útil pra mais alguém. Porém, como eu sou defensor de que cada um reúna as próprias ferramentas, acredito que as idéias podem ser muito úteis. Ao invés de publicar aqui a minha compilação de ferramentas, eu prefiro discutir sobre o porque de tê-las reunido e a forma que eu o fiz para que interessados em fazer o mesmo vejam que não é tão difícil assim.

Visando reinventar a roda o mínimo possível, eu apenas adicionei algum código meu junto com ferramentas que eu estava acostumado a usar como jquery, smartoptizer, doctrine, smarty e outras com os seguintes objetivos:

  1. Agilizar o tempo de desenvolvimento de projetos
  2. Criar uma camada de abstração de dados usando ORM
  3. Utilizar efeitos e recursos do jquery.
  4. Otimizar os sistemas segundo os padrões propostos pelo Yahoo
  5. MVC-izar os sistemas
  6. Implementar scaffolding

No próximo post, mostro a estrutura do FNF.

Em tempo, FNF é meu acrônimo para Framework Not Framework mas também pode ser o recursivo para FNF is Not a Framework.

no comment

11

Dec

PHP só pra maiores!

Posted by Robson  Published in Uncategorized

Não leitores, vocês não estão lendo errado, é o melhor da putaria mesmo, putaria de verdade, mulher pelada, foto de namorada pelada tirada do celular, caiu na net, brasileirinhas, sexo na web cam, anal, essas coisas que a net está cheia, e diga-se de passagem cheia de vírus também, aqui vai uma dica de site de putaria sem a putaria dos sites de putaria, ou seja aquela putaria que ninguém gosta, janelinha subindo, milhares de links que não levam a lugar algum, o site www.melhordaputaria.com.br , é uma grande novidade no gênero, pois formou-se uma coletânea de muitos outros sites em apenas um lugar, e o melhor de tudo, local seguro, diria que torna-se quase uma camisinha para seu PC querido que já não aquenta mais tanto vírus, doenças venéreas oriundas do mundo virtual, isso sim é putaria sem sacanagem, vai ai a dica para a turma da bronha e vouyers. Site aprovado e recomendado pelo Blog Críticos de Qualquer Coisa. Ah já estava quase esquecendo, o www.melhordaputaria.com.br , possui um vínculo com os Críticos, não se assustem ao verem algum banner dando sopa pelas bandas de lá.

Este trecho foi retirado do blog criticosdequalquercoisa.blogspot.com e refere-se ao novo serviço da ON THE WEB (mais uma solução inovadora utilizando PHP): O site é um indexador de atualizações de fotos de conteúdo adulto de sites brasileiros e um filtro desses para impedir a execução de scripts no navegador dos usuários. Uma mão não roda tecnológica para os pervertidos de plantão.
Não deixe de conferir.

Num próximo post, falo sobre a tecnologia utilizada.

no comment

9

Dec

Polaroid Gallery com JQuery UI

Posted by Robson  Published in JQuery, Javascript

Antes de mais nada, veja o resultado aqui.
Um tempo atrás, eu estava desenvolvendo um sistema e procurei na net por uma galeria de fotos interessante. Me deparei com essa belíssima galeria em flash.
Entretanto, notei alguns pontos que me fizeram desistir de usá-la, principalmente:
• Ser em flash (praticamente aboli o uso do flash depois que conheci o jquery).
• Seu tamanho e o conseqüente tempo de carregamento.
Procurando por uma solução, acabei encontrando algumas usando CSS3 o que também inviabilizava o que eu queria realizar.
Acabei por entender o que eu queria fazer e desenvolvi a técnica demonstrada aqui e descrita abaixo utilizando o JQuery. Antes, porém, permitam-me algumas ressalvas:
1. Eu poderia ter criado um plugin, mas ele dependeria de tantos outros que eu achei melhor não fazê-lo.
2. Se eu estivesse usando esse script em produção, eu teria utilizado o smartoptimizer e concatenado os js e css.
3. Esse script utiliza js obstrusivamente, ou seja, só funciona com js habilitado no navegador. É muito fácil resolver isso, mas onde foi utilizado, não era uma necessidade.
4. A aparência poderia ser mais próxima da galeria em flash se assim desejássemos.
5. Só acho viável utilizar tantos scripts externos se boa parte deles já tiver sido carregada em páginas anteriores.

Pra começar, coloque o seguinte código HTML, muito fácil de entender e adaptar:

  1.  
  2. <div id="centeredbox"></div>
  3. <div id="polaroid">
  4.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  5.    <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  6.      <a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título"  src="photos/tn_f3.jpg" width="120" height="106" /></a>
  7.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  8.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  9.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  10.     <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  11.     <a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título"  src="photos/tn_f3.jpg" width="120" height="106" /></a>
  12.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  13.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  14.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  15.     <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  16.     <a href="photos/f3.jpg"><img class="shadow" title="Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma  coisa gigantesca e funciona… "  src="photos/tn_f3.jpg" width="120" height="106" /></a>
  17.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  18.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  19. </div>
  20.  

A seguir, vamos utilizar css para cuidar da aparência de nosso script (mas não só da aparência):

  1.  
  2. //Vamos dar cor ao fundo:
  3. body, html{ background:#9E967F;}
  4. //Definimos  as características que as imagens dentro da div Polaroid terão:
  5. #polaroid img{
  6.         border:none;
  7.         background:#FFFFFF;
  8.         padding: 5px 5px 13px;
  9.         position:absolute;
  10. }
  11. //Mudamos o cursor do mouse para ‘move’ sobre as imagens:
  12. #polaroid img:hover{
  13.         cursor:move;
  14. }
  15. //Definimos o tamanho da div Polaroid pra controlar a disposição das imagens:
  16. #polaroid{
  17.         width:500px;
  18.         height:500px;
  19. }
  20. //Definimos o tamanho da div centeredbox que é usada para direcionar o efeito transfer da jquery ui:
  21. #centeredbox{
  22.         width:250px;
  23.         height:250px;
  24. }
  25. //Definimos o estilo para o efeito transfer da jquery ui:
  26. .ui-effects-transfer { background:#FFFFFF; }
  27.  

Agora, incluímos um arquivo css externo do plugin slimbox, o jquery , o jquery ui e alguns plugins:

  1.  
  2. <link href="css/slimbox2.css" rel="stylesheet" />
  3.  
  4. <script type="text/javascript" src="js/jquery.js"></script>
  5. <!–Arquivo principal do jquery ui–>
  6. <script type="text/javascript" src="js/ui.core.js"></script>
  7. <!–Arquivo para o efeito ‘arrastar’ do jquery ui–>
  8. <script type="text/javascript" src="js/ui.draggable.js"></script>
  9. <!–Arquivo principal dos efeitos do jquery ui–>
  10. <script type="text/javascript" src="js/effects.core.js"></script>
  11. <!–Arquivo principal do efeito ‘transfer’ do jquery ui–>
  12. <script type="text/javascript" src="js/effects.transfer.js"></script>
  13. <!—Plugin Center (o efeito pode ser conseguido só com CSS)–>
  14. <script type="text/javascript" src="js/jquery.center.js"></script>
  15. <!—Plugin slimbox de efeito similar ao lightbox–>
  16. <script type="text/javascript" src="js/slimbox2.js"></script>
  17. <!—Plugin shadow do jquery ui cujo desenvolvimento foi descontinuado –>
  18. <script type="text/javascript" src="js/fx.shadow.js"></script>
  19.  

Pra terminar a mágica, um pouco de js:

  1.  
  2. //Função para gerar números aleatórios em js
  3. function randrang(minVal,maxVal,floatVal)
  4. {
  5.   var randVal = minVal+(Math.random()*(maxVal-minVal));
  6.   return typeof floatVal==‘undefined’?Math.round(randVal):randVal.toFixed(floatVal);
  7. }
  8. //Evento onready do jquery
  9. $(function(){
  10.         //Criamos a variável thumbs que vai servir como parametro para
  11.         //o slimbox
  12.         thumbs = ‘[';
  13.        
  14.         //Para cada imagem dentro do container #polaroid...
  15.         $("#polaroid img").each(function(){
  16.                 //posicionamos aleatóriamente
  17.                 var top = randrang(0,$("#polaroid").height());
  18.                 var left = randrang(0,$("#polaroid").width());
  19.                 $(this).css('top',top+'px');
  20.                 $(this).css('left',left+'px');
  21.                 //pegamos o endereço da imagem
  22.                 thsrc = $(this).attr('src');
  23.                 //extraímos o prefixo tn_
  24.                 src = "photos/"+thsrc.substring(10);
  25.                 //pegamos o título da imagem (que servirá de legenda)
  26.                 title = $(this).attr('title');
  27.                 //adicionamos a imagem à variável thumbs
  28.                 thumbs += '["'+src;
  29.                 //se houver um título, adicionamos ele também
  30.                 if (title)
  31.                         thumbs += '","'+title;
  32.                 thumbs += '"],’
  33.         });
  34.         //retiramos a vírgula final de thumbs (isso é POG)
  35.         tempthumbs = thumbs.substring(0,thumbs.length -1);
  36.         //o uso de ‘eval’ é necessário pro slimbox funcionar
  37.         //depois, fechamos a variável thumbs com ‘]’
  38.         thumbs = eval (tempthumbs+‘]’);
  39.        
  40.         //Aqui, tornamos as imagens dentro de #polaroid arrastáveis e…
  41.         $("#polaroid img").draggable({
  42.                 //Fazemos com que as sombras a sigam quando forem arrastadas
  43.                 drag: function(){
  44.                         $(this).next().css(‘top’,$(this).css(‘top’));
  45.                         $(this).next().css(‘left’,$(this).css(‘left’));
  46.                 }
  47.         });
  48.         //Posicionamos as sombras
  49.         $(‘.shadow’).shadow({ color: "#444", offset: 3, opacity: 0.3 });
  50.        
  51.         //Centralizamos #centeredbox
  52.         $("#centeredbox").center();
  53.         //Pra terminar, criamos o evento onclick para cada imagem
  54.         $("#polaroid img").click(function(){
  55.                 //Capturamos o índice da imagem
  56.                 index = $("#polaroid img").index(this);
  57.                 //Criamos o efeito transfer da imagem para #centeredbox e…
  58.                 $(this).effect(‘transfer’,{ to: "#centeredbox", className: ‘ui-effects-transfer’ },500,function(){
  59.                         //Chamamos o plugin slimbox no ‘callback’
  60.                         //Passando a ‘array’ (na verdade não é uma array) de imagens e títulos
  61.                         //e o índice da imagem clicada
  62.                         $.slimbox(thumbs,index);               
  63.                 });
  64.                 //Preciso explicar o que isso faz?
  65.                 return false;
  66.         });
  67.        
  68. });
  69.  

O leitor atento vai perceber que a sombra não acompanha a imagem tão bem quanto deveria, isso é a principal limitação desse script (mas não a única). Se tiver sugestões para resolver isso, para melhorar o script ou tiver dúvidas, basta postar nos comentários.

Tags: fotos, gallery, Javascript, JQuery, jquery ui, Polaroid

no comment

29

Nov

Documento do Word no PHP

Posted by Robson  Published in PHP

Já teve vontade de abrir seus documentos do Word no PHP??
Eu não tive, mas, há uns meses fui obrigado a fazê-lo e acabei aprendendo.
Veja como é simples, basta usar a tecnologia COM que permite interagir com os softwares da Microsoft (vale lembrar que isso só funciona no Windows):

  1.  
  2. //Pra começar, instanciamos o objeto COM passando ‘word.application’ como parametro para ‘abrir o word’
  3. $word = new COM("word.application") or die ("Erro!!");
  4.  
  5. //Em seguida, atribuímos à variável $file, o nome do documento que será aberto
  6. $file = "arquivo.doc";
  7.  
  8. //Aqui, abrimos o documento em questão
  9. $word->Documents->Open(realpath($file));
  10.  
  11. // Agora, extraímos seu conteúdo para a variável $content
  12. //convertento o mesmo para string
  13. $content = (string) $word->ActiveDocument->Content;
  14.  
  15. //Convertemos as quebras de linha para html                    
  16. $txt = nl2br($content);
  17.  
  18. //Pra visualizar o conteúdo, basta imprimir a variável
  19. echo $txt;
  20.  
  21. //Agora, fechamos o documento…                       
  22. $word->ActiveDocument->Close(false);
  23. //"Saímos do word" (ou quase, hahahaha)
  24. $word->Quit();
  25. //Os passos seguintes, são recomendados pra
  26. //evitar vazamento de memória
  27. $word = null;
  28. unset($word);
  29.  

Tudo resolvido, vocês podem fazer o que quiserem com o documento. No meu caso, eu importei ele pro MySQL.

Os testes foram feitos localmente. Qualquer problema, entrem em contato ou consultem a documentação do PHP.

Num proximo post, eu falo sobre como criar documentos do Word usando PHP.

no comment

29

Nov

Já brincou no parquinho do Google hoje??

Posted by Robson  Published in Javascript

Nada como um parquinho pra fazer um webdeveloper se sentir criança de novo. Principalmente se este parquinho for coisa do Google.

Se você está pensando em escorregadores hitech e coisas do gênero, conheça o Ajax API Playground.

De vez em quando eu entro lá pra brincar um pouco com o GFC ou o Youtube.

Queria que isso existisse quando eu levei uma surra da API do Maps da última vez. Escrevi sobre isso no último post.

1 comment

28

Nov

Marcador customizado no Google Maps

Posted by Robson  Published in Javascript

O Google Maps é tão popular que até o novo Monopoly é feito usando ele (Já viram o Monopoly City Streets??).

Acho que todo mundo sabe que sua api é aberta e qualquer um pode integrá-lo em qualquer site, de forma que cada vez mais ele é usado em páginas e mashups, mas me incomoda muito o fato de todo mundo usar os marcadores padrão.

Por isso, acabei descobrindo como é fácil usar uma imagem png no lugar e diferenciar minhas aplicações usando o Maps.

Pra começar, é preciso ter uma chave pra acessar as apis do Google. Pode ser adquirida aqui.

Depois, você pode começar a brincadeira e o resultado final pode ser conferido ao vivo no siteBQ Buscas, basta fazer uma busca qualquer (padaria, por exemplo).

O código css é colocado na ‘head’ do documento:

  1.  
  2. .map{
  3.   width: 500px;
  4.   height: 300px;
  5.   margin:auto;
  6. }

Pro mapa funcionar e aparecer no lugar correto, você precisa especificar largura e altura da div onde ele vai ser colocado.

Em seguida, dentro do ‘body’ basta colocar uma div com um id:

  1.  
  2.   <div class="center">
  3.     <div id="map" class="map"><img src="img/loader.gif" alt="Carregando" />
  4.     <strong>Carregando mapa…</strong></div>
  5.    </div>
  6.  

Pra enfeitar, eu coloquei um gif animado e um texto enquanto o mapa estiver sendo carregado.

Boas práticas sugerem colocar os códigos javascript antes da tag de fim do ‘body’ pra fins de otimização (Sugerem muitas outras coisas também, mas eu não fiz nada disso no meu exemplo).

Comece carregando a api de javascript do Google:

  1.  
  2.   <script src="http://www.google.com/jsapi?key=ABQIAAAAzj-OGyVjTTSQGi3W9MLjeBQDLsgpuvzXISNg00WuSlyBJmwwwhRSA_HD2I3GTUAX29iSO_BTc2QBKQ"></script>
  3.  

É uma boa hora pra adquirir a chave para api, já que elas são únicas pra cada site. A que escrevi acima é do site BQ Buscas onde está postado o exemplo.

Agora, dentro de uma tag ‘javascript’ ou, preferencialmente, num arquivo js externo, vai o seguinte código:

  1.  
  2.   //Pra começar, chamamos a versão 2 da api do Maps
  3.           google.load("maps", "2");
  4.      
  5.       function loadMap() {
  6.         //Testamos a compatibilidade do navegador
  7.                 if (GBrowserIsCompatible()) {
  8.          
  9.                   //Iniciamos um mapa e atribuímos ele à variável map passando
  10.                   //como parâmetro o id da div onde o mapa será carregado
  11.                   //(notem que as variáveis podem ter nomes diferentes)
  12.                   var map = new GMap2(document.getElementById("map"));
  13.        
  14.                   //Iniciamos um geocoder
  15.                   var geocoder = new GClientGeocoder();
  16.  
  17.                   // Aqui, criamos nosso ícone
  18.                   var mgIcon = new GIcon(G_DEFAULT_ICON);
  19.                   mgIcon.image = "img/mgicon.png";//Passamos a localização da imagem
  20.                   mgIcon.iconSize = new GSize(32, 32);//seu tamanho
  21.                   mgIcon.iconAnchor = new GPoint(20, 20);//e o posicionamento em relação às coordenadas
  22.                  
  23.                   //Já instanciamos o mapa e o ícone, porém nenhum deles foi efetivamente usado
  24.                        
  25.                   //Agora, usando json, ’setamos’ as opções para marcadores (no nosso caso, seu ícone)
  26.                   markerOptions = { icon:mgIcon };
  27.                  
  28.                   //Pra terminar, determinamos o endereço a ser buscado
  29.                   //podia ser uma rua também, e a api é bem flexivel nesse sentido
  30.                   //experimentem colocar endereços de formas distintas
  31.                   var address = "barbacena";
  32.  
  33.                   //Depois de todos os objetos instanciados e devidamente configurados,
  34.                   //vamos criar o mapa
  35.                    
  36.                         //Primeiro verificamos se o geocoder foi iniciado
  37.                         if (geocoder) {
  38.                           //Chamamos agora o método do geocoder responsável por transformar
  39.                           //o endereço em localização geográfica e passamos pra ele uma
  40.                           //função callback
  41.                           geocoder.getLatLng(
  42.                             address,
  43.                             function(point) {
  44.                                   //Se o endereço não foi encontrado…
  45.                                   if (!point) {
  46.                                           alert(address + " not found");//…avisamos num alert
  47.                                   } else { //Senão…
  48.                                        
  49.                                           map.setCenter(point, 15); //Centralizamos o mapa nas coordenadas encontradas e com o zoom de 15
  50.                                           map.addControl(new GMapTypeControl());//Adicionamos o controle de tipo de mapa…
  51.                                           map.addControl(new GSmallMapControl());//..o controle do mapa em si
  52.                                           map.addOverlay(new GMarker(point, markerOptions));// e posicionamos nosso marcador com a imagem exolhida
  53.                   }
  54.                 }
  55.               );
  56.             }
  57.         }
  58.       }
  59.       google.setOnLoadCallback(loadMap);//Agora, chamamaos a função loadMap quando tudo estiver carregado
  60.  

Fácil, não?? (E se eu tivesse me entendido com o wordpress, teria ficado bonito também..)

Num próximo post, conto como customizar os ícones pra traçar rotas…
Postem dúvidas e sugestões nos comentários.

2 comments

28

Nov

Hello world!

Posted by Robson  Published in Uncategorized

Muito prazer, meu nome é Robson e eu sou webdeveloper!!

Conduzo, com mãos de ferro, um exército de uma pessoa só numa busca constante por inovação e é aqui que eu divido os resultados dos meus estudos e minhas brincadeiras com vocês.

Welcome to the jungle…

no comment

September 2010
M T W T F S S
« Jun    
 12345
6789101112
13141516171819
20212223242526
27282930  

Blogroll

  • Development Blog
  • Documentation
  • Plugins
  • Suggest Ideas
  • Support Forum
  • Themes
  • WordPress Planet

Categories

  • FNF (1)
  • Javascript (4)
  • JQuery (2)
  • PHP (4)
  • Uncategorized (2)

Archives

  • June 2010 (1)
  • April 2010 (1)
  • March 2010 (1)
  • December 2009 (2)
  • November 2009 (4)

Recent Entries

  • ‘Tuitando’ com PHP
  • Novo serviço
  • FNF
  • PHP só pra maiores!
  • Polaroid Gallery com JQuery UI
  • Documento do Word no PHP
  • Já brincou no parquinho do Google hoje??
  • Marcador customizado no Google Maps
  • Hello world!

Recent Comments

  • Robson in Marcador customizado no Google Maps
  • betinho silva in Marcador customizado no Google Maps
  • Denner in Já brincou no parquinho do Google hoje??
  • Random Selection of Posts

    • Novo serviço
    • Hello world!
    • Marcador customizado no Google Maps
    • Polaroid Gallery com JQuery UI
    • ‘Tuitando’ com PHP
    • FNF
    • Documento do Word no PHP
© 2008 Webdev com Café is proudly powered by WordPress
Theme designed by Roam2Rome