Em comparação a outros meios de comunicação, a internet é o que apresenta maior liberdade tanto no que diz respeito a seu conteúdo quanto à maneira como ele é apresentado. Enquanto a televisão e o meio impresso costumam demorar a se adaptar a novos conceitos, a web é marcada pela transformação constante — sites considerados construídos há dois anos que eram considerados bonitos e versáteis em sua época atualmente muitas vezes já parecem verdadeiras peças de museu.
Essa grande velocidade de transformação faz com que, embora incerto, o futuro da rede pareça bastante atrativo. Através do uso de ferramentas como o HTML 5 e o CSS 3D, nos próximos anos devemos ver uma mudança radical na maneira como informações são apresentadas através da web.
(Fonte da imagem: iStock)
Claro, as páginas tradicionais baseadas em textos e imagens continuarão existindo, porém até elas vão sofrer transformações. O futuro da rede mundial de computadores promete trazer maior interatividade, oferecendo conteúdos de uma maneira muito mais intuitiva e natural do que a atual — além disso, sites devem se tornar cada vez mais leves para permitir a navegação através de dispositivos como smartphones e tablets.
Neste artigo, reunimos alguns exemplos de páginas que já estão trabalhando com as ferramentas que prometem mudar totalmente a cara da internet. Como ainda estão em estágio inicial, pode ser que seu navegador ainda não esteja preparado para lidar com elas: nesse caso, para visualizá-las corretamente, recomendamos o uso do Google Chrome ou do Safari, caso você use alguma plataforma da Apple.
Movi Kanti Revo
Inspirado nas apresentações realizadas pelo Cirque Du Soleil, o Movi Kanti Revo (movimento, canto e sonho, em esperanto) tem o objetivo de reproduzir as sensações provocadas pelas apresentações do grupo. O site, criado para trabalhar com o Google Chrome, convida você a seguir um personagem misterioso que passa por diversos mundos com características surreais.
O trabalho se destaca pela capacidade de dispensar completamente o uso do mouse durante a navegação. Para isso, a página se conecta à webcam presente em seu computador, permitindo que você faça gestos diante de seu monitor capazes de controlar totalmente a experiência.
Segundo a empresa, a página foi construída misturando elementos de HTML e CSS tradicionais com transições em 3D e APIs em HTML 5. Caso você esteja interessado em descobrir mais detalhes sobre o processo de criação do experimento, basta acessar o blog Chromium para conferir de perto todas as etapas necessárias para montá-lo.
Acko.net
Que tal montar uma página repleta de elementos tridimensionais sem que nenhuma imagem seja usada no processo? É essa a proposta do experimento “Making Love to Webkit”, desenvolvido pelo Acko.net.
(Fonte da imagem: Reprodução/Acko.net)
Usando uma ferramenta de edição 3D baseada no JavaScript, o criador do site desenvolveu um cabeçalho no qual diversas linhas se sobrepõem e se cruzam de maneira a passar uma grande sensação de profundidade para quem olha para elas. Além de explicar todo o processo usado para desenvolver o projeto, o designer responsável por ele incluiu um editor rudimentar que permite interagir com os elementos da página, seja incluindo novos itens ou realizando mudanças de perspectiva.
Fat-Man Collective
Criada por um grupo de designers de Barcelona e Londres, a Fat-Man Collective mostra como a tecnologia pode ser aplicada para desenvolver páginas mais simples e intuitivas. O site aposta em diversos elementos interativos para mostrar como eles podem agir para tornar um endereço mais bonito e fácil de navegar.
(Fonte da imagem: Reprodução/Fat-Man Collective)
Destaque especial deve ser dado à maneira como a rolagem de tela é feita: em vez de forçar que você simplesmente mude seu ponto de vista, a página transporta os conteúdos que estão escondidos diretamente para o seu campo de visão. Além disso, vale prestar atenção no pequeno boneco localizado no canto direto da tela, que reage a cada uma das ações que você realiza.
CSS 3D Cube
(Fonte da imagem: Reprodução/CSS 3D Cube)
Criado por Paul Hayes, o CSS 3D Cube é um exemplo simples de como o CSS pode ser utilizado para criar elementos tridimensionais que não exigem máquinas com poder de processamento avançado para serem reproduzidos. Além de permitir o uso do ponteiro do mouse para girar livremente o cubo, o experimento oferece a opção de reproduzir vídeos incorporados a ele, sem que isso atrapalhe o desempenho do navegador utilizado.
Rotação natural de objetos
(Fonte da imagem: Reprodução/Eleqtriq)
Quem já acessou alguma página construída em Flash sabe o quanto a tecnologia pode ser pesada, dificultando o trabalho com elementos tridimensionais. O mesmo não acontece quando se usa o CSS 3D, como bem prova o site Eleqtriq — usando a linguagem, foi desenvolvido um exemplo de uma caixa de cereal em 3D que pode ser vista de diversos ângulos simplesmente clicando e mexendo o mouse de um lado para outro.
FPS criado em HTML
(Fonte da imagem: Reprodução/Keith Clark)
Usando somente os recursos proporcionados pelo HTML 5 e pelo CSS 3D, o designer Keith Clark criou uma versão rudimentar de um jogo de tiro em primeira pessoa que roda diretamente em seu navegador. Além de mostrar o potencial das novas tecnologias, a página também é prova de que os games devem ganhar um espaço ainda maior na web em um futuro próximo.
Transições
(Fonte da imagem: Reprodução/Apple)
Desenvolvido por engenheiros da Apple, o “Transitions” é um experimento que mostra como o CSS pode ser empregado para fazer a transição de diferentes elementos de uma página. No caso, são usadas diversas imagens que se alternam na tela dependendo do efeito selecionado pelo visitante.
Beercamp
(Fonte da imagem: Reprodução/Beercamp)
A página promocional do evento SXSW Beercamp 2011 utiliza elementos tridimensionais para transformar totalmente a maneira como os elementos de uma página são exibidos. Em vez de optar por transições tradicionais, o site transforma a barra de rolagem de seu navegador em uma ferramenta capaz de determinar a profundidade dos elementos vistos na tela — o resultado final é nada menos que impressionante, com direito a referências ao filme “Inception” (“A Origem”).
Wonder Webkit
(Fonte da imagem: Reprodução/Wonder Webkit)
Embora não seja tão chamativo quanto as demais páginas apresentadas neste artigo, o experimento realizado pelo site is-real mostra como o CSS pode ser utilizado para exibir transições mais suaves entre conteúdos diferentes. Basta passar o ponteiro do mouse sobre qualquer um dos livros disponíveis para que surja imediatamente na tela seu título e o autor, enquanto um clique sobre qualquer uma das opções garante a oportunidade de ver mais detalhes das capas de cada um dos trabalhos.
Categorias