Universidad de las Ciencias Informáticas

Universidad de las Ciencias Informáticas

Trabajo de Diploma

Curso docente: 2011-2012

Título: Módulo de diseño en Dos Dimensiones para los Laboratorios Virtuales.

Autor: Rohelis Ramírez Oquendo

Tutor(es): Ing. Gelson Rafael Saurin Ojeda

Ing. Susej Beovides Luis

Ciudad de la Habana, Cuba

Rohelis Ramírez Oquendo I

Declaración de Autoria

Declaro que soy el único autor de este trabajo y autorizo a la Facultad 5 de la Universidad de las Ciencias Informáticas a hacer uso del mismo en su beneficio.

Para que así conste firmo la presente a los ____ días del mes de _____ del año ______.

Rohelis Ramírez Oquendo

_________________

Firma del Autor

Gelson R. Saurin Ojeda Susej Beovides Luis

____________________ ____________________

Firma del Tutor Firma del Tutor

Rohelis Ramírez Oquendo II

Agradecimientos

A mi familia, en especial a mi mamá Mercedes Oquendo Dacosta y mi papá Rogelio Ramírez Revé que me han cuidado y han luchado por que nunca nos faltase nada a mí y a mi hermana, por la educación y confianza que me han proporcionado toda la vida.

A mi hermana Liliana Ramírez Oquendo por su apoyo y confianza.

A mis amigos que me han acompañado en toda mi etapa de estudios en la UCI, en especial a José Andrés Suárez Alberteris, Nallia Iris Ramírez Castro, Isnaudy Pérez Téllez y mis compañeros de residencia y de trabajo.

A mis tutores por la paciencia y dedicación que han tenido conmigo en la elaboración de este trabajo, a todas las personas que me quieren, a nuestros país que han creado la Universidad de Ciencias Informáticas de la cual saldré graduado.

Muchas Gracias

Rohelis

Rohelis Ramírez Oquendo III

Resumen

Desde el comienzo del estudio de la realidad virtual en la Universidad de las Ciencias Informáticas (UCI), principalmente en el Centro de Informática Industrial (CEDIN) se ha fomentado el estudio y aprendizaje de las diversas técnicas que existen relacionadas con el tema; esto tiene como único fin dominar este campo tan novedoso y que tantos provechos le puede aportar a la informática en nuestro país. El proyecto Laboratorios Virtuales es el encargado en esta universidad de la creación de laboratorios virtuales para centros de enseñanza, estos permiten diversas prácticas de diferentes materias, en muchas de las cuales realizar un diseño gráfico es muy importante para el aprendizaje.

El presente trabajo tiene como objetivo el desarrollo de una herramienta que permita realizar un diseño en dos dimensiones (2D) para los laboratorios virtuales, diseño que entra en la categoría de diseño gráfico por computadora o diseño asistido por computadora, la cual tendrá por nombre como módulo de diseño 2D para los laboratorios virtuales. Para la realización de dicho módulo se realizó una investigación de los elementos relacionados con las áreas de diseño 2D y los fundamentos necesarios para lograr el diseño.

Como resultado final se creó un módulo que le permite al usuario realizar la tarea de diseño.

Palabras claves:

Diseño 2D, Laboratorios Virtuales, Realidad Virtual.

Rohelis Ramírez Oquendo IV

Índice

Declaración de Autoria ... I Agradecimientos ... II Resumen ... III Índice ... IV Índice de Figuras ... VI Índice de Tablas ... VIII

Introducción ... 1

Capítulo 1. Fundamentación Teórica... 5

1.1 Realidad Virtual ... 5

1.2 Entornos Virtuales ... 5

1.2.1 Laboratorios Virtuales ... 6

1.2.2 Tipos de Laboratorios Virtuales ... 6

1.2.3 Ventajas ... 6

1.2.4 Desventajas ... 7

1.3 Diseño ... 7

1.3.1 Diseño 2D ... 8

1.3.2 Fundamentos del Diseño Gráfico ... 8

1.3.3 Elementos del diseño ... 8

1.4 Módulo de diseño 2D ... 14

1.5 Herramientas Existentes ... 14

1.5.1 Funcionalidades Básicas ... 17

Conclusiones Parciales ... 17

Capítulo 2: Propuesta de Solución... 18

2.1 Descripción de la Propuesta de Solución ... 18

2.2 Metodologías y Herramientas a utilizar para llevar a cabo la propuesta de solución ... 20

2.3 Modelo de dominio ... 21

2.3.1 Descripción de las clases que componen el modelo de dominio ... 22

2.4 Requerimientos ... 22

2.4.1 Captura de requisitos ... 22

2.4.2 Requerimientos funcionales ... 22

2.4.3 Requisitos no funcionales ... 24

2.5 Modelo de casos de uso ... 24

2.5.1 Definición y justificación de actores del sistema ... 24

2.5.2 Diagrama de casos de uso (CU) ... 25

Rohelis Ramírez Oquendo V

2.5.3 Descripción de los casos de uso ... 26

Conclusiones Parciales ... 38

Capítulo 3. Análisis, Diseño e Implementación del Sistema ... 39

3.1 Diagrama de clases del diseño ... 39

3.2 Diagramas de Interacción. ... 40

3.2.1 Diagrama de secuencia del CU Cargar elementos ... 40

3.2.2 Diagrama de secuencia del CU Gestionar elementos de la escena ... 40

3.2.3 Diagrama de secuencia del CU Rotar elementos ... 43

3.2.4 Diagrama de secuencia del CU Escalar elementos ... 44

3.2.5 Diagrama de secuencia del CU Agrupar elementos ... 44

3.2.6 Diagrama de secuencia del CU Desagrupar elementos ... 45

3.2.7 Diagrama de secuencia del CU Realizar alejamiento ... 45

3.2.8 Diagrama de secuencia del CU Realizar acercamiento ... 46

3.2.9 Diagrama de secuencia del CU Guardar imagen del diseño ... 46

3.2.10 Diagrama de secuencia del CU Insertar línea ... 47

3.2.11 Diagrama de secuencia del CU Llevar hacia delante ... 47

3.2.12 Diagrama de secuencia del CU Llevar hacia atrás ... 48

3.2.12 Diagrama de secuencia del CU Insertar texto ... 48

3.3 Implementación y Pruebas ... 49

3.4 Modelos de pruebas ... 51

Conclusiones Parciales ... 64

Conclusiones ... 66

Recomendaciones ... 67

Referencias Bibliográficas ... 68

Anexos ... 70

Rohelis Ramírez Oquendo VI

Índice de Figuras

Figura 1: Imagen de un punto ... 9

Figura 2: Imagen de una línea ... 9

Figura 3: Imagen de un plano ... 10

Figura 4: Imagen de un volumen ... 10

Figura 5: Imagen de formas... 11

Figura 6: Imagen de representación para el tamaño ... 11

Figura 7: Imagen de colores ... 11

Figura 8: Imagen de texturas... 12

Figura 9: Imagen de representación de dirección ... 12

Figura 10: Imagen de representación de posición ... 12

Figura 11: Imagen de representación del espacio ... 13

Figura 12: Imagen de representación de la gravedad ... 13

Figura 13: Microsoft Visio ... 15

Figura 14: Dia... 15

Figura 15: Módulo de Diseño 2D de redes LAN ... 16

