Blog del curso electivo Seminario de Investigación Multimedia de Ingeniería de Sistemas de la Institución Universitaria Antonio José Camacho, orientado por el profesor Ing. Diego López, Mg.

Aquí están publicados los resúmenes y reflexiones de algunos de los trabajos realizados por los estudiantes del curso.

8 de junio de 2014

PLAYCLASS Software Interactivo sobre Clases y Objetos en POO

por Gustavo Adolfo Cruz Sánchez, Paola Andrea Mendoza Anturi y Adrián Ortega Ramírez



Resumen

El presente artículo describe el diseño y construcción del software multimedia interactivo cuyo objetivo principal es explicar y dar a conocer qué es y cómo funcionan los conceptos CLASE y OBJETO en el paradigma de programación orientada a objetos – POO. El sistema diseñado busca dar a entender la relación que existe entre clase, objeto y atributo a través de una actividad que se ha denominado “Describe lo que ves”, en donde los usuarios pueden captar y aprender las diferencias entre los conceptos anteriormente mencionados y la estrecha relación que también los une.

Palabras Clave: multimedia, POO, clase, objeto, variable, atributo.


Abstract

This paper describes the design and construction of interactive multimedia software PLAYCLASS whose main objective is to explain and publicize what it is and how CLASS and OBJECT work on the paradigm of object-oriented programming - OOP. The designed system seeks to understand the relationship between class, object and attribute through an activity called "Describe what you see", where users can capture and learn the differences between the concepts above and the close relationship that also connects them.

Keywords: multimedia, OOP, class, object, variable, attribute.



CAPÍTULO I. INTRODUCCIÓN

Hoy en día la tecnología nos ha proporcionado muchas herramientas útiles para el desarrollo de sistemas modernos, llamativos y funcionales, lo que ha permitido ir evolucionando a gran manera que ya hoy en día es muy fácil tener acceso a aplicaciones multimedia que ofrecen un sinnúmero de posibilidades. Processing es una herramienta de código abierto que fue desarrollada para personas que quieren crear imágenes, animaciones e interacciones y sistemas que integran programación, diseño y multimedia. Inicialmente desarrollado como software para crear bocetos de trabajo y enseñar los principios de la programación en un contexto visual, Processing ha evolucionado hacia una herramienta de producción profesional. Hoy hay millones de estudiantes, artistas, diseñadores, investigadores y aficionados que usan Processing para aprender, hacer prototipos y producir proyectos a diario.

Este proyecto tuvo como motivación enfocarnos en los estudiantes que cursan entre el segundo o tercer semestre de tecnología e ingeniería de sistemas, ya que tomamos nuestras experiencias pasadas para poder enfocarnos en los dos conceptos que manejamos que son las clases y los objetos. Estos conceptos para algunas personas pueden parecer fáciles de entender y diferenciar, pero según nuestra historia vivida dentro de la Institución Universitaria Antonio José Camacho nos costó mucho al principio de nuestra etapa de principiantes diferenciar estos dos patrones fundamentales al momento de inducirnos al lenguaje de programación.


CAPÍTULO 2. DISEÑO Y CONSTRUCCIÓN

La temática sobre la cual el sistema se basa, es la relación y diferenciación de los conceptos clase, objeto y atributo dentro del contexto de programación orientada a objetos. Sobre los 3 ejes anteriores es que se fundamenta este paradigma de programación y es de suma importancia que se aprenda a identificar la relación entre ellos y los factores que los diferencian.

En la programación orientada a objetos – POO, una clase es Definiciones de las propiedades y comportamiento de un tipo de objeto concreto. La instanciación es la lectura de estas definiciones y la creación de un objeto a partir de ellas; un objeto, es una instancia de una clase, es decir, un elemento provisto de un conjunto de propiedades o atributos (datos) y de comportamiento o funcionalidad (métodos), los mismos que consecuentemente reaccionan a eventos. Se corresponden con los objetos reales del mundo que nos rodea, o con objetos internos del sistema (del programa). Es una instancia a una clase. Finalmente, un atributo es Contenedor de un tipo de datos asociados a un objeto (o a una clase de objetos), que hace los datos visibles desde fuera del objeto y esto se define como sus características predeterminadas, y cuyo valor puede ser alterado por la ejecución de algún método.

