Mas a força em questão, dada pelo Google, é o fim do plugin de browsers Gears, que oferecia alguns recursos interessantes, como geolocalização e navegação offline. Porém, HTML 5 vai oferecer as mesmas funcionalidades de forma nativa.

Extinguindo o plugin, o Google aposta mais uma ficha no HTML 5, e motiva mais pessoas a estudar e apoiar a nova versão da linguagem de marcação de textos, usada nas páginas web.

“O conteúdo brasileiro do Street View vai contar inicialmente com imagens das ruas de Belo Horizonte, São Paulo e Rio de Janeiro. A seguir, será a vez de outras capitais brasileiras, incluindo Brasília, Salvador, Curitiba e Porto Alegre.”

Você pode ver um vídeo onde pessoas de ambas empresas falam sobre o serviço e sobre como será a captação das imagens nas ruas brasileiras.

O Serviço controverso oferecido pelo Google agora está no Brasil, e fica a dúvida, será esta exposição boa ou ruim, compartilhe sua opinião através dos comentários.

Pensando nisso montei uma página utilizando hacks e em cada browser o background muda.

Verde: Qualquer Browser
Vermelho: Internet Explorer 7
Azul: Internet Explorer 6
Amarelo: Internet Explorer 8

Código:

background-color: green; /* Qualquer Browser */
background-color /*\**/: #FFCC00\9; /* Internet Explorer 8 */
*background-color: red; /* Internet Explorer 6 e 7 */
_background-color: blue; /* Internet Explorer 6 */

Clique aqui e veja o html de exemplo

É importante seguir esta ordem para o css execute diferente a cada browser.

Lembrando que usando estes recursos, o seu site não será válido pela W3C.

Até a próxima…
Lisiano Lampert

Google Similar Images

Além de um novo visual o Google Labs vem com dois novos experimentos pra lá de legais, o primeiro é o Google Similar Images, uma funcionalidade que permite ao usuário procurar por imagens assim como no Google Images mas com a diferença que o usuário pode encontrar imagens parecidas com alguma das imagens do resultado, assista ao vídeo abaixo e veja como funciona.

Google News Timeline

Outra novidade no Labs é o Google News Timeline, um experimento que permite a você organizar e buscar notícias de diferentes locais como Blogs, Jornais, Revistes e organizar em uma linha de tempo. É possível customizar a sua linha de tempo de muitas maneiras diferentes. Vale a pena conferir.

Timeline do Pletax

Além das seções de temas, você pode criar seu próprio tema para o iGoogle, com a iGoogle Themes API .

A Google Chart API permite a criação de gráficos de forma dinâmica e on-line (API para criação de gráficos). Esta é uma API muito interessante que descobri recentemente.

Com ela é possível gerar gráficos nos seguintes tipos: Bar chart, Line chart, Radar chart, Scatter plot, Venn diagram, Pie chart, Google-o-meter, Maps e QR-Code.

Para a criação de cada tipo de gráfico existe uma infinidade de parâmetros, tais como cores, tamanho, dados, título, legenda, entre outros.

Vou explicar aqui os principais parâmetros enviados na URL para a geração dos gráficos:

http://chart.apis.google.com/chart? <URL inicial para geração do gráfico>
& <separador de parâmetros>
chs=250×100 <tamanho do gráfico>
chd=t:50,10,40 <dados do gráfico>
cht=p3 <tipo do gráfico>
chl=Msn|ICQ|GTalk <label do gráfico>
chtt=IMs+mais+usados <título do gráfico>

Resultado do nosso exemplo utilizando gráfico pie3:

URL utilizada: http://chart.apis.google.com/chart?cht=p3&chd=t:50,10,40&chs=250×100&chl=Msn|ICQ|GTalk&chtt=IMs+mais+usados

Outro exemplo, que é um dos meus preferidos atualmente é o novo modelo de código de barras bi-dimensional ou QR Code. Uma das grandes vantagens do QR Code é que ele pode ser interpretado rapidamente e com imagens de baixa resolução feitas por câmeras digitais no formato VGA.

URL utilizada: http://chart.apis.google.com/chart?cht=qr&chl=Pletax.com&chs=120×120

O mais impressionante desde modelo de código de barras é que pode-se colocar qualquer coisa dentro dele. QR Code é tão empolgante que nos dará conteúdo para outro post futuro

A questão é que sempre utilizei na minha página principal do iGoogle um gereciador de tarefas, bem modesto mas que dava conta do recado e como tudo na vida era o ideal apenas porque eu não conhecia algo melhor, e nesse caso foi o “melhor” foi o gerenciador de tarefas que está no labs do Gmail.

