Top rated never dies » Tools http://www.toprated.com.br Top Rated é um blog sobre o mundo do design com dicas, tutoriais e inspiracao. Artigos sobre CSS, HTML, Photoshop. E claro, um pouco de bom humor Fri, 06 Jan 2012 21:09:29 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 2 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2#comments Mon, 16 Aug 2010 17:49:56 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2036 post sobre como criar gráficos usando a Google Chart API , vou mostrar aqui como criar gráficos de barras e como customizá-los para o seu site, alterando cores, escalas, tamanho e algumas outras opções.]]> Download

Os gráficos de barras seguem exatamente a mesma mecânica dos gráficos pizza, ou seja, você deve fazer a chamada à URL da API passando todos os parâmetros desejados e receberá como retorno a imagem do gráfico pronta para ser inserida na sua página. Veja o exemplo de um gráfico de barras verticais e os parâmetros usados para criá-lo:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:20,40,60,80,30&chco=76A4FB&chs=200x125&chxl=0:|Jan|Fev|Mar|Abr|Mai" />

As principais características do exemplo que acabei de criar são: ele é um gráfico de barras verticais, com 2 eixos visíveis (20, 40,… e Jan, Fev,…) e tem 180 x 150 pixels. Essas características foram passadas à API usando estes parâmetros:
Tipo cht=bvs – informa que quero um gáfico de barras verticais;
Eixos chxt=x,y – significa que quero os eixos X e Y visíveis;
Dados chd=t:20,40,60,80,30 – os dados;
Cor chco=76A4FB – mostra que desejo apenas uma cor;
Tamanho chs=200×125 – define o tamanho da imagem;
Labels chxl=0:|Jan|Fev|Mar|Abr|Mai – informo as labels do eixo X (0);

Alterando valores e escala

Por default o eixo vertical vai sempre de 0 a 100, então quando editar os valores do gráfico e quiser que o eixo fique abaixo ou acima desses valores você deverá usar a escala. Por exemplo, se eu tenho um gráfico onde o valor mais alto é 41% não há necessidade do meu gráfico exibir valores até 100, veja abaixo a diferença entre os dois exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai &chxr=1,0,50&chds=0,50" />

Perceba que no segundo gráfico usei 2 parâmetros a mais, que indicam que quero uma escala diferente da default:
Eixo chxr=1,0,50 – define o eixo Y em 0 a 50;
Escala chds=0,50 – define a escala de 0 a 50;


Definindo 2 ou mais séries

Um gráfico de barras pode ter mais de uma série de dados em cada intervalo o que muitas vezes se faz necessário. Tudo o que você tem que fazer é passar os valores de cada série separados por “|” e definir o tipo de gráfico para bvg (cht=bvg). Veja os exemplos abaixo e compare suas URLs:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35,41|20,40,60,80,30&chco=fa432a,76A4FB&chs=320x150& chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=370x150&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50" />


Note também que foi definida uma cor para cada série através do mesmo parâmetro chco que já havíamos usado, mas agora com as cores separadas por vírgula. Você pode usar quantas séries desejar em cada gráfico, basta tomar cuidado para que o seu tamanho comporte todas as barras.

Legendas e grids

Para uma melhor visualização das informações dos gráficos quase sempre é necessário que usemos um grid por trás das barras, que facilitará a comparação entre elas, e claro uma legenda para informar melhor o visualizador. Para tanto basta usar outros dois parâmetros bem simples: chg para adicionar grids e chdl para legendas. O primeiro aceita 4 parâmetros principais: o intervalo entre grids do eixo X, intervalo para o eixo Y, largura do traço, espaço entre os traços. O segundo aceita como parâmetro o texto das legendas separados por |. Veja o exemplo:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=450x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha" />

Largura e espaçamento das barras

Muitas vezes por conta de espaço ou por falta dele, será necessário fazer algumas adaptações nos tamanhos do gráfico. Um dos truques que ajuda nesse processo é alterar a largura e espaçamento entre as colunas e séries de colunas. Podemos fazer isso com o parâmetro chbh, que aceita 3 parâmetros: largura das barras, espaço entre barras, espaço entre os grupos de barras (séries). Veja os exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=205x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=5,1,10" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=445x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=25,1,10" />

Conclusão

