Uso de columnas, contenedores y expander

En Streamlit, organizar el layout es fundamental para crear aplicaciones atractivas y funcionales. Las columnas, los contenedores y los expanders son herramientas para estructurar el contenido.

Para distribuir elementos en columnas, se utiliza la función st.columns(). Por ejemplo, para crear dos columnas:

col1, col2 = st.columns(2)

Ahora es posible añadir componentes a cada columna de forma independiente:

with col1:
    st.header("Columna 1")
    st.write("Contenido de la primera columna")

with col2:
    st.header("Columna 2")
    st.write("Contenido de la segunda columna")

Las columnas permiten colocar elementos lado a lado, optimizando el espacio horizontal de la interfaz.

Los contenedores son útiles para agrupar múltiples elementos en un solo bloque. Se crean utilizando st.container(). Por ejemplo:

data = [1, 2, 5, 4, 3, 6]

with st.container():
    st.subheader("Sección agrupada")
    st.write("Este texto y el gráfico siguientes están dentro del mismo contenedor.")
    st.line_chart(data)

El uso de contenedores ayuda a mantener una estructura lógica y ordenada de los componentes en la aplicación.

Para mostrar u ocultar secciones de contenido, se emplea st.expander(). Los expanders permiten interactuar con el usuario de forma eficiente. Un ejemplo de uso sería:

with st.expander("Ver más detalles"):
    st.write("Información adicional que puede ser relevante para el usuario.")

Los expanders mejoran la usabilidad al reducir la cantidad de información visible inicialmente y proporcionar acceso a detalles bajo demanda.

Es posible combinar columnas y contenedores para crear diseños más complejos. Por ejemplo:

with st.container():
    col1, col2 = st.columns(2)
    with col1:
        st.write("Contenido en la primera columna dentro de un contenedor.")
    with col2:
        st.write("Contenido en la segunda columna dentro de un contenedor.")

Esta combinación permite una personalización avanzada del layout, adaptándose a las necesidades específicas de la aplicación.

Además, los expanders se pueden utilizar dentro de columnas o contenedores, ofreciendo mayor flexibilidad. Por ejemplo:

col1, col2 = st.columns(2)

with col1:
    with st.expander("Opciones avanzadas"):
        st.write("Configuraciones adicionales en la primera columna.")

with col2:
    st.write("Contenido en la segunda columna.")

Al utilizar st.columns(), se pueden definir anchos personalizados para las columnas mediante proporciones:

col1, col2 = st.columns([3, 1])

En este caso, la primera columna será tres veces más ancha que la segunda, lo que permite controlar el espacio asignado a cada sección.

Los contenedores también facilitan la modularidad del código al permitir agrupar componentes que funcionan conjuntamente. Esto es especialmente útil en aplicaciones con secciones repetitivas o dinámicas.

Por último, es importante considerar el uso de expanders para mejorar la experiencia del usuario, evitando sobrecargar la interfaz con información excesiva y permitiendo que el usuario descubra detalles adicionales según sus intereses.

Uso de pestañas y páginas para organizar contenido

Organizar el contenido de una aplicación en Streamlit es esencial para mejorar la usabilidad y la navegación. Las pestañas y las páginas permiten estructurar la información de manera clara y accesible para el usuario.

Para incorporar pestañas dentro de una aplicación, se utiliza la función st.tabs(). Esta función crea múltiples secciones en una misma página, accesibles mediante pestañas en la interfaz. Por ejemplo:

tab1, tab2, tab3 = st.tabs(["Tablero", "Estadísticas", "Configuración"])

with tab1:
    st.header("Tablero Principal")
    st.write("Contenido del tablero principal.")

with tab2:
    st.header("Estadísticas")
    st.write("Aquí se muestran las estadísticas.")

with tab3:
    st.header("Configuración")
    st.write("Opciones de configuración de la aplicación.")

En este ejemplo, se han creado tres pestañas: "Tablero", "Estadísticas" y "Configuración". Cada pestaña contiene contenido específico, lo que facilita al usuario acceder a diferentes secciones sin necesidad de navegar entre páginas separadas.

Las pestañas pueden anidarse dentro de otros layouts, como columnas o expanders, para diseñar interfaces más complejas. Por ejemplo:

col1, col2 = st.columns(2)

