4 minutos de lectura
8 comentarios

Cómo agregar animaciones Lottie en Moodle

Foto del autor

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.

ubicar html lottie en lottiefiles

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.

opciones para exportar código lottiefiles

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.

activar edición en los cursos de moodle

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.

insertar etiqueta en los cursos de moodle

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.

mostrar botón agregar html en editor de texto de moodle

Ahora pega el código de la animación Lottie que obtuvimos anteriormente en LottieFiles.

código lottie en editor de texto en moodle

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. ☺

Califica este artículo

Puntuación promedio 4.5 / 5. Votos: 4

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Foto del autor
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

También te puede interesar

8 comentarios en «Cómo agregar animaciones Lottie en Moodle»

Deja un comentario
  1. 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!!

    Responder
    • 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.

      Responder
    • 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.

      Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.