Desarrollo de un pluggin para el diseño de flujogramas integrable en Moodle

Jiménez Prieto, Marta (2018). Desarrollo de un pluggin para el diseño de flujogramas integrable en Moodle. Proyecto Fin de Carrera / Trabajo Fin de Grado, E.T.S.I. Industriales (UPM), Madrid.

Descripción

Título: Desarrollo de un pluggin para el diseño de flujogramas integrable en Moodle
Autor/es:
  • Jiménez Prieto, Marta
Director/es:
  • Torroja Fungairiño, Yago
  • Otero Marnotes, José Andrés
Tipo de Documento: Proyecto Fin de Carrera/Grado
Grado: Grado en Ingeniería en Tecnologías Industriales
Fecha: Febrero 2018
Materias:
Palabras Clave Informales: Diagrama, Flujograma, GoJS, Interfaz, JavaScript, Layout, Moodle, Plugin, Tele-enseñanza.
Escuela: E.T.S.I. Industriales (UPM)
Departamento: Automática, Ingeniería Eléctrica y Electrónica e Informática Industrial
Licencias Creative Commons: Reconocimiento - Sin obra derivada - No comercial

Texto completo

[img]
Vista Previa
PDF (Document Portable Format) - Se necesita un visor de ficheros PDF, como GSview, Xpdf o Adobe Acrobat Reader
Descargar (4MB) | Vista Previa

Resumen

