Introducción
¿Qué vas a aprender?
Conceptos Generales
Introducción al desarrollo de software
Servidor y cliente
Front-End y Back-End: definición y características
¿Qué es una API?
¿Qué es Git?
Aproximación a los lenguajes de la web
Aproximación a HTML desde el diseño
Aproximación a CSS desde el diseño
Aproximación a JavaScript desde el diseño Parte I
Aproximación a JavaScript desde el diseño Parte II
Aproximación a las herramientas de desarrollo
Bases del diseño en el desarrollo
Características de las imágenes en el contexto de desarrollo web
Implementación de las imágenes en el contexto de desarrollo web
Características e Implementación de textos
Características e implementación de colores
El diseño desde una mirada de desarrollo
Diseño de botones
Implementación de botones
Diseño e implementación de inputs
Diseño de tablas
Funciones de tablas
Diseño e implementación de checkbox
Despedida
Live Class
Live Class
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 0
Esta clase estuvo increíble. Es algo tan relativamente simple que muchos siempre pasamos por alto y nunca entendemos el porque no se ven bien nuestras imágenes. Me atrevo a decir que algunos frontend devs tampoco saben de esto.
A esta clase le agregaría unos minutos de más para explicar brevemente el comportamiento de una imagen dentro de un contenedor al usar en css object-fit.
Que clase tan interesante 🤯
Había visto esa opción en Figma para exportar imágenes de 2x o 4x por mencionar algo pero hasta ahora comprendo el contexto que hay detrás de realizar esa exportación. A decir verdad, nunca he exportado varias imágenes con diferentes tipos de exportación y al crear la página uso la misma y hago que se adapte al tamaño que tiene. Será muy interesante entender como optimizar este proceso.
tambien es importante recalcar que cada equipo de desarrollo tiene requerimientos especificos frente a los formatos, es una buena practica invitarlos a una sesion y desde el perfil de viewer de Figma mostrarles como pueden del diseño tomar dichos recursos
Bitmap
| Abreviación | Descripción | Formato |
|---|---|---|
| WebP | WebP ofrece una compresión mucho mejor que PNG o JPEG. | .webp |
| PNG | Se prefiere PNG a JPEG para una reproducción más precisa y el uso de transparencia. | .png |
| JPEG | El formato más popular para imágenes. Es una buena opción para la compresión con pérdidas de imágenes. | .jpeg |
| .jpg |
Vector
| Abreviación | Descripción | Formato |
|---|---|---|
| SVG | Formato para imágenes vectoriales. Ideal para elementos de la interfaz de usuario e íconos. | .webp |
¿Por qué es relevante?
Muy buena manera de explicar la lógica detrás de los navegadores al elegir cuál tamaño de imagen mostrarán dependiendo el tamaño de pantalla de cada dispositivo, su densidad de pixeles y si tiene retina o no.
Gran clase, muchas cosas que tomar en cuenta cuando utilizamos imágenes e iconos en nuestros proyectos.
Exportación de imágenes
Exportación de imágenes
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?