La siguiente es una guía como un bloque formativo de 3 semanas, 6 sesiones de 2 horas, pensado para estudiantes que vienen de Google Colab y comienzan desde cero absoluto con VSCode + Python + Streamlit + GitHub + Streamlit Community Cloud. Puede ubicarse al inicio del semestre 2026-1, teniendo presente que el calendario académico registra inicio de clases el 09 de febrero de 2026 y primer reporte del 50% para asignaturas de 16 semanas entre el 06 y el 15 de abril de 2026.

La ruta está ajustada a la documentación oficial vigente: Streamlit recomienda trabajar localmente con venv y pip, soporta Python 3.10 a 3.14, y permite ejecutar aplicaciones con streamlit run app.py o python -m streamlit run app.py. (Streamlit Docs) Para aplicaciones multipágina, se trabajarán dos enfoques: el tradicional mediante carpeta pages/ y el enfoque más flexible con st.Page y st.navigation, que la documentación presenta como el método preferido para definir navegación personalizada. (Streamlit Docs)

Guía de tres semanas: Desarrollo de aplicaciones web con Streamlit desde VSCode

1. Propósito general

Desarrollar progresivamente una aplicación web en Python usando Streamlit, iniciando con aplicaciones simples de una sola página, avanzando hacia aplicaciones multipágina y finalizando con el despliegue público en Streamlit Community Cloud.

2. Competencias a desarrollar

Al finalizar las tres semanas, el estudiante estará en capacidad de:

Configurar un entorno local de desarrollo con VSCode, Python, entorno virtual .venv y Streamlit.
Crear aplicaciones interactivas sencillas usando entradas, salidas, métricas, tablas y gráficos.
Organizar una aplicación Streamlit en estructura multipágina.
Usar Git y GitHub para versionar y publicar el código fuente.
Desplegar una aplicación funcional en Streamlit Community Cloud.
Documentar el proyecto mediante README.md, requirements.txt y comentarios claros en el código.

3. Producto final esperado

Cada grupo deberá entregar:

Repositorio en GitHub.
Aplicación Streamlit funcional.
Archivo requirements.txt.
Archivo README.md.
Enlace público de la aplicación en Streamlit Community Cloud.
Capturas de pantalla del proceso: entorno local, ejecución en VSCode, repositorio en GitHub y app desplegada.

Semana 1: Primer contacto con VSCode, entorno virtual y Streamlit

Sesión 1 — Instalación, entorno virtual y primera app

Duración: 2 horas Tema central: Pasar de Colab al desarrollo local con VSCode.

Objetivo de la sesión

Crear desde cero un proyecto local en VSCode, configurar un entorno virtual .venv, instalar Streamlit y ejecutar la primera aplicación.

Contenidos

Qué es una aplicación web.
Diferencia entre Notebook y aplicación web.
Qué es Streamlit.
Qué es VSCode.
Qué es un entorno virtual.
Instalación de Streamlit dentro del entorno virtual.
Ejecución local de una app con streamlit run.

Desarrollo sugerido de la sesión

