No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Implementación de las imágenes en el contexto de desarrollo web

13/23
Recursos

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Al fin alguien explica esto, nunca entendi para que eran las 2x 3x 4x de figma

Con esta clase ya me ha quedado claro como podemos optimizar por parte de desarrollo este gran problema del Layout Shift ya que si afecta demasiado a la experiencia del usuario.
Investigare más al respecto sobre el atributo srcset. Ahora que recuerdo lo había estudiado pero nunca lo use al parecer. ¡Muchas gracias!

No hay ninguna URL en la sección de recursos para hacer el ejercicio

Siempre he visto 1x… en los programas de diseño mas o menos e tenía idea, pero hoy me quedo claro al ver el código,

Es importante exportar imágenes en 1x, 2x y 4x para que el navegador tenga más de una opción de dónde escoger a la hora de mostrar la más adecuada de acuerdo a las características de cada dispositivo. Todo ello implica tomar mejores decisiones desde la parte del diseño y no sólo pensar en Figma sino también en la parte del desarrollo de software para mejorar la experiencia del usuario en todo momento.

Me encanta la forma de explicar es muy clara, los conceptos los conocia ya que trabaje el diseño gráfico por 23 años en la parte de la publicidad (el diseño gráfico lo aprendi de forma empirica).
Lo felicito no todos tienen ese don de saber enseñar.

Hasta hoy aprendí a qué se refiere las X en las imágenes.

Que interesante esta clase!

Implementación de las imágenes en el contexto de desarrollo web


Objetivos

  • Comprender el CLS (cambio acumulativo el diseño).
  • Comprender las variables que afectan la experiencia del usuario.
  • Conocer las soluciones más comunes a los problemas relacionados con las imágenes.

Variables que afectan la experiencia en relación con las imágenes

  • Velocidad de internet
  • Tamaño de la imagen
    • Densidad
    • Resolución de pantalla
  • Tiempo de espera para obtener la imagen.
  • Cambios repentinos.

CLS

Cumulative Layout Shift — Cambio Acumulativo Diseño


También podemos dejar una dimensión predefinida para que puedan ser ocupadas una vez que los elementos carguen.

Estas soluciones…

  • Indicamos al usuario que viene algo en camino, hay un proceso de carga.
  • Le damos una idea de lo que será el resultado.
  • Evitamos los layout shifts o cambios inesperados.

Puntos claves a recordar

  • Mejores decisiones de diseño
  • Más allá que Figma
  • Exportar de manera correcta