Como fazer uma campanha de e-mail marketing que tenha bom resultado?

agosto 19, 2009 by admin · Leave a Comment
Filed under: Dicas, Tecnologia 

Provavelmente você deve ter dúvidas em relação à eficiência de campanhas de e-mail marketing. Sempre que alguém ou alguma empresa lhe sugere fazer esse tipo de campanha você fica receoso, acha que não vai funcionar, que será um tiro no pé. No entanto essa visão é um pouco míope (e eu compartilhava dela até me aprofundar no assunto), pois ao pensar em e-mail marketing já lembramos na hora de SPAM. E e-mail marketing não tem nada a ver com SPAM.

Um estudo da Forrester Research – empresa americana de pesquisas que é uma das mais reconhecidas do mundo – identificou que o custo por pedido via e-mail marketing é o mais baixo, quando comparado a outros recursos de webmarketing. No mercado americano de e-commerce, o custo por pedido do e-mail marketing é, em média, de $6,85. O custo do pedido via marketing de afiliação é de $12,27 e o custo por pedido via busca paga é de $19,32. Um custo por pedido menor gera um maior retorno de investimento o que incentiva as empresas a utilizarem mais essa ferramenta.

Importante dizer que o estudo foi feito com empresas que utilizam corretamente o e-mail marketing e não com aquelas que saem disparando e-mails sem nenhum critério. Mas como fazer isso? Como utilizar corretamente a ferramenta de e-mail marketing e obter os melhores retornos?

Uma técnica fundamental que se deve utilizar nas campanhas de e-mail é a segmentação de base. Quem sabe segmentar corretamente sua base de clientes (ou prospects) com certeza obtém retorno muito superior do que os não o sabem. Vamos a algumas formas de segmentação que devem ser seguidas:

Segmentação demográfica básica

Aqui entram os dados básicos como idade e sexo. Esta é a primeira segmentação que deve obrigatoriamente ser feita. Quem não a faz, corre o risco de oferecer esmaltes de unhas para homens de 60 anos. Ou estojos de ferramentas para jovens meninas de 18 anos.

Segmentação geográfica

Nada mais é que a região onde aquele potencial cliente está. Pense assim, sua empresa é fabricante de produtos para piscina. Vale a pena mandar um e-mail marketing em julho, mês de inverno, para os clientes que estão em Porto Alegre? Com certeza o retorno vai ser próximo de nulo.

Segmentação sócio-econômica

Essa é a segmentação que analisa o poder de compra do cliente. Existem ferramentas que estimam o poder de compra de uma pessoa, tendo base na idade, na região de moradia, no estado civil etc. Se sua base tiver outros dados como se mora em casa própria ou alugada, se tem filhos etc., fica ainda mais fácil essa segmentação. Por que ela é importante? Imagine que você venda jóias. Não é todo mundo que tem poder aquisitivo para comprá-las, certo? Vale a pena mandar e-mail para qualquer um?

Segmentação por atividade de consumo

Essa, com certeza, é a mais importante de todas. É o estudo das compras efetuadas pelos clientes e seus hábitos e gostos. Vamos imaginar que um cliente seu comprou uma nova máquina fotográfica digital, com diversos recursos, de última geração. Passados 15 dias você recebe um lote de estojos próprios para aquele tipo de máquina. Não preciso nem dizer que uma ação de e-mail nessa base de compradores terá um ótimo retorno. Outro exemplo diz respeito a produtos de consumo. Suponha que você venda um produto limpeza e tem um cliente que a cada três meses efetua uma compra. Por que não enviar um e-mail próximo após os três meses oferecendo a recompra do produto junto com mais algum outro produto agregado numa “oferta especial”? A chance de aumentar o ticket médio da compra cresce muito.

