Sistema de Información Web para el Control de Pérdida y Recuperación de Bicicletas

Texto completo

(1)SISTEMA DE INFORMACIÓN WEB PARA EL CONTROL DE PÉRDIDA Y RECUPERACIÓN DE BICICLETAS EN BOGOTÁ. DIANA MARCELA HURTADO GÓMEZ. UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS FACULTAD TECNOLÓGICA TECNOLOGÍA DE SISTEMATIZACIÓN DE DATOS BOGOTÁ 2017.

(2) SISTEMA DE INFORMACIÓN WEB PARA EL CONTROL DE PÉRDIDA Y RECUPERACIÓN DE BICICLETAS EN BOGOTÁ. DIANA MARCELA HURTADO GÓMEZ. Monografía para optar al título de tecnólogo en sistematización de datos. Tutor CARLOS ALBERTO VANEGAS Docente Académico. UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS FACULTAD TECNOLÓGICA TECNOLOGÍA DE SISTEMATIZACIÓN DE DATOS BOGOTÁ 2017.

(3) NOTA DE ACEPTACIÓN. _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________. ________________________________________ Firma del jurado. Bogotá.

(4) TABLA DE CONTENIDO. RESUMEN ............................................................................................................ 14 ABSTRACT ........................................................................................................... 14 INTRODUCCIÓN .................................................................................................. 15 1. FASE DE INICIO ............................................................................................ 16 1.1.. PLANTEAMIENTO DEL PROBLEMA ...................................................... 16. 1.1.1.. Descripción. ...................................................................................... 16. 1.1.2.. Formulación del problema. ................................................................ 16. 1.2.. ALCANCES Y DELIMITACIONES ........................................................... 17. 1.2.1.. Alcances............................................................................................ 17. 1.2.2.. Limitaciones. ..................................................................................... 17. 1.3.. OBJETIVOS............................................................................................. 17. 1.3.1. Objetivo general....................................................................................... 17 1.3.2.. Objetivos específicos. ....................................................................... 17. 1.4.. JUSTIFICACIÓN...................................................................................... 18. 1.5.. MARCO DE REFERENCIA ..................................................................... 19. 1.5.1. 1.6.. Estado del arte. ................................................................................. 19. MARCO TEÓRICO .................................................................................. 20. 1.6.1.. Inventario perpetuo ........................................................................... 20. 1.6.2.. Sistema de información. .................................................................... 21. 1.6.3.. Web. .................................................................................................. 22. 1.6.4.. Base de datos. .................................................................................. 24. 1.6.5.. Tecnologías de desarrollo. ................................................................ 26. 1.6.6.. Metodología de desarrollo: Metodología RUP. .................................. 29. 1.7.. MARCO CONCEPTUAL .......................................................................... 32. 1.7.1.. Responsive web design .................................................................... 32. 1.7.2.. Navegador web. ................................................................................ 32. 1.7.3.. Seguridad. ......................................................................................... 33. 1.7.4.. Venta. ................................................................................................ 34. 4.

(5) 1.7.5. 1.8.. Bicicleta. ............................................................................................ 34. FACTIBILIDAD ECONÓMICA. ................................................................ 34. 1.8.1.. Costos de software............................................................................ 34. 1.8.2.. Costo de hardware. ........................................................................... 34. 1.8.3.. Costos de personal. .......................................................................... 35. 1.8.4.. Costos de tutor. ................................................................................. 35. 1.8.5.. Otros costos ...................................................................................... 35. 1.9.. RECOMENDACIONES ............................................................................ 35. 1.10. CONCLUSIONES .................................................................................... 36 1.11. BIBLIOGRAFÍA ........................................................................................ 36 2. FASE DE ANÁLISIS ....................................................................................... 39 2.1.. ANÁLISIS DE REQUERIMIENTOS ......................................................... 39. 2.1.1.. Requerimientos no funcionales: ........................................................ 39. 2.1.2.. Requerimientos funcionales: ............................................................. 39. 2.2.. DEFINICIÓN DE ACTORES .................................................................... 40. 2.3.. DIAGRAMAS DE CASOS DE USO ......................................................... 41. 2.3.1.. Modelo de caso de uso ingreso y salida del sistema ........................ 41. 2.3.2.. Modelo de caso de uso gestión de usuarios principales ................... 41. 2.3.3.. Modelo de caso de uso gestión de usuarios secundarios ................. 42. 2.3.4.. Modelo de caso de uso consultas a bicicletas .................................. 42. 2.3.5.. Modelo de caso de uso gestión de bicicletas .................................... 43. 2.3.6.. Modelo de caso de uso gestión de perfil ........................................... 43. 2.3.7.. Modelo de caso de uso actividades del sistema ............................... 44. 2.3.8.. Modelo de caso de uso actividades del invitado ............................... 44. 2.4.. DOCUMENTACIÓN DE CASOS DE USO .............................................. 44. 2.4.1.. Iniciar sesión ..................................................................................... 44. 2.4.2.. Cerrar sesión ..................................................................................... 45. 2.4.3.. Adicionar administrador ..................................................................... 45. 2.4.4.. Adicionar bicicleta ............................................................................. 46. 2.4.5.. Adicionar teléfono.............................................................................. 47. 5.

(6) 2.4.6.. Adicionar tienda................................................................................. 48. 2.4.7.. Agregar nueva imagen de perfil ........................................................ 48. 2.4.8.. Cambiar contraseña .......................................................................... 49. 2.4.9.. Cambiar estado de la bicicleta .......................................................... 50. 2.4.10. Consultar tienda ................................................................................ 50 2.4.11. Consultar bicicletas ........................................................................... 51 2.4.12. Consultar administradores ................................................................ 52 2.4.13. Consultar inventario .......................................................................... 52 2.4.14. Consultar bicicletas vendidas ............................................................ 53 2.4.15. Consultar bicicletas perdidas ............................................................ 54 2.4.16. Consultar estado ............................................................................... 54 2.4.17. Eliminar administrador....................................................................... 55 2.4.18. Eliminar bicicleta ............................................................................... 55 2.4.19. Eliminar teléfono................................................................................ 56 2.4.20. Eliminar tienda................................................................................... 57 2.4.21. Enviar e-mail ..................................................................................... 57 2.4.22. Modificar administrador ..................................................................... 58 2.4.23. Modificar bicicleta .............................................................................. 59 2.4.24. Modificar tienda ................................................................................. 59 2.4.25. Subir imagen de administrador ......................................................... 60 2.4.26. Subir imagen de bicicleta .................................................................. 61 2.4.27. Ver historial de bicicletas ................................................................... 62 2.4.28. Vender bicicleta ................................................................................. 62 2.5.. DIAGRAMAS DE SECUENCIA ................................................................... 63 2.5.1.. Iniciar sesión ..................................................................................... 63. 2.5.2.. Cerrar sesión ..................................................................................... 64. 2.5.3.. Administrador .................................................................................... 64. 2.5.4.. Tienda ............................................................................................... 70. 2.5.5.. Biciusuario ......................................................................................... 75. 2.5.6.. Consultar estado de bicicleta ............................................................ 81. 6.

