HTML semántico y accesibilidad · Lección 10 / 10

Misión: un taller abierto a más personas

Convierte el modelo en tu propia página y entrega también evidencias de revisión.

Vamos a descubrir juntos

1
El kit reúne index.html, una imagen del proceso, estilos de lectura, demo.js y REVIEW.md. Presenta un taller ficticio. Personaliza título, programa e instrucciones con contenido inventado, sin identidades ni datos personales de participantes.
2
Mantén jerarquía coherente, regiones claras, enlaces descriptivos, alt adecuado, tabla simple y controles etiquetados. Si quitas imagen o tabla porque no la necesitas, explica la decisión en vez de añadir elementos sin propósito.
3
Compara un defecto con su corrección: cambia for de un label, observa la pista y el clic que no enfoca, restaura y prueba otra vez. En REVIEW.md anota evidencias antes/después y pruebas pendientes.
4
Descarga el HTML editado aparte y sustituye index.html en el kit extraído. El ZIP siempre contiene el modelo inicial. GitHub es opcional: el botón envía un archivo por vez; sube también los archivos de apoyo por GitHub o Git para el proyecto completo. Esto no activa GitHub Pages automáticamente.

Taller de HTML: escribir, observar, revisar

Edita HTML en “Mis archivos y GitHub” y actualiza la vista previa. Usa elementos de estudio y estilos de lectura: scripts, CSS propio y navegación externa quedan desactivados. Solo route.svg del kit se muestra como imagen.

Ir a mi HTML

Estas comprobaciones no son validación completa de HTML ni auditoría WCAG. Revisa contenido, teclado, zoom y tecnologías de asistencia; registra lo pendiente.

El código cambió. Actualiza la vista previa para revisar esta versión.Vista previa actualizada. Lee las pistas y haz las pruebas manuales.Escribe algo de HTML antes de actualizar la vista previa.Usa hasta 65.536 caracteres y una estructura menor en este taller.No se encontraron pistas simples. La revisión manual sigue siendo necesaria.No se encontraron encabezados.Práctica completada localmente; nada fue enviado ni registrado.Imagen no cargada en vista previaRevisa doctype, idioma de html y título de pestaña en el original.En este proyecto usa un main y un h1 descriptivo.Hay un salto de nivel entre encabezados; revisa jerarquía y significado.Hay ids repetidos; da un identificador único a cada destino o control.Revisa enlaces sin nombre, sin href o con destinos internos ausentes.Hay una imagen sin alt. Decide su función antes de escribir una alternativa.Hay un control sin label asociado. Revisa for/id o el label que lo envuelve.Revisa caption y encabezados th con scope en las tablas simples del proyecto.Evita tabindex positivo; revisa el orden natural de navegación.Prefiere elementos nativos a div/span con rol de botón en esta práctica.La vista previa ignora recursos fuera del conjunto de estudio. Revisa el documento completo localmente.data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgNjAwIDEyMCI+PHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIxMjAiIHJ4PSIxNiIgZmlsbD0iI2VkZjVmYSIvPjxnIGZpbGw9IiMxMDJlNDgiPjxjaXJjbGUgY3g9IjkwIiBjeT0iNjAiIHI9IjM2Ii8+PGNpcmNsZSBjeD0iMzAwIiBjeT0iNjAiIHI9IjM2Ii8+PGNpcmNsZSBjeD0iNTEwIiBjeT0iNjAiIHI9IjM2Ii8+PC9nPjxnIHN0cm9rZT0iIzE2NmY2NiIgc3Ryb2tlLXdpZHRoPSI1IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTQwIDYwaDEwNW0tMTYtMTIgMTYgMTItMTYgMTJNMzUwIDYwaDEwNW0tMTYtMTIgMTYgMTItMTYgMTIiLz48L2c+PGcgZmlsbD0iI2ZmZiIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjx0ZXh0IHg9IjkwIiB5PSI3MyI+MTwvdGV4dD48dGV4dCB4PSIzMDAiIHk9IjczIj4yPC90ZXh0Pjx0ZXh0IHg9IjUxMCIgeT0iNzMiPjM8L3RleHQ+PC9nPjwvc3ZnPg0K

Enlaces oficiales y siguiente paso

Referencia para investigar

✦

TU MISIÓN

Integrar HTML semántico y producir una revisión honesta del proyecto.

¿Cómo reconocer lo que aprendí?

