Uma das novidades mais interessantes do ano, o botão “+1″ criado pelo Google, possibilita que usuários indiquem que uma página, post ou site é relevante, interessante para eles. É bem parecido com o botão “Curtir” do Facebook, porém está ligado à rede social do próprio Google, a Google+ (Plus). Ele já pode ser visto em grande parte dos portais e blogs e é uma ótima ferramenta para melhorar a interação dos usuários com o seu site.

Qual a vantagem em usá-lo?

Quando clica no botão “+1″, é como se o usuário dissesse para o Google “Ei, eu acho que essa página tem um conteúdo interessante e pode ajudar outras pessoas”. E a empresa já deu indicações de que o número de usuários que clicam no botão “+1″ de uma determinada URL tem impacto no seu ranking de buscas. Ou seja, se vários usuários clicarem no botão “+1″ da sua página é bem provável que você suba algumas posições nas páginas de busca. E mais, se um dos meus contatos tiver clicado no botão “+1″ de uma das páginas do seu site, essa página aparecerá como recomendada pra mim quando eu fizer uma busca no Google.
Depois de clicar no botão o usuário pode ainda fazer um comentário sobre a página, fazendo assim um post no seu perfil do Google+ (se tiver um perfil lá) e gerarando ainda mais tráfego para seu endereço.

Código

Vou mostrar aqui como usar a opção de carregamento assíncrona do botão, aquela em que o botão será adicionado após o carregamento da sua página, deixando-a mais rápida e impedindo que qualquer problema nos servidores do Google possam vir a prejudicar seu site.
São basicamente duas partes. A primeira é o botão em si, que usa a seguinte tag:

<g:plusone size="medium" annotation="inline"></g:plusone>

Basta colocar este trecho de código no lugar onde você quer que o botão apareça. Abaixo do título da página ou ao final do texto do post, por exemplo. Perceba que ela tem duas propriedades, size e annotation. Logo mais vou explicar como você pode usá-las para obter a melhor configuração para o seu caso.

Depois, ao final da página coloque o código que irá carregar substituir a tag acima pelo botão em si. Note que este código deve vir sempre depois da tag do botão.

<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};

 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  </script>

Note aqui que colocamos, logo no início da tag, a opção “lang” configurada com o valor ‘pt-BR’. Isso é importante pois configura o botão para usar o idioma “Portugês do Brasil”.

Tamanho e tipo

Usando as propriedades size e annotation é possível alterar o tamanho e o tipo do botão “+1″. Existem 4 tamanhos (size) disponíveis: Small (pequeno) 24px de largura, Medium (médio) 20px, Standard (padrão) 24px e Tall (largo) 60px. Além disso você pode escolher entre três maneiras diferentes de exibir a o número de pessoas (annotation) que já clicaram e marcaram aquela página com ‘+1′: Inline (linha de texto), Bubble (balão) e None (nenhum). Combinando essas opções você terá 12 tipos diferentes de botão:

Tupo o que você precisa fazer é escolher qual das combinações melhor se ajusta ao seu layout e alterar a tag do botão ajustando estas propriedades.

Alguns exemplos:

<g:plusone size="standard" annotation="bubble"></g:plusone>

<g:plusone size="medium" annotation="inline"></g:plusone>

<g:plusone size="tall" annotation="bubble"></g:plusone>

<g:plusone size="small" annotation="none"></g:plusone>

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.

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.

Importando a API

A API de Idiomas oferecida pelo Google é muito fácil de usar e pode ser importada diretamente dos servidores da empresa, o que permite que você a utilize sem precisar copiar nenhum arquivo para o seu próprio servidor. Além disso, importar a API diretamente do Google garante que você estará sempre usando a sua versão mais atualizada. Para incluí-la na sua página basta incluir a chamada para o endereço de APIs do Google e então carregar a API de Idiomas:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

</script>

Criando a função

A função que criaremos para fazer a tradução utilizará duas das funções fornecidas pela API de Idiomas. A primeira, google.language.detect, detecta o idioma original de um bloco de texto e a segunda, google.language.translate, traduz um bloco de texto do seu idioma original para outro. Nossa função então tem 3 passos principais:

1 – Detecta o idioma do texto que queremos traduzir;
2 – Traduz o texto para o idioma que desejamos;
3 – Insere a tradução na página ou substitui o texto original;

O código completo da função:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function traduzir(original, traduzida, idioma) {

	var text = document.getElementById(original).innerHTML; //div com o texto original
	var translated = document.getElementById(traduzida); //div que receberá o texto traduzido

	google.language.detect(text, function(result) { //detecta o idioma do texto original
	if (!result.error && result.language) {
	google.language.translate(text, result.language, idioma, //traduz o texto
	function(result) {
	if (result.translation) {
	translated.innerHTML = result.translation; //insere o txt traduzido na div escolhida
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na tradução
	}
	});
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na detecção
	}
	});

}

</script>

Perceba que a função tem três argumentos:
1° – original – Id da <div> que contémo texto a ser traduzido;
2° – traduzida – Id da <div> que receberá a tradução;
3° – idioma – Código do idioma para qual o texto será traduzido. Veja a lista aqui.

O HTML