(7) 2.5.7. 2.6.. Enviar e-mail ..................................................................................... 82. DIAGRAMAS DE ACTIVIDAD ................................................................. 82. 2.6.1.. Iniciar sesión ..................................................................................... 82. 2.6.2.. Cerrar sesión ..................................................................................... 83. 2.6.3.. Administrador .................................................................................... 83. 2.6.4.. Tienda ............................................................................................... 89. 2.6.5.. Biciusuario ......................................................................................... 94. 2.6.6.. Consultar estado de bicicleta .......................................................... 100. 2.6.7.. Enviar e-mail ................................................................................... 101. 3. FASE DE DISEÑO ....................................................................................... 102 3.1.. HERRAMIENTAS TECNOLÓGICAS UTILIZADAS ............................... 102. 3.2.. PROTOTIPOS ....................................................................................... 103. 3.2.1.. Home............................................................................................... 103. 3.2.2.. Iniciar sesión ................................................................................... 103. 3.2.3.. Perfil de usuario .............................................................................. 104. 3.2.4.. Secciones secundarias ................................................................... 104. 3.2.5.. Formulario consultar estado ............................................................ 105. 3.2.6.. Noticias ........................................................................................... 105. 3.2.7.. Estadísticas ..................................................................................... 106. 3.2.8.. Formulario enviar mensaje .............................................................. 107. 3.3.. LISTADO DE CLASES .......................................................................... 108. 3.4.. DIAGRAMA DE CLASES....................................................................... 109. 3.5.. DIAGRAMA ENTIDAD RELACIÓN........................................................ 110. 3.6.. DICCIONARIO DE DATOS.................................................................... 111. 4. FASE DE IMPLEMENTACIÓN ..................................................................... 113 4.1.. DEFINICIÓN DE CAPAS ....................................................................... 113. 4.1.1.. Capa modelo ................................................................................... 113. 4.1.2.. Capa controlador ............................................................................. 114. 4.1.3.. Capa vista ....................................................................................... 115. 4.2.. DIAGRAMA DE DESPLIEGUE .............................................................. 117. 7.

(8) 4.3.. DIAGRAMA DE COMPONENTES ......................................................... 117. 5. FASE DE PRUEBAS .................................................................................... 118 5.1.. Inicio de sesión ...................................................................................... 118. 5.2.. Cerrar sesión ......................................................................................... 118. 5.3.. Gestión de perfil..................................................................................... 119. 5.4.. Gestión de administradores ................................................................... 120. 5.5.. Gestión de tiendas ................................................................................. 122. 5.6.. Gestión de inventario ............................................................................. 123. 5.7.. Proceso de facturación .......................................................................... 124. 5.8.. Secciones de consultas ......................................................................... 125. 5.9.. Home ..................................................................................................... 126. ANEXOS ............................................................................................................. 128. 8.

(9) LISTA DE FIGURAS. Figura 1. Elementos de un sistema de información .............................................. 21 Figura 2. Esquema básico de una aplicación web ................................................ 23 Figura 3. Tecnologías agrupadas bajo el concepto de AJAX ............................... 29 Figura 4 Caso de uso IngresoSalidaSistema ........................................................ 41 Figura 5 Caso de uso GestionUsuariosPrincipales ............................................... 41 Figura 6 Caso de uso GestionUsuariosSecuandarios .......................................... 42 Figura 7 Caso de uso ConsultarBicicleta .............................................................. 42 Figura 8 Caso de uso GestionBicicletas ............................................................... 43 Figura 9 Caso de uso GestionPerfil ...................................................................... 43 Figura 10 Caso de uso ActividadesSistema ......................................................... 44 Figura 11 Caso de uso ActividadesInvitado .......................................................... 44 Figura 12 Diagrama de secuencia Iniciar Sesión .................................................. 63 Figura 13 Diagrama de secuencia cerrar sesión................................................... 64 Figura 14 Diagrama de secuencia Admin_ConsultarTienda ................................. 64 Figura 15 Diagrama de secuencia Admin_AdicionarTienda ................................. 65 Figura 16 Diagrama de secuencia Admin_ModificarTienda .................................. 65 Figura 17 Diagrama de secuencia Admin_EliminarTienda ................................... 66 Figura 18 Diagrama de secuencia Admin_ConsultarBicicletas ............................. 66 Figura 19 Diagrama de secuencia Admin_VerHistorial......................................... 67 Figura 20 Diagrama de secuencia Admin_ConsultarAdministrador ...................... 67 Figura 21 Diagrama de secuencia Admin_AdicionarAdministrador ...................... 68 Figura 22 Diagrama de secuencia Admin_ModificarAdministrador....................... 68 Figura 23 Diagrama de secuencia Admin_EliminarAdministrador ........................ 69 Figura 24 Diagrama de secuencia Admin_SubirImagenAdmin ............................. 69 Figura 25 Diagrama de secuencia Tienda_ConsultarInventario ........................... 70 Figura 26 Diagrama de secuencia Tienda_AñadirBicicleta ................................... 70 Figura 27 Diagrama de secuencia Tienda_ModificarBicicleta .............................. 71 Figura 28 Diagrama de secuencia Tienda_EliminarBicicleta ................................ 71 Figura 29 Diagrama de secuencia Tienda_SubirImagenBicicleta ......................... 72 Figura 30 Diagrama de secuencia Tienda_VenderBicicleta ................................. 72 Figura 31 Diagrama de secuencia Tienda_ConsultarBicicletasVendidas ............. 73 Figura 32 Diagrama de secuencia Tienda_AgregarImagenPerfil ......................... 73 Figura 33 Diagrama de secuencia Tienda_AdicionarTelefono ............................. 74 Figura 34 Diagrama de secuencia Tienda_EliminarTelefono ............................... 74. 9.

(10) Figura 35 Diagrama de secuencia Tienda_CambiarContraseña .......................... 75 Figura 36 Diagrama de secuencia BUsuario_CambiarEstado .............................. 75 Figura 37 Diagrama de secuencia BUsuario_ConsultarInventario........................ 76 Figura 38 Diagrama de secuencia BUsuario_AñadirBicicleta .............................. 76 Figura 39 Diagrama de secuencia BUsuario_ModificarBicicleta .......................... 77 Figura 40 Diagrama de secuencia BUsuario_EliminarBicicleta ............................ 77 Figura 41 Diagrama de secuencia BUsuario_VenderBicicleta .............................. 78 Figura 42 Diagrama de secuencia BUsuario_SubirImagenBicicleta ..................... 78 Figura 43 Diagrama de secuencia BUsuario_ConsultarBicicletasPerdidas .......... 79 Figura 44 Diagrama de secuencia BUsuario_AgregarImagenPerfil ...................... 79 Figura 45 Diagrama de secuencia BUsuario_AdicionarTelefono .......................... 80 Figura 46 Diagrama de secuencia BUsuario_EliminarTelefono ............................ 80 Figura 47 Diagrama de secuencia BUsuario_CambiarContraseña....................... 81 Figura 48 Diagrama de secuencia ConsultarEstadoBicicleta ............................... 81 Figura 49 Diagrama de secuencia EnviarMensaje................................................ 82 Figura 50 Diagrama de actividad Iniciar Sesión .................................................... 82 Figura 51 Diagrama de actividad Cerrar Sesión ................................................... 83 Figura 52 Diagrama de actividad Admin_ConsultarTienda ................................... 83 Figura 53 Diagrama de actividad Admin_AdicionarTienda ................................... 84 Figura 54 Diagrama de actividad Admin_ModificarTienda .................................... 84 Figura 55 Diagrama de actividad Admin_EliminarTienda ..................................... 85 Figura 56 Diagrama de actividad Admin_ConsultarBicicletas ............................... 85 Figura 57 Diagrama de actividad Admin_VerHistorialBicicletas............................ 86 Figura 58 Diagrama de actividad Admin_ConsultarAdministrador ........................ 86 Figura 59 Diagrama de actividad Admin_AdicionarAdministrdor .......................... 87 Figura 60 Diagrama de actividad Admin_ModificarAdministrador......................... 87 Figura 61 Diagrama de actividad Admin_EliminarAdministrador .......................... 88 Figura 62 Diagrama de actividad Admin_SubirImagenAdministrador ................... 88 Figura 63 Diagrama de actividad Tienda_AñadirBicicleta ..................................... 89 Figura 64 Diagrama de actividad Tienda_ModificarBicicleta ................................ 89 Figura 65 Diagrama de actividad Tienda_EliminarBicicleta .................................. 90 Figura 66 Diagrama de actividad Tienda_SubirImagenBicicleta ........................... 90 Figura 67 Diagrama de actividad Tienda_VenderBicicleta ................................... 91 Figura 68 Diagrama de actividad Tienda_ConsultarBicicletasVendidas ............... 91 Figura 69 Diagrama de actividad Tienda_AgregarImagenPerfil ........................... 92 Figura 70 Diagrama de actividad Tienda_ConsultarInventario ............................. 92 Figura 71 Diagrama de actividad Tienda_AdicionarTelefono ............................... 93. 10.

