COLEGIO PREUNIVERSITARIO DR. RAMÓN A.
CEREIJO — UBA ESCOBAR
Tecnología | 6to año | Python + HTML/CSS + Flask
ACTIVIDAD INTEGRADORA
Aplicación web con Python, Flask y HTML/CSS
1. ¿Qué vamos a construir?
Cada grupo elige una aplicación y la desarrolla en tres etapas. Esta vez van a conectar la lógica Python
con una interfaz web hecha con HTML y CSS, igual que lo que aprendieron el año pasado, usando Flask
como puente entre los dos.
Etapa 1 — Lógica Python Programan la app usando funciones, listas, bucles, condicionales y
pura módulos. Sin interfaz. Solo lógica y consola.
Etapa 2 — La IA como tutor Le pedís a una IA que te explique cómo conectar tu app a Flask.
Documentás el proceso y demostrás qué entendiste. Mínimo 3
prompts documentados.
Etapa 3 — App web Con lo que aprendieron, adaptan la app Python para que corra en el
funcionando navegador con Flask en el back-end y un archivo HTML/CSS en el
front-end.
2. Requisitos técnicos obligatorios
El programa debe incluir al menos uno de cada elemento:
Equivalente
Elemento TP origen Ejemplo Python
Flask/HTML
La misma función,
Función con
TP5 def calcular(a, b): return a+b llamada desde una ruta
parámetros y return
Flask
Lista con 2+ Se pasa al HTML con
TP8 [Link](), len(notas)
operaciones render_template()
Se usa en Python; en
Bucle while o for TP7 for item in lista: HTML con Jinja2: {% for
%}
Condicional En Python o en el
TP6 if nota >= 6: ...
if/elif/else template con {% if %}
Módulo de Python TP4 from random import randint Mismo import en [Link]
HTML (año Flask recibe los datos
Formulario HTML
pasado) con [Link]
3. Ideas de aplicaciones — elegir UNA
Calculadora de promedio Básico TP3, TP5, TP6, TP7, TP8
El usuario ingresa sus notas en un formulario HTML. Flask las recibe, calcula el promedio con una
función Python y devuelve el resultado (aprobado / recuperatorio / desaprobado) en la misma página
con un color diferente según el caso.
Adivinar el número Básico TP4, TP6, TP7
Flask genera un número al azar y lo guarda en la sesión del servidor. El usuario ingresa su intento en un
formulario. En cada envío, Flask responde si el número es mayor, menor o correcto, y muestra la
cantidad de intentos usados.
Consejero de ropa Básico TP3, TP6
Un formulario pide la temperatura y si llueve o no. Flask procesa los datos con condicionales y devuelve
un consejo de vestimenta. El HTML muestra el resultado con íconos o colores distintos según el clima.
Registro de gastos Intermedio TP3, TP5, TP6, TP8
El usuario puede agregar gastos con descripción y monto. Flask los guarda en una lista durante la
sesión y los muestra en una tabla HTML con el total acumulado. Incluye la opción de filtrar por
categoría.
Quiz / Trivia Intermedio TP4, TP5, TP6, TP7, TP8
Flask presenta una pregunta por vez con opciones como botones de radio en el HTML. Guarda el
puntaje en la sesión y al terminar todas las preguntas muestra el resultado final con un mensaje
personalizado según el puntaje obtenido.
Gestor de tareas Intermedio TP3, TP5, TP6, TP7, TP8
El usuario puede agregar tareas, marcarlas como completadas y eliminarlas. Flask mantiene la lista
durante la sesión y el HTML la muestra con estilos distintos para tareas pendientes y completadas,
usando CSS que ya conocen.
4. Etapa 1 — Lógica en Python puro
Desarrollen la aplicación usando input(), print(), funciones, listas, bucles y condicionales. Pruébenla
hasta que funcione correctamente antes de avanzar. Pueden usar Colab o un compilador en línea, pero
vayan guardando el código en un documento.
Recuerden: en esta etapa el programa corre solo en la consola. La interfaz web viene después. Primero tiene que
funcionar la lógica.
5. Etapa 2 — La IA como tutor de programación
Una IA como Claude, ChatGPT o Gemini puede explicarte conceptos, mostrarte código y ayudarte a
entender errores. Pero usar una IA no es lo mismo que copiar y pegar.
Regla de oro de esta actividad
La IA es como un compañero muy conocedor: les puede explicar todo. Si no pueden explicar lo que
les dio, significa que todavía no lo aprendieron.
Tres tipos de prompts que van a necesitar
Prompt 1 — Para aprender: Pidan a la IA que les explique qué es Flask y cómo reemplaza input() y
print(). Ejemplo: "Explicame con un ejemplo sencillo cómo pasar de usar
input() a usar un formulario HTML con Flask en Python."
Prompt 2 — Para adaptar Mostrale a la IA su función principal y pedile que te ayude a conectarla a
su código: Flask. Incluí el código real en el prompt.
Prompt 3 — Para resolver Si algo no funciona o no entienden algo, pregúntenle a la IA. Ejemplo:
un problema: "Este código me da error: [pegar el error]. ¿Qué significa y cómo lo
corrijo?"
6. Lo que tienen que entregar de la Etapa 2
A) Historial de prompts (mínimo 3)
Completen esta tabla con al menos 3 interacciones que tuvieron con la IA:
# Mi pregunta a la IA (prompt) Lo que entendí de la respuesta
B) Explicación del código generado
Por cada bloque de código que hayan obtenido de la IA y usado en su app, escriban con sus propias
palabras qué hace ese bloque. No copien la explicación de la IA.
Ejemplo: si la IA les dio @[Link]('/resultado', methods=['POST']), expliquen en sus palabras para qué sirve esa
línea y por qué es necesaria en su app. Dos o tres oraciones alcanzan.
C) Reflexión final
Al terminar, respondan estas tres preguntas en no más de un párrafo cada una:
1 ¿Qué fue lo más útil que les dijo la IA durante el proceso?
2 ¿Hubo algo que la IA les dijo y que no entendieron o que estaba mal? ¿Qué hicieron?
3 ¿Cómo les parece que van a usar herramientas de IA en el futuro cuando programen?
7. Etapa 3 — App web funcionando con Flask
Con lo que aprendieron usando la IA como tutor, adapten la app Python para que corra en el navegador
usando Flask y un template HTML.
La IA ya les explicó cómo funciona Flask en la Etapa 2. Ahora es el momento de aplicarlo. Si aparece
algún error o algo no funciona, vuelvan a preguntarle a la IA y documenten esa interacción también.
Recordatorio: el código Python de la Etapa 1 no cambia. Solo cambia cómo entra y sale la información: en vez de
input() y print(), van a usar formularios HTML y templates.
8. Publicar la app online — paso a paso
Para que cualquier persona pueda acceder a la app desde el navegador, van a subir el proyecto a GitHub
y desplegarlo en Render (gratuito).
Paso 1 Crear cuenta en GitHub [Link] — gratis con cuenta de mail.
Crear un repositorio nuevo (público), subir [Link],
Paso 2 Subir el proyecto
templates/, static/ y [Link].
Paso 3 Crear cuenta en Render [Link] — iniciar sesión con la cuenta de GitHub.
Click en New → Web Service → conectar el repositorio de
Paso 4 Nuevo Web Service
GitHub.
Build Command: pip install -r [Link] Start
Paso 5 Configurar el deploy
Command: gunicorn app:app
Click en Deploy. En 2-3 minutos Render genera una URL
Paso 6 Deploy
pública como: [Link]
★ BONUS: Personalizá el HTML y el CSS con lo que ya saben del año pasado. Una app con buen diseño
suma en la presentación.
9. Criterios de evaluación
Criterio Puntaje
Lógica Python pura funciona sin errores 20 pts
Usa función, lista, bucle, condicional y módulo 20 pts
Historial de prompts documentado (mínimo 3) 15 pts
Explicación del código con palabras propias 15 pts
App funcionando en el navegador con Flask y HTML 20 pts
Reflexión final sobre el uso de IA 10 pts
Total: 100 pts