Figura 16: Prototipo no funcional ... 19

Figura 17: Modelo de dominio ... 21

Figura 18: Diagrama de casos de uso ... 25

Figura 19: Diagrama de clases del diseño ... 39

Figura 20: Diagrama de secuencia del CU: Cargar elementos ... 40

Figura 21: Diagrama de secuencia del CU: Insertar elementos ... 41

Figura 22: Diagrama de secuencia del CU: Seleccionar un elemento ... 41

Figura 23: Diagrama de secuencia del CU: Seleccionar múltiples elementos ... 42

Figura 24: Diagrama de secuencia del CU: Mover elementos ... 42

Figura 25: Diagrama de secuencia del CU: Eliminar elementos ... 43

Figura 26: Diagrama de secuencia del CU: Rotar elementos ... 43

Figura 27: Diagrama de secuencia del CU: Escalar elementos ... 44

Figura 28: Diagrama de secuencia del CU: Agrupar elementos ... 44

Figura 29: Diagrama de secuencia del CU: Desagrupar elementos ... 45

Figura 30: Diagrama de secuencia del CU: Realizar alejamiento ... 45

Figura 31: Diagrama de secuencia del CU: Realizar acercamiento ... 46

Figura 32: Diagrama de secuencia del CU: Guardar imagen del diseño ... 46

Figura 33: Diagrama de secuencia del CU: Insertar línea ... 47

Figura 34: Diagrama de secuencia del CU: Llevar hacia delante ... 47

Figura 35: Diagrama de secuencia del CU: Llevar hacia atrás ... 48

Figura 36: Diagrama de secuencia del CU: Insertar texto ... 48

Figura 37: Prueba de Cargar elementos ... 52

Figura 38: Hay elementos en la escena ... 54

Rohelis Ramírez Oquendo VII

Figura 39: Hay un elemento seleccionado ... 55

Figura 40: No hay elementos seleccionados ... 55

Figura 41: Elemento seleccionado ... 56

Figura 42: Hay elementos seleccionados ... 57

Figura 43: Hay elementos agrupados ... 59

Figura 44: Aplicación corriendo ... 60

Figura 45: Aplicación corriendo ... 61

Figura 46: Aplicación corriendo ... 63

Figura 47: Aplicación corriendo ... 64

Figura 48: Información de un elemento ... 70

Figura 49: Representación en la barra de elementos ... 70

Figura 50: Módulo de diseño 2D funcional ... 71

Figura 51: Imagen guardada del diseño ... 71

Rohelis Ramírez Oquendo VIII

Índice de Tablas

Tabla 1: Requisitos funcionales y descripción ... 24

Tabla 2: Actores del sistema ... 25

Tabla 3: Descripción del CU: Cargar elementos ... 27

Tabla 4: Descripción del CU: Gestionar elementos de la escena ... 28

Tabla 5: Descripción del CU: Rotar elementos ... 29

Tabla 6: Descripción del CU: Escalar elementos ... 30

Tabla 7: Descripción del CU: Agrupar elementos ... 31

Tabla 8: Descripción del CU: Desagrupar elementos ... 32

Tabla 9: Descripción del CU: Realizar acercamiento de la escena ... 33

Tabla 10: Descripción del CU: Realizar alejamiento de la escena ... 34

Tabla 11: Descripción del CU: Tomar imagen del diseño... 35

Tabla 12: Descripción del CU: Llevar hacia delante ... 35

Tabla 13: Descripción del CU: Llevar hacia atrás ... 36

Tabla 14: Descripción del CU: Insertar texto ... 37

Tabla 15: Descripción del CU: Insertar texto ... 38

Tabla 16: Prueba de CU: Cargar elementos ... 52

Tabla 17: Prueba de CU: Gestionar elementos en la escena ... 53

Tabla 18: Prueba de CU: Rotar elementos ... 54

Tabla 19: Prueba de CU: Escalar elementos ... 56

Tabla 20: Prueba de CU: Agrupar elementos ... 57

Tabla 21: Prueba de CU: Desagrupar elementos ... 58

Tabla 22: Prueba de CU: Realizar acercamiento de la escena ... 59

Tabla 23: Prueba de CU: Realizar alejamiento de la escena ... 61

Tabla 24: Prueba de CU: Guardar imagen del diseño ... 62

Tabla 25: Prueba de CU: Insertar texto ... 63

Tabla 26: Prueba de CU: Insertar línea ... 64

Rohelis Ramírez Oquendo 1

Introducción

El desarrollo de las ciencias y tecnologías en la actualidad han contribuido en gran medida al desarrollo económico, cultural y social de todos los pueblos. Con el surgimiento de los ordenadores o más conocidos por computadoras, se crearon nuevos sistemas capaces de realizar tareas que antes eran muy difíciles o más complejas de lograr. El avance y desarrollo en la creación de estos equipos, la incorporación a los mismos de nuevos sistemas operativos y el estudio e investigación de las técnicas de gráficos en estos sistemas, dieron surgimiento al concepto de la realidad virtual como sistema capaz de reflejar en un mundo irreal, elementos reales. Hoy, el mismo, forma parte de una de las herramientas que permiten el estudio y la investigación de fenómenos reales, así como mostrar la propia vida cotidiana en un entorno virtual.

En la actualidad, la realidad virtual se encuentra en muchos sistemas que permiten que el usuario experimente en diferentes escenarios. Los escasos recursos materiales son reemplazados por herramientas virtuales que facilitan el trabajo sin dependencias materiales, de ahí la importancia de su desarrollo. La realidad virtual puede ser aplicada en cualquier campo, ya sea: gestión, telecomunicaciones, juegos, entrenamiento militar, procesos industriales, medicina, trabajo a distancia, consulta de información, marketing, turismo, educación, etc.

En el campo de la educación la misma se convierte en un recurso didáctico del cual los profesores pueden hacer uso para motivar y atraer la atención de los estudiantes en el proceso de enseñanza- aprendizaje; con el uso de los gráficos tridimensionales de calidad y el alto grado de interactividad permite al estudiantado incorporar el conocimiento de forma visual. Cada vez es mayor el número de centros de enseñanza en los que se utilizan aplicaciones de este tipo. Un ejemplo es la creación de laboratorios virtuales que son sistemas computacionales que pretenden simular el funcionamiento de un laboratorio tradicional. Los experimentos se realizan paso a paso, siguiendo un procedimiento similar al de un laboratorio tradicional ya que se visualizan instrumentos y fenómenos mediante objetos dinámicos, imágenes o animaciones; se obtienen resultados numéricos y gráficos, tratándose éstos matemáticamente para la comprobación de los objetivos.

En el Centro de Informática Industrial (CEDIN) de la Universidad de las Ciencias Informáticas (UCI), se

Rohelis Ramírez Oquendo 2

desarrolla el proyecto Laboratorios Virtuales, el cual se enfoca en la creación de laboratorios virtuales vinculados a la educación. Actualmente el proyecto tiene creados tres laboratorios que permiten las prácticas de: ensamblar una computadora, diseñar una red local y configurar servicios de redes.

