Jam-Pow!

Debugger mobile

Jam-Pow! — Thu, 19 Jan 2012 23:12:02 +0000

Para inserir o Firebug Lite em qualquer site que você queira no Android, iPhone, iPad, no computador do trabalho (onde você não tem permissão pra instalar nada), etc. Basta adicionar este código abaixo como favorito e clicar depois de ter aberto o site que deseja debugar.

javascript:(function(F,i,r,e,b,u,g,L,I,T,E)%7Bif(F.getElementById(b))return;E=F%5Bi+'NS'%5D&&F.documentElement.namespaceURI;E=E?F%5Bi+'NS'%5D(E,'script'):F%5Bi%5D('script');E%5Br%5D('id',b);E%5Br%5D('src',I+g+T);E%5Br%5D(b,u);(F%5Be%5D('head')%5B0%5D%7C%7CF%5Be%5D('body')%5B0%5D).appendChild(E);E=new%20Image;E%5Br%5D('src',I+L);%7D)(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','%23startOpened');

Como assim!?

Pra quem não sabe, há uma forma de se inserir js em qualquer site pela barra de endereço. Faça o teste, neste meu blog mesmo!

Apague tudo o que estiver na barra de endereço
Escreva: javascript:alert(‘Luiza está no Canadá’);

Sacou?! Se você adicionar este código no lugar de uma url de um favorito ele executará o código na página que estiver aberta.

PS.: Não é tão fácil de usar num aparelho touch e/ou mobile, mesmo porque a interface é pra quem tem um mouse e mesmo se seu aparelho tiver uma daquelas canetas a tela dele provavelmente é bem pequena, mas quebra um galho dependendo do que quiser fazer com o debugger!

O Jornaleiro WebApp 2.0

Jam-Pow! — Tue, 22 Nov 2011 10:39:22 +0000

Cheguei na versão 2.0 da WebApp Jornaleiro. Com isso trazendo melhorias no layout, disponibilidade de app offline, armazenamento de configurações e várias opções de localidade, pra você poder ler notícias da região que mais lhe interessa.

Para ter essa WebApp no seu aparelho mobile acesse jornaleiro.jampow.com.br e adicione-a em sua tela inicial.

Quaisquer dúvidas ou sugestões deixe um comentário por aqui, terei grande prazer em responder ou implementar uma melhoria!!

O Jornaleiro App

Jam-Pow! — Mon, 14 Nov 2011 19:32:27 +0000

Não sei vocês mas eu e meus pais gostamos muito destes jornais de distribuição gratuíta, em especial o Metro e o Destak. Mas ambos não têm uma app ou um acesso fácil ao PDF pelo site deles e não é sempre que passamos num cruzamento em que distribuem, por isso fiz esse site/App chamado jornaleiro!

Está acessível pelo endereço jornaleiro.jampow.com.br.

Adicione à sua tela inicial no iPhone ou Android e baixe o PDF do dia do Metro ou do Destak para ler em seu mobile.

Teremos mais novidades em breve!

Ocarina Helper

Jam-Pow! — Sun, 23 Oct 2011 17:12:48 +0000

Este post é pra quem gosta de música e já teve a oportunidade de brincar com a app Ocarina para iPhone ou a versão alternativa para Android (que eu não conheço).

Em dois dias fiz um dicionário bem simples das notas, de acordo com o modo e a escala escolhidas. Todo o código está disponível na minha página do GitHub.

Depois coloco um Live Demo aqui, mas por hora é isso.

Estudando a API do Google Mapas

Jam-Pow! — Wed, 07 Sep 2011 21:44:38 +0000

Já tinha dado uma lida aqui, outra ali, mas hoje resolvi pôr a mão na massa definitivamente e fazer algo que alguns clientes vêm pedindo há algum tempo. Uma ferramenta simples onde pudesse colocar alguns endereços ordená-los como eu quiser e pedir ao google que trace as rotas entre os pontos.

1. Iniciando

Vamos começar com a estrutura básica e a inicialização do mapa.






Google Maps - Rotas

2. Adicionando alguns controles

Certo. Vamos modificar um pouco e colocar um painel de controle a direita, para que possamos adicionar uma lista com endereços, para facilitar um pouco, vamos carregar o jQuery (1.6.2) e jQueryUI (1.8.16). Nosso HTML entre as tags ficam assim.



  
    
    

    Dê um duplo clique para remover um endereço da rota

    
      R. Cipriano Barata, 200 - São Paulo
      Av. Lacerda Franco, 400 - São Paulo

E ao nosso JavaScript adicionamos:

    $(function(){

      //Adiciona endereço à lista
      $('#adic').click(function(){
        var ender = $('#addr').val();
        if (ender != '') {
          $('#addr').val('');
          var newid = new Date().getTime();
          $('#route').append('' + ender + '');
        }
      });

      //Habilita função de ordenação da lista
      $('#route').sortable({axis:'y'});

      //exclui no duplo clique
      $('#route').delegate('li', 'dblclick', function(){
        $(this).remove();
      });

    });

Legal, temos uma lista dinâmicas de endereços e um botão pra atualizar o mapa, que não faz nada ainda. Então…

3. Atualizando o mapa com as rotas

Começamos instanciando o objeto DirectionsService da API, para isso vamos adicionar a seguinte linha nas declarações iniciais do nosso bloco de JS.

var directionsService = new google.maps.DirectionsService();

E por fim no clique do botão “Traçar Rota”


      function getText(id) {
        return $('#'+id).text();
      }

      $('#trace').click(function () {
        var addresses = $('#route').sortable("toArray");
        var len       = addresses.length

        if (len < 2) {
          alert('Se liga... Não existe rota sem pelo menos dois endereços!');
          return false;
        }

        var start = getText(addresses[0]);
        var end   = getText(addresses[len - 1]);
        var waypts = [];
        for (var i = 1; i < len-1; i++) {
            waypts.push({
                location:getText(addresses[i]),
                stopover:true});
        }

        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: false,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      });

O resultado final, você pode ver aqui.

Acompanhe a evolução do código ou proponha melhorias no meu repositório do Git Hub

O que é closure?!

Jam-Pow! — Sat, 13 Aug 2011 21:04:36 +0000

Bem, eu também não sabia, mas agora eu sei! Sim, mas também não falarei o que é! Acesse este site, faça os simples exercícios propostos e descubra você mesmo, é fácil e rápido!

Se você não é tão bom de inglês, fique tranquilo! Eu ~~estou traduzindo/adaptando~~ traduzi/adaptei as lições para o português pra que todos possam entender!

~~Atualizarei este post em breve com o link traduzido assim que concluir o trabalho.~~

Pra vê-la em português, clique na bandeira do Brasil no rodapé da página.

Até mais!

Gerando documentação ruby on rails

Jam-Pow! — Sun, 13 Mar 2011 21:43:06 +0000

Não sei você mas eu já precisei trabalhar em locais sem internet, até mesmo em casa quando meu provedor de internet resolve me deixar na mão. Mas enfim, você precisa produzir e não lembra como escreve aquele método que você tanto precisa e não consegue acessar a internet para consultar a documentação… o que fazer?!

Enquanto estiver com internet prepare seu computador pra quando ela se for!

ruby:

cd ~/.rvm/source/ruby-1.8.7-p302
rdoc -o ~/rubydoc --format=html

gems:

gem install yard
yard server --gems

Gráficos na Web

Jam-Pow! — Sat, 16 Oct 2010 17:09:23 +0000

Depois do curso de imersão rails da e-genial sinto-me mais confiante pra usar o rails e todo o poder de ruby, por isso decidi buscar mais gems pra resolver meus problemas e tirar algumas das bibliotecas JS que tenho usado, por exemplo, pra fazer gráficos, como o FLOT pra jQuery. Já tinha visto meio por cima o Google Charts, mas como já tinha iniciado a implementação dos gráficos com FLOT achei melhor dar continuidade e avaliar depois uma alteração ou deixar para novos projetos, quando achei a GEM chamada GoogleCharts, mais auto-explicativa impossível! Muito fácil de usar também. A única desvantagem que vejo em usar essa GEM é o fato dela devolver uma imagem estática com o gráfico, com javascript conseguimos ter algumas “firulas” interativas que os clientes adoram, por outro lado, pra renderizar o JSON no formato que o plugin exige é um pouco mais trabalhoso. #segueadica

Ubuntu Lucid Lynx

Jam-Pow! — Fri, 16 Apr 2010 02:51:56 +0000

Testei a distro Ubuntu Lucid Lynx alpha 3, gostei muito da integração com as redes sociais e da velocidade de inicialização (+/- 15 segundos), a instalação também foi extremamente simples, até minha chefe quer testar/aprender agora, será que consigo converter mais um usuário?!

A única coisa que não gostei foram os botões pra fechar, minimizar e expandir das janelas do lado esquerdo como no macOS, mas isso se resolve mudando o tema.

Vamos aguardar o lançamento oficial!

Abridor de navegadores!

Jam-Pow! — Tue, 23 Mar 2010 17:53:31 +0000

Pra quem não sabe ou não leu o “About” do Blog, sou desenvolvedor de sites e acho um saco a parte de codificação do front-end, quando tenho que ficar abrindo vários browsers e testar o layout e ver se está igual em todos, pra agilizar um pouco meu trabalho fiz uma BAT onde eu entrava com a url do site e ele abria todos os navegadores (Chrome, Firefox, Opera, Safari e Internet Explorer) já no site certo. Segue o código:

@echo off
echo digite o site:
set /P url=
start \Arquiv~1\Opera\opera.exe %url%
start \Arquiv~1\Mozill~1\firefox.exe %url%
start %APPDATA%\Google\Chrome\Application\chrome.exe %url%
start \Arquiv~1\Intern~1\iexplore.exe %url%
start safari %url%

Mas como sou usuário linux na maior parte do tempo, fiz um shell script para a mesma função, mas para os browsers disponíveis para linux (Chrome, Firefox e Opera).

#!/bin/bash
echo -n "Digite o site: http://"
read site
opera 'http://'$site &
firefox 'http://'$site &
google-chrome 'http://'$site &

Lendo um pouco sobre shell script, vi que poderia usar o Zenity para gerar uma GUI depois de pouco tempo consegui chegar nesse resultado , que me agradou muito porque não é sempre que quero abrir todos os browsers, posso querer testar em um ou dois somente.

#!/bin/bash

options=$(zenity --list \
  --title="Escolha os browsers" \
  --column="" --column="Nome" \
  true google-chrome \
  true firefox \
  true opera \
  --checklist \
  --separator=":")

site=$(zenity --entry \
--title="Abridor de browsers" \
--text="O que vai ser hoje patrão?" \
--entry-text "http://")

echo "$options"|while IFS=":" read f1 f2 f3
do
[ -z $f1] || $f1 $site & # if [! -z $f1]; then; $f1 $site; fi;
[ -z $f2] || $f2 $site &
[ -z $f3] || $f3 $site &
done

O próximo passo é fazer o mesmo pra windows, estou pensando em usar o AutoIt.

Abs