NorfiPC
NorfiPC » Web » Animaciones

Crear gráficos animados en formatos GIF, MP4 y WebP, para la web



Como crear una gráfica comparativa de datos, para insertar en documentos o presentaciones y convertirla a video, para mostrarla en páginas web.
Crear gráficos animados en formatos GIF, MP4 y WebP, para la web
Muchos de los que necesitan en ocasiones crear sencillos gráficos, para representar cuadros de comparaciones o estadísticas no complejas o una idea, les será de utilidad el método que comparto.
Consiste en usar la herramienta Data GIF Maker de Google.
Es una utilidad que en pocos segundos nos permite crear una gráfica animada, usando distintas plantillas.
El archivo resultante en formato GIF, se puede descargar para usar en documentos o presentaciones y también convertirlo en un video para insertarlo en una página web.
Todo lo anterior lo explico a continuación.



Crear una gráfica GIF animada con Data GIF Maker


Para crear el gráfico solo necesitamos tener a mano los valores o datos.
Después de eso sigue los siguientes pasos:
1- Accede con el navegador a la página de Data GIF Maker.
2- Selecciona una de las tres plantillas Rectángulos, Círculos o Pista (Racetrack).
Panel de la herramienta Data GIF Maker para crear animaciones GIF
3- Especifica el nombre o título del gráfico, en este ejemplo: "Comparación de navegadores" (máximo 28 caracteres).
4- Selecciona el tipo de valor: por ciento (predeterminado) o numérico.
5- En cada término da un clic en el cuadro de color para cambiarlo (opcional), Introduce el nombre y el valor.
Agregar los valores para crear un grafico GIF animado
6- Al terminar sitúa el cursor del ratón encima de "SAFE GIF" para guardar el grafico creado, escoge una de las dos opciones "HQ" (alta calidad de la imagen, con un ancho de 1024 px) o "LQ" (estándar, ancho de 640 px).
Esto carga el panel de administración de los GIF creados, donde podemos administrar los existentes, si hemos creado alguno con anterioridad.
Descargar la animacion GIF creada
7- A continuación solo tenemos que esperar que termine el proceso de creación, para descargar el GIF creado a nuestro equipo.
La herramienta funciona offline usando Service Workers, es decir podemos preparar nuestro GIF sin conexión y posteriormente conectarnos para su procesamiento offline y descarga.
Todos los GIF que vamos creando, quedarán guardados, para consultarlos en cualquier momento.



Como usar el archivo GIF animado


Después de descargar el archivo de imagen GIF, este se puede insertar en documentos o presentaciones.
También se puede insertar en documentos online sin descargarlo, usando el enlace que proporciona la herramienta.
No obstante el tamaño de los archivos GIF creados es excesivo, lo ideal es convertirlo a un video MP4, con lo que se puede reducir su tamaño en alrededor del 90%, método casi obligado para usarlo en la web.



Convertir el archivo GIF en video para la web


Para insertar cualquier animación en páginas web, es necesario que se encuentre en formato MP4 o mejor aún en formato WebP, que es mucho más reducido, sin perder la calidad.
A continuación se puede ver una animación de ejemplo, insertada en esta página en formato MP4 y WebP.
Varias herramientas online permiten convertir un archivo GIF en un video en MP4.
También podemos hacerlo en la computadora usando aplicaciones, de ellas la mejor y que recomiendo es FFmpeg.
FFmpeg es una popular herramienta que permite convertir cualquier archivo de video o imagen.
Lamentablemente solo funciona mediante la línea de comandos, pero usarla es bastante sencillo.
En otro artículo de puede leer un completo tutorial, pero a continuación comparto como convertir un GIF a un video: Como convertir y codificar video con FFmpeg en Windows



Convertir un GIF en video formato MP4 0 WEBP con FFmpeg


El primer paso es descargar FFmpeg para Windows.
Descomprime el archivo descargado y sitúa el archivo "ffmpeg.exe" en una carpeta fácilmente accesible.

Convertir GIF a video MP4

Para convertir el archivo GIF a video MP4, abre una ventana de la consola en la misma carpeta donde se encuentra el ejecutable "ffmpeg.exe" en introduce lo siguiente:
ffmpeg -i video.gif video.mp4
Para abrir la Consola de CMD o Símbolo del sistema directamente en una carpeta, solo da un clic en la barra de direcciones del explorador (donde se muestra la ruta a dicha carpeta), escribe CMD y presiona Enter.
También puedes crear un archivo batch con el siguiente código.
En este caso solo es necesario arrastrar y soltar el archivo gif encima del batch.
@echo off
ffmpeg -i %1 video.mp4
PAUSE
En la misma carpeta encontrarás el video mp4.

Convertir GIF a video WebP

Para convertir el archivo GIF a video WebP, abre una ventana de la consola en la misma carpeta donde se encuentra el ejecutable "ffmpeg.exe" en introduce lo siguiente:
ffmpeg -i video.gif -c vp9 -b:v 0 -crf 41 video.webm
También puedes crear un archivo batch con el siguiente código:
En este caso solo es necesario arrastrar y soltar el archivo gif encima del batch.
@echo off
ffmpeg -i %1 -c vp9 -b:v 0 -crf 41 video.webm
PAUSE

En la misma carpeta encontrarás el video Webp.



Código para insertar el video MP4 y WebP en el HTML de páginas web


Usa el siguiente código para insertar el video animado en formato MP4 y WebP en el HTML de cualquier página.
<video autoplay muted playsinline>
  <source src="comparacion-navegadores.webm" type="video/webm">
  <source src="comparacion-navegadores.mp4" type="video/mp4">
  <p>Este navegador no soporta HTML5 video. Usa este
     <a href="comparacion-navegadores.mp4">enlace al video</a></p>
</video>
Los atributos usados en la etiqueta VIDEO, tienen las siguientes funciones:
autoplay – Reproducción automática del video.
muted – Reproducción sin sonidos. Obligado para que funcione la animación.
playsinline- Se inicia la animación, solo al llegar al lugar de la página donde esta insertado.
Usando los dos archivos en la etiqueta PICTURES, aseguramos la compatibilidad con todos los navegadores.

Más información avanzada

- Replace Animated GIFs with Video (Google Web Fundamentals)
- The Video Embed element (MDN)

Páginas relacionadas



Sígueme en las redes sociales


Página de este sitio que te sugiero hoy
 
Inicio | Mapa del sitio | Buscar | Sobre mí