Por fim, tome cuidado ao fazer uma ação de e-mail marketing para que ela não seja considerada SPAM. Selecione bem sua base e, se possível, envie apenas para aqueles que aceitaram receber comunicados (opt-in). Se você acertar na ação, a chance de os e-mails enviados serem abertos é bem maior. Se você envia para qualquer um, a chance de esse e-mail ser clicado como SPAM é grande. Muitos provedores de email hoje analisam se o email foi aberto ou não e se foi indicado como SPAM ou não. Dependendo do que ocorrer, esses provedores podem automaticamente enviar seu email para a pasta de lixo eletrônico e tudo vai por água abaixo. E basta olhar em nossa caixa de lixo eletrônico para perceber que isso realmente acontece com muita freqüência.

O recado que deixo é: entenda sua base e seu consumidor. Uma ação bem feita tem grande chance de sucesso, com menor custo por pedido e maior retorno de investimento. E, definitivamente, não poderá ser classificada como SPAM.

Fonte: Imasters

Produzindo clientes

agosto 19, 2009 by admin · Leave a Comment
Filed under: Dicas, Tecnologia 

A edição de de julho da revista www.com.br (número 107), da editora Europa, trouxe uma reportagem excelente sobre a abordagem a clientes e manuseio do pedido de orçamentos para projetos. Na agência onde trabalho, a aplicação dos conceitos dessa reportagem melhorou significativamente no número de trabalhos fechados e na conquista de novos clientes.

Para tornar-se um bom consultor/vendedor- web, recomendo não só a certeza de que gosta daquilo que está fazendo, mas também a leitura completa desse texto, além de um sistemático estudo em cima de conceitos de marketing. Se o cliente é o “rei”, é justo que ele sinta-se tranqüilo em saber que seu projeto está em boas mãos.

Talento

“Nas empresas que “produzem clientes”, o talento precisa existir numa dimensão muito mais ampla do que nas empresas simplesmente eficientes. O talento precisa brotar na definição do formato da relação, na genialidade de prover soluções e idéias, no gerenciamento dessas soluções, na beleza das formas do produto final e na manutenção das relações. É arte pura!” – César Paz, presidente da AG2

Para que um projeto se transforme em bons resultados tanto para você, quanto para seu cliente, é necessário estar bem claro o prazer em se trabalhar com soluções de marketing para web, ou para qualquer outro ambiente. Criar soluções concretizáveis com idéias inteligentes promovem, no cliente, o verdadeiro sentimento de valor sobre o serviço solicitado, garantindo uma boa relação, que conseqüentemente lhe trará bons frutos.

A frase de César Paz define bem o que é ter clientes. Hoje falamos muito em fidelizar e encantar. O problema de tudo isso é o desgaste gerado por toda essa cadeia de processos. Fidelizar e encantar não agregam mais “valor” ao produto, pois já viraram palavras “clichês” do vocabulário do empreendedor atual.

Gerar valor é demonstrar que você ama aquilo que você faz e que você tem vocação, ou seja, talento. Gerar valor é também entregar ao cliente algo a mais, além do produto. Em tempos onde as relações são cada vez mais distanciadas, principalmente por causa da tecnologia, as relações humanas ganham espaço na geração de valor.

A proposta

Existem dois tipos de clientes, e para cada um, diferentes estratégias.

Primeiro tipo: o cliente não tem um departamento de marketing ou uma pessoa responsável somente por isso. Geralmente, o cliente é o dono da empresa, o financeiro, o departamento de marketing e tem outras funções mais.

Segundo tipo: o cliente tem um departamento com uma ou várias pessoas. O departamento é responsável pela integração entre a estratégia de marketing definido pela empresa e a contratação de demandas publicitárias. Geralmente esse funcionário é formado em áreas de comunicação e/ou marketing ou áreas relacionadas.

O primeiro cliente geralmente é o mais difícil de trabalhar, por esse absorver tantas funções na empresa. O percurso de uma boa idéia ou estratégia, acaba desviando-se por falta de tempo para o acompanhamento de sua execução. Nesse tipo de abordagem, a melhor estratégia é ter jogo de cintura para conseguir fechar todo um projeto o mais rápido que se conseguir. Nesse caso, o melhor é ter paciência e adiantar ao máximo o projeto, de acordo com suas experiências de mercado e com o briefing.