with col1:
    st.subheader("Sección Izquierda")
    tabs_left = st.tabs(["Info A", "Info B"])
    with tabs_left[0]:
        st.write("Contenido de Info A en la columna izquierda.")
    with tabs_left[1]:
        st.write("Contenido de Info B en la columna izquierda.")

with col2:
    st.subheader("Sección Derecha")
    tabs_right = st.tabs(["Detalle X", "Detalle Y"])
    with tabs_right[0]:
        st.write("Contenido de Detalle X en la columna derecha.")
    with tabs_right[1]:
        st.write("Contenido de Detalle Y en la columna derecha.")

Este diseño permite presentar información de forma organizada y maximizar el uso del espacio disponible en la pantalla.

Por otro lado, para crear aplicaciones con múltiples páginas, Streamlit ofrece una forma sencilla y eficiente. Al estructurar el proyecto, se crea una carpeta llamada pages, y dentro de ella se añaden archivos .py, donde cada uno representa una página distinta de la aplicación.

La estructura del proyecto sería:

- streamlit_app.py
- pages/
    - 1_Datos.py
    - 2_Análisis.py
    - 3_Modelos.py

Al ejecutar streamlit_app.py, la aplicación detecta automáticamente las páginas y añade una barra de navegación lateral para acceder a ellas.

En streamlit_app.py, se puede incluir el contenido de la página principal:

import streamlit as st

st.title("Aplicación de Ciencia de Datos")
st.write("Seleccione una página en el menú lateral para comenzar.")

Cada archivo dentro de la carpeta pages es una página independiente. Por ejemplo, en 1_Datos.py:

import streamlit as st

st.title("Exploración de Datos")
st.write("Aquí se carga y explora el conjunto de datos.")

La numeración al inicio del nombre del archivo (1_, 2_, 3_) determina el orden en el que aparecen las páginas en el menú de navegación. Esta organización facilita la creación de aplicaciones escalables y bien estructuradas.

Es posible personalizar el menú de navegación cambiando el nombre de los archivos o utilizando subcarpetas dentro de pages para agrupar páginas relacionadas.

Además, se pueden combinar pestañas y páginas para ofrecer una experiencia de usuario más rica. Por ejemplo, dentro de una página específica, se pueden utilizar pestañas para organizar el contenido en sub-secciones.

El uso de páginas es especialmente útil cuando se trabaja con aplicaciones complejas que requieren separar funcionalidades, como carga de datos, análisis exploratorio y visualización de resultados. Esto mejora la navegación y permite al usuario centrarse en una tarea a la vez.

Para facilitar la personalización, se pueden añadir parámetros en la URL para pasar información entre páginas o utilizar el estado de la sesión. Sin embargo, es importante gestionar el estado de la aplicación adecuadamente para mantener la coherencia en toda la aplicación.

Diseño de dashboards responsive

El diseño de dashboards responsive en Streamlit permite que las aplicaciones se adapten automáticamente a diferentes tamaños de pantalla y dispositivos, mejorando la experiencia del usuario. Aprovechando las funcionalidades integradas de Streamlit, es posible crear interfaces que se vean y funcionen bien tanto en ordenadores de escritorio como en dispositivos móviles.

Para lograr un diseño responsive, es fundamental entender cómo Streamlit maneja el layout adaptativo. Por defecto, Streamlit utiliza una arquitectura de diseño fluido, donde los componentes se ajustan al ancho disponible. Sin embargo, se pueden aplicar estrategias adicionales para optimizar la responsividad.

Una técnica efectiva es utilizar columnas con proporciones relativas en lugar de fijar anchos absolutos. Al crear columnas, es posible asignar proporciones que se ajustarán dinámicamente. Por ejemplo:

col1, col2 = st.columns([2, 1])

En este caso, la primera columna ocupará el doble de espacio que la segunda, y ambas ajustarán su tamaño según el ancho de la ventana del navegador.

Otro aspecto clave es el uso de imágenes y gráficos escalables. Al incorporar imágenes con st.image(), se puede especificar que el ancho sea relativo:

st.image("imagen.png", use_container_width=True)

El parámetro use_container_width=True asegura que la imagen se ajuste al ancho del contenedor padre, mejorando la adaptabilidad en diferentes dispositivos.

Los componentes interactivos también deben diseñarse pensando en la responsividad. Evitar elementos que requieran un ancho fijo excesivo y optar por aquellos que se adaptan al tamaño del contenedor garantiza una mejor visualización. Por ejemplo, al mostrar un dataframe:

st.dataframe(datos, use_container_width=True)

El argumento use_container_width=True permite que el dataframe utilice todo el espacio disponible, ajustándose en pantallas más pequeñas.

Para mejorar aún más el diseño responsive, es posible utilizar la función st.container() para agrupar elementos y controlar su comportamiento en diferentes resoluciones. Dentro de un contenedor, se pueden añadir reglas condicionales basadas en el tamaño de la pantalla. Aunque Streamlit no proporciona directamente información sobre el tamaño de la ventana, se pueden emplear bibliotecas externas o técnicas avanzadas para adaptar el contenido.

Es importante considerar la priorización de contenido en dispositivos móviles. Colocar la información más relevante al principio y utilizar expanders para detalles adicionales ayuda a mantener una interfaz limpia y accesible. Por ejemplo:

st.header("Resumen Ejecutivo")
st.write("Información clave del dashboard.")

with st.expander("Ver detalles"):
    st.write("Datos y métricas adicionales.")

Además, se recomienda minimizar el uso de elementos pesados o múltiples gráficos complejos en una misma vista, ya que pueden afectar el rendimiento en dispositivos con recursos limitados.

El diseño responsive también implica probar la aplicación en diferentes dispositivos y resoluciones. Utilizar las herramientas de desarrollo del navegador para simular distintos tamaños de pantalla permite identificar y corregir posibles problemas de visualización.

Por último, es posible emplear CSS personalizado para afinar aspectos específicos del diseño responsive. Sin embargo, dado que Streamlit gestiona gran parte del layout de forma automática, suelen ser necesarias pocas modificaciones. Se debe tener cuidado al aplicar estilos personalizados para no interferir con el comportamiento predeterminado de la aplicación.

Implementación de barras laterales con st.sidebar para navegación

La barra lateral en Streamlit es una herramienta poderosa para mejorar la navegación y la organización de una aplicación. Utilizando st.sidebar, es posible colocar widgets y controles fuera del flujo principal, optimizando el espacio y facilitando la interacción del usuario con la aplicación.

Para comenzar a utilizar la barra lateral, simplemente se reemplaza st.[función] por st.sidebar.[función]. Por ejemplo, para añadir un elemento de texto en la barra lateral:

import streamlit as st

st.sidebar.title("Menú de Navegación")

Los widgets colocados en st.sidebar se muestran en una columna lateral a la izquierda de la aplicación, permitiendo que el contenido principal permanezca despejado y enfocado.

Crear un menú de navegación

Una de las utilidades más comunes de la barra lateral es la creación de un menú de navegación. Esto se puede lograr utilizando widgets de selección como st.sidebar.radio o st.sidebar.selectbox. Por ejemplo:

opcion = st.sidebar.selectbox(
    "Seleccione una sección:",
    ["Introducción", "Análisis de Datos", "Visualización", "Conclusiones"]
)

Según la opción seleccionada por el usuario, se puede estructurar el contenido mostrado en la página principal:

if opcion == "Introducción":
    st.header("Introducción")
    st.write("Contenido de la introducción.")
elif opcion == "Análisis de Datos":
    st.header("Análisis de Datos")
    st.write("Contenido del análisis de datos.")
elif opcion == "Visualización":
    st.header("Visualización")
    st.write("Gráficos y visualizaciones aquí.")
else:
    st.header("Conclusiones")
    st.write("Conclusiones finales del estudio.")

Esta estructura permite al usuario navegar entre diferentes secciones de la aplicación de manera intuitiva.

Personalización de la barra lateral

La barra lateral puede incluir diversos tipos de widgets y elementos, como controles deslizantes, casillas de verificación y botones. Por ejemplo:

st.sidebar.markdown("### Configuraciones")
activar_alertas = st.sidebar.checkbox("Activar alertas")
nivel_umbral = st.sidebar.slider("Nivel de umbral", 0, 100, 50)

Estos controles permiten que el usuario ajuste parámetros que afectan el comportamiento o la visualización de la aplicación, mejorando la interactividad.

Organizar contenido en la barra lateral

Es posible agrupar elementos en la barra lateral utilizando contenedores como st.sidebar.container() o st.sidebar.expander(). Por ejemplo, para crear un panel plegable:

