Arquivo da tag: api

Diversos, Serviços Online

Evite surpresas com endereços curtos usando o LongURL

4 Comentários
http://longurl.org/
http://longurl.org/

Com o aumento no uso principalmente do twitter e de outras redes sociais, o uso de urls curtas (short url) também cresceu. Junto com este crescimento, o número de golpes online usando urls falsas que apontam diretamente para sites maliciosos.

Mascarar uma url comprometida, em um dos inúmeros serviços de shorturl, é algo extremamente simples. hoje em dia…

(http://is.gd/w) é a url que aponta para o google. Ou será que não ?

Por isso, acho importante apresentar o serviço disponibilizado pela LongURL. Acessando o site http://longurl.org/, logo na página inicial, podemos utilizar o recurso extensão de url curta… Ao fazer uma consulta, ele não só mostra a url de destino (url longa), como mostra uma pré-visualização do site.

longurl-expand

Mas, o que realmente me chamou a atenção foi a ferramenta LongURL Mobile Expander, que pode ser obtida neste link: http://longurl.org/tools. Com ela você pode “extender” as urls curtas automaticamente, sem precisar entrar o tempo todo no site da longurl. Você pode obter a ferramenta como um plugin para o firefox ou como um script para o greasemonkey. Em ambos o caso, o resultado é o mesmo, como apresenta a imagem a seguir:

longurl-exemplo

Ao posicionar o mouse em cima de uma url curta, após alguns segundos, uma pequena mensagem irá aparecer com o título da página de destino e o link. Caso você ainda não fique satisfeito, é possível clicar em [more], e ir para a página do longurl onde pode-se verificar a pré-visualização do site e outras informações.

A imagem acima foi retirada do twitter, mas a ferramenta funciona em qualquer site que exiba uma url curta suportada. Mesmo que a url esteja de alguma forma camuflada num link,  ainda sim será exibida. Acesse a página http://longurl.org/static/jquery_demo.html para mais exemplos.

Atualmente a ferramenta suporta mais de 200 sites de serviços de shortener URL, dentre elas: cli.gs, migre.me, twitterurl.net, tinyurl.com, tr.im, bit.ly e etc… A lista completa está acessível em: http://longurl.org/services

Para os desenvolvedores e webmasters, existe um plugin Jquery criado pela longurl que pode ser implementado em seu site/blog. Visite a página de demonstração ou o link http://plugins.jquery.com/project/longurl para mais informações.

Share
Desenvolvimento, Google Chart API

Chart API: Medidor em formato de velocímetro

1 Comentário
Google: http://www.google.com/
Google Code: http://code.google.com/apis/chart/

Um gráfico em formato de velocímetro, pode ser usado para diversos fins, como indicar o uptime ou apresentar o espaço livre em disco e etc..
Abaixo segue a URL utilizada, e em seguida a explicação de cara parâmetro, para que você aprenda, configure e use conforme a sua necessidade !

No exemplo, utilizamos um gráfico de 0 a 200, onde o ponteiro vale 150 !
Lembrando que a URL deve ficar em uma só linha, abaixo ela está segmentada devido ao tamanho.

http://chart.apis.google.com/chart?
&chs=225×125
&cht=gom
&chd=t:150
&chds=0,200
&chl=Titulo 01
&chco=00ff00,ffff00,ff0000
&chxt=y
&chxl=0:|0|200

Recomendo que apenas os valores em negrito/colorido sejam editados para facilitar a exibição. Qualquer alteração nos outros parâmetros, recomendo ler a documentação em http://code.google.com/apis/chart/.

Clique aqui para acessar o link completo do gráfico.

&chs = Dimensões do gráfico, Comprimento X Altura. Deve ser alterado para ficar de acordo com o tamanho do gráfico a ser apresentado, senão alguns dados não serão corretamente exibidos na tela.

&cht = É o tipo de gráfico. Neste caso usamos o gom. Outras opções seriam: p3 = pizza, bvg = barras dentre outros…

&chd = Posição da seta. Em nosso exemplo deve estar diretamente associado ao valores do &chxl, no eixo Y. Observe que atribuimos o valor 150.

&chds = Valor mínimo e máximo para o eixo Y. Manteremos o valor inicial como zero e o maior valor sendo igual ou maior que o maior dado informado no &chd, para que o gráfico seja exibido corretamente.

&chl = É o título da seta. Também é possível deixar esse parâmetro em branco, para deixar a seta sem nenhum rótulo.

&chco = Cores do gráfico em hexadecimal, sendo o primeiro como cor inicial, o segundo como cor intermediária e o terceiro como cor final. Basta alterar conforme sua necessidade.

&chxt = Habilita o eixo  y.

&chxl = Nome dos pontos nos eixos. 0:| corresponde aos titulos do eixo Y. Não há limite para que seja adicionado dados no eixo Y, porém o primeiro e o ultimo valor do eixo Y, deve ser o mesmo que o informado no parametro &chds, para que seja exibido corretamente no gráfico.

Acho que isso já é um grande inicio para construir um gráfico em formato de velocímetro.
=)

