UNIVERSIDAD NACIONAL MICAELA BASTIDAS DE APURIMAC

FACULTAD DE INGENIERÍA
ESCUELA ACADÉMICO PROFESIONAL DE INGENIERÍA INFORMÁTICA
Y SISTEMAS

DOCUMENTO DE DISEÑO

SISTEMA DE COMUNICACIÓN POR INTERCAMBIO DE IMÁGENES

(PECS)

Fecha: 15/12/2017
Versión: 3.0
EQUIPO DE DESARROLLO
NOMBRE
Astrid Huamán Montes
Nelson Rojas Gonzales
Oliver Panebra Quispe
Cesar I. Díaz Navarro
ROL CONTACTO
Jefe de Proyecto astrid_2345@hotmail.com
Analista/Implementador nhelrojas00@gmail.com
Implementador /Diseñador oliver.panebraq10@gmail.com
Diseñador/Tester cesardinex@hotmail.com

CONTRAPARTE
NOMBRE ROL CONTACTO
Hilda Matilde Loayza Ynquil Cliente matilde.loayza@gmail.com

HISTORIA DEL DOCUMENTO

Versión Fecha Razón de cambio Autor(es)
1.0 03/12/2017 Primer borrador Oliver Panebra
Quispe
2.0 04/12/2017 Primera Versión Oliver Panebra
Quispe
2.1 12/12/2017 Revisión primera Oliver Panebra
versión Quispe
3.0 15/12/2017 Segunda versión Oliver Panebra
Quispe
 INDICE

1 Introducción ............................................................................................................................. 1
1.1 Propósito del Sistema ....................................................................................................... 1
1.2 Alcance del Proyecto ........................................................................................................ 1
1.3 Definiciones, siglas y abreviaturas ................................................................................... 1
1.4 Referencias ....................................................................................................................... 2
1.5 Descripción general .......................................................................................................... 2
1.6 Servicios a brindar por el producto .................................................................................. 3
2 Diseño Arquitectónico ............................................................................................................. 3
2.1 Arquitectura Física ........................................................................................................... 3
2.2 Arquitectura lógica ........................................................................................................... 5
3 Diseño detallado ...................................................................................................................... 7
3.1 Diseño detallado de módulos ........................................................................................... 7
3.1.1 Sistema de visualización de contenidos .................................................................... 7
3.1.2 Sistema de gestión de contenidos ............................................................................. 2
3.2 Diseño de navegación del sistema .................................................................................... 2
3.3 Diseño de interfaz de usuario ........................................................................................... 3
3.3.1 Página Inicial ............................................................................................................ 3
3.3.2 Página Principal ........................................................................................................ 4
3.3.3 Normas de convivencia ............................................................................................. 5
3.3.4 Sistema de comunicación por intercambio de imágenes (PECS) ............................. 6
3.3.5 Cronograma de Actividades ...................................................................................... 6
3.3.6 Cursos básicos .......................................................................................................... 7
3.3.7 Familia ...................................................................................................................... 8
3.3.8 Clima y fecha ............................................................................................................ 9
3.4 Diccionario de datos ......................................................................................................... 9
3.4.1 Especificación de Procesos ....................................................................................... 9
1 Introducción
1.1 Propósito del Sistema
El presente proyecto consiste en el desarrollo del programa PECS este programa está basado en
el Sistema de Comunicación por Intercambio de Imágenes (PECS) una aplicación que apoya la
comunicación, interacción entre los docentes de la Institución Educativa CEBE Nº 11 La Salle
Abancay de la Educación Básica Especial con los niños que padecen con trastornos del espectro
autista (TEA).

Entre las prestaciones el programa PECS muestra el cronograma de actividades, las normas de
convivencia en el aula, los cursos básicos como Matemática, Comunicación, Ciencia y
Ambiente, Personal Social, el clima (Soleado, Nublado, Lluvia) y la fecha para realizar las
labores antes mencionadas durante el día.

1.2 Alcance del Proyecto

El sistema poseerá las siguientes características al final del período de desarrollo:
 Los docentes podrán acceder al programa PECS y realizar sus actividades diarias en
clases.
 Los docentes podrán visualizar el cronograma de actividades del día.
 Los docentes podrán acceder a los cursos básicos como: (Matemática, Comunicación,
Ciencia y Ambiente, Personal Social).
 Se visualizarán las normas de convivencia por medio de pictogramas.
 El clima del día estará identificado por diferentes pictogramas dependiendo a como se
encuentra el día (soleado, lluvia, nublado).
 Tendrá los siguientes eventos como: eliminar, agregar, buscar y imprimir imágenes.

