5. Práctica

Una sola práctica: tomar el mini sitio que ya tiene estilo con CSS, reemplazar su estilos.css por Tailwind, dejarlo responsivo y cuidar su interfaz. Es el mismo proyecto desde la práctica de HTML, y al terminar tienes el ensayo completo del Trabajo 1.

Ten abierto el modo dispositivo

Trabaja con el inspector (F12) en modo dispositivo (Ctrl + Shift + M) y cambia de vez en cuando entre un teléfono y el computador. Arreglar lo responsivo al final cuesta mucho más que ir revisándolo.

Paso 0 · Guardar la versión en CSS

• Haz un commit con el sitio tal como está: sitio con estilos.css

Por qué este commit primero

En el paso siguiente vas a borrar estilos.css. Con este commit, la versión en CSS queda guardada en el historial y puedes volver a mirarla cuando quieras con git log y git show, para comparar cada regla con su clase.

Paso 1 · Vincular Tailwind

Página 1: qué es Tailwind.

• Vincula Tailwind con el <script> del CDN en el <head> de las tres vistas (paso a paso)
• Comprueba que funciona en cada vista y quita el <link> a estilos.css; después borra el archivo
• Decide tu paleta (un color principal con dos tonos, dos grises de texto y un gris de borde) y anótala en un comentario al inicio de index.html

El sitio se va a ver peor antes de verse mejor

Al quitar tu CSS y vincular Tailwind, los títulos quedan del tamaño del texto, las listas pierden sus viñetas y los enlaces su subrayado. Es lo esperado: Tailwind parte de cero, y en el paso siguiente le devuelves el estilo con clases.

Commit: vincula tailwind y retira estilos.css.

Paso 2 · Traducir el CSS a clases

Página 2: clases más usadas.

Recorre tu estilos.css del commit anterior, regla por regla, y escribe su equivalente en clases.

• La tipografía y el color del body (font-sans text-gray-700 leading-relaxed)
• Los títulos con su tamaño y peso (text-4xl font-bold text-gray-900 en el h1)
• Las tarjetas de Inicio con fondo, relleno, borde con su color y esquinas redondeadas
• Los enlaces del menú con hover: y un foco visible con focus-visible:
• Los enlaces dentro de párrafos con underline, para que se distingan del texto
• La lista de aficiones con sus viñetas de vuelta (list-disc list-inside)
• Mide una tarjeta en el inspector y compara su relleno con el que tenía en CSS

Commit: traduce los estilos a clases de tailwind.

Paso 3 · Maquetación responsiva

Página 3: maquetación y diseño responsivo.

• Encierra el contenido de las tres vistas en el mismo contenedor: mx-auto max-w-5xl px-4
• La navbar apilada en el teléfono y en fila desde md:, con enlaces de al menos 44 px de alto en el teléfono
• Las tarjetas de Inicio en grid grid-cols-1 gap-6 md:grid-cols-3
• En Sobre mí, la foto y el texto uno bajo otro en el teléfono y lado a lado desde md: (flex flex-col md:flex-row)
• La tabla de Contacto envuelta en un div con overflow-x-auto
• Revisa las tres vistas a 375, 768 y 1280 px

Sin la meta viewport, el teléfono ve la versión de computador

Si en el modo dispositivo la página aparece en miniatura, revisa que la <meta name="viewport" …> esté en el <head> de esa vista.

Commit: deja el sitio responsivo.

Paso 4 · La interfaz

Página 4: interfaces de usuario.

• Jerarquía: en cada vista se distingue el título, el texto de apoyo en gris y el cuerpo
• La vista activa del menú con color, negrita y subrayado grueso, y aria-current="page" (reemplaza a la antigua class="activa")
• El botón “Enviar mensaje” como botón principal, con hover:, active:, un foco visible y cursor-pointer
• Cada campo del formulario con su label visible, un foco notorio y text-base
• Un campo escrito a mano en su estado de error, con el mensaje debajo, para dejar diseñado cómo se va a ver
• Mide en el inspector el contraste del texto del botón y del texto gris

Commit: cuida la interfaz del sitio.

Paso 5 · Revisión cruzada

En parejas: cada uno abre el sitio del otro y lo revisa con esta lista. Anota lo que no se cumple y no lo arregles tú: devuélvele la lista a su dueño.

Revisa	Se cumple si…
Jerarquía	Con los ojos entrecerrados, lo primero que se ve es el título y el botón principal
Contraste	Ningún texto es gris claro sobre blanco, y el texto de los botones pasa en el inspector
Consistencia	La navbar, los botones y los colores son iguales en las tres vistas
Estados	Enlaces y botones cambian al pasar el cursor, al pulsarlos y al llegar con Tab
Vista activa	En cada vista se sabe en qué página estás sin leer el título
Formulario	Cada campo tiene un label visible, el foco se nota y el botón dice lo que hace
Teléfono	A 375 px todo va en una columna, nada se sale por el costado y los enlaces se pulsan sin esfuerzo
Tarea	Siguiendo solo la interfaz, encuentras el formulario de contacto y sabes cómo enviarlo

Después, cada uno corrige su propio sitio con la lista que recibió, con un commit por cada arreglo.

Autoevaluación

Antes de dar por terminado el mini sitio:

• Ninguna vista enlaza estilos.css ni tiene <style> o style="…"
• Las tres vistas vinculan Tailwind y usan el mismo contenedor, la misma navbar y la misma paleta
• Ninguna clase usa valores inventados entre corchetes
• Todos los enlaces y botones tienen hover: y un foco visible
• Todos los bordes tienen su color
• En el teléfono, la navbar se apila y las tarjetas van en una columna
• No aparece scroll horizontal en ninguna vista, ni siquiera con la tabla
• Todo está subido a GitHub, con un commit por paso