Para la creación del laboratorio que permitía la práctica de diseño de una red LAN, fue necesaria la creación de un módulo de diseño en dos dimensiones (2D), lo cual resultó una herramienta factible solo para la práctica de diseño de redes LAN. Actualmente el proyecto Laboratorios Virtuales se encuentra en proceso de desarrollo, donde se detectó que el módulo antes desarrollado no podía ser integrado a ningún otro laboratorio que no fuese el de redes LAN. Existían funcionalidades que presentaban algunas irregularidades que podrían ser mejoradas como la selección de los elementos, el zoom¹ de la escena y guardar la escena de diseño. Una vez analizado el módulo anterior se decide crear uno de diseño 2D que se pueda adaptar a cualquier laboratorio que se desarrolle con la nueva arquitectura de los laboratorios virtuales, mejorando funcionalidades e incluyendo la rotación y la escala de los elementos; además de otras que posibilitarán una mayor utilidad en la práctica de diseño 2D.

Dada la situación problémica expuesta anteriormente surge el problema: ¿Cómo permitir la práctica de diseño 2D para los laboratorios virtuales?

Se define como objeto de estudio: Las herramientas de diseño 2D, pasando a ser el objetivo general:

Desarrollar un módulo que permita el diseño 2D en los laboratorios virtuales, derivándose el campo de acción: Módulos de diseño 2D para los laboratorios virtuales.

La idea a defender de esta investigación es: Con la elaboración de este módulo se podrá realizar el diseño 2D en un laboratorio virtual, logrando que se cumplan los objetivos propuestos para dicha práctica.

Para lograr el objetivo planteado es necesario realizar las tareas investigativas definidas a continuación:

 Elaborar el marco teórico a través del estudio del estado del arte sobre los módulos de diseño 2D en la actualidad.

 Elaborar la propuesta de solución.

1 Es un término inglés que se refiere al teleobjetivo especial de distancia focal variable, es decir, que permite acercar o alejar la imagen según su avance o retroceso. (22)

Rohelis Ramírez Oquendo 3

 Seleccionar las herramientas, lenguajes y tecnologías a utilizar para el desarrollo del módulo.

 Realizar la fase de Análisis y Diseño del módulo.

 Implementar la propuesta de solución.

 Realizar pruebas a la aplicación.

Para todo el proceso de investigación y elaboración de este trabajo se utilizaron los siguientes métodos científicos:

 Histórico – Lógico: Método teórico mediante el cual se constatará como ha sido la trayectoria histórica real, la evolución y desarrollo de los aspectos principales de los módulos de diseño 2D.

 Analítico – Sintético: Este método teórico será utilizado en la investigación para buscar la esencia de lo que existe en el mundo acerca de los módulos de diseño 2D para laboratorios virtuales, los rasgos que los caracterizan y los distinguen.

 Consulta de fuentes de información: Método empírico que permite tener acceso a la información disponible sobre el tema.

 Entrevista: Método empírico para obtener información de los módulos de diseño 2D, laboratorios virtuales, aplicaciones extensibles, extensiones para aplicaciones, que guíen el resto de la investigación.

 Entrevistas con los clientes: Método empírico que va a permitir conocer los requerimientos visuales y expectativas del cliente para el trabajo con los Laboratorios Virtuales y finalmente permitirá conocer la aceptación del producto final.

 Consulta de especialistas: Consulta a especialistas en las materias a tratar en los laboratorios virtuales, para conocer los ejercicios a desarrollar y las habilidades a lograr en los usuarios.

El trabajo de diploma está estructurado en tres capítulos, recogiendo en ellos todo lo referente al trabajo que se realizó:

Capítulo 1. Fundamentación Teórica: En este capítulo se abordan los elementos relacionados a las áreas de diseño 2D, las principales características de estos sistemas, se enmarcan los conceptos relacionados con las temáticas a tratar y además se realiza un estudio del estado del arte de las herramientas para el diseño 2D.

Rohelis Ramírez Oquendo 4

Capítulo 2. Propuesta de Solución: En este capítulo se describe la propuesta de solución teniendo en cuenta el marco teórico, la metodología y herramientas a utilizar para el desarrollo de software. Se definen los procesos, requisitos funcionales y no funcionales; actores y casos de uso del sistema.

Capítulo 3. Análisis, Diseño e Implementación del Sistema: Descripción del diseño a través de diagramas de clases, análisis y diseño de la aplicación, se realiza la descripción de las clases implicadas en el proceso de desarrollo. Se describe el flujo de implementación realizado en el sistema y se realizan las pruebas al sistema.

Rohelis Ramírez Oquendo 5

Capítulo 1. Fundamentación Teórica

Con el avance de los ordenadores y en particular de las tarjetas gráficas, surge la Realidad Virtual como la rama de la informática encargada de representar fenómenos de la vida de forma visual mediante el uso de los ordenadores, la cual proporciona un mejor entendimiento de fenómenos o hechos reales a través de la simulación tridimensional e interacción con equipos especializados.

1.1 Realidad Virtual

La realidad virtual se podría definir como un sistema informático que genera en tiempo real representaciones de la realidad, que de hecho no son más que ilusiones ya que se trata de una realidad perceptiva sin ningún soporte físico y que únicamente se da en el interior de los ordenadores. (1)

Hoy en día la realidad virtual se ha convertido en una potente herramienta para el estudio y análisis de procesos y fenómenos en cualquier ámbito social, se ha integrado con sistemas médicos para la simulación de operaciones permitiendo la preparación del personal y perfeccionando los mismos. El desarrollo de esta tecnología ha permitido un alto grado de calidad en los juegos de ordenadores llegando a simular mundos y entornos muy cercanos a la realidad, y no solo en los juegos, se han creado entornos virtuales, que son de gran interés para la población y permiten el estudio, la investigación y la preparación de estudiantes, trabajadores, usuarios en general.

1.2 Entornos Virtuales

Los entornos virtuales son herramientas virtuales que simulan un escenario real mediante el uso de una computadora, posibilitan una interacción abierta en el mundo que se genera y la utilización de recursos no reales. En el ámbito educativo se han incorporado entornos para el aprendizaje de los estudiantes, estos son conocidos como ambientes de aprendizaje. Un ambiente de aprendizaje se define como un "lugar" o

"espacio" donde el proceso de adquisición del conocimiento ocurre. (2)

Los laboratorios virtuales son entornos virtuales para la experimentación de forma virtual, estos entornos son muy útiles para la simulación de fenómenos que se desarrollan en laboratorios tradicionales y de forma segura.

Rohelis Ramírez Oquendo 6 1.2.1 Laboratorios Virtuales

Los laboratorios virtuales son entornos virtuales como ambientes de aprendizaje, que fomentan grandemente la integración de los usuarios a la práctica propiciando cada vez más simulaciones de fenómenos de la vida diaria.

Como concepto se conoce que son objetos digitales que, mediante el modelado de realidad, permiten la simulación y la experimentación de fenómenos o situaciones de la vida real. Son un espacio electrónico de trabajo concebido para la colaboración y la experimentación a distancia con objeto de investigar o realizar otras actividades creativas, y elaborar y difundir resultados mediante tecnologías de información y comunicación. (3)

1.2.2 Tipos de Laboratorios Virtuales

Teniendo en cuenta las características individuales, los laboratorios virtuales se pueden dividir en los siguientes grupos:

 Laboratorios virtuales software: Están desarrollados como un programa independiente y son para ser ejecutados en los ordenadores. (4)

 Laboratorios virtuales Web: Este tipo de laboratorios se basan en un software que depende de los recursos de un servidor determinado. (4)

 Laboratorios remotos: Estos laboratorios requieren de equipos servidores específicos que den acceso a las máquinas a operar de forma remota, y no pueden ofrecer su funcionalidad ejecutándose de forma local. (4)