(11) Figura 72 Diagrama de actividad Tienda_EliminarTelefono ................................. 93 Figura 73 Diagrama de actividad Tienda_CambiarContraseña ............................ 94 Figura 74 Diagrama de actividad BUsuario_CambiarEstado ................................ 94 Figura 75 Diagrama de actividad BUsuario_ConsultarInventario.......................... 95 Figura 76 Diagrama de actividad BUsuario_AñadirBicicleta ................................. 95 Figura 77 Diagrama de actividad BUsuario_ModificarBicicleta ............................. 96 Figura 78 Diagrama de actividad BUsuario_EliminarBicicleta .............................. 96 Figura 79 Diagrama de actividad BUsuario_VenderBicicleta ................................ 97 Figura 80 Diagrama de actividad BUsuario_SubirImagenBicicleta ....................... 97 Figura 81 Diagrama de actividad BUsuario_ConsultarBicicletasPerdidas ............ 98 Figura 82 Diagrama de actividad BUsuario_AgregarImagenPerfil ........................ 98 Figura 83 Diagrama de actividad BUsuario_AdicionarTelefono ............................ 99 Figura 84 Diagrama de actividad BUsuario_EliminarTelefono .............................. 99 Figura 85 Diagrama de actividad BUsuario_CambiarContraseña....................... 100 Figura 86 Diagrama de actividad ConsultarEstadoBicicleta ............................... 100 Figura 87 Diagrama de actividad Enviare mail ................................................... 101 Figura 88 Interfaz_Home .................................................................................... 103 Figura 89 Interfaz_IniciarSesión ......................................................................... 103 Figura 90 Interfaz_Perfil ...................................................................................... 104 Figura 91 Interfaz_SeccionesSecundarias ......................................................... 104 Figura 92 Interfaz_ConsultarEstado ................................................................... 105 Figura 93 Interfaz_Noticias ................................................................................. 105 Figura 94 Interfaz_Estadísticas1......................................................................... 106 Figura 95 Interfaz_MapaEstadísticas .................................................................. 106 Figura 96 Interfaz_EstadísticasGenerales .......................................................... 107 Figura 97 Interfaz_EnviarMensaje ...................................................................... 107 Figura 98 Diagrama de clases ............................................................................ 109 Figura 99 Diagrama entidad-relación .................................................................. 110 Figura 100 Diagrama de despliegue ................................................................... 117. 11.

(12) ÍNDICE DE TABLAS. Tabla 1 Definición de actores................................................................................ 40 Tabla 2 Caso de uso Iniciar sesión ....................................................................... 44 Tabla 3 Caso de uso Cerrar sesión ...................................................................... 45 Tabla 4 Caso de uso Adicionar administrador ...................................................... 45 Tabla 5 Caso de uso Adicionar tienda .................................................................. 46 Tabla 6 Caso de uso Adicionar teléfono ............................................................... 47 Tabla 7 Caso de uso Adicionar tienda .................................................................. 48 Tabla 8 Caso de uso Agregar imagen de perfil ..................................................... 48 Tabla 9 Caso de uso Cambiar contraseña ............................................................ 49 Tabla 10 Caso de uso Cambiar estado ................................................................. 50 Tabla 11 Caso de uso Consultar tienda ................................................................ 50 Tabla 12 Caso de uso consultar bicicletas ............................................................ 51 Tabla 13 Caso de uso Consultar administradores ................................................ 52 Tabla 14 Caso de uso Consultar inventario .......................................................... 52 Tabla 15 Caso de uso Consultar bicicletas vendidas............................................ 53 Tabla 16 Caso de uso Consultar bicicletas perdidas ............................................ 54 Tabla 17 Caso de uso Consultar estado ............................................................... 54 Tabla 18 Caso de uso Eliminar administrador ...................................................... 55 Tabla 19 Caso de uso Eliminar bicicleta ............................................................... 55 Tabla 20 Caso de uso Eliminar teléfono ............................................................... 56 Tabla 21 Caso de uso Eliminar tienda .................................................................. 57 Tabla 22 Caso de uso enviar e-mail ..................................................................... 57 Tabla 23 Caso de uso Modificar administrador ..................................................... 58 Tabla 24 Caso de uso Modificar bicicleta ............................................................. 59 Tabla 25 Caso de uso Modificar tienda ................................................................. 59 Tabla 26 Caso de uso Subir imagen administrador .............................................. 60 Tabla 27 Caso de uso Subir imagen bicicleta ....................................................... 61 Tabla 28 Caso de uso Ver historial ....................................................................... 62 Tabla 29 Caso de uso Vender bicicleta ................................................................ 62 Tabla 30 Listado de clases ................................................................................. 108 Tabla 31 Diccionario de datos............................................................................. 111 Tabla 32 Capa modelo ........................................................................................ 113 Tabla 33 Capa controlador ................................................................................. 114 Tabla 34 Capa vista ............................................................................................ 115. 12.

(13) LISTA DE CUADROS. Cuadro 1 Prueba Inicio de sesión ....................................................................... 118 Cuadro 2 Prueba Cerrar sesión .......................................................................... 118 Cuadro 3 Prueba Gestión de perfil...................................................................... 119 Cuadro 4 Prueba Gestión de administradores .................................................... 120 Cuadro 5 Prueba Gestión de tiendas .................................................................. 122 Cuadro 6 Prueba Gestión de inventario .............................................................. 123 Cuadro 7 Prueba Facturación ............................................................................. 124 Cuadro 8 Prueba Consultas ................................................................................ 125 Cuadro 9 Prueba Home ...................................................................................... 126. 13.