Tudo o que você precisa no seu código HTML é que o texto esteja dentro de uma <div> com um id específico e um botão que execute a função de tradução. Ou seja, se o seu HTML já está pronto, basta colocar uma <div> envolvendo o texto que vai ser traduzido e atribuir um id a ela. Veja abaixo o código para este exemplo:

<div id="texto_original">
<h3>Design</h3>
<p>JavaScript é uma linguagem de programação criada pela Netscape em 1995, que em princípio se chamava LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da Sun, após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes "JavaScript".</p>
<p>Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe.</p>
<p>Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript  C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.</p>
</div>
<p><a onClick="traduzir('texto_original','texto_original','en');" href="#" id="botao_traduzir">Traduzir o texto</a></p>

Considerações finais

Pronto, como você vê é muito simples e fácil de usar. Dê uma olhada na demonstração e baixe os arquivos desse exemplo para estudar e testar as suas próprias alterações. No exemplo você encontrará também algumas linhas CSS que usei para estilizar este exemplo mas que não são necessárias para o funcionamento da API, então se quiser pode retirá-las sem nenhum problema.

É importante saber que esta API ainda está em desenvolvimento, então muitas coisas novas ainda devem aparecer, assim como um pouco de instabilidade. Também é bom ter em mente que existe um limite da quantidade de texto que pode ser traduzida de cada vez. O Google promete aumentar este limite constantemente, hoje ele é de 5000 caracteres. No entanto, nos meus testes o máximo que consegui foram 1200 caracteres.

É claro que se você tem um site que fornece informações que dependem de traduções precisas, como documentos oficias ou jurídicos, onde uma simples palavra pode fazer toda a diferença, o ideal é fazer a tradução manualmente e criar uma versão separada do texto. Mas se tudo o que você precisa é fornecer uma versão minimamente inteligível do seu texto esta é uma ótima solução.

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.

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

O que significa: Com os valores “noindex” e “nofollow” indica aos robôs dos sites de busca (Google, Msn, etc) que o conteúdo do site não deve ser indexado e os os seus links não devem ser ‘seguidos’. Ou seja, as páginas do site não serão cadastradas pelos mecanismos de busca e não irão aparecer no resultado de nenhuma pesquisa. Péssimo. Se seu site tem essa meta tag configurada desta maneira retire-a agora mesmo, a menos é claro que, por algum motivo, você queira continuar ‘invisível’.
O correto: <meta name=”robots” content=”follow, all” />

Meta name=”description” content=”palavra-chave, chave, palavra, palavra site, palavra-chave grátis, muita palavra-chave”

O que significa: é a descrição da sua página, e dependendo da busca pode aparecer abaixo do nome do site na lista de resultados de busca. Se estiver abarrotada de palavras chave e termos repetidos é o mesmo que dizer: “olhe só! esta página é spam, procure conteúdo relevante em outro lugar!”.
O correto: coloque uma descrição sucinta e que realmente conte ao usuário sobre o que a página trata, algo como: “Todas as características da palavra-chave com análises e preços”

Meta name=”keywords” content=”palavra-chave, chave, palavra, palavra site, palavra-chave grátis, muita palavra-chave”

O que significa: São as palavras-chave da página. Mais uma vez, se estiver cheia de termos repetidos será o mesmo que dizer ao buscador “Olhe só! Isso aqui provavelmente é spam”.
O correto: Ao contrário do que muitos pensam, a meta tag keywords já não é tão relevante para o ranking do Google. O mais importante é usar palavras-chave que também apareçam no conteúdo da página, esse sim essencial para um bom posicionamento.

Muitas meta tags

Outro engano bastante comum é pensar que o header da página deve ter todas as meta tags possíveis e imagináveis. Na verdade, hoje em dia, o Google e os outros buscadores já não dão tanta importância pra isso, o conteúdo da página é o que realmente importa (além dos links externos, código bem estruturado, etc..). Muitas meta tags acabam deixando seu código sujo e dificulta o acesso ao corpo da página.

<title>Super site sobre tudo o que você quer saber sobre a palavra-chave e outras dicas e truques para ganhar mais dinheiro e gastar menos</title>

Toda a relevância da sua palavra-chave será diluída entre cada um dos termos do título, será muito mais difícil encontrá-la em uma pesquisa. Mantenha o título das páginas curto, simples e real.

Estas são informações bastante básicas sobre como otimizar sua página para os mecanismos de busca, mas, mesmo que pareçam simplistas, ignorá-las pode dificultar bastante a busca por novos visitantes.

O tour permite ter uma visão 360 graus do aparelho, além de emular o funcionamento do teclado e da tela touch screen, dando a possibilidade de clicar nos ícones e teclas e ter uma boa idéia de como o sistema se comporta, já que praticamente todas as funções (agenda, contatos, favoritos, browser, recebimento de chamadas, etc..) são simuladas como no telefone real. No site existe também uma seção com guias sobre como trocar a bateria, como conectar cartões de memória entre outras coisas.

Vale a pena dar uma olhada: HTC G1

É divertido fazer algumas buscas e lembrar de como os sites eram descritos na época. Alguns ainda nem existiam. O link dos títulos levam a versão atual do site, mas logo abaixo da descrição de cada site está disponível um link para o Web Archive, que guarda uma versão dos sites exatamente como eram naquela época.