Con base en el procedimiento, que plantea el paso de Google Colab a VSCode, GitHub y luego despliegue en la nube como flujo profesional para los estudiantes, se propone esta guía más ordenada, gradual y práctica para los cursos de Programación de Computadores y Fundamentos de Programación.

Guía paso a paso: de Google Colab a VSCode, Git, GitHub y Streamlit

1. Propósito de la guía

Hasta ahora, los estudiantes han trabajado en Google Colab, que es un entorno excelente para aprender Python sin instalar programas. Sin embargo, cuando se quiere construir una aplicación real, guardar versiones del proyecto, trabajar con carpetas, publicar código en GitHub y desplegar una aplicación en internet, es necesario pasar a un flujo más profesional:

Python en el computador
        ↓
VSCode
        ↓
Entorno virtual .venv
        ↓
Streamlit
        ↓
Git
        ↓
GitHub
        ↓
Streamlit Community Cloud

El objetivo no es abandonar Colab, sino mostrar que Colab fue el laboratorio inicial y que VSCode será el ambiente de desarrollo local para construir aplicaciones más reales.

2. Instalaciones iniciales

2.1. Crear cuenta en GitHub

GitHub es una plataforma en la nube donde los estudiantes guardarán sus proyectos de programación. GitHub recomienda crear una cuenta personal gratuita y verificar el correo electrónico para comenzar a usar la plataforma. (GitHub Docs)

Pasos

Entrar a la página oficial de GitHub.
Seleccionar Sign up.
Crear un usuario.
Usar un correo activo.
Verificar el correo.
Recordar usuario y contraseña.

Concepto clave

GitHub no es Git.

Git es el sistema que controla los cambios del código en el computador.
GitHub es la plataforma en internet donde se publica el repositorio.

Una analogía sencilla:

Git     → el cuaderno donde se registran los cambios del proyecto.
GitHub  → la biblioteca en la nube donde se guarda y comparte ese cuaderno.

2.2. Instalar Git

Git es un sistema de control de versiones. Permite guardar estados del proyecto, volver a versiones anteriores, comparar cambios y trabajar de manera ordenada. La página oficial de Git describe a Git como un sistema distribuido de control de versiones, libre y de código abierto. (git-scm.com)

Enlace oficial

Instalar Git desde la página oficial de Git para Windows, macOS o Linux. (git-scm.com)

Recomendación para Windows

Durante la instalación, dejar las opciones por defecto. Al finalizar, verificar desde la terminal:

git --version

Si aparece algo similar a:

git version 2.x.x

Git quedó instalado correctamente.

2.3. Instalar Python en el computador

Aunque los estudiantes ya han usado Python en Colab, ahora necesitan tener Python instalado localmente. La documentación oficial de Python para Windows indica que, después de la instalación, los comandos python, py y pymanager deberían estar disponibles. (Python documentation)

Enlace oficial

Descargar Python desde la página oficial. (Python.org)

Recomendación importante para Windows

Al instalar Python, marcar la opción:

Add Python to PATH

Luego verificar:

python --version

py --version

2.4. Instalar Visual Studio Code

Visual Studio Code, o VSCode, será el editor principal para escribir código, manejar carpetas, abrir la terminal, ejecutar Streamlit y trabajar con Git. La página oficial lo presenta como un editor gratuito, de código abierto, con Git integrado, depuración y extensiones. (Visual Studio Code)

Enlace oficial

Descargar VSCode desde su página oficial. (Visual Studio Code)

Extensiones recomendadas en VSCode

Abrir VSCode y entrar a la pestaña de extensiones. Instalar:

Python La extensión oficial de Python para VSCode ofrece soporte para IntelliSense, depuración, navegación de código, pruebas y administración de entornos. (GitHub)
Pylance Normalmente se instala junto con la extensión de Python.
GitHub Pull Requests and Issues Opcional, útil para estudiantes que luego trabajen con GitHub desde VSCode.
Jupyter Opcional, para abrir notebooks .ipynb dentro de VSCode.

2.5. Instalaciones opcionales

Google Antigravity

Google Antigravity es una plataforma orientada al desarrollo con agentes de IA. La documentación oficial la presenta como una plataforma de desarrollo “agent-first” con instalación, creación de proyectos y uso de agentes. (Google Antigravity)

Para este curso, debe presentarse como opcional, no como herramienta obligatoria. Es mejor que primero dominen:

Python → VSCode → Streamlit → Git → GitHub

Luego podrán explorar herramientas con IA más avanzadas.

Positron