Recomendo, em uma primeira visita ao cliente, uma conversa aprofundada, com uma dose de informalidade, sobre seus objetivos, planos de negócio, objetivos da peça, mercado, etc. A partir daí você torna-se o departamento de marketing dele. Nesse primeiro atendimento é importante obter do cliente o maior número possível de detalhes, pois no final das contas, quem preencherá o briefing será você.

Explique bem cada processo que o orçamento percorre até ser entregue a ele (um orçamento é a solução de problemas por ele abordados) e não tenha receio de responder a valores em um primeiro bate-papo. Se o cliente perguntar o valor da criação e impressão de um folder, por exemplo, passe um valor estimado, e explique que o valor dependerá do que ele realmente quer (tamanho, número de informações, imagens, corte especial, verniz, etc.). Explique que o valor repassado poderá aumentar ou até cair. Um ponto positivo em se dizer os valores em um primeiro encontro é que o cliente passa a solicitar serviços de acordo com o orçamento, separado por ele, destinado à publicidade. Se o cliente estiver apenas especulando, logo ele demonstrará que não era bem esse valor que ele esperava. Com isso, você ganha tempo no orçamento de propostas realizáveis.

Já o segundo cliente (que possui um departamento de marketing) é mais fácil de interagir. Geralmente ele já sabe aproximadamente o valor dos trabalhos, prazos, e o que será melhor para a empresa. Nesse caso, você dará apenas algumas idéias a mais no projeto. A vantagem nesse tipo de atendimento é que grande parte dos responsáveis pelo departamento de comunicação dessas empresas já possuem grande percepção da importância do marketing e planejamento. A agência contratada seria apenas um elo entre a empresa e seus objetivos.

Para os dois tipos de clientes, o que vale é surpreender e o pedido de proposta é geralmente uma ótima oportunidade. Surpreender o cliente não significa já tentar esboçar alguma peça e apresentá-la. O tempo de desenvolvimento de um esboço pode custar caro em relação ao tempo perdido, caso o cliente não feche. Em um esboço, o cliente pode não gostar da cor aplicada, ou da disposição dos objetos e culpar sua agência pelo serviço de que ele não gostou. Caso ele goste, corre-se o risco de saber no decorrer do projeto que aquela não era a melhor opção.

Primeira visita

O primeiro bate-papo é tão importante que, com planejamento adequado de abordagem, você corre o risco de acabar a reunião com uma solicitação de orçamento e briefing completamente opostos ao primeiro pedido do cliente. Discuta sobre o mercado, a empresa, objetivos e outros assuntos pertinentes. Aproveite o primeiro encontro para contar um pouco da sua empresa, mas diga que não irá demorar muito. Fale sobre trabalhos realizados, cases de sucesso e outros pontos que valem a pena. Conte sobre você e quem está na sua equipe. O cliente precisa estar seguro de que, fechando com você, ele estará em boas mãos.

Prazos

Discutir prazos é fundamental para inícios de orçamentos e projetos. Prazos arbitrários e curtos geralmente dependem de mais esforço da agência. Esse esforço pode traduzir-se em contratar profissionais temporariamente ou pagar em horas extras, e tudo isso leva em conta na finalização dos valores no orçamento. Se seu objetivo é manter clientes, só aceite projetos que você possa cumprir.

Mantenha sempre ciente seu cliente dos trabalhos que serão executados, prazos, envio de aprovações de fase, e outros elementos de um projeto. Mantê-lo informado de como está o andamento do seu trabalho é fundamental para se adquirir confiança. Passar do prazo estressa sua equipe e principalmente seu cliente.

Apresentação do orçamento

Prepare sua apresentação em documentos textuais simples (um para cada integrante da reunião) e utilize um recurso visual para melhor lhe orientar durante a exposição das soluções. Diga o tempo de apresentação e separe o mesmo para perguntas sobre o projeto. Para exemplificar serviços do orçamento, apresente seu portfólio com trabalhos semelhantes. Procure ser objetivo e manter a concentração do seu cliente. No final, pergunte se todos compreenderam e se há alguma sugestão para a mesma. Aceite sugestões, mas argumente para que o objetivo do projeto não se perca.

