Sitio web personal — fundamentos de la casa digital
Construyes la casa digital de tu marca: un wireframe a mano + un index.html con estructura HTML semántica clara.
Antes de la tecnología, este saber.
Los caminos prehispánicos —la red del oro Quimbaya en el Valle, los caminos incas, los senderos de los chasquis— no eran trazos al azar: cada uno tenía un propósito y conectaba un lugar específico con otro. El que caminaba sabía adónde iba porque la ruta estaba pensada. Esa misma intención organiza un buen sitio web.
¿Qué hacía que los caminos antiguos llevaran a la gente al lugar correcto sin GPS? ¿Qué señales usaban y por qué funcionaban?
Una página web bien construida usa HTML semántico: header, nav, main, article, aside, footer. Cada etiqueta no solo dibuja: le dice al navegador qué función cumple ese bloque. Sin semántica, los lectores de pantalla, los buscadores y las personas se pierden.
"Si quitaras todos los estilos a tu sitio favorito, ¿se entendería igual? ¿O quedaría un montón de texto sin pies ni cabeza?"
Esto vas a recorrer hoy.
- 1
Caminos con intención
8 min - 2
Lee la estructura de 3 sitios
15 min - 3
Vocabulario HTML semántico
15 min - 4
Wireframe + index.html de tu home
37 min - 5
Verifica, reflexiona y cierra
15 min
Cuaderno: empieza en página nueva con este encabezado —Guía · Tema · Fecha—. Solo lo que aparezca en los bloques de actividad y en los de saber ancestral y triángulo va al cuaderno; el resto es para leer y entender.
Modo lectura
En tu navegador abre un sitio de noticias y activa el "modo lectura" o "vista de lector". Lo que sobrevive ES la estructura semántica. Compara con lo que se pierde — los anuncios, sidebars decorativos. Eso te muestra qué queda cuando solo importa el contenido.
4 minEn la sesión 2 creaste tu sistema visual mínimo: paleta, tipografía y lockup. Tu marca ya tiene cara.
En la sesión 4 elegirás una plantilla web profesional y la adaptarás con tu identidad para publicarla.
Las 6 palabras que vas a entender hoy.
Domina estas ideas y todo lo demás cae solo. Léelas antes de abrir el PDF.
🏗 Estructura semántica
- 🧱
HTML semántico
Etiquetas que tienen significado: header, nav, main, article, footer. No solo dibujan — le dicen al navegador y al lector de pantalla qué función cumple cada bloque.
Ej. Un <header> contiene logo + nav. Un <article> es contenido autónomo (post, ficha). Un <footer> cierra con créditos y contacto.
- 🎩
<header>
La cabecera del sitio: nombre o logo + navegación principal. Va arriba de todo. Puede repetirse dentro de articles, pero el principal solo aparece una vez.
Ej. <header><h1>Tu nombre</h1><nav>...</nav></header> — el bloque que un visitante ve primero.
- 🎯
<main>
El contenido único y central de la página. Solo debe haber UN <main> por página. Es lo que cambia de una página a otra.
Ej. En la home, <main> contiene el hero + las secciones únicas. En una página "sobre mí", el <main> sería tu biografía.
- 📑
<section> vs <article>
Section agrupa contenido temático relacionado. Article es contenido autónomo que se entiende solo (post, ficha de producto, item de feed).
Ej. Una página de blog tiene una <section class="posts"> que contiene varios <article>, uno por entrada.
♿ Buenas prácticas
- 1️⃣
Un solo <h1>
Cada página debe tener exactamente un <h1>. Es el título principal — los lectores de pantalla lo usan como ancla.
Ej. En la home, el <h1> suele ser tu nombre o tu propuesta de valor. Los subtítulos van con <h2>, <h3>.
- 👁
Test sin CSS
Si tu HTML, sin estilos, todavía se lee como un documento ordenado, tu estructura semántica está bien. Si parece sopa de letras, faltan etiquetas.
Ej. Abre el index.html en Chrome con DevTools → Disable CSS. Si los títulos, párrafos y listas siguen jerarquizados, pasaste el test.
Ahora, a tu cuaderno.
Estas son las actividades que vas a desarrollar y dejar registradas. Lo que NO aparece como Actividad es para entender, no para copiar.
Lee la estructura semántica de 3 sitios
- Visita un sitio de un periódico. Identifica qué hay en el header (logo, menú).
- Visita una página de universidad. Identifica el nav principal y el main.
- Visita un sitio de empresa. Identifica el footer (créditos, contacto).
- Para cada uno toma una captura y márcala a lápiz si puedes: dónde empieza header, main, footer.
- Título:
- «Actividad 1 — Estructura semántica de 3 sitios»
- Formato:
- Tabla de 4 columnas (Sitio | Header | Main | Footer), 3 filas
- Extensión:
- 3 filas + 1 frase final con el patrón común a los 3
- Cada celda nombra elementos concretos (no "varias cosas")
- Los 3 sitios son de sectores distintos (no 3 periódicos)
- La frase final identifica el patrón común a los 3
- Hay al menos una observación de qué falta o sobra en alguno
Define con tus palabras 7 etiquetas semánticas
- Para cada etiqueta —header, nav, main, section, article, aside, footer— escribe en tus palabras para qué sirve.
- Para cada una, da un ejemplo concreto de cómo la usarás en tu propio sitio.
- Marca con una ★ las 3 etiquetas que más vas a usar.
- Cierra con 1 párrafo: ¿cuál es la diferencia clave entre <section> y <article>?
- Título:
- «Actividad 2 — Vocabulario semántico HTML»
- Formato:
- 7 fichas, cada una con nombre + para qué sirve (1 frase) + ejemplo de tu sitio
- Extensión:
- 7 fichas + 1 párrafo de cierre sobre section vs article
- Cada definición está en tus palabras, no copiada literal
- Cada ejemplo es específico de tu sitio (no genérico)
- La diferencia section/article está clara
- Puedes explicar cada etiqueta sin mirar notas
Wireframe + index.html de tu home
- Dibuja a mano en una hoja la estructura de tu home: header arriba, main al centro con 2-3 secciones, footer abajo.
- Abre un archivo index.html en VS Code con el esqueleto: <!doctype html>, <html>, <head>, <body>.
- Dentro del body escribe la estructura semántica vacía: header → main (con sections) → footer.
- Llena cada bloque con texto real (tu nombre, propuesta de valor, secciones). SIN CSS todavía.
- Abre el HTML en Chrome y verifica que se lea como documento ordenado.
- Título:
- «Actividad 3 — Mi home semántico v1»
- Formato:
- (1) Wireframe a mano en la página izquierda. (2) Transcripción del HTML real en la página derecha.
- Extensión:
- 2 páginas enfrentadas
- El wireframe muestra header, main y footer claramente delimitados
- El HTML usa al menos 5 etiquetas semánticas distintas
- Existe un único <h1>
- Sin CSS, el navegador todavía muestra una jerarquía clara
- El HTML pasa el validador W3C sin errores estructurales
Evalúa el HTML de un compañero
- Intercambia tu index.html con un compañero (puede ser por correo o pantalla compartida).
- Abre el suyo en Chrome con DevTools → desactiva todo el CSS.
- Califica del 1 al 5: (a) ¿se entiende sin estilos?, (b) ¿usa etiquetas semánticas en vez de <div>?, (c) ¿tiene un solo <h1>?
- Escribe 1 observación que afirma y 1 que reta. Devuélvele el archivo y conversen 5 min.
- Título:
- «Actividad 4 — Evaluación del home semántico de [nombre]»
- Formato:
- 3 calificaciones con justificación + 2 observaciones
- Extensión:
- 3 calificaciones + 2 observaciones de 2-3 renglones
- Las 3 calificaciones están con justificación de 1 línea
- La observación que afirma señala algo específico
- La observación que reta es concreta y respetuosa
- Reconociste al menos una etiqueta semántica bien usada
Ahora aplica lo aprendido.
Tienes el PDF leído. Aquí pones las manos. Estos labs te ayudan a verificar que entendiste antes de la próxima clase.
✅ Verifica el vocabulario HTML
5 preguntas para confirmar que dominas la semántica antes de pasar a la sesión 4. Necesitas 3/5 para continuar.
- 1 ¿Cuántos <h1> debe tener una página HTML bien construida?
- 2 ¿Cuál es la diferencia clave entre <section> y <article>?
- 3 Si abres tu HTML sin CSS y queda una sopa de letras sin jerarquía, ¿qué te dice eso?
- 4 ¿Cuántos <main> debe tener una página HTML?
- 5 En el saber ancestral de los caminos prehispánicos, ¿qué aplica directamente a un sitio web?
¡Completaste el quiz!
Aciertos: 0 de 5
Tres voces para cerrar.
No es decoración: son tres lentes que te acompañan toda la secundaria. Lee con calma y responde la pregunta-espejo en tu cuaderno.
Enrique Dussel
lente del nosotrosLa analéctica supera a la dialéctica al partir del Otro como Otro.
— formulación de esta guía, al modo de Enrique Dussel. No es una cita textual.
Pregunta-espejo: ¿Quién no puede leer mi sitio? ¿Una persona con lector de pantalla, con conexión lenta, que no maneja bien el español, lo logra navegar?
Séneca
lente del cuidado interiorNada se construye bien sin orden; sin él, la abundancia es ruina.
— formulación de esta guía, al modo de Séneca. No es una cita textual.
Pregunta-espejo: ¿Mi sitio refleja una estructura ordenada y deliberada, o se siente improvisado? ¿Qué dice eso de mi disciplina?
Luciano Floridi
lente de la infoesferaLa web es un patrimonio informacional común; cada sitio bien construido lo enriquece, cada sitio mal hecho lo erosiona.
— formulación de esta guía, al modo de Luciano Floridi. No es una cita textual.
Pregunta-espejo: ¿Mi sitio enriquece o ensucia el patrimonio digital común? ¿Estoy publicando algo de lo que el internet del futuro se beneficiará?
Nota para el docente. Las tres formulaciones son del autor de la guía, no citas textuales de los pensadores: recogen su lente para pensar el tema, no sus palabras. Si vas a citarlos en clase, remite a la obra original.
Cinco dimensiones que te llevas.
No solo aprendiste un tema. Mira en cinco direcciones lo que esta sesión dejó en ti.
Personal
Aprendiste a ver una página web por dentro: la estructura que sostiene lo que el usuario ve.
Emocional
Sentiste la diferencia entre construir con orden y construir improvisando — y elegiste el orden.
Ciudadana
Entendiste que la accesibilidad no es un extra: es la diferencia entre invitar al Otro o ignorarlo.
Local
Conectaste la lógica de los caminos prehispánicos del Valle con la lógica de un sitio web bien estructurado.
Intergeneracional
Tu HTML será leído por buscadores, lectores de pantalla y archivos del futuro. Construirlo bien es siembra a largo plazo.
Transferencia a tu vida
Esta semana, comparte tu index.html con un compañero por correo. Pídele que lo abra en Chrome y te diga en 1 frase qué entendió de la página. Si esa frase coincide con lo que querías comunicar, tu estructura semántica funciona. El próximo lunes traes ese feedback al aula.
¿Qué te llevás de esta guía?
Escribe en tus propias palabras: qué aprendiste, qué te sorprendió, o cómo conecta con tu vida. Máximo 800 caracteres. No se califica — es para ti.
Inicia sesión para guardar tu reflexión y que quede en tu historial.
Retroalimentación de tu docente
Marca esta guía como completada
Cargando tu progreso…
Envíaselo a quien lo necesite
Tus compañeras y compañeros, padres o profesores pueden abrir esto directamente en su celular sin instalar nada.
Introducción
Activación de conocimientos previos y planteamiento del problema o pregunta orientadora.
Desarrollo conceptual
Explicación de los contenidos de la sesión con ejemplos, recursos visuales y referencias.
Actividad práctica
Ejercicio individual o colaborativo donde aplicas lo aprendido.
Evaluación
Cuestionario interactivo, producto o reflexión escrita para evidenciar el aprendizaje.