Positron es un IDE gratuito orientado a ciencia de datos con soporte para Python y R, por lo que puede ser muy útil para los cursos posteriores de Estadística Aplicada y Diseño Experimental. La página oficial lo presenta como un ambiente para ciencia de datos en Python y R. (Positron)

Enlace oficial

Descargar Positron desde su página oficial. (Positron)

3. Configuración inicial de VSCode

3.1. Crear carpeta del proyecto

En el disco C:\, crear una carpeta general:

C:\programacion_streamlit

Dentro de esa carpeta crear el primer proyecto:

C:\programacion_streamlit\app_ingenieria_streamlit

La estructura inicial será:

app_ingenieria_streamlit/
│
├── app.py
├── requirements.txt
├── README.md
└── .gitignore

3.2. Abrir la carpeta en VSCode

Abrir VSCode.
Ir a Archivo > Abrir carpeta.
Seleccionar:

C:\programacion_streamlit\app_ingenieria_streamlit

Abrir la terminal:

Terminal > Nueva terminal

4. Entornos virtuales en Python

4.1. Concepto

Un entorno virtual es una carpeta especial donde se instalan las librerías de un proyecto sin afectar otros proyectos ni la instalación general de Python.

La documentación oficial de Python explica que el módulo venv permite crear entornos virtuales ligeros con sus propios paquetes instalados, aislados de la instalación base de Python. (Python documentation)

Analogía

Python global      → la biblioteca general del computador.
Entorno .venv      → una mochila propia para cada proyecto.
requirements.txt   → la lista de libros que contiene esa mochila.

4.2. Crear el entorno virtual

En la terminal de VSCode, dentro de la carpeta del proyecto, ejecutar:

python -m venv .venv

Esto crea una carpeta llamada .venv.

4.3. Activar el entorno virtual

En Windows PowerShell

.venv\Scripts\Activate.ps1

Si aparece un error de permisos, ejecutar una sola vez:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Luego volver a activar:

.venv\Scripts\Activate.ps1

En Windows CMD

.venv\Scripts\activate.bat

En macOS o Linux

source .venv/bin/activate

Cuando el entorno está activo, la terminal muestra algo parecido a:

(.venv) PS C:\programacion_streamlit\app_ingenieria_streamlit>

4.4. Actualizar pip e instalar Streamlit

Streamlit recomienda instalarlo localmente usando herramientas como venv y pip. (Streamlit Docs)

Ejecutar:

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

Verificar instalación:

streamlit hello

O también:

python -m streamlit hello

5. Primer proyecto con Streamlit

5.1. Concepto de Streamlit

Streamlit permite convertir scripts de Python en aplicaciones web interactivas. Su documentación lo presenta como un framework abierto de Python para crear y desplegar aplicaciones de datos dinámicas con pocas líneas de código. (Streamlit Docs)

La idea pedagógica es mostrar al estudiante esta transformación:

Programa de consola:
input()  → ingreso de datos
print()  → salida de resultados

Aplicación web:
st.number_input()  → ingreso de datos
st.success()       → salida visual del resultado

5.2. Crear archivo `app.py`

En VSCode crear el archivo:

app.py

Pegar o escribir el siguiente código:

"""
Aplicación inicial con Streamlit para cursos de Ingeniería.

Esta aplicación muestra tres ejemplos sencillos:
1. Cálculo de volumen de un tanque cilíndrico.
2. Cálculo de caudal en un canal rectangular.
3. Cálculo de humedad en una muestra agroindustrial.

Autor: Estudiante
Asignatura: Programación de Computadores / Fundamentos de Programación
"""

import math

import streamlit as st


# ------------------------------------------------------------
# Funciones de cálculo
# ------------------------------------------------------------

def volumen_cilindro(radio: float, altura: float) -> float:
    """
    Calcula el volumen de un tanque cilíndrico.

    Parámetros:
    radio : float
        Radio del tanque en metros.
    altura : float
        Altura del tanque en metros.

    Retorna:
    float
        Volumen del tanque en metros cúbicos.
    """
    return math.pi * radio**2 * altura


def caudal_rectangular(ancho: float, profundidad: float, velocidad: float) -> float:
    """
    Calcula el caudal en un canal rectangular.

    Fórmula:
    Q = A * v
    A = ancho * profundidad

    Parámetros:
    ancho : float
        Ancho del canal en metros.
    profundidad : float
        Profundidad del flujo en metros.
    velocidad : float
        Velocidad media del agua en m/s.

    Retorna:
    float
        Caudal en metros cúbicos por segundo.
    """
    area = ancho * profundidad
    return area * velocidad