Vale lembrar que o processo de atendimento não possui um passo-a-passo que deve ser seguido de forma exata e sem erros. Adapte seu modo de atender de acordo com o cliente e sempre tenha um plano B. Nunca se sabe qual rumo uma reunião pode tomar e, como já estar frente a frente com o cliente é uma grande vantagem, não deixe a oportunidade de se surpreender, passar.

Dicas

  1. Estude muito. Aprender e rever conceitos básicos de marketing auxiliam na compreensão do mercado atual. Mostrar para seu cliente que você entende do mercado – desde as coisas básicas até as últimas tendências – garante larga vantagem em relação aos concorrentes.
  2. Não tenha receio de perguntar sobre questões relacionadas à empresa e seu mercado. Mostre-se curioso e preste muita atenção no que eles dizem.
  3. Tenha certeza dos objetivos do seu cliente, para a elaboração coerente dos orçamentos.
  4. Não deixe de discutir valores. Geralmente o cliente não gosta de falar sobre números despendidos para publicidade. Dê a ele uma noção aproximada dos valores cobrados por você.
  5. A maioria das propostas são fechadas de acordo com a qualidade das idéias apresentadas.
  6. Conquiste seu cliente falando sobre como suas idéias podem tornar concretos seus objetivos.
  7. Procure ser atencioso. Saiba a hora certa de falar e ouvir.
  8. Se o cliente insistir em lhe pedir um layout, explique que o processo (de estudo, análise sistemática, discussões, etc) é que leva ao design certo.

Fonte: Imasters

Criando um Data Grid com POO e PHP5

agosto 19, 2009 by admin · Leave a Comment
Filed under: PHP, Programação 

Um data grid nada mais é do que a apresentação de dados em forma de tabela (lembra das <table></table>? Algo assim). Cada conjunto de registros é mostrado em uma linha, e o data grid pode ter funcionalidades de ordenação dos dados e opções para sua edição ou exclusão.

Classe Data Grid PHP

Com esta simples classe é possível criar um data grid a partir de um array com os dados que queremos apresentar na tabela. É simples criar e configurar e, com alguns comandos avançados, é possível alterar o seu comportamento para que seja possível implementar as necessidades habituais em uma estrutura desse tipo.

Essa classe foi criada com POO (Programação Orientada a Objetos) e características que estão disponíveis somente a partir do PHP5. Ela pode ser baixada clicando aqui.

Vamos começar a ver como funciona a classe utilizando um exemplo simples e inserindo funcionalidades no decorrer do artigo, para deixar nosso exemplo mais robusto.

Para começar é necessário inserir a classe nos scripts PHP antes de utilizá-la.

//incluimos a classe

require 'DataGrid.php';

Agora temos que criar um Array com os dados que serão apresentados no Data Grid. Será um array associativo, duas dimensões, onde a primeira, o array principal, receberá todos os registros a serem mostrados no data Grid, e na segunda estão cada um dos registros definidos como um array associativo.

Agora construímos o array com um algumas informações, mais adiante veremos como construir esse array através de uma consulta ao banco de dados.

//criamos o array com os dados a serem apresentados no Data Grid

$alunos = array(

array("id" => 1, "nome" => "Pepe Perez", "curso" => "Informática básica", "nivel" => 2),

array("id" => 2, "nome" => "María Suarez", "curso" => "Informática avançada", "nivel" => 1),

array("id" => 3, "nome" => "Roberto Soriano", "curso" => "Sistemas operacionais", "nivel" => 2),

array("id" => 5, "nome" => "Alberto Rodriguez", "curso" => "Inglés técnico", "nivel" => 1),

array("id" => 7, "nome" => "Julia Marcos", "curso" => "Sociologia", "nivel" => 3),

array("id" => 10, "nome" => "Socorro Rozas", "curso" => "Informática básica", "nivel" => 1),

array("id" => 11, "nome" => "Pablo Reñones", "curso" => "Informática básica", "nivel" => 2)

);

