Gracias al auge de los memes, los cuales muchas veces van de la mano de los GIF animados, estamos viendo la ascensión “nuevamente” de las animaciones en las páginas web: sí, esto me recuerda a las páginas de los 90’s. 🤯
Pero existe un tipo de animación que ha irrumpido con fuerza en los últimos tiempos: Lottie, por ser ligeras y aprovechar las últimas tecnologías en el desarrollo web.
En este artículo te mostraré cómo agregar animaciones Lottie en tu Moodle, para que aproveches todo el potencial de las animaciones en tus cursos.
Animaciones Lottie, JSON y Lottiefiles
Lottie es un formato de archivo desarrollado por Airbnb (sí, los mismos de los alquileres de residencias 😅) para crear animaciones, que aprovecha toda la potencia de los archivos JSON.
Esto permite animaciones ligeras, independientes de la resolución de pantalla y multiplataforma, pudiendo implementarlos en la web, Android, iOS, entre muchos otros.
Las animaciones desarrolladas en Lottie se agrupan en la web LottieFiles, donde los diseñadores pueden subirlas y ponerlas a disposición del público de manera gratuita o de pago. En ella puedes conseguir cientos de animaciones, donde es seguro que encontrarás alguna útil para tus necesidades.
En esta web puedes incluso contratar un diseñador para que desarrolle una animación a la medida, según tus requerimientos.
Entre las ventajas de LottieFiles, tenemos:
- Importar las animaciones como formato GIF animados.
- Personalizar el fondo, colores, duración de la animación, etc.
- Podemos darle el tamaño que deseemos a nuestra animación.
- Insertar controles para la animación: parar, avanzar, reproducir por cuadro.
- Crear animaciones en bucle (que nunca pare la animación) o que se ejecute una sola vez y se detenga.
Ubicando la animación Lottie en LottieFiles
Primero debes escoger la animación Lottie que desees insertar en Moodle.
Dirígete a esta página, haz clic en la de tu preferencia para que se despliegue la ventana emergente correspondiente. En ella se mostrarán las opciones para exportar la animación Lottie.
Haz clic al botón <HTML> en la sección Use this animation in, ubicado debajo de la animación, a la derecha. Debes loguearte en la página para poder acceder a las opciones HTML.
Esta acción nos abrirá una nueva página, donde podremos escoger como queremos se muestre la animación: puedes definir el tamaño, velocidad de la animación, si se autoreproduce, entre otros.
Recomiendo escoger el tamaño que quieres tenga la animación, deseleccionar la opción Controls (si no quieres que se muestre el control), y dejar lo demás como viene por defecto.
Finalizamos haciendo clic al botón Copy code, para que se traslade al portapapeles de nuestro sistema operativo el código que insertaremos en Moodle, o copiarlo directamente del espacio en negro debajo de GENERATED CODE.
El código Lottie debe parecerse a esto:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_tW99ax.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
Agregando la animación Lottie en los cursos de Moodle
Las animaciones Lottie se pueden agregar en cualquier lugar del Moodle donde tengas la posibilidad de agregar código HTML.
El lugar más sencillo para insertarlo, es donde esté disponible el editor de texto de Moodle, como en los recursos de los cursos de Moodle, o en los bloques.
Para este tutorial lo agregaremos en un curso de Moodle, como una Etiqueta.
Creando una etiqueta en Moodle
Para agregar la animación Lottie, insertaremos un recurso Etiqueta en el lugar donde desees se coloque.
Activa la edición en Moodle. En el tema Boost lo podrás hacer con el botón ubicado en la parte superior derecha.
En el tema donde quieres se agregue, haz clic al link: + Añade una actividad o un recurso. Luego en la pantalla emergente, haz clic en el recuadro que pone Etiqueta.
Esta acción nos llevará al editor de texto de Moodle. Haz clic al botón HTML. Si no lo ves disponible, posiblemente es que está oculto. Para mostrarlo, haz clic al botón Mostrar/ocultar botones avanzados, ubicado en la parte superior izquierda.
Borra el código que se muestra de manera predeterminada en el editor.
Ahora pega el código de la animación Lottie que obtuvimos anteriormente en LottieFiles.
Finalizamos haciendo clic al botón Guardar cambios y regresar al curso.
Deberías poder ver la animación Lottie en todo su esplendor. 🤩
Tip
Por defecto Moodle alinea los elementos de las etiquetas a la izquierda. Si quieres que la animación se muestre centrada, agrega este código: margin: 0 auto;
luego de style="
por lo que el código quedaría parecido a esto:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_tW99ax.json" background="transparent" speed="1" style="margin: 0 auto; width: 300px; height: 300px;" loop="" autoplay=""></lottie-player>
Hasta aquí este post, espero haya sido de tu agrado. No olvides dejar un comentario, sabes que me encantan. ☺
Hola, al parecer moodle borra esas etiquetas
probe con otro editor de texto y no sirve
active la opcion de contenido confiable sigue sin servir
Hola.
Que editor estas usando?
Si es Tinymce, borra el código por medidas de seguridad. Para esto uso Atto.
Saludos.
Hola, muchas gracias, aunque al final estas embebiedo la animación desde la página externa. ¿es posible poner el archivo .json en Moodle? Gracias!!
Hola Pedro.
Ciertamente se embebe los archivos desde el servidor de LottieFiles, es la practicas mas recomendable y no consume recursos de tu hosting.
Puedes descargar el archivo json desde el vinculo html que se muestra, pero el detalle esta en el reproductor, y no he probado intentar ejecutarlo desde mi servidor. En esta página tienes la información para instalarlo localmente.
Saludos.
Hola, para qué versión de la moodle es este tutorial
Hice la prueba en la versión 3.9 y no me fue posible.
Hola Marian.
Funciona con cualquier versión de Moodle.
En 3.9 debe funcionar sin problemas. Te recomiendo seguir al pie de la letra las instrucciones.
Saludos.
Buenas tardes, intente muchas veces…Pero no fue posible que se cargue a la etiqueta del aula…
Hola Pablo.
Este tutorial, como todos los que hago, los pruebo antes de publicarlos, por lo que, si sigues los pasos con detenimiento, lograras agregar las animaciones lottie.
Te animo a probar nuevamente o hacerlo en otro Moodle (en otro servidor o localhost), por si el hosting está bloqueando algunas funciones.
Saludos.