def humedad_base_humeda(masa_humeda: float, masa_seca: float) -> float:
    """
    Calcula el porcentaje de humedad en base húmeda.

    Fórmula:
    Humedad (%) = ((masa_humeda - masa_seca) / masa_humeda) * 100

    Parámetros:
    masa_humeda : float
        Masa inicial de la muestra.
    masa_seca : float
        Masa después del secado.

    Retorna:
    float
        Porcentaje de humedad.
    """
    return ((masa_humeda - masa_seca) / masa_humeda) * 100


# ------------------------------------------------------------
# Configuración general de la página
# ------------------------------------------------------------

st.set_page_config(
    page_title="App de Ingeniería con Streamlit",
    page_icon="🧪",
    layout="centered"
)

st.title("Primera App de Ingeniería con Streamlit")
st.write(
    "Esta aplicación muestra cómo una función de Python puede convertirse "
    "en una herramienta interactiva para resolver problemas básicos de ingeniería."
)

st.divider()

# ------------------------------------------------------------
# Pestañas de la aplicación
# ------------------------------------------------------------

tab1, tab2, tab3 = st.tabs(
    [
        "Tanque cilíndrico",
        "Caudal en canal",
        "Humedad agroindustrial"
    ]
)

# ------------------------------------------------------------
# Pestaña 1: Volumen de tanque
# ------------------------------------------------------------

with tab1:
    st.header("Cálculo de volumen de un tanque cilíndrico")
    st.write("Aplicación útil en almacenamiento de agua, riego y obras civiles.")

    radio = st.number_input(
        "Radio del tanque (m):",
        min_value=0.0,
        step=0.10
    )

    altura = st.number_input(
        "Altura del tanque (m):",
        min_value=0.0,
        step=0.10
    )

    if st.button("Calcular volumen"):
        volumen = volumen_cilindro(radio, altura)
        st.success(f"El volumen del tanque es {volumen:.2f} m³.")

# ------------------------------------------------------------
# Pestaña 2: Caudal en canal rectangular
# ------------------------------------------------------------

with tab2:
    st.header("Cálculo de caudal en un canal rectangular")
    st.write("Aplicación básica en hidráulica e ingeniería civil y agrícola.")

    ancho = st.number_input(
        "Ancho del canal (m):",
        min_value=0.0,
        step=0.10
    )

    profundidad = st.number_input(
        "Profundidad del flujo (m):",
        min_value=0.0,
        step=0.10
    )

    velocidad = st.number_input(
        "Velocidad media del agua (m/s):",
        min_value=0.0,
        step=0.10
    )

    if st.button("Calcular caudal"):
        caudal = caudal_rectangular(ancho, profundidad, velocidad)
        st.success(f"El caudal estimado es {caudal:.3f} m³/s.")

# ------------------------------------------------------------
# Pestaña 3: Humedad agroindustrial
# ------------------------------------------------------------

with tab3:
    st.header("Cálculo de humedad en una muestra")
    st.write("Aplicación básica en control de calidad agroindustrial.")

    masa_humeda = st.number_input(
        "Masa húmeda de la muestra (g):",
        min_value=0.01,
        step=1.0
    )

    masa_seca = st.number_input(
        "Masa seca de la muestra (g):",
        min_value=0.0,
        step=1.0
    )

    if st.button("Calcular humedad"):
        if masa_seca > masa_humeda:
            st.error("La masa seca no puede ser mayor que la masa húmeda.")
        else:
            humedad = humedad_base_humeda(masa_humeda, masa_seca)
            st.success(f"La humedad de la muestra es {humedad:.2f} %.")

5.3. Ejecutar la aplicación

En la terminal:

streamlit run app.py

O, si el comando anterior no funciona:

python -m streamlit run app.py

Se abrirá una página local similar a:

http://localhost:8501

6. Crear archivos necesarios para GitHub y Streamlit Cloud

6.1. Crear `requirements.txt`

Este archivo le indica a Streamlit Cloud qué librerías debe instalar.

Crear el archivo:

requirements.txt

Contenido:

streamlit
pandas

No se debe incluir math, porque math ya viene incluido en Python.

6.2. Crear `.gitignore`

Este archivo evita subir a GitHub carpetas innecesarias.

Crear el archivo:

.gitignore

Contenido:

.venv/
__pycache__/
*.pyc
.env
.streamlit/secrets.toml

Muy importante: la carpeta .venv no se sube a GitHub.

6.3. Crear `README.md`

Crear el archivo:

README.md

Contenido sugerido:

# Primera App de Ingeniería con Streamlit

Esta aplicación fue desarrollada como actividad académica en el curso de Programación.

## Temas aplicados

