Gráficos en movimiento para web

GRAFICOS EN MOVIMIENTO PARA WEB
Formatos de gráficos en movimiento:
• CSS animado: Indicado para animaciones sencillas y transiciones.
• SVG animado: Indicado para animaciones de elementos vectoriales.
• JS (Canvas, WebGL): Indicado para animaciones complejas como animaciones de datos o 3D. Hay librerías en JS que sirven para este tipo de animaciones.
• Videos: Indicado para filmaciones o animaciones de alta complejidad y corta duración. Siempre preguntarnos: ¿realmente necesito este video? Pues son pesados y ralentizan la carga del sitio.
¿Cómo elegir gráficos en movimiento?
• Elegir animaciones que aporten al contenido. No sobrecargar con muchas animaciones.
• Procurar que no se reproduzcan automáticamente y si lo hacen, que no tengan sonido.
• Evita que tus animaciones tengan flashes. Los brillos continuos molestan y pueden ser dañinas.
• Si tus animaciones aportan contenido, añade subtítulos o transcripciones para que las pueda leer el lector de pantalla.
• Evita que las animaciones bloqueen la lectura básica del contenido. Es molesto una animación a la hora de leer, además de que el lector de pantallas no podrá acceder a ese contenido.
• Recuerda que las animaciones y los videos ralentizan la carga de la página. Se aplica nuevamente el menos es más.

Personalmente para insertar video en sitios web, en términos generales, prefiero insertar usando youtube, al insertar en nuestros propios servidores, los tiempos de carga son mucho mayores que si estuvieran en youtube.

Sería interesante que todas estas recomendaciones que se dan en esta clase fueran agregadas a la web de Platzi, sobre todo para las personas con difícil accesibilidad y que tambien quieren estudiar! Muy interesante

Gráficos en movimiento

• CSS animado: Sencillas y transiciones
• SVG animado: Elementos con vectores
• JS y Canvas: Animaciones complejas
• Videos: Alta complejidad y corta duración

Como elegir:

• Animaciones que aporten
• No se reproduzcan automáticamente
  – ○ De hacerse, sin sonido
• Sin flash
• Usar subtítulos y transcripciones
• Animaciones no bloqueen el contenido
• Recordar que estas afectan el rendimiento de la pagina

✨ Una pagina que tarda en cargar, constantemente pierde usuarios. La importancia de no sobrecargar contenido.

A modo de aporte, también hay gráficos animados, simples y livianos que son las animaciones lottie, hay un repositorio interesante https://lottiefiles.com/ donde se pueden encontrar muchos recursos para darle un diseño diferente a las webs
p.d: no abusen de este recurso… que queda extremadamente cargado

Dejo mis apuntes, espero les sirva 😃

En resumen: Se pragmático con cualquier gráfico en movimiento.

Existe un formato muy ligere para animaciones llamado Lottie.

Lottie es un formato de archivo de animación basado en JSON que permite a los diseñadores enviar animaciones en cualquier plataforma tan fácilmente como enviar assets estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y se pueden escalar hacia arriba o hacia abajo sin que se pixeleen.

Fue creado por Airbnb y se encuentra disponible para iOS, Android, React Native y Web.

Curso de animaciones para la web:
https://platzi.com/clases/animaciones-web/

Actualmente los navegadores solo permiten que se reproduzcan automáticamente los videos con sonido deshabilitado o sin sonido

Muy buena clase. Cosas básica que debemos tener en cuenta a la hora de diseñar nuestro sitio web.

Personalmente si entro a una web con hamburguesas bailando, si las compro jajajaja

19.-Gráficos en movimiento para web

Existen distintos formatos para animar la página

• CSS animado: Indicado para animaciones sencillas y transiciones. No es un formato de video como tal, es una animación creada con propiedades de CSS como transition, translate, etc.
• SVG animado: Indicado para animaciones de elementos vectoriales. Tampoco es un formato de video, es una animación creada por CSS o por propiedades de SVG. Se le pueden añadir etiquetas que nos permiten animarlo usando JS con canvas.
• JS(Canvas, WebCL): Indicado para animaciones complejas como animaciones de datos o 3D. Barras que se animan, estadísticas, para datos dinámicos.
• Videos: Indicado para filmaciones y animaciones de alta complejidad y corta duración.

¿Cómo elegir gráficos en movimiento?

• Elige animaciones que aporten al contenido.
• Procura que no se reproduzcan automáticamente y si lo hacen, que no tengan sonido.
• Evita que tus animaciones tengan flashes.
• Si tus animaciones aportan al contenido, añade subtítulos o transcripciones por temas de accesibilidad.
• Evita que las animaciones bloqueen la lectura básica del contenido.
• Recuerda que las animaciones y videos afectan el rendimiento de tu página.

https://developer.mozilla.org/es/docs/Web/API/WebGL_API

ejemplos de webGl

Muy buena explicación de los videos.