1.3 Definiciones, siglas y abreviaturas

 PECS: Sistema de Comunicación por Intercambio de Imágenes.
 Java: Es un lenguaje de programación de propósito general, concurrente, orientado a
objetos.
 Pictograma: Dibujo o signo gráfico que expresa un concepto relacionado materialmente
con el objeto al que se refiere.

1
  Xampp: Es un servidor web de plataforma, software libre, que consiste principalmente en
el sistema de gestión de bases de datos MySQL.
 MySQL: Es un sistema de gestión de bases de datos relacional desarrollado bajo la
licencia dual GLP/licencia comercial por Oracle Corporation.

1.4 Referencias
 Documento de diseño portal de proyectos externos dcc
 Cátedra de ingeniería de software I – Ing. Manuel Ibarra Cabrera
 Sistema de comunicación con intercambio de imágenes (PECS) - Nola Marriner Ph.D.
 SAAC en niños con TEA: implantación del sistema PECS en aula de infantil”- Luisa
Cáceres Parejo
 las P.E.C.S. (sistema de comunicación por intercambio de imágenes) una estrategia
pedagógica para fortalecer los procesos de lectura y escritura en los niños y niñas de
preescolar de la institución educativa mercedes ábrego – Alcira Polo Morelos -Liliana
Henao Arrollave - Leila Villalba Hernández
 Documentación de Java

1.5 Descripción general

El sistema de comunicación de intercambio de imágenes (PECS) será un medio por donde los
docentes podrán realizar sus actividades de enseñanza, que realizan diariamente con
conjuntamente con los niños. La interfaz por donde podrán acceder los docentes será mediante
una aplicación de escritorio.
La visibilidad del programa será ilimitada, quiere decir que todos los docentes de la institución
tendrán acceder al sistema. La facilidad que hay, de poder acceder al sistema, es sumamente muy
fácil no necesita registrarse y así puede acceder a cualquiera de las actividades que se encuentra
en el sistema del PECS.
Cada actividad tiene un determinado rol de pictograma de acuerdo a las actividades que se
realiza en la institución y también tenemos algunos eventos que se utilizaran en el sistema como
para agregar pictograma, eliminar pictogramas, buscar pictogramas e imprimir imágenes.
La interface del sistema está presentado de acuerdo a como ellos optaron por la forma como
deben estar establecidas de que sea de forma atractiva también de acuerdo a su logotipo y colores
de la institución.

2
Al desarrollar el “sistema de comunicación de intercambio de imágenes” es un proyecto
completamente nuevo y establecido mediante una idea reciente, conlleva una gran cantidad de
desventaja en las etapas tempranas de desarrollo, en este caso será muy difícil establecer la
estructura u orden de la implementación.
El primer paso a realizar fue elegir el software PECS Para el desarrollo del proyecto, a partir de
las funcionalidades requeridas por el sistema y los datos del PECS utilizado de la institución.
Para ellos hicimos un prototipo para mostrar a los docentes como es que ellos querían el software
para que puedan utilizar, y después establecimos de acuerdo a las indicaciones que nos dieron
para poder realizar el software.
El segundo paso fue diseñar la ventana principal de acceso y también para cada actividad se
estableció una ventana. Donde les permitirá acceder de forma sencilla. Durante el proceso se
trabajó estableciendo algunas funciones definidas del sistema, empleando algunas acciones
dentro de las actividades, empleando los módulos del PECS.
El tercer paso es determinar las características que darán una buena impresión del sistema,
definiendo para esto, tipografías, imágenes, colores de acuerdo a la institución.

1.6 Servicios a brindar por el producto

El software tiene como único usuario: Docente.
El primer paso para poder ingresar al aplicativo es por medio de la pantalla inicial donde habrá
dos opciones: el de ingreso y el otro botón para salir del aplicativo.
La página de inicio contará con diferentes opciones para el docente donde podrá elegir para
realizar sus actividades del día. Las funcionalidades ofrecidas serán:
 Docente:
 Podrá agregar pictogramas según su actividad que realizará en su aula
 Eliminar pictograma
 Buscar pictograma según el nombre
 Podrán ingresar a los cursos básicos
 Tendrán acceso a los 11 colores básicos del pecs
 Tendrán acceso al calendario y al clima del día

2 Diseño Arquitectónico
2.1 Arquitectura Física
En el sistema a desarrollar se emplea la arquitectura 3 de capas, usando conexiones locales para
acceder a los distintos recursos.

