A principio de año, unos amigos me enseñaron sobre unas bibliotecas de javascript que no conocía. Primero, @dmorganb me explicó sobre Svelte y cómo compite contra Angular, React y Vue. Después, @yuenlw me habló sobre D3.js y cómo es orientada a los datos.

Decidí probarlas creando un generador de mapas curriculares: "Mapa Curricular"

* Aplicación web

* Código fuente

Instrucciones:

1. Recibe un texto de configuración en formato JSON donde se define el plan de estudios: los cursos de cada bloque y, si se desea, los requisitos de cada curso, si ya el o la estudiante pasó el respectivo curso y una paleta de colores. Es más fácil de configurar en la computadora que en el celular y no se asusten si no saben qué es un JSON porque puse un ejemplo por predeterminado para que sólo lo tengan que modificar a su gusto.

2. Si la configuración tuviera algún error de formato se marca en rojo. Además, establecí una máxima restricción de 12 bloques y 10 cursos por bloque, si hubieran más bloques o cursos serían ignorados.

3. Se puede seleccionar las opciones de mostrar colores, mostrar cursos completados (hay una animación donde se resaltan con un borde más grueso) y mostrar requisitos (se muestran con líneas sólo si son del bloque anterior). El mapa curricular se actualiza al instante de modificar el texto de configuración y hay un botón para imprimirlo.

Cuando se abre la página, ya hay una configuración por predeterminado; espero que sirva como una guía: un(a) estudiante en el 4to bloque del Bachillerato en Ingeniería en Computación del Tecnológico de Costa Rica.

Así se ve visualmente:

Ésta es su configuración:

