Arquivo da tag: html5

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