Guía de Estudio: Desarrollo Frontend - Maquetación Semántica y Estilos Fundamentales

Esta guía constituye un material de estudio exhaustivo basado en la tercera sesión del curso de Desarrollo de Sistemas Web Frontend. El contenido se centra en la transición de una estructura básica a una maquetación profesional, el uso de contenedores semánticos y la introducción a la selección y aplicación de estilos mediante CSS.

1. Introducción General

El desarrollo frontend moderno no se limita a la escritura de etiquetas aisladas; se basa en la construcción de una arquitectura sólida. La premisa fundamental establecida es que el dominio profundo de HTML simplifica significativamente la aplicación posterior de CSS, especialmente en lo que respecta a la maquetación. Se enfatiza un enfoque de aprendizaje pausado y metódico bajo la premisa de que "las cosas se aprenden bien con tiempo" o se aprenden "rápido y mal".

2. Contexto del Tema

Evolución de la Maquetación

Históricamente, en los años 90 y principios de los 2000 (HTML 4), la maquetación se realizaba mediante el uso excesivo de etiquetas <div> genéricas y técnicas manuales para efectos visuales (como imágenes para bordes redondeados). Con la llegada de HTML5 y tecnologías como Flexbox, la maquetación se ha vuelto más eficiente, permitiendo que elementos complejos se alineen y se adapten a dispositivos móviles con instrucciones mínimas.

Importancia y Relevancia

Una estructura HTML bien organizada es el pilar para:

• SEO (Search Engine Optimization): Facilita que los buscadores indexen correctamente el sitio.
• Accesibilidad: Permite que tecnologías de asistencia naveguen el contenido de forma lógica.
• Mantenimiento: Un código limpio es más fácil de entender y actualizar por otros desarrolladores.

3. Marco Conceptual: Definición de Conceptos Clave

• Contenedor Semántico: Etiquetas que describen claramente su significado tanto al navegador como al desarrollador. Indican qué tipo de contenido albergan y su ubicación lógica.
• Contenedor No Semántico: Etiquetas como <div> o <span> que actúan como recipientes vacíos sin aportar información sobre su contenido.
• Elementos en Bloque (Block): Elementos que ocupan todo el ancho disponible y comienzan en una nueva línea (ej. <div>, main, section).
• Elementos en Línea (In-line): Elementos que solo ocupan el espacio necesario para su contenido y no fuerzan saltos de línea (ej. <img>, <a>, <span>, button).

4. Desarrollo del Tema: La Estructura de la Página

La Analogía del "Maniquí de Dibujo"

Para estructurar una web, se debe pensar en la figura del maniquí articulado de dibujo técnico. Antes de detallar los rasgos, se definen las partes fundamentales: cabeza, torso y extremidades. En HTML, esto se traduce en cinco contenedores esenciales.

Los 5 Contenedores Semánticos Fundamentales

Etiqueta	Nombre	Función
<header>	Cabecera	Parte superior de la página web. Suele contener el logo y el menú principal.
<main>	Contenido Principal	Alberga el contenido fundamental de la web, excluyendo cabecera y pie.
<footer>	Pie de Página	Parte inferior con información de contacto, avisos legales o navegación secundaria.
<nav>	Navegación	Contenedor para enlaces de navegación (puede estar en el header o footer).
<section>	Sección	Divide el contenido dentro del main en bloques temáticos lógicos.

Subcontenedores Opcionales

Dependiendo del tipo de sitio, pueden incluirse:

• **<aside>**: Para contenido lateral (barras laterales, publicidad, enlaces relacionados).
• **<article>**: Para contenidos independientes y autónomos (noticias, posts de blog).

5. Relaciones entre Conceptos: HTML y CSS

La Regla de Oro de la Maquetación

Se establece una política estricta de orden: Los elementos en línea deben estar siempre contenidos dentro de elementos en bloque. Esta práctica previene errores de visualización y facilita el uso de Flexbox para la alineación.

Identificación de Elementos (Clases e IDs)

Para aplicar estilos específicos en CSS, se utilizan selectores que identifican los elementos en el HTML. La analogía utilizada es la de los documentos personales:

1. Etiquetas (Selector General): Afecta a todos los elementos del mismo tipo (ej. todos los <h1>). Es la prioridad más baja.
2. Clases (**class** / **.nombre**): Para elementos comunes o repetidos. Equivalen al tipo de tarjeta (ej. todas las tarjetas SUBE tienen un diseño similar). Un elemento puede tener múltiples clases.
3. IDs (**id** / **#nombre**): Para elementos únicos e irrepetibles. Equivale al número de DNI. Es la prioridad más alta y solo puede haber uno por página con ese nombre.

6. Ejemplos Prácticos

Análisis de Estructura: Apple vs. Google

El documento propone un ejercicio de "escaneo visual" para identificar contenedores en sitios reales:

• Google (About):
  • Header: Contiene un <nav> y un <div> con la imagen del logo.
  • Main: Dividido en cuatro <section> claramente diferenciadas por colores de fondo.
  • Footer: Contiene un <nav> con varios <div> para columnas de enlaces, un <hr> (línea horizontal) y un <section> final para el copyright.

Implementación de Estilos en CSS

Un ejemplo de cómo se aplican estilos basados en los conceptos anteriores:

/* Estilo para un ID único */
#portada {
    background-color: #f5f5f7;
    padding-top: 80px;
}

/* Estilo para una Clase repetible */
.btn-primario {
    background-color: #0066cc;
    color: white;
    border-radius: 48px;
    padding: 12px 24px;
}

/* Estilo para una Etiqueta general */
body {
    font-family: Arial, sans-serif;
}

7. Errores Comunes y Confusiones

• Uso excesivo de **<div>** (Div-itis): Utilizar <div> para todo en lugar de etiquetas semánticas. Esto dificulta el SEO y la lectura del código.
• Nomenclatura de IDs: Se aclara que, a diferencia de las bases de datos, en HTML los IDs no deben ser números por una cuestión de semántica y claridad para el desarrollador. Deben ser descriptivos (ej. #portada en lugar de #1).
• Jerarquía de Encabezados: No se debe usar un <h4> arriba y un <h1> abajo; se debe respetar el orden jerárquico del contenido.

8. Síntesis y Conclusiones

• La maquetación debe empezar de lo general (contenedores estructurales) a lo particular (etiquetas de contenido).
• HTML5 introdujo etiquetas semánticas para estandarizar la web y eliminar la ambigüedad de los <div>.
• El CSS se aplica de forma más eficiente cuando se comprenden las prioridades de los selectores (Etiqueta < Clase < ID).
• El diseño debe ser pensado primero como un conjunto de cajas o cubos antes de aplicar estilos visuales.

9. Preguntas de Repaso

Nivel Básico

1. ¿Cuáles son los tres contenedores principales que definen el esqueleto de una web?
2. ¿Qué diferencia hay entre un <div> y un <section>?
3. ¿Para qué sirve la etiqueta <nav>?

Nivel Intermedio

4. Explique la analogía de la tarjeta SUBE y el DNI para definir clases e IDs.
5. ¿Por qué es recomendable meter los elementos en línea (como <img>) dentro de elementos en bloque?
6. ¿Qué impacto tiene el uso de etiquetas semánticas en el SEO de un sitio web?

Nivel Avanzado

7. Si un elemento tiene un estilo definido por etiqueta, otro por clase y otro por ID, ¿cuál prevalecerá y por qué?
8. Describa el proceso de "barrido" para clonar la estructura de una página compleja como la de Apple.
9. ¿Cuál es la función de los atributos muted, autoplay y loop en una etiqueta de video?

10. Fechas Importantes y Avisos Académicos

• Duración de la cursada: El ciclo consta de un total de 16 clases de una hora y media cada una.
• Seminario de Profundización: En instancias posteriores (poscursada), se abordarán temas avanzados como:
  • Linux: Uso de la terminal, gestión de procesos (Htop/Top), máquinas virtuales y entornos de escritorio (Mate/Cinnamon).
  • Full Stack: Desarrollo de una aplicación completa (REST API, Backoffice y Front) para un sistema de pedidos.
  • Frameworks: Elección estratégica entre React o Angular para el mercado laboral.
• Recursos Complementarios (Disponibles en el repositorio/GitHub):
  • Clase de fundamentos de Git (30 min).
  • Libros y materiales sobre Git en Google Drive.
  • Cursos recomendados de Midudev y Fernando Herrera (React/Angular).
  • Bootcamp de React de la Universidad de Helsinki.
• Práctica sugerida: Continuar con la maquetación del clon de Google o Apple, enfocándose en llenar el contenido de las secciones identificadas y aplicar clases/IDs para los estilos.

1. Video resumen

2. Infografía

3. Presentación