(14) RESUMEN. El presente proyecto propone la reducción de robos de bicicletas en la ciudad de Bogotá, así como la compra y venta ilegal de estas y la posibilidad de facilitar la localización de las bicicletas hurtadas por medio de una página web estructurada de tal forma que quien la use pueda comprender rápidamente cómo se utiliza y las opciones que ofrece. Partiendo de lo anterior se realizó un análisis de la problemática, se diseñó y desarrolló el aplicativo que ayudaría a combatirla a partir del uso de los lenguajes de programación web PHP y JavaScript, como el lenguaje SQL MySQL con el que se maneja el intercambio y la modificación de datos almacenados en el servidor; así mismo para mantener una comunicación asíncrona cliente-servidor se utiliza la tecnología AJAX la cual permite la interactividad de la página. El desarrollo de este aplicativo de internet ha sido posible gracias a los conocimientos adquiridos en la universidad y el trabajo autónomo. ABSTRACT The present project proposes the reduction of bicycle thefts in the city of Bogotá, as well as the illegal purchase and sale of these and the possibility of facilitating the location of stolen bikes through a structured web page so that whoever uses it you can quickly understand how it is used and the options it offers. Based on the above, an analysis of the problem was done, the application was designed and developed that would help to combat it from the use of PHP and JavaScript web programming languages, such as the MySQL SQL language with which the exchange is handled. modification of data stored on the server; In order to maintain an asynchronous client-server communication, AJAX technology is used which allows the interactivity of the page. The development of this internet application has been possible thanks to the knowledge acquired in the university and the autonomous work.. 14.

(15) INTRODUCCIÓN. En la actualidad se presencia una gran cantidad de personas movilizándose en bicicleta bien sea para el trabajo, la universidad o cualquier otro destino gracias a la idea que todos comparten de que es económica, rápida, amable con el medio ambiente, falta de ruido y carente de emisiones de dióxido de carbono; además de que disminuye la congestión tanto en las vías como en el mismo transporte masivo donde se aglomeran gran cantidad de individuos. Bogotá cuenta con proyectos promotores del uso de la bicicleta entre otros el más nuevo es ‘Al colegio en Bici’, en este se incentiva el uso del medio de transporte sin motor desde los infantes hasta los jóvenes estudiantes de bachillerato; además de ello la alcaldía ha anunciado en este año la creación de un Centro de la Bicicleta donde se busca capacitar sobre mecánica avanzada y emprendimiento alrededor de la bicicleta. Sin embargo, la capital cuenta con altos índices de inseguridad lo que se convierte en un obstáculo frente a la intención de ampliar la utilización del medio de transporte mencionado pues lo ciudadanos se sienten inseguros debido a los ataques con armas blancas o de fuego que atentan contra su vida y les despoja de sus bienes personales. El presente proyecto de sistematización de datos busca aprovechar la iniciativa de la alcaldía de Bogotá de reducir la tasa de robos de bicicletas y el negocio lucrativo que es la venta de las mismas o su desvalije en la ciudad por medio de un marcaje especial, único e irrepetible en cada una de sus partes haciendo más fácil la identificación de la misma por parte de la policía de tránsito. El objetivo ha sido construir un portal web de registro de bicicletas donde participa la comunidad, los bici usuarios, las tiendas y la misma policía; se ha hecho una investigación sobre otros portales que ofrezcan el mismo servicio con el fin de presentar un proyecto innovador con respecto a nuevas funcionalidades.. Título: Sistema de información web para el control de bicicletas en Bogotá Tema: Seguridad en las ciclovías de la ciudad de Bogotá. 15.

(16) 1. FASE DE INICIO. 1.1. PLANTEAMIENTO DEL PROBLEMA. 1.1.1. Descripción. Actualmente no existe un registro obligatorio de las bicicletas que son compradas en la ciudad de Bogotá existiendo la falta de un control de las mismas que transcurren día a día por ella. Ésta falta de control presenta un problema a la hora de quererse recuperar la bicicleta por parte del dueño en caso de existir algún tipo de robo o pérdida. Según informes oficiales por parte del diario El Espectador1 , el representante a la Cámara, Carlos Eduardo Guevara advirtió al Congreso de la República un aumento considerable en el robo de bicicletas en la ciudad de Bogotá afirmando que, aunque ya en el 2012 se presentan robos diarios de tres bicicletas para el año 2015 se aumentó a cinco bicicletas diarias, es decir, un incremento del 29,86%. Otra situación alarmante en las ciclo-rutas de la ciudad es el incremento del hurto con 1.109 casos en 2011 a 2.169 en 2014; y las lesiones personales, de 254 casos en 2011 a 457 en 2014. Esto, de acuerdo con Guevara, representa un aumento porcentual del 91% y 72% respectivamente, en los últimos casi 4 años, en donde 2013 registra su mayor incremento con el 89,22% y 57,38% respectivamente. Según cifras de la Policía Nacional en centro representa el 15% de la inseguridad en Bogotá. Las últimas administraciones de Bogotá han venido incentivando el uso de la bicicleta como medio de transporte amigable con el medio ambiente pero no se ha propuesto un plan de acción para que esta tendencia se vea segura y motive a más personas a migrar a ella. 1.1.2. Formulación del problema. ¿Es posible que con una aplicación web se aumente la posibilidad de encontrar una bicicleta que ha sido robada o reportada como perdida?. 1. Denuncian. desbordado. aumento. de. robo. de. bicicletas. en. Bogotá. http://www.elespectador.com/noticias/bogota/denuncian-desbordado-aumento-de-robo-de-bicicletasbogo-articulo-571210 Citado el [15 de marzo de 2016]. 16.

(17) 1.2. ALCANCES Y DELIMITACIONES. 1.2.1. Alcances. El presente proyecto consiste en una aplicación web capaz de contener los datos de los dueños de las bicicletas, así como de las mismas. Está pensado para preservar dicha información y que ésta sólo pueda ser consultada por cualquier ente o persona autorizada desde cualquier parte de la ciudad de Bogotá. No se tiene incluido en el proyecto el tema de las compraventas y cualquier mejora con respecto a ello queda abierta al público. Esta aplicación pretende ser una propuesta para apoyar a la policía local con el tema de la inseguridad en las ciclovías. 1.2.2. Limitaciones. Para que el proyecto sea efectivo, las tiendas de bicicletas deben ser confiables y estar en la base de datos de cámara y comercio lo cual alargaría el plazo para una posible implementación en el sistema. 1.3. OBJETIVOS. 1.3.1. Objetivo general. Desarrollar un sistema de información web para el control de pérdida y recuperación de bicicletas en la ciudad de Bogotá. 1.3.2. Objetivos específicos. • Recolectar y analizar la información suministrada por los dueños de bicicletas, tiendas avaladas y personas en general. • Crear un módulo para el registro de bicicletas vendidas en Bogotá por las tiendas certificadas. • Diseñar un módulo para las personas registradas en el sistema que permita el cambio de estado de una bicicleta (activa, perdida, recuperada) y reportar el sitio de pérdida o hurto. • Diseñar un módulo para la consulta de estado de una bicicleta por parte del público en general ingresando el código de la misma.. 17.

