Skip to content
Base de Conocimiento Prisma

Guía con GIFs Animados

Guía: Procesos Animados con GIFs

Section titled “Guía: Procesos Animados con GIFs”

Los GIFs son perfectos para mostrar procesos interactivos paso a paso.

¿Por qué usar GIFs?

Section titled “¿Por qué usar GIFs?”

Los GIFs animados son ideales para:

  • Mostrar procesos interactivos de varios pasos
  • Demostrar flujos de trabajo completos
  • Capturar transiciones y animaciones de UI
  • Tutoriales rápidos sin necesidad de video completo

Ejemplo básico: Sintaxis

Section titled “Ejemplo básico: Sintaxis”
![Descripción del proceso](/gifs/nombre-archivo.gif)

Ubicación de archivos

Section titled “Ubicación de archivos”

Coloca tus GIFs en la carpeta public/gifs/:

public/gifs/
├── navegacion-menu.gif
├── crear-documento.gif
├── configurar-usuario.gif
└── flujo-trabajo-completo.gif

Control de tamaño

Section titled “Control de tamaño”

Método 1: Usar markdown (tamaño original)

Section titled “Método 1: Usar markdown (tamaño original)”
![Navegación por el menú](/gifs/navegacion-menu.gif)

Método 2: Usar HTML con ancho personalizado

Section titled “Método 2: Usar HTML con ancho personalizado”
<img src="/gifs/proceso-completo.gif" alt="Proceso completo" width="700" />

Método 3: Centrar el GIF

Section titled “Método 3: Centrar el GIF”
<div style="text-align: center;">
  <img src="/gifs/tutorial-rapido.gif" alt="Tutorial rápido" width="600" />
</div>

Cómo crear tus propios GIFs

Section titled “Cómo crear tus propios GIFs”

Mejores prácticas

Section titled “Mejores prácticas”

Duración

Section titled “Duración”
  • Ideal: 5-10 segundos
  • Máximo: 15 segundos
  • Para tutoriales más largos, divide en múltiples GIFs

Resolución

Section titled “Resolución”
  • Ancho recomendado: 800-1000px
  • Demasiado grande: archivo pesado
  • Demasiado pequeño: difícil de ver

Frame Rate (FPS)

Section titled “Frame Rate (FPS)”
  • Recomendado: 10-15 FPS
  • No uses más de 20 FPS (innecesario para tutoriales)
  • Menor FPS = archivo más liviano

Peso del archivo

Section titled “Peso del archivo”
  • Objetivo: Menos de 5MB
  • Máximo aceptable: 10MB
  • Usa herramientas de optimización si excede

Optimizar GIFs pesados

Section titled “Optimizar GIFs pesados”

Si tu GIF es muy pesado, prueba estas técnicas:

1. Reducir FPS

Section titled “1. Reducir FPS”
Terminal window
# Con FFmpeg
ffmpeg -i input.gif -r 10 output.gif

2. Reducir resolución

Section titled “2. Reducir resolución”
Terminal window
# Con FFmpeg
ffmpeg -i input.gif -vf scale=800:-1 output.gif

3. Usar herramientas online

Section titled “3. Usar herramientas online”

Ejemplo: Secuencia de GIFs

Section titled “Ejemplo: Secuencia de GIFs”

Cuando necesites mostrar un proceso largo, divídelo en varios GIFs:

Parte 1: Abrir el formulario

Section titled “Parte 1: Abrir el formulario”
![Paso 1: Abrir formulario](/gifs/tutorial-paso-1.gif)

Descripción de qué hace este paso.

Parte 2: Completar los datos

Section titled “Parte 2: Completar los datos”
![Paso 2: Completar datos](/gifs/tutorial-paso-2.gif)

Explicación del segundo paso.

Parte 3: Guardar los cambios

Section titled “Parte 3: Guardar los cambios”
![Paso 3: Guardar](/gifs/tutorial-paso-3.gif)

Conclusión del proceso.

Agregar contexto a tus GIFs

Section titled “Agregar contexto a tus GIFs”

Ejemplo con contexto completo

Section titled “Ejemplo con contexto completo”

Configurar notificaciones por email

Section titled “Configurar notificaciones por email”

Este GIF muestra cómo activar las notificaciones por correo electrónico en tu perfil de usuario.

![Configurar notificaciones](/gifs/activar-notificaciones.gif)

Pasos mostrados:

  1. Hacer clic en el ícono de perfil (esquina superior derecha)
  2. Seleccionar “Configuración”
  3. Navegar a la pestaña “Notificaciones”
  4. Activar el toggle “Notificaciones por email”
  5. Hacer clic en “Guardar cambios”

Alternativas al GIF

Section titled “Alternativas al GIF”

Si tu archivo GIF es muy pesado, considera:

Video MP4

Section titled “Video MP4”
  • Mejor compresión (archivos más pequeños)
  • Mayor calidad visual
  • Requiere controles de reproducción

Video WebM

Section titled “Video WebM”
  • Excelente compresión
  • Alta calidad
  • No soportado en todos los navegadores

Imágenes estáticas

Section titled “Imágenes estáticas”
  • Para procesos simples de 2-3 pasos
  • Usa capturas de pantalla numeradas

Convertir video a GIF

Section titled “Convertir video a GIF”

Si ya tienes un video, conviértelo a GIF:

Con FFmpeg (línea de comandos)

Section titled “Con FFmpeg (línea de comandos)”
Terminal window
# Convertir video a GIF optimizado
ffmpeg -i video.mp4 -vf "fps=10,scale=800:-1:flags=lanczos" -c:v pam -f image2pipe - | convert -delay 10 - -loop 0 -layers optimize output.gif

Con herramientas online

Section titled “Con herramientas online”
  1. Sube tu video a ezgif.com/video-to-gif
  2. Ajusta el tamaño y FPS
  3. Descarga el GIF optimizado

Checklist antes de publicar un GIF

Section titled “Checklist antes de publicar un GIF”
  • El GIF muestra claramente el proceso
  • Duración menor a 15 segundos
  • Tamaño de archivo menor a 5MB
  • Ancho entre 600-1000px
  • Nombre de archivo descriptivo
  • Texto alternativo agregado
  • Contexto explicativo antes/después
  • Probado que se carga rápido

Recursos adicionales

Section titled “Recursos adicionales”