with st.sidebar.expander("Más opciones"):
    st.write("Configuraciones adicionales aquí.")
    opcion_avanzada = st.radio("Elegir una opción:", ["A", "B", "C"])

De esta manera, se mantiene la barra lateral organizada y se evita saturar al usuario con demasiadas opciones visibles simultáneamente.

Uso de íconos y estilo en la barra lateral

Para mejorar la estética y la usabilidad, se pueden añadir íconos y formatear el texto dentro de la barra lateral. Por ejemplo:

st.sidebar.title("⚙️ Configuración")
st.sidebar.markdown("Ajuste los parámetros de la aplicación según sus preferencias.")

Además, mediante el uso de Markdown, es posible destacar palabras clave en negrita o añadir enlaces y listas.

Implementación de navegación con botones

Otra forma de facilitar la navegación es mediante el uso de botones en la barra lateral. Por ejemplo:

if st.sidebar.button("Recargar datos"):
    cargar_datos()
    st.success("Datos recargados exitosamente.")

Este enfoque permite que el usuario ejecute acciones específicas sin abandonar la página actual.

Ejemplo completo de navegación

A continuación, se presenta un ejemplo que integra varios elementos para crear una navegación eficaz:

import streamlit as st

st.sidebar.image("logo.png", use_container_width=True)
st.sidebar.title("Menú Principal")

seccion = st.sidebar.radio("Ir a:", ["Inicio", "Datos", "Modelos", "Resultados"])

st.sidebar.markdown("---")
st.sidebar.write("Aplicación desarrollada por el equipo de **Data Science**.")

if seccion == "Inicio":
    st.header("Bienvenido a la Aplicación")
    st.write("Esta es la sección de inicio.")
elif seccion == "Datos":
    st.header("Exploración de Datos")
    st.write("Aquí se muestran los datos y su análisis exploratorio.")
elif seccion == "Modelos":
    st.header("Entrenamiento de Modelos")
    st.write("Configuración y entrenamiento de los modelos.")
elif seccion == "Resultados":
    st.header("Resultados y Conclusiones")
    st.write("Interpretación de los resultados obtenidos.")

Este ejemplo ilustra cómo la barra lateral se convierte en el eje central de la navegación, permitiendo al usuario desplazarse entre secciones de forma fluida.

Consideraciones sobre la experiencia de usuario

Al implementar la barra lateral, es importante mantener una interfaz limpia y evitar sobrecargarla con demasiados elementos. Se recomienda:

• Priorizar las opciones más relevantes para el usuario.
• Utilizar separadores (st.sidebar.markdown("---")) para organizar el contenido.
• Proporcionar instrucciones claras y concisas.
• Adaptar el contenido de la barra lateral en función de la interacción del usuario si es necesario.

Integración con el flujo de la aplicación

La barra lateral puede influir en el estado global de la aplicación. Por ejemplo, las opciones seleccionadas en st.sidebar pueden determinar qué datos se cargan o qué visualizaciones se muestran. Es fundamental gestionar correctamente el estado para asegurar que los cambios se reflejen adecuadamente en la interfaz.

Mejoras adicionales con st.sidebar

Además de los elementos mencionados, st.sidebar permite incluir:

• Archivos subidos: archivo = st.sidebar.file_uploader("Cargar archivo")
• Entradas de texto: nombre = st.sidebar.text_input("Ingrese su nombre")
• Selecciones múltiples: opciones = st.sidebar.multiselect("Seleccione opciones:", ["A", "B", "C"])

Estos widgets enriquecen la interacción y permiten recopilar información del usuario de manera eficiente.

Personalización de estilos con temas y CSS personalizado

La personalización de estilos en Streamlit permite adaptar la apariencia de las aplicaciones para que coincida con la identidad visual deseada. Mediante el uso de temas y CSS personalizado, es posible modificar colores, fuentes y estilos para crear una experiencia de usuario más atractiva y coherente.

Para comenzar, Streamlit ofrece la posibilidad de utilizar temas predeterminados, como el modo oscuro y el modo claro. Por defecto, las aplicaciones utilizan el tema claro, pero se puede cambiar al modo oscuro añadiendo una configuración en el archivo config.toml. Este archivo se ubica en el directorio ~/.streamlit/. Para establecer el tema oscuro, se debe agregar:

[theme]
base = "dark"