1.2.3 Ventajas

Los laboratorios virtuales como herramientas de estudio tienen una gran importancia:

 Acerca y facilita a un mayor número de alumnos la realización de experiencias prácticas, aunque alumno y laboratorio no coincidan en el espacio. El estudiante accede a los equipos del laboratorio a través de una interfaz, pudiendo experimentar sin riesgo alguno. (5)

 Reducen el coste del montaje y mantenimiento de los laboratorios tradicionales, siendo una

Rohelis Ramírez Oquendo 7

alternativa barata y eficiente, donde el estudiante simula los fenómenos a estudiar como si los observase en el laboratorio tradicional. (5)



Los estudiantes aprenden mediante prueba y error, sin miedo a sufrir o provocar un accidente.

1.2.4 Desventajas

Los laboratorios virtuales también tienen sus desventajas, las cuales es importante nombrar:

 El laboratorio virtual no puede sustituir la experiencia práctica altamente enriquecedora del laboratorio tradicional. (5)

 En el laboratorio virtual se corre el riesgo de que el alumno se comporte como un mero espectador.

Es importante que las actividades en el laboratorio virtual, vengan acompañadas de un guión que explique el concepto a estudiar, así como las ecuaciones del modelo utilizado. Es necesario que el estudiante realice una actividad ordenada y progresiva, conducente a alcanzar objetivos básicos concretos. (5)

 El alumno no utiliza elementos reales en el laboratorio virtual, lo que provoca una pérdida parcial de la visión de la realidad. Además, no siempre se dispone de la simulación adecuada para el tema que el profesor desea trabajar. (5)

Un Laboratorio Virtual contiene un grupo de elementos que pueden ser capaces de proveer experiencias en el aprendizaje de los estudiantes, y ofrecer habilidades diferentes mediante la realización de una práctica. Hoy en día existen prácticas de laboratorio que requieren la creación de un pequeño diseño, ya sea como simulación de un fenómeno o plasmar de forma gráfica el conocimiento. En términos de cómputo el diseño asistido por computadora es el uso de un amplio rango de herramientas computacionales que asisten a ingenieros, arquitectos y a otros profesionales del diseño en sus respectivas actividades. Estas herramientas se pueden dividir básicamente en programas de dibujo en dos dimensiones (2D) y modeladores en tres dimensiones (3D). Las herramientas de dibujo en 2D se basan en entidades geométricas vectoriales como puntos, líneas, arcos y polígonos, con las que se puede operar a través de una interfaz gráfica. Los modeladores en 3D añaden superficies y sólidos. (6)

1.3 Diseño

El diseño es el proceso previo de configuración mental en la búsqueda de una solución. En otras palabras,

Rohelis Ramírez Oquendo 8

el diseño consiste en una visión representada en forma gráfica de una obra futura. El acto intuitivo de diseñar podría llamarse creatividad como acto de creación o innovación si el objeto no existe, o es una modificación de lo existente, inspiración, abstracción, síntesis, ordenación y transformación. Diseñar requiere principalmente consideraciones funcionales y estéticas. Esto necesita de numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva del objeto.

Además comprende multitud de disciplinas y oficios dependiendo del objeto a diseñar y de la participación en el proceso de una o varias personas. (7)

1.3.1 Diseño 2D

El diseño 2D es un conjunto de objetos de dibujos que contienen solamente la geometría en dos dimensiones es decir todos son objetos planos, solamente permite la visualización plana de los objetos, los colores son planos y no existe perspectiva de ningún tipo. Los objetos cuentan con largo y ancho pero carecen de profundidad, solo se trabaja en los ejes (X) y (Y) de coordenadas.

1.3.2 Fundamentos del Diseño Gráfico

Muchos ven el diseño, como la rama que se dedica a hacer que las cosas se vean bonitas, si bien esto es parte del diseño no abarca en su totalidad la función del diseño como tal; por lo que está concebido a partir de un proceso de creación con el objetivo de cumplir con una función en especial (o varias). Esto es lo que diferencia al diseño de las artes, ya que el segundo es la realización de las visiones personales y extra-sensoriales de un artista, en cambio el diseño cumple con una función práctica. (8)

1.3.3 Elementos del diseño

Un diseñador (sin importar su rama) puede realizar diseños sin conocimiento alguno sobre la materia, ya sea por gusto personal o por su sensibilidad a la creación visual, sin embargo conocer de estos principios le hará ser un mejor diseñador. (8)

En general se distinguen 4 grupos de elementos:

 Elementos Conceptuales

Rohelis Ramírez Oquendo 9

 Elementos Visuales

 Elementos de Relación

 Elementos Prácticos

1. Elementos Conceptuales

Los elementos conceptuales son aquellos que están presentes en el diseño, pero que no son visibles a la vista. Se dividen en 4 elementos: (8)

Punto: Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.

Figura 1: Imagen de un punto

Línea: Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y una dirección.

Figura 2: Imagen de una línea

Plano: Un plano tiene largo y ancho, tiene posición y dirección y además está limitado por líneas.

Rohelis Ramírez Oquendo 10

Figura 3: Imagen de un plano

Volumen: El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el espacio, está limitado por planos y obviamente en un diseño bi-demensional el volumen es ilusorio.

Figura 4: Imagen de un volumen

2. Elementos Visuales

Por ejemplo cuando se dibuja una figura en el papel, esa figura está formada por líneas visibles, las cuales no solo tienen un largo, sino que un ancho, un color y una textura (definida por los materiales utilizados).

(8)

Así pues como ya han de suponer, los elementos visuales son:

Forma: Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto.

Rohelis Ramírez Oquendo 11

Figura 5: Imagen de formas

Medida: Todas las formas tienen un tamaño.

Figura 6: Imagen de representación para el tamaño

Color: El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blanco, negros, grises) y las variaciones tonales y cromáticas.

Figura 7: Imagen de colores

Textura: Tiene que ver con el tipo de superficie resultante de la utilización del material. Puede atraer tanto al sentido del tacto como al visual.

Rohelis Ramírez Oquendo 12

Figura 8: Imagen de texturas

3. Elementos de Relación

Se refiere a la ubicación y a la interrelación de las formas en un diseño. (8)

Dirección: La dirección de una forma depende de cómo está relacionada con el observador, con el marco que la contiene o con otras formas cercanas.

Figura 9: Imagen de representación de dirección

Posición: La posición de una forma depende del elemento o estructura que la contenga.

Figura 10: Imagen de representación de posición

Rohelis Ramírez Oquendo 13

Espacio: Todas las formas por más pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundidad)

Figura 11: Imagen de representación del espacio

Gravedad: El efecto de gravedad no solamente es visual, sino que también psicológica. Podemos atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas.

Figura 12: Imagen de representación de la gravedad

4. Elementos Prácticos

Los elementos prácticos van más allá del diseño en sí y como es de esperar son conceptos abstractos. (8)

Representación: Se refiere a la forma de realizar el diseño: puede ser una representación realista, estilizada o semi-abstracta.

Significado: Todo diseño conlleva consciente o subconscientemente un significado o mensaje.

Función: Para lo que está creado dicho diseño.

