14 experimentos com HTML 5 de cair o queixo

Nos últimos meses, o HTML 5 vem ganhando destaque por conquistar cada vez mais um espaço que até então parecia exclusivo das aplicações em Flash. Embora o software da Adobe continue sendo usado por uma grande quantidade de sites, a falta de suporte à tecnologia em produtos Apple e, futuramente, também no Windows 8, faz com que  surjam dúvidas quanto a seu futuro.

É fácil entender os motivos pelos quais o HTML 5 ganha cada vez mais espaço e conquista a preferência das fabricantes. Dispensando totalmente a instalação de qualquer espécie de plugin, a tecnologia permite inserir vídeos, jogos e conteúdos interativos em sites de uma forma simples para o desenvolvedor e mais confortável para o usuário.

Para tornar o processo de desenvolvimento mais simples, a linguagem utiliza tags objetivas que dispensam o uso de códigos complicados para o desenvolvimento de sites mais interessantes. Nesse artigo, apresentamos alguns exemplos do que pode ser feito por essa tecnologia que deve mudar de forma substancial a internet nos próximos anos.

The Wilderness Downtown

Nesse endereço, basta digitar o nome de uma cidade qualquer para transformá-la em uma peça importante dentro de um videoclipe. Para tornar o resultado mais interessante, são abertas diversas abas com tamanho variável no navegador, cada uma mostrando um ângulo diferente da ação.

Para obter um filme com mais elementos, é indispensável escolher uma localização que esteja retratada no serviço Google Street View. Depois de assistir ao resultado final, é possível compartilhá-lo com amigos através de sites como o Facebook e o Twitter.

Flower Power

Exemplo da interatividade, o FlowerPower é um site que permite aos usuários escrever ou desenhar qualquer coisa usando flores que desabrocham com um simples clique do mouse.

Controladores na parte superior da tela permitem alterar o tamanho da escrita e até mesmo a velocidade com que as flores surgem. O resultado é só uma mostra do que o HTML 5 pode entregar sem em nenhum momento interferir no desempenho de um navegador.

WebGL Water Simulation

Recomendado somente para quem possui instalada uma placa de vídeo um pouco mais atual, o WebGL Water Simulation é um belo exemplo das capacidade 3D do HTML 5. Esse experimento mostra uma interação com a água extremamente realista, incluindo uma fonte de luz que se adapta ao posicionamento de cada elemento e ao ângulo de visualização escolhido pelo usuário.

ROME

Um surpreendente videoclipe interativo que mistura filmagens com atores reais, animação em 3D e desenhos tradicionais, ROME guia o usuário por uma viagem surreal em que nada é o que realmente parece ser.

A interação com os elementos presentes na tela se dá através do ponteiro do mouse, que pode ser usado para mudar o ângulo da câmera, revelando detalhes que normalmente passariam despercebidos. Além disso, também podem ocorrer transformações em elementos do cenário, com resultados bastante coloridos e surreais. Para obter um melhor desempenho, é imprescindível o uso do navegador Google Chrome.

Voxels

Uma espécie de LEGO virtual no qual é possível adicionar uma grande quantidade de peças das mais variadas cores. Usando somente o ponteiro do mouse, o usuário pode mudar rapidamente o ângulo de visão e mudar o nível de zoom dos elementos apresentados na tela.

Google Sphere

Que tal se, em vez de apresentar os resultados de uma busca na forma de listas, o Google aproveitasse melhor o espaço em branco disponível em sua página inicial? É justamente isso que faz o Sphere, transformando qualquer busca em uma verdadeira nuvem de tags interativa.

Conductor

Diversas linhas se movem de forma totalmente aleatória pela tela e, ao se cruzarem, resultam na reprodução de diferentes notas musicais. O usuário possui a liberdade de usar o ponteiro do mouse para interagir com qualquer elemento da tela, em uma experiência que impressiona pela criatividade.

Asteroids

Uma recriação em três dimensões do jogo clássico lançado pela Atari em 1979, essa versão de Asteroids apresenta gráficos atualizados que rodam diretamente no navegador, dispensando a instalação de qualquer plugin. Ideal para passar o tempo em uma tarde de tédio.

Ball Pool

Nessa bela experiência com HTML 5, o usuário tem à disposição bolas de diversos tamanhos que pode movimentar da maneira que deseja pela tela. O projeto se destaca pela física realista e pela interação que possui com o navegador.

Não deixe de testar ações como clicar duas vezes sobre um objeto, selecionar o plano de fundo ou literalmente chacoalhar o navegador para ver as bolas saltando de um lado para o outro da tela. A experiência é interessante o bastante para justificar a perda de uma boa quantidade de minutos em frente ao computador.

Magnetic

Aprenda mais sobre a forma como ímãs atuam sobre partículas presentes no ambiente e entre si mesmos. Além de arrastar os elementos da tela, o usuário pode adicionar novos ímãs com tamanhos variáveis usando um duplo clique do mouse em qualquer lugar do ambiente.

Z-Type

Teste sua velocidade de digitação nesse jogo viciante em que o objetivo é escrever o mais rápido possível as palavras que surgem na tela. Cada letra correta garante um tiro, e é preciso uma boa habilidade no teclado para derrotar os inimigos que surgem nos estágios mais avançados do título.

BreakDOM

Nesse remake do game Breakout, o jogador utiliza uma barra de rolagem para controlar uma bola responsável por eliminar diversas caixas de seleção. Os controles são simples e podem ser efetuados tanto através do mouse quanto pelas setas do teclado.

Trail

Faça desenhos coloridos na tela do navegador usando traços que acompanham a movimentação do ponteiro do mouse. Para expandir o raio dos traços que ficam girando de forma constante, basta pressionar e segurar o botão esquerdo do dispositivo.

Typographic Rain

Uma verdadeira chuva de caracteres vai inundar seu navegador neste experimento que mostra como diferentes elementos de HTML 5 podem interagir entre si. Cada uma das letras que “chove” na tela é constituída por um código diferente, que responde de forma realista aos demais elementos da tela.

Além de contar com uma espécie de guarda-chuva que bloqueia determinados caracteres, o usuário pode alterar o tamanho das letras, a frequência com que elas caem e até mesmo o nível da gravidade presente no ambiente.