4 maneras de crear experiencias web más ricas
La Web ha evolucionado mucho desde ser un repositorio de documentos simple, y ahora tenemos navegadores capaces de interacciones visuales ricas tanto en computadoras de escritorio como en dispositivos móviles.
Como me gustaría hablar sobre hacia dónde se dirige la Web en este artículo, es posible que muchas de las funciones que cubriré tengan una compatibilidad limitada, por lo que es importante usar recursos como caniuse.com que tiene una lista robusta de características y gráficos que especifican dónde son compatibles.
Echemos un vistazo a las cuatro formas en que puede mejorar su UX del sitio:
1. CSS
CSS es el lenguaje de estilo para nuestros documentos, tendemos a pensar en esto en términos simples, como cambiar el tamaño de fuente o el color, pero cada vez es más poderoso con características como transformaciones y animaciones. También estamos obteniendo nuevas características para hacerlo aún más poderoso.
Si usó Vector Masks en herramientas como Photoshop, debería estar familiarizado con la idea detrás de CSS Clip Paths. Esta característica le permite definir una forma en CSS que define las partes transparentes y opacas de su contenido HTML. Estos funcionan muy bien con Transiciones CSS para ocultar y revelar elementos de UI. De forma similar, las máscaras de CSS están llegando a la Web, lo que le permite definir las partes transparentes de su contenido mediante una imagen. Esto le permite usar la transparencia de manera más efectiva en sus diseños para interés visual o texturas.
2. SVG
La mayoría de las imágenes que encontramos en la Web hoy en día son imágenes de trama, compuestas de píxeles. Esto significa que a medida que los escalamos o los vemos en dispositivos de mayor resolución, se pixelan.
Los gráficos vectoriales son impresionantes porque están formados por primitivas geométricas que conservan sus bordes nítidos en cualquier tamaño.
SVG es el formato vectorial para la Web. Podemos usarlo para mostrar gráficos e incluso manipular y animar sus propiedades con CSS. Donde SVG se vuelve realmente poderoso es cuando lo combinamos con secuencias de comandos. Chasquido es una biblioteca de JavaScript que facilita la manipulación y animación de contenido SVG. Está enfocado en navegadores modernos, por lo que es compatible con las funciones más recientes de SVG, como grupos y rutas de clips. Snap tiene un origen abierto en GitHub e incluso lo usamos para crear un rico anuncio publicitario animado, puedes leer más sobre él enmi blog.
Y aquí hay una muestra de un anuncio que hicimos usando SVG.
3. Lienzo 2D
2D Canvas es otra característica poderosa de la Web optimizada para dibujar formas e imágenes. Proporciona una API de JavaScript que le brinda control granular sobre su elemento canvas. También le da la libertad de integrar otras formas de medios, como el video, creando el potencial de ricos botones interactivos que reproducen, detienen o restringen el video. 2D Canvas ahora es compatible con los modos de fusión, que le permiten mezclar los colores de las capas de maneras visualmente interesantes, sobre las que puede leer más sobre aquí.
También estamos comenzando a recibir soporte para video alfa que nos permite integrar mejor el video en nuestro contenido. Un ejemplo divertido de video alfa está en OK, el video musical de W Go 'WTF' .
OK Go es conocido por elaborar videos musicales, y en este video en particular, tiro coreografía frente a una pantalla verde. Luego, el procesamiento posterior continuó renderizando el metraje encima de sí mismo, creando un efecto de eco fresco donde estaba la transparencia. Podemos reproducir este efecto utilizando 2D Canvas, pero podemos llevarlo un paso más allá y hacerlo interactivo utilizando funciones como los modos de mezcla de lienzo para crear nuevos efectos visuales en tiempo real.
4. WebGL
WebGL proporciona una API de bajo nivel para dibujar gráficos acelerados en 2D y 3D. El potencial aquí es juegos estilo consola, como Grand Theft Auto 5 que se ejecuta dentro de su navegador. Como puedes imaginar, WebGL se vuelve algo complicado, afortunadamente, las bibliotecas de código abierto como Three.js proporciona un excelente punto de entrada con excelentes ejemplos para que comiences.
GitHub se ha convertido en un gran recurso para la comunidad de fuente abierta. Puede encontrar Three.js y Snap en GitHub, así como otras excelentes bibliotecas, lo que facilita el trabajo asombroso en la Web. A menudo pongo experimentos y herramientas que hago en GitHub también, como herramienta spline de cámara Solía crear rutas de cámara para Three.js para volar a través de mundos 3D.
Como podemos ver, la Web se está volviendo cada vez más diversa y poderosa, es un momento emocionante para ser un desarrollador web. La variedad de tecnologías y recursos a los que tenemos acceso aumentan constantemente, y es divertido ver las experiencias enriquecedoras que la gente está creando con ellos.