Mesmo com exemplos bastante simples e passagem bem rápida apenas pelos principais parâmetros da Chart API, fica claro que o seu potencial de utilização pode envolver desde posts simples em um blog até a integração com sistemas de informação que necessitem oferecer uma melhor visualização de dados. Se você ficou interessado, recomendo fortemente que visite a página da API e sua documentação pois há dezenas de outras possibilidades de customização para os gráficos.




]]> http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2/feed 5 Como criar um QR Code em 1 minuto http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto#comments Tue, 10 Aug 2010 16:17:22 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2006 uma vaca da Cow Parade SP. Pois bem, aqui vai uma maneira absurdamente fácil e rápida para criar um QrCode para usar onde você quiser, com o link da sua empresa, seu email ou até mesmo alguma senha ou frase.]]> Para isso vou utilizar uma API criada pelo Google sobre a qual eu até já falei aqui, a Chart API. Além de criar gráficos, a Chart API também pode ser usada para gerar QR Codes. Sua principal vantagem é a simplicidade e rapidez. Uma vez chamada, ela retornará a imagem do QR Code com o texto/link que você quiser.

QR Codes com links

Uma das maneiras mais comuns de utilização de QR Codes é o direcionamento do usuário para o site de uma promoção ou produto através de um link. Para isso basta criar o código contendo o link para onde desejamos enviar o usuário. Por exemplo, para gerar um QR Code com link para o Top rated basta usar esta URL:


http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=http://www.toprated.com.br

Ao lado a imagem gerada. Entenda como montei essa URL:

http://chart.apis.google.com/chart? é o endereço padrão da API;

chs=200×200 informa o tamanho da imagem que eu desejo, 200x200px;

cht=qr informa o tipo de saída que eu espero, QR Code;

chld=|0 retira as margens (bordas) da imagem;

chl=http://www.toprated.com.br e aqui eu informo o texto que quero.

A grande maioria dos leitores de QR Code identifica automaticamente este texto como sendo um link e direciona o usuário para a página.

QR Codes com frases, senhas e outras informações

Outra utilidade dos QR Codes é servir para passar textos ou frases curtas para os usuários. Por exemplo, vamos supor que eu queira espalhar pela minha loja QR Codes com dicas de produtos em promoção para que meus clientes possam explorar:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=tv de plasma R$ 1499

Ao usar o leitor do seu celular para decifrar o código ao lado, o cliente encontrará a seguinte frase: TV de plasma R$1499. A URL é exatamente igual à do exemplo anterior, só muda o texto do final.

Como dá pra perceber, esta é uma ferramenta muito interessante para estimular a interação com seus consumidores e usuários, que pode ainda ser usada para vários tipos de ações diferentes. Além disso com a constante queda de preço de celulares com suporte aos leitores de QR Code, cada vez mais pessoas terão acesso a esse tipo de tecnologia. Vale a pena começar a pensar nos QR Codes como uma boa opção de comunicação.




]]> http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto/feed 11 Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 1 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1#comments Mon, 26 Jul 2010 23:04:10 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=1826 Gráficos são sempre necessários na hora em que precisamos apresentar dados, seja em apresentações, relatórios ou artigos. Na web não é diferente, muitas vezes precisamos usar gráficos para complementar um post, uma notícia e até mesmo uma promoção ou anúncio. Pois o Google, sempre de olho nas necessidades dos desenvolvedores, criou uma ferramenta simples, grátis e rápida para criação de gráficos que você pode começar a utilizar agora mesmo no seu site. Nesse post vou mostrar como usá-la.]]> Download

A Chart API

A API do Google Chart Tools, também conhecida como Chart API, é a caçula do projeto Google Visualization que também engloba a ferramenta Interactive Charts, um pouco (bem pouco) mais complexa. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico. Por exemplo, veja como fica a URL para criação de um gráfico de barras simples e a imagem resultante:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150
&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="" />

Note que a imagem já vem com o gráfico pronto, com os eixos, labels (Jan, Fev, etc..) e barras. Perceba também que a altura e largura da imagem são definidas na própria URL, nesse caso 180×150. Você só precisa posicioná-la na sua página como uma imagem comum.
A mesma API pode ser usada para criar vários tipos de gráficos: barras, pizza, linhas, candlestick, etc.. Como não quero reescrever a documentação da API e sim dar uma introdução, vou mostrar aqui como criar gráficos pizza e de barras, que acredito serem os mais comuns.

