Update app.py

app.py

@@ -1,34 +1,56 @@
 import streamlit as st
 
-# Usando markdown para estilizar el título principal del póster
-st.markdown("""
-    <h1 style="color:#0A4DAB; text-align:center; font-size:50px;">Modelos de Diseño Instruccional para Cursos en Línea</h1>
-    """, unsafe_allow_html=True)
-
-# Usando markdown y HTML para los títulos de sección y listas
-st.markdown("""
-    <h2 style="color:#33A1FD;">Cuerpo Principal</h2>
-    <p style="font-size:18px;">Dividiríamos el cuerpo principal en secciones, cada una representando un modelo de diseño instruccional diferente.</p>
-    
-    <h2 style="color:#33A1FD;">Modelo ADDIE</h2>
-    <ul>
-    <li><b>Análisis:</b> Determina necesidades de los estudiantes y objetivos del curso.</li>
-    <li><b>Diseño:</b> Desarrolla los resultados de aprendizaje y selecciona el contenido.</li>
-    <li><b>Desarrollo:</b> Crea y reúne los materiales didácticos.</li>
-    <li><b>Implementación:</b> Ofrece el curso a los estudiantes.</li>
-    <li><b>Evaluación:</b> Evalúa el curso y realiza ajustes basados en el feedback.</li>
-    </ul>
-    
-    <h2 style="color:#33A1FD;">Modelo Dick, Carey y Carey</h2>
-    <ul>
-    <li><b>Evaluación de Necesidades:</b> Identifica qué necesitan aprender los estudiantes.</li>
-    <li><b>Establecimiento de Metas Instruccionales:</b> Define lo que se espera que los estudiantes logren.</li>
-    <li><b>Diseño Instruccional:</b> Detalla las actividades que ayudarán a los estudiantes a alcanzar esas metas.</li>
-    <li><b>Evaluación:</b> Asegura que los objetivos se cumplan efectivamente.</li>
-    </ul>
-
-    <h2 style="color:#33A1FD;">Modelo de Morrison, Ross y Kemp</h2>
-    <ul>
-    <li><b>Plan Curricular:</b> Se enfoca en un ciclo continuo de revisión de actividades interrelacionadas para un aprendizaje integral.</li>
-    </ul>
-    """, unsafe_allow_html=True)
+# Función para agregar CSS personalizado
+def local_css(file_name):
+    with open(file_name) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+# Función para crear un bloque de modelo con estilo
+def modelo_block(titulo, descripcion, color):
+    st.markdown(f"""
+        <div style="
+            border-left: 5px solid {color};
+            padding: 10px;
+            margin: 10px 0;
+            background-color: #f1f1f1;
+        ">
+            <h4 style="color:{color};">{titulo}</h4>
+            <p>{descripcion}</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+# Agregar CSS local si es necesario (no incluido en este ejemplo)
+# local_css("path_to_your_css_file.css")
+
+# Título principal
+st.markdown("<h1 style='text-align: center; color: magenta;'>Modelos de Diseño Instruccional (DI)</h1>", unsafe_allow_html=True)
+
+# Modelo ADDIE
+modelo_block("Modelo ADDIE", """
+- Análisis: Determina necesidades de los estudiantes y objetivos del curso.
+- Diseño: Desarrolla los resultados de aprendizaje y selecciona el contenido.
+- Desarrollo: Crea y reúne los materiales didácticos.
+- Implementación: Ofrece el curso a los estudiantes.
+- Evaluación: Evalúa el curso y realiza ajustes basados en el feedback.
+""", "#8A2BE2")
+
+# Modelo Dick, Carey y Carey
+modelo_block("Modelo Dick, Carey y Carey", """
+- Evaluación de Necesidades: Identifica qué necesitan aprender los estudiantes.
+- Establecimiento de Metas Instruccionales: Define lo que se espera que los estudiantes logren.
+- Diseño Instruccional: Detalla las actividades que ayudarán a los estudiantes a alcanzar esas metas.
+- Evaluación: Asegura que los objetivos se cumplan efectivamente.
+""", "#5F9EA0")
+
+# Modelo de Morrison, Ross y Kemp
+modelo_block("Modelo de Morrison, Ross y Kemp", """
+- Plan Curricular: Se enfoca en un ciclo continuo de revisión de actividades interrelacionadas para un aprendizaje integral.
+""", "#DC143C")
+
+# Agrega el resto de modelos siguiendo la estructura anterior
+
+# Referencias (agrega tus referencias aquí)
+st.markdown("### Referencias")
+st.markdown("Tus referencias aquí")
+
+# Ejecuta esto en tu terminal local: streamlit run your_script.py