Rohelis Ramírez Oquendo 14

1.4 Módulo de diseño 2D

Un módulo es un componente auto controlado de un sistema, el cual posee una interfaz bien definida hacia otros componentes; algo es modular si es construido de manera tal que se facilite su ensamblaje, acomodamiento flexible y reparación de sus componentes. En la rama de la educación es una propuesta organizada de los elementos o componentes instructivos para que el alumno/a desarrolle unos aprendizajes específicos en torno a un determinado tema o tópico. (9)

Dado el concepto anterior y dado que no existe un concepto como tal de módulo de diseño 2D, se propone para el ámbito de desarrollo en el cual se trabaja para la realización del mismo, como herramientas de simulación que permiten el diseño, y el trabajo de construcción o modelación de diferentes prácticas. Cuentan con una serie de herramientas que permiten al usuario realizar disímiles transformaciones acorde con lo que se quiere diseñar o modelar.

Actualmente son muchas las herramientas que permiten el diseño 2D y 3D, a continuación se mencionarán algunas de las que más se asemejan a lo que se quiere lograr.

1.5 Herramientas Existentes

Con el fin de lograr un mayor entendimiento de la composición y funcionamiento de las herramientas de diseño 2D, en el mundo existen varios productos de software desarrollados por empresas de gran prestigio, que permiten este tipo de diseño, aunque muchos de los mismos son destinados a un diseño en específico, ya sea 2D o 3D y ambos inclusive, entre los que destacan:

Microsoft Visio

Microsoft Visio es un software de dibujo vectorial para Microsoft Windows. Las herramientas que lo componen permiten realizar diagramas de oficinas, diagramas de bases de datos, diagramas de flujo de programas, UML, y más, que permiten iniciar al usuario en los lenguajes de programación. Pertenece al paquete de office de Microsoft, es un software propietario.

Rohelis Ramírez Oquendo 15

Figura 13: Microsoft Visio

Dia

Dia está inspirado por el programa de Windows comercial ' Visio', aunque más engranado hacia los diagramas informales para el uso casual. Puede usarse para dibujar muchos tipos diferentes de diagramas. Tiene los objetos especiales actualmente para ayudar diagramas de entidad de relación, UML diagramas, organigramas, diagramas de la red, y muchos otros diagramas. (10)

Figura 14: Dia

Rohelis Ramírez Oquendo 16

Módulo de Diseño 2D de redes LAN

Desarrollado por el proyecto Laboratorios Virtuales perteneciente al Centro de informática Industria de la Universidad de las Ciencias Informáticas. Como características fundamentales:

 Es una herramienta que está incluida en el laboratorio de diseño de redes LAN.

 Permite el diseño de redes LAN.

 Cuenta con una amplia variedad de elementos relacionados con las redes de computadoras.

 Permite seleccionar, mover y eliminar los elementos en la escena.

 Contiene un panel con los elementos para el diseño.

 Genera un documento de evaluación en formato pdf.

 Cumple con las políticas de software libre.

Figura 15: Módulo de Diseño 2D de redes LAN

Dicho módulo no se adapta a laboratorios de temas diferentes, el uso de las líneas y textos están vinculado totalmente a los elementos presentes en el panel, presenta irregularidades en la selección, no siempre que se dibuja el polígono de multi-selección los elementos quedan seleccionados, la imagen generada del diseño es tomada de forma fija de la escena de modo que si cambiamos la posición del panel de elementos se dificulta la imagen resultante. De cierta forma no contiene todas las funcionalidades que propicien mayor utilidad en el diseño.

Rohelis Ramírez Oquendo 17 1.5.1 Funcionalidades Básicas

Luego del estudio de varios de los software que existen que permiten el diseño tanto 2D como 3D, se realizó una selección de las herramientas para el diseño más comunes presentes en estos programas, muy importantes para lograr el diseño.

 Selección: Permite la selección de los elementos. Esta herramienta es utilizada para la selección de elementos individuales y de elementos múltiples en una escena de diseño.

 Mano: Esta herramienta permite el desplazamiento de la escena del diseño a gusto del usuario.

 Rotar Izquierda: Permite la rotación del elemento seleccionado a la izquierda.

 Rotar Derecha: Permite la rotación del elemento seleccionado a la derecha.

 Acercar o Zoom in: Permite el acercamiento de la escena para mejor visualización de los elementos de la misma.

 Alejar o Zoom out: Permite alejar la escena para mejor visualización de lo que se diseña en general.

 Restablecer Zoom: Restablece la vista de la escena a la inicial o predefinida.

 Escalar: Permite redimensionar los elementos a opción del diseñador.

Conclusiones Parciales

El estudio de los diferentes conceptos relacionados con los laboratorios virtuales y las áreas de diseño 2D, y con la investigación de los programas existentes relacionados al diseño 2D y 3D, se obtiene una visión clara de los elementos necesarios para que el módulo de diseño 2D contenga las funcionalidades que permitan el diseño correcto.

Rohelis Ramírez Oquendo 18

Capítulo 2: Propuesta de Solución

En este capítulo se presenta la propuesta de solución del sistema que se va a desarrollar; se podrá encontrar la descripción de la misma así como también las metodologías y herramientas a emplear, además se muestra una panorámica desde el punto de vista del dominio donde se definen las características y las funcionalidades que tiene que cumplir el sistema para poder alcanzar los objetivos trazados.

2.1 Descripción de la Propuesta de Solución

Luego de la investigación realizada en el capítulo anterior y teniendo en cuenta las deficiencias y carencias de la herramienta anteriormente creada, se decide desarrollar un módulo que tenga presente los elementos del diseño: Elementos conceptuales, elementos visuales, elementos de relación y elementos prácticos, necesarios para realizar el diseño 2D; ya que la aplicación trabajará sobre imágenes, se decidió que el módulo va a tener cuatro componentes fundamentales:

 Barra de herramientas

 Barra de menú

 Área de diseño

 Barra de elementos.

La barra de herramientas se va a ubicar en la parte superior debajo de la barra de menú y va a contener las herramientas básicas necesarias para poder trabajar sobre el área de diseño como son: seleccionar, mover la escena o mano, alejar y acercar, restablecer, texto, línea, agrupar y desagrupar.

La barra de menú se va a ubicar en el extremo superior del módulo y va a contener las opciones principales del módulo así como las herramientas que se encuentran en la barra de herramientas además de la opción salvar que va a permitir guardar una imagen con el diseño realizado.

La barra de elementos se va a ubicar inicialmente a la izquierda del módulo, la misma es de tipo flotante lo que va a permitir su desplazamiento por los lados derecho e izquierdo del módulo según lo prefiera el usuario, la misma va a contener los elementos que se utilizarán para modelar. Cada elemento se cargará

Rohelis Ramírez Oquendo 19

mediante un archivo *.scene que contiene las propiedades del mismo, propiedades que serán mostradas en la barra de elementos. Destacar que los archivos *.scene son creados por los diseñadores en dependencia al tema del laboratorio virtual. (Ver anexo1)

El área de diseño se va a ubicar en el centro del módulo y va a ocupar el mayor espacio visual dentro del mismo, ya que es el que va a contener el diseño 2D que realiza el usuario.

