Desarrollo de Sistemas Web Frontend: Unidades, Diseño Responsivo y Estructuración CSS

Este documento constituye una síntesis exhaustiva de los conceptos avanzados de CSS abordados en el ámbito académico, diseñados para la creación de interfaces web modernas, funcionales y adaptables. Se enfoca primordialmente en la transición de medidas fijas a un diseño fluido mediante el uso de unidades relativas, pseudo-clases y la propiedad de despliegue.

1. Introducción General

El desarrollo frontend contemporáneo exige que las aplicaciones no solo sean visualmente atractivas, sino también funcionales en una multiplicidad de dispositivos (smartphones, tablets, monitores 4K e incluso dispositivos con pantallas plegables). Este material de estudio profundiza en las herramientas técnicas de CSS que permiten alcanzar esta adaptabilidad, centrando el aprendizaje en el uso de Flexbox, Unidades Relativas y Media Queries.

2. Contexto del Tema

En el marco de la formación profesional, el dominio de estas herramientas tiene como fin último la construcción de un portfolio personal. Este proyecto no es solo una tarea académica, sino la carta de presentación del desarrollador ante el mundo laboral y los reclutadores. El diseño responsivo (responsive design) ya no es una opción, sino un estándar básico de competencia técnica.

3. Marco Conceptual

Para comprender el diseño web avanzado, es imperativo distinguir entre los tipos de medidas y cómo afectan el comportamiento de los elementos en pantalla.

Definición de Conceptos Clave

• Unidades Absolutas (Píxeles - px): Son puntos fijos en la pantalla. No cambian independientemente del tamaño del dispositivo. Son útiles para elementos que requieren precisión inamovible (como un logo o una imagen específica), pero rígidas para el diseño general.
• Unidades Relativas: Su tamaño se ajusta en función de otros factores, como el tamaño de la fuente raíz o el tamaño de la ventana del navegador.
  • REM (Root EM): Referencia el tamaño de la fuente del elemento raíz (html). Por defecto, 1 rem = 16 píxeles. Permite el escalado proporcional.
  • Porcentaje (%): Define el tamaño en relación con el contenedor padre.
  • Viewport Units (VW / VH): Basadas en el tamaño de la ventana del navegador (100vw es el 100% del ancho, 100vh es el 100% del alto).
• Media Queries: Instrucciones de CSS que permiten aplicar reglas específicas solo si se cumplen ciertas condiciones (por ejemplo, cuando el ancho de pantalla es menor a 1080px).

4. Desarrollo del Tema

A. Gestión de Unidades en Fuentes y Contenedores

La recomendación técnica es abandonar el uso extensivo de píxeles para el diseño estructural.

Tipo de Elemento	Unidad Recomendada	Razón Técnica
Fuentes (Textos)	rem	Permite que todo el texto de la página escale proporcionalmente si el usuario o el diseño cambian la base.
Contenedores	% o vw	Asegura que las cajas de contenido se ensanchen o encojan según el dispositivo.
Imágenes/Logos	px	Se usan como excepción para evitar que recursos visuales se distorsionen o compriman excesivamente.

B. El Modelo de Caja (Box Model) y el Desbordamiento

Un error frecuente al usar 100vh (100% del alto de la pantalla) es el desbordamiento (overflow), que genera barras de desplazamiento no deseadas. Esto suele ocurrir por:

1. Márgenes por defecto: El cuerpo (body) tiene márgenes que suman tamaño al 100vh.
2. Bordes: Si un contenedor tiene un borde de 2px y un alto de 100%, el tamaño total será 100% + 4px (superior e inferior).

• Solución: Aplicar margin: 0 al body y utilizar box-sizing: border-box para que el borde se incluya dentro del tamaño definido del elemento.

C. Pseudo-clases: Interactividad y Estados

Las pseudo-clases permiten estilar elementos según su estado.

• **:hover**: El estado más utilizado. Se activa cuando el puntero del ratón pasa sobre un elemento. Es clave para menús interactivos y botones.
• **:active**: Se activa en el momento exacto del clic.
• **:visited**: Específico para enlaces que el usuario ya ha consultado.
• **:nth-child(even/odd)**: Utilizado para estilar filas de tablas o listas de forma alternada (por ejemplo, dar un color gris a las filas pares para mejorar la legibilidad).

D. La Propiedad Display: Invisibilidad y Flujo

La propiedad display controla cómo se posicionan los elementos y su visibilidad:

• **display: none**: Elimina el elemento del flujo del documento. No ocupa espacio.
• **display: block**: Se usa para "desocultar" elementos previamente escondidos, haciéndolos aparecer como bloques (que ocupan todo el ancho disponible).
• **display: flex**: La herramienta predilecta para maquetar, permitiendo alinear elementos en filas o columnas de forma dinámica.

5. Ejemplos Prácticos

El Menú "Hamburguesa" y Apple

Un caso de uso real es la web de Apple. En pantallas grandes, el menú es visible; en pantallas pequeñas, ciertos elementos se ocultan con display: none y se activan mediante una pseudo-clase (como al pasar el ratón) o un menú desplegable, cambiando a display: block.

Tablas de Datos

Para evitar que una tabla larga sea ilegible, se aplica:

tr:nth-child(even) { background-color: #f2f2f2; }
tr:hover { background-color: #ddd; cursor: pointer; }

Esto permite que el usuario identifique rápidamente la fila que está consultando (por ejemplo, buscar un dato específico como "Moctezuma" en una lista de clientes).

6. Errores Comunes y Confusiones

• Confundir **%** con **vw**: El porcentaje depende del contenedor padre. Si el padre mide 400px, el 50% son 200px. El vw depende de la ventana total; 50vw siempre será la mitad de la pantalla, ignorando al contenedor padre.
• Uso de saltos de línea (**<br>**): Es una mala práctica para generar espacios. Se debe utilizar margin o padding para un control profesional del Box Model.
• Nombres de archivos incorrectos: Nombrar archivos como "huevo.css" o "coso.html" genera errores en el despliegue (deploy). El archivo principal siempre debe ser index.html.
• Overengineering: No es necesario crear soluciones complejas con código kilométrico si una propiedad simple de Flexbox lo resuelve. La eficiencia es clave.

7. Fechas Importantes y Avisos Académicos

El profesor ha establecido un cronograma claro para la evaluación final de la materia.

Fecha	Evento / Entrega	Descripción Detallada
17 de Noviembre	Entrega Portfolio 2	Fecha límite (20:59 hs). Es la práctica formativa obligatoria mejorada.
18 de Noviembre	Presentación Individual	Exposición de los portfolios personales en clase.
25 de Noviembre	Presentación Grupal	Entrega y defensa de los trabajos prácticos obligatorios (TPO) grupales.
27 de Noviembre	Cierre de Ciclo	Finalización estimada de la cursada.

Recordatorios Críticos:

• Portfolios: No se aceptarán plantillas prefabricadas ni códigos generados íntegramente por IA o copiados de otros años. Se valorará el "trabajo a manopla" y la progresión entre la versión 1 y la 2.
• Grupos: Los TPO son grupales (mínimo 3, máximo 5 personas). Se habilitará un Excel para la organización.
• Eximición: Aquellos alumnos que realicen las "articulaciones" quedan eximidos de presentar los TPO 1 y 2.
• Deploy: Los trabajos deben entregarse mediante un enlace a la aplicación desplegada (ej. GitHub Pages), no solo el código fuente.

8. Síntesis y Conclusiones

• Prioridad Flexbox: Es la base de la maquetación moderna.
• Unidades Relativas: El uso de rem y % garantiza la adaptabilidad.
• Interactividad: Las pseudo-clases como :hover mejoran la experiencia del usuario (UX).
• Estructura: Mantener archivos organizados (assets/, img/, styles/) es fundamental para un desarrollo profesional.

9. Preguntas de Repaso

Nivel Básico

1. ¿Cuál es la diferencia principal entre un píxel (px) y un REM?
2. ¿Qué propiedad CSS utilizarías para que un elemento no se vea en la página y no ocupe espacio?
3. ¿Cuál es la tipografía mencionada que tiene origen en un barrio de Buenos Aires? (R: Montserrat).

Nivel Intermedio

4. Si un contenedor tiene width: 50% y su padre tiene width: 800px, ¿cuánto mide el contenedor? ¿Y si tuviera 50vw en una pantalla de 1000px?
5. ¿Para qué sirve la pseudo-clase :nth-child en una tabla?
6. ¿Cómo se soluciona el desbordamiento de pantalla cuando se usa 100vh?

Nivel Avanzado

7. Explica la lógica detrás de una Media Query: ¿Cuándo y por qué deberíamos definir un "breakpoint"?
8. ¿Por qué es preferible descargar las fuentes (uso offline con @font-face) en lugar de usar siempre el enlace de Google Fonts (CDN)?
9. Describe el proceso para ocultar un menú de navegación en móvil y mostrarlo solo cuando el usuario interactúa, mencionando las propiedades display involucradas.

1. Video resumen

2. Infografía

3. Presentación