14 experimentos com HTML 5 de cair o queixo

Descubra algumas das possibilidades de criação proporcionadas por essa linguagem que tem tudo para desbancar o Flash da Adobe.
  • Visualizações281.422 visualizações
Por Felipe Gugelmin em 28 de Setembro de 2011

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.

14 experimentos com HTML 5 de cair o queixo

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.

14 experimentos com HTML 5 de cair o queixo

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.

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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.

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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

14 experimentos com HTML 5 de cair o queixo

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.

14 experimentos com HTML 5 de cair o queixo

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.



Viu algum erro ou gostaria de adicionar uma sugestão para atualizarmos esta matéria?
Colabore com o autor clicando aqui!