2. 📖 Animación Web

Introducción

Las animaciones web son movimientos o efectos visuales que se añaden a una página para hacerla más interesante. Pueden ser tan simples como un texto que aparece poco a poco o complejas como un vídeo interactivo.

Además, hoy en día no solo disponemos de animaciones, sino también de contenido externo que puede enriquecer nuestra página, como:

Vídeos de YouTube que explican un tema.
Mapas interactivos para localizar lugares.
Juegos o animaciones de Scratch creados por ti o tus compañeros.
Elementos de Google Workspace, como un formulario, un documento o una presentación.

Esto hace que las páginas web sean más útiles y divertidas de usar.

Vídeo de YouTube insertado directamente

Tipos de Animaciones Web

Animaciones básicas:nSon simples efectos que llaman la atención, como un botón que cambia de color cuando pasas el ratón encima o texto que aparece poco a poco.
Contenido multimedia:
- Vídeos de plataformas como YouTube o Vimeo.
- Mapas de Google Maps que puedes mover y con los que puedes interactuar.
- Juegos y animaciones de herramientas como Scratch.
Animaciones complejas:nEfectos avanzados que mezclan varios elementos, como un vídeo que aparece mientras el usuario baja por la página o un gráfico interactivo que responde a los clics del usuario.

Formatos de Animación

GIF de Homer Simpson

GIF: Imágenes animadas que se repiten en bucle. Son perfectas para efectos sencillos o memes, por ejemplo, un pequeño GIF que muestra cómo hacer clic en un botón.
Vídeos insertados: Inserta vídeos de plataformas como YouTube directamente en tu página web. Estos son útiles para explicar temas o mostrar algo en acción.
Elementos interactivos: Juegos de Scratch, presentaciones o formularios de Google que puedes integrar para que los usuarios interactúen directamente en tu web.

Herramientas de Animación

Scratch: Puedes crear tus propias animaciones o juegos y luego integrarlos en tu página mediante un enlace o código embebido.

YouTube: Copia el código de un vídeo para insertarlo en tu web y que los usuarios puedan verlo sin salir de tu página.
Google Maps: Inserta mapas para mostrar ubicaciones específicas. Es útil para proyectos de localización.
Google Workspace: Añade formularios, documentos o presentaciones para que los usuarios puedan interactuar directamente en la web.
CodePen: Prueba y experimenta con animaciones usando HTML, CSS y JavaScript.
Canva: Crea gráficos o pequeñas animaciones que luego puedes descargar e insertar como vídeos o GIFs.

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0