🎵 Hace poco estaba buscando una forma de animar una web que reaccione al sonido que se está reproduciendo. Creí que no había nada así hasta que encontré esto que me voló la cabeza.
https://codepen.io/mnmxmx/pen/mmZbPK
Es una Animación con CSS/JS y WOW. Está genial.

• Una página muy animada es una página que saca rápido al usuario.
• Procurar que no se reproduzca automáticamente y que no tengan sonido.
• Que las animaciones no tengan flashes.
• Si la animación aporta al contenido, es necesario añadir transcripciones.
• Evitar que la animaciones bloqueen la lectura básica del contenido.
• Recordar que las animaciones y vídeos afectan el rendimiento de la página.

Si usarás vídeo, nunca debe reproducir el audio automaticamente.

No hay nada mas molesto que un video que tiene sonido por defecto al ingresar a un sitio web y no s epuede quitar

evitar sonidos invasivos en nuestra web.

Se debe usar la menor cantidad de vídeos para tener un mejor rendimiento de la pagina.

Excelentes tips de accesibilidad, la verdad no había considerado esos puntos hasta ahora.

Hola comunidad, queria aporta que GSAP en una herramienta muy útil para realizar animaciones con ayuda de JavaScript y de manera sencilla

Hover
CSShake
Anijs
CSS Wand
Animate Components
Keyframes
AniCollection
SpinKit Loader
Animejs
Animte CSS

¡¡Excelente explicación!!

Gráficos en movimiento para web

Formatos

Tenemos diferentes formatos que podemos utilizar para el uso de animaciones. A continuación, veremos los más usados y algunas características de estos.

• CSS animado: Indicado para animaciones sencillas y transiciones
• SVG animado: Utilizado para animaciones de elementos vectoriales
• JS (Canvas, WebGL): Son animaciones más complejas, como animaciones de datos o 3D, se puede ver mucho en la animación de mapas o datos dinámicos.
• Videos: Son las animaciones, películas, cortos de alta complejidad y corta duración. Es importante recordar que cuando utilicemos videos tenemos que tener mucho en cuenta el peso de este.

Elegir gráficos en movimientos

A continuación, veremos características a tener en cuenta cuando empleamos gráficos en movimiento.

• Las animaciones deben de aportar al contenido
• Evitar la reproducción automática y si lo llegarán a hacer que no tengan sonido
• ⚠ Evita que las animaciones tengan flashes, ya que pueden provocar ataques epilépticos.
• Si tus animaciones aportan al contenido, estos tienen que tener subtítulos y transcripciones.
• Las animaciones no deben de bloquear el contenido
• Tener muy en cuenta el peso de las animaciones para que estas no afecten el rendimiento de la misma.

El repositorio esta desactualizado no sirve… o se coloco mall en GitHub seria bueno que lo revisaran, trate de hacer UpDate, pero no sirvió, le falta algo

Básicamente tener cuidado con las animaciones :p

Las animaciones y videos impactan el rendimiento de tu interfaz o sitio web, por lo tanto, elige sabiamente y optimiza al máximo su peso. Además, asegúrate que no tengan efectos molestos para el usuario como excesivas transiciones y flashes, y que tengan subtítulos o transcripciones cuando sean de relevancia para la comprensión de contenidos, de esta manera, garantizas que ningún usuario se pierda de entender tus mensajes o contenido animado (accesibilidad web).

GRAFICOS EN MOVIMIENTO PARA LA WEB
.
para poder utilizar gráficos y animaciones en una aplicación WEB.
.
Formato de gráficos en movimientos
.
CSS animado
Indicado para animaciones sencillas y transiciones. No es un formato de video es una animación creada por propiedades de CSS (transition, translate, colores, posiciones) y animando elementos de HTML.
.
Es muy útil para
.

• Animaciones cortas.

• Animaciones decorativas.

• Animaciones de iconos.
  .
  Realizar animaciones de alta complejidad en CSS demanda mucho tiempo por lo que se recomienda solo realizar animaciones sencillas.
  .
  SVG animado
  Es un formato vectorial indicado para ilustraciones. No es un formato de video. Se puede animar con propiedades de CSS o propiedades de SVG para realizar animaciones.
  .
  Realizar animaciones de alta complejidad en SVG demanda mucho tiempo por lo que se recomienda solo realizar animaciones sencillas.
  .
  SVG animado permite añadir
  .

• Etiquetas

• Opciones

• Que se pueden animar usando JavaScript con canvas.
  .
  JS (canvas, WebGL)
  .
  Indicado para animaciones complejas como
  .

• Animaciones de datos.

• Animaciones de 3D.

