Web Application
Google dá mais uma força ao HTML 5
É sabido que o Google vem participando ativamente do grupo que trabalha na nova versão de HTML – a HTML 5. Inclusive, o editor da especificação é funcionário do gigante da web.
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.
Google Street View chega ao Brasil
O Google, em parceria com a FIAT, está mapeando algumas das principais capitais do país, e a grande pergunta é “Quais cidades serão mapeadas?” e a resposta está no canal oficial do YouTube, feito para esse projeto:
“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.
Hack CSS – IE6, 7 e 8
Quando desenvolvemos sites ou sistemas web que não necessitam de validação w3c os Hacks CSS (CSS Hack) são necessários para ajustes rápidos. Claro que melhor é não usar, mas as vezes este é a única solução.
Por razões lógicas a maioria dos hacks são para internet explorer.
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
Laboratório do Google de visual novo
Google Labs, o laboratório de experimentos do Google, que é o responsável por disponibilizar as novidades da gigante da web esta de cara nova, através do Labs já foram disponibilizadas muitas aplicações famosas que depois de um tempo tiveram seus estado alterado de experimento para produto, o Google Docs, o Google Reader e o iGoogle são alguns exemplos de experimentos de sucesso.
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
É a vez dos games nos temas do iGoogle
A primeira seção de temas do iGoogle foi voltada à artistas famosos, a segunda foi voltada à causas sociais de todo o mundo e agora o iGoogle estréia sua terceira seção de temas, e é a vez dos games, com temas que vão desde clássicos como o Galaga, passando por Mario, Zelda, Donkey Kong, Tomb Raider, Mega Man e chegando aos games do momento como Guitar Hero, Spore e Wii Sports. Ao todo são mais de 20 temas de games consagrados, confira aqui a lista completa e abaixo o vídeo de lançamento dos temas.
Além das seções de temas, você pode criar seu próprio tema para o iGoogle, com a iGoogle Themes API .
Google Chart API
Muitos não sabem, mas o Google tem uma série de funcionalidades em suas APIs que facilitam muito nossas vidas.
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 
Dicas: Utilizando o Gmail Tasks no iGoogle
Uma dica rápida e bem útil para quem gosta de organizar suas tarefas e informações de uma maneira eficiente é utilizar o iGoogle, onde através de mini-aplicativos você pode criar uma página única e que contenha todas as informações que você precisa para estar em dia com a sua vida de internauta.
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,
Evento document.ready
Recentemente um post sobre o jQuery: “Selecionando tudo com o JQuery” eu falei sobre como selecionar elementos em uma página e se você deu uma lida nele com certeza você já sabe o que precisa fazer para tal.
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.
Transforme seu nome em uma face
Muitas vezes as aplicações web que se tornam febre de um dia para o outro são simples e sem muita funcionalidade. Mais um destes caso é o Turn Your Name Into a Face, que faz exatamente o que o nome sugere, transforma seu nome em uma face, são mais de 100.000 faces diferentes, aqui ao lado você confere a face gerada a partir de Plets.
Não vou entrar no mérito da implementação, mas quem tiver interesse pode conferir mais detalhes no Blogoscoped.
Ganha pão
Widgets
