Ei ¡que pasa lector! ¿cómo va todo? supongo que si estás aquí es porque te ha entrado el gusanillo de probar los archivos JSON en tu web y estás recopilando un poco de info antes de liarte con algo nuevo ¿no? Tranquilo que en un plis plas te quedará claro qué son los archivos JSON y cómo puedes sacarle partido a estos archivos creando animaciones para tu web.
¿Qué es un archivo JSON?
Antes de empezar a exportar este tipo de ficheros, primero haremos un pequeño repaso sobre qué es un archivo .JSON y cuáles son sus características principales para que tengas una visión general sobre este archivo.
Un archivo .JSON es un tipo de archivo que almacena objetos y estructuras de datos simples en formato JavaScript Object Notation (.JSON). Estos archivos son utilizados para transferir información entre una aplicación web y un servidor. Son archivos de tamaño pequeño y se pueden editar con un editor de texto estilo notepad, como HTML, CSS o Javascript.
Los .JSON se están volviendo muy populares entre los desarrolladores web cómo alternativa al XML. La ya desaparecida Google+ por ejemplo, guardaba los datos del usuario en formato .JSON.
¿Cómo abrir archivos JSON?
Los archivos JSON son leíbles para el humano, bueno…igual que lo puede ser un archivo Javascript, para que nos entendamos. Si sabes el lenguaje o tienes nociones de programación lo podrás entender. Para abrirlo y ver el código, solamente hace falta que lo abras con cualquier editor de texto tradicional, ya sea Notepad o cualquier otro con el que estéis acostumbrados a trabajar.
Abrir archivos JSON en Chrome
Este tipo de archivos se pueden abrir con el navegador web, con un simple click con el botón derecho del ratón encima del archivo y abrir con el navegador que uséis.
Si queréis verlo de una manera más agradable tenéis disponible una extensión para Chrome llamada JSONView.
¿Cómo puedo ver una animación hecha con .JSON?
El formato .JSON es capaz de contener una animación en vectores tal y como lo podría hacer un archivo Javascript convencional o un .svg. Para abrir el fichero y poder ver la animación que contiene puedes hacerlo en esta web de una manera bastante sencilla. Solamente tienes que subir el fichero y se reproducirá en tu navegador.
Añadir animaciones en tu web
Los archivos JSON, como he mencionado anteriormente, almacena objetos y estructuras de datos. En cuanto a datos también hemos comentado que pueden substituir el conocido lenguaje XML pero ¿qué pasa con los objetos?
Un archivo .JSON puede almacenar objetos vectoriales y animarlos mediante código. El archivo resultante queda en un tamaño reducido y eso hace que sea realmente interesante para web. Evidentemente la animación no la tenemos que hacer directamente escribiendo código, ya que los amigos de Adobe ya han pensado en ello y han desarrollado un plugin para After effects capaz de exportar una animación desde el programa en un formato .JSON. Esta extensión se llama Bodymovin. No estoy muy seguro si la extensión es de Adobe pero la puedes encontrar en su página web. ¿Mola, no?
Primero vamos a ver qué opciones tenemos para incrustar un archivo .JSON en nuestra web y más adelante veremos cómo funciona la extensión Bodymovin para que te sea fácil conseguir exportar tus animaciones en este formato.
Parsear el archivo con jQuery
Si en tu web ya estás cargando la librería jQuery que sepas que puedes cargar un archivo .JSON con jQuery. Como esta opción no la he probado no puedo hablar mucho de ella. Para más información puedes visitar la documentación oficial de jQuery.
Cargar un archivo .JSON con Lottie y HTML
Existe una galería de animaciones hechas con .JSON llamada Lottie, dónde los diseñadores gráficos comparten sus ficheros con la comunidad y son fácilmente importables mediante código HTML. Lottie utiliza un parseador propio.
Las animaciones de la web de Lottie se pueden personalizar y una vez personalizadas se genera un código en HTML que podrás utilizar en tu web y así reproducir la animación. Os recomiendo que le echéis un vistazo.
Cargar un archivo .JSON con Elementor
Si eres un usuario habitual de Elementor habrás visto que hay una opción llamada Lottie en su versión premium. Pues bien, en ella además de cargar un archivo de Lottie podemos importar un archivo .JSON directamente desde nuestro disco duro y se reproducirá al instante.
Exportar un archivo Lottie con After Effects y Bodymovin
Si eres diseñador gráfico y usuario de After Efects que sepas que puedes exportar tus animaciones en .JSON con la extensión Bodymovin. Esta genial extensión traducirá las diferentes capas y linea de tiempo en código dando como resultado un fichero que podrás importar en tu web. Cabe mencionar que las animaciones no pueden ser muy complicadas, ya que tiene sus limitaciones. Olvídate de efectos complicados, solamente podrás exportar una animación tradicional o el resultado al cargarlo será un cuadrado borroso super molón.
El funcionamiento de Bodymovin es extremadamente sencillo. Una vez lo hayáis instalado lo encontraréis en Ventana>Extensiones>Bodymovin.
Si ya tienes tu animación preparada solamente tendrás que acceder a la extensión y exportar el archivo. Selecciona la composición que quieres exportar (1), selecciona la carpeta dónde quieres guardar el archivo y ponle un nombre (2). Finalmente haz click en el botón Render (3).
Conclusión
Espero que si no conocías las posibilidades de los archivos JSON, tras este artículo te quede un poco más claro de que va el tema y cómo puedes utilizarlos para darle un poquito de movimiento a tu web y sorprender a tus lectores.
Personalmente creo que estos archivos tienen muchísimas posibilidades de cara al futuro y tienen mucho margen de mejora. Veremos que nos depara el futuro, estaremos atentos. ¡Un saludo, amigos!