El funcionamiento básico del módulo va a consistir en: el usuario selecciona los elementos con los que desee hacer el diseño 2D de la barra de elementos y los va a poner sobre el área de diseño, una vez realizada la acción anterior podrá acceder a las herramientas de diseño ya sea en la barra de herramientas o en la barra de menú; podrá realizar las acciones antes descritas las veces que estime conveniente y una vez que decida que el diseño está completo podrá guardarlo accediendo a la herramienta guardar imagen que se encuentra en el menú.

A continuación se muestra un prototipo no funcional del módulo:

Figura 16: Prototipo no funcional

Rohelis Ramírez Oquendo 20

2.2 Metodologías y Herramientas a utilizar para llevar a cabo la propuesta de solución

Para lograr la correcta implementación del módulo se escogió el siguiente ambiente de desarrollo:

 Cómo lenguaje de programación se utiliza C++ que es un lenguaje orientado a objetos. Se encuentra entre los más usados para desarrollar aplicaciones gráficas, por ser los que con más velocidad ejecutan el código. C++ es un lenguaje de propósito general, o sea, que con él se pueden realizar muchas aplicaciones, desde sistemas operativos y compiladores hasta aplicaciones de bases de datos y procesadores de texto, pasando por juegos, etc.

 El IDE de desarrollo a utilizar se escogió Visual Studio 2008 con amplio uso de Qt como framework. Visual Studio 2008, es una herramienta que ofrece un entorno de desarrollo completo e integrado para la construcción, depuración y despliegue de aplicaciones, que incluye la integración de varios lenguajes de programación como Visual C++, Visual C#, Visual J#, ASP.NET y Visual Basic .NET. Es importante mencionar que Qt posee una extensa biblioteca de clases y herramientas, las cuales se encuentran bien documentadas y facilitan la programación visual del módulo y para el desarrollo del software.

 Como metodología de desarrollo de software se escoge RUP, que permite el desarrollo de software a gran escala, mediante un proceso continuo de pruebas y retroalimentación, garantizando el cumplimiento de ciertos estándares de calidad. Es una metodología tradicional, dirigido por casos de uso, centrado en la arquitectura, iterativo e incremental. (11)

 Como herramienta CASE se escoge Visual Paradigm, es una herramienta profesional fácil de utilizar, que soporta el ciclo de vida completo del desarrollo de software: análisis y diseño orientados a objetos, construcción, pruebas y despliegue. Ayuda a una más rápida construcción de aplicaciones de calidad a un menor coste. Permite dibujar todos los tipos de diagramas de clases, permite la realización de ingeniería tanto directa como inversa, generar el código desde diagramas y generar la documentación automáticamente en varios formatos como Web o Pdf, es una herramienta libre.

 UML (Lenguaje Unificado de Modelado), ofrece soporte para clases, clases abstractas, relaciones,

Rohelis Ramírez Oquendo 21

comportamiento por iteración, empaquetamiento, entre otros. Estos elementos se pueden representar mediante nueve tipos de diagrama, que son: de clases, de objetos, de casos de uso, de secuencia, de colaboración, de estados, de actividades, de componentes y de desarrollo.

2.3 Modelo de dominio

El negocio se representa mediante un Modelo de Dominio, ya que es fácil de interpretar el funcionamiento del sistema y la simplicidad del entorno donde está enmarcado. Se utiliza el modelo de dominio ya que es un subconjunto del modelo del negocio y se utiliza cuando las fronteras de negocio no están bien definidas. El modelo de dominio es una representación visual de las clases conceptuales del mundo real.

Se debe concebir como un diccionario visual de abstracciones que será utilizado en fases posteriores. La función del modelo de dominio es ayudar a comprender el problema que se plantea.

Figura 17: Modelo de dominio

Rohelis Ramírez Oquendo 22 2.3.1 Descripción de las clases que componen el modelo de dominio

Módulo de diseño 2D: Contribuye el ambiente de trabajo con la que va a interactuar el usuario, y el medio mediante el cual se desarrollará la solución propuesta.

Objeto: Es el elemento gráfico que podrá ser utilizado por el usuario para realizar el diseño.

Herramienta: Son las herramientas que posee el módulo que le permiten al usuario realizar la labor de diseño.

Área de diseño: Contiene el diseño que se realice.

Diseño: Consiste en la ubicación de uno o varios objetos en el área de diseño a apreciación del usuario.

2.4 Requerimientos

2.4.1 Captura de requisitos

El propósito fundamental de la captura de requisitos es guiar el desarrollo del software hacia la obtención del producto esperado, ya que es aquí donde se describen los requerimientos del sistema, entiéndase, las condiciones o capacidades que el sistema debe cumplir.

2.4.2 Requerimientos funcionales

Los requerimientos funcionales son capacidades, condiciones y acciones que el sistema debe cumplir, por lo que es de vital importancia que su definición sea lo más clara posible.

No Requisito Descripción

R1

Cargar los elementos a insertar en el área de diseño.

El módulo debe permitir cargar desde una ubicación

en el sistema los elementos que se utilizarán para

realizar el diseño.

Rohelis Ramírez Oquendo 23

R2

Insertar los elementos en la escena. Consiste en seleccionar los elementos cargados

previamente y colocarlos en la escena.

R3

Seleccionar de uno o varios los elementos en la escena.

Consiste en permitir en la escena seleccionar un elemento o varios.

R4

Mover los elementos en la escena. El módulo debe permitir mover los elementos que se seleccionen en la escena.

R5

Agrupar y Desagrupar elementos en la escena.

Permitir agrupar elementos en un grupo y poder desagruparlos a apreciación del usuario.

R6

Permitir el zoom en la escena. En la escena se debe permitir alejar o acercar la misma para una mejor visualización del trabajo.

R7

Eliminar uno o varios elementos en la escena.

Se debe permitir eliminar elementos ya sea simples, múltiples o agrupados.

R8

Aplicar transformaciones de escala y rotación a los elementos en la escena.

Sobre la escena se debe permitir aplicar transformaciones de escala y rotación a los elementos.

R9

Guardar imagen del diseño. El módulo debe permitir guardar una imagen del diseño realizado una vez que el usuario haya terminado.

R10

Insertar Texto. El módulo debe permitir al usuario insertar un texto en la escena, posicionarlo donde desee y moverlo.

R11

Llevar hacia delante o hacia atrás En caso de que un elemento quede sobre otro el

módulo debe permitir poder llevar hacia delante o

Rohelis Ramírez Oquendo 24

un elemento. hacia atrás como el usuario desee.

R12

Insertar línea. El módulo debe permitir insertar una línea cuando el usuario desee.

Tabla 1: Requisitos funcionales y descripción

2.4.3 Requisitos no funcionales

Los requisitos no funcionales son aquellos que especifican los criterios que pueden usarse para juzgar la operación del sistema, no su comportamiento específico. Los requisitos no funcionales presentes en el módulo son los siguientes.

1. Hardware.

a. Procesador Pentium 4 a 2.7 GHz o superior.

b. Memoria RAM de 512 MB de capacidad.

c. Espacio en disco duro de 512 MB.

2. Usabilidad.

a. El sistema deberá ser multiplataforma, es decir deberá correr sobre los sistemas operativos Windows y GNU/Linux.

3. Requisitos no funcionales de Restricciones en el Diseño e Implementación.

a. Lenguaje de programación C++.

b. IDE de desarrollo: Qt Creator, Visual Studio 2008.

c. Bibliotecas de clases: Qt.