Usa objetivos y desafío para reflexionar o conversar con alguien que pueda ayudar. Es autoevaluación orientada: no envía respuestas, no da XP ni verifica automáticamente autonomía.

En Fundamentos, modifica un ejemplo, predice, comprueba un caso normal y uno de error, y explica tus decisiones. Si necesitas ayuda, identifica qué practicar otra vez.

Tu desafío de transferencia

Entrega una página con al menos tres cambios justificados y una revisión antes/después. Luego continúa con CSS y diseño de interfaces para estudiar presentación, layout y adaptación.

Guarda evidencia: predicción, intento, resultado, cambio propio y lo que aún no explicas. Busca feedback si es posible; si estudias solo, vuelve después sin copiar y compara intentos.

Inténtalo de nuevo en otro momento

Tras una pausa, explica la idea sin abrir la solución y prueba otro ejemplo. Compara con tu primer intento: ¿qué puedes hacer por tu cuenta y dónde necesitas una pista? Puedes escribir, hablar o dibujar; elige una forma de comprobar la misma idea. Registra la ayuda recibida, incluida IA, y vuelve al fragmento necesario. No hay plazo universal ni XP extra por este registro.

Las conclusiones y XP registran evaluaciones de Rullst Academy. Una ruta introductoria puede ayudar en la vida diaria y preparar estudios; sola no demuestra dominio completo ni preparación profesional. Nivel indica profundidad, no edad.

Llévatelo contigo

Entrega una página con al menos tres cambios justificados y una revisión antes/después. Luego continúa con CSS y diseño de interfaces para estudiar presentación, layout y adaptación.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; script-src 'self'; base-uri 'none'; form-action 'none'">
<title>Taller de ideas</title>
<link rel="stylesheet" href="style.css">
<script src="demo.js" defer></script>
</head>
<body>
<a class="skip" href="#conteudo">Saltar al contenido</a>
<header><h1>Taller de ideas</h1><p>Un taller ficticio para dibujar, probar y revisar ideas con papel.</p></header>
<nav aria-label="Navegación principal"><a href="#programa">Ver programa del taller</a> · <a href="#treino">Probar formulario</a></nav>
<main id="conteudo" tabindex="-1">
<section id="programa"><h2>Programa</h2>
<h3>Materiales</h3>
<ul><li>Papel reutilizado</li><li>Lápiz</li></ul>
<h3>Pasos</h3>
<ol><li>Dibujar una idea</li><li>Probar y observar</li><li>Revisar con evidencia</li></ol>
<figure><img src="route.svg" width="600" height="120" alt="Idea, después prueba, después revisión"><figcaption>Nuestro proceso tiene tres etapas.</figcaption></figure>
<table><caption>Programa de actividades ficticias</caption><thead><tr><th scope="col">Actividad</th><th scope="col">Minutos</th></tr></thead><tbody><tr><th scope="row">Dibujar</th><td>10</td></tr><tr><th scope="row">Probar</th><td>15</td></tr></tbody></table>
</section>
<section id="treino"><h2>Formulario de práctica</h2>
<p id="form-help">Usa un alias inventado de hasta 20 caracteres. Campo obligatorio. No es una inscripción y nada será enviado.</p>
<form><label for="alias">Alias ficticio (obligatorio)</label>
<input id="alias" name="alias" type="text" required maxlength="20" aria-describedby="form-help" autocomplete="off">
<fieldset><legend>¿Qué actividad prefieres?</legend>
<label for="draw"><input id="draw" type="radio" name="activity" value="draw" checked> Dibujar</label>
<label for="test"><input id="test" type="radio" name="activity" value="test"> Probar</label></fieldset>
<button type="submit">Comprobar práctica local</button></form>
<p id="practice-result" role="status" data-practice-message="Práctica completada localmente; nada fue enviado ni registrado."></p></section>
<section><h2>Preguntas</h2><details><summary>¿Necesito inscribirme?</summary><p>No. Esta página es solo un proyecto de estudio.</p></details></section>
</main>
<footer><p>Proyecto ficticio de aprendizaje.</p></footer>
</body>
</html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Misión: un taller abierto a más personas

Vamos a descubrir juntos

Taller de HTML: escribir, observar, revisar

Vista previa de estudio

Pistas para tu revisión

Mapa de encabezados

Enlaces oficiales y siguiente paso

Ahora te toca

Lee, predice, prueba