Cómo llevar la propuesta visual de ruta-python-preview al repo real
HOJA_RUTA_PYTHON_COLOMBIA.
Esto es una referencia de dirección, no un componente para copiar y pegar tal cual — el sitio actual no usa build step ni frameworks (HTML/CSS/JS vanilla), así que la idea es mantener esa simplicidad.
Esta ruta va a estar vinculada al sitio oficial python.org.co —
eso mueve la paleta y la tipografía de "lo que nos pareció lindo" a "lo que ya usa la marca de la comunidad". La v1 de este mockup
usaba una paleta propia (azul/amarillo pastel, tipografía redondeada Fredoka); esta versión hereda los valores reales
del sitio oficial, verificados con getComputedStyle sobre la página en vivo, no inventados a ojo.
También cambió el marco conceptual del selector de audiencia. La primera versión lo presentaba como dos caminos paralelos ("Nunca programé" / "Ya tengo bases"), y eso se leyó — con razón — como si fuera un producto separado del contenido que ya armaron Leo y Angel. El ajuste: es una sola ruta con un solo punto de llegada (formar gente para desempeñarse profesionalmente en la industria tech); el selector no bifurca el sitio, elige en qué escalón de esa misma escalera arranca cada persona. Mismo shell, mismo nav, misma identidad — lo que cambia con el nivel es la densidad de scaffolding y el tono del copy en cada fase, no el sistema de diseño.
El objetivo es hacer la página más accesible para gente que nunca programó, sin perder la profundidad técnica que ya tiene para quien sigue el track completo, y sin crear una identidad visual paralela a la del sitio oficial. Se toca principalmente:
styles.css) — ahora heredados de python.org.coheader.hero: pasa de un título + párrafo a un hero con selector de punto de partida#principios y #ruta: pasan de texto plano a tarjetas con ícono y badges de estado#checklist): se agrega una vista de progreso por bloques arriba de la lista existenteNo se toca: #modulos (las fichas técnicas de Fase 3/4), #py5tabla, #docs-oficiales, #practica, #hitos ni la lógica de app.js — son contenido denso para quien ya está en el track, no hace falta "gamificarlos".
Estos valores se sacaron con getComputedStyle directo sobre el sitio oficial en vivo (no son una estimación visual), para que lo que se proponga acá sea trazable a la fuente real:
| Token | Valor | Uso en python.org.co |
|---|---|---|
--bg | #0D0D1A | body background |
--bg-panel | #16162E | fondo de tarjetas de comunidad |
--text | #F4F4F5 | texto de body |
--accent-yellow | #FFD43B | botón primario ("Únete a la comunidad") — el amarillo de marca de Python |
--accent-blue | #4B8BBE | subheadline ("¡Aprende, comparte y crece!") — el azul de marca de Python |
--accent-green | #2FB350 | botón secundario ("Próximos eventos") |
--radius | 0px | todo el sitio — botones, tarjetas, chips del mapa. Nada de esquinas redondeadas. |
Estos seis colores forman la franja arcoíris que corre arriba del sitio oficial (guiño a los colores de la comunidad Python), y el mockup la reutiliza como elemento decorativo — es el gesto más directo de "somos parte de la misma familia":
rgba(244,244,245,0.6) sobre #0D0D1A
da contraste sobrado (fondo casi negro + texto casi blanco), pero si en algún componente se usa un gris más apagado,
conviene chequearlo — ya nos pasó en la v1 con #9A9384 sobre fondo claro (2.9:1, no pasaba WCAG AA).
El sitio actual (HOJA_RUTA_PYTHON_COLOMBIA) usa la pila del sistema (-apple-system, "Segoe UI", Arial...) — cero dependencias externas. El sitio oficial sí carga una fuente de Google Fonts en todo el sitio, título y cuerpo por igual:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap">Como esta ruta se vincula al sitio oficial, tiene más sentido heredar esta fuente que traer una propia — es la misma decisión de identidad que la paleta de colores. Sigue siendo una dependencia externa nueva para HOJA_RUTA_PYTHON_COLOMBIA, así que vale confirmarlo con Leo y Angel, pero al menos ya no es una tercera fuente inventada, es la que ya usa la comunidad.
index.html líneas 60–76Hoy es <h1>Empeza por la guia, no por el repo</h1> + un párrafo. La propuesta:
Ver la estructura completa en index.html de este repo (sección #view-desktop) — es HTML/CSS plano, se puede copiar el bloque del hero directo.
#ruta — líneas 109–177Los datos ya existen tal cual en el HTML actual (número de fase, nombre, descripción, horas/semanas/herramienta, badge de estado). Lo que cambia es solo presentación:
Fase previa → verde #2FB350, Estas aca → amarillo #FFD43B destacado, Proximo → azul #4B8BBE, Por definir → borde punteado gris translúcido#checklist, línea 774app.js ya persiste el progreso en localStorage y expone el contador "X / 70 completados" — la lógica no cambia. Lo que se agrega es una capa visual arriba de la lista existente:
app.js exponga el conteo por bloque, no solo el total; hoy probablemente ya lo tiene internamente ya que cada bloque tiene su propio 0 / N en el DOMTodo el mockup usa SVG inline (stroke, grilla de 24px, sin emojis) para que escalen y hereden color con currentColor/stroke. Puedes copiar los <svg> directo de index.html — no dependen de una librería de íconos externa.
El mockup incluye una vista mobile completa (ver toggle "Vista Mobile" en index.html). El sitio actual ya tiene su propio manejo de sidebar responsive (sidebar-fab, sidebar-overlay según DOCUMENTACION.md) — esa lógica de apertura/cierre no debería tocarse, solo el contenido interno de cada sección en breakpoints angostos.
Mirando cómo CS50 (Harvard/Yale/Oxford, con David Malan) separa la clase densa de la referencia rápida que el estudiante deja abierta mientras programa, armamos un piloto de formato: Cheat sheet — Fase 3, Tema 1: Coordenadas y gráficos. No es una idea que reemplaza la ficha de módulo — es una pieza nueva, corta, por Tema, pensada para consulta durante la práctica, no para leer una vez.
La sintaxis py5 de esa cheat sheet está sacada directo de #py5tabla del sitio actual (no inventada) — incluye el aviso de qué funciones cambian a snake_case (beginShape() → begin_shape()) y cuáles quedan idénticas entre Processing y py5.
Segunda pieza del scaffolding, ya pilotada: Short — "El lienzo no es una hoja de papel", sobre el mismo Tema 1. Un Short en CS50 es un video de 5-10 min sobre UNA sola idea — como no podemos producir video desde acá, el piloto es el storyboard + guion de locución completo (4 frames, ~4 min), listo para que alguien lo grabe, más una versión leíble mientras tanto. La idea elegida para este piloto — que el origen está arriba-izquierda y Y crece hacia abajo — es a propósito la misma que la cheat sheet marca como "el error mental más común": un Short no reemplaza la referencia, la antecede.
Tercera pieza, ya pilotada sobre Tema 2 (Condicionales if): Short — "Tu código elige un camino".
Misma lógica de una sola idea por Short: acá la idea es que un if es una bifurcación visual (color A o color B, nunca los dos), con la sangría como el truco mental central — el error más común al entrar a control de flujo en Python. Cierra conectando con el proyecto real P2.A ("Cuatro cuadrantes"), para que quede claro que el Short prepara el terreno del proyecto, no lo reemplaza.
Cuarta pieza, sobre Tema 3 (Bucles for y while): Short — "El bucle necesita saber cuándo parar".
La idea acá es la trampa mental más común al entrar a iteración: un while cuya condición nunca cambia se cuelga para siempre — el contenido original de Fase 3 ya nombra esto explícitamente ("prevención de bucles infinitos"), así que el Short no inventa el riesgo, lo hace visible. Cierra mostrando por qué for con range() es más seguro por defecto, y conecta con P3.A/P3.B (patrones y mosaico Truchet), que son básicamente bucles anidados sobre esta misma idea.
Si el formato funciona, el patrón se repite por cada Tema de cada fase.
La ruta y todo su contenido pedagógico son obra de Leo y Angel, quienes vienen impulsando el proyecto — este mockup es solo una propuesta de forma, no de fondo.