Actividad 3: Maquetación con div. El modelo de caja.

Actividad 3: Maquetación con div. El modelo de caja.

  • CSS
  • Figma
  • HTML

Lee la información que encontrarás en el material El modelo de caja. Position.
A partir de esta lectura haremos lo siguiente:

  • 1. Resumir un concepto del material 16. Principios universales de diseño y publicarlo en el tablón de Classroom, con una imagen que describa lo mejor posible ese concepto.
  • 2. Crear una página web, con una estructura similar a la de The periodic table of WordPress Plugins, donde maquetaremos al menos 12 conceptos o ideas sobre la construcción de páginas web que podemos encontrar en el material 16. Principios universales de diseño.
  • Esta página formará parte de nuestra página de Domestika, dentro de la sección Plus, como un submenu, que se desplegará cuando pasemos por encima del elemento de menú padre

Evolución y versiones

  1. Wireframe en Figma

    Wireframe en Figma

    Diseño previo al código. Tres filas: la primera con distribución 2-6-2 (columna central grande flanqueada por dos pequeñas) y las dos siguientes con 5 columnas iguales. Punto de partida que define la estructura a implementar.

  2. Sistema completo de 12 columnas

    Sistema completo de 12 columnas

    Implementación exhaustiva del Flexbox: todas las combinaciones posibles de columnas del 1 al 12 con sus complementarios (1+11, 2+10, 3+9… hasta 6+6 y vuelta atrás). Funciona como demostración visual del sistema y referencia para su uso en proyectos posteriores.

  3. Primera implementación en HTML

    Primera implementación en HTML

    Traducción del wireframe a código. Sistema de 12 columnas con clases nombradas por número (dos, seis…). Primera fila respeta la distribución 2-6-2 del Figma. Las dos siguientes replican el patrón de 5 columnas iguales. Los elementos están centrados con la clase centrar.

  4. 12 principios del diseño — versión interactiva

    12 principios del diseño — versión interactiva

    El sistema de columnas aplicado a contenido real. La distribución 2-6-2 del Figma cobra sentido: las columnas laterales contienen tarjetas de principios de diseño que al hacer clic muestran una definición expandida. Dos Google Fonts (Roboto y Roboto Slab), JavaScript para mostrar y ocultar definiciones con classList.toggle, e imágenes por cada principio.