Tema 7: Aula Virtual "Hablemos de Bullying"

Hablemos de Bullying

Código: dm5hzhet

Bullying © 2025 by Greis19 is licensed under CC BY-NC-ND 4.0

Tema 6: Gamificación "Hablemos de Educación Sexual"

Hablemos de Educación Sexual © 2025 by Greis19 is licensed under CC BY-NC-ND 4.0

Tema 5 Aplicación Móvil: Mi Diario Emocional

https://gemini.google.com/share/0140c0547212

Mi Diario Emocional © 2025 by Greis19 is licensed under CC BY-NC-ND 4.0

🧠 PROMPTS UTILIZADOS PARA CREAR LA APLICACIÓN Mi Diario de Bienestar - Aplicación de Registro y Reflexión Emocional

• Estudiante: Génesis Reis Castillo 
• Materia: Seminario Opcional
• Fecha: Octubre 2025 
• Tema: Seguimiento y Análisis de Emociones

📋 PROCESO DE DESARROLLO ITERATIVO

Esta aplicación se desarrolló mediante 5 prompts principales utilizando Gemini IA en modo Canvas. Cada prompt construyó sobre el anterior para crear una aplicación funcional y persistente.

🎬 PROMPT 1: ESTRUCTURA BASE, MOOD TRACKER Y FIREBASE SETUP

Objetivo: Crear la estructura inicial de la aplicación, el componente central de registro de humor (Mood Tracker) y la configuración de la persistencia de datos con Firestore.

Prompt Utilizado:

Crea una aplicación interactiva móvil completa sobre un Diario Emocional o de Bienestar
para usuarios que buscan registrar su estado de ánimo y reflexionar diariamente.

TECNOLOGÍAS:

- HTML5 + CSS3 + JavaScript vanilla (sin frameworks)

- Tailwind CSS (CDN)

- Font Awesome (CDN)

- Google Fonts: Inter (texto)

- Firebase SDK (Auth y Firestore) para persistencia de datos

DISEÑO VISUAL (Tema Calma/Minimalista):

Paleta de colores:

- Primario (Suave): #5C6BC0 (Índigo)

- Secundario (Éxito): #66BB6A (Verde Lima)

- Fondo (Claro): #F4F5F9 (Gris muy claro)

- Contraste (Oscuro): #263238 (Gris Oscuro)

- Alerta (Calidez): #FFB74D (Naranja Suave)

Estilo:

- Fondo minimalista y limpio

- Sombras suaves: 0 8px 25px rgba(38, 50, 56, 0.05)

- Border-radius: 8px en tarjetas y botones

- Hover effects: cambio de color de fondo y ligera elevación.

CONFIGURACIÓN DE DATOS (MANDATORIO):

1. Inicializa Firebase (Auth y Firestore) usando las variables globales `__firebase_config` y `__initial_auth_token`.

2. Implementa `signInWithCustomToken` o `signInAnonymously` al inicio.

3. Define la estructura de datos: Colección privada en `/artifacts/{appId}/users/{userId}/mood_entries`.

ESTRUCTURA DE LA APP:

1. HEADER:

    - Título "Mi Diario de Bienestar" (fuente Inter)

    - Icono de perfil o usuario (muestra el `userId` truncado si es necesario para espacio, pero guárdalo completo)

    - Botón para cambiar de vista (Home / Historial / Coach)

2. PÁGINA PRINCIPAL (home-view):

    - Componente central: **Mood Tracker** (Registro de Humor del Día)

        - Título: "¿Cómo te sientes hoy?"

        - 5 iconos grandes para seleccionar la emoción (e.g., `fa-face-laugh`, `fa-face-smile`, `fa-face-meh`, `fa-face-frown`, `fa-face-sad-cry`).

        - Input de texto debajo: `placeholder="Escribe un breve resumen de tu día (máx. 200 caracteres)"`

        - Botón "Registrar Emoción" (color Primario)

    - Se debe verificar si ya hay una entrada para la fecha actual (YYYY-MM-DD) antes de permitir registrar.

 

3. VISTAS SECUNDARIAS (Inicialmente ocultas):

    - **Historial (history-view):** Lista de las 5 últimas entradas.

    - **Coach de Reflexión (coach-view):** Un área de chat (estática inicialmente).

