¿Qué es la semántica y la accesibilidad? (10 minutos)
Explicación:
- Semántica HTML: Usar etiquetas que describan el propósito del contenido (por ejemplo, <header> para cabeceras, <article> para artículos) en lugar de etiquetas genéricas como <div>. Esto hace el código más claro, mejora el SEO (optimización para buscadores) y ayuda a tecnologías asistivas (lectores de pantalla).
- Accesibilidad: Diseñar páginas que todos puedan usar, incluyendo personas con discapacidades visuales, auditivas o motoras. Ejemplos: añadir texto alternativo (alt), usar etiquetas claras, o asegurar que el formulario sea navegable con teclado.
Beneficios:
- Código más legible y mantenible (importante en Laravel para colaborar en equipo).
- Mejor indexación en buscadores (Google favorece la semántica).
- Inclusión de usuarios con discapacidades (requisito legal en muchos contextos).
Ejemplo de semántica vs. no semántica:
- No semántico: <div>Título</div> (no dice qué es).
- Semántico: <h1>Título</h1> (indica un encabezado principal).
Punto clave: En Laravel, las vistas Blade usan HTML semántico para estructurar datos dinámicos, y la accesibilidad asegura que las aplicaciones sean usables por todos.
Actividad rápida (2 minutos):
Piensa en una página web (por ejemplo, un blog). Escribe en papel 2 partes que podrían usar etiquetas semánticas. Ejemplo:
- <header>: Menú y logo.
- <footer>: Información de contacto.
Etiquetas semánticas (15 minutos)
Explicación:
HTML5 introduce etiquetas semánticas que dan significado al contenido. Las más comunes son:
- <header>: Cabecera de una página o sección (logo, menú).
- <nav>: Navegación (menús o enlaces).
- <main>: Contenido principal de la página (único por página).
- <article>: Contenido independiente (post, noticia).
- <section>: Sección temática dentro de la página.
- <aside>: Contenido secundario (barras laterales, anuncios).
- <footer>: Pie de página (copyright, enlaces).
Estructura semántica típica:
<header> <!-- Menú, logo -->
</header>
<main> <!-- Contenido principal -->
<article> <!-- Post o noticia -->
</article>
</main>
<aside> <!-- Barra lateral -->
</aside>
<footer> <!-- Copyright -->
</footer>
Accesibilidad básica:
- Usa <label> con for para conectar etiquetas a campos de formulario.
- Añade alt en <img> para describir imágenes.
- Usa aria-label o role en elementos dinámicos (opcional por ahora, pero buena práctica).
- Asegura contraste de colores y tamaños de fuente legibles (controlado con CSS).
Ejemplo práctico (como pide la lección):
Reescribir una página no semántica usando etiquetas semánticas:
Antes (no semántico):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página Simple</title>
</head>
<body>
<div>Título del Blog</div>
<div>
<a href="#">Inicio</a> | <a href="#">Acerca</a>
</div>
<div>
<h2>Mi Post</h2>
<p>Este es un artículo interesante.</p>
</div>
<div>© 2023 Mi Blog</div>
</body>
</html>
Después (semántico):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página Semántica</title>
</head>
<body>
<header>
<h1>Título del Blog</h1>
<nav>
<a href="#">Inicio</a> | <a href="#">Acerca</a>
</nav>
</header>
<main>
<article>
<h2>Mi Post</h2>
<p>Este es un artículo interesante.</p>
</article>
</main>
<footer>
<p>© 2023 Mi Blog</p>
</footer>
</body>
</html>
Cómo funciona:
- <header> agrupa el título y la navegación.
- <nav> marca los enlaces como menú.
- <main> contiene el contenido principal.
- <article> define el post como unidad independiente.
- <footer> indica el pie de página.
Cómo probarlo:
- Crea dos archivos: no_semantico.html y semantico.html.
- Copia los códigos y ábrelos en un navegador.
- Usa "Inspeccionar" (F12) para ver la estructura (el semántico es más claro).
- Alternativa: Pega en CodePen y compara.
Resultado esperado:
Ambos se ven similares visualmente, pero el semántico es más estructurado, legible y compatible con lectores de pantalla.
Punto clave: En Laravel, usarás etiquetas semánticas en Blade para vistas claras y accesibles, mejorando la mantenibilidad y la experiencia del usuario.
Actividad rápida (3 minutos):
Reescribe en papel este fragmento no semántico usando etiquetas semánticas:
<div>Noticias</div>
<div><p>Noticia 1 aquí.</p></div>
Solución sugerida:
<main>
<h1>Noticias</h1>
<article>
<p>Noticia 1 aquí.</p>
</article>
</main>
Accesibilidad en formularios y CSS (10 minutos)
Explicación:
Los formularios (vistos en Lección 2) son un punto clave para la accesibilidad. Buenas prácticas incluyen:
- Usar <label>: Conecta etiquetas a campos con el atributo for (coincide con el id del <input>).
- Atributos id y name: Identifican campos para navegadores y servidores.
- aria-label o aria-describedby: Describe elementos para lectores de pantalla (opcional para principiantes).
- CSS accesible:
- Usa rem para tamaños de fuente legibles.
- Asegura contraste (por ejemplo, texto oscuro sobre fondo claro).
- Evita depender solo de color para información (por ejemplo, usa bordes para errores).
Ejemplo de formulario accesible:
<form action="/submit" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<button type="submit">Enviar</button>
</form>
CSS para accesibilidad:
label, input {
font-size: 1rem; /* Legible */
display: block; /* Apila elementos */
margin-bottom: 0.5rem;
}
input {
border: 2px solid black; /* Claro para todos */
padding: 0.5rem;
}
Punto clave: La accesibilidad en formularios es crucial en Laravel, donde los usuarios interactúan con vistas para enviar datos.
Actividad rápida (2 minutos):
Añade un <label> al siguiente campo en papel:
<input type="email" name="correo">
Solución sugerida:
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo">
Ejemplo práctico y preparación para la tarea (15 minutos)
Ejemplo práctico extendido:
Añadamos CSS básico y accesibilidad al ejemplo semántico:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página Semántica Estilizada</title>
<style>
header, footer {
background-color: #f0f0f0;
padding: 1rem;
text-align: center;
}
nav a {
margin: 0 1rem;
color: navy;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
article {
border: 1px solid #ccc;
padding: 1rem;
margin-bottom: 1rem;
}
h1, h2, p {
font-size: 1.5rem; /* Ajustable con rem */
color: #333; /* Alto contraste */
}
</style>
</head>
<body>
<header>
<h1>Título del Blog</h1>
<nav>
<a href="#">Inicio</a> | <a href="#">Acerca</a>
</nav>
</header>
<main>
<article>
<h2>Mi Post</h2>
<p>Este es un artículo interesante.</p>
</article>
</main>
<footer>
<p>© 2023 Mi Blog</p>
</footer>
</body>
</html>
Cómo probarlo:
- Guarda como semantico_estilizado.html.
- Ábrelo en un navegador para verificar el diseño.
- Usa un lector de pantalla (como NVDA o VoiceOver) o las herramientas de accesibilidad del navegador (F12 > Accessibility) para confirmar que es claro.
Resultado esperado:
- Un encabezado y pie de página gris, menú centrado, artículo con borde, y texto legible con buen contraste.
Preparación para la tarea:
La tarea pide optimizar el formulario de registro de la Lección 2 (4 campos: nombre, email, contraseña, edad) con etiquetas semánticas y accesibilidad. Recordemos el formulario base:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Registro</title>
</head>
<body>
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</body>
</html>
Objetivo de la tarea:
- Usar etiquetas semánticas como <main>, <header>, <form> dentro de una estructura clara.
- Mejorar accesibilidad con <label>, id, required, y CSS legible (por ejemplo, rem para fuentes, buen contraste).
Estrategia sugerida:
- Envolver el formulario en <main>.
- Usar <header> para el título.
- Asegurar que cada <input> tenga <label> con for e id.
- Añadir CSS para márgenes, fuentes legibles, y bordes claros.
Tarea práctica: Optimiza tu formulario con etiquetas semánticas
Instrucciones:
- Toma el formulario de la Lección 2 (registro.html) con 4 campos (nombre, email, contraseña, edad).
- Optimízalo para que:
- Use etiquetas semánticas (<header>, <main>, <form> como mínimo).
- Sea accesible:
- Cada <input> debe tener un <label> con for que coincida con el id.
- Usa required en campos obligatorios (por ejemplo, nombre, email).
- Añade CSS básico para legibilidad (fuentes en rem, buen contraste, campos apilados).
- Usa el siguiente código como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario Semántico</title>
<style>
main {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
header {
text-align: center;
background-color: #f0f0f0;
padding: 1rem;
}
label, input, button {
display: block;
margin-bottom: 0.5rem;
font-size: 1rem;
}
input, button {
width: 100%;
padding: 0.5rem;
border: 2px solid #333;
box-sizing: border-box;
}
button {
background-color: navy;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Regístrate</h1>
</header>
<main>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo" required>
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña" required>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</main>
</body>
</html>
- Prueba el archivo:
- Guarda como registro_semantico.html.
- Ábrelo en un navegador para verificar que el formulario sea claro y funcional.
- Usa "Inspeccionar" (F12 > Accessibility) o un lector de pantalla (como NVDA) para confirmar que los <label> y la estructura son detectados.
- Alternativa: Pega en CodePen y revisa la vista previa.
Ejemplo de solución esperada:
El código anterior es funcional. En el navegador:
- Un encabezado centrado con fondo gris.
- Un formulario dentro de <main>, con 4 campos accesibles (etiquetas claras, bordes visibles).
- Campos apilados, legibles, con placeholders y un botón estilizado.
Tiempo estimado: 20-30 minutos (puedes hacerlo después de la lección).
Entregable: Archivo registro_semantico.html con un formulario semántico y accesible. Puedes compartir el código o describirlo para que lo revise.
Consejo: Prueba navegar el formulario solo con el teclado (Tab y Enter) para verificar accesibilidad. Asegúrate de que los <label> estén vinculados correctamente.