Agora, antes de continuarmos com a construção da estrutura, temos que criar alguns estilos CSS para podermos melhorar o aspecto do Data Grid

<style type="text/css">

.linhaI{background-color:#ffffcc;}

.linhaP{background-color:#ffcc99;}

.fdg_sortable {cursor:pointer;text-decoration:underline;color:#00c;}

</style>

Foram criadas três classes CSS, com seus respectivos estilos. As classes “linhaI” (linha ímpar) e “linhaP” (linha par) aplicaram estilo às linhas do Data Grid e a classe “fdg_sortable” é responsável por estilizar os títulos de cada coluna do Data Grid.

Vamos criar o data grid a partir dos dados que temos no array.

//instanciamos o objeto data grid, passando como parâmetro o array anterior

Fete_ViewControl_DataGrid::getInstance($alunos)

//VAMOS LANÇANDO DIVERSOS MÉTODOS SOBRE O OBJETO INSTANCIADO

//atributos gerais para a tabela

->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))

//permitimos que hajam características de ordenação

->enableSorting(true)

//fazemos um setup das colunas do data grid, indicando o valor que será mostrado na primeira linha do data grid

->setup(array(

'id' => array('header' => 'ID'),

'nome' => array('header' => 'Nome'),

'curso' => array('header' => 'Curso'),

'nivel' => array('header' => 'Nivel curso')

))

//definimos os estilos para as linhas ímpares

->setRowClass('linhaI')

//definimos os estilos para as linhas pares

->setAlterRowClass('linhasP')

//chamamos o método que construirá o data grid

->render();

Todas as linhas foram comentadas para que o entendimento se torne mais simples.

Agora vejamos como inserir ou apagar coisas do data grid, para personalizá-lo. Faremos algumas coisas como:

  1. Vamos ocultar o “ID” do array associativo, para que não seja mostrado.
  2. No campo de nível do cursos, vamos mostrar o nível com alguns asteriscos usando uma função que converterá os números em uma cadeia de asteriscos.
  3. Vamos coluna no data grid, que aparecerá antes de qualquer outra, para mostrar um contador que indicará a quantidade de registros apresentados.

Destas três coisas, a mais complicada é fazer um modelo para alterar a forma como é mostrado um campo. Para começar, precisaremos de uma função que devolva o dado que se quer mostrar, com o formato desejado.

function nivel_estrelas($num){

$estrelas = "";

for ($i=0; $i<$num; $i++){

$estrelas .= "*";

}

return $estrelas;

}

Utilizaremos essa função para atribuir como “template” para o campo nível de curso.

Vamos agora ao código utilizado para implementar todas as funcionalidades citadas no data grid:

//OCULTAR UM CAMPO NO DATA GRID

//COLOCAR UMA FUNÇÂO PARA MOSTRAR UM CAMPO

//COLOCAR UM CAMPO ANTES DAS COLUNAS DO ARRAY DO DATA GRID

Fete_ViewControl_DataGrid::getInstance($alunos)

->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))

->enableSorting(true)

//fazemos com que o campo "id" do array associativo não seja mostrado

->removeColumn('id')

->setup(array(

'nome' => array('header' => 'Nome'),

'curso' => array('header' => 'Curso'),

//utilizamos a função template para mostrar o nivel do curso com umas estrelas

'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrelas:%data%]]')

))

//inserimos uma coluna em todos os registros do data grid(a primeira coluna será esta)

//nesta coluna mostramos um contador de registros

->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))

//definimos a partir de que número será iniciado o contador

->setStartingCounter(1)

->setRowClass('linhaI')

->setAlterRowClass('linhaP')

->render();

Novamente as linhas foram comentadas para facilitar o entendimento. Chamo a atenção sobre a linha que faz uso da função anterior como um template para um campo.

'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrelas:%data%]]')

Isto faz com que o campo “nivel”, quando for mostrado em linhas distintas do data grid, chame a função nivel_estrelas(), passando como parâmetro %data%, que é o valor que tem cada um dos registros do array associativo, no campo “nível”.