Com uma interface simples e objetiva assim como o meu antigo gerenciador de tarefas, porém, com possibilidade de identar tarefas para identificar melhor quais tarefas fazem parte de uma tarefa maior, criar grupos de tarefas e definir uma data para a tarefa.

Então surgiu a dúvida de como utilizar este mini aplicativo que existe dentro do Gmail na minha página do iGoogle, eu já havia cogitado a idéia de fazer o módulo para o iGoogle quando achei no help do proprio mini-aplicativo a solução, já existe uma versão dele para o iGoogle e para celular, então foi só adicionar o módulo e sair usando.

Agora você não tem desculpa para não organizar suas tarefas!

Abraço e boa semana,

E dependendo do seu objetivo, a melhor hora para selecionar seu elementos e tratá-los é depois que a sua página está carregada.

Isto quer dizer, depois que todas as tags e seus respectivos ids, classes, atributos… já foram lidos pelo browser e estão prontos para serem manipulados.

O jQuery sabe exatamente quando esse momento chega, tanto é que ele disponibiliza um evento para nós:

$(document).ready(function() {
  // seu código aqui
});

Já que o próprio jQuery tem esse tratamento para o evento para tratar quando página está carregada podemos deixar de lado coisa como:

	<body onload="function(){/* seu código aqui */}">

ou

window.load=function(){
  /* seu código aqui */
};

Até porque cada vez que você utiliza o método fornecido pelo jQuery o seu tratamento é adicionado à um determinado evento sem se sobrepor sobre os outros tratamentos.

Misturando tudo

Um exemplo básico do que você pode fazer com essa nova função que você aprendeu junto com os seletores.

Vamos imaginar que você tem uma página com vários links, e você quer instruir seus usuários que alguns links abrem em uma nova janela.

A maneira que vamos fazer isso é por adicionar no atributo title dos respectivos links o texto “[abre em uma nova janela]“.

O código que temos no body é

 <a id="lnkGoogle" title="Link para o Google.com.br" href="http://www.google.com.br" target="_blank">Google</a>
 <a id="lnkJQuery" title="Link para o JQuery.com" href="http://jquery.com/" target="_blank">JQuery </a>

E no head nós precisamos informar ao JQuery o que ele precisa fazer quando o documento estiver carregado.

$(document).ready(function() {
  $('a[target$=blank]').each(function(i) {
    $(this).attr("title", $(this).attr("title") + " [abre em uma nova janela]");
  });
});

Deu pra entender claramente o que aconteceu aqui, né? Mas tivemos algumas coisas novas: o each(…) e o $(this).attr(…) .

Mas o que raios é o each(…) e o $(this).attr(…)?

O each(…) pode ser utilizado de várias formas, a forma que utilizamos aqui foi algo como dizer:

“Caro each(…) eu pedi para o seu pai o JQuery buscar na página todos os links cujo o atributo target termine com os caracteres “blank”. Quero que você pegue cada um desses itens selecionados e execute o código $(this).attr(“title”, $(this).attr(“title”) + ” [abre em uma nova janela]“);“

E o sábio each(…) entendeu perfeitamente o que precisa fazer. E nesse caso usou o $(this) para cumprir sua tarefa. O $(this) se refere ao elemento da vez dentro do loop.

Ok e o quer dizer attr(…)?

Usamos o attr(“nome-do-atributo”) para pegar um atributo do elemento e attr(“nome-do-atributo”,”novo-valor-para-o-atributo“) para definir um novo valor para ele.

Simples assim.

Veja um exemplo desse código aqui.

Não vou entrar no mérito da implementação, mas quem tiver interesse pode conferir mais detalhes no Blogoscoped.

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/abcdefghijk&hl=en&fs=1&start=15“></param><param name=”allowFullScreen” value=”true”></param><embed src=”http://www.youtube.com/v/abcdefghijk&hl=en&fs=1&start=15” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

Abaixo segue por exemplo um vídeo de uma entrevista do Sergey Brin após o lançamento do Google Chrome.

Infelizmente isso só serve para quem for inserir o vídeo em sua página, não existe a possibilidade de fazer o mesmo pela URL do YouTube, mas de qualquer maneira você pode utilizar o Player para inserção em páginas passando os parâmetros para fazer isso, como no exemplo:
http://www.youtube.com/v/w8oPEJiCqi4&start=249&autoplay=1
Onde o autoplay serve para iniciar o vídeo automaticamente.

Além disso o Google Operating System também fala de um serviço free bem interessante, o splicd, que utiliza a API do YouTube para separar uma parte especifica de um vídeo.

Se quiser saber mais sobre a API do YouTube e o YouTube Player, acesse:
http://code.google.com/apis/youtube/player_parameters.html