Uso Eficiente de Animaciones y Videos en Páginas Web

Clase 19 de 22 • Curso de Diseño para Developers

Carlos José González Juan

student•

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.

David Alexander Benz Zambrano

student•

Como en todo el curso buen resumen!

José Gregorio Block

company_admin•

Excelente

David Lara

student•

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.

javier nicolas nieto

student•

Coincido, creo que esto es debido al CDN (Content Delivery Netwotk)

Felipe Bernardo González Barranco

student•

Gracias!

Luis Eduardo Blanco Vesga

student•

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

Sergio Brandon De Lucio Chavero

student•

Exacto!!

Carlos Nassif Trejo Garcia

student•

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

Usuario anónimo

user•

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

Beder Danilo Casa Condori

student•

como cuando entro a la escuela de desarrollo web y se demora en cargar

Diego Medina

student•

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

Oscar Jaramillo

student•

Interesante, gracias por el aporte!

jenny katherine arevalo rivera

student•

Dejo mis apuntes, espero les sirva :)

Andrés Palma

student•

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

Sergio Brandon De Lucio Chavero

student•

Y aprender a dominar cada elemento dinámico de tu página web.

Diana Flores

student•

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.

Sergio Corzo

student•

¿Cómo hace Google para poder tener buen rendimiento en You Tube si todos los dias suben videos ?😱

Bulmaro Arellano Navarrete

student•

Es una gran mezcla de buen hardware, buena programación, una gran inteligencia artificial, un sistema de bases de datos excepcinal y mucho trabajo humano detrás de ello pero aún con todo, llega a tener sus fallas...

Saludos

Alexander Moreno

student•

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

Diego Guzmán

student•

Ya no existe el curso :C me aparece una pagina 404

Silvana Rolón

student•

Juan Zavala Ortiz

student•

Dónde o con qué curso puedo profundizar lo de JS (Canvas, WebGL) para hacer mapas animados ?

Luis Lira

student•

Hola, creo que aquí en Platzi no hay un curso dodne se vea algo de WebGL, yo también últimamente ando buscando algo similar. Tal vez con la documentación de MDN de WebGL podrís comenzar https://developer.mozilla.org/es/docs/Web/API/WebGL_API una biblioteca muy famosa que usa WebGL me parece que es three.js, podrías buscar información sobre esto :D

Juan Zavala Ortiz

student•

Muchas gracias @Luis_LiraC, saludos !

Raúl Fernández Fuentes

student•

¿Haciendo uso de un repositorio de archivos puedo mejorar el performance de la aplicación web al momento de recuperar imágenes y videos?

Guido Arce

student•

A qué te refieres con un repositorio de archivos?

Sergio Brandon De Lucio Chavero

student•

Si :)

Juan Pablo Jimenez

student•

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.