Por último vamos ver outro exemplo, um pouco mais desenvolvido, para mostrar os dados do mesmo array. Neste caso vamos simplesmente mostrar uma coluna adicional ao final de cada registro do data grid, onde iremos inserir uns links para editar e/ou apagar o registro atual.

//PARA COLOCAR UM BOTÃO PARA EDITAR OU APAGAR
Fete_ViewControl_DataGrid::getInstance($alunos)
->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))
->enableSorting(true)
->removeColumn('id')
->setup(array(
'nome' => array('header' => 'Nome'),
'curso' => array('header' => 'Curso'),
'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrelas:%data%]]')
))
->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))
//agora mostro um campo depois de cada elelemto, com links para editar ou apagar o registro
//no interior deste campo utilizo $id$ para enviar o valor "id" do array
->addColumnAfter('actions', '<a href="exemplo3.php?editar=$id$">Editar</a> ?
<a href="exemplo3.php?apagar=$id$" onclick="return confirm('Está certo que quer apagar $nome$?')">Apagar</a>', 'Actions', array('align' => 'center'))
->setStartingCounter(1)
->setRowClass('linhaI')
->setAlterRowClass('linhaP')
->render();

Neste exemplo apenas inserimos uma linha de código para fazer uma chamada ao método addColumnAfter(), que serve para inserir uma coluna depois das colunas que formamos com o array.

->addColumnAfter('actions',
'<a href="exemplo3.php?editar=$id$">Editar</a> ? <a
href="exemplo3.php?apagar=$id$" onclick="return confirm('Está certo que
quer apagar $nome$?')">Apagar</a>', 'Actions', array('align'
=> 'center'))

Neste caso simplesmente temos que indicar como parâmetro a addColumnAfter() dois dados: o primeiro para especificar um título para a coluna e o segundo para especificar o seu conteúdo. O conteúdo dessa coluna, neste caso, são os links para editar e apagar, onde são utilizadas urls que enviam os dados por GET, que é o identificador do registro.

Montando o data grid a partir de um banco de dados

Só falta agora falar sobre como extrair os dados de uma base de dados para fazer o array de elementos que será utilizado na montagem do data grid.

No exemplo que acompanha a classe data_grid há um código para extrair a informação do MySQL, como pode ser visto nas linhas abaixo.

$users = array();

$result = mysql_query("SELECT * FROM user", $dbLinkId);

while ($row = mysql_fetch_assoc($result))

{

$users[] = $row;

}

Como se pode ver, primeiro se cria um array e logo se faz um looping pelos resultados da consulta. Cada um dos elementos retornados pela consulta será introduzido no array criado anteriormente e para ele assinalamos o array associativo que nos devolverá mysql_fetch_assoc() desse primeiro array.

Bom, pessoal, espero que esse artigo possa ser útil a vocês. Clique abaixo para poder fazer o download da classe e de um exemplo.

Clique aqui para baixar a classe data grid junto com um exemplo

Fonte: Imasters

Entendendo um pouco a API Google Maps

agosto 19, 2009 by admin · Leave a Comment
Filed under: Google API, Programação 

O Google dispensa comentários com todas as inovações que ele faz. Hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google. Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.

Como começar

A primeira coisa que devemos fazer é acessar o link da página inicial da API, ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)

Figura 1: Aceitando o contrato

Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)

Figura 2: Chave gerada

Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..
Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=SUA_CHAVE" type="text/javascript">
</script>

O código de base para começar o aprendizado está abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;
                  key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"
                  type="text/javascript"></script>
		<script type="text/javascript">
			var map = null;
			var geocoder = null;
			function inicializa() {
				if (GBrowserIsCompatible()) {
					map = new GMap2(document.getElementById("mapa_base"));
					map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);
					geocoder = new GClientGeocoder();
  			    }
			}
    </script>
	</head>
	<body onload="inicializa()" onunload="GUnload()">
		<div id="mapa_base" style="width: 500px; height: 300px"></div>
	</body>
</html>

Este código não está difícil de entender, explicaremos as partes mais importantes:

  • No onload(), a função inicializa() verifica se o navegador do usuário é compatível com a API Google Maps, caso positivo, o método captura uma div com id igual a “mapa_base” e define o mapa centralizado. O local padrão que escolhi foi a cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13, representa o zoom no mapa, quanto menor esse número, menor o zoom.
  • No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.

