Textos
Há algum tempo eu li no Client Side elogios a um framework de javascript chamado Jquery. Então quando fui iniciar um novo projeto, resolvi testá-lo. É realmente impressionante o que se consegue fazer com ele. Mostra que programar pode ser divertido e simples.
Há, ainda, a possibilidade de usar plugins para complementar as funcionalidades dele. O que é ótimo, o limite do que você consegue fazer é a sua imaginação.
Infelizmente um problema em boa parte dos plugins é a documentação escassa. Tenho penado lendo comentários deixados dentro do código, e muitas vezes tendo que descobrir como usá-lo lendo o fonte. Talvez seja só azar, justamente nos plugins que usei isso acontece. O próprio JQuery é bem documentado, por exemplo. Saberei melhor no futuro.
No intuito de colaborar com os desenvolvedores e os interessados, eis um tutorial de como inserir um mapa do Google Maps no seu site (é o primeiro tutorial que faço, então o feedback será muito bem vindo. Com o tempo eu pego o jeito 
):
O efeito final é esse.
- Antes de começar é preciso criar uma chave para a API do Google Maps. Não é necessário cadastro, basta colocar a url do site no qual ela será usada nessa página. Ela serve para todo o domínio, inclusive subpastas. Se você tentar usar uma chave que não foi feita para o seu domínio ela não funcionará.
- Scripts necessários: são dois, o JQuery e o JMap2.
- O html: é necessário que o navegador esteja com o javascript habilitado para que o Google Maps funcione, então o html do exemplo é apenas a tag body:
<!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>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8″ />
<meta name=“author” content=“Leandro Facchinetti” />
<script type=“text/javascript” src=“jquery-1.2.2.min.js”></script>
<script type=“text/javascript” src=“http://maps.google.com/maps?file=api&v=2&key=sua_chave”></script>
<script type=“text/javascript” src=“jquery.jmap2.js”></script>
<script type=“text/javascript”>
<!–
//o código virá aqui
–>
</script>
<title>Exemplo de colocação de mapas dentro do site com JQuery e JMap2</title>
</head>
<body>
</body>
</html>
Atente para as importações de scripts. São três, o JQuery, a API do Google Maps e o JMap2. Lembre-se de mudar para a sua chave da API, onde diz “sua_chave” no código. - Na parte onde está escrito “//o código virá aqui” é que escreveremos nosso código. Logicamente é preferível que você faça isso num documento externo e o importe, estou fazendo assim para simplificar.
- O código a ser inserido é este, veja os comentários para entendê-lo:
$(function (){//sintaxe do JQuery para a função ser executada quando o DOM estiver pronto
$("body").append("<a href=\"\">Clique aqui para ver no mapa</a>").children("a").click(function (){//aqui é colocado o link, não faria sentido colocá-lo no html porque quem não tivesse javascript ficaria com um link vazio. Após a colocação do link é associada uma função a ser executada quando ele é clicado
$(this).slideUp("slow").after("<div id=\"mapa\" style=\"width:450px; height:320px; display:none; background-color:#e5e3df; \"").parent().children("div#mapa").slideDown("slow", function (){//é inserida uma div na qual irá o mapa. Atente para a colocação de atributos width e height, o mapa será do tamanho que você setar aqui. Depois da colocação vem a função do efeito que faz a div aparecer deslizando. Lógico que isso é opcional, fiz assim porque é mais estético
$(this).jmap({//aqui é acolocação do mapa em si, dentro dessa função vai um objeto com as opções, não listarei todas, só as que julgo serem mais importantes
mapCenter: [-27.608000, -48.53770],//as coordenadas da onde o mapa será aberto. Para descobrí-las entre no Google Maps, ache a região que lhe interessa e clique em "Criar link para esta página", observe a url gerada, procure por duas sequência de número logo no início, são elas que você deve colocar aqui
mapZoom: 17,//nível de zoom do mapa quando aberto
mapShowOverview: false,//mostrar pequeno mapa da região no canto inferior direito
mapShowType: false//mostrar o tipo de mapa: mapa, satélite, terreno
}).addMarker({//adicionar aquele marcador vermelho
pointLat: -27.608450,//as coordenadas de onde o marcador deve ser criado
pointLng: -48.53770,
pointHTML: "<h3>Paralelo 22</h3><p>Praça Abdon Batista<br />Saco dos Limões - Florianópolis - SC</p>",//html a ser exibido no balão do marcador, é possível manipular a formatação desse html pelo css da página. Incrível, não? openHTMLEvent: "mouseover"//evento que dispara a abertura do marcador
})
})
return false;//impedir a ação padrão do link
})
}) - Pronto, não é fantástico o que pode ser feito com tão pouco código?
A piada é perfeita, porque a maior parte não entende. E quem entende acha sem graça. É uma ótima oportunidade para rir sozinho e acrescentar um pouco de entropia no universo.
Estava programando no 
Quando você vir um relógio parado comente:
No verão passado eu me interessei por um cubo de Rubik (também conhecido por cubo mágico), que estava jogado no armário há muito tempo. Talvez você não imagine, mas há muita matemática e lógica por trás desse brinquedo. Existem, inclusive, cubos diferentes do modelo 3X3, com o qual estamos acostumados. São os de 2X2, 5X5, em pirâmide, esférico(!), enfim, 
Comentários Recentes