A web é um perfeito playground para muitos designers criativos e desenvolvedores. O HTML estático é chato e hoje o usuário quer ver algo mais enfeitado da/na web. Utilizando e/ou combinando algumas técnicas de web como JavaScript (e claro, jQuery), CSS (3) e Flash (ou Adobe Flex) esse pedaço de interação pode ser alcançada.
Como “o céu é o limite” com essas técnicas, os programadores podem ser realmente criativos e inovadores. Alguns realmente gostam de levar isso ao próximo nível e querem exibir o uso de sua técnica, mesmo que não tenha qualquer utilidade prática. Essas Provas de Conceitos são criadas apenas porque eles PODEM. A maior parte deles realmente são apenas para se divertir ou simplesmente bonito de ver.
Essas Provas (ou experimentos) mostram alguns sérios poderes e potencial, mas não têm qualquer utilidade prática real (ainda). Eles são incríveis de assistir, mas realmente buscam algum uso melhorado.
Embora não seja uma experiência real, Chris Coyier mostra o uso de um truque frequentemente esquecido usando CSS background-attachment. Ao verificar o demo e redimensionando o navegador, um efeito embaçado é adicionado usando duas imagens. Simples e efetivo, e essa poderia ser atualmente uma aplicação mais implementada. Infelizmente, não tenho visto isso em qualquer lugar (ainda).
Não. O que você vê abaixo não é um render 3d criada com incrível software. É um verdadeiro JavaScript monster. Este experimento Javascript realmente mostra algum potencial de um motor 3D funcional. Basta verificar a demonstração e ser surpreendido. O monstro está a crescer, rodando, redimensionando quando você tem o poder de ter influência sobre ele.
BallDroppings é um brinquedo viciante e barulhento. Também pode ser encarado como um jogo de emergência. Eu conheci este programa enquanto procurava alguns aplicativos Mac, mas a versão do JavaScript funciona muito bem. Bolas caem do alto da tela e quicam das linhas que você vai desenhando com o mouse. Eles desempenham um som melódico quando quicam. Inútil, mas muito divertido e viciante.
Você tem que amar estas experiências inúteis do JavaScript. Esta, de Kelvin Luck, permite carregar uma imagem e dividi-la em pedaços. As peças se movem quando o mouse passa perto delas, como se eles estivessem com medo. Uma outra experiência divertida.
Este experimento com JavaScript tem a tagline “Possivelmente melhor do que você imagina”. Quando eu tropecei pela primeira vez nessa página, eu realmente não sabia o que esperar. Depois de entrar no projeto e criar janelas, eu fiquei absolutamente espantado. Ele permite que o usuário jogue uma bola de várias em várias janelas! Não tenho certeza se isso vai tornar-se útil no futuro, mas certamente é uma clara demonstração do poder do JavaScript.
Assim como BrowserBall, este experimento JavaScript manipula as janelas do seu navegador. Esta Prova de Conceito é muito legal, pois é um pouco mais interativa. Primeiro, você precisa ativar o seu microfone para poder acessar o aplicativo. Entre no aplicativo, fale e se surpreenda, ou deixe que outros fiquem assim, surpresos.
Toby Pitman viu uma bom utilização experimental da propriedade rotate no CSS3. Combinando esta propriedade com algum grande jQuery, ele conseguiu criar um relógio antigo que funciona muito bem em seu navegador. Isso é algo realmente criativo.
É espantoso o que o CSS pode fazer. Este exemplo de um CSS Puzzle realmente é uma boa amostra. Percorra o labirinto com o mouse e se surpreenda. Não por que ele é difícil, mas tenha em mente que este exemplo é inteiramente escrito com CSS, sem uma única linha de JavaScript.
Este exemplo é, na realidade, mais do que uma prova de conceito regular. Este plugin jQuery poderia realmente ser utilizado. DragCaptcha é criado para arrastar um ícone especificado em um determinado local, para determinar se o visitante é uma pessoa real. Esta divertida experiência não é realmente amigável ao usuário (e quando que CAPTCHA se tornou amigável ao usuário?), mas ainda mostra uma surpreendente técnica.
Ainda um outro exemplo do conceito CSS que realmente poderia ser utilizado no mundo selvagem. Nick La mostra uma simples, porém eficaz técnica para decorar uma galeria de imagem. Este truque, usando apenas CSS e algumas imagens, poderia tornar qualquer imagem excepcional.
Com a chegada do iPhone e do crecimento do Mac OS, movimentos/gestos têm realmente se tornado parte de nossas vidas. Este exemplo mostra uma imagem que funciona plenamente de acordo com os movimentos que você faz com seu mouse. Você pode até fazer o download desse exemplo e aplicá-lo em seu próprio site! Infelizmente, este exemplo não é tão útil, ainda que demonstre uma incrível técnica.
Confira este ótimo truque de CSS feito por WebDesignerWall. Criando imagens a partir de seu texto, só para conseguir um bom gradiente, não é uma pesquisa muito amigável. Além disso, o usuário não é capaz de selecionar o texto. Esta simples Prova de Conceito mostra a maneira como você pode alterar o seu cabeçalho normal em alguns incríveis cabeçalhos como efeito gradiente. Se você não gosta de gradientes, também existe o efeito Grunge desta técnica.
Simulando gravidade com jQuery
Com a utilização de métodos flexíveis do jQuery, Gaya Kessler cria um exemplo de conceito para simular a atual gravidade no seu browser. Cortar as cordas e ver os blocos caindo, saltando para cima e para baixo até que parem. Como você tem de esperar, esta não tem qualquer utilidade prática (ainda?), mas realmente acrescenta algum divertimento para seu site.
Craig Wilson revela uma técnica simples e surpreendente usando a propriedade selection do CSS3 para esconder mensagens em sua página. Basta ler o artigo, ver o demo e selecionar algum texto. Você será capaz de ver claramente a mensagem oculta; uma ótima maneira de adicionar mensagens subliminares no seu site.
Esta é uma técnica que eu realmente não gosto. Não por causa do código louco que você teria que escrever para arquivar isso, mas apenas porque não parece fascinante. Com a CSS Image and Text Wrap, você pode fazer um Wrap no texto em torno de uma imagem, dando ao usuário a sensação de que é criado no exterior da caixa modelo. Para fazer um Wrap do texto em torno de uma imagem, basta pensar fora da caixa!
Eu absolutamente amo o efeito paralax, ele dá ao navegador uma dimensão totalmente nova. jParallax, um plugin jQuery, permite-lhe criar o efeito e agir como movimento do mouse. Se bem que alguns sites fazem uso desta técnica, que poderia ser utilizada de várias maneiras. Se você é um amante do MooTools, também há uma versão Mootools: mParallax.
O quê? Colocando um Sistema Operacional dentro do seu navegador? Qual é a utilização do mesmo? Nenhuma (assim como criar um iPhone para o seu navegador é inútil, porém divertido)! Ela só mostra o poder da jQuery e traz alguma beleza do Sistema Operacional para o navegador. Harley fez um bom trabalho convertendo uma grande parte do Leopard Desktop para uma página Web, só para mostrar que ele pode. Algumas peças podem ser úteis, a maioria das partes do tutorial são apenas para diversão.
Alguma vez você pensou que você poderia criar um cubo 3D real utilizando apenas CSS? Paul Hayes conseguiu criar esse efeito usando a propriedade transform do CSS3. Combinado com a propriedade transition, estes cubos podem ser movidos também: todos, sem a ajuda de qualquer JavaScript. Este tipo de experimento poderia dar à web toda uma nova dimensão.
Um grande exemplo, utilizando o efeito parallax do CSS para criar uma incrível ilusão. Você simplesmente tem que verificar a demonstração e ser surpreendido. Você também pode aprender a criar esse efeito para usar em qualquer um dos seus futuros projetos. Não existem usos práticos reais que eu posso pensar, porém ainda é muito legal de ver.
Visualizador de fotos no formato Polaroid com CSS3
Outro experimento criativo em CSS3 e jQuery. Embora muito legal para usar quando as opções CSS3 não estão ativadas, a verdadeira diversão desta aplicação é a rotação dos polaroids. Ele simplesmente lhes dá mais “sentimento”, como se você está realmente arremessando essas imagens ao redor. Combinado com uma aparência elegante, este exemplo pode ser utilizado quando CSS3 será mais de uma norma. Para agora, esta é uma verdadeira Prova de Conceito.
O artigo de António Calzadilla começa com “Porquê?”. Como eu disse no início deste artigo, a resposta é: só porque ele pode! Confira esse pequeno robô que se desloca e salta sobre o seu script, principalmente utilizando jQuery. Seu tutorial detalhado até mesmo explica como ele criou o amiguinho.
Mensagem Secreta ao deslocar, com CSS
Chris Coyier mais uma vez faz jus ao nome do seu site – CSS Tricks. Outro tipo de Mensagem Secreta, mas agora o usuário vê apenas a mensagem quando se deslocar para baixo. Muito fácil de implementar e usar, mas realmente não é amigável ao usuário. Ainda mais uma vez mostrando algumas únicas utilizações do CSS.
Aprendi este truque com Jacob Cass. Clique sobre o fundo do site Facebook e pressione o seguinte: para cima, para cima, para baixo, para baixo, esquerda, direita, esquerda, direita, b, a, enter, clique. Perceba: Um fabuloso lens flare! A combinação de pressionar as teclas é o Código Konami. Inútil? Um pouco. Divertido? Absolutamente.
*
Artigo originalmente publicado em: http://www.noupe.com/css/20-wicked-proof-of-concepts-for-better-use-of-jquerycss.html
De 0 a 10, o quanto você recomendaria este artigo para um amigo?