Gráficos Pizza

O primeiro tipo de gráfico que vou mostrar é o do tipo Pizza. Como em todos os outros, o segredo para criar um bom gráfico é saber quais os parâmetros certos devemos passar para a API. Os principais são os do tipo de gráfico (cht), de dados (chd) e de tamanho (chs). Veja o exemplo de um gráfico usando apenas esses 3 parâmetros:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=180x125" class="alignleft" />

No exemplo ao lado foram usados os seguintes parâmetros:
Tipo: cht=p – significa que quero um gráfico pizza (p);
Dados: chd=t:45,20,20,15 – envio os dados em formato texto (t) separados por vírgula;
Tamanho: chs=180×125 – indico o tamanho da imagem, 180×125;


Adicionando labels e legendas

Claro que apenas o gráfico, sem nenhuma indicação de valores ou legenda, não é lá muito útil já que dificilmente alguém vai conseguir entender e analisar os dados. Então é hora de começar a melhorar o gráfico. Para isso podemos usar 2 boas opções: labels e legendas. Com elas o gráfico vai ficar bem melhor.
Mais uma vez, tudo o que você precisa fazer é adicionar os parâmetros corretos, as labels usam o parâmetro chl e as legendas usam o parâmetro chdl. Veja então como fica o gráfico, agora com legendas e labels:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=380x250&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Esse é exatamente o mesmo gráfico anterior, agora com os seguintes parâmetros:
Tipo: cht=p – gráfico pizza (p);
Dados: chd=t:45,20,20,15 – os dados;
Tamanho: chs=380×250 – o tamanho;
Labels: chl=45%|20%|20%|15% – labels;
Legendas: chdl=Janeiro|Fevereiro|Março|Abril – legendas;


Usando 3D

E se você quiser apresentar o seu gráfico em 3D basta fazer uma pequena alteração, trocando tipo de gráfico de pizza (p) para pizza 3D (p3). Realmente não podia ser mais fácil, veja como fica o gráfico anterior agora em 3D:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=480x200&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Olhe a URL da imagem e note que ela é praticamente a mesma do exemplo anterior, as únicas diferenças são no parâmetro cht, que agora pede um gráfico 3D (p3) e no tamanho do gráfico.


Customizando as cores

Existem três maneiras diferentes para customizar as cores de um gráfico mas todas elas usam o mesmo parâmetro chco. A diferença está na quantidade de cores que eu passo para esse parâmetro.

Usando uma cor

A primeira forma de definir as cores do gráfico é escolher uma cor base que será usada com intensidade gradual afim de diferenciar cada uma das áreas do gráfico. É exatamente como vínha fazendo antes, porém estava usando a cor default do gráfico (amarelo), mas eu posso escolher a cor de base, por exemplo:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15,45,55&chs=320x200&chdl=IE6|Firefox|IE7|Chrome|Safari|Opera
&chco=c60000" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,12,20,5,20,15&chs=320x200&chdl=Corel|Adobe|Apple|Microsoft|Sun|Sony
&chco=1da3f8" alt="" />


Usando gradiente

Outra maneira de definir as cores do gráfico é usando um gradiente. Para isso basta usar o parâmetro chco para passar 2 cores diferentes, separadas por vírgulas. Seu gráfico será apresentado com as cores formando um gradiente que inicia com a primeira cor e finaliza com a segunda:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:15,23,45,20,20,15&chs=320x200&chdl=NYTimes|Le Monde|AS|Estadão|Folha de SP|LATimes&chco=c60000,1da3f8" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:5,32,45,20,20,15&chs=320x200&chdl=Brasil|EUA|Japão|Itália|Alemanha|China
&chco=58e015,fffc00" alt="" />



Definindo uma cor para cada valor

Por fim, é possível ainda definir uma cor para cada um dos intervalos do gráfico, para isso basta passar para o parâmetro chco cada uma das cores, seguindo a mesma ordem dos valores, separadas por “|”:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=320x200&chdl=China|França|México|Brasil
&chco=c60000|1da3f8|58e015|fffc00" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=340x200&chdl=Janeiro|Fevereiro|Março|Abril
&chl=45%|20%|20%|15%&chco=67087b|e3007a|00a8eb|79c471" alt="" />