(18) • Crear un módulo donde se aprecie la efectividad de la aplicación por medio de estadísticas basadas en la cantidad de bicicletas perdidas y la cantidad de bicicletas recuperadas. • Crear un módulo que permita apreciar los sitios con mayor incidencia de robos de bicicletas en la ciudad de Bogotá. • Ejecutar la fase de pruebas del correcto funcionamiento del sistema de información web. 1.4. JUSTIFICACIÓN.. El uso diario de la bicicleta como medio de transporte ofrece a quien la usa y a la ciudad grandes beneficios con respecto al medio ambiente, dada la reducción de emisión de dióxido de carbono, la economía, pues se disminuyen los gastos en transporte o gasolina y el transporte masivo o en carro pues a menor cantidad de usuarios menor la probabilidad de trancones. Para el año 2015 un funcionario de secretaría de movilidad en una encuesta realizada por la revista Dinero 2 y publicada ese mismo año afirmó que Bogotá junto con la ciudad del Rosario (Argentina) encabezaban la lista de ciudades con mayor uso de la bicicleta a nivel latinoamericano. Actualmente Bogotá cuenta con variedad de opciones para los ciclistas que se movilizan a diario como ciclorrutas (siendo la ciudad con más kilómetros en América Latina), bici-carriles, ciclo-parqueaderos asociados al transporte masivo, entre otras; “el 83% de ellos [los usuarios] se sienten satisfechos andando en bici según una encuesta Bogotá Cómo Vamos” asegura el portal web de seguros Sura, Wesura 3 . En el año 2016 el presidente Juan Manuel Santos sancionó la ley ‘Probici’ la cual establece que por cada 30 veces que una persona se registre en un ciclo-parqueadero del transporte masivo recibirá un pasaje gratuito además de ofrecer compensaciones con días laborales, por lo tanto, es evidente el compromiso e interés por aumentar el porcentaje de bici-usuarios. A pesar de los grandes esfuerzos por incentivar el medio de transporte en cuestión muchas personas se encuentran renuentes a utilizarlo para su uso diario debido a la inseguridad que la capital presenta en horas y lugares específicos. “En 2016 fueron robadas en promedio 5 bicicletas al día en la ciudad”4 todo esto debido al negocio lucrativo de la comercialización de bicicletas robadas o de sus partes; el mismo portal web arroja una cifra de la secretaría distrital de seguridad, convivencia 2. Bogotá, ejemplo mundial de las dos ruedas. http://www.dinero.com/pais/articulo/uso-bicicletascolombia/208797 [Citado el 10 de septiembre de 2017] 3 Robo de bicicletas en Bogotá 2017: cifras y zonas críticas http://descubre.wesura.com/blog/robo-debicicletas-en-bogota-2017-cifras-y-puntos-criticos [Citado el 10 de septiembre de 2017] 4 Ibid.. 18.

(19) y justicia “la cantidad total de robos en Bogotá sólo aumentó el 2% entre 2015 y 2016”5 así mismo afirma que es un problema que la policía no ha logrado controlar. En acatamiento a la anterior información se ha decidido utilizar la tecnología y la gran acogida que ha tenido el internet para diseñar y desarrollar una página web inspirada en la compra y venta ilegal de bicicletas robadas y en la idea de aumentar la probabilidad de encontrarlas. En este aplicativo se tienen en cuenta tanto tiendas, bici-usuarios, personas del común y la policía de tránsito con el fin de buscar una posible solución a la problemática mencionada. Dada la gran cantidad de proyectos que se han realizado con la misma finalidad que el presente, a modo de innovación se cuenta con la intención de que la policía de la ciudad capital y los mismos ciudadanos hagan parte de la implementación de éste proyecto, para lo cual en el sistema de información web se tiene una sección exclusiva para los bici-usuarios en donde, dado el caso que su bicicleta haya sido robada, puedan cambiar el estado de ésta inmediatamente y adicionalmente realizar la observación del sitio donde se le ha perdido o le han hurtado su bicicleta; así como una sección para cualquier persona que quiera adquirir una bicicleta o para un policía que se encuentre realizando revisión de los respectivos papeles de la bicicleta donde busque, según el número de serie y marca, el estado de la misma. Cuenta con una sección de e-mail donde una persona del común o bien, un policía puede enviar un mensaje seleccionando localidad y barrio donde se halló. 1.5. MARCO DE REFERENCIA. 1.5.1. Estado del arte. 1.5.1.1. Fuentes primarias. • Fundamentos de administración de inventarios; Max Muller: Este libro nos da fundamentos para el manejo y el control de los inventarios • Planificación y control de la producción; Chapman, Sthepen N.: En el capítulo 5 este libro nos orienta en la administración de un inventario. 1.5.1.2. Fuentes secundarias • Secop v1.4.7: Este software permite llevar un completo control sobre los inventarios. Se pueden registrar ventas, compras, productos, añadir lista de precios, generar reporte de existencias, etc... 5. Ibid.. 19.

(20) • Alvendi v1.3.1: Es un programa para gestionar inventarios. Su interfaz amigable lo convierte en una sencilla y práctica opción para registrar las compras o entradas de productos y las ventas o salidas. 1.5.1.3. Proyectos relacionados • BiciRegistro: Actualmente en España existe una página llamada www.biciregistro.co en la cual se puede realizar el registro de la bicicleta con su número de serie y proporcionar datos adicionales como marca, foto de la bicicleta, y alguna característica personalizada con el fin de crear una comunidad en la que todos se ayuden para la localización de cualquier cicla registrada que haya sido robada. • La policía nacional cuenta con un dispositivo en el cual los patrulleros buscan el número de cédula de una persona en concreto para conocer sus antecedentes judiciales. • Proyecto SINIEV: El ministerio de transporte de Colombia en el año 2014 presentó un proyecto que tiene como objetivo suprimir el pago del peaje en efectivo. El proyecto, además de cumplir con su objetivo central, permite alertar a las autoridades competentes del sistema de seguridad nacional a cerca de la localización de un vehículo reportado como robado que pasa por algún peaje dentro de los límites nacionales. • Registro obligatorio de bicicletas en Sevilla, España: Debido a las inconformidades de los usuarios de bicicletas con respecto a seguridad, Sevilla dispone de un registro obligatorio de bicicletas el cual cuenta con un marcaje especial para la identificación de las mismas ante las autoridades de esa región. 1.6. MARCO TEÓRICO. 1.6.1. Inventario perpetuo El Sistema de Inventario Perpetuo es el mejor sistema de registro de mercancías para cualquier empresa debido a su buena organización. También es conocido como Sistema de Inventario Constante o Permanente, este organiza la información de tal manera que pueda ser localizada en cualquier momento, sin problemas y por quien lo necesite, del valor del inventario final, del costo de lo vendido y la utilidad o la perdida bruta. El sistema de inventario perpetuo es un sistema que mantiene un registro continuo y diario de los movimientos de los inventarios y del costo del artículo vendido. 20.

(21) costeado, ya sea por identificación específica, PEPS, UEPS o promedio ponderado6 1.6.2. Sistema de información. Se define como un conjunto de elementos orientados al tratamiento y administración de datos de información, organizados y listos para su posterior uso, generados para cubrir una necesidad u objetivo. Un sistema de información obtiene sus datos a través de los siguientes procesos: • Entrada de información: Proceso mediante el cual el sistema de información toma los datos que se requieren para procesar la información desde entradas manuales o automáticas. • Almacenamiento de información: es una de las actividades o capacidades más importantes que tiene un sistema. A través de esta propiedad el sistema puede recordar la información guardada en las sesiones o procesos anteriores. Esta información suele ser guardada en estructuras denominadas como archivos. • Procesamiento de información: Es la capacidad del sistema de información para efectuar cálculos de acuerdo con la secuencia de operaciones preestablecidas. Estos cálculos pueden efectuarse con datos introducidos recientemente en el sistema o bien con datos que están almacenados.7 Figura 1. Elementos de un sistema de información. Fuente: Autor.. Habitualmente el término se usa de manera errónea como sinónimo de sistema de información informático, en parte porque en la mayor parte de los casos los recursos materiales de un sistema de información están constituidos casi en su totalidad por sistemas informáticos. Estrictamente hablando, un sistema de información no tiene por qué disponer de dichos recursos (aunque en la práctica esto no suela ocurrir). Se podría decir entonces que los sistemas de información 6. Sistema de inventario perpetuo o constante http://www.gestiopolis.com/sistema-de-inventario-perpetuoo-constante/ [Citado el 11 de noviembre de 2016] 7 Las bases de datos y los sistemas de información https://www.asicamericas.com/las-bases-de-datos-y-lossistemas-de-informacion/ [Citado el 13 de septiembre de 2017]. 21.