2.5 Modelo de casos de uso

2.5.1 Definición y justificación de actores del sistema

Actores Justificación

Rohelis Ramírez Oquendo 25

Usuario

El usuario es quien interactúa con la aplicación, es el que se

desempeña en la labor de diseño, utilizando las herramientas y elementos que la aplicación provee.

Tabla 2: Actores del sistema

2.5.2 Diagrama de casos de uso (CU)

Figura 18: Diagrama de casos de uso

Rohelis Ramírez Oquendo 26 2.5.3 Descripción de los casos de uso

Caso de uso Cargar elementos.

Actores Usuario.

Trabajadores _

Resumen Una vez inicializada la aplicación se leen todos los archivos

*.scene de la carpeta media del directorio de la aplicación, cada

*.scene representa un elemento y contiene la información del mismo.

Referencia RF-1

Pre-Condiciones Las imágenes de los elementos deben estar en la dirección especificada.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Inicia la aplicación. 1.1 Lee todos los *.scene de la carpeta media localizada en el directorio de la aplicación.

1.2 Muestra la barra de elementos con los elementos encontrados y su información.

Pos-Condiciones La aplicación queda lista para el diseño.

Rohelis Ramírez Oquendo 27

Prioridad Crítico.

Tabla 3: Descripción del CU: Cargar elementos

Caso de uso Gestionar elementos de la escena.

Actores Usuario.

Trabajadores _

Resumen Permite la interacción con los elementos, insertarlos en la escena, seleccionarlos, moverlos y eliminarlos.

Referencia RF-2, RF-3, RF-4, RF-7

Pre-Condiciones La barra de elementos está cargada.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Insertar elementos en la escena. 1.1 El sistema inserta el elemento en la escena en la posición del mouse donde se dió clic.

1.2 Muestra las esquinas del elemento informando que se encuentra seleccionado.

2. Seleccionar un elemento. 2.1 Se visualizan las esquinas del elemento.

Rohelis Ramírez Oquendo 28 2.2 El elemento queda seleccionado.

3. Seleccionar múltiples elementos. 3.1 Se visualizan las esquinas de todos los elemento contenidos.

3.2 Todos los elementos contenidos quedan seleccionados.

4. Mover elementos en la escena. 4.1 El sistema mueve los elementos seleccionados a la posición del mouse.

5. Eliminar elementos. 5.1 El sistema elimina los elementos seleccionados.

Pos-Condiciones Los elementos están en la escena.

Prioridad Crítico.

Tabla 4: Descripción del CU: Gestionar elementos de la escena

Caso de uso Rotar elementos.

Actores Usuario.

Trabajadores _

Resumen Permite la rotación de los elementos para lograr la dirección deseada.

Referencia RF-8

Rohelis Ramírez Oquendo 29 Pre-Condiciones La escena contiene elementos.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Seleccionar un elemento.

2. Seleccionar esquina de rotación.

1.1 Se visualizan las esquinas del elemento.

1.2 El sistema rota el elemento con respecto al centro del mismo.

Pos-Condiciones Los elementos están en la escena.

Prioridad Medio.

Tabla 5: Descripción del CU: Rotar elementos

Caso de uso Escalar elementos.

Actores Usuario.

Trabajadores _

Resumen Permite la escala de los elementos para lograr el tamaño deseado.

Referencia RF-8

Pre-Condiciones La escena contiene elementos.

Rohelis Ramírez Oquendo 30 Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Seleccionar un elemento.

2. Seleccionar esquina de escala.

1.1 Se visualizan las esquinas del elemento.

1.2 El sistema escala el elemento al tamaño definido por el usuario.

Pos-Condiciones Los elementos están en la escena.

Prioridad Medio.

Tabla 6: Descripción del CU: Escalar elementos

Caso de uso Agrupar elementos.

Actores Usuario.

Trabajadores _

Resumen Permite hacer grupos de elementos.

Referencia RF-5

Pre-Condiciones La escena contiene elementos.

Flujo normal de eventos

Acción del actor Respuesta del sistema

Rohelis Ramírez Oquendo 31 1. Seleccionar elementos.

2. Seleccionar herramienta agrupar.

1.1 Se visualizan las esquinas de los elemento.

1.2 El sistema agrupa los elementos seleccionados en uno.

1.3 Resalta el rectángulo que contiene el elemento resultante visualizando los lados del mismo.

Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 7: Descripción del CU: Agrupar elementos

Caso de uso Desagrupar elementos.

Actores Usuario.

Trabajadores _

Resumen Permite deshacer grupos de elementos.

Referencia RF-5

Pre-Condiciones La escena contiene elementos.

Flujo normal de eventos

Rohelis Ramírez Oquendo 32

Acción del actor Respuesta del sistema

1. Seleccionar elementos.

2. Seleccionar herramienta desagrupar.

1.1 Se visualizan las esquinas del elemento.

1.2 El sistema desagrupa los elementos manteniendo la posición de los mismos.

Pos-Condiciones Los elementos están en la escena.

Prioridad Medio.

Tabla 8: Descripción del CU: Desagrupar elementos

Caso de uso Realizar acercamiento de la escena.

Actores Usuario.

Trabajadores _

Resumen Permite una mejor visualización de lo que se diseña.

Referencia RF-6

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Seleccionar herramienta acercar. 1.1 Se visualiza la escena con una escala de

Rohelis Ramírez Oquendo 33 un +10%.

3. Seleccionar herramienta restablecer. 3.1 Se visualiza la escena en su escala inicial.

Pos-Condiciones Los elementos están en la escena.

Prioridad Crítico.

Tabla 9: Descripción del CU: Realizar acercamiento de la escena

Caso de uso Realizar alejamiento de la escena.

Actores Usuario.

Trabajadores _

Resumen Permite una mejor visualización de lo que se diseña.

Referencia RF-6

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Seleccionar herramienta alejar. 1.1 Se visualizan la escena con una escala

de un -10%.

Rohelis Ramírez Oquendo 34 Pos-Condiciones Los elementos están en la escena.

Prioridad Crítico.

Tabla 10: Descripción del CU: Realizar alejamiento de la escena

Caso de uso Guardar imagen del diseño.

Actores Usuario.

Trabajadores _

Resumen Terminada la práctica el usuario puede guardar la imagen del diseño realizado.

Referencia RF-9

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Selecciona herramienta tomar foto.

2. Escoge donde guardar y escribe el nombre de la imagen.

1.1 El sistema muestra una ventana de dialogo de guardar.

1.2 El sistema guarda la imagen de la

escena en la dirección seleccionada en

formato *.png.

Rohelis Ramírez Oquendo 35 Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 11: Descripción del CU: Tomar imagen del diseño

Caso de uso Llevar hacia delante.

Actores Usuario.

Trabajadores _

Resumen Permite llevar delante un elemento sobre otro si se encuentran colisionando a la vista del usuario.

Referencia RF-11

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Selecciona herramienta traer adelante.

1.1 El elemento seleccionado pasa hacia delante con respecto a los demás.

Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 12: Descripción del CU: Llevar hacia delante

Rohelis Ramírez Oquendo 36 Caso de uso Llevar hacia atrás.

Actores Usuario.

Trabajadores _

Resumen Permite llevar atrás un elemento sobre otro si se encuentran colisionando a la vista del usuario.