4. ESTRUCTURA DE LA ENTRADA (Documento Firestore):

    - `id`: string (UUID o doc ID)

    - `userId`: string

    - `date`: string (YYYY-MM-DD)

    - `mood`: number (1 a 5, siendo 5 el mejor)

    - `summary`: string (el texto del input)

    - `timestamp`: serverTimestamp

Genera el código HTML completo funcional con estas características.

Resultado: Aplicación básica con diseño minimalista, registro de humor funcional y persistencia de datos inicializada con Auth/Firestore.

📊 PROMPT 2: VISUALIZACIÓN DE DATOS (GRÁFICAS)

Objetivo: Implementar la vista de Historial (History) con carga de datos persistentes desde Firestore y la visualización del progreso emocional mediante una gráfica de línea interactiva.

Prompt Utilizado:

Expande la funcionalidad de la aplicación "Mi Diario de Bienestar".

1. REFINAMIENTO DE CARGA DE DATOS:

- En la vista de Historial (`history-view`), carga las últimas 30 entradas de la colección `mood_entries` del usuario actual.

- Utiliza `onSnapshot` para escuchar los cambios en tiempo real y actualizar la UI inmediatamente.

2. COMPONENTE DE GRÁFICA DE LÍNEA (Mood Chart):

- Crea un componente visualmente atractivo que muestre el valor `mood` (1-5) a lo largo de los días.

- Implementa la gráfica usando **SVG puro y JavaScript** (sin librerías pesadas) para dibujar una línea de tendencia.

- Eje X: Días (fechas).

- Eje Y: Nivel de humor (1 a 5).

- La gráfica debe ser responsiva y utilizar el color Primario (`#5C6BC0`).

3. LISTA DETALLADA DE ENTRADAS:

- Debajo de la gráfica, muestra una lista de todas las entradas cargadas.

- Cada elemento de la lista debe ser una tarjeta con:

    - Fecha.

    - Icono de humor grande.

    - El texto del resumen (`summary`).

    - Icono para editar (estático por ahora).

    - Icono para eliminar (funcional: implementa la función `deleteEntry` de Firestore).

4. UX/UI:

- Agrega un mensaje de bienvenida si el usuario no tiene entradas.

- Implementa transiciones suaves (300ms) en la carga de datos.

Resultado: Historial funcional con gráfica de tendencia emocional en tiempo real y posibilidad de eliminar entradas.

💬 PROMPT 3: EL COACH DE REFLEXIÓN (LLM SIMULADO)

Objetivo: Activar la vista del "Coach de Reflexión" (coach-view) y simular una interacción con un modelo de lenguaje (LLM) para generar análisis y preguntas reflexivas sobre las entradas del usuario.

Prompt Utilizado:

Implementa la vista `coach-view` con un chatbot que simule ser un Coach de Bienestar llamado **"Oráculo de Ítaca"**.

1. DISEÑO DEL CHATBOT:

- Usa un diseño de chat clásico: burbujas de mensaje (gris claro para usuario, color Primario para Oráculo).

- Icono del Oráculo de Ítaca: `fas fa-brain` (o `fas fa-scroll` como alternativa).

- Input de texto + botón enviar.

- El chat debe ser scrollable automáticamente.

2. BASE DE CONOCIMIENTO (Preguntas Predefinidas):

- El chatbot NO usará la API real, sino que responderá a preguntas predefinidas basándose en los datos del usuario (que ya están cargados en el JS, pero pueden ser simulados si es necesario).

3. DETECCIÓN DE PREGUNTAS CLAVE:

- **"Analiza mi última semana"** (KEYWORD: ultima semana, analiza, 7 dias)

    → Respuesta: Muestra la media de humor de los últimos 7 días y pregunta: "¿Qué patrón notas en tus días de mayor estrés/alegría? ¿Fue tu sueño o tu dieta diferente?"

- **"Dame un consejo"** (KEYWORD: consejo, ayuda, apoyo)

    → Respuesta: Cita inspiradora sobre la resiliencia (e.g., "La resiliencia no es cuán duro golpeas, sino cuán duro puedes ser golpeado y seguir avanzando.") + pregunta de seguimiento.