(22) informáticos son una subclase o un subconjunto de los sistemas de información en general.8 1.6.3. Web. Marcelo Arenas y otros en el libro “Cómo funciona la web”9 describen a esta como la arquitectura lógica que se logra construir y almacenar en la red física que conecta como nodos la inmensa cantidad de servidores y clientes existentes en la actualidad como decir que la información almacenada en el cerebro humano se encuentra estructurada gracias a la red neuronal. En el comienzo de la computación la web no se encontraba ni cerca de ser desarrollada debido a las imposibilidades de conectar dos maquinarias inmensas y menos de que una obtuviera información directa de la otra, sin embargo, el advenimiento de los computadores personales trajo la idea de la interconexión de usuarios por medio de la nueva tecnología surgiendo así las redes locales. Tim Berners-Lee tuvo la idea de difundir la información almacenada en cada máquina de cómputo siempre que el dueño quisiera compartirla, hacerla accesible para todo el mundo pensando en una red más grande que la local, la red global, la cual convierte a los computadores en nodos. Se dice que los tres pilares básicos sobre los que se encuentra la arquitectura lógica de la web son10: • URI: Identificadores únicos que hacen posible el hacer referencia a todos los objetos; en la web se denominan Identificadores únicos de recursos y actualmente reconocidos por Localizador universal de recursos (URL). • HTML, Hyper Text Markup Language: Para la universalización de la comunicación se hace esencial encontrar la manera de que todos los nodos conectados a la red interpreten la información obtenida de otro nodo de manera única y sin ambigüedades por lo que surge HTML capaz de redireccionar al usuario desde un punto cualquiera a otro punto gracias a los llamados links o enlaces. • HTTP: Otro elemento inherente a la información transmitida por una red global es un protocolo de transmisión de datos el cual permite enviar y traer los datos en HTML de un sitio a otro cualquiera.. 8. Tipos de Sistemas de Información https://jacquelinecastro.wordpress.com/2012/11/07/tipos-de-sistemasde-informacion/ [Citado el 13 de septiembre de 2017] 9 ARENAS, Marcelo; BAEZA.YATES, Ricardo; GUTIERREZ, Claudio. Cómo funciona la web. Universidad de Chile: Centro de Investigación de la Web, p 11-13. 10 Ibid.. 22.

(23) 1.6.3.1. Aplicación web. Una aplicación web (web-based application) es un tipo especial de aplicación cliente/servidor, donde tanto el cliente (el navegador, explorador o visualizador) como el servidor (el servidor web) y el protocolo mediante el que se comunican (HTTP) están estandarizados y no han de ser creados por el programador de aplicaciones Figura 2. Esquema básico de una aplicación web. Fuente: Cómo funciona la web Disponible en: http://www.libros.uchile.cl/files/presses/1/monographs/232/submission/proof/files/assets/basichtml/index.html#page1. 1.6.3.2. Cliente. El cliente web es un programa con el que interacciona el usuario para solicitar a un servidor web el envío de los recursos que desea obtener mediante HTTP2. La parte cliente de las aplicaciones web suele estar formada por el código HTML que forma la página web más algo de código ejecutable realizado en lenguaje de script del navegador (JavaScript o VBScript) o mediante pequeños programas (applets) realizados en Java. También se suelen emplear plugins que permiten visualizar otros contenidos multimedia (como Macromedia Flash4), aunque no se encuentran tan extendidos como las tecnologías anteriores y plantean problemas de incompatibilidad entre distintas plataformas. Por tanto, la misión del cliente web es interpretar las páginas HTML y los diferentes recursos que contienen (imágenes, sonidos, etc.). Las tecnologías que se suelen emplear para programar el cliente web son: • • • • •. HTML. CSS. DHTML. Lenguajes de script : JavaScript, VBScript, etc. ActiveX.. 23.

(24) • Applets programados en Java. • Distintas tecnologías que necesitan la existencia de un plugin en el navegador: Adobe Acrobat Reader, Autodesk Map Guide, Live Picture PhotoVista, Macromedia Flash, Macromedia Shockwave, Virtual Reality Modeling Language (VRML), etc. 1.6.3.3. El servidor. El servidor web es un programa que está esperando permanentemente las solicitudes de conexión mediante el protocolo HTTP por parte de los clientes web. En los sistemas Unix suele ser un “demonio” y en los sistemas Microsoft Windows un servicio. La parte servidor de las aplicaciones web está formada por: • Páginas estáticas (documentos HTML) que siempre muestran el mismo contenido. • Recursos adicionales (multimedia, documentos adicionales, etc.) que se pueden emplear dentro de las páginas o estar disponibles para ser descargados y ejecutados (visualizados) en el cliente. • Programas o scripts que son ejecutados por el servidor web cuando el navegador del cliente solicita algunas páginas. La salida de este script suele ser una página HTML estándar que se envía al navegador del cliente. Tradicionalmente este programa o script que es ejecutado por el servidor web se basa en la tecnología CGI. En algunos casos pueden acceder a bases de datos11. 1.6.4. Base de datos. Definiciones formales de base de datos. • Colección de datos, donde los datos están lógicamente relacionados entre sí, tienen una definición y descripción comunes y están estructurados de una forma particular. Una base de datos es también un modelo del mundo real y, como tal, debe poder servir para toda una gama de usos y aplicaciones” [Conference des Statisticiens Européens, 1977]. • “Es un conjunto exhaustivo de datos estructurados, fiables y homogéneos, organizados independientemente de su utilización y de su implementación en máquina, accesibles en tiempo real, compartibles por usuarios concurrentes que tienen necesidades de información diferentes y no predecibles en el tiempo” [Access, 2001].12. 11. LUJAN, Sergio; Programación de aplicaciones web: Historia, principios básicos y clientes web; España: Editorial Club Universitario, p 48-49. 12 GÓMEZ FUENTES, María C.; Notas del curso bases de datos, México: Departamento de Matemáticas Aplicadas y Sistemas, febrero 2013, p 5-6.. 24.

