Plantillas web — elegir y adaptar sin perderse uno mismo
Eliges una plantilla profesional, la adaptas con tu identidad y la publicas en GitHub Pages. Por primera vez tu marca tiene URL pública.
Antes de la tecnología, este saber.
Los oficios heredados se aprenden con moldes: la receta de la abuela, el corte del sastre, el patrón del tejedor, las décimas del Pacífico. El maestro no enseña con palabras: enseña con un molde que el aprendiz debe usar primero igual, y después adaptar a su mano. Lo que cambia es la firma; lo que se conserva es la estructura.
¿Qué se mantiene y qué cambia cuando tú haces la receta de tu abuela? ¿Qué la sigue convirtiendo en esa receta y no en una copia genérica?
Las plantillas son moldes profesionales que aceleran tu trabajo. Usarlas tal cual te invisibiliza; adaptarlas con tu identidad —tus colores, tu copy, tus historias— es un acto pequeño de soberanía digital. Hoy tu marca pasa de archivo local a URL pública.
"Si dos personas usan la misma plantilla, ¿en qué se va a notar que un sitio es tuyo y el otro de otra persona?"
Esto vas a recorrer hoy.
- 1
El molde y la firma
8 min - 2
Tres plantillas comparadas
15 min - 3
Anatomía de una buena adaptación
15 min - 4
Adapta y publica tu sitio
45 min - 5
Verifica, reflexiona y cierra
17 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.
El mismo molde, distinta firma
En 4 minutos abre 3 sitios de tu universidad o colegio que evidentemente usan la misma plantilla. Anota qué se nota igual y qué se nota distinto en cada uno. Esa diferencia es lo que vas a buscar en tu propia adaptación.
4 minEn la sesión 3 construiste el index.html con estructura semántica clara: la casa digital ya tenía planos.
En la sesión 5 usarás IA para redactar el copy comercial de tu sitio: inicio, servicios, preguntas frecuentes.
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.
🧰 Las 4 decisiones de adaptación
- 🏛
Conservar
Lo que se queda igual: estructura semántica, layout principal, sistema de grilla. No reinventes la rueda — eso es lo que te da la plantilla.
Ej. Si la plantilla tiene un layout de 3 columnas para servicios, consérvalo. Es el esqueleto probado.
- ✏️
Cambiar
Lo que se personaliza: paleta y tipografía a las tuyas (Guía 2), copy a tu voz, fotos por imágenes reales tuyas.
Ej. El azul tech de la plantilla por tu naranja Valle. El "Welcome to my site!" por tu propuesta de valor.
- ✨
Agregar
Un detalle único de tu marca que no estaba en la plantilla: un símbolo, un microcopy, una sección propia, un easter egg.
Ej. Una pequeña sección "Por qué Cartago" o un microcopy en español del Valle que ninguna plantilla traerá nunca.
- 🗑
Eliminar
Las secciones genéricas que la plantilla trae y tú no necesitas. Menos es más — eliminar lo que sobra acelera la lectura del visitante.
Ej. Si la plantilla trae 6 secciones y tú solo necesitas 3, borra las otras 3. No las dejes "por si acaso".
🚀 Despliegue público
- 🌐
GitHub Pages
Servicio gratuito de GitHub que publica los archivos de un repositorio como sitio web público con URL fija.
Ej. Tu repo "tunombre.github.io" se publica automáticamente como tunombre.github.io. Cualquiera con internet lo abre.
- ⚖️
Patrón 70-20-10
Proporción saludable de una buena adaptación: ~70% queda como la plantilla (estructura), ~20% se personaliza (colores, copy), ~10% se agrega o quita.
Ej. Si cambias el 80%, rompes la coherencia de la plantilla. Si cambias el 5%, no se nota que es tuya.
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.
Tres plantillas, qué tienen en común
- Visita 3 sitios construidos sobre plantillas: catálogos de GitHub Pages templates, Carrd showcase o Astro themes.
- Para cada plantilla: ¿qué partes son intercambiables (logo, paleta, tipografía, fotos)?
- Para cada plantilla: ¿qué partes son estructura fija (orden de secciones, jerarquía)?
- Toma nota del nombre y URL de la plantilla que más se acerca a tu marca.
- Título:
- «Actividad 1 — Tres plantillas comparadas»
- Formato:
- Tabla 4 columnas (Plantilla | URL | Partes intercambiables | Partes fijas), 3 filas. Al final 1 párrafo justificando tu elección.
- Extensión:
- 3 filas + 1 párrafo de 3-4 renglones
- Las 3 plantillas son de catálogos distintos
- Cada celda nombra elementos concretos
- La plantilla elegida es coherente con tu paleta y tipografía de la Guía 2
- La justificación menciona al menos un elemento de tu manifiesto
Plan de adaptación de tu plantilla
- Toma la plantilla elegida y divídela mentalmente en 4 columnas: Conservar · Cambiar · Agregar · Eliminar.
- En Conservar lista 3-5 elementos estructurales que te quedas como vinieron.
- En Cambiar lista 3-5 elementos específicos a reemplazar (color X por color Y, copy genérico por tu copy).
- En Agregar y Eliminar lista lo único de tu marca y lo que sobra.
- Título:
- «Actividad 2 — Plan de adaptación de mi plantilla»
- Formato:
- Tabla de 4 columnas (Conservar | Cambiar | Agregar | Eliminar), 3-5 elementos por columna
- Extensión:
- 4 columnas, 3-5 ítems por columna
- Cada ítem es concreto: "el azul #0066FF del navbar por mi naranja #FF6B35", no "el color"
- Las 4 columnas tienen contenido —ninguna queda vacía
- Hay al menos 1 elemento único en "Agregar" que no estaba en la plantilla
- Las decisiones son coherentes con tu paleta y tipografía de la Guía 2
Publica tu sitio adaptado
- Haz fork de la plantilla elegida a tu cuenta de GitHub.
- Clona el repo local, ábrelo en VS Code y cambia paleta + tipografía a las tuyas (CSS variables o archivo de tema).
- Reemplaza todo el copy y las fotos placeholder por contenido real tuyo.
- Commit + push. Settings → Pages → main branch → save. Espera 1-2 min y abre la URL pública.
- Verifica en móvil con DevTools a 360 px y en pestaña incógnita.
- Título:
- «Actividad 3 — Mi sitio publicado»
- Formato:
- (1) URL pública en grande arriba. (2) Tabla de cambios aplicados. (3) Captura impresa o dibujada del home.
- Extensión:
- URL + tabla + captura — 1 página
- La URL pública es accesible para cualquiera con internet
- Cero contenido placeholder: ni "Lorem ipsum", ni "John Doe", ni fotos de stock
- La paleta y tipografía coinciden con tu sistema visual (Guía 2)
- Se ve y navega bien en móvil
- Hay al menos UN detalle único que no estaba en la plantilla original
Evalúa el sitio publicado de un compañero
- Intercambia URLs con un compañero. Abre la suya en pestaña incógnita en móvil (DevTools 360 px).
- Califica del 1 al 5: (a) ¿se nota su marca o parece la plantilla genérica?, (b) ¿el copy es propio y específico?, (c) ¿se ve bien en móvil?
- Escribe 1 observación que afirma (qué hace única su versión) y 1 que reta (qué todavía se siente plantilla).
- Conversen 5 minutos sin defenderse — solo escuchar.
- Título:
- «Actividad 4 — Evaluación del sitio publicado 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 un detalle único concreto
- La observación que reta menciona algo específico que todavía se siente plantilla
- Verificaste el sitio en móvil real o emulado, no solo desktop
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 los principios de adaptación
5 preguntas para confirmar que distingues adaptar de copiar antes de publicar. Necesitas 3/5 para continuar.
- 1 En el patrón 70-20-10 de adaptación, ¿qué representa el 70%?
- 2 ¿Cuál es el error más grave al usar una plantilla?
- 3 Si dos personas usan la misma plantilla, ¿qué hace que un sitio sea reconocible como tuyo?
- 4 ¿Qué es GitHub Pages?
- 5 En el saber ancestral del molde y la firma, ¿qué aplica directamente a adaptar una plantilla?
¡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 nosotrosEl sur global piensa desde su propia herida y desde ahí ofrece mundo.
— formulación de esta guía, al modo de Enrique Dussel. No es una cita textual.
Pregunta-espejo: ¿Mi sitio publicado se siente como un sitio del Valle o como un clon de plantilla global? ¿Qué señales locales le agregué?
Epicteto
lente del cuidado interiorAlgunas cosas dependen de nosotros y otras no — distinguir esto es la libertad.
— formulación de esta guía, al modo de Epicteto. No es una cita textual.
Pregunta-espejo: ¿Estoy ejerciendo mi libertad sobre la plantilla, o me dejé llevar por todo lo que venía? ¿Qué partes son auténticamente mías?
Luciano Floridi
lente de la infoesferaLa estandarización facilita la cooperación; la diversidad sostiene la riqueza informacional.
— formulación de esta guía, al modo de Luciano Floridi. No es una cita textual.
Pregunta-espejo: ¿Mi adaptación aporta diversidad a la infoesfera o solo replica un patrón estándar? ¿Qué de mi sitio enriquece el panorama digital común?
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
Pasaste de tener una marca en cuaderno a tener una marca con URL pública: tu primera presencia real en la web.
Emocional
Sentiste lo que cuesta publicar algo público y la satisfacción de hacerlo con criterio, no improvisando.
Ciudadana
Te sumaste a la infoesfera pública aportando un sitio propio en vez de un clon más de plantilla genérica.
Local
Llevaste señales del Valle —colores, copy en español de Colombia, referencias locales— a un molde diseñado en otra parte.
Intergeneracional
Tu URL queda en internet — los archivos del futuro la leerán. Es tu primera huella permanente en la web.
Transferencia a tu vida
Esta semana, comparte tu URL pública con 3 personas: un familiar, un compañero, un docente. Pídele a cada uno UNA observación. No discutas las observaciones: anótalas tal cual. La próxima guía empezamos con esas tres voces externas como insumo de redacción.
¿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.