Widget de producto + Responsive

Resumen general

Este proyecto construye una tarjeta de producto que muestra información detallada, precios, disponibilidad en stock y acciones de compra o wishlist.

A diferencia de proyectos anteriores, este incluye principios básicos de diseño responsive mediante Media Queries y ajustes visuales adaptativos.

Tecnologías utilizadas:

• HTML5 semántico
• CSS3 moderno (Flexbox avanzado, Box Model, Media Queries, fuentes externas)

Conceptos aplicados

Modelo de Caja (Box Model)

Se utiliza box-sizing: border-box globalmente para controlar de forma predecible márgenes, bordes y padding en todos los elementos.

Flexbox avanzado

La estructura principal utiliza Flexbox para organizar dos bloques: uno para la imagen del producto y otro para la información del mismo (product__media y product-info).

Se usa column-gap para separar estos dos bloques en pantallas grandes.

Diseño Responsive (Media Queries)

Se introducen Media Queries que reorganizan la disposición de los elementos:

• En pantallas de menos de 768px, la disposición cambia de horizontal a vertical.
• Se ajusta el padding para mantener una buena lectura y espaciado en dispositivos móviles.
• Se ocultan iconos decorativos en botones para simplificar la interfaz en móviles.

Semántica y accesibilidad

Se usan etiquetas semánticas como article, nav, h1, h2, h3, y p, lo cual favorece la accesibilidad.

Las imágenes incluyen alt descriptivos, aunque podrían mejorarse para transmitir más claramente el propósito de los íconos.

Jerarquía visual clara

Se utilizan diferentes tamaños de fuentes (h1, h2, h3) y contrastes de color bien gestionados para marcar la importancia relativa de la información.

Puntos de atención

Responsividad real

La tarjeta no solo se adapta en anchura, sino que reestructura su layout para dispositivos móviles, mejorando la usabilidad.

Accesibilidad

Aunque los iconos en los botones incluyen alt, sería ideal que el texto alternativo describiera la acción completa ("Añadir al carrito", "Añadir a favoritos") en vez de simplemente el objeto.

Consistencia en la nomenclatura

Se sigue un patrón BEM razonablemente claro (product-info__stock-available, product-info__action), aunque conviene mantener la atención en proyectos más grandes.

Optimización visual

Se usan sombras (box-shadow) suaves y bordes redondeados (border-radius) para un acabado moderno y profesional.

Mejoras sugeridas

Responsividad adicional

Añadir puntos de ruptura adicionales para dispositivos muy pequeños (<480px) y adaptar tamaños de fuente y padding.

Interactividad

Agregar efectos de :hover a botones y enlaces para mejorar la experiencia de usuario.

Optimización de imágenes

Utilizar imágenes responsivas (srcset) o servir formatos modernos (WebP) para mejorar el rendimiento.

Separación de componentes

A largo plazo, sería recomendable separar los distintos bloques (product__media, product-info, product-info__actions) en componentes reutilizables si se expande el proyecto.