sherlock: plataforma web de apoyo a la...
TRANSCRIPT
1
SHERLOCK: PLATAFORMA WEB
DE APOYO A LA INVESTIGACIÓN, INFORMACIÓN Y GESTIÓN
DE ANTEPROYECTOS, PROYECTOS DE GRADO Y GRUPOS DE
INVESTIGACIÓN
Sebastian Vargas Arenas
Facultad de Ingeniería
Programa de Ingeniería Multimedia
Cali
2017
2
SHERLOCK: PLATAFORMA WEB
DE APOYO A LA INVESTIGACIÓN, INFORMACIÓN Y GESTIÓN
DE ANTEPROYECTOS, PROYECTOS DE GRADO Y GRUPOS DE
INVESTIGACIÓN
Sebastian Vargas Arenas
Trabajo de grado para optar por el título de Ingeniero Multimedia
Ing. Pablo Anibal Bejarano De la Hoz,
Especialista en Procesos de Desarrollo de Software
Asesor de tesis
Facultad de Ingeniería
Programa de Ingeniería Multimedia
Cali
2017
3
1. Resumen
En la Universidad de San Buenaventura Cali nace una idea con el objetivo
enriquecer y mejorar los procesos de investigación de la carrera de Ingeniería
Multimedia, asimismo con el propósito de incentivar la investigación a través de la
construcción de proyectos de grado y semilleros de investigación de calidad: se
formula, basado en la vasta aceptación y uso de la Internet como medio de
soluciones, la construcción de una aplicación web de apoyo a la investigación,
información y gestión de anteproyectos, proyectos de grado y grupos de
investigación, fundada con el nombre de “Sherlock”.
La implementación de la plataforma se llevó a cabo gracias a la planeación de los
requerimientos solicitados por los directivos de la carrera de Ingeniería Multimedia,
creando así un producto de calidad con posibilidades de seguir creciendo en
manos de futuros desarrolladores que decidan ser parte de este proyecto, además
de servir de referente para futuras investigaciones, ya sean proyectos de grado o
semilleros de investigación, y finalmente destacando la capacidad de desarrollo de
la Universidad de San Buenaventura Cali.
Palabras clave: Aplicaciones Web, Plataformas de investigación, E-Learning.
4
Dedico esta investigación a los docentes que fueron parte de mi formación como
desarrollador, enseñándome a construir puentes de progreso y solución.
¡Muchas gracias!
5
2. Contenido
1. Resumen 3
2. Contenido 5
3. Lista de figuras 10
4. Introducción 12
4.1. Objetivos 13
4.1.1. Objetivo general 13
4.1.2. Objetivos específicos 13
4.2. Descripción del problema 14
4.3. Justificación 16
5. Marco teórico 20
5.1. Marco conceptual 20
5.1.1. Prórrogas 20
5.1.2. Antecedentes 20
5.1.3. Líneas de investigación 20
5.1.4. Docente de investigación 20
5.1.5. Grupos de investigación o semilleros 21
5.2. Procedimientos Administrativos 21
5.2.1. Elaboración y entrega de Propuesta de Trabajo de Grado 21
5.2.2. Elaboración y Entrega de Anteproyecto de Trabajo de Grado 21
5.2.3. Elaboración y Entrega de Proyecto Final 22
5.3. Desarrollo web 22
5.3.1. Historia y evolución del desarrollo web 22
6
5.3.2. Desarrollo Back-End 25
5.3.2.1. PHP (Hypertext Pre-processor) 26
5.3.2.2. SQL 26
5.3.3. Desarrollo Front-End 27
5.3.3.1. HTML 28
5.3.3.2. CSS 28
5.3.3.3. JavaScript 28
5.3.3.4. Ajax 29
5.3.3.5. Jquery 29
5.3.4. Servicios web 29
5.3.4.1. SOA(Service Oriented Architecture) 30
5.3.4.2. SOAP 32
5.3.4.3. REST 32
5.4. Bases de datos 33
5.4.1. Base de datos no relacionales (noSQL) 33
5.4.1.1. MongoDB 34
5.4.1.2. Riak 35
5.4.1.3. Cassandra 37
5.4.1.4. Neo4j 39
5.4.2. Base de datos Relacionales 40
5.4.2.1. MySQL 42
5.4.2.2. Oracle 43
5.4.2.3. Patrón Maestro Detalle (Master Detail) 43
5.4.3. ORM (Object-relational mapping) 44
5.5. Arquitectura de software 45
5.5.1. Patrones arquitectónicos 45
7
5.5.1.1. Publish Subscribe 46
5.6. Ingeniería de software 46
5.6.0.1. Patrones de diseño 46
5.6.0.2. Patrones creacionales 47
5.6.0.2.1. MVC 47
5.6.0.2.2. Singleton 48
5.6.0.3. Patrones estructurales 49
5.6.0.4. Patrones de comportamiento 49
5.7. Diseño de interfaces 49
5.7.1. Diseño de una interfaz de usuario 50
5.7.2. Diseño de interfaz para web 51
5.7.2.1. Diseño responsivo 52
5.8. Experiencia de usuario (UX) 53
5.9. Usabilidad 55
5.10. Filosofías de diseño 57
5.10.1. Flat Design 57
5.10.2. Material Design 58
6. Antecedentes 59
6.1. Plataformas de investigación, colaborativas y educativas 59
6.1.1. Schoology 59
6.1.2. Trello 61
6.1.3. Claroline 62
6.1.4. Dokeos 62
6.2. Investigaciones científicas 64
6.2.1. Sistema de información y gestión proyectos de grado de la
Universidad del Valle 64
8
6.2.2. Sistema de información para la gestión de trabajos de grado de la
Universidad de Cartagena 64
6.2.3. Sistemas de Elearning abiertos basados en servicios 65
6.2.4. Desarrollo de un bloque para la gestión de tutorías en Moodle 65
7. Desarrollo 66
7.1. Metodología 66
7.1.1. Investigación en diseño y desarrollo 66
7.1.2. Reuniones con stakeholders 67
7.1.3. Diseño y maquetación de la interfaz de usuario 68
7.1.4. Etapa de diseño de base de datos 68
7.1.5. Etapa de desarrollo de la plataforma web 68
7.1.6. Pruebas 69
7.1.7. Elaboración de documento científico 70
7.2. Diseño 70
7.2.1. Estudio del color 70
7.2.2. Tipografía 71
7.2.3. Iconografía 72
7.3. Implementación 72
7.3.1. Levantamiento de requisitos 72
7.3.2. Diseño detallado de software 73
7.3.3. Arquitectura 75
7.3.4. Implementación de la plataforma 79
7.3.4.1. Base de datos de la plataforma 79
7.3.4.2. Maquetación de la plataforma usando Wireframes 79
7.3.4.3. Estructuración e implementación de módulos de la plataforma 81
8. Pruebas y análisis 85
9
8.1. Primera reunión con stakeholder principales 85
8.2. Pruebas de aceptación de los stakeholders 86
8.3. Encuestas de experiencia de usuario 87
9. Conclusiones y trabajos a futuro 92
10. Referencias 97
11. Anexos 111
10
3. Lista de figuras 5.1. Esquema Web 1.0.
5.2. Esquema Web 2.0.
5.3. Esquema Web 3.0.
5.4. Esquema PHP.
5.5. Esquema SQL.
5.6. Esquema Servicios Web.
5.7. Esquema de Arquitectura Orientada a Servicios.
5.8. Ejemplo de manejo de datos con MongoDB.
5.9. Esquema base de datos NoSQL Riak.
5.10. Movimiento de datos con Cassandra.
5.11. Arquitectura lógica de Neo4j.
5.12. Ejemplo de Base de Datos Relacional.
5.13. Ejemplo de patrón de bases de datos relaciona ‘Maestro Detalle’.
5.14. Esquema de la técnica de programación ORM.
5.15. Esquema del patrón de diseño MVC.
5.16. Esquema del patrón Singleton.
5.17. Esquema Diseño Responsivo.
5.18. Esquema Experiencia de Usuario (UX).
5.19. Ejemplo de diseño Material Design.
5.20. Captura de la plataforma educativa Schoology.
5.21. Captura de la plataforma colaborativa Trello.
7.22. Estilos de tipografía Roboto.
7.23. Estructura de carpetas de aplicación web.
7.24. Wireframe objeto detalle de Sherlock.
7.25. Página web informativa de Sherlock.
7.26. Detalle de un proyecto de grado.
11
8.27. Respuestas pregunta 1: Considero que Sherlock brinda apoyo en la creación y
gestión de grupos de investigación.
8.28. Respuestas pregunta 2: Considero que Sherlock ayudará a facilitar los
procesos de planteamiento de anteproyectos de grado.
8.29. Respuestas pregunta 3: La plataforma de investigación facilita la gestión de
los proyectos de investigación mediante la gerencia de un calendario de
actividades y administración de archivos.
8.30. Respuestas pregunta 4: Los procesos de búsqueda de antecedentes son más
amigables utilizando la plataforma de investigación.
8.31. Respuestas pregunta 5: La aplicación web es intuitiva y amigable con el
usuario en el proceso informativo de los docentes investigadores, proyectos de la
bolsa y semilleros de investigación de la carrera de Ingeniería Multimedia.
8.32. Respuestas pregunta 6: La plataforma de Sherlock posee buenos tiempos de
reacción, permitiendo la navegación en ella de forma ágil.
8.33. Respuestas pregunta 7: La plataforma Sherlock brinda buenas alternativas de
información para colaborar en el proceso de exploración y utilización de las
diferentes funcionalidades que ofrece.
8.34. Respuestas pregunta 8: La plataforma me permite estar al día con el estado y
el proceso de los proyectos de investigación a través de la recepción oportuna de
notificaciones.
12
4. Introducción La era de la información ha traído consigo un fenómeno en la sociedad actual
frente a los avances tecnológicos, y la forma en que estas herramientas son
implementadas, por esto cabe recalcar que es importante para un desarrollador
web no solo conocer las herramientas que tiene a su disposición, sino también el
conocer el porqué de dichas herramientas. El proporcionar una visión histórica de
la web y saber cómo ha sido su evolución es importante para todo pionero de las
nuevas adquisiciones tecnológicas.
Tim Berners-Lee, conocido como el padre de la web ( World Wide Web), creó el
sistema de localización de recursos (URL) y el lenguaje de etiquetas (HTML) de tal
forma que mediante enlaces permitiera a todo científico en el mundo acceder a la
información semejante a la que consultasen [1]; hoy en día la web es algo muy
distinto a lo que Tim Berners-Lee concibió, es decir, se popularizó y se vio en la
necesidad de evolucionar, dando paso a las páginas web dinámicas, donde el
desarrollador interactúa con sus herramientas, mejor conocida como la web 2.0.
El concepto de web 2.0, se ha potenciado por los entornos de aprendizaje
personalizados [2], este concepto ha generado nuevos escenarios de uso de las
tecnologías de la web, dando paso a la creación de entornos personales como
Facebook y Google, los cuales contienen características destacables como los
sistemas orientados a servicios, aprendizaje y para el usuario [2].
Frente a esta situación, actualmente internet se puede ver como una fuente de
recursos, información, servicios y aplicaciones, cuyos beneficios generan una
rapidez y una variedad de nuevas posibilidades al optimizar la rigidez y la lentitud
de los organismos como las universidades, ante este conflicto es evidente buscar
mecanismos que ayuden a estas entidades a adaptarse a las nuevas tecnologías
13
de una forma sencilla, facilitando la comunicación entre los integrantes de una
comunidad y el trabajo colaborativo para la gestión, el desarrollo y la culminación
de proyectos y semilleros de investigación que están con el fin de aportar algo a un
público en particular o la sociedad misma, sin que se pierda el registro de su
proceso con fines futuros de lograr un ciclo constante cambio y mejoramiento.
El proyecto entonces, está centrado en el área de investigación de Ingeniería
Multimedia, con visión futura de extenderse a todas las carreras de la Universidad
de San Buenaventura Cali, mediante la gestión de anteproyectos de grado,
proyectos de grado, grupos de investigación, docentes investigadores y
documentación, permitiendo una mejor administración de estos procesos; a raíz de
esto se diseñará e implementará una plataforma investigativa llamada “Sherlock”,
que se encargue de la integración de todos los ámbitos anteriormente
mencionados. Este desarrollo busca complementar y optimizar los procesos
institucionales de la carrera mediante el uso de nuevas tecnologías, con el fin de
acortar la brecha entre estudiantes y docentes frente al entorno investigativo.
4.1. Objetivos
4.1.1. Objetivo general
Desarrollar una plataforma web para la investigación, información y gestión de los
procesos de investigación de Ingeniería Multimedia de la Universidad de San
Buenaventura Cali.
4.1.2. Objetivos específicos
- Realizar un estudio y selección de los requerimientos más relevantes para el
óptimo desarrollo de la plataforma de acuerdo a las características más
representativas de las plataformas de investigación y similares investigadas.
14
- Diseñar la plataforma de investigación de acuerdo a los requerimientos
identificados.
- Desarrollar la plataforma de investigación implementando la lógica y
algoritmos complejos estructurados.
- Validar y corregir el funcionamiento de la plataforma de investigación por
medio de pruebas de usuario, de funcionalidad e interacción.
- Elaborar un artículo científico del proceso de desarrollo de la aplicación web
y los aportes investigativos que enriquecen el concepto E-learning y la
plataformas web.
4.2. Descripción del problema En la Universidad de San Buenaventura Cali, el alumno necesita adquirir
competencias de distinto tipo si desea ejercer su profesión a nivel profesional, esto
genera diferentes prácticas en donde el estudiante “con papel y lápiz” realiza
sesiones de trabajo y en definitiva lo que aumenta potencialmente es el número de
ocasiones en las que podría necesitar una tutoría por parte del director o supervisor
de tesis para regular su proyecto, por ende es necesario organizar una gestión de
las tutorías de manera más eficiente y sencilla tanto para los alumnos como para
los profesores.
Los avances en los aplicativos web permiten la participación en varios niveles
dentro de una activa comunidad de educadores, líderes institucionales y
desarrolladores inspirados en las actividades de enseñanza, aprendizaje e
investigación [3].En el ámbito institucional se necesitan aplicaciones con unas
características distintivas, generando un gran cambio como lo son: los datos
masivos, acceso concurrente, variedad de interfaces de usuario, entre otros, lo que
implica una diversidad en funcionalidad y soluciones a problemas planteados
anteriormente [4].
15
Actualmente el proceso de entrega de trabajos de grado presentan inconvenientes
por la difícil consecución de antecedentes por parte de tesis culminadas en la
Universidad San Buenaventura Cali, donde acceder a esta información llega a
tornarse imposible, esto es debido al deterioro y en muchos casos a la pérdida de la
evidencia física de dichos trabajos [5], además de la pérdida de información,
tampoco hay acceso a una documentación pertinente que sirva de guía para el
desarrollo adecuado de los proyectos de grado.
Durante la carrera se encuentran problemas por parte de los estudiantes en el
momento en que desean plantear su propio anteproyecto de grado, a la hora de
cumplir los tiempos de entrega y en algunos casos por parte del docente
encargado a la hora de evaluar dichos proyectos. La constante entrega de
proyectos generan trámites y gastos engorrosos, como el tiempo, dinero, papelería,
entre otros [5]. En la carrera de Ingeniería Multimedia, se crea una bolsa de
proyectos de grado por semestre, en la cual se convoca a una reunión para la
socialización de dichos proyectos, expuestos por la planta docente, esta práctica
podría mejorarse brindando información anticipada de los mismos, dando más
tiempo al alumnado para estudiarlos, sacar dudas y finalmente elegir la tesis que
más se ajuste a sus temas de interés. En la actualidad el proceso de Gestión de
grupos de investigación es realizado manualmente por los funcionarios del área,
esta práctica al ser presencial, implica un esfuerzo adicional para ellos y provoca
una descentralización de la información, lo cual hace difícil el acceso a ella por
parte los estudiantes.
El seguimiento al proceso de desarrollo del proyecto de grado presenta dificultad
al momento, pues éste carece de una formalidad y automatización, lo cual dificulta
la el control del progreso y la validación del cumplimiento de los objetivos,
perjudicando los propósitos de calidad establecidos en la visión institucional de la
Universidad de San buenaventura Cali, partiendo de la forma como actualmente se
16
gestiona el proceso de desarrollo de trabajos de grado de la Ingeniería Multimedia,
por esto se plantean los beneficios de llevar una buena gestión de dicho
procedimiento al tener registro del recorrido por el que pasó el proyecto de grado
[6].
La motivación de crear Sherlock surge como solución a los problemas de
información, documentación y gestión de los procesos de investigación de la
carrera de Ingeniería Multimedia de la Universidad de San Buenaventura Cali,
logrando un espacio amigable, práctico y que a su vez se adapte a la forma como
está evolucionando la web.
4.3. Justificación En el entorno académico de una universidad o institución educativa es importante
el proceso o recorrido formativo que vive un estudiante, independiente de la carrera
universitaria que el mismo curse, debido a que el alumnado es la razón de ser de
este tipo de entidades; ahora viéndolo desde un punto de vista más cognitivo, el
proceso de estudiar una carrera universitaria, está ligado fuertemente al ámbito
investigativo, pues para que un estudiante pueda culminar su proceso académico y
adquirir el título de profesional, deberá de aportar conocimiento a su contexto,
desde los conocimientos que ha adquirido en todo el trayecto interdisciplinario, por
esto, la idea de crear una plataforma investigativa mejoraría la forma de comunicar
la información, dar un mejor soporte a la documentación y optimizar la gestión de
los trabajos de investigación, a través de una comunicación más progresiva [7].
Una aplicación web podría mejorar los procesos de investigación influyendo
sustancialmente en el proceso educativo de un estudiante, debido a que tiene que
pasar un por una etapa de aprendizaje y formación profesional a la hora de trabajar
en proyectos de desarrollo mucho más complejos, ya que ofrecen ventajas muy
significativas como accesibilidad, soporte de información, actualización, entre
17
otros; de aquí nace la razón de crear una plataforma de investigación, por el
momento, de Ingeniería Multimedia de la Universidad de San Buenaventura Cali, a
través de un aplicativo web para ordenadores que dispondrá de una interfaz
agradable e intuitiva, mediante un dashboard o menú legible y simple que le
permitan al usuario, ya sea estudiante o docente, desenvolverse fácilmente con el
programa; además esta plataforma dispondrá de roles de usuarios como
estudiante, profesor, investigador, secretaria, administrador y súper-administrador
para una mejor administración de todo el movimiento que permita el sistema, es
decir, que los que tengan funciones u opciones más privilegiadas, como lo son el
administrador y súper-administrador, tendrán acceso a un admin-panel en vez de
un dashboard, para así llevar un control más adecuado de la aplicación. Sherlock
como es bien sabido, al encargarse de toda la parte de investigación de la carrera,
será desarrollado en base a 5 normativas o secciones para el mejor uso de su
capacidad, los cuales son:
- Anteproyectos de grado: sección que contempla grupos abiertos y cerrados,
donde los grupos abiertos son la posibilidad de que los alumnos puedan
buscar compañeros de grado; y los grupos cerrados tienen la posibilidad de
solicitar una tesis de grado o plantear una; entonces cuando un alumno está
en proceso de selección de anteproyectos, podrá hacerlo de una forma más
eficiente, ahorrando significativamente el tiempo tanto del docente como de
él mismo, ya que todo este procedimiento pasará por una serie de filtros
gestionados desde la web; además la asignación de supervisor de tesis y
solicitación de proyectos expuestos en la bolsa por los profesores será
manejado de forma más óptima evitando todos los inconvenientes que trae
consigo estos procesos de selección, como del uso apropiado del tiempo.
- Proyectos de grado: esta normativa será una herramienta para la gestión de
los proyectos de grado para así llevar un registro de lo que ha sucedido en el
18
desarrollo de la tesis, siendo un mediador favorable tanto para el docente y
el estudiante, gracias a que plasmara atributos pertinentes como: cuándo
empezó el proyecto, cuántas prórrogas lleva, quien es el director o supervisor
de la tesis, en que proceso se encuentra el proyecto de grado, las citas de
avances y asesorías, y quienes son los miembros que conforman el grupo
que está desarrollando dicha tesis. Todo lo anterior podrá ser gestionado
mediante Sherlock generando así un buzón de actividades y cronograma de
la tesis. Esto permitirá que cuando se presenten inconvenientes en el
transcurso de la tesis, como que un estudiante o grupo pierda el proyecto de
grado, el registro creado y almacenado por Sherlock servirá de mediador y
solucionador de problemas a favor del docente o del grupo de la tesis, ya que
a través de la plataforma se tendrá un panorama más claro y contundente
del proceso por el que pasó el proyecto.
- Grupos de Investigación: contempla información de que grupos de
investigación y semilleros existen, cuyos datos constan de qué horario tiene
dispuesto el grupo, quien lo dirige y que tema maneja dicho semillero o
grupo de investigación, además dispondrá de cuáles de estos están
disponibles a los estudiantes para su vinculación.
- Docentes investigadores: la idea de esta funcionalidad es que la comunidad
académica pueda ver el perfil y los logros de los docentes, es decir, que
podrán enterarse de que materias dirige el profesor, que tesis ha dirigido, los
temas de investigación que se encuentra vinculado y los temas de interés
del maestro.
- Documentación: normativa donde se definirá cada uno de los documentos y
normas sobre los cuales el estudiante trabajará su proyecto de grado, como
el formato de anteproyecto de grado, las normas APA, etc., además de una
sección especial de preguntas frecuentes (FAQ) referentes al proceso de
19
selección, desarrollo y finalización de una tesis de grado. Y por último todas
las tesis de grado van a quedar almacenadas en repositorio para que los
estudiantes puedan investigar todos los proyectos de grado que han
culminado, ya sea con fines investigativos o de adquisición de
conocimientos.
El desarrollar esta plataforma investigativa tendría un impacto considerable para
los estudiantes y personas en formación de la carrera de Ingeniería Multimedia de
la Universidad de San Buenaventura Cali, que cumplan con los criterios de un
semestre, necesario o válido, para empezar su proceso de proyecto de grado,
optimizando el tiempo de desarrollo y mejorar la gestión del mismo, aportando
fuertemente a la idea de que se mejoraría en gran medida el conducto regular de
las investigaciones de la carrera ya que el grado de dificultad o nivel de
competencia no son del nada requeridos para la implementación y usabilidad de la
aplicación.
20
5. Marco teórico
5.1. Marco conceptual
5.1.1. Prórrogas
El concepto de prórroga puede ser definido como la ampliación de un plazo de
tiempo para la entrega de un ejercicio o un trabajo determinado. El concepto se
aplica a determinadas circunstancias que tenga el alumno a la hora de presentar
su proyecto de grado [8].
5.1.2. Antecedentes
Es una constancia legal donde se lleva todos los registros una persona, grupo o
institución ya sean tesis de grado, maestrías, doctorados, investigaciones, artículos
empresas, etc., que ayudan a avalar una investigación, es decir, que sirve de
testimonio para fortalecer un estudio que se piensa a realizar con el fin de aportar
una novedad a una línea de interés, en el caso que se plantea este documento, una
carrera universitaria.
5.1.3. Líneas de investigación
Una línea de investigación es el resultado de la unión de muchos temas y puntos de
interés que deben ir vinculándose al eje temático en que se desarrollan, ya sea por
medio de trabajos, artículos publicados, investigaciones, desarrollos y la
vinculación con grupos de trabajos; además esto va constituyendo una perspectiva
de trabajo investigativo. [9]
5.1.4. Docente de investigación
Un Docente profesional de la educación puede aproximarse a la realidad educativa
desde diferentes perspectivas así como utilizar diversos modelos de investigación
para darle apoyo al alumnado, servirle de guía en su proceso académico y
21
profesional, dando como resultado un buen desempeño por parte del estudiante y a
su vez cumpliendo con los estándares deseados de la institución.
5.1.5. Grupos de investigación o semilleros
En el mundo académico o universitario es una estrategia pedagógica
extracurricular que tiene como objetivo fomentar el desarrollo investigativo del
estudiante, además surge como respuesta a la necesidad de brindar espacios
académicos y de esta manera complementar su formación profesional.
5.2. Procedimientos Administrativos Conjunto de reglas y políticas de una organización donde se rige el
comportamiento de los usuarios frente al sistema, en general los usuarios bajo
ninguna circunstancia deben tener acceso a la base de datos. Los procedimientos
administrativos involucran los trabajos de grado: documento escrito que se
presenta para obtener un título de acuerdo a los conocimientos adquiridos en la
carrera. [5]
5.2.1. Elaboración y entrega de Propuesta de Trabajo de Grado
Esta es la primera etapa del proceso para la presentación de trabajos de grado, en
esta fase se plantea la idea y se formula una propuesta con la ayuda del tutor
encargado para ser entregada al comité de evaluación con el fin de ser registrada.
[5]
5.2.2. Elaboración y Entrega de Anteproyecto de Trabajo de Grado
Una vez que se cuenta con un tema de tesis, se debe establecer la metodología
apropiada para llevar a cabo el estudio, es decir, se especifica las actividades y los
momentos en que habrán de ejecutarse para desarrollar la tesis y obtener los
resultados previstos por los objetivos [10]. Si el anteproyecto es rechazado, el
22
estudiante debe cambiar completamente su proyecto, si es aplazado entonces se
procederá a realizar las correcciones pertinentes para una posterior entrega al
comité de evaluación, si en su tercer intento no es aprobado, pasará a ser
rechazado y deberá cambiar su proyecto, por último si el estudiante es aprobado
entrará a elaborar su proyecto final. [5]
5.2.3. Elaboración y Entrega de Proyecto Final
Esta etapa es la fase final de la tesis de grado donde se realizan las metas
especificadas en el Anteproyecto, las cuales son revisadas y asentadas con el fin
de llevar un registro del proceso que se tuvo, y finalmente culminar con la
investigación. Como resultado, se obtiene un conjunto de información de todo lo
investigado anteriormente, con el fin de dar un aporte a las líneas de investigación
que se relacionaban con la tesis [10]. Solo si el 70% del proyecto final es entregado
con buenas pautas el estudiante podrá optar por su primera prórroga para el
siguiente semestre y deberá terminar lo establecido en su proyecto final para
presentarlo nuevamente ante el comité; de igual forma si en su segundo intento el
proyecto no está culminado pero tiene un 90% del desarrollo, el estudiante podrá
pedir su segunda prórroga y presentarlo una última vez; finalmente si en su tercer
intento no está terminado, será rechazado y por ende perderá su tesis de grado,
pero si de lo contrario el proyecto final está terminado al 100%, el estudiante podrá
sustentar su tesis, cumpliendo de esta manera con el requisito de grado
establecido de la universidad.[5]
5.3. Desarrollo web
5.3.1. Historia y evolución del desarrollo web
El concepto original de la web (en este contexto, llamada la web 1.0) era páginas
estáticas HTML que no se actualizaban frecuentemente, la cual tuvo lugar
inicialmente en el año 1980 cuando el físico Tim Berners-Lee con la propuesta de
23
una nueva estructura de hipertexto para compartir documentos, similares a lo que
hoy conocemos como enlaces de las páginas web; pero el real apogeo se dio al
relacionarse con el ingeniero de sistemas Robert Cailliau, con la idea de
implementar un sistema de hipertexto para internet, dando origen a lo que hoy se
conoce como WorldWideWeb (W3). [11]
Figure 5.1. Esquema Web 1.0. [13]
Con el tiempo la posibilidad de conectarse con cualquier persona alrededor del
globo terráqueo y compartir información era cada vez más llamativa, por lo que la
páginas web pasaron de ser solo un medio de comunicación entre científicos para
compartir documentos, a incentivar el interés de las grandes empresas de poder
tener más interacción con sus clientes, naciendo nuevas estrategias comerciales,
de forma online, pero había un impedimento significativo por partes de los sitios
web estáticos de la época. La necesidad de generar más dinamismo a través de
internet, impulsó la iniciativa de las web dinámicas (llamadas webs 1.5), ya que en
ambos sentidos, conseguir visitas y tener una estética visual era considerado como
el factor determinante de una página web, esto genero una aproximación
finalmente a lo que se denominó la web 2.0 donde actualmente el uso está
orientado a la interacción de páginas y las redes sociales [4]. Este acontecimiento
logró una transformación en la comunicación y la manipulación de la información,
24
a través de la retroalimentación de comentarios de texto, imágenes, videos, etc.,
dándole un espacio importante en el ciclo de comunicación al usuario, donde el
éxito y el progreso ahora no está solamente en manos del proveedor del sitio web,
sino del comportamiento del usuario mediante la creación y actualización de
contenidos que proporcionan una mejor experiencia, este fenómeno se denomina
comunicación colectiva.
Figure 5.2. Esquema Web 2.0. [13]
Se estima que con el tiempo la web 3.0, así como la web 2.0 dio origen a las redes
sociales, esta dará paso a las redes semánticas, donde el concepto clave en esta
reforma será la “Personalización”, mediante la incrustación de inteligencia artificial
en la páginas web, ejecutadas y ordenadas por motores y procesadores de
información [12], suponiendo una nueva era de entendimiento para el usuario,
donde el concepto de navegar ya no estará ligado solo a la búsqueda de
información, sino a la comprensión de la misma. La manipulación de los datos
personales de los usuarios con el rastreo de los perfiles a través de las redes
sociales, y la información de navegación, no solo de los sitios web que frecuentan,
sino también los contenidos multimedia que crean y buscan, donde el
procesamiento del mismo tendrá un nuevo significado para la información.
Empresas como Google son conscientes de este cambio que se avecina, por lo que
25
ya se puede experimentar los primeros pasos hacia la aclamada web 3.0 a través
de tecnologías que usan los usuarios constantemente, pero cuyo potencial es en
ocasiones subestimado e ignorado, o simplemente la ambigüedad actual del
mismo ocasiona tal comportamiento.
Figure 5.3. Esquema Web 3.0. [13]
5.3.2. Desarrollo Back-End
Este concepto hace referencia a todo el trabajo o desarrollo que se implementa y se
ejecuta en el lado del servidor, donde se genera toda la lógica computacional
central de un sistema web, de software y de información [14]. Todas los datos y
solicitudes enviados desde el Front-End son manipuladas en pro del buen
funcionamiento de un software, páginas web o aplicativo web, a través de las
conexiones a la base de datos permitiendo la consulta, creación, actualización y
eliminación (CRUD) de los datos almacenados en las tablas de una base datos;
también la creación de algoritmos complejos, el manejo de la lógica de negocio,
performance, servicios web, etc. [15]. Para llevar a cabo el desarrollo Backend se
utilizan lenguajes de programación, de los cuales se hablará a continuación,
específicamente los que se usarán en este proyecto.
26
5.3.2.1. PHP (Hypertext Pre-processor)
Lenguaje de programación multiplataforma creado por Rasmus Lerdorf,
interpretado y de código abierto diseñado esencialmente para la creación de
páginas web dinámicas. Principalmente se usa en el lado del servidor en una
configuración cliente-servidor [16].
Las características más relevantes de PHP son:
- Lenguaje multiplataforma, se puede usar en Linux, Windows, Mac-OS, etc.
- Posibilidad de programación orientada a objetos.
- Licencia GPL, por ende no comercial y de fácil acceso.
- Gran comunidad y documentación altamente disponible.
- Capacidad de conexión con diversas bases de datos como por ejemplo
Mysql, PostgreSQL, SQLite, Oracle, etc.
- Vastas funciones nativas sin necesidad de incluirlas o importarlas.
- Al ser un lenguaje interpretado, su código no necesita ser compilado,
también es su desventaja ya que disminuye su tiempo de ejecución frente a
lenguajes compilados.
Figure 5.4. Esquema PHP. [17]
5.3.2.2. SQL
Lenguaje de consulta estructurada (Structured Query Language), es un lenguaje de
programación e interactivo desarrollado por primera vez a principios de los años 70
27
en IBM por Raymond Boyce y Donald Chamberlin, y lanzado comercialmente en el
año 1979 por Relation Software Inc. (Conocido actualmente como Oracle
Corporation) [18], que permite la manipulación o gestión de la información de una
base de datos relacional [19], obteniendo, creando, actualizando y eliminando los
datos de las tablas mediante una consulta estructurada. Muchas herramientas
para la gestión de base de datos con compatibles con SQL, mediante extensiones
propias del lenguaje como tal.
Figure 5.5. Esquema SQL. [20]
5.3.3. Desarrollo Front-End
Este concepto hace referencia a todo el trabajo o desarrollo que se implementa y se
ejecuta en el lado del cliente, a través de la interfaz gráfica que le es proveída al
usuario, por lo tanto no solo es la encargada de la parte estética de un sistema,
sino también de la experiencia de usuario, la funcionalidad y la usabilidad de la
aplicación. Por lo tanto el Frontend tiene como finalidad no solo mostrar de forma
28
agradable la información, sino también plasmarla de forma tal que le sea fácil al
usuario la comprensión y navegación en una aplicación web. [21]
5.3.3.1. HTML
Son siglas de HyperText Markup Language lenguaje de marcas de hipertexto,
donde hace referencia al lenguaje marcado para la elaboración de páginas web.
Define una estructura básica y un código para la definición de contenido de una
página web en sus diferentes versiones.
5.3.3.2. CSS
Hojas de estilo de cascada (Cascading Style Sheets), es un lenguaje que permite
crear la presentación o comportamiento de un documento estructurado en un
lenguaje de marcado, como lo son HTML o XML [22], esto ofrece un gran manejo a
los desarrolladores de controlar el estilo y el formato de diferentes páginas web
mediante un dispositivo de lectura. En cuanto a desarrollo, existen dos formas de
implementar los estilos a un documento: dentro de una etiqueta HTML o en un
archivo con extensión .css anexado al documento. Para el uso como tal de esta
poderosa herramienta se usan un conglomerado de selectores, entre los que se
destacan ‘.’ para las clases, permitiendo la distribución de los estilos a diferentes
objetos del documento, o ‘#’ cuando se quiere dar un estilo personalizado a un solo
objeto, de forma atómica, entre otras.
5.3.3.3. JavaScript
Es un lenguaje de programación interpretado de código abierto generalmente
usado en el desarrollo de páginas web, con una sintaxis parecida al lenguaje java,
no obstante tiene diferencias importantes ya que se utiliza principalmente del lado
del cliente es decir, se ejecuta en el ordenador y no en el servidor, permitiendo crear
efectos atractivos y dinámicos en una página o aplicación web. La principal ventaja
es que al estar alojado en el ordenador del usuario, la capacidad de respuesta es
más rápida de lo habitual y al ser un lenguaje de programación permite el uso de
29
variables, condicionales, bucles etc. Un inconveniente de este lenguaje es que si el
usuario tiene desactivado JavaScript en su ordenador, no se mostraran los efectos
sin embargo hoy en día la mayoría de los usuarios navegan por la web con
JavaScript activado [23].
5.3.3.4. Ajax
Tecnología web que sirve para enviar peticiones web de forma asíncrona, es decir,
que no es necesario dirigir los datos a través del desplazamiento de una página
web a otra, logrando así una carga de la página actual. Con la implementación de
AJAX se logra introducir en el usuario la experiencia de que no se ha recargado o
cambiado la página, optimizando el tiempo en que se muestran los resultados, y
principalmente la carga del servidor, ya que solo muestra los datos relevantes y no
todo el contenido que dispone la página [24].
5.3.3.5. Jquery
Framework de desarrollo basado en el lenguaje de programación JavaScript, que
permite simplificar la realización de procesos para páginas web dinámicas, siendo
un complemento poderoso para HTML, mediante funcionalidades tales como el
manejo de la tecnología AJAX, manejo de eventos, manejo del árbol DOM, el
desarrollo de animaciones, etc.; Además esta herramienta tienes como sus
principales características su flexibilidad, su facilidad para implementar plugins y
como código abierto, cuenta con una vasta fuente de soporte [25].
5.3.4. Servicios web
Es una tecnología que utiliza un conjunto de protocolos y estándares que sirven
para intercambiar datos entre aplicaciones. Normalmente las aplicaciones de
software desarrolladas en lenguajes de programación diferentes se ejecutan sobre
cualquier plataforma y pueden utilizar los servicios web para intercambiar datos en
redes de ordenadores o internet. [26]
30
Figure 5.6. Esquema Servicios Web. [27]
5.3.4.1. SOA (Service Oriented Architecture)
La arquitectura SOA establece un marco de diseño para la integración de
aplicaciones independientes, las cuales se ofrecen como servicios. La forma
normalmente implementada es mediante servicios web, una tecnología basada en
estándares e independiente de la plataforma en la que se aplica; SOA puede
descomponer las aplicaciones en un conjunto de servicios e implementar esta
funcionalidad en forma modular, permitiendo la flexibilidad de interacción evitando
incongruencias entre los componentes de la infraestructura (que determinan la
comunicación) y las interfaces definidas. [28]
A pesar de fue construido bajo los mismo principios, SOA no es lo mismo que
servicios web, lo cual sugiere tecnologías como SOAP y XML; por lo que un servicio
web se puede considerar como una relación consumidor-proveedor, en cambio SOA
se empeñan en diseñar una arquitectura de trabajo adecuado para un entorno de
servicios web, siendo más que un conjunto de tecnologías, la cual opera
independientemente de cualquiera de ellas. [29]
31
Ventajas
- Capacidad estratégica para la integración de lógica de negocio, datos y
conocimiento de una organización.
- Accesibilidad a servicios desde cualquier dispositivo con cualquier sistema
operativo.
- Mejoramiento en el flujo de información.
- Transparencia de ubicación.
- Mejoramiento en la traducción de datos.
Desventajas
- Integración compleja en aplicaciones con funcionalidad de interfaz gráfica.
- Depende de la implementación de estándares
- No es recomendado para aplicaciones que requieren alto nivel de
transferencia de datos
- Incrementalmente se hace difícil y costoso el ser capaz de cumplir con los
protocolos y comunicarse con un servicio.
Figure 5.7. Esquema de Arquitectura Orientada a Servicios. [30]
32
5.3.4.2. SOAP
Simple Object Access Protocol, es un protocolo de servicios web orientados a
objetos el cual está basado en XML. SOAP especifica cómo codificar una cabecera
HTTP y un archivo XML como respuesta mediante el cual una aplicación en un
dispositivo pueda comunicarse con otra aplicación en otro dispositivo y así
transmitir información entre sí [31]. Cuando se utiliza SOAP la estructura básica del
protocolo se divide en 3 partes:
- Envelope: se especificar el mensaje como SOAP, se define como tal el
contenido y cómo será procesado.
- Header: se incluye la información específica del mensaje, así como de los
atributos necesarios para la autenticación.
- Body: se incluye la información necesaria para la fase final, por ejemplo los
parámetros de llamada y respuesta de una petición. [32]
Entre sus cualidades más significativas está su interoperabilidad, su capacidad de
operar independiente de la plataforma y lenguaje sobre el que corra, además tiene
compatibilidad con cualquier protocolo que esté en capacidad de transmitir texto, y
cabe apuntar que soporta SSL, como WS-Security. [33]
5.3.4.3. REST
Entendido como REpresentational State Transfer, es una arquitectura para la
declaración de servicios web, creada por Roy Fielding en el año 2000, la cual corre
sobre el HTTP mediante sus métodos, cuyos recursos son declarados y
consumidos individualmente mediante URIs.
REST también conocida bajo el concepto de RESTful, utiliza los métodos básicos
de HTML para integrar su arquitectura:
33
- GET: permite acceder a datos o recursos de solo lectura.
- POST: permite crear un nuevo recursos
- PUT: permite actualizar recursos existentes
- DELETE: permite eliminar recursos. [34]
REST permite el uso de muchos formatos de datos, como lo es JSON, el cual es
comúnmente apreciado en los servicios web creados para el uso de APIs para
aplicaciones web, favoreciendo la usabilidad y sostenibilidad de las mismas. Algo
que cabe apuntar de esta arquitectura es que al correr sobre HTTP, es más
vulnerable que SOAP, lo cual es muy común que sus desarrollos y documentación
sea más fácil de entender.
5.4. Bases de datos Se define como base de datos a una serie de datos organizados y relacionados
entre sí, los cuales son recolectados y aprovechados por los sistemas de
información de una empresa o un negocio en particular [35].
5.4.1. Base de datos no relacionales (noSQL)
Una base de datos noSQL es una amplia clase de sistema de gestión de bases de
datos, las cuales son utilizadas para describir un subconjunto de bases de datos
que difiere en varios modelos de bases de datos tradicionales. Estos sistemas se
clasifican por la forma en cómo almacenan sus datos, al no manejar la flexibilidad
que poseen las DBs tradicionales como las relaciones estructuradas entre tablas,
se dividen en categorías orientadas a documentos, orientadas a columnas, en clave
valor y en grafo. [36]
Ventajas
- No tienen esquemas.
- Evitan las operaciones join y escalan horizontalmente.
34
- Evita el cuello de botella.
- Pueden manejar enormes cantidades de datos en menor tiempo que
las bases de datos relacionales, especialmente sobre contenido multimedia.
- Eficientes cuando se trata de manejar una grande cantidad de datos
en tiempo real.
- Su implementación en proyectos es más económico que las bases de
datos relacionales, a excepciones de los sistemas de código libre.
- Diferentes bases de datos NoSQL para diferentes tipos de proyectos.
5.4.1.1. MongoDB
Esta NoSQL es una base de datos orientada a documentos escrita en C++, cuya
particularidad se basa en no guardar datos en registros, sino que almacena estos
datos en documentos, los cuales son depositados en BSON, una representación
binaria del tipo de datos JSON. MongoDB tiene una diferencia sobresaliente con
respecto a las bases de datos relacionamos, es la posibilidad de tener múltiples
esquemas, lo cual es un arma de doble filo, ya que solo garantiza operaciones
atómicas a nivel de documento, por lo que sus características a nivel de desarrollo
deben ser estudiadas a la hora de escogerla como motor de base de datos en un
proyecto, como por ejemplo un proyectos donde se necesita indispensablemente
de transacciones claramente sería una desventaja en el proceso, lo que sería más
recomendable optar por otro sistema de base de datos. [37]
En el caso de que se quiera el uso de un lenguaje de programación específico,
MongoDB tiene a su disposición drivers para una cantidad considerable de ellos,
entre los que se destacan C#, Java, Node.js, PHP, Python, Ruby, C, C++, Perl o
Scala; a pesar de esta posibilidad considerable para los desarrolladores Backend,
no todos los drivers que existen para esta NoSQL tienen el mismo estado madurez.
35
Figure 5.8. Ejemplo de manejo de datos con MongoDB. [38]
5.4.1.2. Riak
Base de datos orientada a Clave-Valor, basada en el sistema de base de datos
NoSQL y Dynamo, de código abierto, el cual fue desarrollado por Basho
Technologies. Esta herramienta está disponible para empresas, la nube, la web y
plataformas móviles, brindando un rendimiento escalable y confiabilidad en
diferentes entornos de operación. Riak es considerado un motor de bases de datos
tolerante a fallos, gracias a su distribución por diferentes nodos e implementación
sin una principal instancia. [39]
Riak al ser orientado a Clave-Valor utilizan la estructura bucket/key, siendo la
unidad de organización única que puede emplearse en su uso, que son como en
Java, el paquete y la clase; también su estructura admite el uso de enlaces, donde
la información de un bucket/key puede ser un contenido o un enlace a otro
bucket/key con su propia información. Una característica particular de esta NoSQL
es que permite estructurar el contenido en forma de metadatos, muy parecidas a
las cabeceras de los mensajes HTTP, permitiendo el uso de array asociativos
dentro de los contenidos. [40]
36
Durante la configuración de Riak, los cluster disponen de los siguientes elementos:
- Nodos: nodos físicos, o máquinas, los cuales son la composición de un
cluster.
- Nodos Virtuales: nodos virtuales (o vnodes) que corren en cada máquina, la
cual puede contener uno o varios nodos virtuales.
- Particiones: donde cada cluster tiene un entero de 160-bits dividido en
particiones ecuánimes y Cada vnode reclamará una partición del anillo.
Otras características
- Tolerancias a fallos: vector clocks.
- Tipo de datos: BLOB.
- Triggers: Pre/Post commits.
- Peers (No trabaja con clave maestra)
- Objeto estándar: texto.
Ventajas
- Escalamiento sencillo.
- Buen rendimiento en entornos con aplicaciones de alta disponibilidad.
- Gran variedad de APIs.
- MapReduce en Erlang y JavaScript.
- Enterprise edition.
Desventajas
- Al ser de código abierto, es una falla en el soporte de empresas.
- No es muy madura.
- Limitaciones en inteligencia de negocios.
- Falta de experiencia.
- Tiene limitaciones en las consultas.
- No tiene control de usuarios. [41]
37
Figure 5.9. Esquema base de datos NoSQL Riak. [42]
5.4.1.3. Cassandra
Es un motor de bases de datos NoSQL, de código abierto desarrollado en Java,
orientado a columnas, tiene como una de sus principales características, la fusión
de Dynamo, propio de Amazon con BigTable, de Google, a pesar de que ambos
sistemas son de código cerrado. Inicialmente desarrollado por Facebook con la
idea de dar una solución práctica al problema relacionado con el rendimiento del
motor de búsqueda, específicamente la comunicación entre usuarios, también
conocida como Inbox Search; además herramienta está distribuido y preparado
para big data. Su implementación fue el motor que impulsó el fenómeno de las
redes sociales, debido a la alta perspectiva de crecimiento y la necesidad de ofrecer
un nivel de calidad de servicio fijado; finalmente en el 2008 Facebook libera
Cassandra, convirtiendo en código abierto, y actualmente es mantenida por la
organización Apache. [43] [44]
Características
- Emplea nodos formando anillos.
- Distribuye los datos mediante función hash.
- Escalamiento horizontal (P2P).
38
- Emplea familia de columnas (Big Table + Dynamo).
- CQL lenguaje de consultas.
- Consistencia eventual.
- Soporta múltiples centros de datos
- Compatibilidad con Hadoop y Spark, entre otros.
Características del modelo de datos
- Una tabla de datos por cada instancia de Cassandra.
- Cada familia de columnas puede contener o bien columnas o bien súper
columnas. Las súper columnas son columnas son la agrupación de n-
columnas.
- Cada columna contiene elementos de la forma “Clave-Valor-Tiempo”, donde
el valor del campo tiempo es definible por el usuario.
- Cada fila de una tabla puede tomar valores en columnas distintas de una
familia de columnas que otra fila, es decir, si se dispone de una familia de 5
columnas (A, B, C, D, E), la fila R1 puede tener valores en A y B mientras que
la fila R2 puede tenerlos en A, C, D y E.
Figure 5.10. Movimiento de datos con Cassandra. [45]
39
5.4.1.4. Neo4j
Es un motor de bases de datos NoSQL orientados a grafos, implementada bajo el
lenguaje de programación Java, y desarrollada por Neo Technology, una startup
sueca con sede en San Francisco, cuya primera versión fue lanzada en el año 2012,
y actualmente está bajo 2 tipos diferentes de licencias, una comercial y una Affero
General Public License (AGPL). Un dato interesante referente a Neo4j es que
empresas como eBay, Walmart, Telenor, UBS, Cisco, Hewlett-Packard o Lufthansa
han confiado en las cualidades de Neo4j para mejorar sus servicios.
Este motor usa grafos con la intención de representar los datos y las relaciones
entre ellos; ahora un grafo se define como cualquier representación gráfica
constituida por vértices (ilustración mediante círculos) y aristas (ilustración
mediante líneas de intersección), donde se destacan varios tipos de grafos:
- Grafos no dirigidos: los nodos y las relaciones son intercambiables, por
ejemplo las relaciones de amistad en la red social Facebook.
- Grafos dirigidos: los nodos y las relaciones no son bidireccionales por
defecto, por ejemplo el concepto de seguidores en la red social Twitter.
- Grafos con peso: las relaciones entre nodos tiene algún tipo de valoración
numérica, permitiendo luego realizar operaciones.
- Grafos con etiquetas: definen distintos vértices y relaciones entre ellos, por
ejemplo en la red social Facebook podría definirse nodos por términos como
‘amigo’ o ‘compañero’, y en el caso de las relaciones podrían ilustrarse como
‘amigo de’ o ‘socio de’.
- Grafos de propiedad: básicamente es un grafo con peso, con etiquetas y la
posibilidad de asignar propiedades tanto a nodos como relaciones, como por
ejemplo nombre, edad, país de residencia, nacimiento.
40
Casos de uso
- Detección de fraude: sectores como las bancas, los seguros o el comercio
electrónico.
- Recomendaciones en tiempo real y redes sociales: la posibilidad de conectar
de forma óptima a las personas con productos y servicios en función de la
información personal, sus perfiles en redes sociales y su actividad reciente
en línea.
- Gestión de centro de datos: permite la gestión, el monitoreo y la
optimización de todo tipo de redes físicas y virtuales pese a la gran cantidad
de datos. [A29]
Figure 5.11. Arquitectura lógica de Neo4j. [47]
5.4.2. Base de datos Relacionales
Las bases de datos relacionales cumplen con un modelo relacional, implementado
mediante tablas llena de datos, la cuales se representan en tuplas(filas) que sería
un registro de la tabla y los atributos(columnas) que vendrían siendo los datos de
dichos registros. Permiten establecer relaciones entre datos, las cuales están
guardadas en tablas y a través de dichas conexiones relacionar los datos en ambas
tablas, de ahí proviene su nombre de: Modelo Relacional. Para el desarrollo óptimo
41
de la plataforma de investigación se optó por las bases relacionales frente a las
BDs NoSql, ya que cumple con un modelo relacionado lógicamente, el cual es el
modelo más utilizado en la actualidad para implementar base de datos ya
planificadas. [48]
Ventajas
- Provee herramientas que garantizan evitar la duplicidad de registros.
- Garantiza la integridad.
- Menor redundancia.
- Mayor seguridad de datos.
- Coherencia de los resultados.
- Favorece la normalización por ser más comprensible y aplicable.
- Acceso simultáneo a los datos.
- Datos más documentados.
- Aumenta la productividad de los programadores.
Figure 5.12. Ejemplo de Base de Datos Relacional. [49]
Posterior a lo anterior, la plataforma de investigación (Sherlock) se conectara con
la bases de datos de la Universidad San Buenaventura Cali, la cual es una BDs
relacional gestionada a través de SQL server y así manipular los datos de los
estudiantes que darán uso de la plataforma, además tiene predestinado crecer de
forma continua a través de futuros desarrolladores, resaltando nuevamente la
ventaja que nos brinda la integración y la normalización de la base de datos,
logrando ser más comprensible y aplicable en el futuro.
42
5.4.2.1. MySQL
Es un Sistema de gestión de base de datos relacional, el cual es multihilo y
multiusuario lo que permite ser utilizado por varias personas al mismo tiempo,
incluso realizar varias consultas a la vez, lo cual lo hace sumamente concurrente y
versátil para la plataforma. Se decidió optar por MySQL ya que este gestor de base
de datos es muy utilizado en desarrollo web, es gratuito y permite a los
desarrolladores, realizar cambios en sus sitios de manera simple, con tan sólo
cambiar un archivo, evitando tener que modificar todo el código web. Esto se debe
a que MySQL, trabaja con un sistema centralizado de gestión de datos. [50]
Ventajas
- Es código abierto.
- Es rápido, fiable y fácil de usar.
- Disponibilidad para gran cantidad de software de contribuciones.
- Posee un buen control de acceso de usuarios y seguridad en los datos.
- Perfecta integración con el lenguaje de programación PHP.
- Soporte completo para cláusulas, funciones, tipos de datos y comandos
estándar.
- Soporte en el control de datos en tablas transaccionales.
- Buena portabilidad entre distintos sistemas y plataformas.
- El acoplamiento es flexible.
- Escalabilidad.
Desventajas
- Durante la creación de tablas, internamente no trata las claves ajenas y
foráneas de forma diferentes al resto de campos.
- Los privilegios para una tabla no se elimina automáticamente cuando se
borra dicha tabla.
43
- La función de conversión CATS() no soporta la conversión REAL o BIGINT.
[51]
5.4.2.2. Oracle
Es un motor de bases de datos relacional, que se basa en la tecnología
cliente/servidor, el cual es una herramienta vendida a nivel mundial, pero la gran
potencia que tiene y su elevado precio en el mercado ha hecho que solo se vea en
empresas grandes y multinacionales. Para el desarrollo Oracle tiene un lenguaje 5ª
generación potente para el trato y gestión de base de datos, PL/SQL, que permite
implementar diseños activos, con triggers y procedimientos almacenados, con una
integridad referencial declarativa bastante potente; pero también por normal
general se suele utilizar SQL al crear un formulario. [52]
Características
- Compatibilidad en todas las plataformas, desde una PC hasta un
supercomputador.
- Soporta todas las funciones que se esperan de un servidor robusto.
- Permite el uso de particiones para la mejora de la eficiencia, de replicación e
incluso ciertas versiones admiten la administración de bases de datos
distribuidas.
- El software del servidor puede ejecutarse en multitud de sistemas
operativos.
- Tiene un soporte aceptable. [53]
5.4.2.3. Patrón Maestro Detalle (Master Detail)
Usualmente en la implementación de bases de datos relacionales existen unos
patrones que ayudan a estructurar el diseño de la misma de una forma adecuada,
siguientes unos conceptos específicos, por eso para el desarrollo de la plataforma
se optó por utilizar el patrón Maestro Detalle, el cual por general es conocido como
44
relación de 1 a muchos o 1:N, esto significa que un registro de una tabla puede
estar relacionado con varios registro de otra tabla, permitiendo filtrar los datos de
un conjuntos de datos con otros, es decir, que dicho conjunto que es utilizado para
filtrar los datos se llama Maestro, y la respuesta conjunto de datos filtrada se llama
Detalle. La implementación de este patrón permite una gran eficacia y flexibilidad
frente a peticiones, consultas y actualizaciones en el modelo relacional, debido a
que permite que la base de datos pueda llegar a crecer y no se verá afectada por la
estructuración de otras tablas gracias a las relaciones que generan cierta jerarquía
y delegación.
Figure 5.13. Ejemplo de patrón de bases de datos relacional ‘Maestro Detalle’. [54]
5.4.3. ORM (Object-relational mapping)
El Mapeo Objeto - Relacional es una técnica de programación donde se crean
objetos de un lenguaje de programación orientado a objetos (OOP) a partir de las
clases del negocio para ser desarrollado trabajando en conjunto, mediante los
datos que dispone una base de datos para después ser manipulados llevando a
cabo diferentes tareas. Explicado de forma más general, una tabla vendría siendo
una clase, como una tupla de esa tabla es una instancia de la clase con datos
asignados y las columnas se comportan como lo son las propiedades del objeto
creado. [7][55]
45
Figure 5.14. Esquema de la técnica de programación ORM. [56]
5.5. Arquitectura de software Este concepto se refiere a la estructuración del sistema (software) que
principalmente es implementado en las primeras etapas del desarrollo. La
estructuración es un diseño de alto nivel del software, la cual tiene 2 propósitos:
- Satisfacer los atributos de calidad (desempeño, seguridad, modificabilidad).
- Servir como guía en el desarrollo del software.
Esta arquitectura juega un papel crítico en las etapas tempranas de la elaboración
del sistema, el no diseñar e implementarla puede perjudicar el producto final y que
el mismo no pueda satisfacer las necesidades de los clientes. [57]
5.5.1. Patrones arquitectónicos
Estos patrones son los encargados de definir la estructura de un sistema de
software, específicamente proporciona un grupo de sub-sistemas predefinidos,
donde expresa con detalle sus responsabilidades y reglas de juego, determinando
la organización, comunicación, interacción y relación entre ellos. [58]. Heredan
mucho de la terminología y los conceptos de los patrones de diseño, pero su
46
propósito se centra en crear modelos y métodos re-utilizables para la arquitectura
general de los sistemas de información.
5.5.1.1. Publish Subscribe
Es un patrón de mensajería que se usa en arquitecturas de software donde los
remitentes de los mensajes, denominados editores, no tiene que programar los
mensajes que son enviados a los receptores en específico, denominados
suscriptores, sino que etiquetan los mensajes publicados en clases
indiferentemente de cuantos suscriptores existan. Del mismo modo, los
suscriptores puede tener interés en una o más etiquetas (clases), y solo reciben
mensajes o notificaciones de dichos intereses, indiferentemente de cuantos
editores haya.
5.6. Ingeniería de software De acuerdo con el Instituto de Ingenieros Eléctricos y Electrónicos (IEEE), se basa
en la aplicación de los principios de la ingeniería en el ámbito del desarrollo de
software, donde no implica que a menudo la creación de código, puesto que esto
solo es una etapa en el procesos de ingeniería de software. Ahora bien, si un
proyecto de software requiere de la aplicación de la ingeniería, esto es definido
mucho antes de que tal proyecto esté diseñado, y continúa después del desarrollo.
Durante el proceso de ingeniería de software, entra el diseño de software, donde
entra aparece la creación de los algoritmos o instrucciones para el ordenador, y
finalmente se ejecutan las etapas de validación y mantenimiento; cabe aportar que
las etapas no siempre llevan una concepción lineal en un proyecto, sino que
también puede llevarse a cabo de manera espiral. [59]
5.6.1. Patrones de diseño
Un patrón de diseño describe la soluciones a problemas comunes en el desarrollo
de software y otros ámbitos referentes al diseño de interacción o interfaces que
47
ocurre una y otra vez en el entorno de un desarrollador, brindando posibles
soluciones de una forma coherente y simple. Un patrón de diseño es una
descripción de clases y objetos comunicándose entre sí, adaptada para resolver
problemas de diseño y estructura generalmente [60]. Para que una solución sea
considerada un patrón debe poseer ciertas características, una de ellas es que
debe haber comprobado su efectividad resolviendo problemas similares en
ocasiones anteriores; otra es que debe ser reutilizable, lo que significa que es
aplicable a diferentes problemas de diseño en distintas circunstancias. Los
patrones de diseño se dividen en 3 tipos: de creación, de estructura y de
comportamiento.
5.6.2. Patrones creacionales
En la ingeniería de software son patrones de diseño que se enfocan en los
mecanismos de creación de objetos, donde su principal tarea es definir el momento
adecuado, en respuesta a una situación determinada. La creación general de un
objeto podría ocasionar problemas de diseño o añadiendo complejidad en el
diseño, por lo que estos patrones nacen con el propósito de mediar estos enigmas
[61], por ejemplo el patrón diseño creacional MVC y Singleton, los cuales serán
implementados en este proyecto.
5.6.2.1. MVC
Patrón de diseño de desarrollo de software descrito primera vez por Trygve
Reenskaug en el año 1979, se traduce como Modelo Vista Controlador, el cual es
usado casi siempre para el desarrollo de aplicativos web ya que su estructura
consiste básicamente en separar la capa de abstracción de la base de datos que
sería el modelo, la presentación e interacción de los datos (HTML) que respecta a la
vista, y el intermediario donde se controlan los anteriores y principalmente la lógica
del negocio que es el controlador. También es bastante usado para plataformas de
48
desarrollo de aplicaciones web como lo son Symfony, Cake PHP, Django, Ruby on
Rails, etc. [62]
Figure 5.15. Esquema del patrón de diseño MVC. [63]
5.6.2.2. Singleton
Este patrón tiene como objetivo garantizar que en el desarrollo de una aplicación
una clase sólo tenga una instancia al tiempo y que esta proporcione un de acceso
global de sí mismo, es decir, que si todos objetos que implementan una instancia
de una clase Singleton, por criterio del patrón como tal, utilizan la misma instancia.
Una instancia única se implementa creando en una clase un método que crea una
instancia de la misma si y sólo si todavía no existe alguna; para llevar a cabo la
implementación en su totalidad y garantizar que dicha clase no sea instanciada
nuevamente se regula el alcance del constructor con atributos como lo son el
“protected” o “private”. [64]
Figure 5.16. Esquema del patrón Singleton. [65]
49
5.6.3. Patrones estructurales
En ingeniería de software son patrones de diseño que se centran en la clase y la
composición de objetos, el cual utilizan la herencia para la creación de sus
interface. Básicamente facilitan el diseño en el desarrollo de una aplicación
mediante la identificación de una forma sencilla de realizar relaciones entre
entidades. [66]
5.6.4. Patrones de comportamiento
En ingeniería de software son patrones de diseño que se encargan de resolver
problemas relacionados con el comportamiento de la aplicación, normalmente en
tiempo de ejecución y comunicación entre objetos. [67]
5.7. Diseño de interfaces En el proceso de desarrollo de proyectos tales como una página web, plataforma
web o software, se parte del concepto cliente-servidor a partir de la lógica de
negocio concebida en la apertura del proyecto, donde la parte que concierne a los
usuarios es directamente el lado del cliente (Frontend) como se ha explicado
anteriormente, dando lugar al arte del diseño de interfaces, abstracción gráfica que
permite al usuario de manera simple interactuar y desenvolverse con una
aplicación web o software, sin ser aún el producto final que se espera de un
desarrollo, el cual puede carecer de atributos artísticos, y elementos que le
permitan al usuario tener una completa navegación y claridad de un aplicación, lo
que garantizaría una completa experiencia de usuario.
Una interface es entonces una vista mediadora en la comunicación que se da entre
el usuario-máquina, más específicamente usuario-computador, una conexión que
permite que el objetivo principal de una plataforma o aplicación, florezca de forma
correcta, el crear de manera abstracta un puente de información con el público
50
objetivo, donde el trueque no sea solo de forma lineal, sino que brinde un
intercambio más productivo. [68]
5.7.1. Diseño de una interfaz de usuario
El concepto general del diseño de interfaz de usuario se centra en la anticipación
de lo que un usuario en un punto dado podría hacer, y asegurarse de que dicha
interface tenga elementos accesibles, entendibles e interactivos para la fácil
navegación y manipulación de una aplicación o página web. [69]
En el proceso de creación hay que tener en cuenta que se requiere del estudio de
las personas y el conocimiento tecnológico adecuado para lograr un resultado
aceptable; una vez se tenga conciencia de esto, un diseñador debe preguntarse:
¿Quién es el usuario? ¿Cómo aprender a interactuar el usuario con el nuevo sistema
de cómputo? ¿Cómo el usuario interpreta la información que produce el sistema?
¿Finalmente qué espera el usuario del sistema?; para responder estas incógnitas
de la forma más adecuada de acuerdo al estudio que un diseñador ha hecho
previamente al trabajo, hay que tener en cuenta 3 reglas de oro:
- Dar control al usuario: un sistema que responda a las necesidades del
usuario y que le ayude a desenvolverse en las funciones del sistema.
- Reducción de carga en la memoria del usuario: siempre que sea posible el
sistema recordar información estrictamente pertinente y ayudar al usuario
con un escenario de interacción que facilite el uso de memoria.
- Lograr consistencia por parte de la interfaz: que la información visual está
organizada de acuerdo a una línea gráfica que se mantenga presente en
todas las secciones del sistema. [70]
51
5.7.2. Diseño de interfaz para web
En el diseño de interfaces para páginas o aplicaciones web, hay que tener en
cuenta los conceptos anteriormente explicados, de tal forma que el diseñador web
debe poder trabajar en armonía con los componente de diseño de interfaces, el
diseño de interfaz de usuario y la experiencia de usuario con el objetivo de crear un
producto de calidad; un ejemplo claro puede ser el orden en la estructuración de los
contenidos de un libro, donde su forma física y hasta la forma en que se
encuentran ordenadas las páginas, hacen que la interfaz sea muy sencilla e
intuitiva. [71]
El objetivo del diseño en la web es brindar un ambiente gráfico que le ilustre de
forma cómoda y fácil una guía para el usuario, tal guía debe estar estructurada de
forma que permita una buena interacción con la información que ilustra la página o
aplicación web, de manera que sea un compañero durante el proceso de
navegación para que en últimas el usuario pueda encontrar de forma óptima la
información que estaba buscando al ingresar al sitio en cuestión.
Una vez claro los conceptos hay que tener en cuenta principios elementales de
interfaz de usuario aplicados a la web:
- La claridad es el trabajo principal.
- La interfaz existe para brindar la interacción.
- Conservar la atención del usuario a toda costa.
- Los usuarios deben tener el control.
- La manipulación directa es mejor.
- Una acción primaria por página.
- Mantén las acciones secundarias como secundarias.
- Proveer un siguiente paso natural.
- La apariencia revela el comportamiento.
52
- La consecuencia importa.
- Las jerarquías visuales siempre funcionan.
- La organización inteligente reduce la carga cognitiva.
- Resaltar con color.
- El descubrimiento progresivo.
- Ayuda al usuario en el proceso. [72]
5.7.2.1. Diseño responsivo
El diseño web responsivo es una técnica en el diseño de interface web donde se
busca la correcta visualización y adaptación de una página o aplicación web en
diferentes dispositivos como computadores, tabletas y celulares, ya que es un
hecho de que las personas todos los días acceden a múltiples páginas web a través
de cualquier dispositivo, y en su mayoría ignoran cómo funciona esta tecnología.
Una vez claro el concepto que engloba el diseño web responsivo, la pregunta es:
¿En qué consiste este diseño?, primero se parte de la idea de redimensionar y
posicionar los elementos que constituyen una página web de forma que se adapte
de forma fluida al ancho del dispositivo, logrando una correcta visualización, sin
pérdida en la ilustración y línea gráfica de la interfaz, brindando una mejor
navegación y experiencia de usuario. [73]
Características
- Los layouts e imágenes son fluidos y se adaptan a cada pantalla.
- Permite reducir el tiempo de desarrollo.
- Evita los contenidos duplicados.
- Aumenta la viralidad de los contenidos.
53
Figure 5.17. Esquema Diseño Responsivo. [74]
5.8. Experiencia de usuario (UX) En los inicios de la web, la experiencia de usuario siempre tuvo un papel muy
importante en las páginas web, esto se debió a que las grandes empresas en los
diferentes sectores de la industria vieron la web como un herramienta con
potencial para expandir sus negocios y una manera más personalizada de
interactuar con los clientes y brindarles un servicio más exclusivo y accesible, es
decir, una forma de conectar sin importar de qué lugar se encuentren dichos
clientes; ahora bien, ¿Qué es la experiencia de usuario?, básicamente es el proceso
que realiza un usuario cuando tiene interacción con un producto, además como
mencionamos anteriormente, este concepto tiene su origen en el ámbito del
marketing online, donde se puede apreciar un vínculo con la experiencia de marca,
lo cual es la pretensión de establecer una relación familiar y consistente entre
consumidor y marca. [75]
Otra manera de definir la experiencia de usuario es el nivel de satisfacción de un
usuario cuando utiliza un producto o sistema, lo que será beneficioso en el caso de
que el usuario tenga una buena experiencia, se sentirá feliz con el sitio web, y
54
posteriormente recomendará la página, causando una expansión significativa en un
negocio.
Cuando se decide pensar en un buen diseño de experiencia de usuario, hay que
tener en cuenta factores importantes en su proceso, tales como el proyecto, el
presupuesto, las fechas de entrega y el nivel del profesional que lo realice; además
se debe seguir las siguientes fases:
- Estrategia: de esta manera se permite al principio de un proyecto articular la
marca, los principios básicos y la visión de futuro de la empresa mediante la
determinación de los objetivos.
- Investigación: a pesar de que esta fase es la clave para planear y crear una
experiencia en la que el usuario sea partícipe, es la que más se prescinde, en
especial los profesionales enfocados en el Lean UX.
- Análisis: extracción de ideas de los datos acumulados en la fase de
investigación, donde la comunicación del profesional y el usuario final
ayudará que las decisiones tomadas fueron las correctas.
- Diseño: se construye el feedback del usuario, donde el objetivo principal es
contraponer las ideas y obtener valoraciones, pulirlas y repetir este proceso;
las ideas se plasman en prototipos en papel, diagramas interactivos o semi-
funcionales, todos ellos creados a propósito en baja calidad.
- Producción: en esta fase se lleva a cabo un diseño de alta calidad donde los
accionistas y los usuarios finales interactúan en una versión de alta fidelidad
en fase de prueba, con el fin de lograr la aprobación final del diseño de
experiencia de usuario. [76]
55
Figure 5.18. Esquema Experiencia de Usuario (UX). [77]
5.9. Usabilidad El término o concepto de usabilidad engloba una variedad de elementos a su
alrededor que el significado que genera solo el nombre, ya que este ámbito es algo
más que el potencial o las posibilidades de uso de un producto. Usabilidad puede
ser definido como la medida en la que una página o aplicación web es usado por
usuarios, pertenecientes a un mercado específico, para conseguir objetivos
puntuales de forma efectiva, eficiente y satisfactoria en un contexto de uso
determinado.
El diseño de ingeniería de usabilidad mediante el establecimiento de unos
principios han logrado una reducción en los costes de producción, mantenimientos,
apoyo y uso, y principalmente el mejoramiento en la calidad del producto. [78]
Características
- Facilidad de aprendizaje: mide cuando demorar un usuario en concreto
interactuando por primera vez una interfaz logra aprender el correcto
funcionamiento de ella y realizar operaciones básicas en el proceso.
- Facilidad y Eficiencia de uso: una vez el usuario haya aprendido a usar el
sistema, se podrá definir la rapidez con la que desarrollan las tareas.
56
- Facilidad de recordar cómo funciona: es la capacidad con la que un
usuario recuerda las características y forma de utilizar un sistema para
volver a utilizarlo a futuro.
- Frecuencia y gravedad de errores: es el apoyo que brinda el sistema al
usuario durante el proceso de generación de errores al usar el sistema.
- Satisfacción subjetiva: ilustra la satisfacción de los usuarios cuando han
implementado el sistema, a partir de la facilidad y simplicidad de uso de
las interfaces.
El doctor en ingeniería que basó su carrera en el desarrollo de interfaces de
software, plasmó sus consejos principales para mejorar la usabilidad de un sitio
o aplicación web:
- Aclarar el propósito del sitio: se entiende a que en el primer contacto del
usuario con el sitio o aplicación web, tenga claridad de quién hace el sitio
y cuál es el enlace del mismo.
- Ayudar a los usuarios a encontrar lo que buscan: se refiere a la buena
organización de la información enfatizando en los mensajes de mensajes
principales y sistemas de búsqueda apropiado.
- Mostrar el contenido del sitio: se refiere a la manera correcta de exponer
los contenidos en el sitio evitando clicks innecesarios, mediante la
visualización de temas anteriormente vistos y destacados.
- Diseño para mejorar Interacción, no para definirla: se refiere a una
ideología perfecta para el proceso de desarrollo y tener claro que el
diseño trabaja en compañía con la información, más no competir con ella.
[79]
57
5.10. Filosofías de diseño
5.10.1. Flat Design
Esta filosofía conocida en español como Diseño Plano, tuvo lugar inicialmente en
la interfaz de Windows Phone a finales del 2010 por Microsoft, el cual continuó
posteriormente con la renovación de la interfaz del XBOX 360 en el año 2011 y la
aparición de Metro para Windows 8 en el año 2012. Flat Design parte de la idea de
suprimir todo tipo de decoración en el diseño de una interfaz con el fin de reducir el
mensaje y facilitar la funcionalidad, ¿De qué manera?, mediante la simplificación de
texturas, degradados, biselados, sombreados, etc., básicamente todo los elementos
que no aporten valor a la información que se quiere transmitir al usuario está
navegando en la interfaz.
Características
- Colores: generalmente se opta por usar paletas de colores pastel con
limitadas variaciones en cada color, además se intenta utilizar esquemas de
color colaboren a que el usuario comprenda el diseño de forma gráfica y
facilitar la interacción con el sistema.
- Tipografía: la preferencia se basa en implementar fuentes Sans Serif.
Generalmente para el título casi cualquier fuente de fácil lectura, además se
pueden implementar grandes tamaños mientras se reducen las longitudes
de títulos y subtítulos.
- Mensaje: la tendencia como fue explicado anteriormente es lograr ilustrar la
información de forma simple y clara, es decir, si puede entregar de forma
correcta un mensaje con 5 palabras, no es necesario usar 10, con la idea de
tener discreción y claridad en las denominadas llamadas a la acción; se
duele adicionar el mensaje códigos de color con el fin de brindar jerarquía o
importancia a la información. [80]
58
5.10.2. Material Design
Esta filosofía de diseño fue creada por Google en el año 2014, con la intención de
aportar un cambio significante y sobresaliente en la interfaz del sistema operativo
Android, el cual nombraron como Material Design, concepto que abarca
características como que es responsivo, llamativo, colorido, principalmente
enfocado en la iconografía, movimiento y profundidad; esta filosofía puede
apreciarse en todas las plataformas de Google, en las interfaces que se visualizan
en diferentes dispositivos, como PCs, tabletas y móviles.
En esta filosofía por parte de los profesionales encargados de aplicarla a un
proyecto específico, son los que deciden qué píxeles están encima de otros píxeles,
donde la interfaz los ilustra con luces y sombras, animaciones 3D y en definitiva la
sensación de estar jugando con superficies reales. [81]
Figure 5.19. Ejemplo de diseño Material Design. [82]
59
6. Antecedentes
6.1. Plataformas de investigación, colaborativas y
educativas
6.1.1. Schoology
Hoy en día la plataforma académica más utilizada es la red social educativa,
Schoology, fundado por Jeremy Friedman , Ryan Hwang, Tim Trinidad y Bill Kindler
en San Luis - Estados Unidos del año 2008, la cual es una aplicación para gestionar
mejor el aprendizaje a través de la integración de herramientas digitales en la nube,
cuya incentiva era poder reestructurar la manera de implementar la tecnología en el
aprendizaje y los espacios de clases, mostrando significativamente en qué
dirección se está moviendo el mundo académico y las virtudes que nos brindan los
conocimientos como el desarrollo web. [83] [84]
Uso en el ámbito educativo
- Tiene la opción de incorporar materiales alojados en otras plataformas como
Moodle o Blackboard.
- Se puede añadir contenidos como: asignar tareas, pruebas, archivos,
enlaces, discusiones, álbumes y páginas.
- Actualizar el curso, configurar y consultar el libro de calificaciones de los
alumnos.
- Crear y asignar medallas a los alumnos a modo de recompensas por el
esfuerzo y calificaciones.
- Anotar las faltas de asistencias, consultar el listado de alumnos y ver las
estadísticas (visita, comentarios, usuarios, etc.).
Requerimientos para usar Schoology
- Es gratuito.
60
- Lo único que se necesita para acceder es un registro previo.
- En ese primer acceso, el idioma por defecto de la plataforma es el inglés,
pero este se puede modificar. De momento se puede elegir entre español,
malayo, ingles británico y francés.
- Es fácil de usar.
Ventajas
- Es atractiva.
- Sencilla de utilizar.
- Integra muchas posibilidades en torno a un curso de formación y la opción
de incluir recursos propios y externos alojados en otras plataformas.
- Se puede instalar aplicaciones de aplicaciones de terceros.
- Al igual que otras muchas herramientas online, es posible instalarse la App
en dispositivos móviles tanto en sistemas operativos iOS o Android.
Desventajas
- No se tiene control sobre uso de los datos sensibles.
- Solo administradores o instructores de una institución pueden crear cursos.
- Para que un estudiante se registre debe poseer un código de invitación que
solo un instructor o administrador puede enviarle vía correo electrónico.
Figure 5.20. Captura de la plataforma educativa Schoology. [85]
61
6.1.2. Trello
También se ha popularizado mucho la plataforma colaborativa llamada Trello,
desarrollada por la empresa Fog Creek Software en septiembre del 2011, que para
julio del 2014 es independizado de esta convirtiéndose en Trello Inc.; este sistema
optimiza la gestión de procedimientos de comunicación y de progreso,
independientemente si son tareas académicas o laborales, dividiendo la sección de
tareas como guía para brindar una mejor experiencia y perspectiva del proyecto
que se está liderando o desarrollando. [86] [87]
Ventajas
- Sencilla estructura de unidad / actividades.
- No tener que enviar correos electrónicos.
- Comentarios con dudas de los alumnos.
Desventajas
- Desorden del tablero por alumnos que desconocían cómo usarlo.
- No se puede determinar quién puede mover / archivar tarjetas.
- Imposible insertar videos para verlos directamente en la tarjeta.
Figure 5.21. Captura de la plataforma colaborativa Trello. [88]
62
6.1.3. Claroline
El proyecto Claroline fue iniciado en el año 2000, en el Instituto Pedagógico
Universitario de Multimedia de la Universidad Católica de Lovain (Bélgica), por
Thomas De Praetere, Hugues Peeters y Christophe Gesché, con la financiación de la
Fundación Louvain de la misma Universidad. Claroline es una plataforma de
aprendizaje que permite a los formadores construir cursos online y gestionar las
actividades de aprendizaje y colaboración en la Web, además es una plataforma de
software libre y código abierto, creada en el año 2000 y programada en el lenguaje
de programación multiplataforma PHP usando servidores de Apache y MySQL
como SGBD (Sistema Gestor de Base de Datos). Claroline destaca por su
simplicidad, sencillez de uso, y está disponible para plataformas (Linux, Unix, Mac
OS X y Windows), navegadores libres (Mozilla, Netscape), y está traducido en 35
idiomas. Actualmente esta plataforma es utilizada como herramienta de
aprendizaje en la universidad nacional de Colombia. [89] [90] [91] [92]
Ventajas
- Software libre.
- Intuitivo.
- Dispone de las herramientas por las que suelen caracterizarse este tipo de
gestores de aprendizaje como: grupos, agenda, foros, wikis.
Desventajas
- De nuevo la comunidad es muy limitada en comparación con Moodle.
- Pocos módulos y plugins.
- De nuevo su uso en España en el 2009 era únicamente de un 1%.
6.1.4. Dokeos
Dokeos nació en 2004 a partir de Claroline, el creador de Claroline, Thomas de
Praetere, inició Dokeos debido a que la Universidad Católica de Lovaina prestaba
63
poca atención al desarrollo de Claroline, la cual es una suite de aprendizaje en línea
basada en software libre. Provee todas las características que una aplicación de
aprendizaje en línea necesita, pero Claroline es una marca registrada de la
universidad, decidió crear una nueva aplicación y, de esta forma, poner más énfasis
en el desarrollo de la misma. Para acometer este proyecto creó la empresa del
mismo nombre, Dokeos, esta empresa se encarga del desarrollo de Dokeos y ofrece
hospedaje, consultoría y soporte para empresas e instituciones. Al igual que
Claroline, Dokeos está programado en PHP y como servidor de base de datos usa
MySQL. [90] [92] [93]
Ventajas
- Software libre.
- Su interfaz tiene una apariencia bastante profesional y atractiva que las
demás.
- Disponible de numerosos recursos entre los que destaca la posibilidad de
realizar videoconferencias. Herramienta que de momento otros gestores de
aprendizaje no lo han desarrollado.
- Tiene la capacidad de montar sus propias redes sociales para facilitar la
comunicación entre los estudiantes.
Desventajas
- Su comunidad es mucha más pequeña que moodle.
- Su uso en España en el 2009 es únicamente del 1%.
- Dispone de menor número de roles del usuario que dispone otros gestores
como moodle.
64
6.2. Investigaciones científicas
6.2.1. Sistema de información y gestión proyectos de grado de la
Universidad del Valle
La investigación realizada por Pablo Andrés Díaz, en la Escuela de Ingeniería de
Sistemas y Computación en convenio con la Universidad del Valle, Cali - Colombia,
en Mayo del 2010, se desarrolló un sistema de información del programa
académico de ingeniería de sistemas en la gestión de trabajos de grado y de la
página informativa (SIPAIS), orientado por la profesora Paola Johanna Rodríguez
Carrillo, implementado bajo la metodología de desarrollo de software Extreme
Programming, el uso del lenguaje de programación PHP entendido para el
desarrollo de aplicaciones web y la base de datos relacional orientado a objetos de
código abierto PostgreSQL. [6]
Este proyecto se basó en crear una plataforma de gestión mediante secciones de
actividades, divididas en anteproyectos y trabajos finales de grado, y página
informativa, a través del envío, evaluación y respuesta de documentos, como de la
búsqueda de proyectos ya culminados con fines investigativos.
6.2.2. Sistema de información para la gestión de trabajos de grado de
la Universidad de Cartagena
Marcelo Solís y Poveda Julio Cesar Deavila Pertúz, estudiantes de la Universidad
de Cartagena, en el año 2013, asesorado por su director Martín Monroy Ríos,
realizaron un sistema de información para la gestión de los trabajos de grado,
mediante la distribución de requerimiento funcionales y no funcionales, es decir, la
evaluación, generación de informes, envío documentos, etc., y las características de
seguridad y confiabilidad del sistema. Esta plataforma se llevó a cabo bajo el
dominio de la metodología de desarrollo de software Proceso Unificado Racional
(RUP), el lenguaje de programación multiplataforma PHP, el patrón de diseño MVC,
65
el gestor de bases de datos MySQL, la tecnología de almacenamiento de tablas
InnoDB. [5]
Este proyecto brinda un aporte significativo a la idea de cómo una buena gestión
optimiza los procedimientos de un sistema mediante el ahorro del tiempo, que a su
vez se ve reflejado en una disminución de coste.
6.2.3. Sistemas de E-learning abiertos basados en servicios
En la Universidad Nacional de Educación a Distancia, en Madrid - España del año
2012, el Licenciado en Ciencias Físicas (Especialidad Cálculo Automático) Salvador
Ros Muñoz desarrolló sistemas de E-learning abiertos basados en servicios, donde
se concluyó que estas plataformas facilitan la personalización de entornos de
forma intuitiva para contextos de aprendizaje personalizados, donde el alcance de
esta tecnología logró reducir la carga de trabajo del profesorado, como en el
momento de corregir prácticas, y agilizó la autoevaluación del trabajo desarrollado
por parte de los estudiantes. [2]
6.2.4. Desarrollo de un bloque para la gestión de tutorías en Moodle
La investigación realizada por Diego Macías Álvarez, en la Universidad de Alcalá, en
Alcalá - España del año 2010, consistió en el desarrollo de plataformas de
enseñanza virtual libre y sus características de extensión: Desarrollando un bloque
para la gestión de tutorías en Moodle, donde concluyó que esta plataforma es la
ventajosa frente a los beneficios ofrecidos a los desarrolladores, particularmente
sus utilidades se concentran en que es una aplicación muy flexible, y como
evidencia de esta ventaja es la capacidad de extender el sistema por parte de la
misma comunidad. [90]
66
7. Desarrollo
7.1. Metodología
7.1.1. Investigación en diseño y desarrollo
En el proceso de desarrollo de la plataforma web de investigación, Sherlock, se optó
por hacer una investigación intensiva sobre las tecnologías y filosofías más
competentes en el mercado actualmente para aplicaciones web.
Para este proyecto a partir de los conocimientos que se destacan de un ingeniero
multimedia frente a aplicaciones web, se hizo un estudio sobre a los principios y
paradigmas del diseño de interfaz de usuario aplicados a la web, tomando en
cuenta las jerarquías que lo acompañan, como experiencia de usuario (UX),
Usabilidad, filosofía de diseño, entre otros.
En cuanto a desarrollo se investigaron las herramientas más robustas para el
proceso de desarrollo de plataformas web, frameworks destacados que brinden
funcionalidades acorde al tema de la aplicación, como también tecnologías y
paradigmas referentes al ámbito de la web, como patrones de diseño, patrones
estructurales, arquitecturas, y demás conceptos que ayuden a mejorar el
performance y estabilidad de Sherlock para lograr los objetivos propuestos en este
proyecto, con la idea final de crear un producto final de alta fidelidad.
Las tecnologías y paradigmas mencionados pueden ser estudiados en el Capítulo 7
de Marco teórico, los cual son implementados a detalle en el Capítulo de
Implementación.
67
7.1.2. Reuniones con stakeholders
La principal tarea y motivación de Sherlock es entrar a participar como mediador en
los procesos de investigación en la Universidad de San Buenaventura Cali,
actuando como un integrante más de los grupos y comunidades pertenecientes al
entorno de investigación, además busca moldearse como una herramienta que
permita fluir la gestión y desarrollo de los proyectos de grado y semilleros de
investigación por esta razón se realizaron diferentes reuniones con los actores
principales de la institución involucrados en los procesos administrativos de
investigación con el fin de tener insumos suficientes para generar tareas claves
como lo son el levantamiento de requisitos, límites de la plataforma y definir un
cronograma de trabajo fundamental para el proceso de desarrollo.
De acuerdo con lo anteriormente explicado es preciso exponer los stakeholders
involucrados en el proceso de planeación y construcción de Sherlock, es decir,
quienes son afectados o pueden ser afectados por las actividades del desarrollo.
En un principio el primer involucrado fue el director de la carrera de Ingeniería
Multimedia y el coordinador de los proyectos de grado de la misma, debido a que
esta es la única carrera que será involucrada inicialmente en el uso de la aplicación
web en los proyectos de investigación de la misma, por lo que sus impactos en la
aprobación de Sherlock es tomado de forma radical, gracias al nivel de experticia
de ambos en los procesos investigativos de la carrera.
Por otro lado se tuvo la colaboración de un grupo de docentes y un conglomerado
de estudiantes de Ingeniería Multimedia, frente a las expectativas y
funcionalidades de la plataforma de investigación, y su aporte en los proyecto de
investigación en los que pueda estar involucrados.
68
7.1.3. Diseño y maquetación de la interfaz de usuario
En el proceso de desarrollo del proyecto, después de haber investigado las pautas
adecuadas frente a las filosofías de diseño y los fundamentos de una correcta y
completa interfaz de usuario, teniendo en cuenta los criterios de ingeniería
multimedia aplicados a la web, se realizaron ilustraciones de bocetos de la
organización y las proporciones de las vistas principales que serían parte de la
plataforma, así como de las secciones dentro de las mismas, y así definir los
primeros pasos de la línea gráfica que será parte de la identidad de Sherlock.
Una vez completa la guía de bocetos de lo que sería la plataforma, se realizó el
diseño de los wireframes en la aplicación de escritorio Adobe Illustrator, de forma
detallado de acuerdo al diseño establecido y finalmente la maquetación de la
plataforma para continuar con la implementación.
Ver Anexo 1.
7.1.4. Etapa de diseño de base de datos
Para el diseño de la base de datos de Sherlock se hizo escogió el motor de bases
de datos relacional MySQL, con el apoyo de la aplicación de escritorio MySQL
Workbench. La construcción de la base de datos de la plataforma fue concebida
durante las reuniones realizadas con los stakeholder principales, el proceso de
levantamiento de requisitos y el diseño detallado de software.
7.1.5. Etapa de desarrollo de la plataforma web
El desarrollo de la plataforma de investigación, se puede componer de 2 fases
claves, la plataforma de gestión de proyectos de investigación y el módulo de
administración de las peticiones y normalizaciones de la aplicación; la cuales
fueron implementadas en simultáneo debido a que ambas partes eran necesarias
en la construcción de cada uno de las secciones y módulos de Sherlock.
69
La implementación técnica de ambas partes se divide en 2 etapas, la primera sería
el desarrollo Frontend de la aplicación, la cual consta o hace énfasis a la parte
visual y funcional de la misma, es decir, la interfaz, donde se integraron los
conceptos de filosofías de diseño, las técnicas de UX y usabilidad investigadas
anteriormente, moldeando así una plataforma con una interfaz agradable, de fácil
manipulación, y que permita la libre navegación del usuario, de forma autónoma y
eficaz.
La última etapa de la implementación fue el desarrollo Backend, construido
siguiendo el patrón estructural de diseño MVC (Modelo Vista Controlador), el cual
ofrece ventajas fundamentales en temas de escalabilidad, mantenimiento y
optimización; esto se debe a la separación de la lógica, los modelos y las interfaces
de usuario, donde la instancia de la base de datos fue tratado bajo el patrón de
diseño creacional Singleton y la recepción de las notificaciones fue moldeado por
el patrón arquitectónico Publish Subscribe. Se seleccionó para el desarrollo
backend, el lenguaje de programación PHP, ya que es multiplataforma, brinda la
capacidad de conexión con la mayoría de los motores de base de datos que se
utilizan en la actualidad, entre los cuales se destaca su conectividad con MySQL y
PostgreSQL; por otro lado al ser un lenguaje libre dispone de características que lo
convierten en una herramienta ideal para la creación de aplicaciones web
dinámicas, además el código fuente redactado en PHP es invisible al navegador ya
que el servidor es quien se encarga de ejecutar el código y enviar un resultado
específico en HTML al navegador, lo que permite que la programación es este
lenguaje sea seguro y confiable.
7.1.6. Pruebas
Después del desarrollo de la plataforma de investigación se realizaron pruebas con
los stakeholders del proyecto con el fin de observar y analizar el comportamiento
de los usuarios en la plataforma, como la respuesta de la plataforma en una
70
situación de varios usuarios navegando al tiempo al tiempo en la aplicación, de
forma orgánica. Las pruebas son explicadas más en detalle próximamente en el
capítulo de pruebas y análisis.
7.1.7. Elaboración de documento científico
Se realizó la creación de un documento científico con los resultados obtenidos en
la construcción de la aplicación web y la investigación realizada en el proceso con
el propósito de publicarlo en una revista de reconocimiento científico.
7.2. Diseño
7.2.1. Estudio del color
En el proceso de diseño de una interfaz escoger un color se convierte un factor
crucial debido a la influencia que tiene en el comportamiento que puede llegar a
tener un usuario en el momento en que interactúa con un sistema, como la
percepción del usuario se ve afectada por el efecto psicológico que genera el color
ilustrado generando diferentes reacciones por parte de la persona. Es común
aceptar el impacto que genera la primera impresión de un usuario en el momento
de navegar en una nueva interfaz, en la interacción humano-máquina, donde el
resultado no puede ser compuesto sino certero, es decir, la reacción solo puede ser
a favor o en contra.
Durante la investigación se escogieron colores variantes del verde y el gris. La
explicación de su elección empieza por el tema interés principal de la plataforma, la
investigación, por lo que el verde se relaciona directamente con ambientes
relajantes y refrescantes, induciendo a quien lo contempla a experimentar
sensaciones serenas y armoniosas; en el caso de las variaciones de grises, se
seleccionaron el oscuro y el neutro ya que estos generan una percepción fuerte y
71
elegante, que al mezclarse con el verde se llega a percibir también un ambiente
sofisticado.
#0F6177 #0B8389 #757575 #333333
7.2.2. Tipografía
De acuerdo a la investigación hecha frente al diseño mencionado en el marco
teórico del documento, y después de una búsqueda de tipografías candidatas que
se acoplaran bien a la filosofía de diseño seleccionada en la aplicación, se optó por
usar la tipografía Roboto, la cual cuenta con 9 diferentes estilos, además hace
parte de la familia sans-serif y cumple con los criterios estudiados.
Figure 7.22. Estilos de tipografía Roboto. [94]
72
7.2.3. Iconografía
En el diseño de la plataforma de investigación se usó la iconografía brindada por
las fuentes y estilos cascada de la empresa Font Awesome, los cuales se acoplan
de forma fluida a la filosofía de diseño, paleta de colores y tipografía
seleccionados.
7.3. Implementación
7.3.1. Levantamiento de requisitos
Anexo a este documento se incluye el documento SRS (Software Requirements
Specification). Este proceso se realizó a partir de las reuniones hechas con los
stakeholders y las especificaciones solicitados por los mismos; para esto se
implementó ingeniería de requisitos para lograr analizar, obtener, documentar y
validar las necesidades esenciales que son claves a través de este proceso.
El fin de este procedimiento es tener desde un inicio una base estable de lo que se
quiere diseñar y desarrollar, ordenando mediante la educación y priorización de
requisitos e implicados del proyecto.
En este documento se plantea una breve descripción de qué trata el proyecto,
especificando su propósito, el alcance y finalmente se detalla la perspectiva de la
plataforma de investigación, sus funcionalidades, restricciones, lógica de negocio,
roles de usuario, y el estudio del contexto, el cual se compone de sujeto, uso,
sistema y desarrollo, y finalmente realizar el levantamiento de requisitos con la
información plasmada.
Ver anexo 2.
73
7.3.2. Diseño detallado de software
Durante la implementación de ingeniería de requisitos, una vez revisado el
documento SRS, de que se cumpliera con las especificaciones solicitadas por los
stakeholders y el alcance previsto para el desarrollo de la plataforma de
investigación, se procede a comenzar el diseño detallado de software con el fin de
aterrizar los detalles necesarios para comenzar con la aplicación web.
La construcción de este documento permitió ampliar positivamente la perspectiva
que se tiene de la lógica de negocio, que en últimas se moldea para convertirse en
la lógica perteneciente al diseño y desarrollo de la aplicación web; por ende se
puede deducir que el propósito final que posee es tener una base muy sólida para
empezar la creación de un proyecto con un grado alto de complejidad, optimizando
el tiempo y los recursos que se usan en el desarrollo gracias a su planeación
detallada.
El diseño detallado de software construido para el desarrollo de Sherlock, está
cimentado por el diagrama de casos de uso, escenarios de casos de uso, diagrama
de tarjetas CRC, diagramas de secuencia, diagramas de despliegue detallado y
diagrama de capas y niveles.
En la realización del diagrama de casos de uso se debe de tener en cuenta los
requerimientos detallados en el documento SRS, donde un caso de uso puede estar
representado por 1 o más requerimientos, así se pudo construir un panorama más
detallado de las tareas principales de Sherlock, lo que en retrospectiva agilizaría el
desarrollo de la plataforma web.
Después de tener hecho el diagrama de casos de uso, se procede a realizar los
escenarios de casos de uso, para lo que se tiene que tener seleccionado las tareas
principales del proyecto, ya que los escenarios plantean situaciones hipotéticas en
74
las que un usuario podría enfrentarse al realizar una tarea específica en el sistema,
logrando anticiparse al comportamiento que tendrá dicho sistema cuando un
proceso sea exitoso, esto para el caso de los escenarios primarios, o erróneo en el
caso de los escenarios secundarios; estos últimos da participación a ciertas tareas
en el sistema, que solo pueden ser realizadas en caso de que una acción fracase.
Los escenarios de casos de uso fueron muy fructíferos para diseñar la buena
interfaz de usuario de la aplicación web, ya que brindó pautas de cómo sería el
ambiente o el sistema en el que interactuará un usuario determinado, lo que facilitó
la creación de los wireframes de la plataforma.
Al terminar los escenarios de casos de uso, se procedió a realizar el diagrama de
las tarjetas CRC (Clase, Responsabilidades, Colaboradores), lo que permitió
acercarse en gran medida a las clases que serán necesarias para el desarrollo de la
aplicación web, y cómo se relacionarán entre sí.
Después de tener el diagrama de tarjetas CRC se realizaron los diagramas de
secuencia, una vez teniendo decretadas las clases que serán necesarias en el
proyecto, se generaron objetos para que interactúen entre sí en un sistema a través
del tiempo; para la creación de cualquier de los diagramas de secuencia se
seleccionó uno de los diagramas de caso de uso especificados anteriormente, es
decir, una tarea real de la plataforma para ver su realización a cargo de los objetos,
paso a paso. Esto permitió acercarse a las posibles secciones o módulos que
tendrá la aplicación web, y las funcionalidades que las compondrán.
Los diagramas de despliegue detallado, fueron realizados bajo la composición de
un diagrama de cajas, diagrama de despliegue y un diagrama de paquetes para
cada uno, permitiendo entender la arquitectura que se tendría en el desarrollo de la
plataforma web y cómo se relaciona en el proceso en que un objeto realizar una
tarea en el sistema. Este diagrama permitió analizar la interacción de la estructura
75
de Sherlock, donde un actor se comunica con un dispositivo a través de un
navegador web con el servidor de aplicaciones, detallando los elementos que
llegaron a interactuar en un la realización de una tarea.
Finalmente se realizó el diagrama de capas y niveles, una vez terminado los
diagramas de despliegue detallado, permitiendo observar todos los niveles de
comunicación de las capas que componen la plataforma, desde la interfaz de
usuario del lado cliente hasta el esquema de base de datos del lado del servidor.
La construcción del diseño detallado de software logró corregir y modelar Sherlock
para que el alcance y los aspectos que no fueron tomados en cuenta en el
momento en que se planteó el proyecto, y así tener una estructura más sólida para
empezar la implementación.
Ver anexo 3.
7.3.3. Arquitectura
En el desarrollo de la plataforma de investigación se optó por usar el framework de
PHP creado por el docente Pablo Bejarano, inicialmente como parte de su proyecto
de grado y posteriormente para la enseñanza de desarrollo web backend, el
framework ha ido creciendo y mejorando a través del tiempo mediante las
investigaciones realizadas por el mismo y los requisitos de los temas de clases, en
pro de crear aplicaciones más eficientes y dinámicas desde un enfoque académico.
Durante la implementación de Sherlock se hicieron cambios y adiciones en la
estructura de carpetas de la herramienta, cambios funcionales de la lógica de
renderización de layouts, aumento en la seguridad de las sesiones, permisos de
peticiones asíncronas, mejora de la librería de manejo de archivos, integración de
versionamiento de la plataforma para futuros despliegues a producción, carga
dinámica de archivos fonts, css y js para el mejoramiento del performance, entre
76
otras adiciones en la programación funcional, como la lógica estructural
establecida para las reglas de cada módulo de Sherlock.
En Sherlock como se dijo anteriormente se implementó el patrón de diseño MVC
(Modelo Vista Controlador), el cual viene integrado por defecto en el framework, por
lo que en la estructura de carpetas de la aplicación todas las vistas pertenecientes
a todas las secciones de la plataforma, se encuentran en la carpetas “views” del
proyecto, la cual tiene una estructura de carpetas interna donde cada una posee el
nombre de uno de los controladores de Sherlock, por ejemplo el controlador de
“Usuarios_controller” al renderizar una vista, de acuerdo a las reglas del patrón,
debe encontrarse en la carpeta “Usuarios” de “views”, cabe decir que los
controladores que son los encargados de conectar y mediar la lógica de datos de la
visualización de las vistas se encuentran en la carpeta “controllers”. En la carpeta
de vistas existen 2 carpetas que no se conectan directamente con ningún
controlador, pero que son recursos que se usan para indefinidas secciones de la
aplicación, como la carpeta “modules”, la cual existe por defecto en el framework, y
la carpeta layouts, adicionada en el proceso de este desarrollo, la cual puede
contener los diseños base de indefinidas secciones de la plataforma, además la
lógica que lleva consigo esta carpeta puede apuntar a la incrustación de diferentes
plataformas adicionadas al proyecto distintos a Sherlock.
La lógica de datos de la plataforma es moldeado a través de los modelos que se
encuentran en la carpeta “models”, los cuales posee directamente el nombre de
una entidad o tabla de la base de datos de Sherlock, cuyos archivos heredan del
concepto ORM explicado en el capítulo de Marco teórico, además se conectan
directamente con la base de datos mediante PDO. En el desarrollo de la plataforma
se crearon funcionalidades propias de la lógica de negocio de la misma, pero que
eran necesarias para diferentes secciones de Sherlock , por lo que fueron escritas
en los archivos de la carpeta “bussines_logic”, los cuales contienen la lógica de
77
negocio de las entidades propias de la base de datos, es decir, que cada una
contiene el nombre de alguna de las tablas de Sherlock, parecido a los modelos,
con la diferencia de la adición de la palabra “_bl” al final del nombre, por ejemplo
“Usuarios_bl”; esto supuso una mejora en el rendimiento de la plataforma mediante
la reutilización de recursos.
En la desarrollo de la aplicación web se adicionó la carpeta “uploads”, la cual
contiene todos los archivos multimedia de la plataforma, generados por las
funcionalidades de Sherlock, las cuales por supuesto, tienen conexión con la lógica
de datos de la base de datos, donde internamente contiene una estructura de
carpetas pertenecientes a alguna entidad de la misma, por ejemplo la carpeta de
“usuarios”. También se adiciono la carpeta “helpers” para la reutilización de
recursos específicos que ayuden en el proceso de implementación de alguna
funcionalidad de la plataforma.
En el framework utilizado se hicieron cambios en las librerías “Controller”, “Model” y
“View” del core, con el fin de satisfacer las exigencias de la nueva estructura
implementada en el desarrollo de Sherlock, todo esto mejoró el rendimiento de la
aplicación en temas de mantenimiento, escalabilidad y performance, por lo que
Sherlock posee ahora una estructura que permitirá su crecimiento a través del
tiempo a favor de los nuevos desarrollos y su aumento en la complejidad no se verá
afectada.
78
Figure 7.23. Estructura de carpetas de aplicación web.
79
7.3.4. Implementación de la plataforma
7.3.4.1. Base de datos de la plataforma
En el proceso de desarrollo de la plataforma de investigación, uno de los elementos
más vitales para su implementación es el diseño de la base de datos, para la cual
se tuvieron en cuenta principalmente el documento SRS y el diseño detallado de
software, ya que estos conforman los resultados obtenidos a partir del análisis,
mejora y estructuración de las peticiones o requerimientos de los stakeholders, por
lo que podemos deducir que la base de datos de Sherlock claramente corresponde
a la lógica de negocio del proyecto.
En el proceso de diseñar la base de datos se tuvo como herramienta principal
MySQL Workbench, en la cual se construyeron cada una de las entidades o tablas
que conforman la lógica de Sherlock, dichas entidades fueron concebidas bajo la
implementación del patrón de bases de datos, Maestro detalle, el cual se explica en
el capítulo de Marco teórico, además se incrusto el concepto de arcos exclusivos
con el fin de optimizar y ahorrar tablas de relación intermedia.
Ver anexo 4.
7.3.4.2. Maquetación de la plataforma usando Wireframes
El desarrollo de la aplicación web tuvo un crecimiento estrictamente apoyado en la
investigación hecha en los inicios del proyecto, como el diseño detallado de
software y los wireframes, así como el estudio de las filosofías de diseño, UX y
usabilidad. En el momento de maquetar las secciones que conformar Sherlock, la
guía principal fueron los wireframes construidos bajo los conocimientos adquiridos
en la curso de diseño de interfaces de 9° semestre, que en retrospectiva es el
conjunto de una parte de los resultados de esta investigación; cabe apuntar que el
desarrollo de la aplicación web fue hecho en paralelo entre el Frontend y el
Backend, exceptuando claro está, la base datos, la cual fue hecha antes con ayuda
del diseño detallado de software.
80
Figure 7.24. Wireframe objeto detalle de Sherlock.
La plataforma de investigación en el lado del Frontend se dividió en 2 partes, la
primera es la página web informativa de Sherlock, la cual corresponde a la página
de inicio donde un usuario aún no ha iniciado sesión, el cual tiene la opción
disponible de hacerlo de registrarse en el caso de que no posea una cuenta de
usuario, además de los contenidos informativos claro está.
Figure 7.25. Página web informativa de Sherlock.
81
La segunda parte hace alusión a la plataforma de investigación como tal, donde
contiene las secciones globales como la cabecera y el pie de página; la cabecera
contiene el menú principal y el menú de cuenta. Sherlock también posee menús de
sub-sección de algún módulo específico, como menús detalle que se sincronizan
con un objeto específico de la vista como tal, por ejemplo las opciones que
conforman el detalle de un proyecto de grado o un semillero de investigación.
Figure 7.26. Detalle de un proyecto de grado.
Finalmente existen secciones o vistas de la aplicación web que tienen mucho
parecido en la línea gráfica que las conforman, por lo que se respeta el estudio y los
criterios establecidos para el desarrollo en el proceso de investigativo del proyecto.
7.3.4.3. Estructuración e implementación de módulos de la plataforma
En el desarrollo de la aplicación web se estructuraron diferentes reglas de juego,
todas a favor de acelerar el proceso de implementación, pero con la idea de
aumentar el rendimiento de la plataforma, aumenta la seguridad y la usabilidad de
la misma. En el lado Frontend y el Backend se tuvo la claridad de aumentar la
protección funcional a partir de varios criterios, en primera instancia fue la
ejecución de los formularios, mediante la implementación de la librería
82
“FormValidationSV” en la versión 2.0.7, para la validación de los mismos, no solo en
el tipo de valores permitidos en los campos, sino también adicionando validaciones
asíncronas con el servidor, como por ejemplo la verificación de cuenta de usuario
disponible en el registro de usuario; después en el lado del servidor se implementa
una estructura funcional para validar los datos de los formularios en una petición
ejecutada por un usuario con la ayuda de la librería “PHPValidation”, esta segunda
barrera actuara en el caso de querer burlar el conducto regular de dicho proceso. La
tercera barrera fue a partir de los permisos revelados por los roles de usuario de
una cuenta, para negar el acceso a secciones que no correspondan a su papel en la
plataforma. Finalmente como cuarta y última barrera se implementó la revisión de
incongruencia de datos a partir de la existencia de los mismos y la conexión que
tiene con un usuario específico y los roles que desempeña, como por ejemplo si un
usuario desea entrar en el detalle de un proyecto de grado, pero no es integrante de
dicho proyecto, la plataforma negará el acceso de este individuo, ahora bien, si
pasa el escáner, y decide ejecutar alguna acción que solo el director de dicho
proyecto podría realizar, Sherlock volvería a verificar su relación con el proyecto
sumando la validación de los roles que ocupa o directamente en el liderazgo del
proyecto de grado.
En el lado de Frontend se integró una adición en la estructura de la plataforma, para
cargar de forma dinámica archivos de fuentes, estilos y scripts, esta adición fue
hecha directamente en la librería del core “view”, ya que es la encargada cargar los
recursos en el lado del cliente. Esta funcionalidad dio lugar a estructurar
funcionalidades JavaScript globales, es decir, elementos que siempre se cargan en
todas las secciones de la plataforma, acoplándose a la funcionalidad propia de un
módulo, permitiendo su unión de forma orgánica; cabe apuntar que los módulos en
su mayoría tienen su propio archivo JavaScript en la carpeta “js” de la carpeta
“public”, cuyo nombre corresponde directamente a un controlador específico de la
plataforma, los cuales se cargan de forma dinámica de acuerdo al contexto. Esto
83
resultó muy fructífero en el caso de que un módulo necesitase una funcionalidad
propia de otro, muy parecido a la lógica de negocio de los modelos
(Business_logic). Todo esto fue posible filtrarse al adicionar una constante que
indica en qué sección de la página de encuentra un determinado usuario.
En el lado del servidor se hizo un carga lógica de los menús de la plataforma de
investigación a partir de los roles que desempeña un usuario determinado, lo cual
resultó beneficioso en términos de mantenimiento y escalabilidad, ya que al no
estar estáticos en una vista de la plataforma, se pueden administrar y filtrar en
cualquier etapa de la vida de Sherlock, esto hace que los próximos desarrollos que
pueda tener la aplicación web no se vean afectados en este punto. La creación de
los roles de usuario para filtrar secciones de la plataforma ayudó también a crear
los módulos de administración, ya que al partir de la clara idea de que pocos
usuarios llegarán a poseer el papel de administrador, o súper-administrador (El cual
solo es uno), permitió acelerar el proceso de construcción de los mismos.
En la base de datos de Sherlock inicialmente se pensó la integración de un trigger
que se encargará de validar la fecha límite de una actividad del calendario de un
proyecto de grado o semillero de investigación, con el fin de reprobar dicha tarea,
en pro de tratar de forma imparcial a los encargados y el responsable de validarla,
pero se decidió que no era necesario su implementación para el alcance de la
plataforma, ya que carecía de criterio y podría ser un riesgo a futuro para el
funcionamiento de la base de datos.
Las sesiones de la aplicación web inicialmente eran propensas a tener problemas
de seguridad y compatibilidad con aplicaciones que se encuentren alojadas en el
servidor de aplicaciones, por lo que se le adiciono una llave encriptada creada a
partir de la combinación de la llave de la plataforma, la cual fue encriptada a través
“sha512”, con una fecha específica, todo esto sometido a una encriptación MD5, la
84
cual se anexa en los nombres de las cookies de las sesión, de tal forma que un
futuro desarrollador puede dar uso de las datos con nombres correspondientes a la
lógica de negocio sin verse perjudicado en el proceso.
En cuestión de mantenimiento y performance se adicionó el patrón arquitectónico
Publish Subscribe para la recepción de las notificaciones de Sherlock, las cuales
tiene una funcionalidad adicional de eliminación de notificaciones leídas a partir de
la notificación 51 hacia arriba con tal de optimizar los procesos de la base de
datos. Finalmente se integró una funcionalidad de versionamiento en la que los
nuevos desarrollos de la plataforma no se vean afectado en el momento de
desplegar a producción por recursos almacenadas en caché en el lado del cliente,
por lo que cada vez que se carga un recurso ya sea una fuente, un estilo o script, al
estar ligado a la versión de la plataforma, el navegador no encontrará el archivo
específico y se verá obligado a descargar el nuevo archivo al que apunta la página.
85
8. Pruebas y análisis En el proceso investigativo de la aplicación web, Sherlock, se estructuró una
metodología a seguir en la realización de las pruebas y análisis de la plataforma, de
las cuales surgieron 3 facetas en el transcurso de su ejecución, orientadas
directamente a los stakeholders del proyecto, con el fin de obtener la aprobación
total de las funcionalidades de la aplicación.
8.1. Primera reunión con stakeholder principales En primera instancia se planeó una reunión con los 2 principales stakeholders de
Sherlock, el director de la carrera de ingeniería multimedia y el coordinador
proyectos de grados de la carrera de ingeniería multimedia, con el fin de mostrarles
el resultado de la investigación y desarrollo que se llevó a cabo en el proceso de
implementación de la aplicación web, mediante las exploración y ejecución de las
funcionalidades principales de la misma, por parte de los stakeholders, esto fue
guiado por el equipo de desarrollo.
Finalmente la reunión que se llevó a cabo tuvo un segundo objetivo, el cual
consistía en obtener la aprobación de los directos para la realización de las
pruebas de aceptación y encuestas, de las cuales hablaremos más adelante,
disminuyendo los riesgos durante la realización de las mismas, mediante la
detección y asistencia de bugs, errores o inconsistencias de la plataforma, por lo
que resultó muy fructífero para Sherlock, ya que se pudo generar un documento de
cambios y ajustes por parte de los stakeholders principales.
Ver anexo 5.
86
8.2. Pruebas de aceptación de los stakeholders La segunda faceta de las pruebas y análisis de la plataforma web fue llevado a
cabo gracias a las pruebas de aceptación de las funcionalidades principales de
Sherlock, estos fueron los requerimientos que surgieron de las reuniones realizadas
con los stakeholders al inicio del proceso investigativo del proyecto, los cuales
fueron moldeados y pulidos en la realización del diseño detallado de software de la
aplicación web, el cual fue explicado en el capítulo de desarrollo.
Las pruebas de aceptación se dividieron en 4 roles, los cuales fueron el
administrador, el docente, el estudiante de pregrado y el estudiante de semilleros
de investigación, generando respectivamente 4 documentos a incorporar,
construidos con el listado de funcionalidades solicitadas de Sherlock, cada
documento fue estructurado con los requerimientos puntuales de su rol y
requerimientos globales para cualquier rol de la aplicación web, una sección de
observaciones y la firma del stakeholder, con el fin de hacer valido dicho
documento.
Las pruebas de aceptación por parte de los documentos de administrador y
docente fueron encabezados por el director de la carrera de ingeniería multimedia,
la secretaria del programa de ingeniería multimedia y el coordinador de proyectos
de grado de la carrera de ingeniería multimedia. Por otro lado las pruebas de los
roles de estudiante de pregrado y estudiante de semilleros de investigación fueron
llevado a cabo de una forma diferente, se reunió a un grupo de estudiantes a través
de una video llamada grupal en la aplicación de Google, Hangout, aprovechando el
hecho de que se alojó la plataforma de investigación en una máquina virtual de la
plataforma de Google Cloud, dicha reunión pudo tener lugar en línea sin ningún
problema, siendo la oportunidad propicia para probar el comportamiento de la
plataforma y su rendimiento al trabajar varios usuarios al tiempo, en las diferentes
funcionalidades que posee Sherlock, dando a luz a un video que además de los
87
documentos de aceptación, sirven de evidencia del cumplimiento de los
requerimientos, y más importante aún, el funcionamiento de la aplicación.
Ver anexo 6 y 7.
8.3. Encuestas de experiencia de usuario Finalmente en la tercera y última faceta de las pruebas y análisis de la aplicación
web se llevaron a cabo encuestas de experiencia de usuario, las cuales tuvieron
lugar mediante la guía del equipo de desarrollo, la exploración en la aplicación por
parte de los encuestados y el comportamiento observados en ellos. Para las
realización de las encuestas se seleccionaron 35 estudiantes de la carrera de
ingeniería multimedia, entre los cuales se tomaron estudiantes en la etapa de
anteproyectos y proyectos de grado, como de egresados de la misma; la encuesta
fue construida con 8 preguntas, donde cada una tuvo lugar a calificación
enumerativa, de 1 a 5, donde 1 representa lo más bajo y 5 el más importante, y una
sección de observaciones.
A continuación se presentan los resultados que tuvieron lugar en las encuestas de
experiencia:
Figure 8.27. Respuestas pregunta 1: Considero que Sherlock brinda apoyo en la
creación y gestión de grupos de investigación.
88
Figure 8.28. Respuestas pregunta 2: Considero que Sherlock ayudará a facilitar los
procesos de planteamiento de anteproyectos de grado.
Figure 8.29. Respuestas pregunta 3: La plataforma de investigación facilita la
gestión de los proyectos de investigación mediante la gerencia de un calendario de
actividades y administración de archivos.
89
Figure 8.30. Respuestas pregunta 4: Los procesos de búsqueda de antecedentes
son más amigables utilizando la plataforma de investigación.
Figure 8.31. Respuestas pregunta 5: La aplicación web es intuitiva y amigable con
el usuario en el proceso informativo de los docentes investigadores, proyectos de la
bolsa y semilleros de investigación de la carrera de Ingeniería Multimedia.
90
Figure 8.32. Respuestas pregunta 6: La plataforma de Sherlock posee buenos
tiempos de reacción, permitiendo la navegación en ella de forma ágil.
Figure 8.33. Respuestas pregunta 7: La plataforma Sherlock brinda buenas
alternativas de información para colaborar en el proceso de exploración y
utilización de las diferentes funcionalidades que ofrece.
91
Figure 8.34. Respuestas pregunta 8: La plataforma me permite estar al día con el
estado y el proceso de los proyectos de investigación a través de la recepción
oportuna de notificaciones.
Ver anexo 8.
Por medio de la realización de las pruebas y análisis de los resultados a los
estudiantes actos para el proceso de desarrollo de proyecto de grado del programa
de ingeniería multimedia, se pudo concluir que Sherlock cumple con los
requerimientos establecidos en el momento de plantear el proyecto, pero mediante
el estudio de los resultados se formula el mejorar un poco los procesos de
interacción y usabilidad de la plataforma, ya que los usuarios tuvieron breves
tropiezos en la búsqueda de algunas secciones de exploración de la plataforma,
pero el número de incidencias fue mínima.
Al final de las pruebas los comentarios fueron principalmente positivos, junto con
algunos aportes de nuevas funcionalidades que serían recomendables implementar
a futuro en la aplicación web.
92
9. Conclusiones y trabajos a futuro
9.1. Conclusiones 1. El levantamiento de requisitos es sin duda una formalidad estrictamente
necesaria, permitió detectar las necesidades claves, y las funcionalidades
importantes para lo que sería la plataforma de investigación, Sherlock, esto
se hizo en conjunto con los afectados de llevar a cabo dicho desarrollo, los
stakeholders, por lo que finalmente se pudo empezar una investigación con
pie firme, al tener claro el listado de requerimientos del proyecto.
2. La construcción del diseño detallado de software es una las prácticas más
benéficas a la hora de diseñar y desarrollar un software de alta calidad, para
el alcance de esta investigación, una aplicación web. Este documento logró
visualizar el alcance de un proyecto, moldearlo acorde a las exigencias que
no fueron tomadas en cuenta en sus inicios, logrando una sólida
infraestructura.
3. El diseño e implementación de los wireframes de la plataforma de
investigación permitió visualizar lo que sería finalmente, pero no totalmente,
la aplicación de Sherlock, pero aún más importante cuál sería el espacio en
el que los usuarios de diferentes roles iban a convivir e interactuar,
minimizando las incongruencias y mejorando la navegación en la
plataforma.
4. La selección de los colores, la iconografía y la tipografía que representaran la
identidad gráfica de una proyecto, no son elementos que se debían escoger
a la ligera, debido a que los usuarios en su mayoría siempre tendrán
contacto con las aplicaciones de forma visual, por lo que elegir estos
recursos de forma inadecuada, o apresurada, puede terminar por crear una
93
experiencia negativa para un usuario, por no decir que puede llegar a ser muy
aburrida o desagradable, finalmente esto repercute en la aceptación, la
permanencia y el patrocinio por parte de los usuarios, que dicho de otra
forma, representan los pilares de éxito de una plataforma web. Tener en
cuenta estos aspectos resultó muy benéfico para el diseño y maquetación
de Sherlock, el estudio de filosofía de diseño y del color fueron la mejor
elección para la plataforma en el proceso investigativo.
5. El diseño de la bases de datos relacional de Sherlock logró ser construida de
forma fluida, escalable y flexible, todo gracias a la implementación del
patrón de bases de datos, maestro detalle, lo que permitirá la administración
y escalabilidad de la lógica de negocio de forma segura en el futuro, además
de la adición de los arcos exclusivos, que a través de la flexibilidad que nos
brinda, se pudo reutilizar entidades, minimizando la creación de tablas
innecesarias.
6. La planeación y ejecución de una estructura de implementación a nivel
protección funcional en el código fuente, tanto en el frontend como en el
backend de la aplicación, resultó muy fructífero en cuanto a mantenimiento,
seguridad y escalabilidad. Estas reglas de juego permitieron moldear una
plataforma que se encarga de proteger los datos sensibles de los usuarios
en el lado del cliente y del servidor, minimizando los errores del sistema y la
incongruencia de datos.
7. La implementación de los roles de usuario junto con la carga dinámica de los
cuatro tipos de menú que conforman la aplicación, no solo creó la existencia
de la tercera barrera de protección funcional de la plataforma, sino que
además dejó consigo una estructura para escalar el desarrollo y la creación
94
secciones y filtrarlos acorde a los permisos que sean delegados a los
diferentes roles del sistema.
8. La creación de una llave encriptada creada a partir de la combinación de la
llave de la plataforma y una fecha específica, las cuales fueron sometidas a
una encriptación MD5, a la cual se anexa en los campos de las cookies de
las sesión de Sherlock, aumentó la seguridad y compatibilidad de
aplicaciones alojadas en un mismo servidor.
9. La implementación del versionamiento de la plataforma, logró cimentar y
trabajar en una aplicación que no presentará problemas de compatibilidad
en el lado del frontend en el momento de hacer despliegue de nuevas
funcionalidades en futuros desarrollos de Sherlock.
10. La idea de equipar los procesos investigativos de la carrera de ingeniería
multimedia con una plataforma orientada a la investigación resultó
acertada, esto promueve la búsqueda de información por parte del
alumnado, refuerza la comunicación entre grupos de investigación, mejora la
gestión y culminación de los proyectos del programa de ingeniería
multimedia.
9.2. Trabajos a futuro Una vez culminado la investigación de la aplicación web, Sherlock, y gracias a las
pruebas y análisis realizadas en el proceso, contribuyó con diferentes funcionalidad
para implementar el sistema, ya que es una herramienta que irá creciendo como un
proyecto investigativo permanente de la carrera de ingeniería multimedia, que en
futuro se espera su incrustación en todas las carreras de la Universidad de San
Buenaventura Cali.
95
Para futuro Sherlock deberá adicionar la posibilidad de los estudiantes contacten
directamente con los docentes mediante la aplicación, por solicitudes, para que
puedan encontrar un director para una propuesta de anteproyecto de grado
aprobado, esto se debe a que actualmente es un administrador quien integra el
nuevo director al anteproyecto, el cual fue contactado por fuera para dicha
integración, ya sea por uno estudiante del grupo de investigación o el futuro
director del proyecto. También se espera que un estudiante o docente pueda
solicitar el ingreso a un semillero de investigación a través de Sherlock, es decir,
mediante solicitudes, ya que actualmente toca contactar por fuera al director del
semillero, darle el código de estudiante y que lo integre manualmente.
Durante las encuestas de experiencia de usuario, surgió la solicitud de crear una
sección de contáctenos en la plataforma, para que los usuarios puedan enviar una
puntual que tengan referente a Sherlock, además sintieron la necesidad de que las
notificaciones de la aplicación web lleguen al correo electrónico para optimizar el
proceso de comunicación de las mismas.
Finalmente el equipo de desarrollo al dialogar con los stakeholders principales
referente a la experiencia de la plataforma y las funcionalidades a futuro,
plantearon la idea de incluir una herramienta de generación de actas de los
proyectos de grado y semillero de investigación a través de una grabación de audio
en tiempo real, explicando con un ejemplo, un grupo de investigación se encuentra
en una reunión de entrega con el director de su proyecto de investigación, y
mediante Sherlock activan la funcionalidad de la generación de acta con la
herramienta explicada, lo que se pretende es que mientras los integrantes hablan
durante la reunión, la aplicación en el lado del cliente están procesando el audio,
generando y adicionando las cadenas de texto temporalmente en una variable, la
cual será enviada al lado del servidor para ser convertida en un documento, alojado
en el mismo y su ubicación guardada automáticamente en la base de datos, por lo
96
que al ser del lado del cliente, este proceso será independiente para cada usuario
que use esta funcionalidad, el servidor no se verá afectado en el procesamiento y
será una herramienta poderosa en las generación de actas para los proyectos de
investigación de ingeniería multimedia.
9.3. Recomendaciones Los proyectos de grado son investigaciones que nacen a partir de una idea
concreta de dar un aporte significativo a una carrera universitaria específica,
volviéndose un instrumento de enseñanza y anécdotas para los próximos
investigadores en ansias de ser cada vez mejores y llegar a la verdad.
En algunos casos las investigaciones son proyectos que tienen el potencial de
seguir adelante con nuevos estudios e ir creciendo exponencialmente por el aporte
de diferentes investigadores que decidan continuar con dicha labor; Sherlock es
una plataforma de investigación pensada para la comunidad académica del
programa de ingeniería multimedia, con metas de ser a futuro una herramienta de
apoyo en todas las carreras de la Universidad de San Buenaventura Cali, por eso es
recomendable que los estudiante que realicen este tipo de investigaciones tengan
como objetivo en su proceso de trabajo, el dejar instruido al siguiente o siguientes
investigadores que seguirán con el proceso de estudio del proyecto, evitando que
labores tan significativas caigan en el olvido y solo sirvan de antecedentes para
próximas investigaciones, a pesar de tener el potencial de crecer más.
97
10. Referencias
[1] "Breve historia del desarrollo Web," in Geeks, 2016. [Online]. Available:
http://geeks.ms/wikis/iis/breve-historia-del-desarrollo-web.aspx. Accessed: Nov.
23, 2016.
[2] S. R. Muñoz, "“Sistemas de Elearning abiertos basados en servicios," Ph. D,
Universidad Nacional de Educación a Distancia, Madrid, España, 2012.
[3] A. Sartorio, G. Rodríguez, and M. Vaquero, "Investigación en el diseño y
desarrollo para el enriquecimiento de un framework colaborativo web sensible al
contexto," Univ. Abierta Interamericana (UAI) - Univ. Nacional de Rosario, Rosario,
Argentina, 2011.
[4] I. C. Blanco, "Ingeniería en Informática Plataformas de desarrollo de
aplicaciones Web orientadas a componentes reutilizables," Universidad de Buenos
Aires, Buenos Aires, Argentina, 2008.
[5] M. S. Poveda and J. C. Deavila P, "Sistema de información para la gestión de los
trabajos de grado," Universidad de Cartagena, Cartagena de Indias, Colombia, 2013.
[6] P. A. Díaz, "Sistema de información del programa académico de ingeniería de
sistemas en la gestión de trabajos de grado y de la página informativa (SIPAIS),"
Escuela de Ingeniería de Sistemas y Computación, Cali - Valle del Cauca, Colombia,
2010.
[7] J. C. Roman P, "Diseño e implementación de un sistema colaborativo de
mensajería electrónica para la Universidad de Pamplona," Universidad de
Pamplona, Pamplona, Colombia, 2006.
98
[8] "Prórrogas," in Enciclopedia Jurídica. [Online]. Available:
http://www.enciclopedia-juridica.biz14.com/d/prorrogas/prorrogas.htm. Accessed:
Nov. 23, 2016.
[9] Abelsuing, "Definición de las Líneas de Investigación," in Slideshare. [Online].
Available: http://es.slideshare.net/abelsuing/definicin-de-las-lneas-de-investigacin.
Accessed: Nov. 23, 2016.
[10] M. Logrono, "Maria Jose tellez jarquin," in Slideshare, pascual Yana, 2016.
[Online]. Available: http://es.slideshare.net/MoisesLogroo/proyecto-de-grado-
14557032. Accessed: Nov. 23, 2016.
[11] L. Web, "1.2. Breve historia de HTML (Introducción a XHTML)," in Libros Web,
2006. [Online]. Available:
http://librosweb.es/libro/xhtml/capitulo_1/breve_historia_de_html.html. Accessed:
Nov. 23, 2016.
[12] E. Comunicación, "LA EVOLUCIÓN DE LA WEB 1.0, 2.0 y 3.0," in Enfoque
Comunicación, Enfoque Comunicación, 2015. [Online]. Available:
http://www.enfoquecomunicacion.com/blog/la-evolucion-de-la-web-1-0-2-0-y-3-0.
Accessed: Nov. 23, 2016.
[13] "Haz Historia S.L.," in Haz Historia S.L., 2014. [Online]. Available:
http://www.hazhistoria.net/blog/historia-del-www-de-la-web-10-la-web-30.
Accessed: Nov. 23, 2016.
[14] Divestopedia and S. Institute, "What is back-end developer? - definition from
Techopedia," in Techopedia, Techopedia.com, 2016. [Online]. Available:
https://www.techopedia.com/definition/29568/back-end-developer. Accessed:
Nov. 23, 2016.
99
[15] Quora, "What is the difference between front end and back end development?"
in Quora. [Online]. Available: https://www.quora.com/What-is-the-difference-
between-front-end-and-back-end-development. Accessed: Nov. 23, 2016.
[16] T. P. Group, "PHP 7.1.0 release candidate 3 released," in PHP, 2016. [Online].
Available: http://php.net/. Accessed: Oct. 11, 2016.
[17] "Esquema PHP," in Web-based databases using PHP - part 1 - beginning PHP.
[Online]. Available: http://www.keithjbrown.co.uk/vworks/php/php_p1.php.
Accessed: Nov. 23, 2016.
[18] M. Rouse, "¿Qué es SQL o lenguaje de consultas estructuradas? - Definición en
WhatIs.com," SearchDataCenter en Español, 2016. [Online]. Available:
http://searchdatacenter.techtarget.com/es/definicion/SQL-o-lenguaje-de-
consultas-estructuradas. Accessed: Nov. 23, 2016.
[19] Divestopedia and S. Institute, "What is structured query language (SQL)? -
definition from Techopedia," in Techopedia, Techopedia.com, 2016. [Online].
Available: https://www.techopedia.com/definition/1245/structured-query-
language-sql. Accessed: Nov. 23, 2016.
[20] "Esquema SQL," in Tag archives: DML, 2016. [Online]. Available:
https://mostafaelmasry.com/tag/dml/. Accessed: Nov. 23, 2016.
[21] "Front-end web development," in Wikipedia, Wikimedia Foundation, 2016.
[Online]. Available: https://en.wikipedia.org/wiki/Front-end_web_development.
Accessed: Nov. 23, 2016.
100
[22] "Guía Breve de CSS,". [Online]. Available:
http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo. Accessed: Nov. 23,
2016.
[23] "¿Qué es y para qué sirve JavaScript? Embeber JavaScript en HTML. Ejercicio
ejemplo básico (CU00731B)," in APR. [Online]. Available:
http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=5
90:ique-es-y-para-que-sirve-javascript-embeber-javascript-en-html-ejercicio-ejemplo-
basico-cu00731b&catid=69:tutorial-basico-programador-web-html-desde-
cero&Itemid=192. Accessed: Oct. 11, 2016.
[24] Posted and M. Rouse, "What is Ajax (Asynchronous JavaScript and XML)? -
definition from WhatIs.com," in Techtarget, SearchWinDevelopment, 2007. [Online].
Available: http://searchwindevelopment.techtarget.com/definition/Ajax. Accessed:
Nov. 23, 2016.
[25] Divestopedia and S. Institute, "What is jQuery? - definition from Techopedia," in
Techopedia, Techopedia.com, 2016. [Online]. Available:
https://www.techopedia.com/definition/3977/jquery. Accessed: Nov. 23, 2016.
[26] T. T. H. dice, "¿Qué son los web services?," in Msaffirio, Consultoría BPM y TI,
2006. [Online]. Available: https://msaffirio.com/2006/02/05/%C2%BFque-son-los-
web-services/. Accessed: Nov. 23, 2016.
[27] "Esquemas Servicios Web," in Guía Breve de Servicios web. [Online]. Available:
http://www.w3c.es/Divulgacion/GuiasBreves/ServiciosWeb. Accessed: Nov. 23,
2016.
101
[28] Microsoft, "La Arquitectura Orientada a Servicios (SOA) de Microsoft aplicada
al mundo real," Microsoft Corporation, 2006. [Online]. Available:
www.microsoft.com/soa.
[29] V. Beal, "What is service-oriented architecture (SOA)? Webopedia definition," in
Webopedia. [Online]. Available:
http://www.webopedia.com/TERM/S/Service_Oriented_Architecture.html.
Accessed: Nov. 23, 2016.
[30] "SOA,” [Online]. Available:
https://es.wikipedia.org/wiki/Arquitectura_orientada_a_servicio. Accessed: Oct. 13,
2016.
[31] Posted and M. Rouse, "What is SOAP (simple object access protocol)? -
definition from WhatIs.com," in Techtarget, SearchSOA, 2014. [Online]. Available:
http://searchsoa.techtarget.com/definition/SOAP. Accessed: Nov. 23, 2016.
[32] O. F. Brea and DesarrolloW, "SOAP. Simple object access protocol," in
Desarrolloweb, DesarrolloWeb.com, 2012. [Online]. Available:
http://desarrolloweb.com/articulos/1853.php. Accessed: Nov. 23, 2016.
[33] B. G. C and DesarrolloW, "SOAP (simple object access protocol)," in
Desarrolloweb, DesarrolloWeb.com, 2016. [Online]. Available:
http://desarrolloweb.com/articulos/1557.php. Accessed: Nov. 23, 2016.
[34] "RESTful web services introduction," in Tutorialspoint, www.tutorialspoint.com,
2016. [Online]. Available:
https://www.tutorialspoint.com/restful/restful_introduction.htm. Accessed: Nov.
23, 2016.
102
[35] Webmaster, A. de Sistemas, and con experiencia, "¿Qué son las bases de
datos?," in Editorial, Maestros del Web, 2007. [Online]. Available:
http://www.maestrosdelweb.com/que-son-las-bases-de-datos/. Accessed: Oct. 11,
2016.
[36] UPCI and UPCI, "Hernan Lopez," in SlideShare, 2016. [Online]. Available:
http://es.slideshare.net/rafq007/diferencias-entre-base-de-datos-relacional-y-no-
relacional. Accessed: Oct. 11, 2016.
[37] Rubenfa, "MongoDB: Qué es, cómo funciona y cuándo podemos usarlo (o no),"
in Genbetadev, 2016. [Online]. Available: http://www.genbetadev.com/bases-de-
datos/mongodb-que-es-como-funciona-y-cuando-podemos-usarlo-o-no. Accessed:
Nov. 23, 2016.
[38] "Ejemplo de manejo de datos con MongoDB,". [Online]. Available:
http://www.slideshare.net/FrancescoLoFranco/mongodb-how-to-model-and-
extract-your-data. Accessed: Nov. 23, 2016.
[39] Divestopedia and S. Institute, "What is Riak? - definition from Techopedia," in
Techopedia, Techopedia.com, 2016. [Online]. Available:
https://www.techopedia.com/definition/26740/riak. Accessed: Nov. 23, 2016.
[40] M. R. P. Concurrente and Erlanger, "Riak: Base de Datos sin SPOF," in
Altenwald, Altenwald, 2006. [Online]. Available:
http://altenwald.org/2011/09/14/riak-base-de-datos-sin-spof/. Accessed: Nov. 23,
2016.
103
[41] Andreicito1, "Bases de datos NoSQL Riak," in Slideshare. [Online]. Available:
http://es.slideshare.net/andreicito1/bases-de-datos-nosql-riak. Accessed: Nov. 23,
2016.
[42] "Esquema base de datos NoSQL Riak," in Creating a web App in Erlang with
chicago boss and Riak from scratch - I, 2016. [Online]. Available:
http://www.drlinux.org/creating-a-web-app-in-erlang-with-chicago-boss-and-riak-
from-scratch-i/. Accessed: Nov. 23, 2016.
[43] NoSQL, "Cassandra," in http://www.nosql.es/blog/nosql/cassandra.html, 2016.
[Online]. Available: http://www.nosql.es/blog/nosql/cassandra.html. Accessed:
Nov. 23, 2016.
[44] D. Academy, DataStax Academy, and M. Vecino Rosado, "Apache Cassandra -
¿Qué es?," in slideshare, 2016. [Online]. Available:
http://es.slideshare.net/planetcassandra/cassandra-qu-es-de-0-a-100-con-apache-
cassandra. Accessed: Nov. 23, 2016.
[45] "Movimiento de datos con Cassandra," in Javier Pulido: ( ﾟ▽゚ )/, 2011. [Online].
Available: http://www.franciscojavierpulido.com/2013_09_01_archive.html.
Accessed: Nov. 23, 2016.
[46] J. F. Cía, "Neo4j: Qué es y para qué sirve una base de datos orientada a grafos,"
in Bbvaopen4u, BBVAOpen4U, 2015. [Online]. Available:
https://bbvaopen4u.com/es/actualidad/neo4j-que-es-y-para-que-sirve-una-base-de-
datos-orientada-grafos. Accessed: Nov. 23, 2016.
[47] D. L. González-de-Artaza, "Arquitectura lógica - Neo4j," in Slideshare,
JVJsoftware™, 2016. [Online]. Available: http://es.slideshare.net/dipina/nosql-cassandra-
couchdb-mongodb-y-neo4j. Accessed: Nov. 23, 2016.
104
[48] A. Javier, "Base de datos relacional," in Slideshare, 2016. [Online]. Available:
http://es.slideshare.net/AlexJavier2/una-base-de-datos-relacional. Accessed: Nov.
23, 2016.
[49] "Bases de datos relacional," Wikimedia Foundation, 1970. [Online]. Available:
https://es.wikipedia.org/wiki/Base_de_datos_relacional. Accessed: Oct. 13, 2016.
[50] Oracle, "MyQSL," in Oracle. [Online]. Available:
https://www.oracle.com/es/products/mysql/overview/index.html. Accessed: Oct.
11, 2016.
[51] "Ventajas y desventajas de la base de datos my Sql - mind map," in mindomo.
[Online]. Available: https://www.mindomo.com/es/mindmap/ventajas-y-
desventajas-de-la-base-de-datos-my-sql-402f5022676f47919f2a15e79534330b.
Accessed: Nov. 23, 2016.
[52] D. Masip and DesarrolloW, "Qué es oracle," in Desarrollo Web,
DesarrolloWeb.com, 2016. [Online]. Available:
http://www.desarrolloweb.com/articulos/840.php. Accessed: Nov. 23, 2016.
[53] "Caracteristicas de oracle," in Wikispaces. [Online]. Available:
https://packo.wikispaces.com/Caracteristicas+de+Oracle. Accessed: Nov. 23,
2016.
[54] "Maestro Detalle," in SQL: A simple PHP/MySQL master detail report, 2011.
[Online]. Available: http://jayperetz.com/blog/?p=851. Accessed: Oct. 13, 2016.
105
[55] "Object relational Mapper — doctrine project," in Doctrine Project, 2006.
[Online]. Available: http://www.doctrine-project.org/projects/orm.html. Accessed:
Nov. 23, 2016.
[56] "ORM," Programar fácil, 2015. [Online]. Available:
http://programarfacil.com/blog/que-es-un-orm/. Accessed: Oct. 13, 2016.
[57] "Arquitectura de software," in Ecured. [Online]. Available:
https://www.ecured.cu/Arquitectura_de_software. Accessed: Nov. 23, 2016.
[58] "Patrones Arquitectónicos," in Pbworks. [Online]. Available:
http://isg3.pbworks.com/w/page/7624479/Patrones%20Arquitect%C3%B3nicos.
Accessed: Nov. 23, 2016.
[59] SoftwareEngineerInsider, "What is software engineering?," in Software Engineer
insider, 2011. [Online]. Available:
http://www.softwareengineerinsider.com/articles/what-is-software-
engineering.html#.WCkDrdXhDDc. Accessed: Nov. 23, 2016.
[60] A. Goñi Sarriguren, "Reutilización del Software, patrones de diseño.," in
Reutilización del software Patrones de Diseño, 2006. [Online]. Available:
http://siul02.si.ehu.es/~alfredo/iso/06Patrones.pdf. Accessed: Nov. 23, 2016.
[61] SourceMaking, "Design patterns and Refactoring," in Sourcemaking, 2007.
[Online]. Available: https://sourcemaking.com/design_patterns/creational_patterns.
Accessed: Nov. 23, 2016.
[62] I. SOMMERVILLE, Ingeniería del Software, Séptima ed. Prentice Hall, 2005.
106
[63] "MVC," in Understanding ASP.NET MVC using real world example, for
beginners and intermediate, 2015. [Online]. Available:
http://www.codeproject.com/Articles/871375/Understanding-ASP-NET-MVC-using-
real-world-example=esquema. Accessed: Oct. 13, 2016.
[64] S. Fernandez, "Presentacion de Patrones Creacionales," Universidad Columbia
del Paraguay, 2011.
[65] "Singleton," in El Patrón Singleton, 2016. [Online]. Available:
https://msdn.microsoft.com/es-es/library/bb972272.aspx. Accessed: Oct. 13,
2016.
[66] SourceMaking, "Design patterns and Refactoring," in Sourcemaking, 2007.
[Online]. Available: https://sourcemaking.com/design_patterns/structural_patterns.
Accessed: Nov. 23, 2016.
[67] SourceMaking, "Design patterns and Refactoring," in Sourcemaking, 2007.
[Online]. Available:
https://sourcemaking.com/design_patterns/behavioral_patterns. Accessed: Nov.
23, 2016.
[68] "Interface," in Oxforddictionaries. [Online]. Available:
https://en.oxforddictionaries.com/definition/interface. Accessed: Nov. 23, 2016.
[69] S. W. -Washington and D. C. 20201, "User interface design basics," in Usability,
Department of Health and Human Services, 2014. [Online]. Available:
https://www.usability.gov/what-and-why/user-interface-design.html. Accessed:
Nov. 23, 2016.
107
[70] UTPL and UTPL, "Diseno de Interfaz de Usuario," in Slideshare, DANNY_LANZA,
2016. [Online]. Available: http://es.slideshare.net/sanfer08/diseno-de-la-interfaz-de-
usuario. Accessed: Nov. 23, 2016.
[71] V. M. Gomez, "El diseño de la interfaz: Diseño de Paginas web," in Lawebera,
2015. [Online]. Available: http://www.lawebera.es/diseno-web/el-diseno-de-la-
interfaz.php. Accessed: Nov. 23, 2016.
[72] J. Vega, "Diseño web: 15 Principios Elementales de Interfaz de Usuario," in
Vegacorp, VegaCorp, 2015. [Online]. Available: http://es.vegacorp.me/diseno-web-
principios-elementales-interfaz-usuario/. Accessed: Nov. 23, 2016.
[73] "¿Qué es el Diseño responsive?," in 40defiebre, 40deFiebre. [Online]. Available:
https://www.40defiebre.com/que-es/diseno-responsive/. Accessed: Nov. 23, 2016.
[74] "Esquema Diseño Responsivo," in Creativos Online, Creativos Online, 2016.
[Online]. Available: http://www.creativosonline.org/blog/diseno-web-responsive-o-
adaptativo-cual-es-la-diferencia.html. Accessed: Nov. 23, 2016.
[75] "¿Qué es la experiencia de usuario?," in 40defiebre, 40deFiebre. [Online].
Available: https://www.40defiebre.com/que-es/experiencia-usuario/. Accessed:
Nov. 23, 2016.
[76] LanceTalent, "Guía del emprendedor: ¿Qué es un diseño UX?," in Lancetalent,
LanceTalent, 2015. [Online]. Available: https://www.lancetalent.com/blog/diseno-
ux/. Accessed: Nov. 23, 2016.
[77] "Esquema Experiencia de Usuario (UX)," Blog de Marketing Digital y Estrategias
de Contenido, 2016. [Online]. Available: https://mott.pe/marketing-digital/diseno-
de-experiencia-de-usuario-ux-y-usabilidad-web/. Accessed: Nov. 23, 2016.
108
[78] "¿Qué es la Usabilidad?," in Sidar. [Online]. Available:
https://www.sidar.org/recur/desdi/traduc/es/visitable/quees/usab.htm. Accessed:
Nov. 23, 2016.
[79] "¿Qué es la Usabilidad?," in Guía Digital. [Online]. Available:
http://www.guiadigital.gob.cl/articulo/que-es-la-usabilidad. Accessed: Nov. 23,
2016.
[80] J. Garcia, "Qué es el flat design o Diseño Plano," in Departamento de Internet,
Departamento de Internet, 2013. [Online]. Available:
http://www.departamentodeinternet.com/que-es-flat-design-diseno-plano/.
Accessed: Nov. 23, 2016.
[81] M. S. Zavia, "Material design es el nuevo diseño de Google para Android (y el
resto de sus plataformas)," in Xatakamovil, 2016. [Online]. Available:
http://www.xatakamovil.com/sistemas-operativos/material-design-es-el-nuevo-
diseno-de-google-para-android-y-el-resto-de-sus-plataformas. Accessed: Nov. 23,
2016.
[82] "Ejemplo de diseño Material Design,". [Online]. Available:
http://www.elandroidelibre.com/wp-content/uploads/2015/09/superficie.png.
Accessed: Nov. 23, 2016.
[83] E. Verde and V. todo mi perfil, "Schoology," 2014. [Online]. Available:
http://herramientasdeaprendizajesocial.blogspot.com.co/2014/03/schoology-
schoology-una-de-aprendizaje.html. Accessed: Oct. 11, 2016.
[84] C. A. Ortega H, "Schoology, la red social para estudiantes y profesores," in
Cultura Digital, Young Marketing, 2013. [Online]. Available:
109
http://www.youngmarketing.co/schoology-la-red-social-para-estudiantes-y-
profesores/. Accessed: Nov. 23, 2016.
[85] "Schoology, una plataforma gratuita de aprendizaje," 2002. [Online]. Available:
http://enmarchaconlastic.educarex.es/listado-de-categorias-2/233-nuevo-
emt/formacion/1287-schoology-una-plataforma-gratuita-de-aprendizaje. Accessed:
Oct. 11, 2016.
[86] "About Trello," in Trello, 2016. [Online]. Available: https://trello.com/about.
Accessed: Nov. 23, 2016.
[87] "Trello: Plataforma colaborativa de trabajo en grupo," in Tec Digital, 2013.
[Online]. Available:
http://tecdigital.tec.ac.cr/servicios/boletin/?q=plataforma_trello. Accessed: Nov.
23, 2016.
[88] Inglés and A. Carranza, "Trello como plataforma educativa, impresiones de un
profesor cascarrabias," in Ingenierogeek. [Online]. Available:
http://www.ingenierogeek.com/2015/07/trello-plataforma-educativa-ventajas-
desventajas-usos-escuela.html. Accessed: Oct. 11, 2016.
[89] "Consortium Claroline - Claroline est un logiciel open source permettant de
déployer facilement une plateforme dédiée à l’apprentissage et au travail
collaboratif en ligne," in Claroline Connect, 2016. [Online]. Available:
http://www.claroline.net/. Accessed: Oct. 5, 2016.
[90] D. Macías Á, "Plataformas de enseñanza virtual libres y sus características de
extensión: Desarrollo de un bloque para la gestión de tutorías en Moodle,"
Universidad de Álcala, Álcala, España, 2010.
110
[91] mica, "Universidad Nacional de Colombia: Facultad de Ciencias EconÃ3micas,"
in Universidad Nacional de Colombia. [Online]. Available:
http://www.fce.unal.edu.co/claroline/. Accessed: Oct. 5, 2016.
[92] M. F. Hernández, "Moodle, Dokeos, Claroline. Ventajas e inconvenientes," 2011.
[Online]. Available: http://unirelearningmaster.blogspot.com.co/2014/02/moodle-
dokeos-claroline-ventajas-e.html. Accessed: Oct. 11, 2016.
[93] "E-LEARNING suite and LMS for growing companies," in DOKEOS - eLearning
made easy, 2016. [Online]. Available: http://www.dokeos.com/. Accessed: Oct. 5,
2016.
[94] V. to?, "Valid values for android:fontFamily and what they map to?",
Stackoverflow.com, 2017. [Online]. Available:
http://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-
and-what-they-map-to. [Accessed: 11- Apr- 2017].
111
11. Anexos
Anexo 1: Wireframes.
Anexo 2: Documento SRS (Especificación de Requerimientos de Software).
Anexo 3: Diseño detallado de software.
Anexo 4: Diagrama de la base de datos de Sherlock.
Anexo 5: Cambios de la primera reunión con los stakeholders principales.
Anexo 6: Pruebas de aceptación.
Anexo 7: Video - Pruebas de aceptación - Estudiantes pregrado y semillero.
Anexo 8: Encuestas de experiencia de usuario.