A continuación se muestra un mapa mental sobre los conceptos de clase, objeto y atributo dentro del contexto de programación orientada a objetos – POO:

Figura 1. Mapa mental Clases y Objetos en POO 

La idea del sistema se concibió y construyó como una ayuda interactiva que buscara explicar a través de una actividad interactiva, cómo identificar las clases, los objetos y las propiedades de un dentro del contexto de Programación Orientada a Objetos POO. La actividad que maneja el sistema se ha denominado “Describe lo que ves” la cual consiste en identificar elementos con sus características y las categorías en las que esos elementos pueden agruparse o clasificarse. El sistema trabajará con 3 categorías: Figuras geométricas, animales y frutas. Cada categoría tiene elementos que la componen y estos elementos unas características; de esta forma, utilizamos la metáfora de categoría, elemento y característica respectivamente para referirnos a Clase, objeto y atributo.

Al entenderse las diferencias y relaciones los tres conceptos mencionados anteriormente, el estudiante podrá  identificar fácilmente cada concepto y la forma en que estos se utilizan en la programación orientada a objetos. Al usarse la metáfora descrita anteriormente como estrategia de explicación del significado y manejo de los conceptos Clase, Objeto y atributo, se espera que el estudiante tenga claro cómo identificar cada elemento en un contexto real de programación.

Funcionamiento del aplicativo

El sistema trabaja con una actividad que se ha denominado "Describe lo que ves". El usuario tiene la posibilidad de elegir elementos de entre tres categorías diferentes: Figuras geométricas, animales y frutas. A continuación se describen las funcionalidades del sistema:

Ø  Seleccionar categoría: Existen tres categorías diferentes las cuales el usuario podrá elegir. Cada categoría tiene elementos asociados a ella. En este sentido, la categoría FIGURAS GEOMÉTRICAS tiene elementos como el círculo, el cuadrado, el triángulo, el trapecio, etc., los cuales tendrán características comunes como el color o un distintivo, las diferencias están en las formas de las figuras. 

Ø  Pizarra de elementos: Es la imagen de pizarra en donde se irán ubicando los elementos que el usuario vaya sacando de una categoría.

Ø  Asignar nombre a los elementos: Permite al usuario darle nombres a los elementos que se ven en la pizarra.

Ø  Describe lo que ves: Esta funcionalidad trabaja con 4 preguntas de selección múltiple. Cada pregunta está orientada a que el usuario elija opciones que describan los elementos que se muestran sobre la pizarra. Cuando el usuario elige la respuesta correcta se reproduce un sonido, cuando el usuario elije una respuesta errónea, es decir, que no describe los elementos, el sistema reproduce un sonido de error. Las 4 opciones correctas que describen los elementos de la pizarra se mostrarán en una cinta en la parte inferior de la pizarra; tal cinta se ha denominado cinta de características.

Ø  Ver explicación de la relación Clase-Objeto-Propiedad de acuerdo a la categoría, elementos y características elegidas por el usuario: Una vez se ha finalizado el juego, el usuario podrá visualizar la explicación de la relación entre la categoría, el elemento y la característica del elemento y podrá armar la jerarquía de los conceptos. Esta jerarquía se define como: Una categoría tiene varios elementos que tienen características. Los elementos se diferencian entre sí pero poseen características comunes lo que los hace pertenecer a una misma categoría. Lo anterior es la relación entre clase-objeto y atributo.

El sistema se desarrolló basado en el Paradigma de Programación Orientado A Objetos - POO, específicamente en lenguaje Java. La herramienta que se utilizará para el desarrollo del sistema es Processing el cual es un entorno que permite integrar elementos visuales y gráficos a los desarrollos, agregando un valor de diseño al producto final.