- **"¿Quién soy hoy?"** (KEYWORD: quien soy, hoy)

    → Respuesta: Analiza la entrada de humor más reciente y devuelve una reflexión basada en la emoción (e.g., Si el mood es 5: "Parece que hoy tu **alegría** te impulsa. ¿Qué puedes hacer para anclar esta sensación?")

- **"Ver mis picos de estrés"** (KEYWORD: pico, estres, peor dia)

    → Respuesta: Identifica la fecha con el mood más bajo (1 o 2) y muestra el resumen de ese día, pidiendo al usuario que reflexione sobre el evento.

- **RESPUESTA POR DEFECTO:** Si la pregunta no coincide, el Oráculo debe responder: "Mi análisis se centra en tu bienestar emocional. ¿Te gustaría que analice tu última semana, te dé un consejo o hablemos sobre tus picos de humor?"

4. TIEMPO DE RESPUESTA SIMULADO:

- Agrega un retraso de 1 a 2 segundos en la respuesta del chatbot para simular el procesamiento de una IA.

Resultado: Una experiencia de chat conversacional y reflexiva que analiza los datos del usuario de forma predefinida, dando la sensación de tener un coach personal.

✏️ PROMPT 4: REFINAMIENTO DE UX/UI Y EDICIÓN/ELIMINACIÓN

Objetivo: Mejorar la usabilidad de la aplicación añadiendo la funcionalidad de edición en el historial y puliendo el diseño móvil (responsive).

Prompt Utilizado:

Mejora la aplicación de "Mi Diario de Bienestar" con funcionalidades críticas de UX/UI.

1. FUNCIONALIDAD DE EDICIÓN COMPLETA:

- Al hacer clic en el icono de "Editar" en la tarjeta del historial:

    - Abre un modal (ventana emergente) o una sección flotante.

    - Este modal debe precargar los valores de `mood` y `summary` de la entrada seleccionada.

    - Permite al usuario modificar ambos campos.

    - Botón "Guardar Cambios": Implementa la función `updateDoc` de Firestore para sobrescribir la entrada existente.

2. VALIDACIÓN DE DATOS (MANDATORIO):

- Antes de registrar o actualizar una entrada, valida que:

    - El `mood` haya sido seleccionado (entre 1 y 5).

    - El `summary` no esté vacío.

    - Muestra un mensaje de error claro (color Rojo error) si la validación falla (en lugar de usar `alert()`).

3. REFINAMIENTO RESPONSIVE:

- Asegura que la gráfica de línea se adapte perfectamente al ancho de la pantalla móvil (utiliza el 100% del contenedor).

- Ajusta el tamaño de los iconos de humor en la vista principal para que no se vean apretados en pantallas pequeñas.

- Utiliza la clase `flex-col` en móvil y `md:flex-row` en desktop para una transición fluida.

4. POLISH VISUAL:

- Agrega un sutil efecto de transición de color (300ms) a los botones y tarjetas al hacer hover.

- Asegura que los textos sean grandes y legibles (fuente Lato).

Resultado: Aplicación robusta con CRUD (Crear, Leer, Actualizar, Eliminar) completo y una experiencia de usuario mejorada.

⭐ PROMPT 5: OPTIMIZACIÓN AVANZADA Y ESTADÍSTICAS

Objetivo: Añadir métricas de motivación (Racha Diaria) y cubrir casos de uso avanzado para la aplicación.

Prompt Utilizado:

Finaliza el desarrollo de "Mi Diario de Bienestar" añadiendo funciones de motivación y optimización.

 

1. MÉTRICA DE RACHA DIARIA (Daily Streak):

- En la vista principal, debajo del Mood Tracker, agrega una tarjeta de "Motivación" (color Alerta).

- Calcula la **Racha Diaria (Streak)**: El número consecutivo de días en que el usuario ha registrado una entrada.

- Muestra el valor en grande con un icono de llama o estrella: "🔥 Racha Actual: X días".

- Implementa la lógica en JavaScript para recorrer los datos históricos y calcular la racha (debe ser eficiente).

2. ESTADÍSTICAS RÁPIDAS (Home View):

- Agrega una segunda tarjeta debajo del Mood Tracker que muestre:

    - Humor Promedio Histórico (cálculo de la media del campo `mood`).

    - Días Registrados Total.

3. OPTIMIZACIÓN DE DATOS:

- Mejora la función de carga de datos para manejar colecciones grandes, asegurando que el `onSnapshot` solo descargue los campos estrictamente necesarios si fuera una aplicación a gran escala (aunque por ahora cargamos todo para la gráfica).

- Agrega manejo de errores generalizado (`try...catch`) para las operaciones de Firestore y muéstralo en el console.log, en caso de fallas de conexión o permisos.

4. UX: DÍAS SIN REGISTRO:

- En la gráfica de línea del historial, si faltan días en la secuencia (es decir, el usuario se saltó un día), la línea debe interrumpirse o mostrar un punto de valor cero/nulo, en lugar de conectar el día anterior con el día posterior, lo que distorsionaría la tendencia.

5. SALUDO CONTEXTUAL:

- Modifica el mensaje de bienvenida de la página principal para que salude al usuario por su racha: "¡Hola! Tu racha actual es de X días. Sigue así."

Resultado: Aplicación con métricas de motivación, estadísticas rápidas, y manejo avanzado de la visualización de datos en el historial.

📝 DATOS DE LA BASE DE CONOCIMIENTO (SIMULADO)

Fuentes de Información:

1. Base de Datos Firestore:

• Colección: mood_entries (privada por usuario)
• Datos: mood (1-5), summary (texto), date (YYYY-MM-DD)

2. Lógica del "Oráculo de Ítaca" (Simulado):

• Respuestas generadas por lógica de palabras clave en JavaScript.
• Análisis basado en el promedio, el día de menor humor, y la entrada más reciente.
• Persona: Coach de bienestar, tono calmado y reflexivo.

3. Investigación adicional (Simulado):

• Conceptos de psicología positiva y atención plena.
• Métricas de gamificación (racha).

📊 RESUMEN DEL PROCESO

Enfoque Iterativo:

PROMPT 1 (Base + Setup)

    ↓

Estructura, Mood Tracker, Auth/Firestore Initialization

    ↓

PROMPT 2 (Visualización)

    ↓

Carga de datos con onSnapshot, Gráfica de Línea SVG, Delete

    ↓

PROMPT 3 (Inteligencia)

    ↓

Chatbot "Oráculo de Ítaca" con lógica de reflexión (LLM Simulado)

    ↓

PROMPT 4 (CRUD Completo)

    ↓

Funcionalidad de Edición (Update), Validaciones y Mejoras Responsive

    ↓

PROMPT 5 (Métricas)

    ↓

Racha Diaria (Streak), Estadísticas Rápidas, Optimización de Gráfica

    ↓

APLICACIÓN COMPLETA Y FUNCIONAL

Métricas Finales:

Componente	Logro
Persistencia	Firebase Firestore (Real-time)
Vistas Principales	Home, Historial, Coach
Interacción de Datos	CRUD Completo (Create, Read, Update, Delete)
Visualización	Gráfica de Línea SVG (Mood over time)
Métricas Clave	Racha Diaria (Streak), Humor Promedio
Chatbot	Oráculo de Ítaca (Análisis y Reflexión)

 

🎓 CONCLUSIÓN

Este proceso de ingeniería de prompts demuestra la creación de una aplicación de diario emocional con persistencia de datos (Firestore) y un componente interactivo de reflexión (Chatbot simulado). La evolución de los prompts asegura que se establecen las bases de datos y seguridad primero, se añaden las funciones esenciales de visualización, y luego se refina la experiencia con inteligencia artificial simulada y mejoras de UX/UI, resultando en una aplicación robusta y útil para el bienestar personal.

 

Tema 4: Responsabilidad Afectiva

Responsabildad Afectiva © 2025 by Greis19 is licensed under CC BY-NC-ND 4.0

Tema 3: Metodologías Activas En La Educación Actual

Música de Tunetank de Pixabay 

Revistas de Alto Impacto (Q1-Q2) mencionadas en el guion:

1. Aprendizaje activo en la educación superior. (versión impresa ISSN: 1469-7874).

2. Computadoras y educación. (versión impresa ISSN: 0360-1315).

3. Revisión de la investigación educativa. (versión impresa ISSN: 1747-938X).

Metodologías Activas En La Educación Actual © 2025 de Greis19 está licenciada bajo CC BY-NC-ND 4.0

Tema 2: Estrategias Activas de Enseñanza-Aprendizaje Virtual

Tema 1: Tics en la Educación