TidBits

O Google Maps foi lançado em fevereiro de 2005 e nesses 6 anos ele virou referência pra se indicar um lugar, na internet. E hoje ele está dentro de qualquer smartphone; nos traça rotas de carro / ônibus; mostra como está o transito; o StreetView do maps está presente em 36 países.

E as aplicações neles estão crescendo. Listei 10 sites e experimentos de programadores (isso significa sem design nenhum) fuçando novas possibilidades pro Google Maps:

1 – Dual Maps

Aplicação que sincroniza o Google Maps, o StreetView e a visão aérea do mesmo local.

2 – Stas Kulesh

Monta um mosaico de fotos do Flickr no Maps e deixa navegar nele.

3 – Valor do Taxi

Escolha dois endereços e o site calcula a rota e um valor aproximado de uma viagem de taxi do ponto A ao B.

4 – MegaFoto

Aquele esquema de gigafotos é possível fazer usando o google maps.
Nesse caso eu que fiz um teste (#VaiCorinthians). Mas teve algum site que já usou isso comercialmente mesmo.

5 – Pop Places (Made In Web)

Uma espécie de game / site interativo, que traça uma rota pra você pilotar um avião dentro do maps. Foi desenvolvido como um case pra um concurso de HTML5 do Google.

6 – Rota animada

Percorre uma rota animada com um carrinho feio do ponto A ao ponto B.

7 – TwitterVision

Na verdade quando fui tirar o print não estava funcionando, mas basicamente ele procurava algo no twitter, identificava o lugar de origem do post e apontava no mapa onde foi postado (movendo o mapa) e aparece a mensagem do tweet com a foto de que publicou. O efeito é legal. Fiz algo parecido pra click em 2009 mas acabou não sendo aproveitado.

8 – Los Angeles Firemap

Quando houve o grande incêndio em Los Angeles, o site Los Angeles Times publicou um mapa estilizado, desenhando os pontos de risco, pontos de evacuação, etc.

9 – ShowStreet

Site que mostra o Google Maps sincronizado com o StreetView

10 – Guiarte

Pega fotos do próprio maps e adiciona no mapa antes de ter que escolher o local.

Imaginei vários cenários em que isso pode ser útil, basicamente adicionando uma função de callback no JavaScript após twittar ou dar like / curtir ou apertar o botão mágico que o Google inventou, que quando você clica soma 1 (HÁ!), enfim, pode evitar que você precise programar server-side e se preocupar com oauth, e os malditos tokens, ou seja, dá pra fazer tudo no JavaScript, tipo:

• Como trackear ou como colocar tags do Google Analytics no tweet button , like button e +1 button, mensurando o compartilhamento de cada post, página ou sessão do site nas redes sociais.
• Aplicações do tipo, pague com um tweet, ou compartilhe para fazer o download, liberando um conteúdo, uma foto um vídeo ou qualquer arquivo somente depois que o usuário efetivamente compartilhar a página no Twitter, Facebook ou Google Plus.
• Fazer coisas bregas do tipo “Obrigado por compartilhar“, tem gente que adora isso, sério.

Leia mais »

Recentemente tenho ministrado pequenos treinamentos voltados a Front End, devo postar algumas apresentações aqui.

Nesse, falo um pouco sobre tipos de dados em Javascript, desde um Number e o parseInt, até um Json e como acessá-lo.

SASS / SCSS é uma plataforma pra desenvolver CSS de forma mais proveitosa e produtiva, podendo dividir em vários arquivos .scss e formando um único .css, possibilitando várias pessoas trabalharem no mesmo CSS de um projeto.

Assim como existem diversas linguagens de servidor pra no final geral HTML (como PHP / JAVA / Ruby / ASP, etc), é completamente normal que comecem a aparecer linguagens pra gerar css e javascript.

E SASS gera CSS, Coffee Script gera Javascript… e por aí vai.

E quais são as vantagens de usar SASS:

É possível dar includes, criar funções, variáveis, expressões matemáticas. E como a linguagem é interpretada, erradifica qualquer tipo de bug / erro de digitação do CSS.

Veja alguns prints de um arquivo sass / scss.

Funções (Mixins) com Sass

Expresões matemáticas com Sass

Variáveis, includes e mixins com Sass

O que precisa pra trabalhar com SASS?

Primeiro, precisa baixar e instalar Ruby.

Pra quem não tem, baixe aqui e depois configure a entrada do Ruby nas suas variáveis de ambientes.
É meio chatinho isso pra quem usa windows, precisa clicar do direito no “Meu Computador” e ir em propriedades, depois são 6 passos:

1. > Advanced System Settings
2. > Advanced
3. > Environment Variables
4. > Na caixa System variables clicar em Path
5. > Clicar em Edit e vai abir uma nova janela com a entrada.
6. > Agora é só adicionar e dar ok. Precisa adicionar a pasta “bin” do Ruby, provavelmente vai ser C:\Ruby192\bin; (não esqueça do ; )

Pronto, Ruby instalado, aí precisa baixar a gem do sass:

entre no DOS ( windows + R e digite cmd ) entre na pasta do Ruby e digite

gem install sass

Vai demorar uma carinha pra baixar / instalar.

Mas é isso.

Depois, no seu projeto, crie uma pasta sass e uma css na raiz.

E ainda no DOS entre no projeto e execute o comando

sass --watch sass:css

Isso fará com quem cada vez que ouver alguma alteração na pasta sass, republique o css

Existe várias formas de gerar o css como compactado, compresso, normal, eu gosto de executar assim:

sass --watch sass:css --style compact --no-cache

Pra quem quiser, deixei uma pasta pronta com um base project de sass com reset, alguns mixins (como são chamadas as funções em sass) e com um .bat que inicia sozinho o watch pra escrever o css em tempo real.