🚀 Taller de Diseño Responsive con Aspect Ratio (AR) EXPLORAX®
🎯 Misión: Domina el Diseño Responsive
Bienvenido, explorador. En esta misión, te adentrarás en el mundo del diseño responsive basado en Aspect Ratio (AR). Tu objetivo es recrear una pantalla de ajustes asegurando que todos los elementos se adapten dinámicamente a distintos dispositivos: teléfonos, tablets y computadoras.
📌 Este taller es ideal para desarrolladores frontend que quieran mejorar sus habilidades en interfaces responsivas y adaptables.
📖 ¿Qué Aprenderás?
✅ Imágenes Adaptables – Mantén las proporciones correctas sin importar la pantalla.
✅ Estructuras Responsivas – Diseña y posiciona botones estratégicamente.
✅ Interfaz Dinámica – Ajusta el contenido para una experiencia fluida y adaptable.
🔹 Siguiendo las directrices de la línea gráfica de Explorax®, lograrás un diseño optimizado y consistente.
📂 Contenido del Taller
El taller se basa en el documento TallerResponsive_Explorax.pdf, donde encontrarás:
📌 Conceptos Clave sobre Aspect Ratio (AR) y su aplicación en diseño responsive.
📌 Instrucciones detalladas para implementar la pantalla de ajustes con código base.
📌 Ejercicios prácticos para completar la UI de Explorax® con componentes reutilizables.
📌 Guía de estilos para mantener coherencia visual en la aplicación.
🔗 Consulta el documento para obtener todos los detalles.
🛠️ Cómo Empezar
1️⃣ Clona este repositorio
git clone https://github.com/tu_usuario/taller-responsive.git
cd taller-responsive
yarn install
yarn start
2️⃣ Instala dependencias
yarn install
3️⃣ Ejecuta el proyecto
yarn start
🔎 Conceptos Clave en el Código
📌 Aspect Ratio (AR) – Mantén la proporción de las imágenes:
const height = workSpaceDimensions.height * 0.8;
const width = height * AR;
const containerDimensions = { height, width };
📌 Estilos Responsivos – Ajuste dinámico del texto y contenedores:
const textContainerWidth = width * 0.65;
const fontSize = textContainerWidth * 0.12;