Bloque 4: Proyecto final

Plantillas reutilizables y arquitectura documental

Hasta ahora cada página vivía sola. Un sitio real es un sistema de documentos que comparten cabecera, menú, pie y estilos. La diferencia entre un aficionado y un profesional está en cómo se organiza ese sistema antes de escribir la primera línea.

1.1 · Arquitectura de carpetas

mi-sitio/
├── index.html          ← portada
├── servicios.html      ← páginas interiores…
├── equipo.html         ← …todas comparten estructura
├── contacto.html
├── css/
│   └── styles.css      ← UNA hoja de estilos compartida
├── js/
│   └── main.js         ← comportamiento común
└── img/
    ├── logo.png        ← recursos organizados por tipo
    ├── equipo/
    └── servicios/

1.2 · El problema de repetirse (y tres soluciones)

El mismo <header> y <footer> se repiten en cada página. Cuando cambie algo tendrás que tocarlas todas… a menos que uses una estrategia de plantilla:

1. Copia disciplinada: mantén una página maestra (_plantilla.html) y duplica. Es lo que harás en este curso.
2. Includes por JavaScript: un main.js inyecta header/footer comunes en un contenedor. Funciona, pero depende de JS.
3. Generadores y plantillas de servidor: PHP, includes o generadores estáticos componen la página antes de enviarla. Lo verás en los cursos correspondientes.

Para piezas internas reutilizables (una tarjeta, una fila de tabla), HTML5 trae el elemento <template>: define marcado dormido —no se pinta hasta que JavaScript lo clona—. Es la base de los componentes modernos:

<template id="tplTarjeta">
  <article class="tarjeta">
    <h3></h3>
    <p></p>
  </article>
</template>

<script>
  // Vista previa: esto es JavaScript (curso propio 😉)
  const tpl = document.getElementById('tplTarjeta');
  const clon = tpl.content.cloneNode(true);
  clon.querySelector('h3').textContent = 'Diseño web';
  document.querySelector('#lista').append(clon);
</script>

Integración HTML + CMS headless

Un CMS (Content Management System) permite que personas sin conocimientos técnicos publiquen contenido. Un CMS headless («sin cabeza») solo gestiona el contenido: no pinta páginas, sino que las sirve mediante una API que devuelve JSON. Tu HTML es la «cabeza» que decide cómo mostrarlo.

1. El editor crea contenido (un post, un servicio) en el panel del CMS: campos como título, texto e imagen.
2. El CMS expone una API: una URL tipo /api/posts devuelve el contenido en JSON.
3. Tu frontend lo consume: JavaScript obtiene ese JSON y lo vierte en tu marcado semántico.
4. El navegador muestra la página final con tu diseño y estructura.

[
  {
    "titulo": "Abrimos nueva oficina",
    "fecha": "2026-08-10",
    "resumen": "Ya atendemos en el centro de Valencia."
  },
  {
    "titulo": "Nuevo servicio de auditoría",
    "fecha": "2026-07-28",
    "resumen": "Revisamos tu web contra WCAG AA."
  }
]

<article>
  <h2>Abrimos nueva oficina</h2>
  <p>
    <time datetime="2026-08-10">10 ago 2026</time>
  </p>
  <p>Ya atendemos en el centro de Valencia.</p>
</article>

<!-- Cada campo JSON tiene su etiqueta semántica natural -->

Proyecto final: sitio corporativo multiplana

Tu entrega final es el sitio corporativo completo de una empresa ficticia: mínimo cuatro páginas conectadas (portada, servicios, equipo y contacto), construidas con todo lo aprendido y auditadas con evidencias.

3.1 · Requisitos obligatorios

• Estructura semántica completa en todas las páginas: landmarks, un h1, jerarquía limpia.
• Accesibilidad AA: skip link, navegación total por teclado, contraste, formularios etiquetados.
• SEO técnico: title/description únicos por página, canonical, Open Graph y JSON-LD de Organization o LocalBusiness.
• Formulario funcional con validación nativa (el de contacto, nivel examen del Bloque 2).
• Calidad demostrada: W3C sin errores y Lighthouse ≥ 90 en Accessibility y ≥ 95 en SEO.

3.2 · Plan de trabajo recomendado

1. Día 1 — Arquitectura: sitemap, nombres de archivos y plantilla maestra con zonas marcadas.
2. Día 2 — Páginas núcleo: portada y servicios con su head SEO completo desde el inicio.
3. Día 3 — Equipo y contacto: galería accesible + formulario validado.
4. Día 4 — Auditoría: W3C + Lighthouse en cada página; corrige y documenta el antes/después.
5. Día 5 — Defensa: documento breve justificando tus decisiones técnicas.

Examen global y defensa técnica

El cierre del curso HTML pone a prueba todo lo aprendido en los cuatro bloques (N1 → N5) con dos partes finales:

4.1 · El examen global

Un test que recorre los cuatro bloques a la vez: estructura básica, semántica, tablas y formularios, accesibilidad, SEO, HTML5 avanzado y calidad. Mismo formato que conoces: autoevaluable, mínimo 70 %, con reintentos ilimitados hasta dominarlo.

4.2 · La defensa técnica

Como en una entrevista técnica real, presentarás tu proyecto y responderás preguntas sobre él. Tu instructor/a evalúa que entiendas por qué, no solo cómo. Preguntas típicas:

Al superar examen + proyecto + defensa habrás demostrado un dominio completo de HTML. Enhorabuena por llegar hasta aquí 🎉.