- Funciones en Python
- Entrada y salida de datos
- Aplicaciones web con Streamlit
- Control de versiones con Git
- Publicación en GitHub
- Despliegue en Streamlit Community Cloud

## Aplicaciones incluidas

1. Cálculo de volumen de un tanque cilíndrico.
2. Cálculo de caudal en un canal rectangular.
3. Cálculo de humedad en una muestra agroindustrial.

## Ejecución local

```bash
streamlit run app.py


---

# 7. Configurar Git en VSCode

Antes de usar Git por primera vez, configurar nombre y correo:

```bash
git config --global user.name "Nombre del estudiante"
git config --global user.email "correo@ejemplo.com"

Verificar:

git config --global --list

8. Primer flujo de trabajo con Git

Git tiene tres momentos fundamentales:

1. Modificar archivos
2. Preparar cambios
3. Guardar cambios

La documentación oficial de Git indica que git init crea un repositorio vacío en una carpeta .git. (git-scm.com) También explica que git add agrega archivos nuevos o modificados al área de preparación, conocida como “staging area”. (git-scm.com) Finalmente, git commit crea un nuevo registro con el contenido preparado y un mensaje descriptivo. (git-scm.com)

8.1. Inicializar repositorio

git init

8.2. Revisar estado

git status

8.3. Preparar archivos

git add .

8.4. Crear primer commit

git commit -m "Primera app de ingeniería con Streamlit"

9. Subir el proyecto a GitHub

9.1. Crear repositorio en GitHub

En GitHub:

Clic en New repository.
Nombre sugerido:

app-ingenieria-streamlit

Seleccionar público o privado.
No agregar README desde GitHub si ya fue creado localmente.
Crear repositorio.

9.2. Conectar el repositorio local con GitHub

GitHub Docs explica que para agregar un repositorio remoto se usa git remote add, indicando el nombre del remoto, por ejemplo origin, y la URL del repositorio. (GitHub Docs)

En la terminal de VSCode:

git branch -M main
git remote add origin https://github.com/USUARIO/app-ingenieria-streamlit.git
git push -u origin main

Reemplazar USUARIO por el usuario real de GitHub.

GitHub Docs explica que git push permite enviar commits locales a un repositorio remoto. (GitHub Docs)

10. Despliegue en Streamlit Community Cloud

Streamlit Community Cloud permite publicar aplicaciones desde GitHub. La página oficial resume el flujo así: iniciar sesión con GitHub, elegir repositorio, rama y archivo, y luego hacer clic en Deploy. (streamlit.io)

10.1. Antes de desplegar

Verificar que el repositorio tenga:

app.py
requirements.txt
README.md
.gitignore

No debe tener:

.venv/
__pycache__/

10.2. Desplegar

Entrar a Streamlit Community Cloud.
Iniciar sesión con GitHub.
Clic en Create app.
Seleccionar el repositorio.
Seleccionar la rama:

main

Seleccionar archivo principal:

app.py

Clic en Deploy.

La documentación oficial de Streamlit indica que, cuando la aplicación tiene lo necesario, el despliegue se realiza desde el workspace con Create app, completando la información y presionando Deploy. (Streamlit Docs)

11. Actualizar la aplicación después del despliegue

Cada vez que el estudiante modifique app.py, debe ejecutar:

git status
git add .
git commit -m "Actualiza aplicación"
git push

Streamlit Community Cloud indica que, después del despliegue, cada vez que se hace git push, la app se actualiza. (streamlit.io)

12. Errores frecuentes y solución

Problema	Posible causa	Solución
`python` no se reconoce	Python no está en PATH	Reinstalar Python marcando `Add Python to PATH` o usar `py`
`streamlit` no se reconoce	Entorno virtual no activado	Activar `.venv` y volver a instalar Streamlit
No activa `.venv` en PowerShell	Restricción de ejecución	Ejecutar `Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser`
`ModuleNotFoundError` en Streamlit Cloud	Falta una librería en `requirements.txt`	Agregar la librería, hacer commit y push
Se subió `.venv` a GitHub	Falta `.gitignore`	Crear `.gitignore`, eliminar `.venv` del repositorio y volver a subir
La app no despliega	Archivo principal mal indicado	Verificar que el archivo principal sea `app.py`
GitHub pide autenticación	Falta iniciar sesión o autorizar Git	Seguir el login que abre VSCode o Git Credential Manager

13. Secuencia sugerida para dos sesiones de clase

Sesión 1: instalación y ejecución local

Objetivo: que el estudiante logre ejecutar una app de Streamlit en su computador.

Actividades