(25) 1.6.4.1. Sistema de administración de bases de datos. Consiste en un conjunto de programas utilizados para definir, administrar y procesar una base de datos y sus aplicaciones. A los sistemas de administración de bases de datos también se les llama Sistemas de Gestión de Bases de Datos (SGBD). Un sistema de administración de bases de datos es una herramienta de propósito general que permite crear bases de datos de cualquier tamaño y complejidad y con propósitos específicos distintos. El administrador de una base de datos permite controlar los datos, recuperarlos, ordenarlos, analizarlos, resumirlos y elaborar informes. La base de datos puede combinar datos de varios archivos, por lo que nunca habrá que introducir dos veces la misma información. Incluso puede contribuir a que la entrada de datos sea más eficaz y precisa. 1.6.4.2. SQL. Dada la necesidad de realizar consultas de forma manual en una base de datos surge el lenguaje SQL el cual usa una combinación de álgebra relacional y construcciones del cálculo relacional. Aunque el lenguaje SQL se considera un lenguaje de consultas, contiene muchas otras capacidades además de la consulta en bases de datos. Incluye características para definir la estructura de los datos, para la modificación de los datos en la base de datos y para la especificación de restricciones de seguridad. El lenguaje SQL tiene varios componentes: • Lenguaje de definición de datos (LDD). El LDD de SQL proporciona órdenes para la definición de esquemas de relación, borrado de relaciones, creación de índices y modificación de esquemas de relación. • Lenguaje interactivo de manipulación de datos (LMD). El LMD de SQL incluye un lenguaje de consultas, basado tanto en el álgebra relacional como en el cálculo relacional de tuplas. Incluye también órdenes para insertar, borrar y modificar tuplas de la base de datos. • Definición de vistas. El LDD de SQL incluye órdenes para la definición de vistas. • Control de transacciones. SQL incluye órdenes para la especificación del comienzo y final de transacciones. • SQL incorporado y SQL dinámico. SQL dinámico e incorporado define cómo se pueden incorporar las instrucciones SQL en lenguajes de programación de propósito general, tales como C, C++, Java, PL/I, Cobol, Pascal y Fortran. • Integridad. El LDD de SQL incluye órdenes para la especificación de las estricciones de integridad que deben satisfacer los datos almacenados en la base de datos. Las actualizaciones que violen las restricciones de integridad se rechazan.. 25.

(26) • Autorización. El LDD de SQL incluye órdenes para especificar derechos de acceso para las relaciones y vistas13 1.6.5. Tecnologías de desarrollo. 1.6.5.1. MySQL. Es un sistema de gestión de base de datos relacional (RDBMS) de código abierto, basado en lenguaje de consulta estructurado (SQL). MySQL se ejecuta en prácticamente todas las plataformas, incluyendo Linux, UNIX y Windows. A pesar de que se puede utilizar en una amplia gama de aplicaciones, MySQL se asocia más con las aplicaciones basadas en la web y la publicación en línea y es un componente importante de una pila empresarial de código abierto llamado LAMP. LAMP es una plataforma de desarrollo web que utiliza Linux como sistema operativo, Apache como servidor web, MySQL como sistema de gestión de base de datos relacional y PHP como lenguaje de programación orientado a objetos (a veces, Perl o Python se utiliza en lugar de PHP)14. 1.6.5.2. HTML5 Es la última versión de HTML. El término representa dos conceptos diferentes: Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos. Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5. Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencia a numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función. • Semántica: Permite describir con mayor precisión cuál es su contenido. • Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras. • Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente. • Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente. 13 14. SILBERSCHATZ, Abraham, KORTH, Henry F.; Fundamentos de bases de datos, Cuarta edición, p 87. MySQL http://searchdatacenter.techtarget.com/es/definicion/MySQL [Citado el 29 de abril de 2016]. 26.

