100 Días de Código en Python — Día 56: Plantillas HTML, archivos estáticos y tu tarjeta de presentación web

📝 Contenido original del curso#

Hoy se aprende a incluir archivos estáticos (imágenes, videos, CSS) y a renderizar archivos HTML completos desde Flask, como los que hiciste en los Días 41 a 44. El resultado del día: una tarjeta de presentación personal en la web. "Es el siglo XXI": en lugar de entregar tarjetas de papel, puedes tener un sitio con tu nombre, tus enlaces y tus datos de contacto.

Prerequisitos: Flask con rutas y modo de depuración (Días 54 y 55), HTML y CSS (Días 41 a 44), herramientas de desarrollo de Chrome (Día 45), línea de comandos (Día 54).

📖 Privacidad en tu tarjeta (adaptación)#

Una tarjeta en la web es pública. Para un estudiante, lo prudente es:

Mientras el servidor corra en 127.0.0.1, nadie más lo ve. Pero piensa desde ya en lo que publicarías.

🎯 Objetivo de aprendizaje#

Servir un archivo HTML completo desde Flask usando la carpeta templates y render_template.

📝 Contenido original del curso#

La profesora crea un proyecto my-personal-site con un archivo server.py y pide repasar la aplicación mínima (importar Flask, crear app, la ruta /, if __name__ == "__main__": app.run(debug=True)).

Luego crea index.html (el editor agrega el esqueleto: DOCTYPE, html, head, body), le pone un <title> y un <h1>. Para mostrarlo, según el Quickstart de Flask:

1. Flask es un framework: pone reglas. Las plantillas HTML deben estar en una carpeta llamada templates (en minúsculas).
2. Se importa render_template y se devuelve su resultado:

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def home():
    return render_template("index.html")


if __name__ == "__main__":
    app.run(debug=True)

Reto del video: tomar un sitio propio de los Días 41 y 42 (o el CV sencillo que ofrece el curso), guardarlo como HTML y servirlo con Flask. Si lo descargas de GitHub, puede tener extensión .htm: es lo mismo que .html (algunos servidores antiguos no aceptaban extensiones de cuatro letras); cámbiala y acorta el nombre (por ejemplo, angela.html). Si el archivo estuviera en una subcarpeta, la ruta se escribe completa: render_template("cv/angela.html").

Al renderizar el CV, todo aparece… menos la foto. Para eso hay que aprender a servir archivos estáticos.

📖 Estructura de un proyecto Flask#

my-personal-site/
├── server.py
├── templates/          ← archivos .html (render_template los busca aquí)
│   └── index.html
└── static/             ← CSS, imágenes, JavaScript, videos (sección 2)
    ├── css/
    │   └── styles.css
    └── images/
        └── foto.png

templates y static se buscan junto al módulo de tu aplicación: por eso se pasa __name__ a Flask(...) (Día 54).

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: sirve tu sitio de los Días 41 y 42 en la ruta /.
• 🟡 Reto 2 — Ampliación: agrega una segunda plantilla contacto.html en la ruta /contacto y enlaza las dos páginas entre sí.
• 🟠 Reto 3 — Desafío: organiza tres plantillas en subcarpetas (templates/paginas/...) y sírvelas con rutas distintas.
• 🔴 Reto 4 — Pensamiento computacional: ¿qué diferencia hay entre abrir index.html con doble clic y verlo en http://127.0.0.1:5000/? Compara la barra de direcciones, quién entrega el archivo y qué pasa si otra persona en la red intenta abrir cada uno.

🎯 Objetivo de aprendizaje#

Usar la carpeta static para imágenes y CSS, enlazarlos desde las plantillas y entender la caché del navegador.

📝 Contenido original del curso#

En la Consola de las herramientas de desarrollo aparecen errores 404 para styles.css y angela.png: el navegador los pide y el servidor no los encuentra. Aunque pongas la imagen junto al HTML, sigue sin aparecer. La razón: igual que las plantillas van en templates, Flask busca los archivos estáticos en una carpeta llamada static. "Ellos hicieron el framework, ellos hicieron las reglas".

Con la imagen en static/, la etiqueta queda:

<img src="static/angela.png" alt="Foto de Angela">

"Nueve de cada diez veces" un proyecto Flask tendrá las carpetas templates y static.

Reto del video: crear static/styles.css que ponga el fondo del body en morado, y enlazarlo en el <head>:

body {
    background-color: purple;
}

<link rel="stylesheet" href="static/styles.css">

La caché de Chrome. La profesora cambia el color a rojo, guarda, reinicia el servidor… y sigue morado. En las herramientas de desarrollo, Fuentes muestra la versión vieja de styles.css. Chrome guarda en caché los archivos estáticos (CSS, imágenes, JavaScript) para ahorrar datos, porque es raro que un sitio los cambie en el mismo día. La solución: una recarga forzada, manteniendo Mayús y pulsando el botón de recargar.

📖 Recarga forzada: atajos (adaptación)#

🛠️ Nota técnica (Flask 3.1, verificado): en versiones antiguas, Flask pedía al navegador guardar los estáticos durante 12 horas, y por eso el video necesitaba la recarga forzada. Desde Flask 2.0, responde con Cache-Control: no-cache y una etiqueta ETag: el navegador pregunta en cada visita si el archivo cambió (si no, recibe un rápido 304 Not Modified). Por eso hoy es menos frecuente ver el CSS viejo. Aun así, la recarga forzada sigue siendo el primer paso cuando "no se ve el cambio", sobre todo con otros servidores o con extensiones del navegador.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega tu imagen (o un avatar) y una hoja de estilos con un color de fondo y una fuente de Google Fonts.
• 🟡 Reto 2: abre la pestaña Red y recarga. Anota el código de estado de cada archivo (200, 304, 404). Luego haz una recarga forzada y compara.
• 🟠 Reto 3: agrega un favicon (static/favicon.ico o .png) con <link rel="icon" href="...">.
• 🔴 Reto 4: mide cuánto pesan tus imágenes (pestaña Red, columna Tamaño). Si alguna pasa de 500 KB, redúcela y compara el tiempo de carga. ¿Por qué importa en un celular con pocos datos?

🎯 Objetivo de aprendizaje#

Elegir la forma de escribir la ruta de un archivo estático que funcione en todas las páginas del sitio.

📖 Explicación conceptual#

El curso escribe src="static/angela.png", sin barra al inicio. Es una ruta relativa: el navegador la completa a partir de la dirección de la página actual. Funciona en /, pero observa qué pasa en una página más profunda (verificado con Flask 3.1):

Tres formas de escribir la ruta:

url_for es una función de las plantillas de Flask (verificado: genera /static/css/styles.css). Las llaves dobles {{ }} son sintaxis de Jinja, que estudiarás a fondo el Día 57. Por hoy basta con saber que Flask la reemplaza por la ruta correcta al renderizar.

🛠️ Nota técnica: las rutas dentro de un archivo CSS (por ejemplo, url("images/bg.jpg")) son relativas al archivo CSS, no a la página. Por eso, al mover una plantilla completa a static/, las imágenes de fondo definidas en el CSS siguen funcionando sin cambios, y solo hay que corregir las rutas del HTML.

🎯 Objetivo de aprendizaje#

Adaptar una plantilla HTML/CSS profesional a un proyecto Flask, respetando su licencia.

📝 Contenido original del curso#

Primer reto: servir con Flask el sitio personal (con CSS, imágenes, GIF y favicon) que se ofrece como archivo ZIP en los recursos. Pasos:

1. index.html va a templates; todo lo demás (CSS, favicon, carpeta de imágenes) va a static.
2. El server.py no cambia: sigue renderizando index.html.
3. En el HTML, cada ruta a un archivo local debe incluir static/. Un atajo: Buscar y reemplazar (Ctrl + R en PyCharm) images/ → static/images/.

Plantillas gratuitas. Sitios como HTML5 UP ofrecen plantillas atractivas. La profesora descarga Paradigm Shift:

• Gratis, pero hay que dar crédito al diseñador. Para uso comercial sin atribución, el diseñador ofrece una opción paga de 19 dólares con todas sus plantillas y soporte. Compáralo con servicios como Squarespace: 10 a 30 dólares al mes.
• Las imágenes de la demostración no vienen en la descarga (el diseñador no tiene derechos para distribuirlas): vienen degradados de reemplazo.
• Mover index.html a templates y las carpetas images y assets a static; luego reemplazar images/ → static/images/ y assets/ → static/assets/.

Editar la plantilla en vivo. En la Consola de Chrome:

document.body.contentEditable = true

