Módulo de aprendizaje · Detalle

Laboratorio de Bolsa: Simulación del Mercado Bursátil

Este módulo reúne conceptos centrales de una simulación web interactiva: datos estructurados, gestión de estado, lógica de eventos y visualización dinámica en el navegador. En su núcleo se encuentra la expansión paso a paso de un prototipo funcional hacia una simulación del mercado bursátil comprensible.

Tiempo 180 minutos
Idioma HTML
Probar en línea Demo
Imagen previa: Laboratorio de Bolsa: Simulación del Mercado Bursátil

Organización del curso

Codificación con IA en formato ProtoTypeFirst

El curso utiliza codificación con IA como soporte contextual directamente dentro del estado actual del proyecto. El trabajo comienza con un prototipo funcional que se analiza, expande, prueba y reflexiona paso a paso.

Apoyo didáctico integrado de IA

La codificación con IA permite realizar cambios dirigidos en el código existente, explica los errores y hace comprensibles los pasos de desarrollo. Para docentes, esto crea un marco para enseñar que aborda transparentemente las solicitudes, modificaciones y versiones.

Desarrollo Estructurado

Las tareas se basan en el estado actual del proyecto y avanzan desde ajustes pequeños y claramente definidos hacia extensiones más complejas. De esta manera, la IA no se utiliza como reemplazo del entendimiento profesional, sino como herramienta para el análisis, implementación y prueba planificada del código.

Prototipo Primero

Todos los contenidos comienzan con un prototipo ya funcional. En el laboratorio de bolsa, este prototipo se desarrolla paso a paso en una simulación más diferenciada mediante modelos de datos, lógica del mercado, visualización y evaluación.

Clasificación Didáctica

El módulo está clasificado compactamente en términos de contenido y práctica docente.

Establecimiento de Objetivos Profesionales

En el centro se modela una simulación de bolsa y lugar de trading como aplicación web con HTML, CSS y JavaScript. El módulo combina estructuras de datos, cambios de estado, procesamiento de eventos y generación dinámica del DOM en un modelo global comprensible. A través del trabajo sobre un prototipo existente, la programación se convierte en experiencia mediante el análisis paso a paso, extensión y prueba de un sistema funcional.

Desarrollo de Competencias

  • Modelado de datos: Acciones, industrias, tendencias de precios bursátiles, valores del portafolio y estados del juego se estructuran en objetos y arrays.
  • Algoritmos comprensibles: Ticks del mercado, transacciones de compra y venta, así como cálculos del portafolio hacen visibles los cambios de estado.
  • Interacciones implementadas: Botones, campos de selección y manejo de eventos vinculan las acciones del usuario con la lógica del programa.
  • El código refleja el desarrollo posterior: Los cambios impulsados por algoritmos se formulan, prueban y verifican contra el código existente.

Valor educativo

  • El prototipo funcional permite un punto de entrada profesional rápido y reduce la barrera para extensiones más complejas.
  • La estructura de tareas apoya una progresión clara desde la base de datos hasta la representación, simulación, evaluación y ajuste fino.
  • Tareas extendidas como fases del mercado, mensajes, bots o puntuaciones altas permiten diferenciar según profundidad técnica y complejidad.

Flujo de lecciones

Las tareas se presentan en el orden del JSON y están organizadas didácticamente.

1

Más acciones y base de datos más robusta

La base de datos del mercado se amplía con acciones adicionales, abreviaturas, nombres, industrias, precios iniciales y evoluciones de valor. El enfoque aquí es la comprensión de que una interfaz dinámica permanece escalable mediante un modelado de datos limpio sin requerir estructuras HTML adicionales.

2

Visualización de tendencias más clara

La visualización por acción se amplía para que el desarrollo del precio pueda reconocerse como ascendente, descendente o estable. Este paso fortalece la comprensión de comparaciones entre estados actuales y anteriores, así como la conexión entre lógica, salida textual y clases CSS.

3

Seleccionar gráfico para acción