Referencia RF-11

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Selecciona herramienta Llevar atrás. 1.1 El elemento seleccionado pasa hacia atrás con respecto a los demás.

Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 13: Descripción del CU: Llevar hacia atrás

Caso de uso Insertar texto.

Actores Usuario.

Trabajadores _

Rohelis Ramírez Oquendo 37 Resumen Permite insertar un texto en el diseño y modificar el mensaje del

mismo, el usuario puede moverlo y posicionarlo donde desee.

Referencia RF-10

Pre-Condiciones La aplicación está corriendo.

Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Selecciona herramienta Insertar texto. 1.1 Inserta el texto “Doble clic para escribir”

en la posición del mouse donde se dió clic

izquierdo

.

Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 14: Descripción del CU: Insertar texto

Caso de uso Insertar línea.

Actores Usuario.

Trabajadores _

Resumen Permite insertar una línea en el diseño.

Referencia RF-12

Pre-Condiciones La aplicación está corriendo.

Rohelis Ramírez Oquendo 38 Flujo normal de eventos

Acción del actor Respuesta del sistema

1. Selecciona herramienta Insertar línea. 1.1 Inserta una línea iniciando en la posición del mouse donde presiona clic derecho y terminando en la posición donde se libera el clic derecho.

Pos-Condiciones Los elementos están en la escena.

Prioridad Media.

Tabla 15: Descripción del CU: Insertar texto

Conclusiones Parciales

Anteriormente se mostró la solución propuesta al problema planteado, además se muestra el prototipo del módulo a desarrollar. Se realizó la selección de los actores que intervienen y se detectaron los requisitos funcionales y no funcionales del módulo.

Rohelis Ramírez Oquendo 39

Capítulo 3. Análisis, Diseño e Implementación del Sistema

Una vez definida la propuesta de solución a desarrollar y las funcionalidades presentes en la aplicación se realiza la implementación de la misma. En el presente capítulo se presentarán el diagrama de clases del análisis y los diagramas de interacción por cada caso de uso. Están presentes las pruebas pertinentes para asegurar el correcto funcionamiento del módulo así como los estándares de código utilizados en la implementación.

3.1 Diagrama de clases del diseño

Los diagramas de clases constituyen un tipo de diagrama estático, utilizados en el proceso de análisis y diseño, muestra de manera descriptiva la estructura del sistema, las clases que lo conforman y las relaciones entre las mismas.

Figura 19: Diagrama de clases del diseño

Rohelis Ramírez Oquendo 40

3.2 Diagramas de Interacción.

Los diagramas de interacción describen el comportamiento y en qué colaboran un cierto número de objetos. Por lo general son orientados a un solo caso de uso. Dentro de los mismos encontramos los diagramas de secuencia los cuales son designados para mostrar gráficamente los eventos originados por los actores que tienen un impacto fundamental dentro del sistema.

3.2.1 Diagrama de secuencia del CU Cargar elementos

Figura 20: Diagrama de secuencia del CU: Cargar elementos

3.2.2 Diagrama de secuencia del CU Gestionar elementos de la escena

Insertar elementos

Rohelis Ramírez Oquendo 41

Figura 21: Diagrama de secuencia del CU: Insertar elementos

Seleccionar un elemento

Figura 22: Diagrama de secuencia del CU: Seleccionar un elemento

Seleccionar múltiples elementos

Rohelis Ramírez Oquendo 42

Figura 23: Diagrama de secuencia del CU: Seleccionar múltiples elementos

Mover elementos

Figura 24: Diagrama de secuencia del CU: Mover elementos

Eliminar elementos

Rohelis Ramírez Oquendo 43

Figura 25: Diagrama de secuencia del CU: Eliminar elementos

3.2.3 Diagrama de secuencia del CU Rotar elementos

Figura 26: Diagrama de secuencia del CU: Rotar elementos

Rohelis Ramírez Oquendo 44 3.2.4 Diagrama de secuencia del CU Escalar elementos

Figura 27: Diagrama de secuencia del CU: Escalar elementos

3.2.5 Diagrama de secuencia del CU Agrupar elementos

Figura 28: Diagrama de secuencia del CU: Agrupar elementos

Rohelis Ramírez Oquendo 45 3.2.6 Diagrama de secuencia del CU Desagrupar elementos

Figura 29: Diagrama de secuencia del CU: Desagrupar elementos

3.2.7 Diagrama de secuencia del CU Realizar alejamiento

Figura 30: Diagrama de secuencia del CU: Realizar alejamiento

Rohelis Ramírez Oquendo 46 3.2.8 Diagrama de secuencia del CU Realizar acercamiento

Figura 31: Diagrama de secuencia del CU: Realizar acercamiento

3.2.9 Diagrama de secuencia del CU Guardar imagen del diseño

Figura 32: Diagrama de secuencia del CU: Guardar imagen del diseño

Rohelis Ramírez Oquendo 47 3.2.10 Diagrama de secuencia del CU Insertar línea

Figura 33: Diagrama de secuencia del CU: Insertar línea

3.2.11 Diagrama de secuencia del CU Llevar hacia delante

Figura 34: Diagrama de secuencia del CU: Llevar hacia delante

Rohelis Ramírez Oquendo 48 3.2.12 Diagrama de secuencia del CU Llevar hacia atrás

Figura 35: Diagrama de secuencia del CU: Llevar hacia atrás

3.2.12 Diagrama de secuencia del CU Insertar texto

Figura 36: Diagrama de secuencia del CU: Insertar texto

Rohelis Ramírez Oquendo 49

3.3 Implementación y Pruebas

Para la implementación el siguiente estándar de código fue el que se definió debido a que es el que se trabaja dentro del marco del proyecto Laboratorios Virtuales.

Identación: Definida como una tabulación equivalente a cuatro espacios en blanco ejemplo.

void MainModule::deleteAllItems()

{

scene->setMode(ModuleScene::ClearScene);

scene->deleteItem();

}

Variables

La declaración de las variables comienza con el tipo de datos o la instancia a la que pertenece seguido del nombre de la variable con letra minúscula.

QAction *actionTakePhoto;

double factorScale;

QPixmap photo;

Clases

Todas las palabras que las compongan comenzarán con letra inicial mayúscula ejemplo.

class ModuleScene {

Rohelis Ramírez Oquendo 50

…….

}

Funciones o Métodos

Los nombres de las funciones comienzan con letra minúscula, si la palabra es compuesta la segunda comienza con mayúscula.

void setMode(Mode mode);

void deleteItem();

Condicionales y ciclos

Los ciclos y condicionales están estructurados por la palabra reservada del ciclo o condicional en cuestión, seguido de la condición y entre llaves los bloques de instrucciones, si esto no excede de una línea de código puede no usar las llaves.

if(myMode == InsertItem) Marca = 0;

if(Marca) {

myMode = SelectItems;

all = false;

}

foreach(QGraphicsItem *item, items(mouseEvent->scenePos())) {

Rohelis Ramírez Oquendo 51

if(qgraphicsitem_cast<QGraphicsItemGroup *>(item) || item->type()==Box::Type) {

Marca = 0;

break;

} }

for (int i = 0; i < listFolders.size(); i++) {

currentScene = listFolders.at(i);

}

switch(myMode) {

case InsertItem:

item = new PictureItem(image);

addItem(item);

break;

}

3.4 Modelos de pruebas

Caso de Uso: Cargar elementos.