Tiempo	Actividad
0–15 min	Explicación conceptual: de Google Colab a VSCode.
15–35 min	Crear carpeta del proyecto en `C:\`.
35–60 min	Abrir carpeta en VSCode y crear entorno virtual.
60–80 min	Activar `.venv` e instalar Streamlit.
80–105 min	Crear `app.py` y ejecutar la primera aplicación.
105–120 min	Cierre, preguntas y verificación individual.

Comandos base en PowerShell de VSCode

cd C:\

mkdir primera_app_streamlit
cd primera_app_streamlit

python -m venv .venv

.venv\Scripts\Activate.ps1

python -m pip install --upgrade pip
pip install streamlit

streamlit hello

Si streamlit hello no abre correctamente, usar:

python -m streamlit hello

Primera aplicación: `app.py`

# app.py
# Primera aplicación con Streamlit
# Curso: Programación de Computadores / Fundamentos de Programación

import streamlit as st

# Configuración general de la página
st.set_page_config(
    page_title="Mi primera app con Streamlit",
    page_icon="🐍",
    layout="centered"
)

# Título principal
st.title("Mi primera aplicación con Streamlit")

# Texto introductorio
st.write(
    """
    Esta aplicación permite calcular un caudal aproximado a partir del área
    de una sección transversal y la velocidad promedio del flujo.
    """
)

# Entrada de datos
area = st.number_input(
    "Área transversal del canal o tubería (m²):",
    min_value=0.0,
    value=1.0,
    step=0.1
)

velocidad = st.slider(
    "Velocidad promedio del flujo (m/s):",
    min_value=0.0,
    max_value=10.0,
    value=1.0,
    step=0.1
)

# Cálculo
caudal = area * velocidad

# Salida
st.metric(
    label="Caudal estimado",
    value=f"{caudal:.2f} m³/s"
)

# Interpretación
if caudal == 0:
    st.warning("El caudal es cero. Revise si el área o la velocidad son mayores que cero.")
elif caudal < 5:
    st.info("El caudal calculado es bajo.")
else:
    st.success("El caudal calculado es considerable.")

Ejecutar la app

streamlit run app.py

O, de forma alternativa:

python -m streamlit run app.py

Producto de la sesión

El estudiante debe mostrar en su computador:

Proyecto creado en VSCode.
Entorno .venv activado.
Streamlit instalado.
Aplicación app.py ejecutándose en el navegador.

Sesión 2 — Widgets, cálculos y primera app aplicada

Duración: 2 horas Tema central: Agregar interactividad a una app sencilla.

Objetivo de la sesión

Construir una aplicación aplicada a ingeniería usando controles interactivos de Streamlit.

Contenidos

st.title(), st.write(), st.markdown().
st.number_input().
st.slider().
st.selectbox().
st.metric().
Condicionales básicos dentro de una app.
Interpretación técnica de resultados.

Streamlit permite usar widgets como entradas interactivas y elementos de salida como tablas, gráficos y métricas; por ejemplo, st.file_uploader permite cargar archivos y los gráficos nativos como st.line_chart facilitan visualizaciones rápidas. (Streamlit Docs)

Aplicación propuesta

Nombre: Calculadora técnica básica para ingeniería.

El estudiante puede escoger una de estas situaciones:

Programa	Situación sugerida
Ingeniería Civil	Cálculo de caudal en canal rectangular.
Ingeniería Agrícola	Cálculo de lámina de riego.
Ingeniería Agroindustrial	Cálculo de rendimiento porcentual en un proceso.

Ejemplo para Ingeniería Agroindustrial

# app.py
# Aplicación: cálculo de rendimiento de un proceso agroindustrial

import streamlit as st

st.set_page_config(
    page_title="Rendimiento agroindustrial",
    page_icon="🏭",
    layout="centered"
)

st.title("Cálculo de rendimiento en un proceso agroindustrial")

st.write(
    """
    Esta aplicación calcula el rendimiento porcentual de un proceso
    a partir de la masa inicial de materia prima y la masa final obtenida.
    """
)

masa_inicial = st.number_input(
    "Masa inicial de materia prima (kg):",
    min_value=0.0,
    value=100.0,
    step=1.0
)

masa_final = st.number_input(
    "Masa final del producto obtenido (kg):",
    min_value=0.0,
    value=75.0,
    step=1.0
)

if masa_inicial > 0:
    rendimiento = (masa_final / masa_inicial) * 100

    st.metric(
        label="Rendimiento del proceso",
        value=f"{rendimiento:.2f} %"
    )

    if rendimiento < 50:
        st.error("El rendimiento es bajo. Se recomienda revisar pérdidas del proceso.")
    elif rendimiento < 80:
        st.warning("El rendimiento es aceptable, pero puede optimizarse.")
    else:
        st.success("El rendimiento es alto.")
else:
    st.warning("La masa inicial debe ser mayor que cero.")

Actividad práctica

Cada estudiante debe modificar la app para incluir:

Título propio.
Descripción del problema.
Al menos dos entradas numéricas.
Un cálculo.
Una salida con st.metric().
Una interpretación usando if, elif, else.

Producto de la sesión

Archivo app.py funcional con una situación aplicada a su programa de ingeniería.

Semana 2: Aplicaciones con datos y multipáginas

Sesión 3 — Carga de archivos, tablas y gráficos

Duración: 2 horas Tema central: Construir una app que lea datos y realice un análisis descriptivo inicial.

Objetivo de la sesión

Crear una aplicación que permita cargar un archivo .csv, visualizarlo, seleccionar variables numéricas y graficar resultados.

Contenidos

Importar pandas.
Cargar archivos con st.file_uploader().
Mostrar datos con st.dataframe().
Seleccionar columnas con st.selectbox().
Crear gráficos sencillos.
Descargar resultados con st.download_button().

Instalación de dependencias adicionales

pip install pandas

Aplicación: explorador básico de datos

# app.py
# Aplicación: explorador básico de datos en Streamlit

import streamlit as st
import pandas as pd

st.set_page_config(
    page_title="Explorador de datos",
    page_icon="📊",
    layout="wide"
)

st.title("Explorador básico de datos")

st.write(
    """
    Esta aplicación permite cargar un archivo CSV, visualizar sus datos
    y realizar una exploración descriptiva inicial.
    """
)

archivo = st.file_uploader(
    "Cargue un archivo CSV",
    type=["csv"]
)

if archivo is not None:
    # Lectura del archivo cargado
    datos = pd.read_csv(archivo)

    st.subheader("Vista previa de los datos")
    st.dataframe(datos.head())

    st.subheader("Dimensiones del conjunto de datos")
    filas, columnas = datos.shape
    st.write(f"El archivo tiene **{filas} filas** y **{columnas} columnas**.")

    st.subheader("Resumen estadístico")
    st.dataframe(datos.describe())

    # Identificar columnas numéricas
    columnas_numericas = datos.select_dtypes(include="number").columns

    if len(columnas_numericas) > 0:
        variable = st.selectbox(
            "Seleccione una variable numérica para graficar:",
            columnas_numericas
        )

        st.subheader(f"Gráfico de la variable: {variable}")
        st.line_chart(datos[variable])

        promedio = datos[variable].mean()
        minimo = datos[variable].min()
        maximo = datos[variable].max()

        col1, col2, col3 = st.columns(3)

        col1.metric("Promedio", f"{promedio:.2f}")
        col2.metric("Mínimo", f"{minimo:.2f}")
        col3.metric("Máximo", f"{maximo:.2f}")
    else:
        st.warning("El archivo no contiene columnas numéricas.")

else:
    st.info("Por favor cargue un archivo CSV para iniciar el análisis.")

Actividad práctica

El estudiante debe probar la app con un archivo .csv sencillo, por ejemplo:

dia,temperatura,humedad
1,30,78
2,31,75
3,29,82
4,33,70
5,32,73

Producto de la sesión

Una app que carga datos, muestra tabla, resumen estadístico, métricas y gráfico.

Sesión 4 — Aplicación multipágina con carpeta `pages/`

Duración: 2 horas Tema central: Organizar una app en varias páginas usando la estructura automática de Streamlit.

Objetivo de la sesión

Transformar una aplicación de una sola página en una aplicación multipágina usando la carpeta pages/.

La documentación de Streamlit indica que, al usar una carpeta pages/ junto al archivo principal, cada archivo .py dentro de esa carpeta es identificado automáticamente como una página de la app, mientras el archivo principal funciona como página de inicio. (Streamlit Docs)

Estructura del proyecto

primera_app_streamlit/
├── app.py
├── pages/
│   ├── 1_Calculadora.py
│   ├── 2_Explorador_Datos.py
│   └── 3_Acerca_de.py
├── requirements.txt
└── README.md

Archivo principal: `app.py`

# app.py
# Página principal de la aplicación multipágina

import streamlit as st

st.set_page_config(
    page_title="App multipágina",
    page_icon="🏠",
    layout="wide"
)

st.title("Aplicación multipágina con Streamlit")

st.write(
    """
    Esta aplicación integra varias herramientas desarrolladas durante el curso:

    1. Calculadora técnica.
    2. Explorador básico de datos.
    3. Página informativa del proyecto.
    """
)

st.info(
    "Use el menú lateral para navegar entre las páginas de la aplicación."
)

Página 1: `pages/1_Calculadora.py`

# pages/1_Calculadora.py
# Página para cálculo de caudal

import streamlit as st

st.title("Calculadora de caudal")

st.write(
    """
    Esta página calcula el caudal mediante la expresión:

    Q = A × V

    donde:
    - Q es el caudal en m³/s.
    - A es el área transversal en m².
    - V es la velocidad en m/s.
    """
)

area = st.number_input(
    "Área transversal (m²):",
    min_value=0.0,
    value=1.0
)

velocidad = st.number_input(
    "Velocidad promedio (m/s):",
    min_value=0.0,
    value=1.0
)

caudal = area * velocidad

st.metric(
    "Caudal estimado",
    f"{caudal:.2f} m³/s"
)

Página 2: `pages/2_Explorador_Datos.py`

# pages/2_Explorador_Datos.py
# Página para cargar y explorar datos CSV

import streamlit as st
import pandas as pd

st.title("Explorador de datos CSV")

archivo = st.file_uploader(
    "Cargue un archivo CSV",
    type=["csv"]
)

if archivo is not None:
    datos = pd.read_csv(archivo)

    st.subheader("Datos cargados")
    st.dataframe(datos.head())

    st.subheader("Resumen estadístico")
    st.dataframe(datos.describe())

    columnas_numericas = datos.select_dtypes(include="number").columns

    if len(columnas_numericas) > 0:
        variable = st.selectbox(
            "Seleccione una variable numérica:",
            columnas_numericas
        )

        st.line_chart(datos[variable])
else:
    st.info("Cargue un archivo CSV para iniciar.")

Página 3: `pages/3_Acerca_de.py`

# pages/3_Acerca_de.py
# Página de información general del proyecto

import streamlit as st

st.title("Acerca de esta aplicación")

st.write(
    """
    Esta aplicación fue desarrollada como ejercicio académico para aprender:

    - Desarrollo local con VSCode.
    - Uso de entornos virtuales.
    - Programación de interfaces web con Streamlit.
    - Organización de aplicaciones multipágina.
    - Publicación en Streamlit Community Cloud.
    """
)

st.markdown("**Autor:** Escriba aquí el nombre del estudiante o grupo.")
st.markdown("**Curso:** Programación de Computadores / Fundamentos de Programación.")

Ejecutar la app multipágina

streamlit run app.py

Producto de la sesión

Aplicación multipágina funcional usando carpeta pages/.

Semana 3: Organización profesional, GitHub y despliegue

Sesión 5 — Multipáginas con `st.Page`, Git y GitHub

Duración: 2 horas Tema central: Mejorar la organización del proyecto y versionarlo con GitHub.

Objetivo de la sesión

Reorganizar el proyecto usando una estructura más profesional y preparar el repositorio para despliegue.

Streamlit documenta st.Page y st.navigation como el método preferido para declarar páginas cuando se requiere mayor control sobre archivos, títulos, íconos y estructura de navegación. (Streamlit Docs)

Nueva estructura del proyecto

app_streamlit_final/
├── app.py
├── vistas/
│   ├── inicio.py
│   ├── calculadora.py
│   ├── explorador.py
│   └── acerca.py
├── requirements.txt
├── README.md
└── .gitignore

Archivo principal con navegación: `app.py`

# app.py
# Aplicación multipágina usando st.Page y st.navigation

import streamlit as st

st.set_page_config(
    page_title="App final Streamlit",
    page_icon="🚀",
    layout="wide"
)

# Definición de páginas
pagina_inicio = st.Page(
    "vistas/inicio.py",
    title="Inicio",
    icon="🏠"
)

pagina_calculadora = st.Page(
    "vistas/calculadora.py",
    title="Calculadora técnica",
    icon="🧮"
)

pagina_explorador = st.Page(
    "vistas/explorador.py",
    title="Explorador de datos",
    icon="📊"
)

pagina_acerca = st.Page(
    "vistas/acerca.py",
    title="Acerca del proyecto",
    icon="ℹ️"
)

# Menú de navegación
navegacion = st.navigation(
    {
        "Principal": [pagina_inicio],
        "Herramientas": [pagina_calculadora, pagina_explorador],
        "Información": [pagina_acerca],
    }
)

# Ejecutar la página seleccionada
navegacion.run()

Ejemplo de `vistas/inicio.py`

# vistas/inicio.py
# Página de inicio de la aplicación

import streamlit as st

st.title("Aplicación final con Streamlit")

st.write(
    """
    Esta aplicación integra herramientas básicas para el análisis y cálculo
    en situaciones de ingeniería.

    Use el menú de navegación para acceder a cada módulo.
    """
)

st.success("Aplicación organizada mediante st.Page y st.navigation.")

Archivo `.gitignore`

# Entorno virtual
.venv/

# Archivos temporales de Python
__pycache__/
*.pyc

# Configuración local sensible
.streamlit/secrets.toml

# Archivos del sistema
.DS_Store
Thumbs.db

Archivo `requirements.txt`

streamlit
pandas

En Streamlit Community Cloud, las dependencias Python deben declararse normalmente en requirements.txt, ubicado en la raíz del repositorio o junto al archivo principal de entrada. La documentación advierte que no deben incluirse librerías incorporadas de Python como math o random. (Streamlit Docs)

Comandos Git

git init

git add .

git commit -m "Primera version de la app Streamlit"

git branch -M main

git remote add origin https://github.com/USUARIO/NOMBRE_REPOSITORIO.git

git push -u origin main

Producto de la sesión

Repositorio GitHub con la app organizada, documentada y lista para desplegar.

Sesión 6 — Despliegue en Streamlit Community Cloud

Duración: 2 horas Tema central: Publicar la aplicación para que tenga una URL pública.

Objetivo de la sesión

Desplegar la aplicación desde GitHub en Streamlit Community Cloud.

Streamlit Community Cloud copia los archivos del repositorio y ejecuta la app desde la raíz del proyecto; por eso es importante probar localmente desde la raíz y mantener bien definida la ruta del archivo principal. La documentación también recomienda usar barras / en rutas, porque Cloud no trabaja con rutas separadas por \ de Windows. (Streamlit Docs)

Pasos para desplegar

Verificar que la app funcione localmente:

streamlit run app.py

Verificar que el repositorio esté actualizado:

git status
git add .
git commit -m "App lista para despliegue"
git push

Entrar a Streamlit Community Cloud.
Iniciar sesión con GitHub.
Seleccionar:
- Repositorio.
- Rama: main.
- Archivo principal: app.py.
Revisar opciones avanzadas si se requiere fijar versión de Python.

La versión de Python se selecciona al momento del despliegue en las opciones avanzadas; después de desplegar, para cambiar Python se debe eliminar y volver a desplegar la app. (Streamlit Docs)

Presionar Deploy.
Copiar la URL pública de la aplicación.

Problemas frecuentes y solución

Problema	Causa probable	Solución
Error instalando dependencias	Falta `requirements.txt`	Crear o corregir `requirements.txt`.
La app no encuentra un archivo	Ruta mal escrita	Usar rutas relativas y `/`, no `\`.
No aparece el repositorio	GitHub no autorizado	Revisar permisos de Streamlit Community Cloud.
La app funciona local, pero no en Cloud	Dependencia no declarada	Agregar la librería a `requirements.txt`.
Se eligió mal la versión de Python	Configuración inicial incorrecta	Eliminar y desplegar nuevamente con la versión correcta.

Producto final de la sesión

Cada grupo debe entregar:

Nombre del grupo:
Integrantes:
Programa:
Nombre de la app:
URL de GitHub:
URL de Streamlit Community Cloud:
Descripción breve de la app:

Evaluación sugerida

Criterio	Valor
Configuración correcta del entorno local en VSCode	15%
App simple funcional con entradas, cálculo y salida	15%
Carga y exploración básica de datos	15%
Organización multipágina	20%
Repositorio GitHub ordenado y documentado	15%
Despliegue exitoso en Streamlit Community Cloud	20%
Total	100%

Recomendación metodológica

Para estudiantes principiantes, conviene que la evaluación no se centre únicamente en que la app “se vea bonita”, sino en que puedan explicar:

Qué problema resuelve la app.
Qué datos entran.
Qué cálculos realiza.
Qué resultados entrega.
Cómo se ejecuta localmente.
Cómo se publicó en la nube.

Esta ruta conserva la lógica que usted suele usar: qué entra al sistema, qué hace el sistema y qué sale del sistema, pero ahora aplicada al desarrollo de una aplicación web real con Python y Streamlit.

Guías_3_Semanas_VsCode_Streamlit_2026_1

Justo Fuentes Cuello

2026-05-27

Guía de tres semanas: Desarrollo de aplicaciones web con Streamlit desde VSCode

1. Propósito general

2. Competencias a desarrollar

3. Producto final esperado

Semana 1: Primer contacto con VSCode, entorno virtual y Streamlit

Sesión 1 — Instalación, entorno virtual y primera app

Objetivo de la sesión

Contenidos

Desarrollo sugerido de la sesión

Comandos base en PowerShell de VSCode

Primera aplicación: app.py

Ejecutar la app

Producto de la sesión

Sesión 2 — Widgets, cálculos y primera app aplicada

Objetivo de la sesión

Contenidos

Aplicación propuesta

Ejemplo para Ingeniería Agroindustrial

Actividad práctica

Producto de la sesión

Semana 2: Aplicaciones con datos y multipáginas

Sesión 3 — Carga de archivos, tablas y gráficos

Objetivo de la sesión

Contenidos

Instalación de dependencias adicionales

Aplicación: explorador básico de datos

Actividad práctica

Producto de la sesión

Sesión 4 — Aplicación multipágina con carpeta pages/

Objetivo de la sesión

Estructura del proyecto

Archivo principal: app.py

Página 1: pages/1_Calculadora.py

Página 2: pages/2_Explorador_Datos.py

Página 3: pages/3_Acerca_de.py

Ejecutar la app multipágina

Producto de la sesión

Semana 3: Organización profesional, GitHub y despliegue

Sesión 5 — Multipáginas con st.Page, Git y GitHub

Objetivo de la sesión

Nueva estructura del proyecto

Archivo principal con navegación: app.py

Ejemplo de vistas/inicio.py

Archivo .gitignore

Archivo requirements.txt

Comandos Git

Producto de la sesión

Sesión 6 — Despliegue en Streamlit Community Cloud

Objetivo de la sesión

Pasos para desplegar

Problemas frecuentes y solución

Producto final de la sesión

Evaluación sugerida

Recomendación metodológica

Primera aplicación: `app.py`

Sesión 4 — Aplicación multipágina con carpeta `pages/`

Archivo principal: `app.py`

Página 1: `pages/1_Calculadora.py`

Página 2: `pages/2_Explorador_Datos.py`

Página 3: `pages/3_Acerca_de.py`

Sesión 5 — Multipáginas con `st.Page`, Git y GitHub

Archivo principal con navegación: `app.py`

Ejemplo de `vistas/inicio.py`

Archivo `.gitignore`

Archivo `requirements.txt`