Finalizando com background e margens

Para finalizar o seu gráfico e deixá-lo perfeito você pode ainda usar mais 2 parâmetros bem simples para definir a cor do background do gráfico e suas margens. Veja como:

Background

Se a cor de fundo de seu site não é o branco (padrão de background dos gráficos), você pode customizá-la usando o parâmetro chf. Basta passar o valor da cor desejada, precedida por bg,s, dessa maneira: chf=bg,s,dddddd;

Margens

O parâmetro que define as margens do gráfico (chma) também é bem simples, você deve passar os valores desejados em pixels, separados por vírgula, seguindo esta ordem: esquerda,direita,superior,inferior|largura_da_legenda,altura_da_legenda. Um bom exemplo seria: chma=20,20,20,30|100,20.
Abaixo um gráfico usando estes dois últimos parâmetros, de cor de fundo e de margens:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=660x300&chl=45%|20%|20%|15%&
chdl=Janeiro|Fevereiro|Mar%C3%A7o|Abril&chco=c60000|1da3f8|58e015|fffc00&chf=bg,s,dddddd&
chma=20,20,00,30|100,20" alt="" />


Conclusão

Como dá para ver nos exemplos e na quantidade de opções de customização e combinações possíveis, é claro o potencial dessa API para agilizar e facilitar a vida de quem volta e meia precisa fazer um gráfico para seus artigos, notícias e sites, ou mesmo integrar com um banco de dados para criação dinâmica dos gráficos. Além da facilidade em usar uma API já pronta e muito bem feita, temos a segurança que vem do fato dela ser uma criação do Google e ser hospedada por ele, garantindo estabilidade e quase 100% de disponibilidade. Não há limite para o número de requisições que você pode fazer por dia, o Google só pede para que você avise (chart-api-notifications@google.com) caso sua necessidade seja maior que 250.000 chamadas por dia.

Se você gostou mas acha que ainda não dá pra usar essa ferramenta por conta de alguma outra necessidade que ela não cobre, vale a pena dar uma olhada na sua documentação completa, pois o intuito aqui era apenas de dar uma introdução, existem dezenas de outras configurações possíveis.

E se bateu aquela preguiça de escrever tantos parâmetros, você pode usar o Chart Wizard, ferramenta disponibilizada pelo Google para criação de gráficos baseados nessa API. Porém, recomendo que você leia bem o tutorial e a documentação para que não precise ficar voltando ao assistente toda vez que precise de uma pequena alteração ou variação do gráfico. E claro, um desenvolvedor que se preze tem que entender o que está fazendo.

No próximo post sobre essa API vou mostrar como criar gráficos de barras.

Observação

O tamanho dos gráficos, eis o calcanhar de Aquiles da Charts API: quando usamos gráficos com mais de um elemento (labels + legendas) o sistema tem certa dificuldade em acomodá-los sem que nenhum deles seja cortado. Então algumas vezes é preciso dar “uma mãozinha” e fazer pequenos ajustes no tamanho das imagens para uma perfeita visualização. Se isso acontecer com você, tente alterar a largura ou altura do gráfico, não é difícil de resolver.




]]> http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1/feed 10 Globe Gallery – Novo projeto no ActiveDen http://www.toprated.com.br/globe-gallery-novo-projeto-no-activeden http://www.toprated.com.br/globe-gallery-novo-projeto-no-activeden#comments Tue, 03 Nov 2009 20:06:14 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=1035 ActiveDen, site onde desenvolvedores podem vender seus projetos e também encontrar boas soluções para os seus novos sites ou aplicações. Aliás já estou devendo um post que explique melhor esse site e a rede de marketplaces à qual ele pertence, a Envato. Globe Gallery é uma galeria de imagens interativa, alimentada via XML e extremamente fácil de configurar e customizar. A galeria monta uma esfera com a qual os usuários podem interagir e navegar através das imagens.]]> Quando clicada, cada pequena foto que forma a esfera, ou globo, amplia-se e toma toda a tela, trazendo ainda uma legenda e um link para maiores detalhes sobre a foto, produto ou local.

globe-gallery-exemplo

Como todas as informações são importadas do XML, editando-o você pode facilmente configurar:
• o número de linhas
• a quantidade de fotos
• o tamanho das fotos
• a perspectiva
• o tamanho da galeria
• o raio do globo
• a imagem de fundo
• a cor de fundo
• a cor das legendas
• a cor de fundo das legendas