El gráfico anteriormente fijo a la primera acción se hace flexible mediante una opción de selección. Esto muestra cómo las decisiones del usuario en el estado del juego pueden almacenarse y luego utilizarse para controlar una función de dibujo.

4

Preparar eventos noticiosos

Un array de estructuras de mensajes de eventos organiza el texto, la industria afectada y el impacto en el precio de forma estructurada. Esta tarea introduce otro modelo de datos y prepara la conexión entre los eventos y los movimientos del mercado previamente.

5

Los eventos afectan a las industrias

Los eventos preparados se conectan con la lógica de precios solo afectando acciones de la industria relevante. Esto hace comprensible, desde un punto profesional, la relación causa-efecto dentro de la simulación.

6

Introducir fases del mercado

Las fases del mercado: calma, nerviosismo, crash y boom amplían la simulación con estados globales. Este paso muestra cómo un estado único puede influir sistemáticamente en la intensidad de los cambios de precio.

7

Traders automáticos como participantes del mercado

Se modelan traders automáticos simples con nombres, estrategias y dinero como participantes adicionales del mercado. Sus acciones basadas en reglas hacen evidente cómo las simulaciones pueden ampliarse mediante actores autónomos.

8

Lista de seguimiento y alarma de acciones

Una lista de seguimiento permite marcar acciones seleccionadas y verificar umbrales simples de alarma. Esta tarea didácticamente amplía la simulación con observación, prueba de condiciones y retroalimentación orientada a objetivos.

9

Día de trading simulado

Los ticks individuales del mercado se convierten en un día de trading limitado por tiempo, con inicio, trading activo y fin. Este paso introduce máquinas de estados en forma simple y hace visible el control del programa sobre las acciones permitidas.

10

Beneficios y pérdidas en el portafolio

El portafolio se ampliará con indicadores de beneficio y pérdida por posición. Se almacenará un precio de entrada simple o el promedio de compra, haciendo profesionalmente comprensible los cálculos sobre múltiples puntos de compra.

11

Puntuación máxima por valor de activo

El valor de activos alcanzado se guarda como el mejor valor al final del día de trading y se muestra nuevamente al cargar. La tarea introduce almacenamiento persistente con localStorage como un concepto limitado pero tangible para la seguridad local de datos.

12

Polaco: Animación y vista móvil

Las animaciones, usabilidad en pantallas pequeñas y representación gráfica se mejoran en conclusión. Este paso conecta el diseño superficial con la calidad asegurada, ya que las funciones existentes deben permanecer sin cambios tras cada modificación.

Fragmento de código

El fragmento muestra el núcleo profesional de la simulación: datos del mercado estructurados, estado del juego y cambios de precio en cada tick.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const aktien = [
  { kuerzel: 'NOVA', name: 'NovaTech', branche: 'Tech', kurs: 42, verlauf: [39, 40, 41, 42] },
  { kuerzel: 'HEAL', name: 'Healix Medizin', branche: 'Medizin', kurs: 31, verlauf: [33, 32, 31, 31] }
];

const spielstand = {
  geld: 500,
  depot: {},
  marktphase: 'ruhig',
  tick: 1
};

function marktTick() {
  spielstand.tick = spielstand.tick + 1;
  aktien.forEach(function(aktie) {
    const zufall = Math.floor(Math.random() * 5) - 2;
    const neuerKurs = Math.max(3, aktie.kurs + zufall);
    aktie.kurs = neuerKurs;
    aktie.verlauf.push(neuerKurs);
    if (aktie.verlauf.length > 12) {
      aktie.verlauf.shift();
    }
  });
}
Este módulo hace comprensible la simulación combinando datos, estados, eventos y extensiones de código paso a paso.

La estructura de tareas apoya una organización clara de lecciones: desde ampliar la base de datos hasta lógica del curso y eventos hasta evaluar el depósito. Es posible diferenciar mediante extensiones como fases de mercado, traders automáticos, listas de seguimiento o puntuaciones máximas.

Solicita acceso de demostración y prueba el módulo en tu propio contexto de curso con un prototipo funcional como punto de partida.