CAPÍTULO IV: IMPLEMENTACIÓN Y PRUEBAS
4.5 Pruebas de usabilidad del SIW
4.5.2 Paradigmas y técnicas
4.5.2.2 Roles
Para las pruebas de usabilidad del SIW se contó con la ayuda de estudiantes registrados en el INBIOTECA, además de una persona que labora en el instituto (ver tabla 8).
Usuario Rol Programa Escolaridad
1 Moderador Ingeniería Ambiental Licenciatura
2 Usuario Maestría en Ciencias Licenciatura
3 Usuario Maestría en Ciencias Licenciatura
4 Usuario Doctorado en Ciencias Maestría
5 Usuario Doctorado en Ciencias Maestría
6 Usuario Personal eventual Licenciatura
97
4.5.3 Aplicación de la prueba
Los usuarios tomaran el rol de administrador del Sistema de Información Web para realizar las siguientes tareas:
1. Inicio de sesión y navegación por el sistema. 2. Registrar un libro.
3. Registrar un usuario (estudiante)
4.6 Resultados
Después de haber realizados el ejercicio de pruebas de usabilidad web sobre el Sistema de Información del INBIOTECA, se detectaron los siguiente:
Actividad 1: Iniciar sesión
En esta actividad los usuarios realizaron el inicio de sesión y la navegación del Sistema de Información.
Hora termino Hora
inicio Total
AC
TIV
IDAD
1
Usuario 1 11.27 11.29 1.47 Usuario 2 13.03 13.01 2.29 Usuario 3 13.48 13.45 3.47 Usuario 4 14.28 14.24 4.27 Usuario 5 15.11 15.06 4.5 Mediana 3.47 Promedio 3.298
PROS
• El 100% de los usuarios realizo la primera actividad sin inconvenientes.
CONTRAS
• Conforme fueron pasando los usuarios, se fue incrementando el tiempo para
realizar la actividad.
• El tiempo más prolongado para realizar la actividad fue de 4.27 minutos.
• Algunos de los usuarios no usaban la barra de navegación del sistema, usaba los
botones del navegador. Actividad 2: Registrar un libro
En esta actividad los usuarios tenían que dar de alta un libro. Para eso se les facilitóun
volumen de la biblioteca.
Hora termino Hora
inicio Total
AC
TIV
IDAD
2
Usuario 1 11.39 11.33 6.1 Usuario 2 13.2 13.14 6.31 Usuario 3 14.01 13.55 5.55 Usuario 4 14.39 14.31 6.53 Usuario 5 15.22 15.14 8.22 Mediana 6.31 Promedio 6.542Tabla 10: Resultados de la actividad 2: Registrar un libro
PROS
• El 100% de los usuarios realizo la segunda actividad sin inconvenientes.
99
CONTRAS
• El tiempo más prolongado para realizar la actividad fue de 8.22 minutos.
• Algunos de los usuarios no usaron la barra de navegación del sistema, usaron
los botones del navegador.
Actividad 3: Dar de alta un usuario (Estudiante)
La tercera actividad, fue la más compleja. En la prueba se tenía que dar de alta un nuevo Usuario con el perfil de Estudiante.
Hora termino Hora
inicio Total
AC
TIV
IDAD
3
Usuario 1 11.52 11.42 9.53 Usuario 2 13.31 13.25 6.32 Usuario 3 14.1 14.03 7.07 Usuario 4 14.46 14.41 4 Usuario 5 15.33 15.24 8.26 Mediana 7.07 Promedio 7.036Tabla 11: Resultados de la actividad 3: Dar de alta un usuario (estudiante)
PROS
• El 80% de los usuarios realizo la tercera actividad sin inconvenientes.
• El módulo de agregar usuario funciono perfectamente.
CONTRAS
• El tiempo más prolongado para realizar la actividad fue de 8.26 minutos.
• Un usuario no encontró el módulo de usuario, por lo que agregó al usuario en
100
• El sistema envió un error cuando agregaba una imagen, pero no la adjuntaban,
al dar guardar, tronaba el sistema.
• Algunos de los usuarios no usaron la barra de navegación del sistema, usaron
los botones del navegador.
4.7 Adecuaciones
Después de haber analizado los resultados de las pruebas de usabilidad del Sistema de Información, se realizaron las siguientes modificaciones:
1. Se mejoró la barra de navegación del sistema, se hizo más visible, más usable,
se resaltó más (para ayudar a que los usuarios la usen como su opción de navegación interna del sistema).
2. Se colocaron íconos al menú de configuración, para dar mayor claridad a los
usuarios de lo que significa cada opción.
3. Se agregó una pequeña descripción como tooltip, con el fin de definir qué tarea
se puede realizar en el menú de configuración.
4. Se hizo más ágil el sistema, ya que algunas veces se quedaba cargando.
5. Se mejoraron los mensajes de retroalimentación del usuario, para que fueran
más vistoso y usables cuando muestran el mensaje: “Tarea realizada
exitosamente”.
6. Se hicieron más usables los formularios (adaptables y claros), ya que en algunas
vistas se podían ver confusos y cargados de información.
7. Se colocaron mensajes de ayuda en los cuadros de texto con el fin de orientar
al usuario.
101
4.8 Trabajos futuros
El módulo de configuración del Sistema de Información del INBIOTECA, se diseñó con el fin de ser escalable y modular, para que apoye a futuros módulos del sistema como: evaluaciones internas de cursos de posgrado, agenda institucional, evaluación de proyectos de tesis, agregar la productividad científica del instituto (artículos, libros, capítulos de libros, entre otros).
103
CONCLUSIONES
Se diseño e implemento un Sistema de Información Web que permitió optimizar los procesos directivos y administrativos del Instituto de Biotecnología y Ecología Aplicada de la Universidad Veracruzana.
Sus principales características son la consulta de información a través de un módulo de reactivos, equipos, acervo bibliográfico y el registro de usuarios. Además, se implementó el envío de mensajes de texto SMS para una comunicación entre el académico con los estudiantes y como método de notificación en el sistema.
Como resultado de la implementación del Sistema de Información Web del INBIOTECA, se pudo apreciar que tiene una gran aceptación por la comunidad académica, administrativa y estudiantil del Instituto. El hecho de tener la información en cualquier momento, a la par de la transparencia de la información que exige hoy en día nuestra sociedad, ayuda a que los investigadores puedan mejorar los canales de comunicación entre ellos mismos, cuando quieren solicitar un reactivo o un equipo.
El control de usuario apoya a la toma de decisiones tanto directiva como administrativa. Directiva porque es más fácil, conocer con que instituciones (de la misma Universidad Veracruzana o externas) se tienen lazos de trabajo a través de los estudiantes, saber cuáles son las Líneas de Generación y Aplicación del Conocimiento más atractivas para los estudiantes, también, generar los reportes que solicitan de la Dirección General de Investigaciones (DGI) o de la Rectoría. Para los Administrativos ayuda a identificar quien es el responsable de cada estudiante y así, tener un listado para controlar los accesos a laboratorios; además, al conocer el promedio de asistencia diaria, ayuda a calcular el gasto en insumos (jabón de baño, papel, toallitas, etc.) El poder implementar mensajes de texto (SMS) como canal de comunicación directa con los estudiantes, ha permito que se sientan incluidos y parte de esta gran comunidad.
105
BIBLIOGRAFÍA
ASP.NET MVC - Microsoft. (19 de 01 de 2014). ASP.NET MVC. Obtenido de MVC: https://docs.microsoft.com/en-us/aspnet/mvc/mvc5
Basterretche, J. F. (20 de Abril de 2015). Dispositivos Móviles. Obtenido de http://exa.unne.edu.ar/informatica/SO/tfbasterretche.pdf
Bimbo, A. (2000). Multimedia computing and systems. IEEE Multimedia Magazine, 7(1): 18- 21.
Boem, B. W. (1998). A Spiral Model of Software Development and. Center for Systems and Software Engineering, 1-25.
CA INBIOTECA - UV. (27 de 03 de 2016). Cuerpos Académicos. Obtenido de https://www.uv.mx/inbioteca/academicos/
Canós, J.; Letelier, P.; Penadés, M. (23 de Abril de 2016). Metodologías Ágiles en el Desarrollo de Software. Obtenido de Ingeniería del Software y Sistemas de Información. Universidad Politécnica de Valencia.: http://issi.dsic.upv.es/archives/f- 1069167248521/actas.pdf
Chen, P. (1976). The Entity Relationship Model – Toward a Unified View of Data. ACM Transactions on Database Systems, 312-339.
Detlor, B. (2000). The corporate portal as information infrastructure: towards a framework for portal design. International Journal of Information Management, 20(2): 91-101.
DGTI - UV. (01 de 02 de 2010). Servicios Tecnológicos. Obtenido de https://www.uv.mx/dgti/
Fernández Martínez, A. (2012). A Usability Inspection Method for Model-driven Web Development Processes. Valencia, España: Universidad Politécnica de Valencia.
Gómez Vietes, A., Suárez Rey C. (2010). Sistemas de Información. Herramientas prácticas para la gestión empresarial. México, D.F.: Alfaomega Grupo Editor.
106
Gregor, S., Jones, D., Lynch, T. and Plummer, A.A. (1997). Web information systems development: some neglected aspects. Proceedings of the International Business Association Conference, 175-187.
Grosky, W. (1997). Managing multimedia information in database systems. Communications of the ACM, 40(12): 72-80.
INBIOTECA -UV. (01 de 01 de 2016). Servidor de Aplicaciones. Obtenido de https://www.uv.mx/apps/inbioteca/sistema/
Isakowitz, T., Bieber, M. and Vitali F. (1998). Web Information Systems. Communications of the ACM , 41(7):78-80 .
Jacobson, I. (1992). Object Oriented Software Engineering: A Use Case Driven Approach: A Use CASE Approach. Redwood City, CA, USA: Addison Wesley.
James Rumbaugh, I. J. (2000). El lengiaje Unificado de Modelado. Manual de Referencia. Madrid: Pearson Education S. A.
Liang, Y. (2006). User-Website Interactive Communication Analysis in Web-Based. CSREA EEE, 155-161.
https://actividadesludicas2012.wordpress.com/author/venerandablanco14/ Microsoft. (23 de 09 de 2017). Dreamspark. Obtenido de dreamspark: htt
Peña Ayala, A. (2006). Ingeniería de Software: Una guía para crear sistemas de información. México, D.F.: Instituto Politécnico Nacional.
Peralta, M. (2008). Sistema de Información. Obtenido de monografias: https://www.monografias.com/trabajos7/sisinf/sisinf.shtml
Pressman, R. S. (2010). Ingeniería del Software. Un enfoque práctico. México, D.F.: Mc Graw Hill.
Stellman A., Greene J. (2008). Applied Software Project Management. Sebastopol, California, USA: O'Reilly Media.
Vieites, A., Suárez, C. (2004). Sistemas de Información. México, D.F.: Alfaomega.
Vilaseca, J., Torrent J. (2003). LES TIC I LES TRANSFORMACIONS. Catalunya: Universitat Oberta de Catalunya.
Wiegers K. and Beatty J. (2013). Software Requeriments. Third Edition. Redmond, Washington, USA: Microsoft Press.
107
ÍNDICE DE ILUSTRACIONES
Ilustración 1:Pantalla de inicio de sesión del SIIU ... 3
Ilustración 2: Pantalla principal del SIIU ... 4
Ilustración 3:Pantalla de inicio del SCPI ... 4
Ilustración 4: Pantalla principal del SCPI ... 5
Ilustración 5: Pantalla de inicio de sesión de Eminus ... 6
Ilustración 6: Pantalla principal de Eminus ... 6
Ilustración 7: La triple dimensión de los Sistemas de Información ... 16
Ilustración 8: Elementos de un Sistema de Información... 17
Ilustración 9: Extracto de código HTML ... 18
Ilustración 10: Estructura general de un SIW ... 19
Ilustración 11: Elementos principales de un SIW ... 21
Ilustración 12: Modelo en Cascada (Waterfall) ... 24
Ilustración 13: Modelo en espiral ... 26
Ilustración 14: Modelo Iterativo o Incremental ... 29
Ilustración 15: CU - Iniciar sesión ... 38
Ilustración 16: CU - Agregar Cuerpo Académico ... 40
Ilustración 17: CU - Agregar una LGAC ... 41
Ilustración 18: CU - Agregar Fuente de Financiamiento ... 43
Ilustración 19: CU - Agregar Proyectos ... 45
Ilustración 20: CU - Agregar Instituciones ... 46
Ilustración 21: CU - Agregar Campus ... 48
Ilustración 22: Ejemplo de un Diagrama E-R ... 50
Ilustración 23: Diagrama Entidad-Relación de la DB ... 50
Ilustración 24: Arquitectura de Software ... 51
Ilustración 25: Página de Dreamspark ... 52
Ilustración 26: Página de búsqueda de software de Dreamspark ... 53
108
Ilustración 28: Visual Studio en Dreamspark ... 54
Ilustración 29: Interfaz Principal de SQL Server ... 55
Ilustración 30: Pantalla principal de Visual Studio ... 55
Ilustración 31: Estructura de Usuarios del SIW INBIOTECA ... 56
Ilustración 32: Pantalla de Inicio de Sesión ... 57
Ilustración 33: Menú principal del Administrador ... 58
Ilustración 34: Módulos del menú Configuración ... 58
Ilustración 35: Continuación del módulo de Configuración ... 59
Ilustración 36: Listado de Cuerpos Académicos ... 59
Ilustración 37: Vista para agregar un Cuerpo Académico ... 60
Ilustración 38: Pantalla de Edición de Cuerpo Académico ... 60
Ilustración 39: Listado de LGAC ... 61
Ilustración 40: Pantalla para agregar una LGAC ... 62
Ilustración 41: Pantalla de edición de una LGAC ... 62
Ilustración 42: Listado de Fuentes de Financiamiento ... 63
Ilustración 43: Pantalla para agregar una Fuente de Financiamiento ... 63
Ilustración 44: Pantalla de listado de Proyectos ... 64
Ilustración 45: Pantalla de edición de Proyectos ... 64
Ilustración 46: Pantalla de Listado de Instituciones ... 65
Ilustración 47: Pantalla de edición de Instituciones ... 66
Ilustración 48: Pantalla de listado de Campus ... 66
Ilustración 49: Pantalla de edición de Campus ... 67
Ilustración 50: Pantalla de listado de Facultades ... 67
Ilustración 51: Pantalla de edición de Facultades ... 68
Ilustración 52: Pantalla de listado de Programas ... 68
Ilustración 53: Pantalla de edición de facultades ... 69
Ilustración 54: Listado de Periodos ... 70
Ilustración 55: Pantalla para agregar nuevo Periodo ... 70
Ilustración 56: Listado de Tipos de Estancia ... 71
109
Ilustración 58: Listado de la Bibliografía ... 72
Ilustración 59: Pantalla para editar una Bibliografía ... 73
Ilustración 60: Mensaje de advertencia para eliminar un registro ... 73
Ilustración 61: Pantalla principal de Usuarios ... 74
Ilustración 62: Selección de nuevo Usuario ... 74
Ilustración 63: Pantalla de registro de académicos ... 75
Ilustración 64: Pantalla de registro exitoso ... 75
Ilustración 65: Pantalla de registro de Estudiantes ... 76
Ilustración 66: Mensaje para confirmar eliminar Usuario ... 76
Ilustración 67: Pantalla principal de Reportes ... 77
Ilustración 68: Acomodo de archivos html en VS 2017 ... 81
Ilustración 69: Muestra de código HTML ... 82
Ilustración 70: Interpretación de HTML en navegador web ... 83
Ilustración 71: Implementación de estilos con Bootstrap ... 83
Ilustración 72: Implementación de funciones JQuery ... 84
Ilustración 73: Vista de archivos C# en VS2017 ... 85
Ilustración 74: Ejemplo de implementación de una función en C# ... 85
Ilustración 75: Ejemplo de una consulta utilizando SQL ... 86
Ilustración 76: Patrón MVC asociado a la tecnología web ... 87
Ilustración 77: Modelo MVC implementado en el SIW INBIOTECA ... 87
Ilustración 78: MVC en el entorno de Desarrollo de Visual Studio 2017 ... 88
Ilustración 79: Los Modelos de MVC en VS 2017 ... 88
Ilustración 80: Vista de proyecto del SI ... 89
Ilustración 81: Controlador del proyecto SI ... 89
Ilustración 82: Implementación de función de envío de SMS ... 90
Ilustración 83: SMS de bienenida al INBIOTECA ... 91
Ilustración 84: QR asignado a un usuario ... 92
Ilustración 85: Identificación interna de acceso al INBIOTECA ... 93
Ilustración 86: Planeación de distribución del laboratorio de pruebas... 95
111
ÍNDICE DE TABLAS
Tabla 1: Caso de Uso: Iniciar sesión ... 39
Tabla 2: Caso de Uso: Cuerpo Académico ... 41
Tabla 3: Caso de Uso: Línea de Generación y Aplicación del Conocimiento ... 42
Tabla 4: Caso de Uso: Fuente de Financiamiento ... 44
Tabla 5: Caso de Uso: Proyecto ... 46
Tabla 6: Caso de Uso: Institución ... 47
Tabla 7: Caso de Uso: Campus ... 49
Tabla 8: Distribución de roles de usuario ... 96
Tabla 9: Resultados de la actividad 1: Inicio de sesión ... 97
Tabla 10: Resultados de la actividad 2: Registrar un libro ... 98
113