Instalar Git.
Crear cuenta en GitHub.
Instalar Python.
Instalar VSCode.
Crear carpeta del proyecto.
Crear entorno virtual .venv.
Instalar Streamlit.
Crear app.py.
Ejecutar:

streamlit run app.py

Evidencia

Captura de pantalla de la app funcionando localmente.

Sesión 2: GitHub y despliegue

Objetivo: que el estudiante publique su código en GitHub y despliegue la app en Streamlit Community Cloud.

Actividades

Crear requirements.txt.
Crear .gitignore.
Crear README.md.
Inicializar Git.
Crear primer commit.
Crear repositorio en GitHub.
Subir el proyecto.
Desplegar en Streamlit Community Cloud.

Evidencias

El estudiante entrega:

URL del repositorio de GitHub.
URL pública de la app en Streamlit.
Captura de la app funcionando.
Breve reflexión escrita sobre qué aprendió del flujo:

VSCode → Git → GitHub → Streamlit Cloud

14. Prompt sugerido para que los estudiantes usen IA

Actúa como tutor de Programación con Python aplicado a Ingeniería.

Estoy aprendiendo a pasar de Google Colab a VSCode para crear aplicaciones con Streamlit. Explícame paso a paso:

1. Qué diferencia hay entre trabajar en Colab y trabajar en VSCode.
2. Qué es un entorno virtual `.venv` y por qué no debo instalar todo globalmente.
3. Qué hace cada archivo de mi proyecto: `app.py`, `requirements.txt`, `.gitignore` y `README.md`.
4. Qué diferencia hay entre Git y GitHub.
5. Qué hacen los comandos: `git init`, `git add .`, `git commit`, `git remote add origin` y `git push`.
6. Cómo se conecta GitHub con Streamlit Community Cloud para publicar una app.

Después hazme 5 preguntas para verificar si entendí el proceso.

15. Cierre pedagógico sugerido

Esta guía permite que el estudiante comprenda que programar no es solamente escribir instrucciones en Python. También implica organizar archivos, cuidar dependencias, documentar el proyecto, controlar versiones, publicar código y convertir una idea técnica en una aplicación accesible para otros.

En términos formativos, el salto más importante es este:

De resolver ejercicios aislados
a construir pequeños productos de ingeniería.

De_Google_Colab_a_VsCode_Streamlit

Justo Fuentes Cuello

2026-05-27

Guía paso a paso: de Google Colab a VSCode, Git, GitHub y Streamlit

1. Propósito de la guía

2. Instalaciones iniciales

2.1. Crear cuenta en GitHub

Pasos

Concepto clave

2.2. Instalar Git

Enlace oficial

Recomendación para Windows

2.3. Instalar Python en el computador

Enlace oficial

Recomendación importante para Windows

2.4. Instalar Visual Studio Code

Enlace oficial

Extensiones recomendadas en VSCode

2.5. Instalaciones opcionales

Google Antigravity

Positron

Enlace oficial

3. Configuración inicial de VSCode

3.1. Crear carpeta del proyecto

3.2. Abrir la carpeta en VSCode

4. Entornos virtuales en Python

4.1. Concepto

Analogía

4.2. Crear el entorno virtual

4.3. Activar el entorno virtual

En Windows PowerShell

En Windows CMD

En macOS o Linux

4.4. Actualizar pip e instalar Streamlit

5. Primer proyecto con Streamlit

5.1. Concepto de Streamlit

5.2. Crear archivo app.py

5.3. Ejecutar la aplicación

6. Crear archivos necesarios para GitHub y Streamlit Cloud

6.1. Crear requirements.txt

6.2. Crear .gitignore

6.3. Crear README.md

8. Primer flujo de trabajo con Git

8.1. Inicializar repositorio

8.2. Revisar estado

8.3. Preparar archivos

8.4. Crear primer commit

9. Subir el proyecto a GitHub

9.1. Crear repositorio en GitHub

9.2. Conectar el repositorio local con GitHub

10. Despliegue en Streamlit Community Cloud

10.1. Antes de desplegar

10.2. Desplegar

11. Actualizar la aplicación después del despliegue

12. Errores frecuentes y solución

13. Secuencia sugerida para dos sesiones de clase

Sesión 1: instalación y ejecución local

Actividades

Evidencia

Sesión 2: GitHub y despliegue

Actividades

Evidencias

14. Prompt sugerido para que los estudiantes usen IA

15. Cierre pedagógico sugerido

5.2. Crear archivo `app.py`

6.1. Crear `requirements.txt`

6.2. Crear `.gitignore`

6.3. Crear `README.md`