Nenhuma biblioteca externa! É comum o uso de bibliotecas externas (como o Papervision 3D) para a criação desse tipo de galeria, mas a Globe Gallery não usa nada além das bibliotecas nativas do Flash. Ou seja, você não precisa instalar nada (além do próprio Flash CS4) para configurar e editar a galeria. Isso é ótimo para aquelas pessoas que ainda não estão familiarizadas com o uso de bibliotecas externas em AS3.

Esta galeria é ótima para quem:
» quer modificar e customizar o arquivo
» precisa de solução fácil e simples para exibir imagens de maneira criativa
» não tem conhecimento avançado de Flash

Plus!! Arquivo de ajuda completo!
Exemplos de utilização inclusos.

Veja a demo.
Faça o download!

]]> http://www.toprated.com.br/globe-gallery-novo-projeto-no-activeden/feed 2 My Latest Tweets – Twitter widget via javascript http://www.toprated.com.br/my-latest-tweets-twitter-widget-via-javascript http://www.toprated.com.br/my-latest-tweets-twitter-widget-via-javascript#comments Wed, 30 Sep 2009 14:36:21 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=954 Foi para resolver estes problemas que eu criei o My Latest Tweets widget: uma forma simples e fácil de exibir mensagens do Twitter utilizando apenas javascript. Ótimo para websites corporativos, blogs e até mesmo para lojas virtuais que tenham seu próprio perfil no Twitter ou queiram monitorar determinada palavra-chave.

Sem necessidade de PHP. Tudo o que você precisa fazer é copiar o arquivo JS para o seu servidor e inserir algumas linhas de código na sua página.

Com o My Latest Tweets você pode:
• Exibir tweets de um determinado usuário;
• Exibir tweets com uma determinada #hashtag;
• Exibir tweets com uma determinada palavra-chave ou frase;
• Configurar o o número de mensagens que será exibida;
• Configurar a língua das mensagens que você deseja exibir;
• Estilizar o box facilmente via CSS.

Veja a demo.
Faça o download!

]]> http://www.toprated.com.br/my-latest-tweets-twitter-widget-via-javascript/feed 4 Wolfram Alpha, o site que quer desafiar o Google http://www.toprated.com.br/wolfram-alpha-o-site-que-quer-desafiar-o-google http://www.toprated.com.br/wolfram-alpha-o-site-que-quer-desafiar-o-google#comments Sat, 16 May 2009 02:45:06 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=843 Se você pode fazer isso com um nome imagine uma marca: imagine digitar “Nokia” e ter significados, conexões, comparação de concorrentes, blogs que a citam, gráficos de desempenho, informações de vendas, comunidades que gostam ou não dessa marca etc etc, um dossiê completo. Tudo isso numa mesma página.

Ou ainda, digitar “pesca Brasil 2007″ e receber uma página com todas as informações sobre pesca no país no ano de 2007, com gráficos comparativos com outros anos, espécies mais pescadas, ranking por estado.. e ainda poder baixar as informações em formato PDF.. 

Essa é a promessa do Wolfram Alpha, um site, tipo o Google, só que que se auto intitula de “computational knowledge engine”.. ou seja, sua proposta é fazer com que todo o conhecimento do mundo possa ser computado gerando respostas a qualquer tipo de pergunta. Assim, quando você tiver uma dúvida, ao invés de procurar no google as palavras chave relacionadas a ela, e então ir até o site que tem esta informação, bastará digitar a pergunta no Wolfram Alpha e ele te entregará a resposta, pronta. É algo como o Ask.com, mas muito mais completo.

Se você quer conhecer melhor o Wolfram Alpha acesse o screencast lançado esta semana explicando como o site funcionará: www.wolframalpha.com/screencast/introducingwolframalpha.html

