Arquivo da tag: Javascript

The Wilderness Downtown: Experimento do Google usando HTML5

Apesar de ser um experimento já antigo, resolvi blogar assim mesmo, pois algumas pessoas ainda não o conhecem…

The Wilderness Downtown foi um projeto experimental do google, lançado em 2010, usando HTML5 e o navegador Chrome.

O projeto é simplesmente fantástico, baseado essencialmente em JavaScript, HTML5, Canvas, SVG, Google Street View e na API do Google Maps.

Tudo começa ao informar um endereço real. A partir das imagens do Google Maps e Street View, o vídeo de um rapaz correndo abre em uma das abas, e na outra, a posição de onde o rapaz está correndo aparece na região que você informou.

Enquanto isso, alguns pássaros voam sobre os mapas e até pelo video, sendo que eles são animações feitas no canvas. Note que na tela inicial (onde você informa o endereço) os pássaros são sensíveis a posição do mouse. Então, se você tentar toca-los, eles irão mudar de direção… 🙂

Durante a exibição, você poderá fazer um desenho e inclusive podendo utilizar as letras do teclado para escrever algo. A cada tecla pressionada, uma animação de máquina de escrever é reproduzida  logo a baixo. O mais impressionante disso tudo, é que depois que passam alguns segundos, os pássaros voltam voando e pousam em todas as linhas que você fez no desenho.

Você pode acessar e conferir tudo em: http://www.thewildernessdowntown.com/ (recomenda-se o uso do navegador Chrome)

Share

HTML5: Trocando mensagens entre a página e iframes

Por questões de segurança e privacidade, os navegadores impedem que haja comunicação entre os conteúdo de diferentes domínios. Ou seja, scripts em diferentes dominios (cross-domain) não podem se interagir.

Na prática seria assim… Já imaginou, se um simples anúncio do google adsense, pudesse controlar a página em que ele foi colocado ? Ele iria alterar o background, trocar titulos na página e bagunçar tudo.

Por isso essa é uma importante funcionalidade nos navegadores, pois evita com que páginas desconhecidas (em domínio diferente) de controlar a página atual em que está visitando.

Com o HTML5, podemos contornar esse problema facilmente. Utilizando o Cross-document messaging, podemos estabelecer comunicação entre páginas e documentos no html, sem se procupar com a origem do domínio. Foi desenvolvido justamente para permitir essa comunicação, sem colocar em risco a segurança da página. (cross-site scripting attacks).

Cross-site messaging funciona apenas no HTML5, e está disponível nas seguintes versões de navegadores:

  • Internet Explorer 8.0+
  • Firefox 3.0+
  • Safari 4.0+
  • Google Chrome 1.0+
  • Opera 9.5+

Vejamos então um exemplo prático:

Digamos que em sua página inicial, você tem o seguinte iframe.

1
<iframe id="exemplo-iframe" src="http://www.exemplo.com/teste.html"></iframe>

Se você quiser mandar o titulo do seu site para o iframe, você precisa usar o cross-document messaging pois ele está em um outro domínio. Veja abaixo como você faria para disparar essa mensagem:

1
2
3
4
<script language="javascript">
var iframe = document.getElementById("exemplo-iframe").contentWindow;
iframe.postMessage("Titulo do Site", "*"); 
</script>

Na linha 2 é onde obtemos o controle do iframe. Na linha 3 é onde disparamos a mensagem. Note que estamos passando um “*” como segundo argumento do postMessage, o que significa que a mensagem é enviada para todos os domínios. Poderiamos ser mais específicos e disparar apenas para o domínio do iframe (exemplo.com).

Agora, no lado do iframe, só falta receber essa mensagem. Veja abaixo o exemplo do código que o iframe deve carregar:

1
2
3
4
5
6
7
8
<script language="javascript">
function displayMessage(event) {
    var message = event.data;
    alert(message);
    event.source.postMessage("Recebido com sucesso!",  "*");
}
window.addEventListener("message", displayMessage, false);
</script>

Vou começar explicando pela linha 7,  onde é estabelecido o listener, que é responsável por “escutar” as mensagens recebidas e chamar a função displayMessage. Na linha 3, recebemos a mensagem numa variável. Na linha 4 exibimos ela no alert do javascript. Na linha 5, é disparado uma mensagem para o “remetente”, ou seja, podemos enviar uma mensagem para confirmar o recebimento por exemplo.

Lembrando que para que a mensagem enviada na linha 5 seja recebida corretamente pela sua página inicial, você tem que adicionar um listener, da mesma forma que foi feito no iframe. Fazendo assim, é possível fazer trocas de informações entre as páginas de diferentes domínios.

No exemplo acima, qualquer site estaria habilitado em trocar informações com aquela página do iframe (http://www.exemplo.com/teste.html) e dependendo do contexto e de como foi implementado, pode vir a ser uma falha de segurança, portanto, utilize com cuidado.

Share

Feliz ano novo com javascript !

natal-16Primeiramente, gostaria de desejar a todos os leitores e amigos que acompanham meu blog:

Um feliz natal e um próspero ano novo !

Entrando nesse ritmo de natal e ano novo, desenvolvi um pequeno código em javascript para desejar feliz natal e ano novo para os leitores do meu blog.

O código está realmente simples, e pode ser alterado e utilizado aonde quiser… Só não esqueça de deixar sua opnião nos comentários abaixo!

O script funciona da seguinte maneira:
3 variáveis são definidas no inicio:
Data atual (var agora).
Data do ano novo (var anoNovo).
Data máxima de exibição (var anoNovoMax).

O alert com a mensagem será exibida enquanto a data atual estiver dentro do intervalo das outras 2 datas.

Abaixo segue o código:

<script language="JavaScript">
var agora = new Date();
var anoNovo = new Date(2010, 0, 1, 0, 0, 0, 0);
var anoNovoMax = new Date(2010, 0, 1, 23, 59, 59, 0);
if(agora >= anoNovo && agora<anoNovoMax)
{
alert("Feliz ano novo !");
}
</script>

Para implementar no wordpress, é bem simples:
Adicione um Widget de texto em seu wordpress, e sem atribuir um titulo, insira o codigo javascript diretamente no campo de baixo “descrição”. Fazendo isso, o widget não ficará visível, mas o código vai funcionar… 🙂

Para implementar em seu site:
Basta inserir o javascript em sua página.

Dica:
Como o javascript pega a data da máquina do cliente, você corre o risco de pegar a data errada.  Uma solução seria usar o PHP para definir a data, ou seja,  seria a data atual seu servidor. Exemplo:

var agora = new Date(<?php echo date("Y, m, d, H, i, s"); ?>);

Então é isso… Façam bom proveito !

Aqui no blog, já está implementado as mensagens de Feliz Natal e Feliz Ano Novo… Serão exibidas durante todo o dia 25 e 01, respectivamente ! Visitem o Blog e confiram ! 😉

 

Share