Este trabajo documenta el desarrollo de una interfaz gráfica para la creación de flujogramas o diagramas de flujo, que representen gráficamente un algoritmo o programa a implementar en un microcontrolador. Los flujogramas son herramientas ampliamente utilizadas en entornos educativos para el aprendizaje de los fundamentos de programación de sistemas con microprocesadores o microcontroladores. Con la implantación del Plan Bolonia se otorga un mayor protagonismo al alumnado y se establecen nuevos criterios para su formación. Se acompaña la evaluación mediante un único examen tradicional, con multitud de actividades enfocadas al desarrollo de conocimientos prácticos y competencias. La finalidad de estos trabajos, presentaciones y pequeñas pruebas es que el estudiante practique el auto-aprendizaje y gestione por sí mismo la adquisición de conocimientos. Dichas actividades requieren un seguimiento continuo por parte de los docentes y de los recursos necesarios para que el alumno sea capaz de expandir sus conocimientos. Las tecnologías de la información y la comunicación (TIC) pueden dar soporte a este nuevo enfoque de la enseñanza, salvando obstáculos como la distancia y permitiendo automatizar parte de la función del profesorado, agilizando su labor educativa. Nace así, el concepto de la tele-enseñanza, que permite una formación flexible y no presencial, con una comunicación continua entre profesor y alumno, simultánea o no. Este tipo de enseñanza virtual conlleva el desarrollo de ciertas habilidades por parte de sus usuarios para su máxima eficiencia, como desenvolverse en un entorno informático o expresarse de manera efectiva a distancia. Existen una gran variedad de servicios web que pueden emplearse con una finalidad educativa, como los blogs, wikis o foros. De la combinación de estos servicios surgen las plataformas educativas como AulaWeb, una de las precursoras, desarrollada por el departamento de Automática, Ingeniería Eléctrica, Electrónica e Informática Industrial de la Escuela Técnica Superior de Ingenieros Industriales (ETSII). Estas plataformas son entornos virtuales dedicados a la educación, donde el estudiante tiene acceso a todos los recursos y dispone de facilidades como la entrega de trabajos o la realización de pruebas online. En el caso de AulaWeb, el sistema de autoevaluación del que dispone cuenta con funcionalidades como, la generación de preguntas y pruebas, la configuración de ejercicios o la gestión y corrección de las respuestas. En este contexto se enmarca la beca de innovación educativa que promueve este trabajo. El objetivo de este proyecto es crear un prototipo de interfaz gráfica, que sirva para representar flujogramas de la asignatura Fundamentos de Electrónica. Se pretende que esta interfaz sea integrada en un plugin de Moodle en un futuro de modo que forme parte de la evaluación de los alumnos de dicha asignatura. Para llevar a cabo el desarrollo de la interfaz se analizarán las características de los programas que realicen funciones similares a las deseadas. Además, se investigarán las bibliotecas de JavaScript disponibles, se elegirá y se documentará la elegida para el trabajo. Por último, se desarrollará un prototipo que incluya las cualidades seleccionadas tras el estudio de los programas examinados. Tras recopilar, probar y valorar 15 programas para la realización de flujogramas, se concluye que la mayoría da mucha libertad al usuario en cuanto a la colocación de los bloques en el diagrama. En general, se utiliza un sistema de arrastrar y soltar para incorporar los bloques en cualquier parte del área de trabajo. Por otro lado, se identifica la colocación automática del contenido del diagrama, como la parte más compleja del desarrollo ya que, aunque muchas de las interfaces analizadas disponen de herramientas para ello, éstas son poco eficientes y en la mayoría de casos el resultado de su aplicación no es satisfactorio. En base a los resultados del análisis y el propósito educativo, se determina que la interfaz debe permitir la realización de diagramas que reflejen los algoritmos empleados en los microprocesadores con la mayor claridad posible y debe ser accesible desde plataformas móviles y diferentes sistemas operativos. Cada flujograma debe comenzar y finalizar en un punto, de modo que todos los demás bloques dependan de una rama principal que una estos dos puntos. Los nuevos bloques se añadirán al soltarlos sobre cualquier enlace del diagrama y la generación del resto de enlaces será automática. La posición de cada bloque, una vez que el usuario lo inserte en alguna de las ramas disponibles, dependerá exclusivamente del software. Para llevar a cabo el desarrollo de la interfaz se elige la biblioteca GoJS , que permite implementar la creación de diagramas, su visualización en páginas web y la interacción con dicho diagrama por parte del usuario. Por medio de las funciones de esta biblioteca, se pueden construir elementos altamente personalizados, a base de unir objetos JavaScript, como cuadros de texto, paneles, formas e imágenes. El diagrama resultante consta de tres componentes básicos, los nodos, que son los elementos que contienen la mayoría de información expuesta en el gráfico, los enlaces, que sirven de unión entre nodos, y los grupos, que engloban conjuntos de nodos. La biblioteca cuenta con modelos y plantillas que permiten separar la apariencia, definición y construcción de los nodos de los datos que describen el funcionamiento y las características de cada nodo. De esta forma se agiliza la gestión de un gran número de elementos y la adaptación del diagrama frente a las acciones del usuario. El sistema de colocación de GoJS que ofrece más opciones de configuración es TreeLayout, por lo que se decide trabajar con este sistema como base. Los layouts identifican los nodos que existen en un grupo, trazan una red y colocan en ella los nodos y después determinan las trayectorias de los enlaces. Como la colocación debe adaptarse a cualquier cambio en el diagrama, se decide crear unas estructuras de nodos y enlaces para representar cada instrucción. De esta manera, cada estructura conformará un grupo en el que se establecerá un layout acorde con la geometría de la estructura. Para garantizar que la estructura conserva su forma aunque se añadieran nuevos bloques, se definen unos nodos guía de tamaño mínimo, cuya posición es la que se fija en el layout y el resto de los bloques que se inserten se alinearán con ellos. En las imágenes pueden observarse los esquemas de las tres estructuras definidas, decisión, realimentación y decisiones anidadas. Los bloques se arrastrarán desde una paleta situada a la izquierda del diagrama sobre éste para su inclusión en el gráfico. Por otro lado, el diagrama es capaz de crear, modificar y eliminar relaciones entre los nodos para adaptarse a las acciones del usuario, como insertar bloques o suprimirlos. Los grupos se podrán contraer para ocultar su contenido y así ocupar un menor espacio. También se han añadido botones y menús contextuales para facilitar su uso en plataformas móviles, siendo el resultado final el mostrado en las siguientes imágenes. Por tanto, el resultado es un diagrama capaz de reordenarse y modificarse automáticamente tras las acciones del usuario, creando estructuras que representen el aspecto y comportamiento de los flujogramas de la asignatura de Fundamentos de Electrónica, y que permite su utilización en plataformas móviles. Se concluye que, al tratarse de una interfaz gráfica, cobran mayor importancia los detalles estéticos. Además, en este caso, al no dejar a elección del usuario la colocación de los bloques ni el trazado de los enlaces, el programa debe ser capaz de prever las posibles acciones y gestionarlas de forma apropiada. Por tanto, una posible mejora sería lograr una colocación óptima de los elementos del diagrama donde se diera preferencia a las líneas rectas para una mayor claridad. En cuanto al ámbito de la sostenibilidad, al ser un producto software, sólo utiliza energía eléctrica durante todo su ciclo de vida, su retirada no genera ningún residuo y no necesita un emplazamiento físico específico, por lo que tampoco es necesario su transporte.

Más información

ID de Registro: 49710
Identificador DC: http://oa.upm.es/49710/
Identificador OAI: oai:oa.upm.es:49710
Depositado por: Biblioteca ETSI Industriales
Depositado el: 14 Mar 2018 14:25
Ultima Modificación: 14 Mar 2018 14:25
  • GEO_UP4
  • Open Access
  • Open Access
  • Sherpa-Romeo
    Compruebe si la revista anglosajona en la que ha publicado un artículo permite también su publicación en abierto.
  • Dulcinea
    Compruebe si la revista española en la que ha publicado un artículo permite también su publicación en abierto.
  • Recolecta
  • InvestigaM
  • Observatorio I+D+i UPM
  • OpenCourseWare UPM