Diseño


La atmósfera del juego recrea un ambiente tipo fábrica, con colores plata y naranjas y un personaje que guía el juego llamado Robotín, el cual es un robot. Dicho robot tiene el papel de guía durante la dinámica, es quien saca los elementos de las cajas de categorías y quien organiza los objetos en la pizarra de objetos. Los sonidos que se reproducen durante el juego representan sonidos robóticos y mecánicos, además de sonidos que refieren a lo lúdico, a lo divertido.

Lo divertido del juego está en que el usuario puede interactuar con tres categorías diferentes y que las preguntas sobre las características de cada elemento son diferentes, dejando así un espacio a lo nuevo, a la sorpresa de saber si se respondió bien o no y de saber cómo queda armada al final la relación objeto, clase y atributo.


Reglas y dinámica

El juego consiste en brindar una explicación muy simplificada de la diferenciación de los conceptos de clase y objeto, en los cuales se tienen diversas dificultades los estudiantes de ingeniería de sistemas al momento de obtener la explicación de los conceptos.

Este juego se basa principalmente en la didáctica de la diferenciación de dichos conceptos  con interfaces dinámicas las cuales hacen ver interesante el desarrollo del juego y la explicación sencilla de los conceptos de clase y objeto.
Las interfaces están compuestas por elementos didácticos como animales, objetos geométricos y frutas, los cuales serán elegidos según su categoría y su elección.
Para iniciar partida en el juego empezamos dándole clic al botón inicio en el cual se explicara cual es la dinámica del juego, esta inducción se hará por el robot (ROBOTIN), el cual será nuestro actor dentro del juego, después nos inducirá a la interfaz donde nos desplegara unas cajas en donde cada una tendrá una categoría diferente para la elección del usuario que esta interactuando con el juego.


Mapa Navegacional

En esta sección, se describe como es el despliegue de la aplicación, indicando la navegabilidad que se les ofrecerá a los usuarios en el sistema. La aplicación se compone de estas cuatro zonas bien diferenciadas:

Ø  Pantalla de Bienvenida: Ventana inicial de la aplicación que mostrará el nombre del aplicativo y el logo, además de tener un botón de Inicio.

Ø  Cabecera: Se mostrarán aspectos básicos de la aplicación como nombre del sistema y créditos de equipo desarrollador.

Ø  Bloque principal: Representa la zona donde el usuario interactuará y donde está ubicada la pizarra de elementos.

Ø  Botonera Bloque Principal: Botones que permiten al usuario interactuar con la aplicación y que no son de navegabilidad entre pantallas.

Ø  Sección Inferior de Botones: Contendrá los botones básicos para la navegación a través de las pantallas.


Personaje Guía


 

Figura 2. Robotín

Robotín (Figura 2). Personaje principal de PlayClass. Es el robot guía durante el juego, encargado de dar las instrucciones y de sacar los elementos escogidos dentro de las cajas de categorías.

        
Resultados finales

El resultado final obtenido, fue una aplicación interactiva que hace uso de elementos visuales y sonoros para explicar a través de un juego de que tratan los principios básicos que son los conceptos de CLASE, OBJETO y ATRIBUTOS dentro de la programación orientada a objetos. A continuación, se muestran imágenes del resultado final obtenido:

Pantallas de inicio: Pantallas que muestran el logo de la Universidad, el logo, el logo del grupo y una pantalla de splash del juego.

Figura 3. Pantalla Inicio 1

Figura 4. Pantalla Inicio 2

Figura 5. Pantalla Inicio 3

Pantalla de selección de categoría: En esta pantalla, el usuario tiene la opción de seleccionar la categoría con la cual quiere jugar; en este caso, la categoría es la metáfora utilizada para hacer referencia a la clase.

Figura 6. Pantalla selección categoría

