8. Práctica

Una sola práctica: un mini sitio de tres vistas, conectadas por la misma navbar. Lo vas a construir por partes, a medida que avanzan las páginas del tópico.

Es el mismo proyecto durante toda la unidad

Este mini sitio no se termina aquí. En la práctica de CSS le vas a dar estilo, y en la práctica de Tailwind lo vas a dejar responsivo y con una interfaz cuidada. Es el ensayo directo del Trabajo 1: lo que hagas bien ahora, lo reutilizas.

Trabaja con Live Server abierto

Clic derecho sobre el archivo → Open with Live Server. Cada vez que guardes, el navegador se recarga solo y ves el resultado al instante.

El proyecto

El mini sitio terminado

mi-sitio/
|-- index.html           <- Inicio: presentación y tres tarjetas
|-- sobre-mi.html        <- Sobre mí: foto, texto, lista y un video
|-- contacto.html        <- Contacto: formulario, tabla y mapa
|-- README.md
`-- img/
    |-- foto-perfil.jpg
    `-- logo.png

Crea un repositorio en GitHub llamado mi-sitio, clónalo y trabaja dentro de esa carpeta (cómo se hace). Cada paso termina con un commit.

Paso 1 · El esqueleto y la navbar

Páginas 2 a 5: etiquetas y documento, texto, listas y enlaces, semántica y atributos y rutas y navbar.

• Crea las tres vistas con el esqueleto completo: <!DOCTYPE html>, <html lang="es">, y en el <head> el charset, el viewport y un <title> distinto en cada una
• En el <body> de las tres, la estructura semántica: <nav> arriba, <main> con el contenido y <footer> con tu nombre y el año
• La misma navbar en las tres: dentro del <nav>, una <ul> con tres <a> en rutas relativas
• En cada vista, el enlace que apunta a esa misma vista lleva class="activa"
• Un solo <h1> por vista

La prueba de fuego

Abre index.html y recorre todo el sitio ida y vuelta sin escribir la dirección a mano. Si en algún punto quedas atrapado, a esa vista le falta un enlace.

Commit: agrega las tres vistas con navbar.

Paso 2 · Inicio

Páginas 3 y 4: texto, listas y enlaces y semántica y atributos.

En index.html:

• Un <h1> con tu nombre y un <p> de presentación, con un <strong> o un <em> en alguna palabra
• Una <section> con un <h2> “Lo que hago” y tres <article class="tarjeta">, cada uno con su <h3> y un <p>
• En alguna tarjeta, un enlace a sobre-mi.html o a contacto.html

Las tres tarjetas son para más adelante

Hoy se ven como tres bloques de texto, uno bajo otro. En CSS y en Tailwind los vas a convertir en una grilla de tarjetas, y la class="tarjeta" es lo que te va a permitir apuntarles.

Commit: agrega el contenido de inicio.

Paso 3 · Sobre mí

Páginas 3 y 6: texto, listas y enlaces e imágenes y multimedia.

En sobre-mi.html:

• Una carpeta img/ con una foto .jpg y un logo o ícono .png con transparencia
• Un <h1>, la foto con <img> en ruta relativa (img/foto-perfil.jpg) y dos <p> sobre ti
• Un alt en cada imagen que describa lo que se ve, no alt="imagen1"
• El atributo width en la foto, para que no se desborde
• Un <h2> “Aficiones” y una <ul> con tres <li>
• Un <video> o un <audio> con su archivo y el atributo controls
• Nombres de archivo en minúscula, sin tildes ni espacios

Si aparece el ícono de imagen rota

El problema casi siempre es la ruta. Revisa mayúsculas, tildes y espacios, y que la carpeta esté donde crees.

Commit: agrega la vista sobre mi con imagenes.

Paso 4 · Contacto

Página 7: tablas y formularios.

En contacto.html:

• Un <form> con action="" y method="GET"
• Un <fieldset> con su <legend> “Tus datos”, con un campo type="text" para el nombre y uno type="email" para el correo
• Un <select> de asunto con al menos tres <option>, cada una con su value
• Un <textarea> para el mensaje, con maxlength
• Un <label for="…"> por campo, con el mismo valor en id y en name
• required en los campos obligatorios y un placeholder que muestre un ejemplo del dato
• Un <button type="submit"> que diga lo que hace: “Enviar mensaje”
• Debajo, una <table> “Mensajes recibidos” con <caption>, un <thead> con una columna por cada name del formulario y un <tbody> con tres filas de ejemplo
• Un colspan en alguna celda que agrupe dos columnas
• Un <iframe> con el mapa de Google de la UMAG, copiado desde Compartir → Incorporar un mapa, con su title

Comprueba el envío en la URL

Llena el formulario, envíalo y mira la barra de direcciones: debe aparecer un parámetro por cada campo (?nombre=…&correo=…). Si falta uno, a ese campo le falta el name.

Commit: agrega formulario, tabla y mapa en contacto.

Paso 5 · El README

• Un README.md con el nombre del sitio, qué tiene cada vista y cómo verlo (abrir index.html con Live Server)

Commit: agrega readme.

Autoevaluación

Antes de dar por terminado el mini sitio:

• Ninguna etiqueta quedó sin cerrar (Shift + Alt + F no reordena nada raro)
• Las tres vistas tienen charset, viewport y un <title> propio
• Hay un solo <h1> por vista, y nav, main y footer en las tres
• La navbar es idéntica en las tres vistas, salvo la class="activa"
• Ninguna imagen sale rota y todas tienen un alt que describe lo que se ve
• Todos los campos del formulario tienen name, y cada option tiene su value
• En la tabla, cada fila suma el mismo número de columnas contando los colspan
• El iframe tiene su title y el mapa carga de verdad
• Los nombres de archivo van en minúscula, sin tildes ni espacios
• El sitio se recorre completo desde index.html, ida y vuelta
• Todo está subido a GitHub, con un commit por paso