3
La primera capa de presentación: la interfaz del programa PECS que está basado en el sistema
de comunicación por intercambio de imágenes, provista por el entorno grafico (formularios) que
posee NetBeans 8.1.
Para acceder al sistema Pecs el usuario deberá emplear un ordenador Intel core i3 que tenga
instalado el sistema operativo Windows 7 Service Pack 1 en adelante. La Arquitectura del
sistema que debe tener el ordenador será 32/64 bits, como también el ordenador debe tener
instalado: Java Development Kit (JDK), Java Runtime Environment (JRE) en la versión
1.8.0_45, a continuación debe poseer un servidor web llamado Xampp posterior a esta versión
5.6.15.
La segunda capa de negocio: almacena la lógica de negocios provisto por los propios
implementadores del sistema. El sistema Pecs se creó empleando NetBeans 8.1 que básicamente
ofrece a desarrolladores de software libre y estudiantes.
La tercera capa de datos: contiene la base de datos para este se utilizara MySql para el sistema
PECS, para almacenar imágenes en formato jpg, png, jpeg se utilizara el tipo de dato
LONGBLOB.
A continuación se presenta un diagrama de las capas mencionadas:

Módulos Formulario
Propios del del Menú
BD c
sistema c Principal
“Pecs”
Usuario

Capa 3 Capa 2 Capa 1

Ilustración 1: diagrama de arquitectura física

4
2.2 Arquitectura lógica

El sistema de comunicación por intercambio de imágenes (PECS) será empleado y utilizado por
los docentes de la Institución Educativa CEBE Nº 11 LA SALLE ABANCAY de la Educación
Básica Especial con el propósito de enseñar a los niños a comunicarse con gestos verbales y no
verbales. Las sesiones de aprendizaje importantes para la comunicación, interacción con la
sociedad serán llevadas a cabo en formularios que proporciona Microsoft Visual Studio
destinados a soportar al sistema de comunicación por intercambio de imágenes.

Donde el usuario ingresa de manera libre no es necesario la autentificación al sistema. Los

cambios que ellos realicen deberán reflejarse en la colección de imágenes que se sitúa en el
ordenador.
La arquitectura lógica del sistema de comunicación por intercambio de imágenes concentra las
operaciones de visualización de pictogramas, visualización de los colores básicos del PECS,
agregar pictogramas, buscar pictogramas por nombre, eliminar pictogramas, visualización de
cronograma de actividades, visualización de cursos básicos como: matemática, comunicación,
personal social, ciencia y ambiente, visualización del clima y fecha separándose como se muestra
a continuación:

Sistema de
visualización
de contenidos

Menú
principal

Sistema de
Gestión de
contenidos

Ilustración 2: Diagrama de arquitectura lógica

5
Los módulos pertenecen al sistema señalado y el acceso a ellos se da de forma libre sin alguna
restricción, delimitación.
Las acciones que los usuarios podrán realizar al navegar por el programa están dadas por los
siguientes diagramas:
1. Docente Agregar pictograma

Ver cronograma Buscar pictograma

de actividades
Eliminar pictograma

Ver cursos básicos

Menú
Principal
Ver clima y fecha

Ver “Pecs”
completado

Ilustración 3: Acciones del docente

6
3 Diseño detallado
3.1 Diseño detallado de módulos
3.1.1 Sistema de visualización de contenidos

1. Sistema de visualización de contenidos

1.3 Gestión de
Detalle/contenido contenidos
1.1 Página Selección del botón
Principal seleccionado

1.2 Búsqueda
por opciones
de botón(clic)

Ilustración 4: Diseño detallado subsistema 1

1.1 Menú principal En este módulo existe un menú principal que

muestra opciones con contenidos diferentes
y donde se podrá acceder a cada uno de
ellos.

Muestra en pantalla opciones de búsqueda y

1.2 Búsqueda por opciones de botón(clic) por medio de un clic se procederá al
siguiente paso.

1.3 Detalle/Contenido seleccionado Muestra en pantalla el contenido del botón

seleccionado, siempre en cuando el usuario
haga uso de dicha interfaz

7
3.1.2 Sistema de gestión de contenidos

2. SISTEMA DE GESTIÓN DE CONTENIDOS

Sistema de
2.1 Agregar Selección 2.2 Crear su visualización
pictogramas propia actividad de contenidos
de clase

2.3 Eliminar 2.4 Buscar los

pictogramas colores del Pecs

2.5 Ver cursos

básicos

Ilustración 5: Diseño detallado de Subsistema 2

3.2 Diseño de navegación del sistema