Share
Desenvolvimento, Google Chart API

Chart API: Gráfico de visitantes do dia

2 Comentários
Google: http://www.google.com/
Google Code: http://code.google.com/apis/chart/

O gráfico abaixo, pode ser utilizado, não somente para visitantes do dia, mas pode ser adaptado para uma utilidade de sua preferência !

Abaixo segue a URL, utilizada para exibir esse gráfico, e logo depois as explicações de como personaliza-lo ! Lembrando que a URL deve ficar em uma só linha, abaixo ela está segmentada devido ao tamanho.

http://chart.apis.google.com/chart?
&cht=lc
&chco=ff0000
&chs=300×200
&chd=t:55,20,50,50,60,45,47,175,200
&chds=0,200
&chtt=Visitantes+do+Dia – 03/04/08
&chm=o,000000,0,-1,5.0
&chxt=x,y
&chxl=0:|00:00|03:00|06:00|09:00|12:00|15:00|18:00|21:00|24:00|1:|0||50||100||150||200

Recomendo que apenas os valores em negrito/colorido sejam editados para facilitar a exibição. Qualquer alteração nos outros parâmetros, recomendo ler a documentação em http://code.google.com/apis/chart/.

Clique aqui para acessar o link completo do gráfico.

&cht = É o tipo de gráfico. Neste caso usamos o lc. Outras opções seriam: p3 = pizza, bvg = barras dentre outros…

&chco = Cor da linha. FF0000 é vermelho em hexadecimal. Basta alterar conforme sua necessidade.

&chs = Dimensões do gráfico, Comprimento X Altura. Deve ser alterado para ficar de acordo com o tamanho do gráfico a ser apresentado, senão alguns dados não serão corretamente exibidos na tela.

&chd = Dados do gráfico. Em nosso exemplo deve estar diretamente associado ao valores do &chxl, no eixo Y.

&chds = Valor mínimo e máximo para o eixo Y, que no exemplo correponde ao número de visitas. O correto, é manter o valor inicial como zero, já que não temos visitas negativas, e o maior valor sendo igual ou maior que o maior dado informado no &chd, para que o gráfico seja exibido corretamente.

&chtt = Titulo do gráfico. Pode ser uma frase separada por ‘+’, ou simplesmente por espaços.

&chm = Responsável por criar as bolas em cada ponto. o segundo valor ‘000000‘, corresponde ao preto em hexadecimal, e 5.0 é o tamanho da bola. Ambos podem ser alterados.

&chxt = Habilita o eixo x e y. No manual, é possível ver que podemos mais eixos, passando por este parametro.

&chxl = Nome dos pontos nos eixos. 0:| correponde aos titulos no eixo X. Para que o gráfico seja exibido corretamente, a quantidade de dados informados &chd deve ser igual a quantidade de títulos no eixo X. Reparem que ambos tem 9 entradas.
1:| corresponde aos titulos do eixo Y. Não há limite para que seja adicionado dados no eixo Y, porém o primeiro e o ultimo valor do eixo Y, deve ser o mesmo que o informado no parametro &chds.

Com isso, é possível construir esse e muitos outros gráficos, e trabalhando em um pequeno script, é possível que o gráfico seja exibido sempre atualizado. Cabe a você definir a sua necessidade.

=)

Share
Desenvolvimento, Google Chart API

Chart API: Desenhe gráficos com o Google – Introdução

4 Comentários
Google: http://www.google.com/
Google: http://www.google.com/

O Google Chart API permite que você gere gráficos de forma dinâmica. Através de parâmetros informados pela URL, a API retorna uma imagem PNG com o gráfico especificado.

Existem diversos tipos de possibilidades, como gráficos de pizza, linear, múltiplas linhas, barra, radar, mapas geográficos e muitos outros, com opções de dimensões, legenda, cores, tamanhos, efeitos e muitas outras possibilidades.

Link: http://code.google.com/apis/chart/

Abaixo segue um modelo de exemplo:

URL Utilizada: http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

Código html utilizado:

<img src=”URL” alt=”” width=”250″ height=”100″ />

Onde no lugar de URL deve ser informado o endereço do Chart API do Google conforme informado no exemplo a cima.

Estarei ensinando e apresentando nos próximos POSTs, formas e possibilidades de construções de gráficos simples e avançados em todos os formatos disponíveis.

Share