4 maneiras de criar experiências mais ricas na web
A Web evoluiu muito, sendo um simples repositório de documentos, e agora temos navegadores capazes de interações visuais ricas tanto em computadores quanto em dispositivos móveis.
Porque eu gostaria de falar sobre onde a Web está indo neste artigo, muitos dos recursos que eu cobrirei podem ter suporte limitado, então é importante usar recursos como caniuse.com que possui uma lista robusta de recursos e gráficos, especificando onde eles são suportados.
Vamos dar uma olhada nas quatro maneiras que você pode melhorar seu site UX:
1. CSS
CSS é a linguagem de estilo para os nossos documentos, nós tendemos a pensar nisso em termos simples, como mudar o tamanho da fonte ou cor, mas está se tornando cada vez mais poderoso com recursos como transformações e animações. Também estamos obtendo novos recursos para torná-lo ainda mais poderoso.
Se você usou o Vector Masks em ferramentas como o Photoshop, você deve estar familiarizado com a idéia por trás Caminhos de Clipe CSS. Esse recurso permite definir uma forma em CSS que define as partes transparentes e opacas do seu conteúdo HTML. Estes funcionam muito bem com Transições CSS para ocultar e revelar elementos da interface do usuário. Da mesma forma, as máscaras CSS estão chegando à Web, o que permite definir as partes transparentes de seu conteúdo usando uma imagem. Isso permite que você use a transparência de forma mais eficaz em seus projetos para obter interesse visual ou texturas.
2. SVG
A maioria das imagens que encontramos hoje na Web são imagens rasterizadas, compostas de pixels. Isso significa que, à medida que os dimensionamos ou os visualizamos em dispositivos de maior resolução, eles ficam pixelados.
Os gráficos vetoriais são incríveis porque são compostos de primitivos geométricos que mantêm suas bordas nítidas em qualquer tamanho.
SVG é o formato vetorial da Web. Podemos usá-lo para exibir gráficos e até mesmo manipular e animar suas propriedades com CSS. Onde o SVG fica realmente poderoso é quando o combinamos com scripts. Snap é uma biblioteca JavaScript que facilita manipular e animar o conteúdo SVG. Ele é focado em navegadores modernos, por isso suporta os mais novos recursos do SVG, como grupos e caminhos de clipes. O Snap é aberto no GitHub e nós o usamos para criar um anúncio de banner animado, você pode ler mais sobre ele dentromeu blog.
E aqui está uma amostra de um anúncio que fizemos usando SVG.
3. Lona 2D
O Canvas 2D é outro recurso poderoso da Web otimizado para desenhar formas e imagens. Ele fornece uma API JavaScript que fornece controle granular sobre o elemento da tela. Também lhe dá a liberdade de integrar outras formas de mídia, como vídeo, criando o potencial de botões interativos ricos que reproduzem, pausam ou esfregam imagens de vídeo. O Canvas 2D agora suporta modos de mesclagem, que permitem misturar as cores das camadas de maneiras visualmente interessantes, sobre as quais você pode ler mais sobre Aqui.
Também estamos começando a obter suporte para o vídeo alfa que nos permite integrar mais facilmente o vídeo ao nosso conteúdo. Um divertido exemplo de vídeo alfa está em O videoclipe de OK Go 'WTF' .
OK Go é conhecido por vídeos musicais elaborados, e nesse vídeo em particular eles tiro coreografia na frente de uma tela verde. Em seguida, o uso de pós-processamento continuou a renderizar a filmagem em cima de si mesmo, criando um efeito de eco legal em que a transparência estava. Podemos reproduzir esse efeito usando o 2D Canvas, mas podemos dar um passo além e torná-lo interativo usando recursos como os modos de mesclagem da tela para criar novos efeitos visuais em tempo real.
4. WebGL
O WebGL fornece uma API de baixo nível para desenhar gráficos 2D e 3D acelerados por hardware. O potencial aqui é os jogos estilo console, como o Grand Theft Auto 5 rodando dentro do seu navegador. Como você pode imaginar WebGL fica um pouco complicado, felizmente bibliotecas de código aberto como Three.js fornecer um ótimo ponto de entrada com ótimos exemplos para você começar.
GitHub tornou-se um excelente recurso para a comunidade de código aberto. Você pode encontrar Three.js e Snap no GitHub, bem como outras ótimas bibliotecas, tornando mais fácil fazer um trabalho incrível na Web. Eu freqüentemente coloco experimentos e ferramentas que eu faço no GitHub também, como ferramenta de spline de câmera Eu costumava criar caminhos de câmera para o Three.js para voar através de mundos 3D.
Como podemos ver, a Web está se tornando cada vez mais diversificada e poderosa, é um momento empolgante para ser um desenvolvedor da Web. A variedade de tecnologias e recursos a que temos acesso está em constante crescimento, e é divertido ver as ricas experiências que as pessoas estão criando com elas.