“Sistema de Visualización en Dispositivos Móviles para ...
66
1 INSTITUTO POLITÉCNICO NACIONAL ESCUELA SUPERIOR DE CÓMPUTO ESCOM Trabajo Terminal “Sistema de Visualización en Dispositivos Móviles para Multitudes (DIMOMU)” 14-2-0006 Que para cumplir con la opción de titulación curricular en la carrera de: “Ingeniería en Sistemas Computacionales” Presentan Mendoza Martínez Erick Daniel Directores M. en C. Méndez Segundo Laura M. en C. Araujo Díaz David Mayo de 2014
Transcript of “Sistema de Visualización en Dispositivos Móviles para ...
1
INSTITUTO POLITÉCNICO NACIONAL
ESCUELA SUPERIOR DE CÓMPUTO
ESCOM
Trabajo Terminal
“Sistema de Visualización en Dispositivos Móviles para
Multitudes (DIMOMU)”
14-2-0006
Que para cumplir con la opción de titulación curricular en la carrera de:
“Ingeniería en Sistemas Computacionales”
Presentan
Mendoza Martínez Erick
Daniel
Directores
M. en C. Méndez Segundo Laura M. en C. Araujo Díaz David
Mayo de 2014
INSTITUTO POLITÉCNICO NACIONAL
ESCUELA SUPERIOR DE CÓMPUTO
SUBDIRECCIÓN ACADÉMICA
No. de registro: 14-2-0006 Serie: Amarilla Mayo del 2014
Documento técnico
"Sistema de Visualización en Dispositivos Móviles para
Multitudes (DIMOMU)"
Presentan
Mendoza Martínez Erick Daniel
1
Directores
M. en C. Méndez Segundo Laura
M. en C. Araujo Díaz David
RESUMEN Este trabajo terminal despliega imágenes en dispositivos móviles con el fin de diseñar,
desarrollar e implementar un sistema de visualización para multitudes, que genera a partir
de una imagen fragmentos de la misma para cada dispositivo, recreando la imagen en su
totalidad en una escala mayor a la que se vería en uno solo, el propósito crear mensajes con
un volumen grande de personas para eventos de entretenimiento o sociales, abriendo una
brecha para publicidad o mercadotecnia poco accesible al público en general.
Palabras clave: Software de visualización, dispositivos móviles, publicidad,
mercadotecnia, programación web.
1 E-mail: [email protected]
4
Advertencia
“Este documento contiene información desarrollada por la Escuela Superior de Cómputo del
Instituto Politécnico Nacional, a partir de datos y documentos con derecho de propiedad y por lo
tanto, su uso quedará restringido a las aplicaciones que explícitamente se convengan.”
La aplicación no convenida exime a la escuela su responsabilidad técnica y da lugar a las
consecuencias legales que para tal efecto se determinen.
Información adicional sobre este reporte técnico podrá obtenerse en:
La Subdirección Académica de la Escuela Superior de Cómputo del Instituto
Politécnico Nacional, situada en Av. Juan de Dios Bátiz s/n Teléfono: 57296000 Extensión
52000.
AGRADECIMIENTOS
Agradezco a mis padres Ana Rosario Martínez Aguirre y Severiano Mendoza Alcántara por
apoyarme a lo largo de la carrera, al igual que mis hermanos, Dolores Merary Mendoza
Martínez, Alejandro Mendoza Martínez y Tania Ivonne Mendoza Martínez, gracias por todo
lo que me han enseñado.
En especial quiero agradecer a mis directores Laura Méndez Segundo y a David Araujo Díaz
por brindarme su apoyo en este proyecto.
Erick Daniel Mendoza Martínez.
6
Índice
Índice ................................................................................................................................................. 6
1. Capitulo: Introducción ............................................................................................................ 9
1.1. Introducción ..................................................................................................................... 9
1.2. Antecedentes .................................................................................................................. 10
1.2.1. Sistema VideoWall ................................................................................................. 10
1.2.2. Sistema Multipantalla controlada mediante pellizcos ................................... 11
1.3. Objetivo General ............................................................................................................ 12
1.3.1. Objetivos Específicos ............................................................................................ 12
1.4. Justificación .................................................................................................................... 13
1.5. Estado del Arte ............................................................................................................... 14
1.6. Marco teórico ................................................................................................................. 14
1.6.1. Proceso de visualización ...................................................................................... 14
1.6.2. Matriz de Dispositivos .......................................................................................... 15
1.6.3. Procesamiento y sincronización ........................................................................ 16
1.6.4. Respuesta del Servidor ......................................................................................... 16
1.6.5. Visualización de la secuencia en la matriz de los Dispositivos Móviles ..... 17
2. Capítulo: Análisis. .................................................................................................................. 22
2.1. Lenguaje de Programación .......................................................................................... 22
2.2. Sistema Operativo ......................................................................................................... 22
2.3. Dispositivos Móviles ..................................................................................................... 22
2.4. Base de Datos ................................................................................................................. 23
2.5. Análisis de Requerimientos ........................................................................................ 23
2.5.1. Requerimientos Funcionales .............................................................................. 24
2.5.2. Requerimientos no Funcionales ......................................................................... 25
3. Capitulo: Diseño ..................................................................................................................... 26
3.1. Diagramas UML .............................................................................................................. 26
3.1.1. Diagrama de Casos de Uso. .................................................................................. 26
3.1.2. Diagrama de Casos de Uso del Sistema ............................................................. 26
3.1.3. Diagramas de Secuencia ....................................................................................... 30
3.1.4. Diagramas base de datos ..................................................................................... 34
7
3.2. Arquitectura del sistema ............................................................................................. 35
3.2.1. Arquitectura 3 capas ............................................................................................. 35
3.2.2. Patrón de diseño Modelo Vista Controlador (MVC) ........................................ 38
3.3. Estimación de Costo .......................................................................................................... 40
3.4. Wi-Fi .................................................................................................................................. 41
4. Capitulo: Desarrollo e implementación del sistema ...................................................... 42
4.1. Página de inicio .............................................................................................................. 42
4.2. Acerca de DIMOMU ........................................................................................................ 43
4.3. Crear Secuencia ............................................................................................................. 43
4.4. Servicio ............................................................................................................................ 44
4.4.1. ThreadStart ............................................................................................................ 44
4.4.2. Thread ..................................................................................................................... 45
4.4.3. GetSecuencia .......................................................................................................... 45
4.5. Creando una Secuencia ................................................................................................ 49
4.5.1. Interfaz grafica ....................................................................................................... 49
4.5.2. Creación de la Palabra ESCOM ............................................................................ 54
4.5.3. Sincronización de los dispositivos móviles ...................................................... 57
5. Capitulo: Pruebas y Resultados .......................................................................................... 58
5.1. Resultado de la letra E .................................................................................................. 58
5.2. Resultado de la letra S .................................................................................................. 59
5.3. Resultado de la letra C .................................................................................................. 60
5.4. Resultado de la letra O ................................................................................................. 61
5.5. Resultado de la letra M ................................................................................................. 62
5.6. Palabra ESCOM ............................................................................................................... 63
6. Capitulo: Conclusiones ......................................................................................................... 64
7. Capitulo: Trabajo a futuro ................................................................................................... 65
8. Referencias ............................................................................................................................. 66
8
Índice de figuras
Figura 1: Sistema VideoWall ............................................................................................. 10
Figura 2: Sistema Multipantalla Controlada mediante pellizcos ................................... 11 Figura 3: Trabajos Similares ............................................................................................. 14 Figura 4: Diagrama a bloques del sistema DIMOMU .................................................... 14 Figura 5: Matriz 5X5 .......................................................................................................... 15 Figura 6: Petición y Sincronización de los Dispositivos Móviles ................................... 16
Figura 7 Secuencia del dispositivo móvil .......................................................................... 16 Figura 8: Letra E ................................................................................................................ 17 Figura 9: Letra S ................................................................................................................ 18 Figura 10: Letra C .............................................................................................................. 19 Figura 11: Letra O .............................................................................................................. 20
Figura 12: Letra M ............................................................................................................. 21 Figura 13: Tabla de Requerimientos Funcionales ........................................................... 24
Figura 14: Tabla de Requerimientos No Funcionales ..................................................... 25
Figura 15: Diagrama de Casos de Uso .............................................................................. 26 Figura 16: Acceder a la página web .................................................................................. 27 Figura 17: Visualizar Secuencia ........................................................................................ 27
Figura 18: Reiniciar Secuencia .......................................................................................... 28 Figura 19: Mostrar Secuencia ........................................................................................... 28
Figura 20: Insertar Secuencia ........................................................................................... 29 Figura 21: Guardar Secuencia .......................................................................................... 29 Figura 22 Acceder a la Página Web .................................................................................. 30
Figura 23 Visualizar Secuencia ......................................................................................... 31
Figura 24 Reiniciar Secuencia ........................................................................................... 32 Figura 25: Muestra Secuencia ........................................................................................... 33 Figura 26: Arquitectura del Sistema ................................................................................ 37
Figura 27: MVC ................................................................................................................. 39 Figura 28: Inicio ................................................................................................................. 42
Figura 29: Acerca de Dimomu .......................................................................................... 43 Figura 30: Crear Secuencia ............................................................................................... 43
Figura 31: Interfaz Grafica para crear una secuencia .................................................... 53 Figura 32: Creación de la letra E ...................................................................................... 54 Figura 33: Creación de la letra s ....................................................................................... 55 Figura 34: Creación de la letra c ....................................................................................... 55 Figura 35: Creación de la letra O..................................................................................... 56
Figura 36: Creación de la letra M ..................................................................................... 56 Figura 37: Simulación letra E ........................................................................................... 58
Figura 38: Simulación de la letra S ................................................................................... 59 Figura 39: Simulación de la letra C .................................................................................. 60 Figura 40: Simulación de la letra O .................................................................................. 61 Figura 41: Simulación de la letra M. ................................................................................ 62 Figura 42: Palabra ESCOM .............................................................................................. 63
9
1. Capítulo: Introducción
1.1. Introducción
El desarrollo para dispositivos móviles ha experimentado en los últimos años un avance
espectacular. Este crecimiento ha hecho que sea imprescindible conocer y dominar estas
técnicas de programación, y por tanto, su inclusión en las capacidades de los ciclos
formativos de programación [1].
Actualmente los dispositivos móviles conforman una parte fundamental en la vida cotidiana
del ser humano, capaces de contar con diversas aplicaciones que ayudan a facilitar la vida del
hombre, más aun, la mayoría de las personas cuentan con este tipo de tecnología, que tiene la
capacidad de interactuar con diversos dispositivos ya sea con hardware (USB, bluetooth,
WiFi, etc.) o utilizando tecnologías Web. Hoy en día donde la tecnología crece rápidamente
se busca creer aplicaciones cada vez más complejas y robustas, independientemente de la
plataforma de cada dispositivo para llegar a un gran número de personas y evitando el
desarrollo para las distintas tecnologías existentes, aprovechando la tecnología Web y la
tecnología móvil y así brindar una opción dentro del campó de la publicidad o mercadotecnia
al alcance de personas que cuenten con un dispositivo móvil y acceso a Internet.
10
1.2. Antecedentes
A continuación presentamos algunos sistemas existentes que permiten la visualización en
diversos medios.
1.2.1. Sistema VideoWall
Los actuales sistemas de visualización digital están siendo desarrollados en base a la
consecución de diversos parámetros como: mayor ligereza, menor profundidad física,
mayores dimensiones, incremento de luminosidad y contraste y, por supuesto, mayor
versatilidad.
En base a estos parámetros, se desarrollo el sistema videowall a medida, combinando
distintos tamaños y configuraciones, y creando una solución adaptada para numerosas
aplicaciones de salas de control y supervisión, control de tráfico, seguridad, CCTV,...etc.
Incorporando la más novedosa tecnología TFT-LCD, ofreciendo una excepcional calidad de
imagen con un mínimo mantenimiento [2] (Figura 1).
Figura 1: Sistema VideoWall
Características Principales.
Multiconexión de señales RGB y de Video
Resolución por panel, desde XGA hasta UXGA.
Diseño Integrado
Software de control sencillo y dinámico.
Opción LED mensajes/reloj digital
Software OSD
11
Aplicaciones.
Control y Supervisión
Tráfico
Seguridad
CCTV
Estudios TV
Financiero
1.2.2. Sistema Multipantalla controlada mediante pellizcos
Se trata de una interfaz que es capaz de controlar varias pantallas sin importar el tamaño,
enlazándolas entre sí con un simple gesto de pellizco. La sincronización y el emparejamiento
se realiza gestionando en todo momento la posición, orientación y tamaño a través de una
conexión WiFi. De momento el hardware compatible con esta interfaz está limitado a
equipos con sistema operativo iOS, aunque posiblemente su objetivo comercial esté más
orientado a pantallas de gran formato o configuraciones especiales de escritorio [3]. (Figura
2).
Figura 2: Sistema Multipantalla Controlada mediante pellizcos
12
1.3. Objetivo General
Para implementar este trabajo, proponemos el siguiente objetivo general.
Implementar un sistema de visualización en dispositivos móviles, para desplegar mensajes
que interactúen colaborativamente con multitudes a través del uso de tecnología Web.
1.3.1. Objetivos Específicos
Para alcanzar el objetivo general, se tienen los siguientes objetivos específicos:
Coordinar el hardware de diferentes dispositivos móviles para la visualización de
mensajes.
Desarrollar la aplicación para la generación de las secuencias que serán visualizadas
en los dispositivos móviles.
Integración e implementación de los sistemas de software y hardware.
Pruebas, correcciones y resultados del sistema en conjunto.
13
1.4. Justificación
Mientras crece el número de personas que navegan a través de sus dispositivos móviles,
pocas empresas tienen un claro conocimiento sobre lo que significa tener una web móvil, los
beneficios que genera y cómo incorporarla en sus estrategias de marketing y comunicación.
[4]
Actualmente la mayoría de las personas tienen acceso a un dispositivo móvil, esto hace
posible realizar una diversidad de aplicaciones que solo estaban al alcance de un cierto grupo
de personas, hoy en día existen programas o aplicaciones que involucran la interacción entre
móviles; aprovechando esto es posible realizar una aplicación que se pueda usar en eventos
con multitudes de personas para visualizar o proyectar mensajes en diversos dispositivos
móviles generando una sola proyección, llegando a abarcar un medio alternativo para la
difusión de la publicidad, mercadotecnia, personal, social y cultural.
Por lo tanto este Trabajo Terminal se enfoca en la realización de un sistema capaz visualizar
mensajes con múltiples dispositivos móviles, el sistema es colaborativo ya que emplea la
participación entre dispositivos y personas, en tiempo real, para la correcta visualización de
mensajes.
Este sistema es utilizado en eventos como partidos de futbol, fiestas, conciertos o en eventos
que cuenten con un número razonable de dispositivos móviles.
Nuestros alcances fueron:
Construcción de un sistema que nos permitió visualizar imágenes en dispositivos
móviles.
La implementación de un sistema con beneficios tales como:
Anuncios publicitarios.
Entretenimiento.
Educación.
Este trabajo fue desarrollado con los conocimientos previos obtenidos durante el estudio de
la carrera en ingeniería en sistemas computacionales, en el área de sistemas, tales como:
Bases de datos I y II
Programación Orientada a objetos
Ingeniería de software I y II
Economía
Programación Visual
Sistemas Operativos I
Generación y Evaluación de Proyectos
Matemáticas Discretas
Programación Web
Graficación I y II
14
1.5. Estado del Arte
En este apartado se hace referencia a las aplicaciones existentes que se relacionan con el
trabajo descrito en este documento y sirve como punto de partida para tener una visión más
clara de la funcionalidad con la que este tipo de aplicaciones deben contar(Figura 3).
SISTEMAS CARACTERÍSTICAS PRECIO EN EL
MERCADO
TT 2011-0043 Sistema de
Visualización por medio de
un cubo de LED’s
Se proyectan imágenes desde un software
hacia la matriz de LED’s de 8*8*8
No implementado
Sistema multipantallas
Universidad de Tokio.
Se trata de una interfaz que es capaz de
controlar varias pantallas sin importar el
tamaño, enlazándolas entre sí con un
simple gesto de pellizco.
No Implementado
Figura 3: Trabajos Similares
1.6. Marco teórico
A continuación describimos algunos conceptos necesarios para entender el funcionamiento
del sistema y poder resolver el problema.
1.6.1. Proceso de visualización
Los componentes algorítmicos del DIMOMU(Figura 4) pueden descomponerse en:
Matriz de Dispositivos Móviles.
Procesamiento y sincronización.
Respuesta del Servidor.
Visualización de la secuencia en la matriz de los Dispositivos Móviles.
Figura 4: Diagrama a bloques del sistema DIMOMU
Matriz de
Dispositivos
Móviles.
Procesamiento y
sincronización
Respuesta
del Servidor.
Visualización
15
1.6.2. Matriz de Dispositivos
En esta etapa del sistema se limitara a una matriz de 5X5 dispositivos móviles, con el fin de
contar con una matriz de 25 dispositivos móviles, en la cual cada dispositivo móvil se
encargara de acceder a una URL específica dependiendo su ubicación en la matriz como se
muestra en la imagen (Figura 5).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 5: Matriz 5X5
16
1.6.3. Procesamiento y sincronización
Una vez que se cuentan con los 25 dispositivos móviles y cada uno se les asigno una posición
en la matriz, se realizara la petición al servidor el cual se encargara de recibir cada una de las
25 peticiones.
El servidor verifica en qué posición se encuentra dependiendo la URL asignada y lo ingresa
en la base de datos, así sucesivamente con las 24 peticiones restantes. Una vez ingresado los
25 dispositivos móviles, el servidor paralelamente se encontrara trabajando verificando a
cada instante que las 25 peticiones hayan sido almacenadas en la base de datos, con el fin de
poder cerciorarse que los 25 dispositivos móviles están listos para recibir la información que
se les mandara para poder visualizarla y estos estén sincronizados (Figura 6).
Figura 6: Petición y Sincronización de los Dispositivos Móviles
1.6.4. Respuesta del Servidor
Ya que se tienen los 25 dispositivos móviles en espera, lo que continúa es darle la secuencia
apropiada a cada uno de ellos, como el sistema será limitado a observar imágenes en blanco y
negro, las secuencias enviadas del servidor serán en código binario 1´s y 0´s, 1 para un fondo
blanco y 0 para un fondo negro, es decir que si para el primer dispositivo móvil
(www.dimomu.com/1 ) una vez accedido los 25 se le dará una secuencia de 1010
dependiendo el mensaje que se vaya a mostrar, esto es que en primer instancia prendera
blanco pasara un tiempo determinado y cambiara a negro, así sucesivamente hasta que
termine la cadena a mostrar(Figura 7).
Figura 7 Secuencia del dispositivo móvil
1 0 1 0
17
1.6.5. Visualización de la secuencia en la matriz de los Dispositivos Móviles
Una vez mandando las secuencias a mostrar, el dispositivo móvil se encargara de mostrar las
secuencias previamente almacenadas y procesadas por el servidor, para esto se usara jquery
del lado del cliente para poder mostrar las secuencias cómo se muestra a continuación.
Se mostrara la palabra ESCOM, empezaremos con la letra E (Figura 8).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 8: Letra E
18
Continuara la letra s (Figura 9).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 9: Letra S
19
La letra c (Figura 10).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 10: Letra C
20
Letra o (Figura 11).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 11: Letra O
21
Y al finalizar la letra m (Figura 12).
www.dimomu.com/1
www.dimomu.com/2
www.dimomu.com/3
www.dimomu.com/4
www.dimomu.com/5
www.dimomu.com/6
www.dimomu.com/7
www.dimomu.com/8
www.dimomu.com/9
www.dimomu.com/10
www.dimomu.com/11
www.dimomu.com/12
www.dimomu.com/13
www.dimomu.com/14
www.dimomu.com/15
www.dimomu.com/16
www.dimomu.com/17
www.dimomu.com/18
www.dimomu.com/19
www.dimomu.com/20
www.dimomu.com/21
www.dimomu.com/22
www.dimomu.com/23
www.dimomu.com/24
www.dimomu.com/25
Figura 12: Letra M
22
2. Capítulo: Análisis.
A Continuación se da una explicación de las herramientas a utilizar para este sistema.
2.1. Lenguaje de Programación
Se ha decidido utilizar .net debido a las siguientes características.
1.- Fácil de Usar. Es fácil el uso de la programación en punto net para los
desarrolladores debido a que tiene una documentación muy completa y soporte de
ayuda.
2.- Movilidad. Las aplicaciones pueden ser ejecutadas en diferentes tipos de
dispositivos.
3.- Basado en objetos. Ofrece un modelo de desarrollo basado en objetos que utilizan
un sistema común de datos y estos pueden ser reutilizados solo llamando al objeto a
donde lo necesites.
4.- Herencia de clases, las clases incluidas en el framework pueden ser utilizadas
independientemente del lenguaje que utilices, esto gracias al mecanismo de herencia
propio de la programación orientada a objetos.
2.2. Sistema Operativo
Basándonos en la idea de que el sistema ofrecerá flexibilidad en uso, se ha decidido utilizar
Windows 7, por ser la plataforma más utilizada.
2.3. Dispositivos Móviles
Para realizar Pruebas se utilizara un dispositivo móvil con al menos android, esto para tener
un gran comportamiento con la conexión a internet y se pueda procesar los datos con una
mejor disponibilidad, con el fin de que exista el menor retardo entre los dispositivos móviles
al desplegar los mensajes.
23
2.4. Base de Datos
Se decidió utilizar SQL Server 2008 por las siguientes características.
Las bases de datos de Microsoft ejecutan más bases de datos de misión crítica en
comparación con las bases de datos de Oracle.
Proporciona 99.9999% de disponibilidad del tiempo de actividad.
Mayor seguridad de una de las mejores plataformas de bases de datos [5].
2.5. Análisis de Requerimientos
El análisis de requerimientos para un sistema es la descripción de los servicios que este
proporciona así como sus restricciones operativas. Dichos requerimientos también reflejan
las necesidades del usuario final del sistema el cual le ayudará a resolver algún problema [6].
En este documento, la problemática a resolver ya ha sido planteada, por tanto se procede a
definir los requerimientos funcionales (servicios) y no funcionales (restricciones)
correspondientes al sistema, tomados a partir de las funciones generales que el sistema lleva a
cabo.
24
2.5.1. Requerimientos Funcionales
En la siguiente tabla se muestra el listado de los requerimientos funcionales del sistema, así
como una breve descripción para cada requerimiento (Figura 13).
ID Título Descripción
RF1 Proporciona una interfaz
gráfica.
Permitirá navegar de una
manera fácil y amigable con
el usuario.
RF2 Mostrar secuencia. Mostrara la secuencia
previamente realizada e
introducida.
RF3 Crear secuencia. Permitirá al usuario crear
una secuencia.
RF4 Guardar secuencia Permitirá guardar una
secuencia previamente
elaborada.
RF5 Sincronizar Dispositivos
Móviles.
Podrá sincronizar los
dispositivos móviles con la
menor latencia posible.
Figura 13: Tabla de Requerimientos Funcionales
25
2.5.2. Requerimientos no Funcionales
La siguiente tabla muestra el listado de los requerimientos no funcionales del sistema, así
como una breve descripción para cada requerimiento (Figura 14).
ID Titulo Descripción
RNF1 Multiplataforma. Debido a que es una
aplicación web cualquier
dispositivo móvil que
cuente con un navegador
podrá utilizarlo.
RNF2 Disponibilidad a la Base
de Datos.
La base de datos siempre
estará disponible en
cualquier momento que se
le solicite una consulta.
RNF3 Tiempo de consultas. Una consulta a la base de
datos no tardara más de 1
segundo para poder
realizarla
Figura 14: Tabla de Requerimientos No Funcionales
26
3. Capitulo: Diseño
3.1. Diagramas UML
A continuación se muestra una descripción de cada uno de los Diagramas.
3.1.1. Diagrama de Casos de Uso.
Modelan la funcionalidad del sistema según la perciben los usuarios externos (Actores),
expresando dicha funcionalidad como la interacción entre los actores y el sistema. A
continuación se procede a numerar los actores, los casos de uso e indicar que actor participa
en cada caso de uso [7].
Actores Relacionados con el Sistema
Usuario. Persona encargada del sistema, podrá acceder al sistema para poder accionar la
secuencia y así poder visualizarla en su dispositivo móvil.
3.1.2. Diagrama de Casos de Uso del Sistema
En este apartado se muestra como interactúa nuestro sistema.
Usuario: controla la interfaz gráfica de nuestro sistema, tiene acceso a visualizar la imagen en
conjunto a partir de las secuencias diseñadas para cada uno de los dispositivos móviles
(Figura 15).
Figura 15: Diagrama de Casos de Uso
27
3.1.2.1. Descripción de Casos de Uso
A continuación se muestra una descripción del Caso de Uso (Figura 16).
Referencia: CU1.- Acceder a la página web.
Autor: Erick Daniel Mendoza Martínez
Fecha: 10 – Marzo – 2014
Descripción: El usuario ingresa la url, según se describe en el siguiente caso
de uso:
Actores: Usuario.
Precondiciones: Tener un navegador en su dispositivo móvil.
Flujo Normal: 1) El caso de uso comienza, el usuario abre su navegador.
2) El usuario ingresa la url dependiendo el lugar que se le sea
asignado (FA1).
3) Se confirma el acceso al usuario dando instrucciones del
siguiente paso.
Flujo Alternativo: FA1.-No Cargo la pagina web.
1) El Usuario Confirmara de Nueve su url, esto con el fin de que
haya una equivocación al escribirla.
Pos condiciones: El Sistema al terminar de cargar, mostrara un botón para poder
iniciar la animación. Figura 16: Acceder a la página web
Referencia: CU2.- Visualizar Secuencia.
Autor: Erick Daniel Mendoza Martínez.
Fecha: 10 – Marzo – 2014
Descripción: El usuario Iniciara la secuencia, según se describe en el
siguiente caso de uso:
Actores: Usuario.
Precondiciones: El usuario debió haber Ingresado previamente a la url
correspondiente según sea su posición.
Flujo Normal: 1) El Sistema cargara la interfaz grafica la cual tendrá un botón
“Iniciar Secuencia”.
2) El Usuario deberá oprimir el botón para iniciar la secuencia
previamente definida.
3) El Sistema se encargara de ir a la base de datos y traer la
secuencia dependiendo la url.
4) El Sistema Mostrara Finalmente la secuencia o animación al
usuario.
Flujo Alternativo: NA
Pos condiciones: El Sistema al terminar de desplegar la animación volverá al
inicio para nuevamente iniciar la secuencia. Figura 17: Visualizar Secuencia
28
Referencia: CU3.- Reiniciar Secuencia
Autor: Erick Daniel Mendoza Martínez.
Fecha: 10 – Marzo – 2014.
Descripción: El usuario podrá reiniciar la secuencia o animación, según se
describe en el siguiente caso de uso:
Actores: Usuario.
Precondiciones: Haber iniciado por primera vez el sistema.
Flujo Normal: 1) El usuario podrá reiniciar la secuencia o animación
oprimiendo el botón “Iniciar Secuencia”.
Flujo Alternativo: NA.
Pos condiciones: NA. Figura 18: Reiniciar Secuencia
Referencia: CU4.- Mostrar Secuencia.
Autor: Erick Daniel Mendoza Martínez.
Fecha: 10 – Marzo – 2014
Descripción: El usuario podrá ver las secuencias de los 25 Dispositivos
móviles, según se describe en el siguiente caso de uso:
Actores: Usuario.
Precondiciones: El Usuario ingreso Correctamente la url.
Flujo Normal: 1) El usuario podrá visualizar las secuencias de los 25
dispositivos móviles.
2) El usuario podrá ver el lapso de tiempo que se le da a cada
una de las animaciones.
Flujo Alternativo: NA.
Pos condiciones: NA
Figura 19: Mostrar Secuencia
29
Referencia: CU5.- Modificar Secuencia.
Autor: Erick Daniel Mendoza Martínez.
Fecha: 10 – Marzo – 2014.
Descripción: El usuario podrá cambiar la secuencia, según se describe en el
siguiente caso de uso:
Actores: Usuario.
Precondiciones: El usuario debe ingresar la url para poder cambiar los datos de
la secuencia.
Flujo Normal: 1) El usuario podrá cambiar las secuencias o puede elegir las
opciones predeterminadas(FA1)
2) El usuario podrá visualizar las secuencias que está
realizando.
Flujo Alternativo: FA1.- Seleccionar las secuencias predeterminadas.
1) El usuario en un combobox podrá elegir la secuencia o
animación que estén pre-establecidas en el sistema.
Pos condiciones: El Usuario deberá dar click en el botón “Guardar Secuencia”
para que el sistema las almacene y pueda visualizarlas. Figura 20: Insertar Secuencia
Referencia: CU6.- Guarda Secuencia.
Autor: Erick Daniel Mendoza Martínez.
Fecha: 10 – Marzo – 2014
Descripción: El usuario guarda la secuencia, según se describe en el
siguiente caso de uso:
Actores: Usuario.
Precondiciones: Haber realizado una secuencia.
Flujo Normal: 1) El usuario selecciona la opción de “Guardar Secuencia”.
2) El sistema muestra en pantalla un diálogo que permite al
usuario dar el nombre de la secuencia con el que se almacenará
la información.
3) El Sistema se encarga de almacenar los datos en la base de
datos (FA1).
3) El sistema mostrara un dialogo el cual confirmara que se
almaceno correctamente su secuencia.
Flujo Alternativo: FA1.- La Secuencia no se pudo almacenar
1) El Sistema mostrara un dialogo con el cual mostrara que no
se pudo guardar la secuencia y el por qué.
Pos condiciones: NA Figura 21: Guardar Secuencia
30
3.1.3. Diagramas de Secuencia
En este apartado se describe brevemente la interacción de los diagramas de secuencia como
fluyen en el sistema.
3.1.3.1. Acceder a la página web.
En este diagrama se explica el ingreso a la página web (Figura 22).
Figura 22 Acceder a la Página Web
31
3.1.3.2. Visualizar Secuencia
En el siguiente diagrama se explica cómo visualiza las secuencias el usuario (Figura 23).
Figura 23 Visualizar Secuencia
32
3.1.3.3. Reiniciar Secuencia
En este diagrama se muestra como el usuario puede reiniciar una secuencia (Figura24).
Figura 24 Reiniciar Secuencia
33
3.1.3.4. Muestra Secuencia
En el siguiente diagrama se visualiza como el sistema muestras y sincroniza a los
dispositivos móviles (Figura 25).
Figura 25: Muestra Secuencia
34
3.1.4. Diagramas base de datos
A continuación se muestra el diagrama de bases de datos, en la cual se usaron dos tablas,
Pagina_Secuencia, en esta tabla se tienen dos campos el primer campo “pagina” aquí
almacenara las respectivas paginas que contenga el sistema, mientras que en el campo
“secuencia “se almacenara la secuencia que contenga cada una de estas páginas. En la tabla
Estado_Pagina, tiene dos campos, en el primero de ellos se tiene el “num_pag”, este campo
contendrá el número de página que corresponde a cada una, en el campo “estado” contendrá
el estado de la página “1” si ya esta accedida desde el dispositivo móvil y “0” si aun no
acceden a la url por página.
35
3.2. Arquitectura del sistema
A continuación se Muestra la arquitectura correspondiente al sistema DIMOMU.
3.2.1. Arquitectura 3 capas
La arquitectura de tres capas está conformada por las siguientes variantes que se enuncian a
continuación:
Capa de Presentación: Esta es la parte que el usuario ve, las pantallas que se le
muestran para qué interaccione con el programa (también se le conoce como “capa de
usuario”). Esta capa se comunica únicamente con la capa de negocio llevando y
trayendo los datos o registros necesarios, en pocas palabreas es la interfaz grafica del
programa, la cual debe ser lo más entendible posible para el usuario y así tener una
mejor comunicación con él.
Capa de negocio: es donde residen los programas que se ejecutan en el sistema, se
reciben las peticiones del usuario y se envían las respuestas tras el proceso. Se
denomina capa de negocio (e incluso de lógica del negocio) porque es aquí donde se
establecen todos los procesos que deben realizarse.
Capa de datos: es donde residen los datos y es la encargada de acceder a los mismos.
Está formada por uno o más gestores de bases de datos que realizan todo el
almacenamiento de datos, reciben solicitudes de almacenamiento o recuperación de
información desde la capa de negocio.
36
Las ventajas de esta Arquitectura son:
El desarrollo se puede llevar a cabo en varios niveles.
Desarrollos paralelos (en cada capa).
Aplicaciones más robustas debido al encapsulamiento.
En caso de que alguna capa tenga un cambio, sólo se atacará al nivel requerido sin
tener que revisar entre código mezclado.
Mantenimiento y soporte más sencillo (es más sencillo cambiar un componente que
modificar una aplicación monolítica).
Mayor flexibilidad (se pueden añadir nuevos módulos para dotar al sistema de nueva
funcionalidad).
Tomando en cuenta los requerimientos de nuestro sistema y las características que tiene el
modelo de arquitectura de tres capas, usaremos este modelo para el desarrollo del sistema,
puesto que esta arquitectura se enfoca a servicios web y ofrece las necesidades estructurales
para nuestro DIMOMU (Figura 26).
37
Figura 26: Arquitectura del Sistema
38
3.2.2. Patrón de diseño Modelo Vista Controlador (MVC)
El patrón de diseño Modelo Vista Controlador (MVC), es un patrón de diseño que fue
inicialmente utilizado para construir interfaces.
MVC consiste de tres tipos de objetos.
El Modelo, que son los objetos de la aplicación, también conocida como lógica de
negocio, o lógica de aplicación.
La Vista, que especifica la visualización de los datos, algunas veces conocida como
lógica de presentación.
El controlador, es el coordinador entre la vista y el modelo, es decir, define la forma
en que la interfaz de usuario reacciona ante la entrada de usuario.
MVC desacopla el concepto de interfaz de usuario y lógica de negocio para aumentar la
flexibilidad y modularidad del software, posiblemente permitiendo que el código pueda ser
reutilizado.
Finalmente, la idea es lograr separar responsabilidades entre las personas que trabajan para
un proyecto de desarrollo de software; es decir, descomponer el problema en módulos
funcionales, (entre ellos el diseño gráfico), lo que se traduce, en enfocar de una forma
reduccionista la solución de un proyecto software.
El flujo de control, en este patrón de diseño, generalmente es el siguiente:
El usuario interactúa con la interfaz de alguna manera (ej. presionando un botón, un
enlace).
El controlador recibe (por parte de los objetos de la interfaz vista) la notificación de la
acción solicitada por el usuario.
El controlador accede al modelo, posiblemente actualizando los datos enviados por el
usuario.
El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de
usuario.
La vista usa el modelo para generar la interfaz apropiada para el usuario donde se
refleja los cambios en el modelo.
En algunas implementaciones la vista no tiene acceso directo al modelo, dejando que
el controlador envíe los datos del modelo a la vista.
39
La interfaz espera por nuevas interacciones de usuario para iniciar nuevamente el
ciclo (Figura 27).
Figura 27: MVC
40
3.3. Estimación de Costo
Mensual Por 10 Meses Dos Ingenieros
Salario por Ingeniero $8,000 $80,000 $160,000 Equipo de cómputo $12,000 $12,000 $24,000 Depreciación (10%) -1,200
10800 -2,400 21600
Memoria USB 4G $150 $300 $300 Luz $120 $1,200 $1,200 Internet $350 $3,500 $3,500 Aplicaciones y Software
Windows 7 $3,400 $3,400 SQLServer 2008 express
$0 $0
FrameWork 4.0 $0 $0 MonoDevelop $0 $0 Total $99,200 $190,000
Figura 28: Estimación de Costos
41
3.4. Wi-Fi
Cuando hablamos de WIFI nos referimos a una de las tecnologías de comunicación
inalámbrica mediante ondas más utilizada hoy en día. WIFI, también llamada WLAN
(wireless lan, red inalámbrica) o estándar IEEE 802.11. WIFI no es una abreviatura
deWireless Fidelity, simplemente es un nombre comercial.
En la actualidad podemos encontrarnos con dos tipos de comunicación WIFI:
802.11b, que emite a 11 Mb/seg, y
802.11g, más rápida, a 54 MB/seg
De hecho, son su velocidad y alcance (unos 100-150 metros en hardaware asequible) lo
convierten en una fórmula perfecta para el acceso a internet sin cables.
Para tener una red inalámbrica en casa sólo necesitaremos un punto de acceso, que se
conectaría al módem, y un dispositivo WIFI que se conectaría en nuestro aparato. Existen
terminales WIFI que se conectan al PC por USB, pero son las tarjetas PCI (que se insertan
directamente en la placa base) las recomendables, nos permite ahorrar espacio físico de
trabajo y mayor rapidez. Para portátiles podemos encontrar tarjetas PCMI externas, aunque
muchos de los aparatos ya se venden con tarjeta integrada.
42
4. Capítulo: Desarrollo e implementación del sistema
A continuación se describirá a detalle el proceso seguido para el desarrollo del sistema
DIMOMU.
4.1. Página de inicio
Se muestra la página de inicio la cual cuenta con 4 pestañas, la primera muestra la
bienvenida al sistema como se muestra a continuación (Figura 28).
Figura 29: Inicio
43
4.2. Acerca de DIMOMU
La segunda pestaña acerca de DIMOMU Muestra una descripción del trabajo terminal, tanto
directores como los desarrolladores del Sistema (Figura 29).
Figura 30: Acerca de Dimomu
4.3. Crear Secuencia
La Cuarta pestaña hace referencia a la página donde se diseña las secuencias para los móviles
como se muestra a continuación (Figura 30).
Figura 31: Crear Secuencia
44
4.4. Servicio
Debido a la magnitud del sistema el servicio es la parte fundamental, ya que este se encarga
de iniciar el sistema además de encargarse de la sincronización de las mismas, debido a que
en todo momento hace consultar a la base de datos para obtener las secuencias y mandarlas a
la página correspondiente.
Es un aspx se programo de una forma asíncrona para poder utilizar hilos y gestionar mejor las
consultas a la base de datos a continuación el código.
4.4.1. ThreadStart
Se crea una instancia de la clase ThreadStart con el fin que se cree un subproceso
administrado, el método que se ejecuta en el subproceso queda representado por un delegado
ThreadStart o ParameterizedThreadStart que se haya pasado al constructor Thread. Pero el
subproceso no comenzará a ejecutarse hasta que se llame al método Thread.Start. La
ejecución comenzará en la primera línea del método representado por el delegado
ThreadStart o ParameterizedThreadStart.
45
4.4.2. Thread
Se crea una instancia debido a la problemática del sistema se decidió utilizar un hilo el cual
pueda administrar los 25 procesos paralelamente, con esto se evita el problema que cuando
cargan las paginas y estén recibiendo la información no salga el error de tiempo de espera.
4.4.3. GetSecuencia
Este método es el que se encarga de establecer la conexión a la base de datos para que el
servicio este funcionando continuamente, a continuación la clase ClassConexion de nuestro
sistema.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; using System.Text; using System.Threading; ///<summary> /// Summary description for ClassConexion ///</summary> publicclassClassConexion { privateSqlConnection cn; public ClassConexion() { string strConnexion = "Data Source=.\\SQLEXPRESS;AttachDbFilename=C:\\Users\\Chas7p\\Documents\\Visual Studio 2010\\WebSites\\TrabajoTerminal\\App_Data\\ASPNETDB.MDF;Integrated Security=True;User Instance=True"; cn = newSqlConnection(strConnexion); } publicvoid open() { cn.Open(); } publicvoid close() { cn.Close(); } publicstring Secuencia(int pag) { string sec = ""; SqlDataReader myReader = null; string strQuery = "SELECT Secuencia FROM Pagina_Secuencia WHERE (pagina = " + pag + ")";
46
try { SqlCommand cmd = newSqlCommand(strQuery, cn); myReader = cmd.ExecuteReader(); while (myReader.Read()) { sec = myReader["secuencia"].ToString(); } myReader.Close(); } catch (Exception ex) { sec = ex.ToString(); cn.Close(); } finally { } return sec; } string strcad; publicvoid secuenciaFinal() { string[] sec = newstring[25]; SqlDataReader myReader = null; string strQuery = "SELECT Secuencia FROM Pagina_Secuencia"; try { SqlCommand cmd = newSqlCommand(strQuery, cn); myReader = cmd.ExecuteReader(); int i = 0; while (myReader.Read()) { sec[i] = myReader["secuencia"].ToString(); i++; } myReader.Close(); string[] sec2 = newstring[25]; int indexer = 0; for (; ; ) { Thread.Sleep(35000); //indexer = 0; sec2[0] = ""; sec2[1] = ""; sec2[2] = "";
47
sec2[3] = ""; sec2[4] = ""; sec2[5] = ""; sec2[6] = ""; sec2[7] = ""; sec2[8] = ""; sec2[9] = ""; sec2[10] = ""; sec2[11] = ""; sec2[12] = ""; sec2[13] = ""; sec2[14] = ""; sec2[15] = ""; sec2[16] = ""; sec2[17] = ""; sec2[18] = ""; sec2[19] = ""; sec2[20] = ""; sec2[21] = ""; sec2[22] = ""; sec2[23] = ""; sec2[24] = ""; for (i = 0; i < 25; i++) { sec2[i] += sec[i].Substring(indexer, 1); strcad = ConvertStringArrayToString(sec2); } string strquery2 = "UPDATE Secuencia SET Secuencia=@Estado"; SqlCommand cmd2 = newSqlCommand(strquery2, cn); cmd2.Parameters.AddWithValue("@Estado", strcad); int rows = cmd2.ExecuteNonQuery(); if (indexer == 4) { indexer = 0; } else { indexer++; } } } catch (Exception ex) { //sec = ex.ToString(); cn.Close(); } } staticstring ConvertStringArrayToString(string[] sec2) { // // Concatenate all the elements into a StringBuilder. // StringBuilder builder = newStringBuilder(); foreach (string value in sec2)
48
{ builder.Append(value); } return builder.ToString(); } publicstring prueba() { string sec = ""; SqlDataReader myReader = null; string strQuery = "SELECT Secuencia FROM Secuencia"; try { SqlCommand cmd = newSqlCommand(strQuery, cn); myReader = cmd.ExecuteReader(); while (myReader.Read()) { sec = myReader["Secuencia"].ToString(); } myReader.Close(); } catch (Exception ex) { sec = ex.ToString(); cn.Close(); } finally { } return sec; } }
49
4.5. Creando una Secuencia
A continuación se muestra el diseño de cada una de las secuencias que mostraran los
dispositivos móviles.
4.5.1. Interfaz grafica
Se muestra la interfaz grafica donde el usuario diseña las secuencias, en este proyecto se
limita a 25 dispositivos móviles, lo cual se representan por un select de html con dos
opciones blanco y negro a continuación el aspx de la página.
<%@PageTitle=""Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeFile="CrearSecuencia.aspx.cs"Inherits="CrearSecuencia"%> <asp:ContentID="Content1"ContentPlaceHolderID="HeadContent"Runat="Server"> <styletype="text/css"> .style1 { height: 21px; } #Select1 { width: 200px; } #Select2 { width: 200px; } #Select3 { width: 200px; } </style> </asp:Content> <asp:ContentID="Content2"ContentPlaceHolderID="MainContent"Runat="Server"> <tablestyle="width:100%;"> <tr> <thclass="style1"> Columna1</th> <thclass="style1"> Columna2</th> <thclass="style1"> Columna3</th> <thclass="style1"> Columna4</th> <thclass="style1"> Columna5</th> </tr> <tr> <td> <selectid="Select1"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
50
<optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select></td> <td> <selectid="Select2"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select3"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select4"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select5"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> </tr> <tr> <td> <selectid="Select6"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select7"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select8"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select9"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option>
51
<optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select10"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> </tr> <tr> <td> <selectid="Select11"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select12"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select13"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select14"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select15"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> </tr> <tr> <td> <selectid="Select16"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td>
52
<selectid="Select17"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select18"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select19"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select20"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> </tr> <tr> <td> <selectid="Select21"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select22"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select23"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td> <selectid="Select24"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> <td>
53
<selectid="Select25"name="D1"style="width:150px"onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> <optionvalue="1"style="background: #ffffff;">blanco</option> <optionvalue="0"style="background: #000000;">negro</option> </select> </td> </tr> </table> <center><asp:ButtonID="Button1"runat="server"Text="Guardar"/></center> </asp:Content>
Blanco para cuando el dispositivo este encendido y negro para cuando este apagado como se
muestra a continuación (Figura 31).
Figura 32: Interfaz Grafica para crear una secuencia
54
4.5.2. Creación de la Palabra ESCOM
En esta parte se muestra como se diseño la palabra ESCOM en la interfaz grafica.
4.5.2.1. Letra E
Para formar la letra E en nuestra matriz de 5*5, simulando cada select como si fuera un
dispositivo móvil y dar un panorama de cómo se visualizaría en ellos, este fue el resultado en
nuestra letra E (Figura 32).
Figura 33: Creación de la letra E
55
4.5.2.2. Letra S
A continuación se muestra la letra S en nuestra interfaz grafica (Figura 33).
Figura 34: Creación de la letra s
4.5.2.3. Letra C
A continuación se muestra la letra C en nuestra interfaz grafica (Figura34).
Figura 35: Creación de la letra c
56
4.5.2.4. Letra O
A continuación se muestra la letra O en nuestra interfaz grafica (Figura 35).
Figura 36: Creación de la letra O
4.5.2.5. Letra M
A Continuación se muestra la letra m en nuestra interfaz grafica (Figura 36).
Figura 37: Creación de la letra M
57
4.5.3. Sincronización de los dispositivos móviles
Esta parte es la fundamental de nuestro sistema la sincronización de los dispositivos móviles,
como ya se menciono el servidor es el que tiene toda la carga de nuestro sistema debido a que
siempre está funcionando y en un lapso de 35 segundos cambia la secuencia, este tiempo fue
el más óptimo en nuestras pruebas para que los 25 dispositivos móviles se conectara y se
alcanzara a apreciar el cambio de secuencia en su forma total.
El cliente en este caso el dispositivo móvil ingresa a la url ejemplo:
http://localhost:6655/TrabajoTerminal/1.aspx,
http://localhost:6655/TrabajoTerminal/2.aspx, así sucesivamente hasta que ingresan los 25
dispositivos móviles, con el fin de poder sincronizarlo se utilizo en la cabecera de cada aspx
una etiqueta que refresca la pagina cada 2 segundos con el fin de conectarse al servicio y
obtener la cadena que le corresponde.
<headrunat="server"> <title></title> <metahttp-equiv="refresh"content="2,url=1.aspx"/> </head>
A continuación el código del lado del servidor que obtiene la cadena y cambia al color
correspondiente cada dispositivo móvil.
protectedvoid Page_Load(object sender, EventArgs e) { string cad, cad2; ClassConexion ccn = newClassConexion(); ccn.open(); cad = ccn.prueba(); cad2 = cad.Substring(0, 1); if (cad2 == "0") { pageBody.Attributes.Add("bgcolor", "black"); } if (cad2 == "1") { pageBody.Attributes.Add("bgcolor", "white"); } ccn.close(); }
58
5. Capitulo: Pruebas y Resultados Al final del desarrollo del Sistema de visualización en dispositivos móviles para multitudes
(DiMoMu) se obtuvieron los siguientes resultados al simularlo en una pc de escritorio con 25
ventanas simulando cada una de ellas como si fuera el dispositivo móvil los resultados fueron los
siguientes.
5.1. Resultado de la letra E
A continuación se muestra la simulación de la letra E (Figura 37).
Figura 38: Simulación letra E
59
5.2. Resultado de la letra S
A Continuación se muestra la simulación de la letra S (Figura 38).
Figura 39: Simulación de la letra S
60
5.3. Resultado de la letra C
A continuación se muestra la simulación de la letra C (Figura 39).
Figura 40: Simulación de la letra C
61
5.4. Resultado de la letra O
A continuación se muestra la simulación de la letra O (Figura 40).
Figura 41: Simulación de la letra O
62
5.5. Resultado de la letra M
A continuación se muestra la simulación de la letra M (Figura 41).
Figura 42: Simulación de la letra M.
63
5.6. Palabra ESCOM
A continuación se muestra la palabra completa con cada una de sus letras (Figura 42).
Figura 43: Palabra ESCOM
64
6. Capítulo: Conclusiones
El hecho de contar con un Sistema de visualización en dispositivos móviles para multitudes,
sirve como un parte aguas para la integración de varios dispositivos móviles con tal de ser
usado por un gran número de personas y al mismo tiempo.
Se Implemento satisfactoriamente el sistema de visualización de dispositivos
móviles, trabajando colaborativamente entre ellos.
Se logro coordinar y sincronizar los dispositivos móviles con la menor latencia
posible para poder visualizar cada secuencia propuesta.
Se logro implementar la interfaz grafica que crea las secuencias a mostrar en los
dispositivos móviles, siendo lo más fácil de usar y amigable con el usuario.
Se Logro implementar tanto los sistemas como hardware y software, con la limitación
de 25 dispositivos móviles.
65
7. Capítulo: Trabajo a futuro
Como trabajo a futuro se pretende que:
El Sistema de visualización en dispositivos móviles para multitudes sea integrado en
algún evento masivo.
Ampliar la matriz de dispositivos móviles para obtener una mejor resolución.
Mejorar la interfaz grafica capaz de poder diseñar mejores secuencias, con algunas
texturas y ampliar la gama de color.
Migrar la aplicación a código nativo de ios y android.
66
8. Referencias
[1] César San Juan Pastor, Programación multimedia y dispositivos móviles, Ibergarceta
Publicaciones S.L.; Edición: 1
[2] Sistema VideoWall[online]. España, 2014, Disponible en:
http://www.rpg.es/sistemas-videowall-multipantalla-tft.php
[3] Sistema Multipantalla controlada mediante pellizcos[online].Tokio, 2012 Disponible en :
http://es.engadget.com/2012/11/02/interfaz-multipantalla-universidad-tokio/
[4] María José López, Libro Blanco de las aplicaciones móviles, Consejería de Economía y
Hacienda de la Comunidad de Madrid.
[5]Microsoft SQL server 2008[online]. España, 2014 Disponible
en:http://www.microsoft.com/es-es/sqlserver/product-info/why-sql-server.aspx
[6] J. Rumbaugh, I. Jacobson, G. Booch, El lenguaje Unificado de Modelado. Manual de
Referencia, Madrid: Pearson Educación, (2000), p: 24.
[7] Ian Sommerville, Ingeniería del Software, (7ma Edición), Madrid: Pearson Educación,
(2005), p: 108.