El software a desarrollar consiste en una aplicación para desktop (escritorio), donde el usuario
visualiza, agrega, elimina y busca pictogramas para la enseñanza/aprendizaje de los niños.

Desde el punto de vista del usuario la aplicación para desktop (escritorio) representará el
conjunto de las acciones a las que puede acceder. El diagrama de navegación de la aplicación de
desktop (escritorio) es el siguiente:

2
 Normas de Convivencia

Cronograma de actividades Familia

Matematica

Menu Principal
Cursos basicos Comunicacion
Usuario

Ciencia y Ambiente

Pecs Personal social

Clima

Ilustración 6: Diseño de navegación del sistema

3.3 Diseño de interfaz de usuario

El diseño a emplear se basó en lograr alguna similitud con lo que utilizaban los docentes
manualmente que era el Pecs y mantener una interfaz dinámica y fácil de usar.

3.3.1 Página Inicial

La primera página con lo que el usuario se encontrará estará conformado por dos opciones: botón
entrar y salir.

3
 Ilustración 7: Página de inicio del sistema

3.3.2 Página Principal

La página principal del sistema mostrará un menú con diferentes opciones donde el docente
podrá elegir según la corresponda para realizar su actividad. El menú principal estará formado
por un menú bar las cuales poseerán menús, estos menús serán cinco a continuación los
mencionaremos: Inicio, Pécs, cronograma de actividades, cursos, clima cada uno de estos posee
un submenú que contiene otras acciones a realizar.

4
3.3.3 Normas de convivencia
Ilustración 8: Página principal

En el área de normas de convivencia el docente muestra pictogramas determinados a los niños

para el aprendizaje de estas normas y ponerlas en práctica.

Ilustración 9: Interfaz Normas de convivencia

5
3.3.4 Sistema de comunicación por intercambio de imágenes (PECS)

En el área del Pecs estarán conformados por los distintos colores que están establecidos según
base Pecs que consta de 11 colores. Así mismo los pictogramas se podrán insertar de acuerdo al
color que represente dicha acción a realizar, muestra una lista de todos los pictogramas de forma
vertical, como también se podrá realizar una búsqueda del pictograma el cual se aumentara de
tamaño.

Ilustración 10: Interfaz Pecs

3.3.5 Cronograma de Actividades

En el área de actividades el docente realizar su sesión de clases del día mostrando pictogramas de
acuerdo a los ítems como: reconocimiento de animales, frutas, juguetes, platos típicos y otros
que ayude al aprendizaje de los niños de la institución.
La siguiente ventana presenta la manipulación de pictogramas dinámicamente realizando
acciones de agregar pictogramas, guardar los pictogramas, búsqueda de pictogramas mediante el
nombre, eliminación de pictogramas y la impresión de pictogramas.

6
 Ilustración 11: Interfaz de actividades del día
3.3.6 Cursos básicos

En esta área se mostrará una interfaz donde existirán los cursos básicos (Matemática,
Comunicación, Ciencia/Ambiente y Personal Social). Cada uno de ellos en un sub menú y una
vez hecho clic envía a la ventana correspondiente.

7
 Ilustración 12: Interfaz de cursos básicos

Ilustración 12: Interfaz del curso Matemáticas

3.3.7 Familia
En esta área se visualizará todo lo sobre la familia por medio de pictogramas.

Ilustración 13: Interfaz de reconocimiento familia

8
3.3.8 Clima y fecha
En esta área se visualizará el clima y la fecha dependiendo al calendario.

Ilustración 14: Interfaz del clima según calendario

3.4 Diccionario de datos

3.4.1 Especificación de Procesos

Atributo Descripción
Identificador MD 1.1
Nombre Agregar pictograma
Subsistema Sistema de gestión de contenidos
Función Se despliega en la pantalla del formulario de
cronograma de actividades al lado derecho
parte superior.
Entrada Seleccionar pictograma
Salida Mostrar pictograma

Atributo Descripción
Identificador MD 1.2
Nombre Eliminar pictograma
Subsistema Sistema de gestión de contenidos
Función En formulario de cronograma de actividades
permite eliminar un pictograma que se va
utilizar.
Entrada Seleccionar pictograma

9
Salida Mensaje de confirmación a eliminar
pictograma

Atributo Descripción
Identificador MD 1.3
Nombre Buscar pictograma por nombre
Subsistema Sistema de gestión de contenidos
Función En la pantalla del formulario de cronograma
de actividades se busca imágenes relacionados
a la actividad realizada en el día.
Entrada Filtrar pictograma por nombre
Salida Mostrar pictograma

10