Para mais informações sobre os métodos, acesse a documentação em português, através deste link. Essa documentação está interessante, e será a base para o artigo.

Exemplos simples

Neste link podemos analisar diversos exemplos do poder desta API.

Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.

  • Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:
function mostraEndereco(){
                var endereco = document.getElementById("endereco").value;
                if ( geocoder ) {
                        geocoder.getLatLng(endereco,
                                function(point){
                                        if ( !point ) {
                                                alert(endereco + " não encontrado");
                                        } else {
                                                map.setCenter(point, 13);
                                                var marca = new GMarker(point);
                                                map.addOverlay(marca);
                                                marca.openInfoWindowHtml( endereco + "<br />" + point.toString() );
                                        }
                                }
                        );
                } else {
                        alert("GeoCoder não identificado");
                }
}
E no HTML:
<form id="form_mapa" action="#" method="get">
     <input type="text" name="endereco" id="endereco" size="50" value="São Paulo" />
     <input type="button" name="enviar" id="enviar" value="Mostrar Latitude/Longitude" onclick="mostraEndereco()"/>
</form>
  • Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida. Devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.
     GEvent.addListener(marca, "click", function() {
           marca.openInfoWindowHtml( endereco + "<br />" + point.toString() );
     });
  • Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é esta:
map.addControl( new GSmallMapControl() );
  • Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, híbrido ou satélite. Para isso devemos seguir a mesma linha de raciocínio para inserir o zoom, que seria adicionar um controle.
map.addControl( new GMapTypeControl() );

Exemplo avançado

Para mostrar algo avançado, que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Aprendendo a Usar a API Google Maps - Obter Rota | Paulo Fernandes </title>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>

    <script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;
key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"
type="text/javascript"></script>
        <script type="text/javascript">
            var map = null;
            var geocoder = null;
            var from;
            var to;
            var directionsPanel = null;
            var directions = null;

            function inicializa() {
                if (GBrowserIsCompatible()) {
                    map = new GMap2(document.getElementById("mapa_base"));
                    map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7);
                    geocoder = new GClientGeocoder();
                    map.addControl( new GSmallMapControl() );
                    map.addControl( new GMapTypeControl() );
                    directionsPanel = document.getElementById("route");
                    directions = new GDirections(map, directionsPanel);

                  }
            }

            function gerarRota(){
                from = document.getElementById("partida").value;
                to = document.getElementById("destino").value;
                if ( geocoder ) {
                    geocoder.getLatLng(from,
                        function(point){
                            if ( !point ) {
                                alert(from + " não encontrado");
                            }
                        }
                    );
                    geocoder.getLatLng(to,
                        function(point){
                            if ( !point ) {
                                alert(to + " não encontrado");
                            }
                        }
                    );

                    var string = "from: " + from + " to: "+to;
                    directions.clear();
                    directions.load(string);
                    GEvent.addListener(directions, "error", erroGetRoute);
                } else {
                    alert("GeoCoder não identificado");
                }
            }

            function erroGetRoute(){
                alert("Não foi possivel traçar a rota de: " + from + " para: " + to );
            }

    </script>
    </head>
    <body onload="inicializa()" onunload="GUnload()">
        <form id="form_mapa" action="#" method="get">
            <label for="partida">Partida</label>
            <input type="text" name="partida" id="partida" value="São Paulo" size="50" />
            <br />
            <label for="destino">Destino</label>
            <input type="text" name="destino" id="destino" value="Rio de Janeiro" size="50" />
            <br />
            <input type="button" name="enviar" id="enviar" value="Obter Rota" onclick="gerarRota()"/>
        </form>
        <div id="mapa_base" style="width: 800px; height: 500px;"></div>
        <div id="route" style="width: 300px; height: 500px; position: absolute; right: 0; top: 0;"></div>
    </body>
</html>

Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feita nesta linha directionsPanel = document.getElementById(“route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);