(27) • Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc. • Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware. • Acceso al dispositivo: Proporciona Apis para el uso de varios compomentes internos de entrada y salida de nuestro dispositivo. • CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados15. 1.6.5.3. PHP Lenguaje de programación, interpretado, diseñado originalmente para la creación de Páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+. • Ventajas - Es un lenguaje multiplataforma. - Completamente orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una Base de Datos. - El código fuente escrito en PHP es invisible al navegador y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable. - Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL. - Capacidad de expandir su potencial utilizando la enorme cantidad de módulos (llamados ext's o extensiones). - Posee una amplia documentación en su página oficial (Sitio Oficial), entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda. - Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. - Permite aplicar técnicas de programación orientada a objetos. - No requiere definición de tipos de variables, aunque sus variables se pueden evaluar también por el tipo que estén manejando en tiempo de ejecución. 15. HTML https://developer.mozilla.org/es/docs/HTML/HTML5 [Citado el 30 de noviembre de 2016]. 27.

(28) - Tiene manejo de excepciones (desde PHP5). - Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a la hora de programar (muchos otros lenguajes tampoco lo hacen), aun estando dirigido a alguna en particular, el programador puede aplicar en su trabajo cualquier técnica de programación y/o desarrollo que le permita escribir código ordenado, estructurado y manejable. Un ejemplo de esto son los desarrollos que en PHP se han hecho del Patrón de diseño Modelo Vista Controlador (o MVC), que permiten separar el tratamiento y acceso a los Datos, la Lógica de control y la Interfaz de usuario en tres componentes independientes.16 1.6.5.4. JavaScript. A veces llamado sólo de JS es un lenguaje de programación, leve, interpretado, orientado a objetos, basada en prototipos y en first-class functions (funciones de primera clase), más conocida como el lenguaje de script de la Web. También se utiliza en otros entornos como node.js y Apache CouchDB". Javasript es el lenguaje de programación que Netscape creó para dar vida (del lado del cliente - front end) a su navegador. El nombre tiene una orientación comercial, quisieron aprovechar el éxito de Java y escogieron un nombre similar. El resultado es que hasta hoy (2015) hay una confusión enorme. JavaScript no es Java (y viceversa). El padre de este se llama Brendan Eich. JavaScript es un lenguaje orientado a objetos. Eso significa que, en vez de tener funciones definidas globalmente para operar en valores de varios tipos, los propios tipos definen métodos para trabajar con valores. Para clasificar los elementos de un array a, por ejemplo, no pasamos a hacia una función sort(). En vez de eso, Ilamamos al método sort() de a: a.sort( ) // versión orientada a objetos de "sort(a)".17 • AJAX El término AJAX es un acrónimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asíncrono + XML". “Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.” Las tecnologías que forman AJAX son: - XHTML y CSS, para crear una presentación basada en estándares. - DOM, para la interacción y manipulación dinámica de la presentación. - XML, XSLT y JSON, para el intercambio y la manipulación de información. 16 17. PHP https://www.ecured.cu/PHP AYOZE CASTILLO, Alberto; Curso de programación web: JavaScript, Ajax y jQuery; segunda Edición, p 13.. 28.

(29) - XMLHttpRequest, para el intercambio asíncrono de información. - JavaScript, para unir todas las demás tecnologías. Figura 3. Tecnologías agrupadas bajo el concepto de AJAX. Fuente: Introducción a AJAX Disponible en: http://roa.ult.edu.cu/bitstream/123456789/439/1/introduccion_ajax.pdf. AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano. Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor. 18 1.6.6. Metodología de desarrollo: Metodología RUP. Es una metodología cuyo fin es entregar un producto de software. Se estructura todos los procesos y se mide la eficiencia de la organización. Es un proceso de desarrollo de software el cual utiliza el lenguaje unificado de modelado UML, constituye la metodología estándar más utilizada para el análisis, implementación y documentación de sistemas orientados a objetos. El RUP es un conjunto de metodologías adaptables al contexto y necesidades de cada organización. Describe cómo aplicar enfoques para el desarrollo del software, llevando a cabo unos pasos para su realización. Se centra en la producción y mantenimiento de modelos del sistema. 1.6.6.1. Principales características. • Forma disciplinada de asignar tareas y responsabilidades (quién hace qué, cuándo y cómo) • Pretende implementar las mejores prácticas en Ingeniería de Software. 18. EGUÍLUZ PÉREZ, Javier; Introducción a AJAX, 7 de junio de 2008, p 5-6. 29.

(30) • Administración de requisitos • Modelado visual del software • Verificación de la calidad del software El RUP es un producto de Rational (IBM). Se caracteriza por ser iterativo e incremental, estar centrado en la arquitectura y guiado por los casos de uso. Incluye artefactos (que son los productos tangibles del proceso como, por ejemplo, el modelo de casos de uso, el código fuente, etc.) y roles (papel que desempeña una persona en un determinado momento, una persona puede desempeñar distintos roles a lo largo del proceso). Esfuerzo en actividades según fase del proyecto: El ciclo de vida RUP es una implementación del Desarrollo en espiral. Fue creado ensamblando los elementos en secuencias semi-ordenadas. El ciclo de vida organiza las tareas en fases e iteraciones. RUP divide el proceso en cuatro fases, dentro de las cuales se realizan varias iteraciones en número variable según el proyecto y en las que se hace un mayor o menor hincapié en las distintas actividades. 1.6.6.2. Fases del ciclo de vida del RUP. • Fase de inicio: Esta fase tiene como propósito definir y acordar el alcance del proyecto con los patrocinadores, identificar los riesgos asociados al proyecto, proponer una visión muy general de la arquitectura de software y producir el plan de las fases y el de iteraciones posteriores. • Fase de elaboración: En la fase de elaboración se seleccionan los casos de uso que permiten definir la arquitectura base del sistema y se desarrollaran en esta fase, se realiza la especificación de los casos de uso seleccionados y el primer análisis del dominio del problema, se diseña la solución preliminar. • Fase de desarrollo: El propósito de esta fase es completar la funcionalidad del sistema, para ello se deben clarificar los requerimientos pendientes, administrar los cambios de acuerdo con las evaluaciones realizados por los usuarios y se realizan las mejoras para el proyecto. • Fase de cierre: El propósito de esta fase es asegurar que el software esté disponible para los usuarios finales, ajustar los errores y defectos encontrados en las pruebas de aceptación, capacitar a los usuarios y proveer el soporte técnico necesario. Se debe verificar que el producto cumpla con las especificaciones entregadas por las personas involucradas en el proyecto.. 30.

(31) 1.6.6.3. Principios clave. • Adaptación del proceso: El proceso debe adaptarse a las características de la organización para la que se está desarrollando el software. • Balancear prioridades: Debe encontrarse un balance que satisfaga a todos los inversores del proyecto. • Colaboración entre equipos: Debe haber una comunicación fluida para coordinar requerimientos, desarrollo, evaluaciones, planes, resultados, entre otros. • Demostrar valor iterativamente: Los proyectos se entregan, aunque sea de una forma interna, en etapas iteradas. En cada iteración se evaluará la calidad y estabilidad del producto y analizará la opinión y sugerencias de los inversores. • Elevar el nivel de abstracción: Motivar el uso de conceptos reutilizables. • Enfocarse en la calidad: La calidad del producto debe verificarse en cada aspecto de la producción. 1.6.6.4. Disciplina de desarrollo de RUP. • Determina las etapas a realizar durante el proyecto de creación del software. • Ingeniería o modelado del negocio: Analizar y entender las necesidades del negocio para el cual se está desarrollando el software. • Requisitos: Proveer una base para estimar los costos y tiempo de desarrollo del sistema • Análisis y diseño: Trasladar los requisitos analizados con anterioridad a un sistema automatizado y desarrollar una arquitectura para el sistema • Implementación: Crear software que se ajuste a la arquitectura diseñada y que tenga el comportamiento deseado. • Pruebas: Asegurarse de que el comportamiento requerido es correcto y que todo lo solicitado está presente. • Despliegue: Producir distribuciones del producto y distribuirlo a los usuarios. 1.6.6.5. Disciplina de soporte RUP. • Determina la documentación que es necesaria realizar durante el proyecto. • Configuración y administración del cambio: Guardar todas las versiones del proyecto. • Administración del proyecto: Administrar los horarios y recursos que se deben de emplear. • Ambiente: Administrar el ambiente de desarrollo del software.. 31.

(32) • Distribución: Hacer todo lo necesario para la salida del proyecto19. 1.7. MARCO CONCEPTUAL. 1.7.1. Responsive web design Es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo (CSS), consigue adaptar el sitio web al entorno del usuario. Ethan Marcotte fue quien creó y difundió esta técnica en el año 2010 a partir de una serie de artículos en A ListApart (http://www.alistapart.com/articles/responsive-web-design/), que es una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design, lo anterior denota que es un concepto que está en proceso de maduración, y con un crecimiento sostenido y globalizado. Dicho concepto, consolidó tres técnicas existentes en el diseño web: diseño de cuadrícula flexible, imágenes flexibles, y los medios de comunicación y las consultas de los medios de comunicación. El concepto Responsive Web Design también es conocido como: diseño fluido, diseño elástico, el diseño de goma, diseño líquido, diseño adaptativo, el diseño transversal de dispositivo, y diseño flexible20 1.7.2. Navegador web. Es un programa o Software, por lo general gratuito, que nos permite visualizar páginas web a través de Internet o en el propio ordenador, además posibilita acceder a otros recursos de información alojados también en Servidores Web, como pueden ser videos, imágenes, audio y archivos XML. El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.. 19. Metodología RUP https://procesosdesoftware.wikispaces.com/METODOLOGIA+RUP [Citado el 13 de marzo de 2016] 20 Incorporación de redes sociales y aplicación de principios de diseño adaptativo para la plataforma Moodle http://www.scielo.org.co/scielo.php?pid=S1692-17982014000100006&script=sci_arttext&tlng=es [Citado el 13 de marzo de 2016]. 32.

(33) 1.7.2.1. Características. • ¿Cómo funcionan los navegadores? Los navegadores se comunican con los servidores web por medio del protocolo de transferencia de hipertexto (HTTP) para acceder a las direcciones de Internet (URLs) a través de los motores de búsqueda. La mayoría de los exploradores web admiten otros protocolos de red como HTTPS (la versión segura de HTTP), Gopher, y FTP, así como los lenguajes de marcado o estándares HTML y XHTML de los documentos web. Los navegadores además interactúan con complementos o aplicaciones (Plugins) para admitir archivos Flash y programas en Java (Java applets). • Tareas comunes de los navegadores Todos los navegadores incluyen la mayoría de las siguientes características: navegación por pestañas, bloqueador de ventanas emergentes, soporte para motores de búsqueda, gestor de descargas, marcadores y atajos del teclado. Para mantener la privacidad casi todos los navegadores ofrecen maneras sencillas de borrar cookies, cachés web y el historial. Las suites de Internet son aquellos exploradores web que incluyen programas integrados capaces de leer noticias de Usenet, correos electrónicos, e IRC, que son chats de texto en tiempo real a través de los protocolos IMAP, NNTP y POP. Suelen utilizar el protocolo de seguridad HTTPS a través de los protocolos criptográficos SSL/TLS para proteger los datos de intercambio con los servidores web. También suelen contar con protección antiphishing y antimalware.21 1.7.3. Seguridad. La palabra Seguridad proviene del latín securitas, que a su vez deriva de securus (sin cuidado, sin precaución, sin temor a preocuparse), que significa libre de cualquier peligro o daño, y desde el punto de vista psicosocial se puede considerar como un estado mental que produce en los individuos (personas y animales) un particular sentimiento de que se está fuera o alejado de todo peligro ante cualquier circunstancia. La seguridad es la garantía que tienen las personas de estar libre de todo daño, amenaza, peligro o riesgo; es la necesidad de sentirse protegidas, contra todo aquello que pueda perturbar o atentar contra su integridad física, moral, social y hasta económica22. 21 22. Navegador web https://www.ecured.cu/Navegador_web [Citado el 17 de septiembre de 2017] Seguridad http://conceptodefinicion.de/seguridad/ [Citado el 17 de septiembre de 2017]. 33.