(En JavaScript, true va en minúscula.) Ahora puedes escribir directamente sobre la página; con la herramienta de selección de las herramientas de desarrollo puedes borrar secciones completas con la tecla Retroceso. Pero al recargar todo se pierde, porque el navegador vuelve a pedir el archivo al servidor. Para conservar los cambios: guardar la página (Ctrl + S), mover ese HTML a templates y reemplazar el anterior.

📖 Licencias: gratis no significa "sin reglas" (adaptación)#

Las plantillas de HTML5 UP usan la licencia Creative Commons Attribution 3.0 (verificado en html5up.net): puedes usarlas, modificarlas y hasta venderlas, siempre que des crédito al autor. Por eso, en la solución del proyecto, la profesora deja el pie de página con el crédito. La opción paga que menciona el video corresponde a Pixelarity, el servicio de pago del mismo autor (enlazado desde html5up.net).

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: descarga una plantilla de html5up.net, identifica su archivo de licencia (LICENSE.txt) y resume en dos líneas qué te permite hacer.
• 🟡 Reto 2: sírvela con Flask usando url_for (sección 3) en lugar de static/ relativo.
• 🟠 Reto 3: con contentEditable, simplifica la plantilla a tres secciones, guárdala y deja la versión final en templates. Compara el número de líneas antes y después.
• 🔴 Reto 4: escribe una lista de verificación para "adoptar una plantilla" en cualquier proyecto futuro (licencia, estructura de carpetas, rutas, imágenes de reemplazo, crédito, privacidad).

📝 Ejercicio original del curso#

Crear una tarjeta de presentación en la web con una plantilla de HTML5 UP, "como las de papel, pero mejor".

1. Descarga la plantilla Identity de los recursos de la lección (o elige otra en html5up.net, como Astral o Ethereal).
2. Crea un proyecto name-card con una aplicación Flask desde cero.
3. Crea las carpetas necesarias y mueve los archivos de la descarga.
4. Haz que el sitio funcione en la ruta raíz (/).
5. Personalízalo: cambia la imagen de fondo, el texto y los enlaces. Hazlo tuyo.

El recorrido de la solución (lección 405):

• Servidor Flask con la ruta / y modo de depuración; carpetas templates y static; index.html a templates, assets e images a static.
• Si otro proyecto sigue corriendo en la misma dirección, aparece "la dirección ya está en uso": detenlo primero.
• Sin estilos al principio → reemplazar assets/ por static/assets/ e images/ por static/images/.
• Si aparece el CSS de la plantilla anterior, es la caché → recarga forzada.
• Cambiar el <h1>, los href de las redes sociales y el pie de página, dejando el crédito a HTML5 UP porque se usa gratis.
• La foto del avatar desapareció porque el reemplazo se hizo sin la barra final; al corregirlo, reemplazar el avatar por una foto propia.
• Fondo: descargar una foto de Unsplash, renombrarla igual que la original (bg.jpg) y reemplazarla. Así no hay que tocar main.css, que ya la usa bajo un degradado.
• Por último, cambiar el <title>.

🛠️ Nota técnica (verificado el 27/09/2026): la plantilla Identity ya no aparece en el catálogo de html5up.net (su página devuelve 404); solo está en el ZIP de los recursos del curso. Si no tienes acceso a ese ZIP, Aerial (html5up.net/aerial) es una tarjeta de presentación muy parecida y se descarga sin problema. En Aerial, index.html solo enlaza assets/css/main.css y assets/css/noscript.css, y el fondo bg.jpg está en assets/css/images/: como está referenciado desde el CSS, basta con mover la carpeta assets a static y corregir dos rutas del HTML (sección 3).

Problema y contexto#

Necesitas presentarte (a un club, en una feria, en una hoja de vida) con un enlace en lugar de un papel, sin diseñar todo desde cero.

🔍 Antes de programar#

• ¿Qué archivos de la descarga son plantillas y cuáles son estáticos?
• ¿Cuántas rutas hay que corregir en el HTML? (Búscalas antes de reemplazar.)
• ¿Qué datos personales vas a mostrar y cuáles no? (Sección 0.)
• ¿De dónde saldrá tu imagen de fondo y qué licencia tiene?

Requisitos funcionales#

1. El sitio carga en / con todos sus estilos e imágenes (ningún 404 en la Consola).
2. Tu nombre (o seudónimo), una descripción corta y al menos dos enlaces reales (GitHub, portafolio, sitio del grupo).
3. Imagen de fondo propia con licencia libre.
4. El crédito a HTML5 UP en el pie de página.