{
  "title": "BACHILLERATO EN INGENIERÍA EN COMPUTACIÓN",
  "colors": {
    "default": "lightgreen",
    "CI": "lightskyblue",
    "MA": "lightcoral",
    "IC": "lightgreen",
    "SE": "tan",
    "FH": "orchid",
    "CS": "gold",
    "AE": "lightsalmon",
    "done": "green"
  },
  "courses": [
    [
      { "code": "CI0200", "name": "EXAMEN DIAGNOSTICO", "done": 1 },
      { "code": "CI0202", "name": "INGLES BASICO", "done": 1 },
      { "code": "MA0101", "name": "MATEMATICA GENERAL", "done": 1 }
    ],
    [
      { "code": "CI1106", "name": "COMUNICACION ESCRITA", "done": 1 },
      { "code": "IC1802", "name": "INTRODUCCION A LA PROGRAMACION", "done": 1 },
      { "code": "IC1803", "name": "TALLER DE PROGRAMACION", "done": 1 },
      {
        "code": "IC1400",
        "name": "FUNDAMENTOS DE ORGANIZACION DE COMPUTADORAS",
        "done": 1
      },
      { "code": "MA1403", "name": "MATEMATICA DISCRETA", "done": 1 },
      { "code": "SE1100", "name": "ACTIVIDAD CULTURAL I", "done": 1 }
    ],
    [
      { "code": "CI1230", "name": "INGLES I", "reqs": ["CI0200", "CI0202"], "done": 1 },
      { "code": "FH1000", "name": "CENTROS DE FORMACION HUMANISTICA", "done": 1 },
      {
        "code": "IC2101",
        "name": "PROGRAMACION ORIENTADA A OBJETOS",
        "reqs": ["IC1802", "IC1803"],
        "done": 1
      },
      {
        "code": "IC3101",
        "name": "ARQUITECTURA DE COMPUTADORES",
        "reqs": ["IC1400", "IC1803"],
        "done": 1
      },
      { "code": "IC2001", "name": "ESTRUCTURAS DE DATOS", "done": 1 },
      {
        "code": "MA1102",
        "name": "CALCULO DIFERENCIAL E INTEGRAL",
        "reqs": ["MA0101", "MA1403"],
        "done": 1
      },
      { "code": "SE1200", "name": "ACTIVIDAD DEPORTIVA I", "done": 1 }
    ],
    [
      { "code": "CI1231", "name": "INGLES II", "reqs": ["CI1230"], "done": 1 },
      { "code": "CI1107", "name": "COMUNICACION ORAL", "reqs": ["CI1106"] },
      { "code": "IC4301", "name": "BASES DE DATOS I", "reqs": ["IC2001"], "done": 1 },
      {
        "code": "IC3002",
        "name": "ANALISIS DE ALGORITMOS",
        "reqs": ["IC2001", "MA1102"],
        "done": 1
      },
      { "code": "MA1103", "name": "CALCULO Y ALGEBRA LINEAL", "reqs": ["MA1102"], "done": 1 },
      { "code": "SE1400", "name": "ACTIVIDAD CULTURAL-DEPORTIVA" }
    ],
    [
      { "code": "CS2101", "name": "AMBIENTE HUMANO", "reqs": ["CI1107"] },
      { "code": "IC4302", "name": "BASES DE DATOS II", "reqs": ["IC4301"] },
      { "code": "IC5821", "name": "REQUERIMIENTOS DE SOFTWARE", "reqs": ["IC4301"] },
      { "code": "IC4700", "name": "LENGUAJES DE PROGRAMACION", "reqs": ["IC3002", "IC3101"] },
      { "code": "MA2404", "name": "PROBABILIDADES", "reqs": ["MA1103"] }
    ],
    [
      {
        "code": "CS3401",
        "name": "SEMINARIO DE ESTUDIOS FILOSOFICOS HISTORICOS",
        "reqs": ["CS2101"]
      },
      { "code": "IC6821", "name": "DISEÑO DE SOFTWARE", "reqs": ["IC5821"] },
      { "code": "IC4810", "name": "ADMINISTRACION DE PROYECTOS", "reqs": ["IC5821"] },
      { "code": "IC5701", "name": "COMPILADORES E INTERPRETES", "reqs": ["IC4700"] },
      { "code": "MA3405", "name": "ESTADISTICA", "reqs": ["MA2404"] }
    ],
    [
      { "code": "CS4402", "name": "SEMINARIO DE ESTUDIOS COSTARRICENSES", "reqs": ["CS3401"] },
      { "code": "IC4003", "name": "ELECTIVA I" },
      {
        "code": "IC6831",
        "name": "ASEGURAMIENTO DE LA CALIDAD DEL SOFTWARE",
        "reqs": ["IC4810", "IC6821"]
      },
      { "code": "IC7900", "name": "COMPUTACION Y SOCIEDAD", "reqs": ["IC4810"] },
      { "code": "IC6600", "name": "PRINCIPIOS DE SISTEMAS OPERATIVOS", "reqs": ["IC5701"] },
      { "code": "IC6400", "name": "INVESTIGACION DE OPERACIONES", "reqs": ["MA3405"] }
    ],
    [
      { "code": "AE4208", "name": "DESARROLLO DE EMPRENDEDORES" },
      { "code": "IC5001", "name": "ELECTIVA II" },
      {
        "code": "IC7841",
        "name": "PROYECTO DE INGENIERIA DE SOFTWARE",
        "reqs": ["IC4302", "IC6831"]
      },
      { "code": "IC7602", "name": "REDES", "reqs": ["IC6600"] },
      { "code": "IC6200", "name": "INTELIGENCIA ARTIFICIAL", "reqs": ["IC5701", "IC6400"] }
    ],
    [
      {
        "code": "IC8842",
        "name": "PRACTICA PROFESIONAL",
        "reqs": [
          "AE4208",
          "FH1000",
          "IC4003",
          "IC5001",
          "IC6200",
          "IC7602",
          "IC7841",
          "SE1100",
          "SE1200",
          "SE1400"
        ]
      }
    ]
  ]
}

PD: Ambas bibliotecas me gustaron mucho, voy a seguir leyendo y aprendiendo sobre ellas para futuros desarrollos.

Compartir en: TwitterFacebook