• Animaciones de diagramas.
  .
  Existen librerías muy útiles de WEbGL en JavaScript para realizar animaciones de datos dinámicos.
  .
  Video
  Indicado para filmaciones y animaciones de alta complejidad y corta duración.
  .
  Es recomendable usar videos en aplicaciones WEB donde no están dedicadas a subir videos. Estos videos deben ser cortos y concisos para que no aumente mucho el tiempo de carga de la aplicación.
  .
  Los videos se recomiendan usar en cosas complejas y sencillas. Donde no se pueda reemplazar con una imagen. Pensando en el performance de la aplicación y no tanto en la decoración.
  .
  ELEGIR GRAFICOS EN MOVIMIENTO
  .
  Al igual que elegir imágenes se debe tener ciertos criterios
  .

• Elegir imágenes que aporten contenido.

• garantizar que no se reproduzcan automáticamente y si lo hacen que no tengan sonido.

• Evitar que las animaciones tengan flashes.

• Si las animaciones aportan al contenidos, añadir subtítulos y transcripciones.

• Evitar que las animaciones bloqueen la lectura básica del contenido.

• Recordar que las animaciones afecten el rendimiento de la aplicación.

CSS animado: Para animaciones sencillas y transiciones. (css)
SVG animado: Para animaciones de elementos vectoriales. (js con canvas)
JS (Canvas, WebGL): Para animaciones complejas de datos o 3D.
Videos: Indicado para filmaciones de alta complejidad y corta duración.

Que aporten al contenido.
Procura que no se reproduzca automaticamente o sin sonido.
Evitar que tengan flashes (epilepsia).
Si aportan al contenido añade subtítulos o transcripciones.
Evita que las animaciones bloqueen el contenido.
Recuerda que esto afecta el rendimiento de tu página.

Gráficos en movimiento para web pueden ayudarte realmente a contar una historia. Esto forma parte de lo que los gráficos en movimiento pueden aportar a elementos como por ejemplo los fondos de vídeo de un sitio web dinámico. Puedes usarlos para transmitir un sentimiento narrativo concreto a tu historia sin decir una sola palabra.

AVI (. avi) AVI (Audio Video Interleave) es un formato desarrollado por Microsoft y uno de los primeros compresores de vídeo que se ha creado. …
WMV/WMA (. wmv o . asf) …
MOV (. mov) …
FLV (. flv) …
RM (. rm) …
RMVB (. rmvb) …
MP4 (. mp4) …
MKV (. mkv

Importante lo que dice la profe acerca del uso de vídeos en la página. Éstos se deben usar si son estrictamente necesarios porque es muy tedioso que una página demore cargando por el vídeo, siempre hay que pensar en el usuario.

19. Gráficos en movimiento para web

Existen distintos formatos para movimiento en web:

CSS Animado: Indicado para animaciones sencillas y transiciones.

SVG animado: Indicado para animaciones de elementos vectoriales.

Formatos de gráficos en movimientos:

JS (Canvas, WebGL): Indicado para animaciones complejas como animaciones de datos o 3D.

Videos: Indicado para filmaciones y animaciones de alta complejidad y corta duración.

Lo importante es agregar imágenes o videos, es de acuerdo a criterio.

• Elige animaciones que aporten al contenido.
• Procura que no se reproduzcan automáticamente y si lo hacen, que no tengan sonido.
• Evita que tus animaciones tengan flashes.
• Si tus animaciones aportan al contenido, añade subtítulos o transcripciones.
• Evita que las animaciones bloqueen la lectura básica del contenido.
• Recuerda que las animaciones y videos afectan el rendimiento de tu página.

Performace > Belleza sin contenido

Muy buenas recomendaciones que uno se da cuenta que generan gran rechazo en las paginas que no las siguen

Busca siempre la utilidad en las animaciones. Cada animación debe aportar algo a la web, no solo estar porque sí

Como mencioné unas clases atras.
Pueden usar archivos JSON animados.
Page Demo

Ojala que pronto hagan un curso más especializado en esto o en Webflow donde es fácil hacer animación a los elementos del desarrollo de una web,

Excelente!

Me parece mejor usar gifs. Los vídeos son algo pesados y si no se sabe animar con CSS pues usar gifs mientras se aprende o si es algo sencillo.

Pregunta: Es posible pasar directamente las animaciones que realizas en programas como “AdobeXd”, “After Effects”, a código?

Imágenes, animaciones y videos deben estar en concordancia con el contenido y lo que se desea transmitir además de estar pensadas considerando siempre la accesibilidad.

Si quieren saber más de animaciones, hay un curso en Platzi

En Platzi puedo aprender sobre animacion con SVG y WebGL?

Gracias platzi!!!

Tips para los gráficos en movimiento
-Elegir animaciones que aporten al contenido
-Procurar que no se reproduzcan automáticamente
-Que no tengan sonido
-Evita que las animaciones bloqueen la lectura básica del contenido.

• Menos es más (recuerda que las animaciones y los vídeos ralentizan la carga de la página)

CSS animado - SVG animado

JS (Canvas, WebGL) - Videos

Cómo elegir gráficos en movimiento

Gracias por el vídeo!

Creo que seria mas interesante que muestre ejemplos de estas animaciones. Con solo explicarlas creo que se hace difícil de visualizar o entender.

Graciasss