Con esta configuración, la aplicación empleará el tema oscuro, proporcionando una estética diferente que puede ser más cómoda para algunos usuarios.

Además de los temas básicos, Streamlit permite crear temas personalizados especificando colores para distintos elementos de la interfaz. En el archivo config.toml, se pueden definir las siguientes propiedades:

[theme]
primaryColor = "#1E90FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"
font = "sans serif"

En este ejemplo, se han establecido colores personalizados para el color primario, el fondo, el fondo secundario y el color del texto. También se puede especificar la fuente preferida. Es importante utilizar códigos de color en formato hexadecimal y elegir combinaciones que aseguren una buena legibilidad.

Para aplicar estilos más detallados, Streamlit permite incluir CSS personalizado dentro de la aplicación. Esto se logra insertando código CSS utilizando st.markdown() con el parámetro unsafe_allow_html=True. Por ejemplo:

st.markdown(
    """
    <style>
    .titulo-personalizado {
        font-size:32px;
        color:#1E90FF;
        text-align:center;
    }
    </style>
    """,
    unsafe_allow_html=True
)

Con este CSS, se define una clase .titulo-personalizado que puede aplicarse a elementos de la interfaz. Para utilizarla:

st.markdown('<h1 class="titulo-personalizado">Mi Aplicación Personalizada</h1>', unsafe_allow_html=True)

Esta técnica permite un alto grado de personalización, pero es necesario ser cauteloso. El parámetro unsafe_allow_html=True desactiva ciertas protecciones y podría exponer la aplicación a riesgos de seguridad si no se utiliza correctamente.

Otro ejemplo de uso de CSS personalizado es modificar el estilo de los componentes existentes. Por ejemplo, para cambiar el fondo de la barra lateral:

st.markdown(
    """
    <style>
    [data-testid="stSidebar"] {
        background-color: #F0F8FF;
    }
    </style>
    """,
    unsafe_allow_html=True
)

En este caso, se accede al elemento con data-testid="stSidebar" y se aplica un color de fondo diferente, lo que permite personalizar aún más el aspecto de la aplicación.

Además, se pueden incorporar fuentes personalizadas utilizando @import en CSS. Por ejemplo, para usar una fuente de Google Fonts:

st.markdown(
    """
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    html, body, [class*="css"]  {
        font-family: 'Roboto', sans-serif;
    }
    </style>
    """,
    unsafe_allow_html=True
)

Esto aplicará la fuente Roboto a toda la aplicación, ofreciendo una apariencia más personalizada y profesional.

Es posible también modificar estilos de componentes específicos. Por ejemplo, para cambiar el estilo de los botones:

st.markdown(
    """
    <style>
    .stButton>button {
        background-color: #1E90FF;
        color: white;
        border-radius: 10px;
        height: 50px;
        width: 200px;
        font-size: 18px;
    }
    </style>
    """,
    unsafe_allow_html=True
)

Con este código, se personaliza la apariencia de todos los botones en la aplicación, ajustando el color, tamaño y forma.

Es importante tener en cuenta que el uso de CSS personalizado requiere cierto conocimiento de CSS y de cómo interactúa con los elementos generados por Streamlit. Para identificar los selectores adecuados, se pueden utilizar las herramientas de inspección de elementos del navegador.

Sin embargo, se debe ser prudente al manipular elementos internos, ya que futuras actualizaciones de Streamlit podrían cambiar las clases o estructuras HTML, afectando los estilos personalizados. Por ello, es recomendable limitar los cambios a elementos menos propensos a modificaciones.

Para una personalización avanzada, se pueden combinar los temas definidos en config.toml con CSS personalizado. Por ejemplo, establecer un tema base y luego ajustar detalles específicos dentro de la aplicación:

[theme]
base = "dark"
primaryColor = "#FFD700"
secondaryBackgroundColor = "#2F4F4F"

Y luego en la aplicación:

st.markdown(
    """
    <style>
    .st-header {
        background-color: #FFD700;
    }
    </style>
    """,
    unsafe_allow_html=True
)

Esta combinación permite lograr un alto nivel de coherencia visual y adaptabilidad a las necesidades específicas de la aplicación.

Otra opción es utilizar librerías externas o componentes de la comunidad que facilitan la incorporación de estilos personalizados. Por ejemplo, la librería streamlit-frontend proporciona herramientas adicionales para el diseño y la estilización de aplicaciones Streamlit.