No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro, por exemplo.

Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.

Conclusão

Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.

Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se a tivemos declarado fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.

Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.

Fonte: Imasters

Google compra empresa de tecnologia de vídeos por US$ 106,5 milhões

agosto 5, 2009 by admin · Leave a Comment
Filed under: Noticias 

A empresa norte-americana de internet Google gastará 106,5 milhões de dólares em ações para comprar a empresa On2 Technologies e impulsionar sua operação voltada a vídeos.

A On2, que fica na Califórnia, nos Estados Unidos, é responsável por criar uma tecnologia de compressão de vídeos, essencial durante o crescimento da audiência de sites de vídeos na web.

Segundo o jornal The Wall Street Journal, o vice-presidente de produtos do Google, Sundar Pichai, diz que a empresa, dona do YouTube, está comprometida a inovar na qualidade de vídeos online. A ideia é que a On2 ajude o Google nessa missão.

Cada ação da On2 será transformada em 60 centavos de dólares em ações do Google. O acordo deve ser finalizado no quarto trimestre. Entre os clientes da On2 estão a Adobe e Nokia.

Fonte: IDGNow

Microsoft pagará US$ 50 milhões por ano ao Yahoo durante 3 anos

agosto 5, 2009 by admin · Leave a Comment
Filed under: Noticias, Tecnologia 

A Microsoft pagará 50 milhões de dólares por ano, durante três anos, e contratará ao menos 400 funcionários do Yahoo como parte do recente acordo na área de buscas anunciado pelas duas companhias na semana passada. O pagamento pode ser usado pelo Yahoo para cobrir despesas de transição e implementação dos termos do contrato.

As informações são de um documento da Securities and Exchange Commission, órgão que regulamenta o mercado de valores norte-americano e tem atuação semelhante à Comissão de Valores Mobiliários brasileira, colocado na internet. Em cinco dos dez anos de duração do acordo, a Microsoft poderá optar por engajamento exclusivo nas vendas de serviços de publicidade da companhia de internet, aponta o documento.  Nesse caso, o Yahoo vai embolsar 93% da receita gerada pela busca do site – que passa a usar o Bing, da Microsoft – em vez de apenas 88%.

Se a Microsoft não fechar um acordo exclusivo, a parte do Yahoo na receita será de, no máximo, 90%.

Alguns termos inclusos no documento podem tirar o Yahoo do negócio. Um deles seria o desempenho da receita média anual em buscas do Bing nos Estados Unidos se manter abaixo de uma determinada porcentagem na receita estimada pela busca do Google.

O Yahoo pode também sair do negócio se a Microsoft decidir fechar seu negócio de buscas – vendendo a unidade para outra companhia, por exemplo. Nesse caso, o Yahoo teria a prioridade de aquisição.

O negócio entre as companhias deve ser finalizado no dia 27 de outubro e a estimativa é que o período de implementação dure dois anos – esse prazo pode ser estendido pelo Yahoo se for necessário lidar com aprovações antitruste.

Fonte: IDGNow

Sony aquece batalha do livro eletrônico

agosto 5, 2009 by admin · Leave a Comment
Filed under: Noticias, Tecnologia 

A Sony planeja começar a vender, ainda em agosto, o mais barato dos leitores eletrônicos dos Estados Unidos. Com isso, deve causar aquecimento da competição contra a Amazon no mercado, pequeno mas crescente, de aparelhos de leitura eletrônica.
O novo Reader Pocket Edition, dotado de tela de cinco polegadas, deve chegar ao mercado norte-americano por US$ 199. Uma versão com tela sensível ao toque, de maior dimensão, deve custar US$ 299 em redes nacionais de varejo como Wal-Mart e Best Buy.

Para atrair demanda, a empresa também planeja reduzir o preço atual de download de best sellers e novos lançamentos de US$ 11,99 para US$ 9,99, o que alinhará seus preços com os da Amazon.

Segundo analistas, os consumidores podem se sentir tentados a experimentar os leitores eletrônicos com a oferta da Sony.

SEO Powered by Platinum SEO from Techblissonline