Restricciones técnicas#

• Rutas de estáticos absolutas (/static/...) o con url_for.
• Nombres de archivos en minúsculas y sin espacios.
• Nada de datos personales sensibles.

Planificación#

1. Comprender la estructura de la plantilla. 2. Entradas: la plantilla, tus textos, tus imágenes. 3. Procesos: mover archivos → corregir rutas → personalizar. 4. Salida: la tarjeta en /. 5. Dividir en esos tres pasos. 6. Diseñar el contenido en papel (qué dirá cada sección). 7. Implementar. 8. Probar (Consola sin 404). 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1: server.py que renderiza index.html (se ve sin estilos).
• Versión 2: rutas corregidas; se ve igual que la demostración.
• Versión 3: textos y enlaces propios.
• Versión 4: avatar y fondo propios.
• Versión final: <title>, favicon y revisión de privacidad.

Pruebas#

🧪 Prueba y depuración#

name-card/
├── server.py
├── template/
│   └── index.html
└── static/
    └── assets/
        └── css/main.css

<link rel="stylesheet" href="assets/css/main.css" />
<img src="static/images/Avatar.JPG" alt="">

Encuentra cuatro problemas: la carpeta se llama template (sin s), la ruta del CSS no incluye static, la imagen apunta a static/images/ pero en la estructura no existe esa carpeta (y el nombre tiene mayúsculas), y el alt está vacío en una imagen que sí aporta información.

⭐ Extensión del proyecto#

• Una segunda ruta /proyectos con otra plantilla que muestre tres de tus proyectos del curso.
• Un código QR (con la biblioteca qrcode) que apunte a tu tarjeta, para imprimirlo.

Situación#

El colegio organiza una feria de ciencias con 8 proyectos. La coordinación quiere una página por proyecto y una portada, servidas desde el computador de la sala de informática durante la feria.

Requisitos#

1. Elige una plantilla de html5up.net distinta de la del proyecto del día y justifica la elección (licencia, estructura, cómo se ve en celular).
2. Una portada en / y una ruta /proyecto/<int:numero> que renderice la misma plantilla proyecto.html para los 8 proyectos. (Hoy puedes hacer 8 archivos HTML o elegir el archivo según el número; mañana, con Jinja, bastará con uno y los datos en Python.)
3. Todas las imágenes en static/ con licencia libre y un archivo CREDITOS.md que diga de dónde salió cada una.
4. Rutas estáticas con url_for o absolutas.

Decisiones que debes tomar (y justificar)#

• ¿Qué haces si alguien visita /proyecto/9?
• ¿Cuánto pesan todas las imágenes juntas? ¿Se cargarán bien en 30 celulares a la vez por el wifi del colegio?

Casos de prueba#

• Las 8 páginas cargan sin 404 en la Consola.
• /proyecto/9 y /proyecto/abc muestran un mensaje o un 404, no el depurador.

Conceptuales#

1. ¿Qué va en la carpeta templates y qué en static? ¿Por qué Flask exige esos nombres?
2. ¿Qué hace render_template("index.html")?
3. ¿Por qué static/styles.css (sin barra) falla en la página /blog/post?
4. ¿Qué es la caché del navegador y cómo la saltas?
5. ¿Qué te pide la licencia Creative Commons Attribution?

Análisis de código#

@app.route("/")
def home():
    return render_template("templates/index.html")

¿Funciona? ¿Qué error aparece y por qué?

Predicción#

Tu página está en http://127.0.0.1:5000/galeria/2024 y tiene <img src="static/img/foto.jpg">. ¿Qué URL pedirá el navegador? ¿Y con src="/static/img/foto.jpg"?

Depuración#

Un compañero dice: "Cambié el color en styles.css, guardé, reinicié el servidor y no cambia nada". Escribe, en orden, cuatro cosas que revisarías.

Modificación#

Cambia el proyecto del día para que la tarjeta tenga dos idiomas: / en español y /en en inglés, cada uno con su plantilla, compartiendo los mismos estáticos.

Creación#

Desde la terminal (Día 54), crea la estructura completa de un proyecto Flask (server.py, templates/index.html, static/css/styles.css) y haz que muestre un <h1> centrado con fondo de tu color favorito.