Pantalla de Pizarra de trabajo – Sacar elementos de categoría: Esta pantalla permite al usuario sacar un conjunto de elementos que pertenecen a la categoría; en esta sección, los elementos son la metáfora utilizada para referirnos a los objetos que pertenecen a una clase. También en esta pantalla el usuario puede asignarle un nombre a cada elemento que saque de la caja de categoría, lo que refiere al nombre e instanciación de un objeto que pertenece a una clase.

Figura 7. Pantalla de pizarra de elementos

Pantalla de Pizarra de trabajo – Describe lo que ves: en esta pantalla el usuario tiene la opción de determinar las características o atributos de los elementos que salieron de la caja de categoría, asemejando a la definición de atributos de una clase, los cuales definen o caracterizan el objeto del tipo de la clase. Lo anterior, se hace a través de una serie de preguntas de selección múltiple con única respuesta.

Figura 8. Pantalla "Describe lo que ves"

Pantallas de Explicación – Arma la relación: en estas pantallas el usuario tiene la opción de armar la relación clase, objeto, atributo, de acuerdo a lo entendido durante el juego. El armado de la relación se hace a través de unas fichas que se pueden ubicar en una especie de rompecabezas jerárquico.


Figura 9. Pantalla "Arma la relación" 1 

Figura 10. Pantalla "Arma la relación" 2

  
III. CONCLUSIÓN

Hoy en día los estudiantes que se aventuran hacia el amplio campo de la programación,  presentan diferentes inconvenientes al momento de diferenciar algunos conceptos ya que son  amplios y  similares al momento de implementarlos en el desarrollo de alguna aplicación. Es por esto que se ha desarrollado esta aplicación para así brindar una herramienta para dichos estudiantes ya que sus inconvenientes no son de conocimiento sino de diferenciación de conceptos al momento de aplicarlos.

El desarrollo de este video juego además de ser una herramienta como ya se mencionó antes, es un juego muy didáctico en el cual se permiten de forma muy sencilla entender los conceptos por los cuales se desarrollado dicho video juego, clases objetos y atributos. Con este proyecto se busca que las personas que estén interesados en iniciar la etapa de aprendizaje que se encuentra entre el semestre tercer y cuarto según nuestra experiencia vivida, comprendan dicha diferenciación sobre los conceptos expuestos en nuestro proyecto de curso y no se abstenga de aprender a diferencias los conceptos de clase y objeto.

Además del enfoque que se le dio al proyecto, no enfocamos el proyecto a ganar o perder una  partida de  juego ya que nos centramos en que el estudiante o usuario que interactuara con la aplicación lograra entender la esencia básica de los conceptos clase, objeto y atributo. Por lo anterior, nuestra principal  motivación para desarrollar el aplicativo interactivo PLAYCLAS, es explicar y generar interés en el estudiante sobre 3 conceptos básicos en el paradigma de programación orientada a objetos.


BIBLIOGRAFÍA
[Floru05] FLÓREZ RUEDA, Roberto. Algoritmos, estructura de datos y programación orientada a objetos. Capítulo 15. Programación Orientada a Objetos (POO). Bogotá. 2005
[Laal02] LACRUZ ALCOCER, Miguel. Nuevas tecnologías para futuros docentes. Ediciones de la Universidad de Castilla – La Mancha. Las Líneas Actuales de los Sistemas Multimedia. Multimedia Hoy. 2002


AGRADECIMIENTOS

Queremos extender nuestros más sinceros agradecimientos a la universidad y en especial al profesor Ing. Darío Diego López por su dirección y orientación durante el proceso de diseño y desarrollo de este proyecto, ya que gracias a sus enseñanzas, directrices y su interés en la elaboración de un producto de calidad se pudo lograr un magnífico resultado en la elaboración del proyecto realizado con la herramienta processing para darlo a conocer al estudiantado en el evento SOFTHARD. Con ello dimos a conocer nuestro proyecto dando así una demostración que no solamente se puede desarrollar y diseñar en java o .net, sino también usar una herramienta como lo es processing la cual nos permite familiarizarnos con el entorno gráfico de una forma muy interesante y creativa.








No hay comentarios:

Publicar un comentario