Cuatro formas de crear experiencias web más ricas

La Web ha evolucionado mucho desde ser un simple repositorio de documentos, y ahora tenemos navegadores capaces de interacciones visuales enriquecidas tanto en computadoras de escritorio como en dispositivos móviles.

Debido a que me gustaría hablar sobre hacia dónde se dirige la Web en este artículo, muchas de las funciones que cubriré pueden tener un soporte limitado, por lo que es importante utilizar recursos como caniuse.com que tiene una lista sólida de características y gráficos que especifican dónde se admiten.

Echemos un vistazo a las cuatro formas en que puede mejorar la UX de su 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 o el color de la fuente, pero se está volviendo cada vez más poderoso con características como transformaciones y animaciones. También estamos obteniendo nuevas funciones para hacerlo aún más poderoso.

Si ha utilizado máscaras vectoriales en herramientas como Photoshop, debe estar familiarizado con la idea detrás Rutas de clip CSS. Esta función 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 la interfaz de usuario. De manera similar, las máscaras CSS están llegando a la Web, lo que le permite definir las partes transparentes de su contenido utilizando una imagen. Esto le permite utilizar la transparencia de forma más eficaz en sus diseños para obtener 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 rasterizadas, compuestas por 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. Quebrar es una biblioteca de JavaScript que facilita la manipulación y animación del contenido SVG. Se centra en los navegadores modernos, por lo que admite las funciones SVG más nuevas, como grupos y rutas de clip. Snap es de código abierto en GitHub e incluso lo usamos para crear un anuncio de banner animado enriquecido, puede leer más al respecto. en mi 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 un control granular sobre su elemento de lienzo. También le brinda la libertad de integrar otras formas de medios, como el video, creando el potencial de ricos botones interactivos que reproducen, pausan o eliminan secuencias de video. 2D Canvas ahora admite modos de fusión, que le permiten mezclar los colores de las capas de formas visualmente interesantes, sobre las que puede leer más aquí.

También estamos comenzando a obtener soporte para video alfa que nos permite integrar videos de manera más fluida en nuestro contenido. Un ejemplo divertido de video alfa está en Video musical de OK Go ‘WTF’.

OK Go es conocido por sus elaborados videos musicales, y en este video en particular ellos coreografía filmada frente a una pantalla verde. Luego, el uso de posprocesamiento continuó para renderizar el metraje sobre sí mismo creando un efecto de eco genial donde estaba la transparencia. Podemos reproducir este efecto usando 2D Canvas, pero podemos dar un paso más y hacerlo interactivo usando funciones como los modos de fusión de lienzo para crear nuevos efectos visuales en tiempo real.

4. WebGL

WebGL proporciona una API de bajo nivel para dibujar gráficos 2D y 3D acelerados por hardware. El potencial aquí son los juegos de estilo de consola, como Grand Theft Auto 5 que se ejecuta directamente dentro de su navegador. Como puede imaginar, WebGL se vuelve algo complicado, afortunadamente las bibliotecas de código abierto como Three.js proporcionan un excelente punto de entrada con excelentes ejemplos para comenzar.

GitHub se ha convertido en un gran recurso para la comunidad de código abierto. Puede encontrar Three.js y Snap en GitHub, así como otras excelentes bibliotecas que facilitan el trabajo increíble en la Web. A menudo también coloco experimentos y herramientas que hago en GitHub, como un herramienta de spline de cámara Solía ​​crear rutas de cámara para que Three.js volara 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 desarrollador Web. La variedad de tecnologías y recursos a los que tenemos acceso crece constantemente, y es divertido ver las ricas experiencias que la gente está creando con ellos.