alarmapp sistema de seguridad para la ciudad de cali
TRANSCRIPT
i
ALARMAPP SISTEMA DE SEGURIDAD PARA LA CIUDAD DE CALI
Sánchez Barbosa, Oscar David. david95sb hotmail.com
Ríos Aristizábal, Carlos Andrés. carlos7@ @hotmail.com
Trabajo de grado para optar por el título de Ingeniero Multimedia.
Asesor: Pablo Aníbal Bejarano de la Hoz, Ing. Multimedia.
Especialista en Procesos de Desarrollo de Software
Universidad de San Buenaventura Colombia
Facultad de ingeniería
Ingeniería multimedia
Santiago de Cali
2017
ii
Agradecimientos
Para iniciar doy gracias a Dios por ayudarme a ver y aprovechar todas las oportunidades
presentadas a lo largo de mi carrera, permitiéndome llegar hasta esta gran etapa de mi vida.
Agradezco a mis padres por ser ese gran ejemplo y motivación de seguir siempre adelante para
alcanzar mis metas, por el gran esfuerzo y sacrificio que han realizado para concederme
terminar una carrera profesional. A mi abuela por darme esa confianza y alegría siendo una
parte esencial en los inicios de mi carrera. A mi familia por darme siempre su apoyo y estar
pendientes de todo mi proceso y evolución como persona y profesional. A Valentina Londoño
Silva por ser esa gran compañía y siempre tener esa gran disposición de ayuda, soportarme en
los malos ratos, dándome ánimo y brindándome su amor. A mi tutor, el Ingeniero Multimedia
Pablo Aníbal Bejarano De la Hoz, por su gran labor como docente, compañero y tutor, por
brindar su conocimiento y experiencia para llevar a cabo este proyecto, por su paciencia en el
desarrollo del proyecto y por sacar parte de su tiempo personal para la realización de las pruebas
en su barrio.
Igualmente agradezco a todas las personas que estuvieron presentes y de alguna u otra forma
pendientes de la realización del proyecto, ayudando a que todo se diera de la mejor forma. Al
CIAT, por brindarme el tiempo necesario para el desarrollo de mi tesis y las reuniones con mi
compañero de tesis y mi tutor.
Por último, agradecerle a mi compañero Oscar David Sánchez Barbosa, por estar siempre de
manera positiva y responsable en el transcurso del proyecto, por su paciencia y gran esfuerzo,
por ser como un hermano en lo largo de la carrera, a su familia por el gran apoyo brindado. Le
deseo mucha suerte y éxitos en todos los peldaños que quedan por escalar en su vida.
Carlos Andrés Rios Aristizábal.
iii
Primeramente le agradezco a Dios por permitirme realizar mi proceso de formación
profesional, a mis padres los cuales han hecho un esfuerzo inmensamente grande apoyándome
en todos los aspectos para llevar a cabo este gran logro y etapa de mi vida, gracias a la
Universidad de San Buenaventura por creer en mis facultades y poner a disposición todos sus
recursos para la realización de este proyecto, gracias a todos los profesores que pasaron por mi
carrera universitaria ya que cada uno impuso un aporte para formarme como persona y como
profesional, especialmente a mi tutor de tesis, el profesor Pablo Anibal Bejarano De la Hoz,
quien confió en mis aptitudes para la realización de este proyecto, además de disponer de su
tiempo, esfuerzo y dedicación ya que fueron cruciales para la culminación de este proyecto,
quien con sus conocimientos, experiencia y motivación fueron los pilares para este proyecto.
Gracias a la empresa Imaginamos, ya que me brindó su apoyo con el tiempo suficiente para
poder hacer efectivas las reuniones con mi compañero y tutor, gracias por entender mi situación
y apoyarme con su flexibilidad para poder realizar este proyecto.
Por último y no menos importante, quiero darle gracias a mi compañero Carlos Andrés Rios
Aristizabal, porque en el transcurso del tiempo ha sido una persona con mucha paciencia,
apoyándome cuando no podía estar al pendiente y sobrellevar este proyecto, apoyándome y
dándome ánimos para culminarlo. Le deseo muchos éxitos en su nueva etapa de la vida y en
las próximas que siguen.
Oscar David Sánchez Barbosa
iv
Tabla de contenido
Introducción ............................................................................................................................... 2
1.1 Objetivos ..................................................................................................................... 5
1.1.1 Objetivo general .................................................................................................. 5
1.1.2 Objetivos específicos .......................................................................................... 5
1.2 Planteamiento del problema ........................................................................................ 6
1.3 Justificación ............................................................................................................... 10
Marco teórico ........................................................................................................................... 12
2.1 Desarrollo Web ......................................................................................................... 12
2.1.1 Desarrollo Frontend ........................................................................................... 12
2.1.2 Desarrollo Backend ........................................................................................... 14
2.1.3 Patrones Arquitectónicos ................................................................................... 15
2.2 Servicios Web. .......................................................................................................... 18
2.2.1 Definición ......................................................................................................... 18
2.3 Desarrollo de aplicaciones móviles ........................................................................... 20
2.3.1 Aplicaciones Nativas ........................................................................................ 20
2.3.2 Aplicaciones Web ............................................................................................. 22
2.3.3 Desarrollo multiplataforma ............................................................................... 23
2.4 Diseño de interfaces .................................................................................................. 25
2.4.1 Diseño web........................................................................................................ 25
2.4.2 Diseño para aplicaciones móviles ..................................................................... 28
2.4.3 Filosofías de diseño........................................................................................... 31
2.5 Visualización de datos ............................................................................................... 33
2.5.1 ChartJS .............................................................................................................. 34
2.5.2 Google Charts ................................................................................................... 34
2.5.3 Google Maps ..................................................................................................... 34
2.6 Componentes de Hardware ....................................................................................... 35
2.6.1 Arduino ............................................................................................................. 35
v
2.6.2 Raspberry Pi ...................................................................................................... 36
2.6.3 Raspbian ............................................................................................................ 36
2.7 Experiencia de Usuario (UX) .................................................................................... 36
2.8 Usabilidad.................................................................................................................. 39
Antecedentes ............................................................................................................................ 41
3.1 Cuadrantes. ............................................................................................................... 41
3.2 PF Móvil. .................................................................................................................. 42
3.3 Alerta Motorola ........................................................................................................ 43
3.4 Ecu 911. .................................................................................................................... 44
3.5 Alarmas comunitarias en Cali .................................................................................. 45
Desarrollo ................................................................................................................................. 52
4.1 Metodología ............................................................................................................. 52
4.1.1 Recolección de información ............................................................................. 52
4.1.2 Identificación de los tipos de emergencias ....................................................... 52
4.1.3 Análisis de la comunicación con los entes gubernamentales ............................ 53
4.1.4 Investigación en diseño y desarrollo ................................................................. 54
4.1.5 Maquetación y diseño ....................................................................................... 55
4.1.6 Etapa desarrollo para móvil .............................................................................. 55
4.1.7 Etapa desarrollo plataforma web ...................................................................... 56
4.2 Desarrollo de la solución .......................................................................................... 57
4.2.1 Diseño ............................................................................................................... 57
4.2.2 Levantamiento de requisitos ............................................................................. 58
4.2.3 Diseño de software ............................................................................................ 59
4.2.4 Arquitectura ...................................................................................................... 60
4.2.5 Desarrollo multiplataforma con Ionic Framework ........................................... 62
4.2.6 Desarrollo web .................................................................................................. 66
4.2.7 Integración de tecnologías ................................................................................ 75
4.2.8 Costos estimados ............................................................................................... 79
Perspectiva del proyecto desde la ingeniería multimedia ........................................................ 80
Pruebas y análisis de resultados ............................................................................................... 81
Conclusiones y trabajo futuro .................................................................................................. 87
7.1 Conclusiones ............................................................................................................ 87
7.2 Trabajo a futuro ........................................................................................................ 90
vi
Referencias ............................................................................................................................... 91
Anexos ................................................................................................................................... 100
vii
Lista de figuras
○ Figura 1. Número de hurtos a personas por cada 100 mil habitantes en Cali
(2010-2015)
○ Figura 2. Número de hurtos a residencias por cada 100 mil habitantes en Cali
(2010-2015)
○ Figura 3. Número de hurtos a celulares por cada 100 mil habitantes en Cali
(2010-2015)
○ Figura 4. Número de hurtos a vehículos y motocicletas por cada 100 mil
habitantes en Cali (2010-2015)
○ Figura 5. Módulo de recepción de alarma comunitaria.
○ Figura 6. Estructura del proceso Modelo, Vista, Controlador.
○ Figura 7. Diseño responsivo (responsive design).
○ Figura 8. Cuadros de diálogo para el diseño de aplicaciones móviles.
○ Figura 9. Notificaciones dentro de la app para el diseño de aplicaciones móviles.
○ Figura 10. Ejemplo de material design.
○ Figura 11. Elementos de la experiencia de usuario.
○ Figura 12. Aplicación móvil Cuadrantes
○ Figura 13. Aplicación móvil PF Móvil.
○ Figura 14. Aplicación móvil Alerta Motorola.
○ Figura 15. Aplicación móvil Ecu 911.
○ Figura 16, diagrama de pastel - resultados de pregunta “¿Desde su hogar puede
escuchar la alarma comunitaria?”.
○ Figura 17, diagrama de pastel - resultados de pregunta “¿Conoce el motivo por
el cual se enciende la alarma comunitaria?”.
viii
○ Figura 18, diagrama de pastel - resultados de pregunta “¿Sabe qué medidas
tomar en caso de una emergencia (Robo, incendio, entre otros)?”.
○ Figura 19, Mockups desarrollados en Balsamiq.
○ Figura 20, Maquetación de vista desde la interfaz de Ionic Creator.
○ Figura 21, Organización por componentes con Ionic Framework.
○ Figura 22, Plataforma web de estadísticas.
o Figura 23, diagrama de barras y diagrama anillo o dona, número de veces
activadas cada tipo de alarma.
o Figura 24, Estructura de datos para la librería “chart.js”.
o Figura 25, Grafica de números de usuarios administradores y comunes, usando
la librería “jquery.knob”.
o Figura 26, Maquetación HTML para funcionamiento de la librería
“jquery.knob”.
o Figura 27, Grafica representando la entidad más requerida y el número de veces
que se solicitó.
o Figura 28, Grafica mostrando la comunidad con el mayor número de usuarios
inscritos.
o Figura 29, Grafica representando la comunidad con mayor número de
emergencias activadas.
o Figura 30, Grafica representando la entidad más requerida por los usuarios a
nivel de ciudad.
o Figura 31, Grafica de anillo (o dona) representando en porcentaje el género de
los usuarios de alarmapp.
o Figura 32, Estructura de datos para generar diagrama de barras mediante la
librería “chart.js”.
ix
o Figura 33, Diagrama de barras de tipos de emergencias y número de veces de
activación.
o Figura 34, Onepage de Alarmapp.
o Figura 35, Raspberry pi.
o Figura 36, Arduino uno.
o Figura 37, Relé 5V.
o Figura 38, Sirena de 110V.
o Figura 39, Estructura de funcionamiento del sistema.
o Figura 40, Respuesta pregunta 1. ¿Los botones de acceso e iconos lo redirigen al lugar
que esperaba?
o Figura 41, Respuesta pregunta 2. ¿La navegación de la aplicación es sencilla en
intuitiva?
o Figura 42, Respuesta pregunta 3. ¿Fue fácil identificar el momento y el motivo de la
activación de una nueva emergencia?
o Figura 43, Respuesta pregunta 4. ¿Considera que la información presentada de la
emergencia es de utilidad en el momento?
o Figura 44, Respuesta pregunta 5. ¿La forma en la que se presentan los contenidos es
clara y concisa?
o Figura 45, Respuesta pregunta 6. ¿Considera que la implementación de esta aplicación
mejoraría la seguridad en la comunidad que reside?
o Figura 46, Respuesta pregunta 7. ¿Cómo clasificaría el rendimiento de la aplicación en
cuanto a velocidad?
o Figura 47, Respuesta pregunta 8. ¿Con que frecuencia se bloquea el funcionamiento de
la aplicación?
o Figura 48, Respuesta pregunta 9. ¿Está usted satisfecho con el rendimiento de la
aplicación?
o Figura 49, Respuesta pregunta 10. ¿Recomendaría esta aplicación a sus conocidos?
x
Lista de tablas
○ Tabla 1, Características principales de servicios web basado en REST y SOAP.
○ Tabla 2, Alarmas y frentes de seguridad en los distintos barrios de Santiago de
Cali
1
Resumen
Es común que en nuestros barrios se instalan Alarmas Comunitarias, estas al ser activadas
advierten sobre un posible robo o incidente de seguridad en nuestro sector, pero
lamentablemente al escuchar la alarma, quienes residen en el sector, no toman en serio o
desconocen la causa que origina la alarma, lo cual genera incertidumbre y pánico en los
habitantes.
Nuestra propuesta está encaminada a desarrollar un sistema de seguridad de alarmas
comunitarias, el cual pueda controlar por medio de una aplicación móvil ciertos elementos
hardware para la activación de la alarma, y así mismo, informar el motivo de su activación,
permitiéndole visualizar estadísticas y un historial de seguridad en la ciudad de Cali a través
de un portal administrativo.
Palabras Clave: Alarmas Comunitarias, sistema seguridad, robo, aplicación móvil
2
Capítulo 1
Introducción
Los avances tecnológicos cada vez son más frecuentes y su periodo de vigencia decrece
proporcionalmente a la velocidad de avance, esta evolución se puede denotar en el celular, por
ejemplo, el primer teléfono celular de la historia apareció en el año de 1983 y era incluso más
pesado que un teléfono inalámbrico moderno, a partir de ese teléfono móvil se han creado gran
variedad de celulares hasta llegar a los que hoy existen, donde su peso es mucho menor, son
más estéticos y no solo sirven para realizar llamadas o mandar mensajes, ahora ya existe la
posibilidad de chatear, almacenar imágenes, música, videos, enviar y recibir correos, escuchar
radio e incluso ver la televisión, entre otras funciones [1].
El smartphone se ha convertido en el dispositivo de conexión a Internet más usado actualmente,
donde 9 de cada 10 consumidores prefieren este dispositivo, ya que ofrece mayor
disponibilidad en cuanto a tiempo y ubicación [2]. Según lo revela un estudio reciente de
eMarketer [3], el número de usuarios será de 2.16 mil millones de usuarios en el 2016. Por otro
lado, de acuerdo con el reciente informe presentado por Cisco, uno de los principales
fabricantes de equipos de redes, se proyecta que durante los próximos cinco años existirán
alrededor de 5.500 millones de usuarios de móviles, lo que representa el 70 por ciento de la
población mundial. De hecho, será tal la proliferación de los smartphones que será mayor el
número de personas que tendrán móviles (5.400 millones) que las que tendrán electricidad
(5.300 millones), agua potable (3.500 millones) y automóviles (2.800 millones) en el 2020 [4].
3
Aspectos como la seguridad, comunicación, información, han evolucionado gracias al
desarrollo tecnológico que se puede integrar en una sola aplicación móvil, pero más allá de eso
están los usos que se le pueden dar, en este documento no se pretende hablar sobre las
tecnologías más utilizadas para desarrollar, sino que se va a hablar sobre una iniciativa que
surge a través de la problemática que afronta la ciudad de Cali en cuanto a la seguridad, por
ello se han detectado varios problemas que junto a estadísticas reportadas de los últimos años,
han evidenciado una necesidad la cual se desea suplir con ayuda de la tecnología.
Desde ya hace varios años se ha evidenciado una iniciativa la cual hace referencia a las alarmas
comunitarias, donde los mismos ciudadanos se unen e implementan un sistema el cual cada
uno pueda alertar a su red de vecinos del peligro que existe en su comunidad, pero a medida
que la tecnología avanza, las necesidades van a la par de esta, donde uno de sus objetivos es
facilitar y automatizar procesos para que estos sean mucho más efectivos, es por ello que
aunque esta iniciativa cumpla con su objetivo, existe la posibilidad de mejorarla para el bien
de la comunidad y porvenir de los ciudadanos, donde ellos mismos puedan informar y alertar
sobre lo que sucede en su comunidad o sector de residencia manipulando subprocesos que se
realicen al mismo tiempo, es decir, que el ciudadano pondrá al tanto a su red vecinal como a
las entidades gubernamentales que se vean involucradas al mismo tiempo, disminuyendo el
riesgo y el tiempo de reacción de los mismos. Además, estos reportes generarán datos de gran
importancia para el análisis de estadísticas buscando el mejoramiento de la seguridad urbana y
lo más importante, manteniendo la comunidad informada, ya que las diversas aplicaciones de
seguridad existentes hoy en día, se han enfocado en crear vínculo directo entre el ciudadano y
autoridad de una manera privada, pero ¿Dónde queda la comunicación con la comunidad?
4
Alrededor del mundo, la tecnología ha avanzado de una manera exuberante y tal parece que no
tiene límites, las grandes potencias mundiales han realizado avances muy importantes pero
Colombia no se ha quedado atrás, es por eso que se ha creado una entidad que se encarga de
diseñar, adoptar y promover las políticas, planes, programas y proyectos del sector de las
Tecnologías de la Información y las Comunicaciones, Min TIC (Ministerio de Tecnologías de
la Información y las Comunicaciones), dentro de sus funciones está incrementar y facilitar el
acceso de todos los habitantes del territorio nacional a las Tecnologías de la Información y las
Comunicaciones y a sus beneficios [5], por lo que se han realizado varias convocatorias a lo
largo del país, y es aquí donde nace este proyecto, por medio de un espacio donde los
Colombianos podemos ayudar a los nuestros a través de la tecnología.
5
1.1 Objetivos
1.1.1 Objetivo general
Desarrollar un sistema de seguridad, el cual hará uso de la alarma comunitaria, para informar
a los residentes de la comunidad sobre el motivo por el que se activó y a su vez proveer
estadísticas sobre la seguridad en los barrios de la Ciudad de Cali, Colombia.
1.1.2 Objetivos específicos
● Identificar los diferentes tipos de emergencia presentados en los barrios de Cali.
● Analizar las diferentes formas de comunicación con los entes gubernamentales, los
cuales son encargados de responder ante una alerta comunitaria.
● Diseñar una arquitectura que permita un adecuado funcionamiento del sistema de
seguridad.
● Desarrollar un sistema de seguridad de acuerdo a los aspectos evaluados.
● Evaluar el sistema en una comunidad de la ciudad de Cali.
6
1.2 Planteamiento del problema
Actualmente en Santiago de Cali existe un sistema de seguridad por sectores, el que consta de
alarmas comunitarias; la función de estas alarmas es dar aviso a la comunidad sobre un acto
delictivo que esté ocurriendo en el momento. Es decir, es una red que integra las casas de los
barrios con un sistema de alarmas que son activadas por los usuarios [6].
Pero y ¿Cómo es el procedimiento antes y después de la activación de la alarma? La persona
que está presenciando o es víctima de algún tipo de robo o delito se dirige ya sea al botón de
emergencia ubicado en su casa o desde el dispositivo remoto tipo llaveros que activan la alarma
de forma inalámbrica, estos “llaveros” se distribuyen entre todos los vecinos. Una vez que se
activa el sistema de alarma comunitaria, se debe identificar el lugar de la emergencia, alertar a
los vecinos y por consiguiente informar a la autoridad pertinente [7].
Estos reportes han contribuido a realizar un progreso en cuanto a la seguridad en la ciudad de
Cali donde se presentan en las siguientes estadísticas [8]:
De acuerdo con la Policía Nacional, en 2015 se registraron en Cali 380 hurtos a personas
(atracos, raponazos1 y cosquilleo2) por cada 100 mil habitantes, lo que representó una reducción
de 9% frente a 2014
1 “Es una práctica criminal, en. el cual los autores del delito generalmente se movilizan en motocicleta, el parrillero una vez identifica a su
víctima coordina con el conductor se acercan y le jalan las pertenencias (bolsos, celulares, cadenas, etc.), una vez cometen el hecho aumentan
velocidad del velocípedo y huyen” [http://metroalarmas.com/uncategorized/10-modalidades-de-robo-e-intimidacion-mas-usadas-por-los-
delincuentes/].
2 “Esta clase de hurto se comete en la vía pública por uno o varios delincuentes, quienes aprovechan el descuido del transeúnte, sus
ocupaciones y la alta fluidez de personas, con el fin extraer los objetos de valor de los bolsos, bolsillos y paquetes, con una gran agilidad y
destreza” [http://metroalarmas.com/uncategorized/10-modalidades-de-robo-e-intimidacion-mas-usadas-por-los-delincuentes/].
7
Figura 1. Número de hurtos a personas por cada 100 mil habitantes en Cali (2010-
2015) [8].
El hurto a residencias en Cali en 2015 se registró en 36 hurtos por cada 100 mil habitantes, lo
que representó un incremento de 9,0% frente a 2014.
Figura 2. Número de hurtos a residencias por cada 100 mil habitantes en Cali (2010-
2015) [8].
En 2015 se registraron en Cali 139 hurtos de celulares por cada 100 mil habitantes, lo que
representó un incremento de 2,0% frente a los hurtos registrados en 2014.
Figura 3. Número de hurtos a celulares por cada 100 mil habitantes en Cali (2010-
2015) [8].
Por su parte, el hurto de motocicletas en Cali en 2015 se registró en 109 por cada 100 mil
habitantes, lo que representó una reducción de 1,0% frente a 2014. En contraste, el hurto a
8
vehículos en Cali en 2015 se incrementó 15,0% frente a 2014 y se registró en 77 hurtos por
cada 100 habitantes.
.
Figura 4. Número de hurtos a vehículos y motocicletas por cada 100 mil habitantes
en Cali (2010-2015) [8].
Como se expone anteriormente, el sistema de alarmas comunitarias ha logrado ayudar a través
del tiempo a mejorar la seguridad en la ciudadanía, permitiéndole a la comunidad una mejor
calidad de vida. Pero ¿Realmente está siendo efectivo este método o procedimiento para alertar
una emergencia? ¿Beneficia al total de habitantes en el que se encuentra instalada una alarma
comunitaria?
Según las Proposiciones No. 08 del 12 de marzo de 2013 de la Alcaldía, existen 404 alarmas
comunitarias, distribuidas en 133 barrios de la ciudad de Santiago de Cali, beneficiando a 7930
personas [9] de un total aproximado de 2,369.829 de habitantes [10], lo que demuestra que el
sistema actual, a pesar de cumplir su función principal de alertar a los residentes, cubre apenas
el 0.33% de la población total, este es el primer y más importante problema de este sistema.
Otro problema que se puede evidenciar es el procedimiento que se lleva a cabo para esta
activación, ya que la persona debe activar la alarma, también debe comunicarse con la autoridad
y peor aún, indicarle a la autoridad en el momento que llegan el lugar donde ocurre la
emergencia; en esta situación el ciudadano se ve afectado emocionalmente, motivo por el cual
9
puede olvidar utilizar el conducto regular y no reportar oportunamente a la autoridad; se
presentan también casos en los que en el transcurso de activar la alarma y notificar tanto a la
autoridad como a los vecinos, no se logre atender de manera efectiva la emergencia.
10
1.3 Justificación
Evidenciando los diferentes problemas que existen en el sistema actual de alarmas comunitarias
en la ciudad de Cali, se propone mejorar el mismo mediante el desarrollo de nuevo sistema que
se integrará al ecosistema de seguridad de la ciudad de Cali, el conformado por una aplicación
móvil, el dispositivo de alarma y una plataforma web.
La aplicación móvil pretende automatizar el proceso de comunicación que existe cuando se
hace uso del sistema de alarmas comunitarias, ya que además de permitir la activación de una
alarma remotamente desde su celular, automáticamente se pondrá en contacto con las
autoridades pertinentes, disminuyendo así el tiempo de respuesta de estas y alertando a los
miembros de la comunidad en solo un instante, cubriendo así a la totalidad de miembros
inscritos en la aplicación que pertenecen a la comunidad. Para cubrir los diferentes tipos de
emergencias, la aplicación contará con una lista de alarmas en la cual el ciudadano podrá hacer
uso de ellas para notificar a las respectivas autoridades.
Otro factor que cabe resaltar es la comodidad y usabilidad que permite la funcionalidad de una
aplicación móvil, y ya que la mayoría de personas poseen un smartphone, se podrá beneficiar
a un mayor número de personas con las alarmas comunitarias en la ciudad de Cali, ya que es
más eficaz utilizar el celular que un botón u otro dispositivo inalámbrico el cual encienda una
alarma, como los que son utilizados actualmente, estos dispositivos a pesar de que son
pequeños y fáciles de guardar e usar, tienen un costo individual por cada uno, lo que quiere
decir que si una persona quiere hacer uso de la alarma comunitaria, debe poseer un dispositivo
especializado para ello, lo que conlleva tiempo y dinero, sin mencionar que se debe
implementar un módulo receptor el cual se encargue de recibir las señales de los controles
remotos, para proceder a encender la alarma. Además, si el número de usuarios aumenta, se
11
debe instalar varios módulos esclavos los cuales se puedan interconectar entre sí para poder
soportar las conexiones necesarias y en cuanto a costos se refiere, es más versátil ampliar la
red de conexiones de usuarios en un servidor web que interconectando dispositivos físicos [11].
Figura 5: Módulos de recepción alarma comunitaria [11].
Así mismo cada reporte de un usuario generará datos en tiempo real, los cuales se usarán para
el análisis y generación de métricas con respecto a la seguridad y las concurrencias de las
distintas emergencias de la aplicación en la ciudad de Cali, todo esto se podrá visualizar en una
plataforma web, la cual ofrecerá estadísticas por cada tipo de alarma a nivel de comunidad y a
nivel total, que ayudará a las autoridades identificar las comunidades que necesiten más apoyo
y atención.
Apoyando el gran auge de tecnología que poco a poco está abordando al país, Alarmapp, fue
ganadora en la convocatoria de Min TIC, como la mejor idea TIC para mejorar la seguridad en
Cali (2015), por lo cual también es un gran incentivo para seguir con su desarrollo y su
evaluación [12].
12
Capítulo 2
Marco teórico
2.1 Desarrollo Web
2.1.1 Desarrollo Frontend
El frontend es la etapa del desarrollo web que se dedica como su nombre lo indica a la parte
frontal de un sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del
sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos
[13].
En este desarrollo se trabaja desde el lado del cliente, es decir, pensando desde que navegador
usará el usuario hasta la interacción, la usabilidad, los colores y el funcionamiento del sitio web
desde la parte visual. En este campo de desarrollo se realiza la integración del desarrollo
backend (los datos) con el lado visual de la aplicación o plataforma, el cual cuenta con un reto,
y es representar correctamente los datos y a su vez mantener el enfoque de los usuarios, por
ello el desarrollador mantiene en constante trabajo, identificando fallas de usabilidad, diseño y
representación de los datos, por otro lado se debe tener en cuenta la tecnología con la que se
esté desarrollando, ya que no todos los navegadores soportan las nuevas tecnologías.
Para este desarrollo se trabaja con los lenguajes de programación y etiquetado los cuales son:
HTML que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language),
CSS Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir
13
la presentación de documentos HTML o XML, JavaScript lenguaje de scripting
multiplataforma y orientado a objetos.
Por otra parte existen frameworks para desarrollo frontend, los cuales como su nombre lo
indica, son cuadros de trabajo, que cuentan con funciones o desarrollos genéricos, ayudando al
desarrollador a mejorar su eficiencia a la hora de codificar. Entre ellos se han escogido los
siguientes para el desarrollo de este proyecto:
2.1.1.1 Jquery
jQuery es una librería JavaScript open-source, que funciona en múltiples navegadores, y que
es compatible con CSS3. Su objetivo principal es hacer la programación “scripting” mucho
más fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas dinámicas, así
como animaciones parecidas a Flash en relativamente corto tiempo [14].
2.1.1.2 AngularJS
AngularJS es un proyecto de código abierto, realizado en Javascript que contiene un conjunto
de librerías útiles para el desarrollo de aplicaciones web y propone una serie de patrones de
diseño para llevarlas a cabo [15]. AngularJS promueve y usa patrones de diseño de software.
En concreto implementa lo que se llama MVC, aunque en una variante muy extendida en el
mundo de Javascript que luego comentaremos con más detalle. Básicamente estos patrones nos
marcan la separación del código de los programas dependiendo de su responsabilidad. Eso
permite repartir la lógica de la aplicación por capas, lo que resulta muy adecuado para
aplicaciones de negocios [16].
14
2.1.2 Desarrollo Backend
El desarrollo backend es la parte que se encarga de la manipulación de los datos y todo el
procesamiento lógico que se realiza en el servidor para un sitio web, el backend se
responsabiliza de toda la programación del sitio en lo que a sus componentes dinámicos se
refiere (páginas, formularios, funcionalidades, bases de datos) y la estructura de documentos,
que deberá aplicarse a diferentes estándares [17].
Para el desarrollo backend se hace uso de una variedad de lenguajes de programación como lo
son: PHP, Java, Phyton, Ruby, entre otros, esta área es también la encargada de optimizar
recursos, de la seguridad de un sitio y demás [13]. En este campo de desarrollo, los
programadores tienen entre sus cargos, la validación de la información que se ingresará a la
base de datos por medio de la aplicación o software que esté realizando, evitando
inconsistencias o intentos de ataques; también tienen la responsabilidad de procesar y enviar
correctamente la información a la interfaz realizada por el frontend, para esto el desarrollador
cuenta con cierta estructura o arquitectura para trabajar (dependiendo del lenguaje de
programación), en el caso de este proyecto se ha escogido el lenguaje de programación PHP,
el cual se trabajará mediante un patrón arquitectónico MVC, el cual permitirá la conexión entre
la base de datos, los controladores (lógica y procesamiento de datos) y las vistas (interfaces) y
el lenguaje Phyton para realizar la comunicación del hardware con la Raspberry Pi para
consumir servicios implementados desde la web.
15
2.1.3 Patrones Arquitectónicos
Los patrones de arquitectura expresan una estructura de organización base o esquema para un
software, el cual proporciona un conjunto de subsistemas predefinidos en el cual se especifican
sus responsabilidades, reglas, directrices, comunicación, interacción y relaciones entre ellos.
Estos patrones arquitectónicos adoptan conceptos y terminología de los patrones de diseño,
pero se centran en proporcionar modelos y métodos reutilizables para la arquitectura general
de los sistemas de información. Dentro de los patrones de arquitectura se han tenido en cuenta
los siguientes para la realización del proyecto: [18].
2.1.3.1 MVC
El patrón Modelo-Vista-Controlador (MVC) surge con el objetivo de reducir el esfuerzo de
programación, necesario en la implementación de sistemas múltiples y sincronizados de los
mismos datos, a partir de estandarizar el diseño de las aplicaciones. El patrón MVC es un
paradigma que divide las partes que conforman una aplicación en el Modelo, las Vistas y los
Controladores, permitiendo la implementación por separado de cada elemento, garantizando
así la actualización y mantenimiento del software de forma sencilla y en un reducido espacio
de tiempo. A partir del uso de frameworks basados en el patrón MVC se puede lograr una mejor
organización del trabajo y mayor especialización de los desarrolladores y diseñadores [19].
16
Figura 6. Estructura del proceso modelo, vista, controlador [19].
El modelo es donde se almacenan los objetos de datos de la aplicación, es decir, hace todas las
peticiones a la base de datos y retorna los datos para su manipulación. La vista es donde se
renderiza3 la interfaz que se le presenta a los usuarios y cómo los usuarios interactúan con la
aplicación. La vista está hecho con HTML, CSS, JavaScript y plantillas a menudo. El
controlador es el encargado de actualizar la vista cuando el modelo cambia. También añade
detectores de eventos a la vista y actualiza el modelo cuando el usuario manipula la vista [20].
La ventaja de utilizar este patrón es que permite la actualización y mantenimiento del software
de una manera más cómoda y fácil en menor tiempo.
2.1.3.2 EDA
La arquitectura dirigida por eventos (Event-driven architecture) es un patrón de arquitectura
software el cual su comportamiento se centra en torno a la producción, detección, consumo y
respuestas ante “eventos”. En el que un evento es cualquier ocurrencia identificable que tiene
un significado para el hardware o el software del sistema, en otras palabras, cualquier cambio
de estado significante para el sistema. Y a su vez este cambio de estado puede ser conocido por
3 “Renderizar una página web es el conjunto de acciones que realiza este para presentar una página web que consiste en analizar, procesar y
visualizar dicha página [http://bibliotecaprofesional.com/que-es-renderizar-una-pagina-web/].”
17
otras aplicaciones en la arquitectura, cada evento se propaga de manera inmediata al resto del
sistema en la medida que sea necesario [21].
18
2.2 Servicios Web.
2.2.1 Definición
Es una tecnología que permite a las aplicaciones interactuar entre sí, sin depender de la
plataforma o el lenguaje en la que estén desarrolladas, usando protocolos basados en lenguaje
XML, teniendo como objetivo describir una operación para ejecutar o para el intercambio de
datos con otro servicio web.
El desarrollo de servicios web basado en SOAP se trata de una comunicación e integración de
sistemas por medio de archivos XML, los cuales son transferidos por medio del protocolo
Simple Object Access Protocol, logrando una interoperabilidad entre sistema, ya que de esta
forma una aplicación cliente puede consumir u obtener recursos tanto de una aplicación
diferente como de otra plataforma, para realizar una estructura orientada a servicios basada en
SOAP se debe contar con un tipo de documento en el cual se describa la funcionalidad del
servicio y los recursos que se pueden obtener de él, conocido como un documento WSDL (web
services description language) [22].
Por otro lado, se ha venido trabajando con un estilo de arquitectura que integra aplicaciones
por medio de comunicación por estados, conocido como REST, que hace uso del protocolo
HTTP, representación de recursos XML y tipos de formato MIME. El concepto surge en el año
2000, en la tesis doctoral sobre la web, escrita por Roy Fielding, uno de los principales autores
de la especificación del protocolo HTTP. En este estilo los recursos se obtienen por medio de
un estándar de estados como lo son GET, POST, PUT y DELETE, el servicio se solicita en una
19
url alojada en el servidor y esta realiza una acción específica dependiendo del método o estado
que se le envíe.
SOAP REST
● Interacción por el protocolo Simple
Object Access Protocol
● Transferencia de archivos XML
● Documento de descripción WSDL
● Interacción a través de URI y
métodos HTTP como Get, Put,
Delete y Post.
● Respuesta de tipo XML, HTML,
JSON
● Estilo de uso general por medio de
HTTP.
Tabla 1. Características principales de servicios web basados en REST y SOAP.
Para crear una arquitectura SOA (service oriented architecture) se deben tener en cuenta ciertas
características o recomendaciones:
● Se debe contar con una buena base de servicios, estos deben ser reutilizables y
multipropósito, no diseñados para una necesidad de negocio o tarea en específico.
● Los servicios deben contar con un contrato estandarizado ya sea un documento WSDL
u otro tipo de documento, facilitando la interacción entre los servicios e
interoperabilidad.
20
● Realizar una categorización de los servicios, llevando un registro de los mismos para
identificar de manera rápida qué funcionalidades encapsulan y cómo interactuar con
ellos.
● Los servicios deben poder implementarse en cualquier tecnología ya sea java, net, php,
etc. Sin que se afecte el resto de la plataforma [23].
2.3 Desarrollo de aplicaciones móviles
Actualmente las aplicaciones móviles presentan una gran variedad de funciones y de medios
en los que se aplican, pues pueden ser utilizadas en dispositivos como teléfonos inteligentes,
tabletas electrónicas, consolas portátiles de videojuegos, etc. La capacidad de una aplicación
móvil puede ser definida por la plataforma en que se desarrolla o en la que se aplica, es decir,
no pueden presentar las mismas funciones en una plataforma Android, que en una plataforma
Symbian, pues los elementos de ejecución cambian para adaptarse al hardware del medio móvil
[24].
El desarrollo de aplicaciones móviles se puede realizar mediante diferentes plataformas, las
cuales presentan un propio sistema de codificación y de compilación, por lo que el potencial
que presente cada elemento en desarrollo es diferente. Para poder desarrollar un elemento de
aplicación para cualquier dispositivo móvil lo principal a conocer es el medio en el que esta
funcionará, es decir el sistema operativo o plataforma final en el que se ejecutará y la forma en
que lo hará [24].
2.3.1 Aplicaciones Nativas
Las aplicaciones nativas son aquellas desarrolladas única y exclusivamente para sistemas
operativos móviles, ya sea Android o iOS. En Android se hace uso del lenguaje de
21
programación Java, mientras que en iOS se hace uso de Swift u Objective-C. Estos lenguajes
de programación son los oficiales para los respectivos sistemas operativos [26].
Con las aplicaciones nativas, el lenguaje de programación permite consumir y hacer uso al
máximo los recursos del dispositivo, permitiendo así que la aplicación sea más rápida, posee
un mejor rendimiento principalmente en cuanto a: menor consumo de memoria, mayor
velocidad, aprovechamiento total del hardware del dispositivo (Cámara, GPS, Sensores, entre
otros).
2.3.1.1 Android Studio
Android Studio es el entorno de desarrollo integrado (IDE) oficial para el desarrollo de
aplicaciones para Android y se basa en IntelliJ IDEA. Además del potente editor de códigos y
las herramientas para desarrolladores de IntelliJ, Android Studio ofrece aún más funciones que
aumentan tu productividad durante la compilación de apps para Android, como las siguientes
[27]:
● Sistema de compilación flexible basado en Gradle.
● Un emulador rápido con varias funciones.
● Un entorno unificado en el que puedes realizar desarrollos para todos los dispositivos
Android.
● Instant Run, para aplicar cambios mientras tu app se ejecuta sin la necesidad de
compilar un nuevo APK.
● Integración de plantillas de código y GitHub, para ayudarte a compilar funciones
comunes de las apps e importar ejemplos de código.
22
● Gran cantidad de herramientas y frameworks de prueba.
● Herramientas Lint para detectar problemas de rendimiento, uso, compatibilidad de
versión, etc.
● Compatibilidad con C++ y NDK
● Soporte integrado para Google Cloud Platform, que facilita la integración de Google
Cloud Messaging y App Engine.
2.3.1.2 Xcode
Xcode es el entorno de desarrollo integrado (IDE) de la empresa Apple Inc para crear
aplicaciones para Iphone, Ipad, Mac, Apple Watch y Apple Tv, soporta los lenguajes C, C++,
Objective-C, Objective-C++, Java, AppleScript y Swift, este último es el lenguaje más común
en torno al desarrollo de aplicaciones para dispositivos Apple. Además ofrece una interfaz para
generar el diseño de las aplicaciones que va conjunto a la programación de esta, lo cual hace
más dinámico el desarrollo y fácil de usar [28].
2.3.2 Aplicaciones Web
Las aplicaciones web como su nombre lo dice, deben su funcionalidad al internet, en este tipo
de aplicaciones, suele utilizar el “responsive web design”, creando así una única aplicación
adaptada para todo tipo de dispositivos [29], es decir que los datos o los archivos en los que se
trabaja son procesados y almacenados dentro de la web. Estas aplicaciones, por lo general, no
necesitan ser instaladas [30].
23
2.3.3 Desarrollo multiplataforma
Corresponde a una tendencia que ha tomado gran auge en los últimos años ya que la mayoría
de proyectos web como plataformas SaaS4(software como servicio), marketplaces, redes
sociales o portales de otro tipo, están migrando hacia los dispositivos móviles para tener más
accesibilidad, esto implica plantear un desarrollo diferente e implementar herramientas que
suplan los requerimientos de las plataformas originales y además de eso poseer una buena
experiencia con el usuario [25]. Para ello se han destacado tres tendencias de desarrollo para
dispositivos móviles las cuales son:
2.3.3.1 Aplicaciones Híbridas
Las apps híbridas se desarrollan con lenguajes propios de las aplicaciones web, es decir,
HTML, Javascript y CSS por lo que permite su uso en diferentes plataformas, pero también
dan la posibilidad de acceder a gran parte de las características del hardware del dispositivo.
La principal ventaja es que a pesar de estar desarrollada con HTML, Java o CSS, es posible
agrupar los códigos y distribuirla en app store [31].
En las aplicaciones híbridas es importante tener en cuenta que se desarrollan una sola vez; lo
cual significa que se programa una única aplicación y esta se puede compilar para varios
sistemas operativos, lo que se conoce como ‘App multiplataforma’ [25].
2.3.3.1.1 Phonegap
Phonegap es un framework creado por Nitobi, el cual ahora es propiedad de Adobe, este brinda
la posibilidad de desarrollar aplicaciones multiplataforma o híbridas de manera gratuita
4 “Con el concepto de Software como Servicio (SaaS, Software as a Service) se describe cualquier servicio cloud en el que los consumidores
puedan acceder a aplicaciones de software a través de internet” [http://www.interoute.es/what-saas].
24
utilizando las tecnologías web como Html5, Css3 y JavaScript, también nos permite integrarlo
con jQuery Mobile y muchas otras librerías que se requiera integrar a un proyecto. Las
aplicaciones híbridas llevan una gran ventaja sobre las nativas, y esto se debe a que pueden ser
usadas en cualquier dispositivo inteligente, aunque estos poseen diferentes sistemas operativos,
lo cual es la principal desventaja de las aplicaciones nativas [32].
En la actualidad Phonegap permite desarrollar aplicaciones para los diferentes tipos de sistemas
operativos para móviles, estos son [32]:
● Android
● iOS
● BlackBerry OS
● Windows Phone
● Web OS
● Symbian
● Bada
2.3.3.1.2 Ionic
Ionic es un framework open source desarrollado sobre AngularJS para realizar aplicaciones
híbridas utilizando HTML5, CSS3 y componentes de JavaScript. Este framework está diseñado
con transiciones aceleradas de hardware y optimizado para la detección de eventos táctiles [33].
Una de las características más llamativas de Ionic es su versatilidad para ser una app nativa, no
quiere decir que sea igual de rápida que una aplicación nativa, pero utiliza los estándares de
diseño nativos y los SDK para su optimización, accediendo así a recursos del dispositivo como:
25
cámara, GPS, Sensores, entre otros, siendo así una aplicación web y nativa al mismo tiempo
[33].
2.4 Diseño de interfaces
Es el diseño de computadoras, aplicaciones, máquinas, dispositivos de comunicación móvil,
aplicaciones de software, y sitios web enfocado en la experiencia de usuario y la interacción.
Su objetivo es que las aplicaciones sean más atractivos y además, hacer que la interacción con
el usuario sea lo más intuitiva posible, conocido como el diseño centrado en el usuario. En este
sentido las disciplinas del diseño industrial y diseño gráfico se encargan de que la actividad a
desarrollar se comunique y aprenda lo más rápidamente, a través de recursos como la gráfica,
los pictogramas, los estereotipos y la simbología, todo sin afectar el funcionamiento técnico
eficiente [34].
Existen tres puntos de vista distintos en una IU: el del usuario, el del programador y el del
diseñador (analogía de la construcción de una casa). Cada uno tiene un modelo mental propio
de la interfaz, que contiene los conceptos y expectativas acerca de la misma, desarrollados a
través de su experiencia.
El modelo permite explicar o predecir comportamientos del sistema y tomar las decisiones
adecuadas para modificar el mismo. Los modelos subyacen en la interacción con las
computadoras, de ahí su importancia [35].
2.4.1 Diseño web
Al hablar de de interfaz web, se hace referencia a los elementos gráficos que permiten al usuario
acceder a los contenidos, navegar e interactuar. Para lograr que un usuario se quede y vuelva,
el diseño de la interfaz es importante [36].
26
Son muchos los factores que hay que tener en cuenta a la hora de diseñar un sitio web. Sin
embargo, dos factores destacan sobre los demás: su contenido y el diseño de la interfaz. Los
arquitectos de la información se ocupan ahora del diseño centrado tanto en el uso, como en el
usuario para hacerle a éste las tareas lo más sencillas posibles [37].
Francisco Tosete Herranz, en La experiencia del usuario resume todas las disciplinas
implicadas en el diseño de sitios web:
● Arquitectura de la información: misión y objetivos estratégicos, clientes y sus
expectativas, estudio sectorial/análisis competitivo, definición y organización de los
contenidos, interacción, navegación, rotulado, búsqueda, prototipado, etc.
● Diseño de la interacción: definición de servicios, definición de las tareas, diagrama de
interacción, storyboards, etc.
● Usabilidad: métodos de indagación, métodos de inspección, test de usabilidad, análisis
de logs, etc.
● Accesibilidad: directrices y pautas de accesibilidad, test de accesibilidad, etc.
● Diseño de la información/diseño gráfico: aspectos y sensación, diseño de
contenido/página, diseño de la interfaz, diseño artístico/creativo, etc.
● Programación y tecnologías: hardware/software, estándares web, etc. [37].
2.4.1.1 Diseño elástico
El diseño web elástico, elastic web design, es un tipo de diseño muy parecido al fluido, sólo
que en este caso el contenido también crece junto al ancho del diseño para rellenar la pantalla.
Es, con diferencia, un tipo de diseño prácticamente residual y muy poco usable. Volvemos a lo
mismo que en el caso del diseño fluido, el diseño elástico puede resultar más o menos agradable
en tamaños de pantalla más o menos pequeños, pero cuando se utilizan pantallas muy grandes
27
el contenido se vuelve exageradamente irracional, por lo que salvo contadas excepciones, no
tiene ningún tipo de razón de ser. En este caso el diseñador web utiliza em para fijar los anchos
de su diseño web y del resto del contenido que alberga. Es un tipo de diseño del que debemos
alejarnos lo más posible [38].
2.4.1.2 Diseño responsivo
El diseño web responsive reestructura en la pantalla del dispositivo los elementos de la web
para optimizar todo el espacio disponible y ofrecer una excelente experiencia de usuario, esto
se consigue estableciendo unas medidas de ancho y márgenes de diseño en tamaños de
porcentajes en lugar de establecer valores en pixeles fijos. Para ello también se suele utilizar
media queries y hojas de estilo para poder fijar las CSS correspondientes a cada tamaño de la
pantalla [39].
Figura 7. Diseño responsivo (responsive design) [39].
Las ventajas de usar este tipo de técnicas es que se usa una sola URL, lo que le permite a los
usuarios acceder más fácil, y no es necesario realizar un re direccionamiento para que los
28
usuarios lleguen a una vista ideal para su dispositivo [40], pero al mismo tiempo hay que tener
cuidado con la programación visual de la página, es decir que hay componentes que funcionan
con un click, pero es mucho más difícil dinamizar las funcionalidades con el toque táctil de la
pantalla [41].
2.4.2 Diseño para aplicaciones móviles
La interfaz de una aplicación es como la ropa que viste para salir a la calle. Es también la capa
que hay entre el usuario y el corazón funcional de la app, el lugar donde nacen las interacciones.
En mayor medida está compuesta por botones, gráficos, íconos y fondos, que tienen una
apariencia visual diferente en cada uno de los sistemas operativos, porque Android, iOS y
Windows Phone tienen su propia forma de entender el diseño.
El trabajo del diseñador consiste en interpretar la personalidad de cada sistema operativo,
aportando su propia visión y estilo de diseño, para conseguir aplicaciones que, además de ser
fáciles de usar, sean distintas a las demás y tengan coherencia visual con la plataforma que las
acoge [42].
Cada plaraforma tiene su propia identidad que es reflejada en la apariencia y comportamiento
de cada uno de los elementos que componen su interfaz. En ellos imprime su personalidad, lo
que hace que la experiencia sea diferente a las demás [43].
Los siguientes conceptos se consideran como componente claves para el diseño de una
aplicación móvil:
29
● Simplicidad: La simplicidad visual está directamente relacionada con la usabilidad.
Ser simple implica en cierta medida ser mínimo, contar con pocos elementos, pero sobre
todo, que aquellos presentes en la interfaz tengan una función bien definida que
contribuya a cumplir el objetivo de la app y ayude al usuario.
● Navegación intuitiva: Un aspecto que merece mucha atención en una aplicación es la
forma de navegar entre contenidos, de manera que resulte fácil de comprender para el
usuario, evitando la sensación de desorientación que puede ocasionar una navegación
confusa.
La navegación intuitiva está también relacionada con la consistencia. Cada sistema
operativo propone diferentes elementos para navegar por la app como botones, pestañas
y paneles. Hacer uso de ellos hará que el usuario los reconozca a primera vista y, solo
con estos componentes, ya sepa cómo ir de una sección a otra.
● Consistencia: Una app tiene diferentes pantallas que la componen y al mismo tiempo,
está dentro de un sistema operativo que propone un determinado aspecto visual e
interacción. El usuario de Android, iOS o Windows Phone ya está habituado a ellos y
espera que las aplicaciones se comporten de la misma manera.
La consistencia, entonces, se trata de respetar estos conocimientos y costumbres del
usuario, no solo en el interior de la aplicación, sino también en relación con el resto del
SO. Esto favorece el uso intuitivo de la app, ya que el usuario puede prever su
comportamiento sin demasiado esfuerzo.
● Cuadros de diálogo: Hay casos puntuales en los que hay que interrumpir al usuario de
forma temporal para que tome una decisión o para explicarle mejor algo que ha
30
sucedido antes de continuar una tarea. Mientras los diálogos están visibles en pantalla
no es posible hacer otra cosa en el resto de la aplicación.
Cuando se trata de cuadros que contienen avisos que no requieren una toma de decisión,
estos son informativos y tienen únicamente un botón que se ocupa de cerrarlos. Es
recomendable limitar su uso para mensajes graves o trascendentales que no puedan
esperar.
En otros casos, los cuadros de diálogo se usan para comunicar al usuario que debe tomar
una decisión para poder continuar y puede elegir entre dos o más opciones disponibles.
Figura 8. Cuadros de diálogo para el diseño de aplicaciones móviles [43].
● Notificaciones dentro de la app: Cuestiones como: ¿Qué está haciendo la app? ¿Cómo
saber que la acción ha funcionado? ¿Ya terminó o hay que hacer algo más?,
seguramente pasan por la cabeza de un usuario cuando no tiene ninguna confirmación
visual de que la acción que acaba de realizar ha ido bien.
31
Para mitigar esta incertidumbre, se aconseja mostrar explícitamente cómo han ido las
cosas o que sucederá en breve con simples mensajes de confirmación. Este tipo de
mensajes se presentan en pequeños avisos que desaparecen luego de unos segundos.
A diferencia de los cuadros de diálogo, las notificaciones no requieren la intervención
del usuario ni tampoco interrumpen su flujo de trabajo [43].
Figura 9, Notificaciones dentro de la app para el diseño de aplicaciones móviles [43].
2.4.3 Filosofías de diseño
2.4.3.1 Flat Design
El “Flat Design” o “Diseño Plano” consiste en eliminar o reducir todo tipo de decoración en
un diseño de interfaz o web para simplificar el mensaje y facilitar la funcionalidad. Se eliminan
texturas, degradados, biselados, sombreados… en definitiva, todo lo que no aporte valor al
mensaje o información que se quiere transmitir al usuario que interactúa con la interfaz.
32
Colores: Se suelen utilizar colores vivos en paletas pastel con pocas variaciones de cada color.
Intentar utilizar esquemas de color que ayuden al usuario a “comprender” el diseño de forma
visual y así facilitar la interacción.
Tipografía, la tendencia es utilizar fuentes sans serif para cuerpos. Para títulos sirve casi
cualquier fuente de fácil lectura, incluso las creativas. Se suelen utilizar grandes tamaños, al
mismo tiempo que se reducen las longitudes de los títulos y subtítulos.
Mensaje: Si puedes decir algo en 4 palabras no lo digas con 10. Sé directo y utiliza claras
llamadas a la acción. El mensaje suele ir reforzado con códigos de color para dar jerarquía o
importancia a la información [44].
2.4.3.2 Material Design
Material Design es un concepto, una filosofía, unas pautas enfocadas al diseño utilizado en
Android, pero también en la web y en cualquier plataforma. El encargado de crear Material
Design y máximo responsable de diseño en Google es el chileno Matías Duarte. Precisamente
este diseño basado en objetos es una manera de intentar aproximarse a la realidad, algo que en
un mundo donde todo es táctil y virtual es difícil. Material Design quiere guiarse por las leyes
de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no pueden
atravesarse el uno al otro y demás.
Material Design es un diseño con una tipografía clara, casillas bien ordenadas, colores e
imágenes llamativos para no perder el foco y un sentido del orden y la jerarquía muy marcado.
33
Uno de los elementos clave es la luz y las sombras. Una iluminación realista proporciona
indicios de cómo se comportará un elemento y en qué nivel se encuentra [45].
Figura 10, Ejemplo de material design [45].
El movimiento permite al usuario dibujar un paralelo entre lo que ven en la pantalla y en la
vida real. Al proporcionar tanto la retroalimentación y la familiaridad, lo que permite al o la
usuario sumergirse completamente en tecnología desconocida. El movimiento posee
consistencia y continuidad, además de dar a los usuarios la información subconsciente
adicional sobre objetos y transformaciones [46].
2.5 Visualización de datos
La visualización de datos es un tema que no solo se trabaja en el desarrollo de software, sino
en otras áreas como por ejemplo el marketing digital, estamos en la era de la big data,
encontrando una extensa cantidad de información alrededor. Lo que se busca con la
34
visualización de datos es tomar una cantidad de información previamente seleccionada y
analizada y representarla por diferentes métodos como gráficas, diagramas, mapas para geo
posicionamiento, entre otros [47].
Para realizar este proceso en la web, se han tomado en cuenta las siguientes librerías para la
representación y la visualización de datos:
2.5.1 ChartJS
Es una librería de JavaScript para la manipulación de datos, usa la etiqueta canvas de HTML5,
para dinamizar los componentes de visualización, provee diferentes tipos de gráficos, ejes y
animaciones, incluyendo la gran ventaja de que sus gráficos son de carácter responsivo [48].
2.5.2 Google Charts
Google Charts es una herramienta que tiene como propósito visualizar de manera dinámica los
datos de una página web, Google Charts utiliza el javaScript que se incrusta a la página. Los
gráficos se representan mediante la tecnología HTML5 / SVG para proporcionar
compatibilidad entre navegadores (incluyendo VML para versiones anteriores de IE) y la
portabilidad entre plataformas para iPhone, iPad y Android. Los usuarios nunca tendrán que
meterse con plugins o cualquier software. Si tienen un navegador web, que pueden ver sus
datos [49].
2.5.3 Google Maps
Google Maps es un servidor de aplicaciones de mapas, utiliza javascript para realizar peticiones
de una forma asíncrona con AJAX para poseer una mejor experiencia con el usuario, ofrece la
capacidad de realizar acercamientos y alejamientos, además crea un paso a paso para llegar a
35
una dirección ya sea a pie o en carro, sin mencionar que ahora puede identificar el tráfico lento
en una ciudad, imágenes de mapas desplazables, imágenes por satélite y la ruta de miles de
ubicaciones [50]. Las coordenadas de Google Maps están en el sistema WGS84 y se mostrará
la latitud y la longitud, positiva para Norte y Este, negativa para Sur y Oeste [51].
Google además de ofrecer ese servicio, también tiene una opción para desarrolladores, el cual
haciendo uso de la API de Google Maps, el desarrollador es libre de usar este servicio para
cualquier sitio web, pudiendo modificar casi cualquier aspecto de la interfaz original.
2.6 Componentes de Hardware
2.6.1 Arduino
Arduino es una plataforma electrónica de código abierto basada en hardware y software fácil
de usar, las placas de arduino son capaces de leer las entradas, la luz en un sensor, un dedo
sobre un botón o un mensaje de Twitter y convertirlo en una salida, la activación de un motor,
encender un LED, publicar algo en línea. Todas estas funciones son enviadas como un conjunto
de instrucciones a un microcontrolador desde el editor de arduino. Para ello se utiliza el
lenguaje de programación de Arduino (basado en el cableado), y el software de Arduino (IDE),
basadas en Processing. Algunos factores importantes sobre Arduino son [52]:
● Multiplataforma - El software de Arduino (IDE) se ejecuta en Windows, Macintosh OS
X, y Linux. La mayoría de los sistemas de microcontrolador se limitan a Windows.
● El código abierto y hardware ampliable - Los planes de las placas Arduino se publican
bajo una licencia de Creative Commons, por lo que los diseñadores de circuitos
experimentados pueden hacer su propia versión del módulo, ampliándolo y
36
mejorándolo. Incluso los usuarios con poca experiencia pueden construir la versión de
tablero del módulo con el fin de entender cómo funciona y ahorrar dinero.
2.6.2 Raspberry Pi
La Raspberry Pi es un ordenador de tamaño de una tarjeta de crédito que se conecta a una
pantalla y un teclado. Es un pequeño ordenador capaz que puede ser utilizado en proyectos de
electrónica, y para muchos de las cosas que hace el PC de escritorio, como hojas de cálculo,
procesamiento de textos, navegación por internet, y jugar juegos. También reproduce vídeo de
alta definición. Nace con el objetivo de estimular la enseñanza de las ciencias de la
computación en las escuelas [53].
2.6.3 Raspbian
Raspbian es un sistema operativo gratis basado sobre Debian optimizado para la Raspberry Pi,
el cual tiene programas básicos y útiles para que la Raspberry Pi funcione, el cual cuenta con
más de 35 mil paquetes de software pre-compilado el cual hace su instalación más agradable,
además de proporcionar un rendimiento significativamente más rápido para aplicaciones que
hacen un uso intensivo de operaciones aritméticas [54].
2.7 Experiencia de Usuario (UX)
Experiencia de usuario (UX) representa la percepción dejada en la mente de alguien después
de una serie interacción entre la gente, dispositivos y eventos- o una combinación de esas.
“Serie” es la palabra operativa [55].
37
El concepto de la Experiencia del Usuario tiene su origen en el campo del Marketing, estando
muy vinculado con el concepto de Experiencia de Marca – pretensión de establecer una relación
familiar y consistente entre consumidor y marca–. En el contexto del Marketing, un enfoque
centrado en la Experiencia del Usuario con llevaría no sólo analizar los factores que influyen
en la adquisición o elección de un determinado producto, sino también analizar cómo los
consumidores usan en producto y la experiencia resultante de su uso (Kankainen; 2002) [55].
La web puede ser representada en varios términos, pero cuando se habla de experiencia de
Usuario, según Jesse James Garrett [56] la web se divide en 2 partes, la primera se puede
denotar como un sistema de hipertexto, y la segunda como la interfaz de software, donde en
cada una se despliegan las mismas etapas, pero su desarrollo y conceptualización es muy
diferente a continuación se enumeran algunas en la siguiente imagen:
Figura 11, Elementos de la experiencia de usuario [56].
38
Existen diversas técnicas que amplían la conceptualización y el desarrollo de la experiencia de
usuario, estas técnicas se pueden emplear en cualquier faceta de las etapas del desarrollo y
pueden mezclarse entre sí para obtener mejores resultado y fomentar una mejor experiencia,
algunas de las técnicas más usadas son[57]:
Técnicas básicas dentro de un proceso de diseño:
● Entrevista y Encuesta
● Observación
● Revisión bibliográfica
● Consulta a experto
● Representación y mapeo
Técnicas muy usadas para la búsqueda de información:
● Tormenta de ideas.
● Diseño participativo.
● Escenarios.
● Análisis de frecuencia de texto (repetición de términos y conceptos en los contextos).
Técnicas muy usadas para la organización:
● Organización de tarjetas.
● Agrupación (finalizando en un Diagrama de Afinidad).
● Tabulación de contenidos (crear tablas con los diferentes contenidos a organizar).
● Validación de términos.
Técnicas muy usadas para el funcionamiento del producto:
● Análisis de tareas.
● Flujogramas.
Técnicas muy usadas para diseñar el producto:
39
● Diagramación en papel.
● Diagrama de organización
● Diagrama de funcionamiento.
● Diagrama de presentación.
● Prototipado digital.
Técnicas usadas para hacer los test del diseño planteado:
● Pruebas con usuarios.
● Mapeo de clics dentro de la pantalla del producto.
● Monitorización o seguimiento visual.
2.8 Usabilidad
La usabilidad es la que medición de la calidad de la experiencia que tiene el usuario al
interactuar con el sistema, para determinar la eficiencia en el uso de los diferentes elementos
que se presentan en cada pantalla y la efectividad en las actividades que se pueden realizar a
través de ellas.
La usabilidad se enfoca en brindar facilidad al usuario para que pueda navegar en un sitio e
interactuar sin problemas con los elementos que aparecen en él: botones, hipervínculos,
animaciones, íconos, recursos multimedia y enlaces. También hace referencia con la capacidad
de mantener al usuario dentro del sitio, proporcionándole una estadía eficiente y evitando
problemas como demoras en la carga de interfaces, enlaces rotos o confusiones a la hora de
localizar rápido la información que está buscando [58]. Algunas preguntas que el diseñador no
40
puede permitir que se plantee el usuario a la hora de ver la interfaz son ¿Dónde estoy?, ¿Por
dónde empiezo?, ¿Cuáles son las cosas más importantes de esta página(o aplicación)?
[59].
Para realizar una adecuada revisión en cuanto a lo hablado anteriormente, se deben tener en
cuenta los siguientes factores:
● Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto
una interfaz, puede aprender a usarla bien y realizar operaciones básicas.
● Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar
las tareas, una vez que se ha aprendido a usar el sistema.
● Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las
características y forma de uso de un sistema para volver a utilizarlo a futuro.
● Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios
para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.
● Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han
empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.
41
Capítulo 3
Antecedentes
Hoy en día existen diversas aplicaciones para poder satisfacer muchas de las necesidades
humanas, las cuales facilitan el trabajo y ahorran tiempo en su práctica, por lo cual se puede
evidenciar aplicaciones enfocadas en velar por la seguridad y ayudar en la comunidad, donde
algunas de las más destacadas son:
3.1 Cuadrantes.
La aplicación Cuadrantes hace parte del Plan de Seguridad Ciudadana de la Policía Nacional
de Colombia que busca que el ciudadano pueda establecer comunicación directa con la patrulla
asignada según su ubicación geográfica. La llamada se efectúa automáticamente de modo que
usted no tiene que escribir el número en ningún lugar.
La estrategia de CUADRANTES DE SEGURIDAD delimitó las principales ciudades del
territorio nacional por áreas específicas denominadas CUADRANTES, cada área tiene
asignada al menos una patrulla con mínimo con 2 hombres y un teléfono celular disponible
para que el ciudadano llame según el cuadrante en el cual está ubicado en caso de emergencia
o alguna novedad [60].
42
Figura 12, Aplicación Móvil Cuadrantes [60].
3.2 PF Móvil.
PF Móvil es una aplicación que permite realizar reportes de delitos y establecer un vínculo
entre la ciudadanía y el Centro Nacional de Atención Ciudadana (CNAC), que es parte de la
Comisión Nacional de Seguridad (CNS). Permite realizar llamadas al 088, enviar reportes en
forma de texto con la posibilidad de adjuntar multimedia (audio, foto o video), consultar
reportes de incidentes en vías federales y hospitales cercanos; es posible solicitar información
acerca de diferentes tópicos y consultar las cuentas de Facebook, Instagram y Twitter [61].
43
Figura 13, Aplicación Móvil PF Móvil [61].
3.3 Alerta Motorola
Alerta Motorola permite alertar rápidamente a una lista de contactos definida por el usuario
cuando los necesite. Otro servicio configura el teléfono en el modo de alerta, este comienza a
enviar notificaciones periódicas con la ubicación del teléfono a las personas que se designó
para que puedan actuar rápido y así ayudar [62].
44
Figura 14, Aplicación Móvil Alerta Motorola [62].
3.4 Ecu 911.
La aplicación móvil del ECU 911 permite reportar emergencias desde el Smartphone,
seleccionando la entidad gubernamental (policía, tránsito, salud, bomberos) para que atienda
la emergencia que elige reportar [63].
45
Figura 15, Aplicación Móvil Ecu 911 [63].
3.5 Alarmas comunitarias en Cali
Actualmente en Santiago de Cali existe un sistema de seguridad por sectores, el cual consta de
alarmas comunitarias, la función de estas alarmas es dar aviso a la comunidad sobre un acto
delictivo que esté ocurriendo en el momento. Es decir, es una red que integra las casas de los
barrios con un sistema de alarmas que son activadas por los usuarios [64]. Según las
Proposiciones No. 08 del 12 de marzo de 2013 de la alcaldía, existen 404 alarmas comunitarias,
distribuidas en 133 barrios de la ciudad de Santiago de Cali, beneficiando a 7930 personas. [9]
46
COMUNA FRENTES BARRIOS BENEFICIARIOS
1 3 Terrón Colorado 60
2 2 Campiña y Flora 40
3 2 El Piloto 40
2 San Nicolás 40
4 4 Olaya Herrera 80
1 Las Delicias 20
5 16 Portal de Comfandi- Bajo Salomia
y Brisas de los Andes I
320
24 Paseo los Almendros-Villa del
Prado-Ciudadela Santa Barbara
480
3 Metropolitano 60
3 Los Andes 60
4 Villa de Veracruz 80
6 15 300
6 Guaduales 120
1 Floralia I 20
1 Floralia 20
9 3 Alameda 60
47
COMUNA FRENTES BARRIOS BENEFICIARIOS
10 4 Panamericano 80
2 La Selva 40
11 1 El Jardín 20
6 Prados de Oriente 120
1 Ricardo Balcazar 20
13 10 Los Lagos 200
3 Villa San marcos 60
14 2 3er Milenio 40
7 Alfonso Bonilla Aragón 140
15 8 Ciudad Córdoba 160
17 20 Bosques del Limonar-Santa Anita-
Capri-Primero de Mayo- Mayapan
las Vegas
400
1 Los Samanes 20
3 Gran Limonar 60
4 Prados del Limonar 80
1 Caney III 20
18 5 Melendez 10
48
COMUNA FRENTES BARRIOS BENEFICIARIOS
1 Los Farallones 20
19 54 Se instalaron en 32 barrios y/o
sectores
1080
66 Se instalaron en 32 barrios y/o
sectores
1280
69 Se instalaron en 32 barrios y/o
sectores
1380
21 Se instalaron en 21 barrios y/o
sectores
420
20 20 Belisario-Venezuela 400
1 Siloe 20
21 2 Talangas 40
1 Compartir 20
1 desepaz 20
Tabla 2. Alarmas y frentes de seguridad en los distintos barrios de Santiago de Cali [9].
Pero, ¿qué sucede si la emergencia no es un robo en la calle o un asalto a una vivienda?, es
en este punto en el que se puede apreciar cómo la comunidad a pesar de contar con un
sistema de alarmas comunitarias contra robos, no está totalmente informada sobre qué otras
49
emergencias suceden a su alrededor como por ejemplo incendios, inundaciones, etc., y
cómo actuar frente a estas.
Otro aspecto que cabe resaltar es cuando la alarma se activa sin que ocurra un incidente
(conocido como falsa alarma) para alertar la presencia de sujetos o vehículos sospechosos,
esto a su vez ocasiona que los habitantes entren en estado de alerta o pánico.
Se realizó una encuesta para la clase de catedra de emprendimiento, en la cual se tomaron
personas de diferentes sectores de la ciudad, en esta se les preguntó acerca de la seguridad
en su barrio o comunidad, del lugar donde residen, también si conocen el motivo por el cual
se enciende la alarma y si conocían aplicaciones móviles las cuales alertarán sobre alguna
emergencia. La encuesta fue realizada de forma personal y por medio de google forms, a
continuación se anexan alguno de los resultados.
Figura 16, diagrama de pastel - resultados de pregunta “¿Desde su hogar puede escuchar
la alarma comunitaria?”.
50
A pesar de contar con el servicio de las alarmas comunitarias, el 11,8% de las personas
encuestadas no logran escuchar la alarma desde sus hogares.
Figura 17, diagrama de pastel - resultados de pregunta “¿Conoce el motivo por el cual se
enciende la alarma comunitaria?”.
Se puede evidenciar cómo el 55,9% de las personas encuestadas, no conocen el motivo por
que cual se ha encendido la alarma.
Figura 18, diagrama de pastel - resultados de pregunta “¿Sabe qué medidas tomar en caso
de una emergencia (Robo, incendio, entre otros)?”.
51
Este es otro dato muy importante, ya que el 32.4% de las personas que realizaron la encuesta
no sabe qué medidas deben tomar en caso de una emergencia, ya sea un robo en la calle,
un asalto a una vivienda, un incendio, una inundación, etc.
52
Capítulo 4
Desarrollo
4.1 Metodología
4.1.1 Recolección de información
Se realizó un estudio con diversas personas residentes de diferentes barrios de la ciudad de
Cali, para identificar la problemática a solucionar por medio de este proyecto y de igual manera
tener el conocimiento de los requisitos suficientes para suplir el desarrollo y las necesidades
del proyecto.
El estudio se realizó por medio del método de encuestas que fueron hechas personalmente,
acerca de la seguridad que existe actualmente en sus barrios, además de esto, se traspasaron los
resultados a la plataforma que brinda Google Forms para poder obtener de una manera más
comprensible el análisis estadístico de los resultados.
Ver anexo 1.
4.1.2 Identificación de los tipos de emergencias
Se realizó un análisis basado en las encuestas y entrevistas mostradas anteriormente, sobre qué
tipos de emergencias se presentan en la ciudad de Cali, el cual dio como resultado emergencias
que se catalogaron como principales y secundarias, las principales como emergencias que
requieren acción inmediata debido a las consecuencias que puedan causar, por ejemplo, un
53
robo, un incendio, un accidente, peleas callejeras (riñas), llamados de auxilio y explosiones.
Las secundarias como emergencias que no requieren acción inmediata, sino que se presentan
como alertas informativas, por ejemplo, sujetos sospechosos, consumo o venta de drogas, corte
de agua, corte de energía y vehículos sospechosos.
4.1.3 Análisis de la comunicación con los entes gubernamentales
Se llevó a cabo una investigación sobre los entes gubernamentales que se enfrentan a los tipos
de emergencias nombrados en el subcapítulo anterior y la forma de comunicarse con ellos,
reduciendo el tiempo de espera y haciendo más efectiva la atención. Los entes que realizan esta
labor son la policía metropolitana, la cruz roja y el cuerpo de bomberos voluntarios de Cali,
estos atenderán llamados de emergencias principales las cuales se nombraron anteriormente y
la forma de comunicación es la siguiente:
Policía Metropolitana, esta cuenta con diferentes medios de comunicación como lo
son la línea de atención de emergencias marcando al “123”, la línea de atención al
ciudadano marcando al “018000-910600”, la dirección de correo electrónico “
[email protected] ” y el número de cada uno de los cuadrantes distribuidos
en la ciudad [65].
Por lo cual se decide que la mejor opción para una efectiva comunicación sería por
medio del número del cuadrante más cercano al lugar de la emergencia, acortando los
procesos y mejorando el tiempo de acción, ya que si se llamara a la línea “123” estos al
atender la emergencia deben seguir con el proceso de informar al cuadrante más cercano
para que se dirijan a la zona afectada, por otro lado la dirección de correo electrónico
54
no sería como tal un medio de rápida respuesta para una emergencia que requiere una
inmediata acción.
Cruz Roja, esta cuenta con una línea rápida para emergencias la cual es “132” [66], en
la cual de manera efectiva se tomará el tipo de emergencia, los datos de la emergencia
como la zona, los implicados y en su debido caso se darán indicaciones a seguir [67].
Cuerpo de Bomberos Voluntarios, para lograr una efectiva comunicación con este
ente, la línea directa para emergencias es marcando el “119” [68], en el cual se dirá el
lugar de la emergencia y el motivo.
4.1.4 Investigación en diseño y desarrollo
Se indagó sobre los lineamientos de diseño que pertenecen a las plataformas móviles, Android,
IOS y plataformas web (o websites) para su apropiado funcionamiento.
Además, se profundizó sobre los diversos tipos de desarrollo de aplicaciones móviles actuales,
diversos frameworks de desarrollo multiplataforma, patrones de diseño, de arquitectura,
servicios web y conectividad entre dispositivos. A su vez se investigó sobre los tipos de
desarrollo web y las diferentes herramientas de desarrollo
Se hizo una previa investigación sobre diseño de interfaces gráficas, experiencia de usuario
(UX) y usabilidad.
55
Lo anterior se explica en el capítulo 2 del documento, titulado como marco teórico y se
desarrolla en el sub-capítulo de desarrollo de la solución.
4.1.5 Maquetación y diseño
En principio se desarrolló un boceto en Adobe Illustrator de las vistas que va a requerir la
aplicación y la plataforma web, los cuales poco a poco se fueron puliendo hasta que se
encuentra la herramienta llamada Balsamiq, un software que permite la maquetación de
mockups de una manera rápida y sencilla, a su vez ofrece herramientas para programar la
navegabilidad que va a tener la aplicación.
Ver anexo 2.
4.1.6 Etapa desarrollo para móvil
Inicialmente se plantea la posibilidad de realizar el desarrollo móvil nativo, es decir utilizar
Java y XML que ofrece Android Studio y Swift (XCode) para plataforma IOS, pero a medida
que se va indagando sobre el funcionamiento y requerimientos de estas plataformas, se
encuentra que para poder desarrollar en IOS, se debe adquirir una cuenta paga como
desarrollador y por consiguiente incluir la máquina en la cual se va a realizar el desarrollo, lo
cual dificulta el desarrollo ya que es más fácil tener acceso a un computador Windows que un
Mac, debido a que ningún desarrollador poseía este dispositivo y mucho menos una cuenta que
certifica que se es desarrollador en IOS.
56
Así que se decide contemplar más posibilidades de desarrollo frente a dispositivos móviles, y
es aquí cuando aparece el desarrollo multiplataforma, donde se plantea que el mismo desarrollo
funcione tanto en plataforma Android como en plataforma IOS sin presentar mayores
inconvenientes, es por eso que se elige a Ionic Framework para realizar el desarrollo, surgiendo
como una propuesta factible para suplir los recursos que demanda el proyecto.
Para el desarrollo de servicios web se optó por trabajar con la arquitectura REST ya que permite
un desarrollo accesible a cualquier programador por medio de los métodos HTTP, además se
utiliza esta arquitectura porque tanto como PHP como Ionic brindan funcionalidades propias
de esta arquitectura para el envío de estas solicitudes.
4.1.7 Etapa desarrollo plataforma web
Para el desarrollo de la plataforma web en cuanto al desarrollo frontend el cual se hace
referencia a la interfaz gráfica, se tomó la decisión de utilizar Bootstrap framework, ya que
después de la previa investigación se destacó como una herramienta eficiente y práctica a la
hora de gestionar su implementación.
Por otro lado se realizó una investigación para determinar qué herramienta ofrece una mejor
representación de datos estadísticos, el cual sea intuitivo para el usuario y entendible, es por
ello que se decide utilizar las librerías ChartJs y jquery.knob , las cuales son las que mejor
suplen estos requerimientos.
En cuanto al desarrollo backend de la plataforma web, fue desarrollado en base al patrón de
arquitectura MVC (Modelo-vista-controlador). Este patrón se implementó con el fin de poder
57
separar la lógica de negocio que conlleva la aplicación para que de esta manera se pudiera
optimizar el desarrollo y facilitar el mantenimiento o módulos adicionales que se requieran en
un futuro. El lenguaje base del desarrollo de la plataforma es PHP ya que permite desarrollar
aplicaciones web de una forma dinámica y ofrece fácil accesibilidad y manipulación de la base
de datos, que en este caso se utilizó MySQL como motor, donde se aloja la información que el
proyecto genera a partir de las solicitudes de los usuarios.
4.2 Desarrollo de la solución
4.2.1 Diseño
4.3.1.1 Filosofía del color
El color es uno de los factores fundamentales para el desarrollo visual de una aplicación ya que
este tiene una inmensa afinidad con las emociones de los usuarios. El primer impacto que
generan los colores es crucial en la relación aplicación-usuario ya que este puede ser positivo
o negativo y esto hace que a su vez nos ayude a distinguir lo que es importante y lo que no
[69].
Los colores elegidos para la aplicación son azul, rojo, blanco, negro y variaciones de grises. Se
parte de estos colores por la percepción que tienen ante los usuarios. El color azul es uno de
los colores que más confianza y seguridad dan a las personas. El color rojo genera sensación
de rapidez lo cual hace que este sea uno de los principales colores para esta aplicación, ya que
las personas lo identificarán de manera fácil y rápida. El color blanco y el color gris generan la
sensación de equilibrio para que los usuarios no se sientan aturdidos con la gama de colores.
58
Por último, el color negro le da el toque de sobriedad y alta tecnología que caracteriza a esta
aplicación [70].
4.3.1.2 Tipografía
La tipografía en el diseño de aplicaciones es un elemento fundamental ya que esta debe ser
clara y legible para los usuarios. La tipografía que se usará en el cuerpo de la aplicación móvil
será Cabin Regular, con base a las recomendaciones estudiadas también se aplicará un tamaño
de entre 11 y 17 puntos para los cuerpos de texto. Para la tipografía de los títulos se usó Rabbid
Highway SignII.
Estas dos tipografías, aunque siguen siendo de la familia sans serif tienen un toque de
modernidad incorporando, proporciones modernas, ajustes ópticos, y algunos elementos del
sans geométrico, los cuales generan una sensibilidad mayor para llamar la atención del usuario,
manteniendo la comodidad de la familia sans serif [71].
4.2.2 Levantamiento de requisitos
Para el desarrollo de esta sección se empleó el framework de ingeniería de requerimientos de
K. Pohl [72], para poder identificar y analizar las necesidades que se requieren para la
aplicación del proyecto, para luego así tener una base clara y consistente para la
implementación de este, por consiguiente se utiliza el método de priorización de requisitos por
Matriz de Wiggers el cual genera la prioridad que tiene cada requisito frente al proyecto, para
luego poder definir el orden del desarrollo.
Se anexa un documento únicamente con la lista de requisitos que fueron definidos por medio
del proceso anterior.
Ver Anexo 3.
59
Se anexa un documento donde se documenta el proceso anteriormente hablado, además de eso,
dentro del documento se evidencia el propósito, alcance, contexto del sistema (Sujetos-Usos-
Sistemas-Desarrollo), restricciones, tabla de requisitos priorizada, actores y casos de usos.
Ver Anexo 4.
4.2.3 Diseño de software
Posteriormente al levantamiento de requisitos se desarrolla el diseño detallado de software, el
cual genera los recursos técnicos faltantes para poder iniciar con la implementación, luego de
que todos los requisitos fueran validados con las necesidades del proyecto y poder así
estructurar el diseño del software para ser desarrollado.
A medida que se avanza en el proceso del diseño detallado de software, se generan los casos
de uso del proyecto, el cual hace una representación de la forma en la que interactúan los
usuarios con la aplicación, que dentro de este contexto son llamados “Actores”, cada actor
asume un rol dentro de la plataforma y se le asignan tareas (caso de uso), para luego así
especificar su relación con otros actores o incluso con otros casos de uso. Luego de haber
generado todos los posibles casos de uso, se ejemplifican los escenarios de casos de uso para
aquellas operaciones que son vitales en la aplicación, en estos escenarios se plantean
situaciones hipotéticas en las que el usuario se podrían ver envueltos, con el fin de detallar el
comportamiento del sistema en caso de que el resultado esperado sea exitoso (escenario
primario), o no sea el esperado (escenario secundario).
60
Después de haber documentado los escenarios de casos de uso más sobresalientes de la
aplicación, se generan las tarjetas CRC (Clase, Responsabilidad, Colaboradores), con ellas se
realiza un aproximamiento a las clases que se verán utilizadas en el desarrollo, dentro de cada
tarjeta se especifica el nombre de la clase y las responsabilidades de esta junto con los
colaboradores que incluyen.
Por último se genera un diagrama de clases, el cual por medio de una representación gráfica se
realiza un acercamiento a la estructura final del proyecto.
A medida que va avanzando el diseño detallado de software se logra re evaluar y adicionar
aspectos que no se habían tenido en cuenta al inicio del planteamiento del proyecto, lo que
proporcionó una revisión continua del documento para así pulir detalles y generar una
estructura correcta para su implementación.
Ver anexo 5.
4.2.4 Arquitectura
El proyecto se desarrolla con un patrón de diseño MVC (Modelo Vista Controlador), el cual
ofrece diversas ventajas para el desarrollo del proyecto como:
Dividir la lógica de negocio de la presentación de los datos, para hacer del proyecto más
escalable.
Uso de URL amigables.
Facilidad para crear nuevas vistas de representación del contenido.
Reutilización de componentes.
61
A la hora de realizar mantenimiento es muy simple, ya que las correcciones solo se hacen
en un solo lugar y no en varios.
Junto a este patrón de diseño se implementa POO (Programación orientada a Objetos) el cual
ayuda a mantener el código en un solo lugar, la lectura del código es más sencilla y ofrece una
característica por la cual se destaca que es la herencia, donde algunos objetos comparten
propiedades y métodos de otros, además de poder agregar nuevos a la misma vez [73], por lo
cual hace más efectivo y practico el desarrollo de este proyecto.
La conexión a la base de datos se manipula mediante la implementación de ORM (Objeto
Mapeo Relacional), donde se encuentra una base de datos relacional SQL y que mediante el
código se crean objetos que van conjunto a la estructuración que existe en las tablas de la base
de datos, cada atributo tiene un método especifico en la composición del objeto, el cual tiene
la función específica de consultar solo ese dato y obtener su valor. La gran ventaja que ofrece
ORM es la reutilización, permitiendo llamar a los métodos del objeto en cualquier parte del
proyecto o incluso desde otra aplicación [74].
Para la conexión entre aplicaciones se decide utilizar los servicios RESTfull, ya que ofrecen
una escalabilidad mayor, gracias a que los recursos se obtienen por medio de un estándar de
estados como lo son GET, POST, PUT y DELETE, el servicio se solicita en una url alojada en
el servidor y esta realiza una acción específica dependiendo del método o estado que se le
envíe, lo que hace que su mantenimiento sea también más eficiente.
En efecto toda la lógica de la aplicación tiene una estructura clara y concisa, y así mismo será
la representación de datos, para el aplicativo web se implementa Admin LTE, es un template
62
de administradores open source, se basa con HTMLy Bootstrab, el cual tiene muchos recursos,
pero lo que más cabe resaltar son sus componentes de estadística para la representación y
visualización de datos, por lo cual hace que sea una herramienta muy útil y llamativa para este
proyecto.
Aunque todo lo anterior se relaciona con el desarrollo del aplicativo web, ahora se va a
relacionar con la aplicación móvil, que, aunque usa el mismo patrón de diseño MVC, tiene
algunas diferencias muy significativas, ya que para ello se implementa Ionic framework, el cual
posee diversas herramientas tanto de diseño de prototipado, como la accesibilidad y facilidad
de generar aplicaciones multiplataforma de una manera ágil y sencilla.
El sistema de seguridad Alarmapp cuenta con un servidor web, el cual lo provee un hosting de
goDaddy, en este se encuentran 2 instancias, una para un entorno de producción y otra para un
entorno de pruebas de desarrollo; debido a que se desarrolla la primera versión del sistema de
seguridad Alarmapp, por lo tanto, se encuentran alojados la base de datos, los servicios web y
el backend del sistema de seguridad en la instancia de pruebas para posteriormente migrarlo a
producción.
4.2.5 Desarrollo multiplataforma con Ionic Framework
4.3.5.1 Diseño visual por medio de mockups
Uno de los procesos más intuitivos e importantes dentro del desarrollo de una aplicación móvil
es el diseño, ya que esta es la parte visual de la aplicación, lo primero que van a ver los usuarios
y será el puente para que el usuario haga uso de las funcionalidades de esta, es decir que un
mal diseño podrá generar ajustes en el desarrollo, o incluso la realización de nuevos desarrollos
63
futuros para suplir lo que se llama UX ( Experiencia de Usuario ), es tan importante y complejo
este tema, ya que un buen diseño y el propósito de este, es guiar al usuario por toda la aplicación
sin que este se pierda o necesite de un manual para entender su funcionamiento.
Hoy en día hay diversas tecnologías que ayudan a realizar el diseño de una página web o
aplicación móvil, pero muy pocas cuentan con la interactividad de esta, en la mayoría de los
casos se queda en un diseño simple y fijo, pero hay herramientas que permiten adicionar al
diseño la interactividad y es ahí donde nace el primer bosquejo de la aplicación relativamente
funcional, con ello se puede ver cómo se comportan los usuarios al usar la aplicación, sin que
estén implementadas las funcionalidades. La herramienta tecnológica que se usó es
“Balsamiq”, esta herramienta brinda la facilidad de crear Mockups de una manera rápida y
sencilla, con la ventaja de que podemos hacer interactivos estos diseños comunicando uno con
otro, como si en verdad estuviera funcionando. A continuación se muestra uno de los diseños
del prototipo de la aplicación móvil:
Figura 19, Mockups desarrollados en Balsamiq.
64
Ver anexo 2.
4.3.5.2 Desarrollo con Ionic
Utilizando la herramienta Ionic Creator, ofrece la ventaja de exportar un proyecto base con el
código ya implementado, de todas las vistas que se crearon desde la interfaz de este, lo que
hace que sea mucho más fácil iniciar con el proyecto y empezar a modificarlo para las
necesidades de la aplicación. Además de esto Ionic y Angular ofrecen un contenedor nativo, lo
cual permite simular y manipular eventos de funciones propias de dispositivos móviles.
Figura 20, Maquetación de vista desde la interfaz de Ionic Creator.
Ya que Ionic se basa en AngularJs, es muy fácil definir y estructurar componentes de HTML
para ser manipulados según la necesidad, todo esto mediante controladores, los cuales se
encargan de definir la lógica y el comportamiento de los elementos HTML para ser
dinamizados mediante JavaScript. Cada controlador es el encargado de consumir los servicios
pertinentes que proporciona el sistema para que sean visualizados mediante la interfaz.
65
Luego de exportar el código desde Ionic Creator, se modificó la estructuración de carpetas que
aunque se sigue respetando el patrón MVC, se implementó un orden por componentes, donde
dentro de cada componente se encuentra alojado el controlador hecho en JavaScript, el archivo
de diseño CSS y la vista en HTML; esto con el fin de hacer que el proyecto sea más entendible
para que en un futuro algún desarrollador que desee hacer un ajuste no tenga que buscar un
archivo entre un sinfín de carpetas, solamente debe buscar el modulo que quiere ajustar, y allí
encontrara todo lo necesario para manipularlo, lo que hace que cada módulo sea independiente
y más ordenado. Así mismo si lo que se busca es crear una nueva sección en la aplicación
móvil, simplemente es crear una carpeta con el nombre de la sección y alojar todos los archivos
que estén directamente implicados sin necesidad de tocar los demás componentes. Otro factor
muy importante por lo cual se decide implementar este orden por componentes es que al
momento de desarrollar se hace mucho más cómodo el trabajo en equipo, ya que como cada
módulo es independiente, el trabajo simultaneo es mucho más ágil y no habrá conflictos entre
desarrolladores por programar en el mismo archivo, lo que hace más intuitivo el control de
versiones del proyecto.
Figura 21, Organización por componentes con Ionic Framework.
4.3.5.3 Requisitos del dispositivo móvil
Los requisitos mínimos para que la aplicación móvil funcione sin despreciar la experiencia
del usuario son:
66
Android IOS
Versión mínima 2.3.3 IOS 9
Espacio disponible mínimo 7Mb 7Mb
Minutos a celular Opcional Opcional
Plan de datos Si ( preferencia 3G o 4G ) Si ( preferencia 3G o 4G )
4.2.6 Desarrollo web
El desarrollo de la plataforma web se apoyó mediante la implementación del panel
administrativo Admin LTE, el cual brinda los recursos básicos y suficientes para suplir las
necesidades del proyecto, además brinda un diseño responsivo de todos sus elementos lo cual
hace que sea una herramienta muy llamativa y de fácil acceso para los usuarios.
La plataforma web cuenta con diferentes tipos de estadísticas, dirigidas tanto a los usuarios
como a los entes gubernamentales como por ejemplo la policía, generando datos de importancia
para el mejoramiento de la seguridad en la ciudad.
Figura 22, Plataforma web de estadísticas.
67
Para el desarrollo de estas estadísticas se usaron dos librerías llamadas “Chart.js” y
“jquery.knob”, librerías para generar diferentes tipos de graficas a partir de registros en la base
de datos. Las estadísticas que se realizaron fueron divididas en estadísticas por comunidad y
estadísticas generales, en las que se encuentran:
Estadísticas por comunidad:
Tipo de alarmas y el número de veces activadas:
En este informe se realizaron dos gráficas, una de ellas es el diagrama de barras y la
otra es la gráfica “dona” o “anillo”.
Figura 23, diagrama de barras y diagrama anillo o dona, número de veces activadas
cada tipo de alarma.
Ambas graficas generadas con la librería “chart.js”, para su desarrollo, se obtienen los
datos de cuantas veces fue activada cada alarma para su respectiva comunidad por
medio de una consulta a la base de datos realizada desde el backend, posteriormente
con estos datos se construye la estructura requerida por la librería para la creación, dicha
estructura se basa en un objeto JSON que contiene dos arreglos, un arreglo de datos
denominado “labels”, los cuales serán los tipos de alarmas y otro arreglo de datos
68
denominado “datasets”, en el cual llevará objetos JSON, definiendo por medio de sus
atributos, los colores y los datos referente al número de veces que se activó cada tipo
de emergencia.
Figura 24, Estructura de datos para la librería “chart.js”.
Usuarios inscritos a la comunidad (Administradores, comunes):
Para este informe se generaron dos gráficas, las cuales nos muestra en una el número
de administradores de la comunidad y en la otra el número de usuarios comunes
inscritos a ella.
69
Figura 25, Grafica de números de usuarios administradores y comunes, usando la
librería “jquery.knob”.
Se crean las gráficas usando la librería “jquery.knob”, para esta se construye la
maquetación en HTML el cual consta de la etiqueta “input”, en este se setea el valor
correspondiente al número de usuarios (ya sean administradores o comunes), el cual se
extrajo previamente de la base de datos, luego la librería toma este valor y “dibuja” el
grafico en la maquetación previamente hecha.
Figura 26, Maquetación HTML para funcionamiento de la librería “jquery.knob”.
Entidad más requerida:
Para este informe se realiza una gráfica similar a la del anterior informe, en la cual se
representa el número de veces que fue solicitada la entidad y el nombre respectivo de
la entidad gubernamental. Se genera mediante la librería “jquery.knob” basándose en
la estructura HTML mostrada en la figura 25. Obteniendo los datos de parte del
backend, tanto el nombre de la entidad como el número de veces que se solicitó.
Figura 27, Grafica representando la entidad más requerida y el número de veces que
se solicitó.
70
Estadísticas globales:
Comunidad con más usuarios
Este informe se genera por medio de la librería “jquery.knob”, en el que a través del
backend se realiza una consulta a la base de datos, en la cual se extrae el conteo de
usuarios por comunidad y luego del conteo realizar la comparación entre comunidades
y sacar el mayor conteo de usuarios, enviándole al frontend el número total de usuarios
y el nombre de la comunidad respectiva al conteo de usuarios, desde el frontend se
setean los datos en el valor de un “input” para posteriormente ser tomados mediante la
librería y esta generar el grafico.
Figura 28, Grafica mostrando la comunidad con el mayor número de usuarios
inscritos.
Comunidad con más emergencias
Para generar esta grafica se realiza una consulta a la base de datos para realizar la
comparación entre comunidades, sobre la cantidad de emergencias activadas por los
usuarios en cada una y extraer la comunidad con el mayor número de emergencias, para
la renderización de la graficas se usa la librería “jquery.knob” basándose en la estructura
mencionada anteriormente para luego ser graficada la información a través de la
librería.
71
Figura 29, Grafica representando la comunidad con mayor número de emergencias
activadas.
Entidad más requerida (Total en la ciudad)
En esta grafica se observa cual es la entidad más solicitada a nivel de ciudad, mostrando
el nombre de la entidad y la cantidad de veces que los usuarios de la ciudad la
solicitaron.
Figura 30, Grafica representando la entidad más requerida por los usuarios a nivel de
ciudad.
La anterior grafica se genera mediante la estructura requerida por la librería
“jquery.knob”, haciendo uso de los datos enviados desde el backend del sitio.
Porcentaje de género que usa la aplicación
Para esta representación gráfica se utiliza la librería “chart.js”, en la cual a través de un
diagrama de anillo (o dona), se muestran los valores correspondientes al porcentaje de
usuarios de género masculino y femenino registrados en alarmapp.
72
Figura 31, Grafica de anillo (o dona) representando en porcentaje el género de los
usuarios de alarmapp.
Tipo de alarmas y el número de veces activadas:
Para este informe se realiza desde el backend una consulta a la base de datos para
obtener el total de veces que fue activada cada tipo de alarma, realizando un conteo por
cada una en cada comunidad y luego ser enviado al frontend, en este se construye la
estructura de datos requerida por la librería “chart.js” presentada a continuación.
73
Figura 32, Estructura de datos para generar diagrama de barras mediante la librería
“chart.js”.
Obteniendo como resultado la siguiente representación gráfica.
Figura 33, Diagrama de barras de tipos de emergencias y número de veces de
activación.
74
Además de la sección de estadísticas se encuentra la sección de administración de solicitudes,
donde se crean sesiones con PHP para validar el ingreso de los administradores y así poder
aceptar o rechazar las solicitudes, todo esto mediante AJAX que lo procesa asíncronamente lo
cual genera mayor rapidez en la aplicación, así mismo se crean validaciones mediante PHP
para validar que el usuario ya haya iniciado sesión, de lo contrario lo lleve al inicio de sesión,
pero únicamente desde la sección de solicitudes, ya que las estadísticas son de dominio público
y no es necesario iniciar sesión para poder visualizarlas.
Según lo anterior da paso que las estadísticas y la administración de solicitudes actúen de forma
independiente aunque estén dentro de la misma aplicación, por lo cual se decide crear una
página de inicio la cual muestre las características principales del proyecto y las respectivas
redirecciones hacia las estadísticas y el inicio de sesión del administrador, para ello se decide
utilizar WordPress, porque es una herramienta más versátil, cómoda y rápida para la
manipulación del diseño de la página web la cual es una “onepage”, donde no tiene más
subpáginas dentro de la misma, sino que por el contrario, en la página principal se muestra todo
el contenido, además es una página web netamente informativa y no posee ninguna lógica, un
motivo más por el cual se decide usar WordPress y no incluirlo en el MVC.
Figura 34, Onepage de Alarmapp.
75
4.2.7 Integración de tecnologías
En esta etapa se procede a integrar la base de datos de Alarmapp, la cual se ha alimentado a
través de la aplicación móvil, integrar los servicios web, los cuales fueron previamente
realizados y alojados en el servidor y la integración del hardware, el cual llevará a cabo la
activación de la alarma comunitaria. Para esto se decide utilizar componentes de hardware
como lo son un Arduino uno, una Raspberry pi, una sirena de 110V y un relé de 5V.
Figura 35, Raspberry pi [76].
Figura 36, Arduino uno [77].
76
Figura 37, Relé 5V [78].
Figura 38, Sirena 110V [79].
La Raspberry se configuró montando el sistema operativo Raspbian Jessie, luego de esta
instalación se procede a realizar la configuración de la red wifi a través de la misma interfaz.
Ya una vez configurada la Raspberry, se desarrolla un script en el lenguaje de programación
Python 2.4.3, este script realizará la petición GET HTTP al servicio web, al que se le envían 2
77
parámetros, el primero con el ID de la comunidad y el segundo la Key para la autenticación y
poder hacer uso del servicio, el servicio realizado en el lenguaje de programación PHP realizará
una consulta a la base de datos obteniendo el valor del campo “alarmaActiva” en la tabla
“Comuna”, retornando un objeto en formato JSON con una posibilidad de valor entre 1, que
significa que la alarma en la comunidad ha sido activada ó 0, que significa que la alarma ha
sido desactivada, esta petición se realiza cada 3 segundos dentro de un Loop de 20 iteraciones
logrando un total de 1 minuto ejecutando este servicio. Debido a que esta petición se debe
ejecutar siempre para estar “escuchando” el valor desde la Raspberry en todo momento, se
programa una tarea mediante el comando “Crontab”, este es un comando de Linux para
programar ejecución de tareas o programas cada determinado tiempo, el cual ejecutará el script
desarrollado en Python cada 1 minuto. Esto con el fin de no generar un colapso o sobrecarga
en la memoria de la Raspberry pi, ya que es un efecto muy común de un “bucle” o “ciclo”
infinito, con este comando nos aseguramos que el script se ejecute por 1 minuto, finalice y se
ejecute uno nuevo, a su vez llevando un registro en un archivo de texto plano con el fin de
poder identificar si hubo un error en la ejecución del script o si se está llevando a cabo
correctamente.
Luego de obtener el valor retornado por el servicio, se envía por medio del pin GPIO 23 de la
Raspberry pi un “True” si el valor es 1, o un “False” si el valor es 0, este pin va conectado al
pin digital 12 del Arduino, el cual toma este valor y lo interpreta como un 1 o un 0. Desde el
editor de Arduino se desarrolla un programa en el cual se valida el dato que entra por el pin
digital 12, si el valor es un 1 se envía por medio del pin 13 del Arduino una serie de “High” y
“Low” intercaladas por 1 segundo de delay (generando el sonido de una sirena), pero si el valor
es 0 no se envía nada por el pin 13. Este pin va conectado al relé, ya que éste hace de puente
entre el Arduino y la sirena debido a la diferencia de voltaje en la que cada uno trabaja, la sirena
78
con 110V y el arduino a 5V, si se conectará de manera directa se correría el riesgo de quemar
tanto el Arduino como la Raspberry.
Figura 39, Estructura de funcionamiento del sistema.
79
4.2.8 Costos estimados
Costo del sistema de seguridad (Alarmapp)
Componentes Valor (x unidad)
Arduino Uno $30.000
Raspberry Pi 1 $190.000
Modulo Relé 5V $7.000
Sirena 110V $50.000
Cables dupont $6.000
Instalación del sistema
(por número de sirenas que
se vayan a instalar)
$170.000
Mantenimiento $100.000
Total $553.000
80
Capítulo 5
Perspectiva del proyecto desde la ingeniería multimedia
La ingeniería multimedia comprende muchos campos, los cuales van desde el dibujo y diseño,
hasta las matemáticas, todos con la misma importancia y exigencia, perfilando al ingeniero a
la excelencia, este proyecto es claro ejemplo de ello, ya que ejemplifica muchas de las materias
dispuestas a lo largo del plan de estudio.
Las bases para el diseño brindadas en diseño para medios digitales, dibujo para la ingeniería,
taller de animación 2D, taller de video y fotografía, brindaron las bases suficientes para dar con
la solución a un diseño óptimo y entendible para el usuario.
En cuanto al desarrollo de la conectividad del hardware, materias como circuitos digitales y
redes multimedia ofrecen las bases y conocimientos para poder suplir estos requerimientos o
así inferir soluciones más avanzadas.
Materias como proyecto integrador, diseño de sistemas multimedia, catedra de emprendimiento
y la electiva de profundización 3 con énfasis en Web, son los pilares para obtener los
requerimientos, el cronograma y dar soluciones a diferentes variantes que se den a lo largo del
proyecto, para poder afrontarlas correctamente sin afectar por completo el mismo.
Por último y no menos importante, los módulos de ciencias básicas, programación, redes y
profundización, solventan las bases para crear la lógica de negocio necesaria y la solución de
la misma para que el proyecto sea escalable, fácil de comprender y funcional.
81
Capítulo 6
Pruebas y análisis de resultados
Para las pruebas de usuario se decidió seleccionar una comunidad de la ciudad de Cali, la cual
se encuentra en el barrio “El refugio”, donde se realizó una presentación de todo el proyecto
en cuanto a lo que concierne al funcionamiento y la usabilidad, como primera instancia se
implementó una versión exportable del celular para cada uno de los usuarios finales, los cuales
valoraron el proyecto después de hacer las pruebas pertinentes.
Luego de explicar detalladamente las funcionalidades de la aplicación móvil y validar la
implementación con una alarma convencional, se procede a mostrar la página web,
visualizando las estadísticas que se generaron mediante la prueba del proyecto en la comunidad
Posteriormente se realiza una encuesta para evaluar: usabilidad, contenidos y rendimiento,
donde hasta el momento se encuentran 76 respuestas las cuales, anteriormente probaron la
aplicación. A continuación se evidencian los resultados obtenidos por la encuesta:
82
Figura 40, Respuesta pregunta 1. ¿Los botones de acceso e iconos lo redirigen al lugar que
esperaba?
Figura 41, Respuesta pregunta 2. ¿La navegación de la aplicación es sencilla en intuitiva?
83
Figura 42, Respuesta pregunta 3. ¿Fue fácil identificar el momento y el motivo de la
activación de una nueva emergencia?
Figura 43, Respuesta pregunta 4. ¿Considera que la información presentada de la emergencia
es de utilidad en el momento?
84
Figura 44, Respuesta pregunta 5. ¿La forma en la que se presentan los contenidos es clara y
concisa?
Figura 45, Respuesta pregunta 6. ¿Considera que la implementación de esta aplicación
mejoraría la seguridad en la comunidad que reside?
85
Figura 46, Respuesta pregunta 7. ¿Cómo clasificaría el rendimiento de la aplicación en
cuanto a velocidad?
Figura 47, Respuesta pregunta 8. ¿Con que frecuencia se bloquea el funcionamiento de la
aplicación?
86
Figura 48, Respuesta pregunta 9. ¿Está usted satisfecho con el rendimiento de la aplicación?
Figura 49, Respuesta pregunta 10. ¿Recomendaría esta aplicación a sus conocidos?
Dentro de la encuesta se adiciono una pregunta abierta la cual es: ¿Qué recomendaciones haría
para mejorar la aplicación? La mayoría de las respuestas coinciden en hacer una
implementación en toda la ciudad y hacer más difusión para generar más impacto en los
usuarios.
87
Capítulo 7
Conclusiones y trabajo futuro
7.1 Conclusiones
1. El proceso de levantamiento de requisitos es una parte fundamental en el desarrollo de
este tipo de proyectos ya que estos tienen como objetivo identificar y analizar las
necesidades que se requieren para la aplicación del mismo, y así tener una idea clara y
concisa del orden de desarrollo partiendo de una previa priorización de requisitos
mediante una Matriz de Wiggers.
2. Antes de codificar el prototipo, resulta muy útil realizar los Mockups para así tener una
idea clara de su maquetación, navegación y comportamiento de la aplicación, por lo
cual la herramienta Balsamiq es muy favorable para este ejercicio ya que brinda
diversidad de componentes de diseño y tiene la opción de navegación entre Mockups,
lo que hace que sea una herramienta muy llamativa, permitiendo tener a la mano una
aproximación visual del producto de forma rápida y presentable.
3. Ionic framework ofrece una versatilidad más que todo para los desarrolladores Web ya
que se basa en AngularJS, HTML, CSS, JavaScript, que son las herramientas más
frecuentes en el desarrollo de aplicativos web, abriendo paso así una nueva forma para
el desarrollo móvil.
4. En cuanto al diseño, Ionic ofrece una herramienta la cual es muy intuitiva y practica
que es Ionic Creator, con la gran ventaja de que la maquetación es exportable en código,
y a su vez a la hora de personalizar la aplicación en cuanto a diseños, iconos, tipografías
88
es más ágil debido a que todo se maneja mediante fuentes de estilo CSS, lo cual lo hace
más cómodo y práctico para su desarrollo.
5. La organización por componentes en Ionic es muy importante ya que permite
independencia en cada una de sus vistas, fomentando un mejor trabajo en equipo
simultáneo por parte de los desarrolladores, y siendo más ágil su mantenimiento.
6. Aunque Ionic ofrece muchas ventajas para el desarrollo móvil multiplataforma y su
documentación es muy robusta, se encuentra en desventaja frente al desarrollo nativo,
ya que no cuenta con el mismo uso de los recursos del dispositivo móvil y la velocidad
de respuesta es menor para este tipo de desarrollo.
7. Trabajar con el patrón de diseño MVC para la plataforma web, permite separar la lógica
de las vistas, haciendo de esto un proyecto escalable y de fácil mantenimiento,
facilitando la implementación de los servicios RESTfull, para ser consumidos por la
aplicación móvil.
8. El desarrollo backend basado en servicios web es de gran utilidad ya que permite una
excelente modularización de los recursos, para ser consumidos tanto en la web como
en el aplicativo móvil.
9. El uso de sesiones mediante PHP permite tener una manipulación más personalizada
por parte de los usuarios.
10. Por medio de las estadísticas se puede concientizar a la ciudad y así mismo a las
entidades gubernamentales acerca de las comunidades que requieren más atención.
11. Fue claro y entendible para el usuario el botón principal para accionar emergencias
principales, gracias a su tamaño y color representando importancia en la interfaz.
12. A la hora de activar una emergencia, fue fácil para el usuario identificar cuáles eran las
principales y cuales eran las informativas, debido a su color y posición en la interfaz.
89
13. La opción en el historial de ver el detalle de la emergencia activada, es de gran
importancia ya que permite aclarar la clase de evento que se está reportando, el lugar,
la hora y la entidad a la que se le informo.
14. La implementación del mapa de google maps, fue bastante importante para que el
usuario logrará identificar brevemente cuál es su comunidad, sin necesidad de saber el
nombre.
15. El logo es claro y representativo con el fin que tiene la aplicación, ya que cuenta con
una sirena y una comunidad dentro de ella, haciendo alusión a una comunidad
completamente informada de los eventos que suceden en su sector.
16. El uso de la plataforma web es de fácil acceso, como también muy claro en sus
conceptos, permitiendo su funcionalidad en una forma segura y rápida.
17. Es de gran utilidad los datos representados en la plataforma web, ya que les sirve a los
ciudadanos para llevar un seguimiento detallado sobre cómo está la seguridad no solo
en su comunidad sino también en la ciudad.
18. Fue esencial el uso de la alarma comunitaria para notificar una emergencia de acción
rápida, ya que no siempre los usuarios tienen su celular a la mano y al escuchar la sirena
cuenta con la opción de tomar su celular y enterarse de que está sucediendo.
19. El sistema de seguridad Alarmapp, tuvo una gran aceptación por parte de los habitantes
de la comunidad del refugio, ya que ellos cuentan actualmente con un sistema de
alarmas comunitarias, pero con el problema de no saber que sucede cuando una se
activa, por lo cual vieron muy viable el desarrollo de este proyecto y a su vez poderlo
implementar en su sistema actual, basado en las ventajas que se están ofreciendo y las
pruebas realizadas por ellos en su comunidad con Alarmapp.
20. La primera versión del sistema de seguridad Alarmapp, resulta más económico frente a
otros sistemas de seguridad utilizados actualmente.
90
7.2 Trabajo a futuro
Como a trabajo a futuro se espera:
1. Implementar la aplicación para dispositivos IOS ya que para este se necesita de unos
certificados de desarrollador y dispositivos Apple.
2. Expandir los tipos de alarmas para poder cubrir más emergencias y así mismo
involucrar a más entidades gubernamentales como por ejemplo: transito, cruz roja,
oficina de desastres, Emcali, entre otras.
3. Aumentar el número de comunidades registradas, para poder ejercer un mayor control
en la seguridad de la ciudad de Cali.
4. Proveer más información en el detalle de la emergencia como por ejemplo: permitir
notas de voz, imágenes, ubicación exacta del usuario que activo la alarma.
5. Enviar por correo electrónico la información de las alarmas de la comuna a la cual está
registrado.
6. Enviar reportes semanales a los usuarios de las estadísticas que genera la aplicación a
partir de la actividad de los mismos.
7. Permitirle al administrador de la comunidad confirmar si la alarma que se activa es un
falso positivo y verificar su veracidad, así mismo calificar el tiempo de respuesta de los
entes gubernamentales implicados.
8. Minificar los archivos y optimizar los recursos para que el Apk sea de menor tamaño.
9. Representar estadísticas semanalmente por orden de hora, para obtener una hora pico
donde se presentan más alarmas en la ciudad.
10. Permitirle al administrador poder desvincular usuarios de su comunidad.
11. Incluir el manejo de cámaras de seguridad en la aplicación.
12. Enviar notas de voz, imágenes y videos en el envío de una alarma.
91
Referencias
[1]D. Z. D. Landeros, "La evolución tecnológica realizada por y para el hombre," in Business,
GestioPolis - Conocimiento en Negocios, 2014. [Online]. Available:
http://www.gestiopolis.com/la-evolucion-tecnologica-realizada-por-y-para-el-hombre/.
Accessed: Nov. 7, 2016.
[2]"El uso de apps móviles aumentó un 58% durante 2015," in Aplicaciones móviles, PURO
MARKETING. [Online]. Available: http://www.puromarketing.com/96/26113/uso-apps-
moviles-aumento-durante.html. Accessed: Nov. 7, 2016.
[3]"En 2016 habrá dos mil millones de usuarios de smartphones en el mundo," Clases de
Periodismo, 2014. [Online]. Available: http://www.clasesdeperiodismo.com/2014/12/23/en-
2016-habra-dos-mil-millones-de-usuarios-de-smartphones-en-el-mundo/. Accessed: Nov. 8,
2016.
[4]R. E. TIEMPO and C. E. E. Tiempo, "El 70 % del mundo tendrá un dispositivo móvil en el
2020 - Novedades tecnología," EL TIEMPO, 2016. [Online]. Available:
http://www.eltiempo.com/tecnosfera/novedades-tecnologia/crecimiento-del-uso-de-celulares-
en-el-mundo/16500742. Accessed: Nov. 8, 2016.
[5]"Acerca Del MinTIC,” [Online]. Available: http://www.mintic.gov.co/portal/604/w3-
propertyvalue-540.html. Accessed: Nov. 8, 2016.
[6]"Alcaldía de Santiago de Cali," 2016. [Online]. Available:
http://www.cali.gov.co/loader.php?lServicio=FAQ&lFuncion=viewPreguntas&id=76#a397.
Accessed: Nov. 8, 2016.
[7]T. los derechos reservados, "Alarmas Comunitarias," Seguridad Vecinal, 2015. [Online].
Available: http://www.seguridadvecinal.cl/alarmas-comunitarias/. Accessed: Nov. 8, 2016.
92
[8]"SEGURIDAD Y CONVIVENCIA EN CALI," SEGURIDAD Y CONVIVENCIA EN CALI,
2016. [Online]. Available:
http://media.wix.com/ugd/ba6905_9b95d85d0a4049e88ac3b4c63629cdb0.pdf. Accessed:
Nov. 8, 2016.
[9]C. J. Holguín, Proposiciones No. 08 y 019 de marzo 12 de 2013. Radicado no
2013416100002671. [Online]. Available:
http://www.concejodecali.gov.co/descargar.php?idFile=10145. Accessed: Nov. 8, 2016.
[10]"Población de Cali aumenta anualmente en 25.000 habitantes," 2016. [Online]. Available:
http://www.cali.gov.co/publicaciones/poblacion_de_cali_aumenta_anualmente_en_habitantes
_pub. Accessed: Nov. 8, 2016.
[11]S. User, "SISTEMAS DE ALARMAS COMUNITARIAS," 2015. [Online]. Available:
http://www.seguridadpercol.com/alarmas/sistemas-de-alarmas-comunitarias.html. Accessed:
Nov. 8, 2016.
[12]"Seleccionada idea TIC que busca mejorar la seguridad en Cali,". [Online]. Available:
http://www.mintic.gov.co/portal/604/w3-article-13505.html. Accessed: Nov. 8, 2016.
[13]S. O. García, "Explicando que es front-end y que es back-end," in Desarrollo Web,
FalconMasters, 2014. [Online]. Available: http://www.falconmasters.com/web-design/que-es-
front-end-y-que-es-back-end/. Accessed: Nov. 8, 2016.
[14]E. Duarte, "INICIO," in TECNOLOGÍA DE LA INFORMACIÓN, Información práctica
sobre Redes, Linux, Seguridad y Hacking para profesionales de TI. Capacity Academy, 2013.
[Online]. Available: http://blog.capacityacademy.com/2013/03/16/jquery-que-es-origenes-
ventajas-desventajas/. Accessed: Nov. 8, 2016.
[15]2016, "AngularJS — Superheroic JavaScript MVW framework,” [Online]. Available:
https://angularjs.org/. Accessed: Nov. 8, 2016.
93
[16]A. Basalo, M. A. Alvarez, and DesarrolloW, "Qué es AngularJS," DesarrolloWeb.com,
2016. [Online]. Available: http://www.desarrolloweb.com/articulos/que-es-angularjs-
descripcion-framework-javascript-conceptos.html. Accessed: Nov. 8, 2016.
[17]I. A. Díaz, "¿Que es frontEnd Y Backend en la programación web?,". [Online]. Available:
http://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-web/. Accessed:
Nov. 8, 2016.
[18] ingeniods, "Patrones Arquitectónicos," Ingenio DS, 2013. [Online]. Available:
https://ingeniods.wordpress.com/2013/09/16/patrones-arquitectonicos/. Accessed: Nov. 8,
2016.
[19]Y. F. Romero and Y. D. González, "Patrón Modelo-Vista-Controlador," Revista
Telem@tica, vol. 11, no. 1, pp. 47–57, 2012. [Online]. Available:
http://revistatelematica.cujae.edu.cu/index.php/tele/article/viewFile/15/10. Accessed: Nov. 8,
2016.
[20]"MVC architecture - Google chrome," Google+Add us on. [Online]. Available:
https://developer.chrome.com/apps/app_frameworks. Accessed: Nov. 8, 2016.
[21] ingeniods, "Arquitectura dirigida por eventos," 2008. [Online]. Available:
https://ingeniods.wordpress.com/tag/arquitectura-dirigida-por-eventos/. Accessed: Nov. 8,
2016.
[22]M. A. Rodríguez, "SOA vs. SOAP y REST," 2016. [Online]. Available:
https://www.adictosaltrabajo.com/tutoriales/soavs-soap-rest/. Accessed: Nov. 8, 2016.
[23]IncArcitura™Education, "The Prentice hall service technology series from Thomas Erl,"
Service Tech Books - The Prentice Hall Service Technology Series from Thomas Erl. [Online].
Available: http://servicetechbooks.com/psd. Accessed: Nov. 8, 2016.
[24]Sesión 1: Introducción al desarrollo de aplicaciones móviles APLICACIONES MÓVILES
NATIVAS. [Online]. Available:
94
http://moodle2.unid.edu.mx/dts_cursos_mdl/pos/TI/MN/S01/MN01_Visual.pdf. Accessed:
Nov. 8, 2016.
[25]A. Asier, "Desarrollo de aplicaciones móviles multiplataforma," Asier Marqués, 2015.
[Online]. Available: http://asiermarques.com/2015/desarrollo-aplicaciones-multiplataforma/.
Accessed: Nov. 8, 2016.
[26]"Diferencias entre Apps Nativas y Híbridas | next university," in Blog, Next U, 2016.
[Online]. Available: https://www.nextuniversity.com/blog/apps-nativas-vs-apps-hibridas/.
Accessed: Nov. 8, 2016.
[27]"Conoce Android studio,” [Online]. Available:
https://developer.android.com/studio/intro/index.html?hl=es-419. Accessed: Nov. 8, 2016.
[28]A. Inc, "Xcode 8," 2016. [Online]. Available: https://developer.apple.com/xcode/.
Accessed: Nov. 8, 2016.
[29] raona, "¿App nativa, web o híbrida?," 2013. [Online]. Available:
http://www.raona.com/es/Solutions/Template/163/App-nativa-web-o-h%C3%ADbrida-.
Accessed: Nov. 8, 2016.
[30]G. A. libre, "¿Qué es una aplicación web?," 1998. [Online]. Available:
https://www.gcfaprendelibre.org/tecnologia/curso/informatica_basica/aplicaciones_web_y_to
do_acerca_de_la_nube/1.do. Accessed: Nov. 8, 2016.
[31]LanceTalent, "Los 3 tipos de aplicaciones móviles: Ventajas e inconvenientes," in Crea tu
APP, LanceTalent, 2014. [Online]. Available: https://www.lancetalent.com/blog/tipos-de-
aplicaciones-moviles-ventajas-inconvenientes/. Accessed: Nov. 8, 2016.
[32]"¿Sabes qué es Phonegap y Phonegap build?," 2014. [Online]. Available:
https://deideaaapp.org/sabes-que-es-phonegap-y-phonegap-build/. Accessed: Nov. 8, 2016.
[33]Drifty, "Build amazing native Apps and progressive web Apps with ionic framework and
angular," 2013. [Online]. Available: http://ionicframework.com/. Accessed: Nov. 8, 2016.
95
[34]"Diseño de interfaces de Usuario," 1998. [Online]. Available:
https://www.ecured.cu/Dise%C3%B1o_de_Interfaces_de_Usuario. Accessed: Nov. 8, 2016.
[35]M. gomezsebastian, "Diseño de interfaces de Usuario,". [Online]. Available:
http://www.monografias.com/trabajos10/diusuar/diusuar.shtml. Accessed: Nov. 8, 2016.
[36]V. M. Gómez, "El diseño de la interfaz: Diseño de Páginas web," 2015. [Online].
Available: http://www.lawebera.es/diseno-web/el-diseno-de-la-interfaz.php#. Accessed: Nov.
8, 2016.
[37]C. L. Lapuente, M. J. L. Lapuente, and U. C. de Madrid, "Diseño de una página web,"
Lamarca Lapuente, 1997. [Online]. Available:
http://www.hipertexto.info/documentos/diseg_web.htm. Accessed: Nov. 8, 2016.
[38]A. P. Group, "Tipos de diseños web: Fijo, fluido o líquido, elástico y sensible," in Art
Project Group, Art Project Group, 2012. [Online]. Available: http://artprojectgroup.es/tipos-
de-disenos-web-fijo-fluido-o-liquido-elastico-y-sensible. Accessed: Nov. 8, 2016.
[39]"Diferencias entre el diseño web adaptativo y responsive," in Marketing móvil, PURO
MARKETING. [Online]. Available: http://www.puromarketing.com/21/18837/entre-diseno-
adaptativo-responsive.html. Accessed: Nov. 8, 2016.
[40]"Diseño Web adaptable," 2014. [Online]. Available:
https://developers.google.com/webmasters/mobile-sites/mobile-
seo/configurations/responsive-design?hl=es-419. Accessed: Nov. 8, 2016.
[41]R. Breheny, E. Jung, and M. Zürrer, "Responsive design – harnessing the power of media
queries," Official Google Webmaster Central Blog, 2012. [Online]. Available:
https://webmasters.googleblog.com/2012/04/responsive-design-harnessing-power-of.html.
Accessed: Nov. 8, 2016.
96
[42]D. Landi, "Capítulo 8: Diseño visual – Diseñando apps para móviles," Diseñando apps para
móviles, 2013. [Online]. Available: http://appdesignbook.com/es/contenidos/diseno-visual-
apps-nativas/. Accessed: Nov. 8, 2016.
[43]L. BJ, "Capítulo 7: Interacción y patrones – Diseñando apps para móviles," Diseñando
apps para móviles, 2013. [Online]. Available:
http://appdesignbook.com/es/contenidos/patrones-interaccion-moviles/. Accessed: Nov. 8,
2016.
[44]J. García, "Qué es el flat design o Diseño Plano," in Diseño y Desarrollo Web,
Departamento de Internet, 2013. [Online]. Available:
http://www.departamentodeinternet.com/que-es-flat-design-diseno-plano/. Accessed: Nov. 8,
2016.
[45]E. Pérez, "¿Qué es material design?," in Artículos de opinión, El Androide Libre, 2014.
[Online]. Available: http://www.elandroidelibre.com/2014/11/que-es-material-design.html.
Accessed: Nov. 8, 2016.
[46]M. M. License, "About - materialize," 2014. [Online]. Available:
http://materializecss.com/about.html. Accessed: Nov. 8, 2016.
[47]S. Grande, "Visualización de datos: 10 potentes herramientas que debes conocer," e-
interactive, 2014. [Online]. Available: http://www.e-interactive.es/blog/visualizacion-de-
datos-10-potentes-herramientas-que-debes-conocer/#axzz3Y0lZKhPk. Accessed: Nov. 24,
2016.
[48] Chart JS. (2017). Chartjs.org. Retrieved 19 April 2017, from http://www.chartjs.org/
[49]"Using Google charts," Google Developers, 2015. [Online]. Available:
https://developers.google.com/chart/interactive/docs/. Accessed: Nov. 8, 2016.
[50]"About - Google maps,” [Online]. Available: https://www.google.com/maps/about/.
Accessed: Nov. 8, 2016.
97
[51]"Buscar o introducir la latitud y la longitud - Ordenador - Ayuda de Google maps," 2016.
[Online]. Available:
https://support.google.com/maps/answer/18539?hl=es&topic=1687353&ctx=topic&visit_id=
1-636110179010712113-2549717962&rd=1. Accessed: Nov. 8, 2016.
[52]Arduino, "Introduction," 2016. [Online]. Available:
https://www.arduino.cc/en/Guide/Introduction#. Accessed: Nov. 8, 2016.
[53]"Raspberry pi FAQs - frequently asked questions," Raspberry Pi. [Online]. Available:
https://www.raspberrypi.org/help/faqs/#introWhatIs. Accessed: Nov. 8, 2016.
[54] FrontPage - Raspbian. (2017). Raspbian.org. Retrieved 1 May 2017, from
https://www.raspbian.org/FrontPage
[55]T. F. G. ApS, "Que es UX?," 2006. [Online]. Available:
http://www.fatdux.com/es/what/what-is-ux. Accessed: Nov. 8, 2016.
[56]H. Montero, Yusef, M. Fernández, and F. J, "La Experiencia del Usuario," in No Solo
Usabilidad, 2005. [Online]. Available:
http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm. Accessed: Nov. 8,
2016.
[57]"Los Elementos de la Experiencia de Usuario,". [Online]. Available:
http://www.jjg.net/elements/translations/elements_es.pdf. Accessed: Nov. 8, 2016.
[58]R. León and Rodrigo, "Diseño de Experiencia de Usuario: Etapas, actividades, técnicas y
herramientas," in No Solo Usabilidad, 2013. [Online]. Available:
http://www.nosolousabilidad.com/articulos/uxd.htm?utm_source=feedly. Accessed: Nov. 8,
2016.
[59]2008 el Webmaster, "Usabilidad y accesibilidad," 2007. [Online]. Available:
http://www.elwebmaster.com/articulos/usabilidad-y-accesibilidad. Accessed: Nov. 8, 2016.
98
[60]Usabilidad en la web, Principios o reglas de usabilidad. [Online]. Available:
http://di002.edv.uniovi.es/~cueva/asignaturas/doctorado/2004/UsabilidadWeb.pdf. Accessed:
Nov. 8, 2016.
[61]C. Herramientas, "Cuadrantes - Aplicaciones de Android en Google play,". [Online].
Available: https://play.google.com/store/apps/details?id=co.com.ceiba.cuadrantes&hl=es.
Accessed: Nov. 8, 2016.
[62]P. F. Social, "PF Móvil - Aplicaciones Android en Google play,". [Online]. Available:
https://play.google.com/store/apps/details?id=com.denuncia.ciudadana&hl=es_419.
Accessed: Nov. 8, 2016.
[63]"Alerta Motorola - Aplicaciones Android en Google play,". [Online]. Available:
https://play.google.com/store/apps/details?id=com.motorola.bodyguard&hl=es_419.
Accessed: Nov. 8, 2016.
[64]"ECU 911 - Aplicaciones Android en Google play,". [Online]. Available:
https://play.google.com/store/apps/details?id=com.walpana.ecu911&hl=es_419. Accessed:
Nov. 8, 2016.
[65]"Alcaldía de Santiago de Cali," 2016. [Online]. Available:
http://www.cali.gov.co/loader.php?lServicio=FAQ&lFuncion=viewPreguntas&id=76#a397.
Accessed: Nov. 8, 2016.
[66] Contáctenos. (2017). Policía Nacional de Colombia. Retrieved 19 April 2017, from
https://www.policia.gov.co/contactenos
[67] Lineas de Emergencia Calí. (2017). ColombiaVIP.com Su empresa en el mundo. Retrieved
19 April 2017, from http://colombiavip.com/item/lineas-de-emergencia-cali/
[68] Preparación y respuesta en Emergencias y Desastres | Cruz Roja Colombiana. (2017).
Cruzrojacolombiana.org. Retrieved 19 April 2017, from
99
http://www.cruzrojacolombiana.org/centro-de-informacion/preparaci%C3%B3n-y-respuesta-
en-emergencias-y-desastres
[69] Lineas de emergencia Cali. (2017). Retrieved 19 April 2017, from
http://colombiavip.com/item/lineas-de-emergencia-cali/]
[70] Aldape, A., Aldape, A., & perfil, V. (2017). Filosofía y Psicología del Color.
Temagris.blogspot.com.co. Retrieved 19 April 2017, from
http://temagris.blogspot.com.co/2010/04/un-periplo-que-nos-desconecta-del-mundo.html
[71] Author, G. (2017). Color Psychology In Marketing: The Complete Guide [Free
Download]. CoSchedule Blog. Retrieved 19 April 2017, from
http://coschedule.stfi.re/blog/color-psychology-marketing/?sf=lwjjayg#aa
[72] Download Cabin Font. Impallari Type. (2017). Impallari.com. Retrieved 19 April 2017,
from http://www.impallari.com/cabin
[73] Pohl, K. (1996). Requirements engineering (1st ed.). Aachen: Techn. Hochsch.,
Fachgruppe Informatik.
[74] Programacion orientada a objetos. (2017). Retrieved 19 April 2017, from
http://librosweb.es/libro/python/capitulo_5/programacion_orientada_a_objetos.htm
[75] ORM y capa de extracción. (2017). Retrieved 19 April 2017, from.
[76] Arduino Uno. (2017). Retrieved from
https://upload.wikimedia.org/wikipedia/commons/a/a8/ArduinoUno_R3_Front_450px.jpg
[77] Raspberry Pi. (2017). Retrieved from
https://upload.wikimedia.org/wikipedia/commons/9/90/Front_of_Raspberry_Pi.jpg
[78] Relé 5v. (2017). Retrieved from https://createc3d.com/shop/1244-
thickbox_default/comprar-modulo-rele-5v-compatible-con-arduino-1-canal-precio-oferta.jpg
[79] Sirena 110V. (2017). Retrieved from http://www.calvoselectronica.com/674-856-
large/sirena-110v-negra.jpg.
100
Anexos
1. Encuestas para validación de la problemática.
2. MockUp Alarmapp.
3. Lista de requerimientos.
4. Especificación de requerimientos del sistema (SRS).
5. Diagramas.