Ou espere até segunda feira, 18 de Maio, que é a prometida data de estréia. Se eles conseguirem, na vida real,  fazer o que o screencast mostra… prepare-se Google.

]]> http://www.toprated.com.br/wolfram-alpha-o-site-que-quer-desafiar-o-google/feed 0 Download de diferentes texturas para incrementar o seu layout http://www.toprated.com.br/download-de-diferentes-texturas-para-incrementar-o-seu-layout http://www.toprated.com.br/download-de-diferentes-texturas-para-incrementar-o-seu-layout#comments Fri, 01 May 2009 12:58:12 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=834 Vai lá: http://zentextures.com!

]]> http://www.toprated.com.br/download-de-diferentes-texturas-para-incrementar-o-seu-layout/feed 4 20 dicas sobre como divulgar um bom post pela web http://www.toprated.com.br/20-dicas-sobre-como-divulgar-um-bom-post-pela-web http://www.toprated.com.br/20-dicas-sobre-como-divulgar-um-bom-post-pela-web#comments Mon, 30 Mar 2009 13:35:50 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=781 Você leu um bom post recentemente e gostaria de compartilhá-lo com seus amigos, colegas, namorada?

Encontrei uma lista com 20 dicas para espalhar um post (bom ou não) por todos os cantos da web, veja só algumas delas:

1) Divulgue o post pelo Twitter: é simples e rápido, basta escrever a url (caso seja um url muito grande você pode usar as ferramentas tinyurl ou bit.ly para “encurtá-la”) e enviar a todos da sua lista.

2) Inserir no Digg iT: é só inserir o link por lá e compartilhar com todos os seus amigos.

3) Inserir no Delicious: além de inserir o seu post por lá onde todos os seus amigos podem acessar você também permite que outras pessoas encontrem o seu post, pois você insere em uma categoria que facilita a busca.

4) Escrever um novo post sobre o post que você acabou de encontrar: essa prática é uma das mais comuns.  Se você encontrou um artigo interessante faça um post sobre ele, dessa forma ele se espalhará pela web (mas não se esqueça de dar os créditos :) )

5) Compartilhar via Google Reader: gostou é só enviar para todos que você conhece.

6) Compartilhar através do Shareaholic: Shareaholic é uma extensão do Firefox que quando instalada insere links na sua toolbar que vão direto para myspace, facebook, linkedin, entre outras redes sociais e você pode compartilhar na hora o post que você gostou.

7) Acesse Ping.fm: Ping.fm é um site que com apenas um cadastro atualiza de uma vez todas as suas redes sociais. Vale a pena.

Se você se interessou vale a pena dar uma olhadinha na lista completa no Mashable.

Aproveite e coloque em prática as dicas com esse post ; )

]]> http://www.toprated.com.br/20-dicas-sobre-como-divulgar-um-bom-post-pela-web/feed 2 Google Chrome Experiments: incríves efeitos JavaScript http://www.toprated.com.br/chrome-experiments-incrives-efeitos-javascript-by-google http://www.toprated.com.br/chrome-experiments-incrives-efeitos-javascript-by-google#comments Fri, 20 Mar 2009 06:30:16 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=765 Se o Google gostar ele publica, de acordo com eles: “We can’t post everything, but we’d love to see it.”

Lá encontrei trabalhos inusitados como: utilizar duas janelas diferentes do browser e fazer com que elas compartilhem o mesmo conteúdo, criar um caleidoscópio mexendo apenas o mouse, montar um quebra cabeça com vídeo e com várias janelas do browser ao mesmo tempo, criar uma música com duas janelas ao mesmo tempo.

Tem de tudo, coisas realmente para se inspirar.

Se você tiver algo que valha a pena, envie já!

Você ainda pode ter o seu nome e blog publicados em destaque ;-)

Acesse: Google Experiments

]]> http://www.toprated.com.br/chrome-experiments-incrives-efeitos-javascript-by-google/feed 0 50 tutoriais para criar ícones diferentes http://www.toprated.com.br/50-tutoriais-para-criar-icones-diferentes http://www.toprated.com.br/50-tutoriais-para-criar-icones-diferentes#comments Sun, 15 Mar 2009 13:32:53 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=760 Criar um ícone, daques que você vê quando carrega o iPhone ou quando entra no Top Rated, não á uma tarefa fácil.

É preciso ter em mente o que você deseja e dominar bem a ferramenta que vai utilizar.

Para te ajudar nesse ultimo item achei uma ótima lista com 50 tutoriais que vão desde como criar um ícone de RSS personalizado até tutoriais mais complexos sobre como criar um ícone vetorizado.

Dica do blog Six Revisions

]]> http://www.toprated.com.br/50-tutoriais-para-criar-icones-diferentes/feed 0