Desarrollo del portal web responsivo para el CIER-Surobjetos.ciersur.co/reswebcier/TG4.pdf · 2.3...

Desarrollo de un portal web responsivo para el CIER-SUR

Por: Juan David Ospina

Trabajo de grado para optar el título de Ingeniero de Sistemas

Universidad del Valle

Facultad de Ingeniería

Escuela de Ingeniería de Sistemas y Computación

Cali, Valle del Cauca, Colombia

Febrero 2016


Por: Juan David Ospina

Trabajo de grado para optar por el título de Ingeniero de Sistemas

Directora: Beatriz Eugenia Florián Gaviria, Ph.D

Facultad de Ingeniería

Escuela de Ingeniería de Sistemas y Computación

Cali, Valle del Cauca, Colombia

Febrero 2016

I

TABLA DE CONTENIDO

Tabla de Contenido ................................................................................................................................. I

Listado de Tablas .................................................................................................................................. IV

Listado de Figuras ................................................................................................................................ VI

Acronimos ............................................................................................................................................ VIII

INTRODUCCIÓN GENERAL ......................................................................................... 1 CAPÍTULO 1

1.1 Problema y motivación ............................................................................................................ 2 1.2 Objetivos ................................................................................................................................. 3

1.2.1 Objetivo general ............................................................................................................. 3 1.2.2 Objetivos específicos ..................................................................................................... 3 1.2.3 Resultados ..................................................................................................................... 3

1.3 Alcances y contribuciones ...................................................................................................... 4 1.4 Marco teórico .......................................................................................................................... 5

1.4.1 Glosario .......................................................................................................................... 5 1.4.2 Metodologías ágiles ....................................................................................................... 6

1.4.2.1 Metodología XP. ........................................................................................................ 8

1.4.3 Portales web ................................................................................................................... 9 1.4.4 CMS .............................................................................................................................. 11 1.4.5 Sistema de gestión de contenidos Joomla ................................................................... 12

1.4.5.1 Arquitectura de Joomla ............................................................................................ 13

1.4.5.2 Extensiones de Joomla ............................................................................................ 15

1.4.5.3 Algunos aspectos de seguridad de JOOMLA. ......................................................... 16

1.4.6 Aplicaciones web adaptables ....................................................................................... 19

1.4.6.1 Uikit .......................................................................................................................... 19

1.4.7 Pruebas de aplicaciones web ...................................................................................... 19

1.4.7.1 Usabilidad ................................................................................................................ 20

1.4.8 Visualización de datos .................................................................................................. 21

1.4.8.1 Librería D3.js para la visualización de datos ........................................................... 22

1.4.8.2 Librería C3.js para la visualización de datos ........................................................... 25

1.4.9 Herramientas Wiki ........................................................................................................ 25

1.4.9.1 Media Wiki................................................................................................................ 26

1.4.10 Herramientas de gestión de incidencias ...................................................................... 26

1.4.10.1 MantisBT .................................................................................................................. 26

1.5 Estado del arte ...................................................................................................................... 26

1.5.1 Portales Universitarios ................................................................................................. 26

1.5.1.1 Universidad de Harvard ........................................................................................... 26

II

1.5.1.2 Portal Universidad del Valle ..................................................................................... 27

1.5.2 Portales de Centros De Innovación ............................................................................. 28

1.5.2.1 Blog CIER-Oriente ................................................................................................... 28

1.5.2.2 Portal CIER-Centro .................................................................................................. 28

1.5.3 Análisis del estado del arte. ......................................................................................... 29

ANÁLISIS Y SELECCIÓN DE TECNOLOGÍAS PARA EL PROYECTO ................... 31 CAPÍTULO 2

2.1 Caracterización, análisis y selección de herramienta CMS .................................................. 31

2.1.1 Descripción y características generales de Wordpress y Joomla. .............................. 32

2.1.1.1 Descripción y características generales de Wordpress ........................................... 32

2.1.1.2 Descripción y características generales de Joomla ................................................ 32

2.1.2 Características requeridas por el proyecto. ................................................................. 33 2.1.3 Análisis por herramienta de las características requeridas ......................................... 34

2.1.3.1 Facilidad en la publicación de contenido ................................................................. 34

2.1.3.2 Facilidad en la gestión de la identidad visual .......................................................... 34

2.1.3.3 Rendimiento ............................................................................................................. 34

2.1.3.4 Niveles mínimos de seguridad ................................................................................. 35

2.1.3.5 Presupuesto ............................................................................................................. 35

2.1.4 Conclusiones y selección de CMS ............................................................................... 36

2.2 Análisis y selección de la plantilla base para Joomla ........................................................... 36 2.3 Análisis y selección de librerias para visualización de datos en la web ............................... 38 2.4 Analisis y selección de una herramienta para Wiki .............................................................. 40 2.5 Analisis y selección de una herramienta de gestión de incidencias para ayuda en infraestructura .................................................................................................................................... 41

DESARROLLO DEL PROYECTO ............................................................................... 43 CAPÍTULO 3

3.1 Planeación y diseño .............................................................................................................. 43

3.1.1 Metodología .................................................................................................................. 43 3.1.2 Fase de planeación ...................................................................................................... 44

3.1.2.1 Historias de usuario módulo de Comunidad ............................................................ 45

3.1.2.2 Historias de usuario módulo de Noticias ................................................................. 47

3.1.2.3 Historias de usuario módulo de Formación ............................................................. 47

3.1.2.4 Historias de usuario módulo de contenido ............................................................... 49

3.1.2.5 Plan de entregas ...................................................................................................... 53

3.1.3 Fase de diseño ............................................................................................................. 55

3.1.3.1 Módulo de Comunidad ............................................................................................. 56

3.1.3.2 Módulo de Noticias .................................................................................................. 58

3.1.3.3 Módulo de Formación .............................................................................................. 59

3.1.3.4 Módulo de investigación .......................................................................................... 61

3.1.3.5 Módulo de Contenido ............................................................................................... 62

3.1.3.6 Módulo Infraestructura ............................................................................................. 63

III

PORTAL WEB CIER-SUR Y PRUEBAS ..................................................................... 65 CAPÍTULO 4

CONCLUSIONES ........................................................................................................ 79 CAPÍTULO 5

5.1 Trabajo Futuro....................................................................................................................... 81

REFERENCIAS ...................................................................................................................................... 83

IV

LISTADO DE TABLAS

Tabla 1. Resultados Obtenidos ................................................................................................................ 3

Tabla 2. Diferencias entre metodologías ágiles y no ágiles. Tomada de (Canós et al., 2003). .............. 7

Tabla 3. The bussines benefits of a CMS. Tomada de (Browning & Lowndes, 2001) .......................... 11

Tabla 4. Identificación de algunas extensiones útiles de JOOMLA ....................................................... 15

Tabla 5. Identificación de algunos fallos de seguridad de Joomla. (Joomla.org - Security Centre, 2015) ....................................................................................................................................................... 16

Tabla 6. Visualizaciones de datos librería D3.js .................................................................................... 23

Tabla 7. Tecnologías web utilizadas por www.harvard.edu ................................................................... 27

Tabla 8. Costo de algunas plantillas para Wordpress y Joomla ............................................................ 35

Tabla 9. Resumen caracterización ......................................................................................................... 36

Tabla 10. Caracterización de plantillas Joomla ...................................................................................... 37

Tabla 11. Comparación librerías visualización de datos ........................................................................ 38

Tabla 12. Comparación de tipos de graficas en Google Charts, C3.js y D3.js ...................................... 39

Tabla 13. Características principales herramientas Wiki ....................................................................... 40

Tabla 14. Características principales herramientas de gestión de incidencias ..................................... 41

Tabla 15. Historia de Usuario Redes Sociales ....................................................................................... 45

Tabla 16. Historia de Usuario Redes Sociales - Facebook ................................................................... 45

Tabla 17. Historia de Usuario Redes Sociales - Google + ..................................................................... 46

Tabla 18. Historia de Usuario Redes Sociales - Twitter......................................................................... 46

Tabla 19. Historia de Usuario Redes Sociales - YouTube ..................................................................... 46

Tabla 20. Historia de Usuario Foro Principal ......................................................................................... 46

Tabla 21. Historia de Usuario Noticias ................................................................................................... 47

Tabla 22. Historia de usuario Pre procesamiento de datos – Visualización de datos ........................... 47

Tabla 23. Historia de Usuario Visualización de datos – Inscritos al programa ...................................... 47

Tabla 24. Historia de Usuario Visualización de datos – Leader Teachers Consolidado certificación Coreana y certificación por fases con respecto a la meta de formación. ...................................... 48

Tabla 25. Historia de Usuario Visualización de datos – Consolidado tipos de certificación alcanzada. 48

Tabla 26. Historia de Usuario Visualización de datos – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental. .............................................................. 48

Tabla 27. Historia de Usuario Visualización de datos geográfica – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental. ............................................ 49

Tabla 28 Historia de Usuario Presentación Objetos de aprendizaje ..................................................... 49

Tabla 29 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar ..................................... 49

Tabla 30 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar y área de énfasis ........ 49

V

Tabla 31 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica ......................................................................................................................................... 50

Tabla 32 Historia de Usuario Sistema de reseñas – Promedio general ................................................ 50

Tabla 33 Historia de Usuario Sistema de reseñas – promedio valoración de utilidad ........................... 50

Tabla 34 Historia de Usuario Sistema de reseñas – Promedio valoración de contenido ...................... 50

Tabla 35 Historia de Usuario Sistema de reseñas – Promedio valoración de navegación ................... 51

Tabla 36 Historia de Usuario Sistema de reseñas – Promedio valoración de apariencia ..................... 51

Tabla 37 Historia de Usuario Sistema de reseñas – Promedio valoración de material del estudiante . 51

Tabla 38 Historia de Usuario Sistema de reseñas – Promedio valoración de material del docente ..... 52

Tabla 39 Historia de Usuario Sistema de reseñas – Reseñas realizadas ............................................. 52

Tabla 40. Historia de Usuario Sistema de reseñas – Ingreso por Facebook ........................................ 52

Tabla 41. Historia de Usuario Sistema de reseñas – Ingreso por Google ............................................. 52

Tabla 42. Historia de Usuario Sistema de reseñas – Registro e ingreso .............................................. 53

Tabla 43. Historia de Usuario Sistema de reseñas – Crear reseña ....................................................... 53

Tabla 44. Historia de Usuario Sistema de reseñas – Editar reseña ...................................................... 53

Tabla 45. Plan de entregas .................................................................................................................... 53

Tabla 46. Ficha técnica escenario de pruebas. ..................................................................................... 65

Tabla 47. Resumen prueba visualización Inscritos al programa ........................................................... 66

Tabla 48. Resumen prueba visualización de datos avance en meta de formación ............................... 66

Tabla 49. Salida prueba HU19 ............................................................................................................... 67

Tabla 50. Resumen prueba visualización de datos avance en meta de formación con detalle de certificaciones ................................................................................................................................ 67

Tabla 51. Resumen prueba visualización de datos docentes certificados discriminado por secretaria de educación ...................................................................................................................................... 68

Tabla 52. Resumen prueba visualización de datos geográfica ............................................................. 69

Tabla 53. Resumen prueba presentación de objetos de aprendizaje y estadísticas generales de reseña ....................................................................................................................................................... 70

Tabla 54. Resumen prueba filtrar objetos de aprendizaje por grado escolar ........................................ 71

Tabla 55. Resumen prueba filtrar objetos de aprendizaje por grado escolar y área de énfasis. .......... 72

Tabla 56. Resumen prueba filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica. ........................................................................................................................................ 73

Tabla 57. Prueba mostrar reseñas realizadas ....................................................................................... 74

Tabla 58. Resumen prueba ingreso Facebook ...................................................................................... 75

Tabla 59. Resumen prueba Ingreso Google ......................................................................................... 76

Tabla 60. Resumen prueba registro e ingreso ....................................................................................... 76

Tabla 61. Resumen prueba crear reseña .............................................................................................. 78

Tabla 62. Resumen prueba editar reseña .............................................................................................. 79

Tabla 63. Lista de chequeo. Heurísticas de usabilidad.......................................................................... 80

VI

LISTADO DE FIGURAS

Figura 1. Extreme Programming Project. Imagen tomada de (Wells, 1999) ........................................... 8

Figura 2. Collective Code Ownership. Imagen tomada de (Wells, 1999) ................................................ 9

Figura 3. Portales web Horizontales ...................................................................................................... 10

Figura 4. Portales web Especializados .................................................................................................. 10

Figura 5.Portales web Verticales............................................................................................................ 10

Figura 6. Descargas de los CMS más usados ....................................................................................... 12

Figura 7. Extensiones de Joomla ........................................................................................................... 13

Figura 8. Algunos portales que utilizan Joomla ..................................................................................... 13

Figura 9. Arquitectura en capaz de Joomla (Joomla.org, 2015) ............................................................ 14

Figura 10. Joomla Modelo Vista Controlador (MVC) (Joomla.org, 2015) .............................................. 15

Figura 11. Vulnerabilidades de seguridad de Joomla, por año, tipo y distribución por tipo. ................. 18

Figura 12. Agentes que intervienen en el proceso de visualización de datos. Tomada de (Kirk, 2012) 22

Figura 13. Gráfico de burbuja en D3.js. ................................................................................................. 23

Figura 14. Diagrama de Cuerdas en D3.js. ............................................................................................ 23

Figura 15. Diagrama de parcela en D3.js. ............................................................................................. 23

Figura 16. Árbol Radial Reingold - Tilford. ............................................................................................. 24

Figura 17. Harvard. Edu. Tomada de www.harvard.edu ....................................................................... 27

Figura 18. Página principal univalle.edu.co. Tomada de www.univalle.edu.co ..................................... 28

Figura 19. Portal CIER-Oriente. Tomada de www.cieroriente.edu.co ................................................... 28

Figura 20. Portal web CIER-Centro. Tomada de ciercentro.edu.co ...................................................... 29

Figura 21. Estadística de utilización de CMS en la red ......................................................................... 31

Figura 22. Gráfico de barras C3.js. Tomada de ..................................................................................... 39

Figura 23. Gráfico de barras Google Charts. Tomada de ...................................................................... 39

Figura 24. Gráfico de pastel. Tomada de ............................................................................................... 39

Figura 25. Gráfico de pastel Google Charts. Tomada de ...................................................................... 39

Figura 26. Mapas en D3.js. Tomada de ................................................................................................. 40

Figura 27. Mapas en Google Charts. Tomada de .................................................................................. 40

Figura 28. Flujo de trabajo metodología de desarrollo .......................................................................... 44

Figura 29. Diagrama de historias de usuario ......................................................................................... 45

Figura 30. Mapa de navegación portal web CIER-SUR ........................................................................ 55

Figura 31. Visualización extendida de la arquitectura de Joomla. Módulos, Componentes y Plugins generales. ...................................................................................................................................... 56

Figura 32. Visualización extendida de la arquitectura de Joomla. Sub modólo Redes Sociales. ......... 57

Figura 33.Visualización extendida de la arquitectura de Joomla. Sub módulo Foros. .......................... 57

VII

Figura 34. Arquitectura MediaWiki. ........................................................................................................ 58

Figura 35. Visualización extendida de la arquitectura de Joomla. Sub módulo central de blogs .......... 58

Figura 36. Visualización extendida de la arquitectura de Joomla. Módulo Noticias .............................. 59

Figura 37. Extracción, agrupamiento, pre procesamiento y volcado de datos ...................................... 60

Figura 38. Modelo de datos base de datos plataforma CIER-SUR. Visualización de datos ................. 61

Figura 39. Diagrama de paquetes visualización de datos ..................................................................... 61

Figura 40. Visualización extendida de la arquitectura de Joomla sub módulo semillero....................... 62

Figura 41. Diagrama de paquetes. Modulo Objetos de Aprendizaje ..................................................... 62

Figura 42. Diagrama de tecnologías por capa. Modulo Objetos de Aprendizaje .................................. 63

Figura 43. Modelo de datos. Modulo objetos de aprendizaje ................................................................ 63

Figura 44. Flujo de trabajo, MantisBT .................................................................................................... 64

Figura 45. Salida prueba HU18 .............................................................................................................. 66




Figura 49. Salida prueba HU22 - 1......................................................................................................... 70

Figura 50. Salida prueba PR-00 ............................................................................................................. 71

Figura 51. Salida Prueba HU30 ............................................................................................................. 72




Figura 55. Salida Prueba HU41 - 1 ........................................................................................................ 75






Figura 61. Salida Prueba HU43 – 3 ....................................................................................................... 78



VIII

ACRONIMOS

TI: Siglas para Tecnologías de la Información.

KIPA: Siglas en Ingles para Korea Invention Promotion Association.

WYSIWYG: Siglas en Ingles para What You See Is What You Get / Lo Que Ves Es Lo Que Obtienes.

LMS: Siglas en Ingles para Learning Management System / Sistemas de gestión educativos.

CIEN: Centro de Innovación Educativa Nacional.

CIER: Centro de Innovación Educativa Regional.

CIER-SUR: Centro de Innovación Educativa Regional, Zona Sur.

DINTEV: Dirección de Nuevas Tecnologías y Educación Virtual de la Universidad del Valle.

HTML: Hyper Text Markup Language / lenguaje de marcas de hipertexto.

IES: Instituciones de Educación Superior.

MEN: Ministerio de Educación Nacional.

RIE: Red de Innovación Educativa.

RDBMS: Siglas en Ingles para Relational Data Base Management System.

CREATIC: Plataforma web (LMS) para la formación de docentes en el programa de formación de los CIER.

CSS: Siglas en Ingles para Cascade Style Sheats / Hojas de Estilo en Cascada.

LO: Siglas en Inglés para Learning Object / Objeto de Aprendizaje.

GIS: Siglas en Inglés para Geographical Information System / Sistema de Información Geográfica

1

Juan David Ospina Vásquez

CAPÍTULO 1INTRODUCCIÓN GENERAL

El propósito general de este capítulo es definir que es el CIER-SUR, que componentes lo forman y cuáles son los problemas y necesidades de cada componente que hicieron de la realización de este trabajo de grado un factor importante dentro de la organización.

Los Centros de Innovación Educativa Regional (CIER) nacen de la alianza entre el Gobierno de Colombia y la Agencia de Promoción de la Industria TI (KIPA, por sus siglas en Ingles) en representación de la República de Corea del Sur. Son complejos físicos dotados con infraestructura de última generación, tanto en hardware como en software, idóneos para realizar procesos de formación de docentes, producción, organización y gestión de contenidos educativos estandarizados y con capacidad para el desarrollo de actividades de investigación e innovación educativa en Tecnologías de la Información y la Comunicación (TIC).

Esta alianza se enmarca dentro del proyecto “Construyendo capacidades en el uso de las TIC para innovar en la educación” del Ministerio de Educación Nacional (MEN), quienes para su implementación han realizado alianzas con instituciones educativas de todo el país ubicadas en 5 zonas: norte, sur, oriente, occidente y centro. En nuestro caso nos corresponde la región SUR conformada por los departamentos de Amazonas, Caquetá, Cauca, Huila, Nariño, Putumayo, Tolima, y Valle del Cauca.

El CIER-SUR tiene como componentes principales la formación de docentes, generación de contenidos educativos para el uso de TIC´s en el aula, la investigación, la infraestructura, la gestión y la integración de las comunidades de práctica.

El componente de formación es el encargado de formar 3.000 docentes o “leader teachers” orientados por 16 formadores “master teachers” en la modalidad b-learning, tanto en el diseño de materiales educativos digitales como en el uso de herramientas TIC en el aula.

El componente de contenidos está encargado principalmente de la creación de 6 cursos apoyados por recursos multimedia lo que significa la implementación de 30 unidades de aprendizaje, 240 objetos de aprendizaje y más de 8000 recursos digitales.

El componente de investigación tiene como objetivo general fundamentar la capacidad de investigación interdisciplinaria de los actores comprometidos con el desarrollo del CIER-SUR, para producir cambios educativos en la cultura escolar, mediante integración de las TIC en los procesos de aprendizaje, enseñanza y evaluación.

El componente de infraestructura comprende la dotación, monitorización y mantenimiento de infraestructura y tecnología para el desarrollo de las jornadas de formación, la investigación y la producción de los objetos de aprendizaje.

La comunidad virtual o de integración de comunidades de practica tiene como propósito generar un espacio interactivo y de colaboración en el ámbito de la educación básica, media y superior soportada en los ejes de desarrollo del centro de innovación: la investigación, la formación y la producción de

2


contenidos, en el sentido de mantener una comunidad de personas interesadas en reflexionar, diseñar, implementar y compartir acerca de las experiencias de integración de TIC en los contextos educativos.

Entre los componentes de gestión y comunidad del CIER-SUR se hace imprescindible el desarrollo de un portal web que gestione la información que nace de las actividades promovidas dentro de los componentes principales del macro proyecto para su posterior comunicación, además de otras tareas primordiales como la creación de una red académica virtual para generar una importante comunidad de práctica regional, gestión y acceso a cada uno de los roles de trabajo existentes dentro del proyecto para el acceso a tareas específicas en el portal web, entre otros. Es el desarrollo del portal web del CIER-SUR la tarea principal de este trabajo de grado.

Se decidió tomar como base del proyecto un Sistema de Gestión de Contenidos (CMS, por sus siglas en Ingles) por la necesidad principal de gestionar información, noticias y comunicaciones. Un CMS es estructuralmente un tipo de software el cual permite la publicación y administración de contenido en línea siendo el contenido lo que quiera definir el usuario (Noticias, Entradas de blogs, listas, calendarios, productos en venta, etc.) (K. M. L. Jones & Farrington, 2011). Un ejemplo de lo que es un CMS implementado, es el sitio web de la Universidad de Harvard, el cual es creado con base a Joomla, un CMS moderno que tiene como características principales su fácil administración, organización de unidades, clasificaciones, artículos y plantillas bajo un administrador que lo unifica todo. En el portal web de Harvard podemos ver la publicación de todo tipo de contenidos, recursos y servicios además de potentes herramientas graficas que lo hacen más atractivo al público todo esto totalmente personalizado en cuanto a identidad gráfica y editorial de la universidad (Ver más detalles en la sección de Estado del arte).

1.1 Problema y motivación

Un recurso vital para cualquier organización moderna es el uso de las nuevas tecnologías como medio para la gestión de la información debido al rápido crecimiento de esta. Si definimos organización como un sistema compuesto por: personas, recursos, materiales e información, podemos decir que la información es un aspecto fundamental ya que se ubica como un componente principal de cualquier organización y además permite la supervivencia de esta en cualquier modelo. Por otro lado, la gestión de la información se define como el manejo de la inteligencia corporativa de una organización, que permite su estructuración interna además de reaccionar ante los cambios de su entorno apoyándose en el uso de la información y de los recursos de información disponibles (Salas, 2002). Por lo anterior, concluimos que la gestión de la información es un componente vital dentro de cualquier organización debido a que aporta ventajas fundamentales.

No ajeno a esto el CIER-SUR viene presentando un rápido crecimiento en todos sus componentes principales desde su implementación hasta la fecha, lo que resulta en el crecimiento de la información producida. Necesidades como la autogestión de toda la información generada a partir de las actividades de cada uno de los componentes, y por parte de cada coordinador, para su posterior socialización y visualización, centralizándolas en un solo portal, la dinamización de las comunicaciones integrando todas las fuentes de información (redes sociales, entrevistas, newsletters, actas de reuniones, convocatoria a distintas actividades, etc.) con todas las partes interesadas en la organización, la creación de redes académicas virtuales, la atención de las peticiones de recursos, servicios e información a la gran cantidad de usuarios involucrados con la organización y la introducción de una imagen corporativa, hicieron de la creación de esta herramienta un requisito de alta prioridad.

Para dar solución a estas necesidades se desarrolló el portal web del CIER-SUR que tiene como características principales su usabilidad y adaptabilidad visual (en cuanto a su correcta visualización en distintas resoluciones), y además dio solución a las necesidades planteadas anteriormente, expresadas por el CIER-SUR.

3


1.2 Objetivos

A continuación se presentan los objetivos de este trabajo de grado orientados hacia la construcción del portal web CIER-SUR.

1.2.1 Objetivo general

Desarrollar un portal web responsivo perteneciente al CIER-SUR, para la gestión de la información, comunicaciones, herramientas de comunidad y herramientas para la gestión y coordinación de sus componentes estructurales.

1.2.2 Objetivos específicos

1. Implantar una herramienta CMS que permita la administración del portal web realizando tareas de gestión de la información y de los usuarios, que además sea ágil, eficaz y sencilla para que personas no expertas en software puedan crear, editar y eliminar contenido, almacenar imágenes, almacenar videos y que permita la fácil personalización en cuanto a imagen gráfica de la organización.

2. Implantar y configurar herramientas para la creación de una comunidad o red académica tales como: Central de blogs, foros e integración de redes sociales.

3. Desarrollar un módulo de herramientas para la gestión y coordinación del componente de formación del CIER-SUR.

4. Desarrollar un módulo de herramientas para la gestión y coordinación del componente de contenidos del CIER-SUR.

5. Desarrollar un módulo de herramientas para la gestión y coordinación del componente de investigación del CIER-Sur.

6. Desarrollar un módulo de herramientas para la gestión, coordinación y análisis de datos del componente de infraestructura del CIER-SUR.

7. Realizar pruebas funcionales y no funcionales del portal web. 8. Socializar los resultados del trabajo de grado.

1.2.3 Resultados

En la Tabla 1 se especifican los productos obtenidos que evidencian el cumplimiento de los objetivos específicos y referencia a secciones donde se encuentran documentados, enmarcados dentro del proyecto de desarrollo del portal web CIER-SUR.

Tabla 1. Resultados Obtenidos

Objetivo especifico

Producto(s) Obtenidos Sección del documento que

contiene el producto

Objetivo 1

Documento con el análisis y evaluación de JOOMLA como CMS para resolver las necesidades expuestas.

Implantación del CMS JOOMLA.

Personalización de la identidad gráfica una vez implantado el CMS del portal web.

Sección 2.1 de este documento

CAPÍTULO 3 y CAPÍTULO 4

Anexo 1 y Anexo 2

Objetivo 2

Implantación y configuración de una herramienta que permita la integración de redes sociales organizacionales en el portal web.

Implantación y configuración de una herramienta que permita la gestión de foros en el portal web.

Implantación de herramienta sindicadora de noticas (RSS) que alimenta la central de blogs.

Documentación de desarrollo asociada.


Anexo 1 y Anexo 2

Objetivo 3 Implementación del módulo para la gestión, CAPÍTULO 3 y CAPÍTULO 4

4


1.3 Alcances y contribuciones

Los portales web se han convertido en una herramienta básica para el éxito de cualquier organización aportando ventajas en aspectos tales como el alcance (no existen límites geográficos para el acceso a la información), disponibilidad de la información en todo momento, reducción de costos operativos (publicidad, logística, etc.) entre otros. Situando al CIER-SUR como una organización cuya actividad principal es la educación, podríamos decir que las entidades educativas no son ajenas a la introducción de estas nuevas tecnologías, y las utilizan para tareas principales tales como formación, creación de espacios de debate sobre temas relevantes y generación de ideas colaborativas en redes académicas virtuales. Pero este no es su único uso, también son importantes para la promoción de la organización educativa como tal, brindando información útil y concreta sobre los procesos que se generan internamente.

Además de las características descritas anteriormente, la implementación de un portal web permitió a las partes interesadas en el proyecto tener herramientas tecnológicas para la creación de una red académica regional mediante tecnologías como wikis, integración de redes sociales, centrales de blogs y foros, el acceso a recursos, información y servicios, y la dinamización y centralización de todas las fuentes de información relacionadas con el macro proyecto.

En el desarrollo de este portal web se utilizaron JavaScript, HTML5 y CSS como lenguajes núcleos para la parte del cliente. Se utilizó PHP para la parte del servidor. Contamos con un alojamiento que permite el uso de la versión 5.3.3 de PHP, la versión 5.1.67 de MySQL, y la versión 3.0.3 de JOOMLA, con las restricciones en cuanto a extensibilidad de JOOMLA que estas versiones implican.

El portal web CIER-SUR se desarrolló con base a un CMS y no tiene tareas de formación virtual como los ya conocidos Learning Management System (LMS). Por otro lado tuvo una interfaz orientada a web, pero además permitió el fácil y correcto acceso mediante otros dispositivos electrónicos como tabletas y teléfonos inteligentes haciendo uso de la tecnología web responsiva. Nuestro trabajo en cuanto a diseño de la interfaz fue generado con base a la retroalimentación que se obtuvo de los profesionales en comunicaciones además de los coordinadores de cada componente, contamos con el apoyo de una diseñadora gráfica quien fue la encargada de los aspectos relacionados a su campo en nuestro portal.

coordinación y análisis de datos, del componente de formación CIER-SUR.


Anexo 1 y Anexo 2

Objetivo 4

Implementación del módulo para la gestión, coordinación y análisis de datos, del componente de contenidos CIER-SUR.



Anexo 1 y Anexo 2

Objetivo 5

Implementación del módulo para la gestión, coordinación y análisis de datos del componente de investigación CIER-SUR.



Anexo 1 y Anexo 2

Objetivo 6

Implementación del módulo para la gestión de la información del componente de infraestructura CIER-SUR.



Anexo 1 y Anexo 2

Objetivo 7

Diseño de pruebas de aceptación funcionales y de heurísticas de usabilidad. Reporte de estas pruebas.

Entrega del portal web con los módulos de gestión de la información, gestión de usuarios, formación, contenidos, investigación, infraestructura, red académica virtual regional.

CAPÍTULO 4

Anexo 2

Objetivo 8 Documentación técnica de desarrollo completa.

Documentación y sustentación del trabajo de grado.


Anexo 1 y Anexo 2

5


Las pruebas a implementar dentro del portal web fueron funcionales, no funcionales y fueron diseñadas en conjunto con la dirección del proyecto. Se implementarán pruebas no funcionales de usabilidad las cuales serán estrictamente de chequeo de heurísticas.

Por último la gestión, dinamización, moderación y convocatoria para el correcto uso de las herramientas de comunidad estará encargada a la unidad de dinamización de estos aspectos en el CIER-SUR.

1.4 Marco teórico

Se definen algunos aspectos teóricos dentro del desarrollo del portal web, Entre ellas las bases fundamentales para el desarrollo de este proyecto como son: Metodología de desarrollo, definición de portales web, definición de herramientas CMS, definición de la herramienta CMS a utilizar, definición de aplicaciones web adaptables, definición de pruebas para aplicaciones web y visualización de datos. También, se definen las Wikis, una de las herramientas proporcionadas para la creación de la red académica virtual del CIER-SUR. Por último se definen las herramientas de gestión de incidencias y Mantis BT, la herramienta escogida para la gestión de incidencias dentro del componente de infraestructura.

1.4.1 Glosario

B-Learning: El aprendizaje semi-presencial o Blended-Learning es una metodología de aprendizaje que consiste en la eficiente combinación de diferentes métodos de impartición, modelos de enseñanza y estilos de aprendizaje. Nace de los fallos generados por la tradicional e-learning la cual tiene como principales inconvenientes la falta de interacción social que se considera como determinada en entornos convencionales, creando una necesidad especial para motivar a los estudiantes menos independientes (Heinze & Procter, 2004).

E-learning: Para (Bernardez, 2007) E-Learning son todas aquellas metodologías, estrategias o sistemas de aprendizaje que emplean tecnología digital y/o comunicación mediada por ordenadores para producir, transmitir, distribuir y organizar, conocimiento entre individuos, comunidades y organizaciones.

Comunidad de práctica (CoP): Para (Wenger, 1999), una comunidad de práctica (CoP) es un grupo de personas que comparten una preocupación, un conjunto de problemas o un interés común acerca de un tema, y que profundizan conocimientos en esta área a través de una estructura social basada en la construcción colaborativa de conocimientos a beneficio de todos sus miembros

Analíticas de Aprendizaje (LA, por sus siglas en inglés): Las analíticas de aprendizaje son medidas, colecciones, análisis y reportes de datos sobre personas que llevan un proceso de formación y su contexto con el propósito de entender y optimizar el aprendizaje y el ambiente en el que se desarrolla (C. Jones, 2015).

Analíticas de Negocios / Business Analytics (BA): Es un término introducido para representar los componentes analíticos claves en la inteligencia de negocios. (Chen, Chiang, & Storey, 2012)

COURSEWARE: Software y materiales multimedia diseñado para propósitos de educación o capacitación. Una vez el hardware, el software y los sistemas operativos han sido provistos, COURSWARE es el componente faltante para hacer de un computador una herramienta útil didácticamente (Encyclopedia of Information Technology Curriculum Integration, 2008).

Maestro Lider / Leader-Teacher (LT): Los leader Teachers, en el contexto formativo del CIER-SUR, son los docentes que reciben formación a través del proyecto, principalmente de instituciones educativas públicas de la educación básica y media (CREATIC, 2014).

Maestro de Maestros / Master-Teacher (MT): Líder formador encargado de la formación de docentes participantes. Es un docente líder del proceso de formación de los docentes en los Centros de Innovación Educativa Regional (CIER), encargado de formar y movilizar en los educadores a su cargo

6


los procesos de reflexión y mejora de sus prácticas de uso de TIC en el aula, a través de dinámicas de formación virtual y presencial (CREATIC, 2014).

Objeto de Aprendizaje (LO, por sus siglas en inglés): Los objetos de aprendizaje se pueden definir como recursos educativos que pueden ser empleados en educación apoyada en tecnología. Con descripciones de metadatos adecuados, pueden ser unidades modulares ensambladas para formar clases y cursos. Un objeto de aprendizaje puede estar basado en un texto electrónico, una simulación, un sitio Web, una imagen gráfica .gif, una película de QuickTime, un applet de Java o cualquier otro recurso que puede utilizarse en el aprendizaje (McGreal, 2005).

Redes Académicas Virtuales: Una red académica virtual es un espacio en el cual se genera interacción y colaboración en el ámbito educativo utilizando la virtualidad como medio. Tiene como propósito central el crear una comunidad de personas interesadas en reflexionar, diseñar, implementar y compartir acerca de las experiencias obtenidas en el contexto formativo del CIER-SUR.

RSS: Siglas para Really Simple Syndication. RSS es una liviana, multipropósito, extensible, descripción de metadatos y formato de sindicación hecha en XML. RSS es actualmente usado para una multitud de aplicaciones, incluyendo sindicación de titulares de noticias, sindicación de contenidos producidos en blogs y para propagación de la información de actualizaciones de algunos proyectos de software.

TIC: Dispositivos tecnológicos (hardware y software) que permiten editar, producir, almacenar, intercambiar y transmitir datos entre diferentes sistemas de información que cuentan con protocolos comunes. Estas aplicaciones, que integran medios de informática, telecomunicaciones y redes, posibilitan tanto la comunicación y colaboración interpersonal (persona a persona) como la multidireccional (uno a muchos o muchos a muchos). Estas herramientas desempeñan un papel sustantivo en la generación, intercambio, difusión, gestión y acceso al conocimiento.

Unidad didáctica o de aprendizaje: Una unidad didáctica o de aprendizaje es una forma de planificar el proceso de enseñanza-aprendizaje alrededor de un elemento de contenido que se convierte en eje integrador del proceso, aportándole consistencia y significatividad. Esta forma de organizar conocimientos y experiencias debe considerar la diversidad de elementos que contextualizan el proceso (nivel de desarrollo del alumno, medio sociocultural y familiar, Proyecto Curricular, recursos disponibles) para regular la práctica de los contenidos, seleccionar los objetivos básicos que pretende conseguir, las pautas metodológicas con las que trabajará, las experiencias de enseñanza-aprendizaje necesarios para perfeccionar dicho proceso (Escamilla, 1993).

Certificación Coreana: se refiere a un tipo de certificación estándar del programa de formación del CIER-SUR, existen tres tipos: excelencia, culminación y participación.

Certificación por fase: se refiere a un tipo de certificación calculada mediante las calificaciones asociadas a un Leader Teacher, en una fase del programa de formación del CIER-SUR. Las fases del programa de formación son: Fase Virtual I, Fase Presencial y Fase virtual 2.

1.4.2 Metodologías ágiles

Según (Canós, Letelier, & Penadés, 2003), en el 2001 nace el término “ágil” tras una reunión de expertos, en donde se esbozaron principios para el desarrollo de software en cortos lapsos de tiempo y que respondan a los cambios que surgen a lo largo de un proyecto. También se pretendía dar una alternativa a las metodologías tradicionales de desarrollo de software en donde se pone demasiado tiempo y recursos en la construcción de documentación generada a partir de cada una de las fases del proyecto. Como resultado principal se escribe el manifiesto ágil que da los principios básicos de esta metodología.

El manifiesto ágil expresa cuatro valores fundamentales dentro del desarrollo del proyecto de ahí parte a desarrollar los principios necesarios para la construcción adecuada del mismo; enumeramos los valores y los principios a continuación.

Valores

7


Es más importante el equipo de desarrollo que el proceso y las herramientas a utilizar.

El Desarrollo de un software 100% funcional antes que una buena documentación.

La interacción constante con el cliente a lo largo del desarrollo del producto es más importante que la simple negociación de un contrato.

Conseguir un entorno de desarrollo que se adapte a cualquier cambio en el proyecto es mejor que seguir una rígida planeación.

Principios

Es prioridad satisfacer al cliente mediante tempranas y constantes entregas que vayan agregando valor al producto final.

Tener en cuenta los cambios como parte del desarrollo. Para esto son capturados y dan ventajas competitivas al cliente.

Se realizan entregas funcionales frecuentemente y en el menor tiempo posible.

Se estrechan relaciones entre la gente del negocio y los desarrolladores.

Construir el proyecto en un entorno de motivación, dándole al equipo las herramientas adecuadas, el apoyo y la confianza necesaria.

El dialogo cara a cara es un método eficiente para la correcta comunicación entre un equipo de desarrollo.

El software funcional es el indicador principal de avance en el proyecto.

Las metodologías ágiles promueven un entorno sostenible; por lo que es necesario mantener dialogo y tolerancia entre todos los actores involucrados.

La atención continua a la calidad técnica y al buen diseño mejora la calidad.

la simplicidad es un factor esencial

Los mejores productos software nacen de un equipo organizado por sí mismo.

Se reflexiona acerca de cómo se está trabajando, como ser más efectivos y según las conclusiones se ajusta el comportamiento del equipo.

Una vez reconocidas las características y el modelo metodológico ágil, se compara con las metodologías tradicionales para tener una vista crítica, y así escoger la que más se ajusta a nuestras necesidades.

Tabla 2. Diferencias entre metodologías ágiles y no ágiles. Tomada de (Canós et al., 2003).

Metodologías ágiles Metodologías tradicionales

Basadas en heurísticas provenientes de prácticas de producción de código

Basadas en normas provenientes de estándares, seguidos por el entorno de desarrollo

Especialmente preparados para cambios durante el proyecto

Cierta resistencia a los cambios

Impuestas internamente (por el equipo) Impuestas externamente

Proceso menos controlado, con pocos principios Proceso mucho más controlado, con numerosas políticas/normas

No existe contrato tradicional o al menos es bastante flexible

Existe un contrato prefijado

El cliente es parte del equipo de desarrollo El cliente interactúa con el equipo de desarrollo mediante reuniones

Grupos pequeños (<10 integrantes) y trabajando en el mismo sitio

Grupos grandes y posiblemente distribuidos

Pocos artefactos Más artefactos

8


Pocos roles Más roles

Menos énfasis en la arquitectura del software La arquitectura del software es esencial y se expresa mediante modelos

Las diferencias entre metodologías ágiles y no ágiles nos permiten concluir que en nuestro proyecto es necesario tener un modelo metodológico ágil, por los cambios que se pueden presentar a lo largo del desarrollo, por tener al cliente como parte del equipo de desarrollo y por los cortos lapsos de tiempo que deben existir entre una entrega y otra que visualicen la implementación del proyecto.

1.4.2.1 Metodología XP.

Como las metodologías ágiles, Extreme Programming tiene como objetivos principales la alta calidad del software resultado y la respuesta a los cambios que se vayan presentando a lo largo del proceso de desarrollo. Otra característica importante de XP es la estrecha relación con el cliente en todo el proceso para optimizar los resultados esperados.

XP tiene unas reglas flexibles y unos componentes principales que explicamos a continuación. La información para esta sección fue tomada de (Wells, 1999).

En la Figura 1 se muestra el diagrama de proceso que utiliza la metodología extreme programming en la gestión de un proyecto.

Figura 1. Extreme Programming Project. Imagen tomada de (Wells, 1999)

Planeación.

La fase de planeación comienza con el levantamiento de las historias de usuario. Las historias de usuario definen pequeñas funcionalidades del software que se está desarrollando desde la vista del cliente. El listado de historias de usuario es la base principal sobre la que se va construyendo el proyecto de software completo. Una vez hecho el listado de historias de usuarios, se priorizan las funcionalidades de la aplicación y se crea el plan de entregas (en Inglés, Release Plan) el cual nos permitirá tener un plan detallado de entregas al cliente (iteraciones) por grupo de funcionalidades priorizadas. Una vez terminado el Release Plan, determinamos el cronograma de entrega de esas agrupaciones de funcionalidades.

Gestión.

En el componente de gestión definimos espacios de trabajo, equipos de trabajo (cuando el proyecto consta de dos o más desarrolladores) comúnmente pares de desarrollo. Todos los días se realiza una corta reunión de todo el equipo de desarrollo en donde se visualizan los objetivos del día y se chequea la producción del día anterior además de errores, lluvias de ideas y se comenta todo lo relacionado con el proyecto. En el proceso de gestión es común medir regularmente la velocidad del proyecto. La

9


velocidad del proyecto se mide revisando el tiempo que se estimó para cada una de las historias de usuario en el cronograma.

Otra cuestión importante en cuanto a gestión es la ubicación de las personas dentro del desarrollo. Si se enfoca a una persona en una sola área de desarrollo y esta persona abandona el proyecto; esta área queda totalmente desatendida. Por lo que Extreme Programming nos dice que es conveniente asignar a los profesionales de desarrollo, por todas las áreas del proyecto que sea posible, para que obtengan un conocimiento distribuido de este.

En la Figura 2 se ilustra el proceso de creación de módulos mediante pares de programadores y en general el proceso de construcción de código en el desarrollo de un software incluyendo pruebas unitarias y de aceptación.

Figura 2. Collective Code Ownership. Imagen tomada de (Wells, 1999)

Diseño

La recomendación de Extreme Programming en la fase de diseño es de total simplicidad en todos los componentes. La razón de ser de esta simplicidad es el tiempo; Un sistema complejo toma mucho más tiempo de desarrollo que uno simple. Los indicadores de simplicidad pueden ser discutidos por los integrantes del proyecto, pero se recomiendan cuatro cualidades subjetivas: El sistema debe ser comprobable, comprensible, navegable y explicable.

1.4.3 Portales web

Como lo define (Zhou, 2003), un portal web es una puerta de entrada que puede ser personalizada por cada usuario para automáticamente filtrar contenidos de la web. Por esto el objetivo principal de un portal web es el de brindar información, recursos y servicios a cada usuario con rol (y sin rol), de manera personalizada. A continuación se listan los tipos de portales web identificados.

Horizontales: Están orientados a todo tipo de usuarios y ofrecen todo tipo de contenido. Algunos portales web horizontales que encontramos son: Terra, AOL, AltaVista, UOL, Lycos, Yahoo, MSN y yandex.

Especializados: Son portales en los que se cubren aspectos más específicos, como por ejemplo una organización en un tema particular.

Algunos ejemplos de este tipo de portal son: Boxes and Arrows (portal especializado en arquitectura), Universia (Portal web especializado en temas de universidades, de educación y laborales), Colombia Aprende (Portal educativo del Ministerio de Educación Nacional), GuiaCom (Servicios de información a empresas: directorio de enlaces clasificados, consulta de marcas y empresas registradas), Herramientas.net (Portal especializado en ferretería)

10


Figura 3. Portales web Horizontales

Figura 4. Portales web Especializados

Verticales: Es un sitio web que cubre información y servicios a un sector o industria en particular. Algunos ejemplos de portales web verticales son: Travelocity y Expedia (portales web especializados en el sector de viajes y turismo, Microsoft Investor y The street (Portales web especializados en el sector de inversiones y negocios).

Figura 5.Portales web Verticales

11


Enmarcamos nuestro portal dentro de portal web especializado. Por definición los portales web especializados cubren aspectos específicos y se delimitan por una región o una organización. En nuestro caso el portal web cubre aspectos educativos delimitados por el CIER-SUR. Por esto Surge la necesidad de definir que es un portal web (especializado) para divulgación de la información actividades y contenidos de un centro de innovación Educativa. Según (Ascarza, 2005), los portales educativos son espacios web que ofrecen múltiples servicios a los miembros de la comunidad educativa (profesores, alumnos, gestores de centros y familias), tales como: información, instrumentos para la búsqueda de datos, recursos didácticos, herramientas para la comunicación interpersonal, formación, asesoramiento, entretenimiento, etc.

Como veremos a continuación, los Sistemas de Gestión de Contenido (por sus siglas en inglés, CMS), son un excelente punto de partida para la creación de cualquier tipo de portal web, ya que entre sus funcionalidades principales esta la creación y organización dinámica, ágil y fácil de cualquier contenido mediante intuitivas interfaces de usuario WYSIWYG. Además de esto nos permite la gestión de elementos como usuarios, comentarios, medios, categorización y etiquetación de contenidos entre otras cuestiones que los hacen una herramienta bastante útil.

1.4.4 CMS

Los CMS ofrecen una alternativa para gestionar grandes cantidades de información la cual sería imposible de gestionar mediante métodos manuales (escribirla en HTML).

Los CMS han crecido involucrando organizaciones más comerciales, a costos menores que la gestión manual. Cualquier CMS debería cumplir tareas de gestión de contenido simples de manera simple, y tareas complejas, tan simple como sea posible. Además de que un CMS efectivo debe tener como características la apropiada gestión de la arquitectura del sitio, relaciones entre páginas, acceso a contenidos por rol de usuario, además de ofrecer ventajas en cuanto a los procesos editoriales, de autoría y de publicación. A continuación listamos las ventajas que ofrecen los CMS´s modernos para contextualizar su uso, para esto tomamos la tabla The bussines benefits of a CMS de (Browning & Lowndes, 2001).

Tabla 3. The bussines benefits of a CMS. Tomada de (Browning & Lowndes, 2001)

Proceso / Beneficio Ejemplos paginas prospecto

Promover la reutilización de la información, permitiendo la integración inmediata de los datos de diversas fuentes

Una página Web prospecto que describe un programa que podría reunir información de fuentes tales como el sistema de registro del estudiante (para datos currículo), el sistema de personal (para más detalles sobre el personal docente) y un banco de imágenes (que contiene imágenes atractivas).

Permitir la reutilización eficiente de la información permitiendo el mantenimiento y descentralizándola, pero al mismo tiempo preservando el control central.

La misma página prospecto podría traducirse en formato PDF (para la alta calidad en papel), como texto sin formato (que se enviará como un mensaje de correo electrónico) u optimizado en la pantalla para un usuario con deficiencia visual. La entrada prospecto puede ser delegada a su director académico, sino que, antes de entrar en directo en una fecha pre-asignado, un miembro del departamento de marketing primero comprobaría el texto modificado por coherencia fáctica y estilística.

Garantizar la coherencia de presentación al separar el diseño de las páginas Web de los contenidos que se muestran.

El director académico contaría con una plantilla para introducir la información sobre el programa...

Permitir el fácil acceso y creación de contenidos en la web

.... lo que reduce la tarea a no más de "llenado en los cuadros 'en un formulario Web o un documento de procesador de textos.

12


Los CMS más usados según la plataforma de detección automática de tecnologías en la red buildwith.com actualmente son Wordpress y Joomla. Con base a estas tecnologías que dominan la red, se realizó un análisis en donde se incluyen la descripción y características de cada uno de esto CMS, las características que buscamos en el CMS base e incluyendo las restricciones que teníamos para este proyecto, realizamos un cuadro comparativo entre dos de estas herramientas (Joomla y Wordpress) este análisis se encuentra en la sección 2.1 de este documento.

Los CMS se ajustan perfectamente como base del desarrollo de nuestro portal web CIER-SUR. A continuación mostramos las características de Joomla, el CMS escogido para la implementación.

1.4.5 Sistema de gestión de contenidos Joomla

En la sección 2.1 del documento se realizó un análisis y selección de la herramienta CMS base para la creación del portal web CIER-SUR. En esta sección se profundizara en algunas características, estadísticas y atributos que se consideran importantes de Joomla, la herramienta escogida para su implantación.

En la Figura 6, se ilustra el número de descargas de los 3 CMS más usados. Según (Buildwith.com, 2105), Wordpress con 160 millones de descargas lidera el conteo, luego Joomla con 50 millones y Drupal con 15 millones.

Figura 6. Descargas de los CMS más usados

Otras estadísticas de Joomla importantes son el número de extensiones que tiene este CMS, las cuales en total suman 7505. En la Figura 7, se incluyen las 15 categorías de las extensiones más importantes, separadas en gratuitas y de pago. Información tomada de (joomla.org - Extensions, 2015).

Facilitar las buenas prácticas de gestión de la información para que los metadatos correspondientes sean capturados en el momento de la creación o modificación de contenidos

Las páginas prospecto correspondientes son 'selladas' con el nombre del administrador, la fecha de creación o modificación, una fecha de caducidad (que más tarde causa la generación automática de mensajes de correo electrónico al responsable de la información a intervalos regulares antes de esta fecha) e incorporación de palabras clave para asegurar la indexación por los motores de búsqueda.

Permitir que algún estado pasado de la página web para recrearla o restaurarla.

La edición del prospecto de hace dos años se puede reconstruir.

13


Figura 7. Extensiones de Joomla

Como referencia adicional, a continuación se listan algunos de los portales más importantes que utilizan el CMS Joomla como base de su portal web.

UNRIC: Es la plataforma web del Centro Regional de Información de las Naciones Unidas para Europa Occidental (por sus siglas en inglés, UNRIC), cumple la función de un centro de documentación, por esto maneja todo tipo de información en su plataforma. Se encuentran documentos, publicaciones, información y todo tipo de contenidos almacenados en sus servidores y potenciados por Joomla.

Porsche Brasil: Es la plataforma web de la famosa marca de carros Porsche, para la publicación de ventas, información, comunicaciones y todo tipo de contenidos en Brasil.

Nikon Instruments: Es la plataforma web a nivel mundial de la marca Nikon. En esta plataforma web se encuentran galerías, instrumentos, manuales, entre otros muchos contenidos concernientes a la marca.

Mitsubishi Polonia: Plataforma de la marca de carros Mistubishi y sus publicaciones para Polonia.

Figura 8. Algunos portales que utilizan Joomla

1.4.5.1 Arquitectura de Joomla

La información de la arquitectura de es visible en (joomla.org - about, 2105). Joomla es una aplicación web que utiliza una arquitectura de 3 capas, Persistencia, Aplicación y Vista, implementando el patrón

14


Modelo Vista Controlador (MVC). En las capas se incluye la base de datos, el framework de Joomla, componentes, módulos, plugins y en su capa exterior el sitio web interpretado por el navegador. En la Figura 9 se ilustran todas las capas que hacen parte del núcleo de Joomla.

En la capa de la base de datos, se almacena todo el contenido y especificaciones de todos los componentes, módulos, plugins y plantillas de Joomla. Cuando se habla de contenido, se refiere a artículos, publicaciones, etiquetas, categorías, usuarios, entre otros, lo que garantiza la flexibilidad tanto en despliegue como en administración del portal. El framework es la colección de software realizado en PHP, bajo el cual se construye Joomla.

Los componentes son mini aplicaciones que se adhieren al núcleo de Joomla y lo extienden. Consisten de dos partes, la primera que está construida en el módulo de administración para la especificación de las opciones que ofrece el modulo, y la segunda la que se muestra en el sitio, mostrando su respectiva funcionalidad al usuario. Cuando se instala un módulo, se guarda su información en la base de datos la cual se extiende para garantizar su despliegue en lo que sea necesario. Algunos ejemplos de componentes son gestión de Usuarios, Gestión de Plantillas, Gestión de categorías, Gestión de medios multimedia entre otros muchos.

Los módulos usualmente son extensiones que sirven para mostrar en la página el contenido o los datos de un componente. En algunos casos los módulos representan cierta información propiamente de ellos. Algunos ejemplos de módulos son: Una caja de HTML en una barra de navegación, Una lista de artículos recientes, un formulario de acceso al sistema, etc.

Los plugins son extensiones más pequeñas que se utilizan para ejecutar cierto evento en cierto momento. Algunos ejemplos de plugins son: Autenticación de usuarios, botones de edición, entre otros.

Figura 9. Arquitectura en capaz de Joomla (Joomla.org, 2015)

Las plantillas de Joomla determinan la manera en la que se ve la plataforma o el sitio web, contiene estilos de identidad gráfica, manejo dinámico de contenido con JavaScript, CSS y HTML. Estas plantillas pueden ser desarrolladas, pero existen muchas opciones tanto gratuitas como de pago en el catálogo de Joomla. Y por último la capa de vistan en el navegador web es lo que ve el usuario que entra a la plataforma web, desde ahí hace pedidos de información al servidor entre otros. Para ilustrar el proceso a continuación en la Figura 10 se muestra el patrón Modelo Vista Controlador que sigue Joomla en su arquitectura.

15


Figura 10. Joomla Modelo Vista Controlador (MVC) (Joomla.org, 2015)

La figura anterior muestra la arquitectura que toma partido a través de la petición de un usuario al servidor y su posterior procesamiento mediante el Modelo Vista Controlador. Cuando Joomla procesa la petición de un usuario, analiza la URL en busca de determinar que componente es el responsable de procesarla. A partir de acá el componente toma control de la petición del usuario y define que modelos y vistas son necesarios para procesar dicha petición y mostrar adecuadamente los resultados.

1.4.5.2 Extensiones de Joomla

Como se mencionaba anteriormente una de las características principales de Joomla es su extensibilidad, a continuación identificamos algunas extensiones de Joomla que fueron útiles a la hora del desarrollo de nuestra plataforma.

Tabla 4. Identificación de algunas extensiones útiles de JOOMLA

Nombre extensión Descripción

Akeeba Extensión para la realizar copias de seguridad de todo el sitio web de Joomla

Bizkniz Facebook Feed Display Extensión para mostrar novedades de Facebook

Bizkniz Google Plus Feed Display Extensión para mostrar novedades de Google Plus

Bizkniz Twitter Feed Display Extensión para mostrar novedades de Twiter

Widgetkit Extensión para diversas propiedades graficas de la página (slides, noticias, etc…).

Editor – CodeMirror Editor de texto en el administrador, para editar artículos como código HTML / CSS

Editor – TinyMCE WYSIWYG editor para Joomla

Kunena Extensión para la gestión de foros

Akeeba: Akeeba es una extensión de Joomla ideal para la realización, restauración y acceso a copias de seguridad de todo un sistema Joomla. Algunas de sus características principales son: configuración para optimización de acuerdo al sitio web donde esté instalado, realización de copia de seguridad

16


(base de datos y archivos) en un solo clic, transferencia o restauración de un sitio Joomla, entre otras. (Akeeba Backup, 2015)

Bizkniz Facebook Feed Display: Es una extensión de Joomla que permite conectar con los servicios de Facebook, para desplegar toda la información de una página o un perfil de este servicio. Algunas de sus características principales son: Servicio gratuito, Sufijo de clase para añadir estilo, múltiples conexiones al servidor de Facebook, manejo de ancho y alto de la caja que muestra el contenido del perfil, soporta Joomla 2.5.x y 3.0.x, entre otras. (joomla.org - Extensions, 2015)

Bizkniz Google Plus Feed Display: Es una extensión de Joomla que permite conectar con los servicios de Google+, para desplegar toda la información de una página o un perfil de este servicio. Algunas de sus características principales son: configuración simple y funcional, facilidad de instalación y acceso a los servicios de Google plus. (joomla.org - Extensions, 2015)

Bizkniz Twitter Feed Display: Es una extensión de Joomla que permite conectar con los servicios de Twitter, para desplegar toda la información de una página o un perfil de este servicio. Algunas de sus características principales son: Servicio Gratuito, Soporte de Joomla 2.5 y 3.x, Responsiva, entre otras. (joomla.org - Extensions, 2015)

Widgetkit: Extensión de Joomla que permite la creación de diversos objetos de interfaz gráfica tales como: Galerías, carruseles, imágenes destacadas e interactividad en imágenes. (Widgetkit - Yootheme, 2015)

CodeMirror: Es una extensión de edición de textos en Joomla, que permite entre otras de sus muchas características, la edición de códigos HTML, CSS y JavaScript. Es muy utilizada para la publicación de contenidos para los cuales no es suficiente un editor de texto normal, en donde se requieren lenguajes de etiquetado y el lenguaje de programación JavaScript. (Code Mirror, 2014)

TinyMCE: Es el editor de texto por defecto de Joomla, permite la edición de texto de manera WYSIWYG, permitiendo a cualquier tipo de usuario sin ninguna experiencia en lenguajes sofisticados la creación de contenidos visualmente agradables. (TinyMCE, 2014)

Kunena: Es una extensión de Joomla que permite la gestión de foros. Algunas de sus características más importantes son su gratuidad, funcionalidad, capacidad de integración con Joomla, facilidad de uso, un buen soporte y una buena documentación. (Kunena, 2014)

1.4.5.3 Algunos aspectos de seguridad de JOOMLA.

En la página (Joomla.org - Security Centre, 2015) del centro de soporte de Joomla, se ofrece una lista de chequeo de seguridad, pensada para su implementación en distintos niveles de conocimiento del administrador del sitio web. Como sabemos la seguridad en internet es un reto cambiante y creciente. No hay una manera única de proteger un sitio web ya que todos los métodos son cada vez más rápidamente obsoletos y no cubren todas las necesidades de protección. Algunos lineamientos de seguridad que JOOMLA sugiere son: Programación de Backups frecuentes, actualizaciones frecuentes de software y extensiones de otros proveedores como PHP, APACHE, ETC. También se enfatiza en el uso de un proveedor de alojamiento seguro.

En la Tabla 5 se pueden visualizar los errores más actualizados que se han podido identificar, y que nos dan una idea en cuanto a los posibles ataques que puede tener un CMS como Joomla. También se incluye su solución en la actualización a una nueva versión. Consignamos todos estos errores en la siguiente tabla.

Tabla 5. Identificación de algunos fallos de seguridad de Joomla. (Joomla.org - Security Centre, 2015)

TIPO FALLO DE SEGURIDAD

VERSIONES JOOMLA CON FALLO DE

SEGURIDAD DESCRIPCION SOLUCION

Denegación de servicio

2.5.4 hasta la 2.5.25, 3.2.5 y versiones anteriores a las

3.x, 3.3.0 hasta la 3.3.4

Revisión inadecuada permiten un potencial ataque de denegación de

servicios

Actualizar Joomla a sus versiones 2.5.26, 3.2.6, o

3.3.5

17


Inclusión de archivos remotos

2.5.4 hasta la 2.5.25, 3.2.5 y versiones anteriores a las

3.x, 3.3.0 hasta la 3.3.4

Revisión inadecuada permiten un que archivos externos a JOOMLA puedan

ser ejecutados

Actualizar Joomla a sus versiones 2.5.26, 3.2.6, o

3.3.5

Ataques de Cross-Site Scripting

3.2.0 hasta 3.2.4, 3.3.0 hasta 3.3.3

El escape inadecuado conduce a la vulnerabilidad XSS en com_media.

Actualizar a la versión 3.2.5 o

3.3.4

inicios de sesión no autorizados

2.5.2.24 y versiones anteriores a la 2.5.x, 3.2.4 y versiones anteriores a la

3.x, 3.3.0 hasta la 3.3.3

Comprobación inadecuada permite inicios de sesión no autorizados a través de la autenticación LDAP.

Actualizar a la versión 5.2.25, 3.2.5, o 3.3.4

Violación de ACL 3.0.0 hasta la 3.4.4

Revisión inadecuada de las listas de control de acceso en el componente com_content, permiten el acceso a

datos los cuales deberían ser restringidos

Actualizar a la versión 3.4.5

Falsificación de petición en sitios cruzados (CSRF)

Desde la 3.2.0 hasta la 3.4.1

Falta de revisión de falsificación de peticiones en sitios cruzados, permite

subir código malicioso


SQL Injection 3.1.0 hasta la 3.2.2 El escape inadecuado conduce a la

vulnerabilidad de inyección SQL. Actualizar a la versión 3.2.3

Redirección Abierta

Desde la 3.0.0 hasta la 3.4.1

Revisión inadecuada del valor de retorno permite la redirección a una

página externa


A continuación se definen los tipos de fallos de seguridad más comunes encontrados en la Tabla 5.

Denegación de servicio: En un ataque de denegación de servicios, un atacante intenta prevenir a usuarios legítimos, el acceso a información o servicios. Teniendo como objetivo un computador, una conexión de red, o los computadores y las redes a las que se intenta acceder, un atacante puede prevenir el acceso a servicios como el acceso a emails, sitios web, cuentas online (bancarias, etc.), u otros. El ataque de denegación de servicios más común ocurre cuando un atacante inunda una red con información. Cuando se escribe una URL para un sitio web en particular en el navegador, se envía una petición al sitio que se requiere para ver su página o acceder a su servicio. El servidor de ese sitio solo puede procesar un cierto número de peticiones a la vez, así que el atacante sobrecarga al servidor de peticiones. Esto se considera un ataque de denegación de servicios ya que con el servidor sobrecargado no se puede acceder a cierto servicio porque no se puede acceder al sitio web. (McDowell, 2009).

Inclusión de archivos remotos: En un ataque de inclusión de archivos remotos, el atacante inserta archivos remotos en el servidor web. Si el ataque es exitoso, el atacante gana acceso al servidor web y puede ejecutar cualquier comando en él. Usualmente se realiza en peticiones al servidor con métodos HTTP Get, en donde se visualiza el paso de variables por la dirección URL.(Manthan M. Desai, 2010)

Cross-site Scripting: Cross-site Scripting (XSS) se refiere a un rango de ataques en los cuales el ataque envía HTML malicioso como JavaScript a una aplicación web dinámica. Cuando la víctima ve la página web vulnerable, el contenido malicioso parece ser enviado por la página web así que es confiable. Como resultado, el atacante puede tener acceso y robar COOKIES, identificadores de sesión y otra información sensible a la que el sitio web tiene acceso.(Tilborg, 2014)

Violación de ACL: La lista de control de acceso proporciona una manera de prevenir el acceso no autorizado de usuarios a archivos en el servidor web. Una vulnerabilidad de esta lista, proveería al atacante a acceder en modo lectura o escritura, a archivos que contienen información sensible, como contraseñas, métodos de encriptación, modelos y accesos a base de datos.(Singh, Singh, & Joseph, 2008)

18


Cross-Site Request Forgery: Cross-Site Request Forgery es un tipo de aprovechamiento malicioso de un sitio web en el cual comandos no autorizados son ejecutados simplemente por el hecho de ser transmitidos por el navegador de un usuario autenticado previamente. Cuando es utilizado a gran escala (miles de usuarios), los comandos no autorizados pueden tener un efecto profundo en la integridad de los datos que son guardados por el sitio objetivo del ataque.(Akhgar, 2013).

Inyección de SQL: La inyección de SQL es un ataque en el cual el código SQL es insertado o anexado en una aplicación o entrada de un usuario, que más tarde son enviados a el servidor para su ejecución. La manera principal en la que se realizan ataques de inyección SQL consiste en la inserción directa de código SQL en parámetros que son concatenados con comandos SQL y ejecutados. Principalmente son utilizados para obtener múltiple información de los datos almacenados en el servidor.(Clarke, 2012).

Como última referencia de seguridad de Joomla, a continuación se incluyen estadísticas de ataques hasta el año 2012, lo que nos da una perspectiva de tendencia en seguridad de este CMS. Cabe aclarar que los datos son tomados de (cvedetails.com, 2012), la cual es una plataforma que toma estos datos de la base de datos nacional de vulnerabilidad (NVD, por sus siglas en Ingles) provista por el instituto Nacional de Estándares y Tecnología, instituto perteneciente al Departamento de Comercio de los Estados Unidos.

En la Figura 11 se muestran el número de ataques o vulnerabilidades encontradas en Joomla por tipo y año. Como se puede observar, el número de vulnerabilidades de Joomla detectadas ha presentado un decrecimiento significativo año tras año, siendo el año 2007 el límite superior con 31 vulnerabilidades detectadas y el año 2012 el límite inferior con 1 vulnerabilidad encontrada. En cuanto al tipo de vulnerabilidad detectada, las más frecuentes son la inclusión de archivos remotos y ejecución de estos códigos con 34 vulnerabilidades detectadas, la inyección de SQL con 21 y el Cross-Site Scripting con 16.

En términos generales, Joomla ha seguido una estricta corrección de vulnerabilidades en sus actualizaciones, lo que se representa en la tendencia a la baja en la detección de estas a través de los años. Además de esto es bastante confiable la manera en la que la comunidad de Joomla detecta estas vulnerabilidades y las comparte en su sitio oficial ya que esto permite visualizar estos errores y así mismo, en comunidad intentar darles solución.

Figura 11. Vulnerabilidades de seguridad de Joomla, por año, tipo y distribución por tipo.

19


1.4.6 Aplicaciones web adaptables

Surge de la necesidad de asegurarse que las creaciones web se vean bien y funcionen tanto dentro de los dispositivos móviles como en equipos tradicionales.

Existen tres tipos de aplicaciones móviles, nativas, hibridas y web. Las nativas son aquellas que están desarrolladas solamente para el dispositivo. Las web que son realizadas en lenguajes familiares para el navegador, ejecutándose así en el navegador de cualquier dispositivo (web adaptables y sitio web móvil) y las aplicaciones hibridas las cuales fusionan los otros tipos utilizando uno o el otro según sea necesario.

Existen tres tipos de aplicaciones web adaptables, las aplicaciones web adaptativas, responsivas y sitios web/móvil. Las aplicaciones web adaptativas, responden a la invocación de medios, es decir se ajustan mediante hojas de estilo a los diferentes dispositivos que las acceden. Las aplicaciones web responsivas ajustan cada uno de sus contenedores a la resolución de la pantalla sin especificar un dispositivo en general. Los sitios web / móvil son dos aplicaciones en una. La aplicación identifica el dispositivo y carga su respectiva aplicación (García & Camacho, 2014).

Para este proyecto se usó el concepto de tecnología responsiva, debido a que necesitábamos una visualización correcta en múltiples dispositivos y además no se necesitaba el acceso a hardware o a elementos propios del dispositivo en sí. A continuación se define UiKit, uno de los frameworks utilizados para obtener responsividad en el diseño de la interfaz web.

1.4.6.1 Uikit

Uikit es un framework para el desarrollo de interfaces web, su arquitectura modular hace de la interconexión entre componentes una herramienta poderosa para aplicar el concepto responsivo en cualquier diseño de interfaz necesario. Los tipos de componentes más comunes encontrados en uikit son:

Módulos Predeterminados: Estos componentes generalmente normalizan los elementos HTML de funcionalidad transversal del navegador y agregan un poco de estilo muy básico.

Diseño: Se refiere a componentes para la organización de contenido plenamente responsiva mediante grillas y paneles.

Navegación: Uikit ofrece diferentes tipos de navegaciones, como barras de navegación, y navegación secundaria.

Elementos: Se refiere a estilos prediseñados para elementos de HTML básicos como tablas, y formularios. Estos elementos usan sus propias clases, es decir que no interfieren con otros elementos predeterminados.

1.4.7 Pruebas de aplicaciones web

Las aplicaciones web son software, por lo tanto las pruebas del software tradicional son aptas para las aplicaciones web. Así mismo existen otras pruebas, validadores y herramientas pertinentes para el desarrollo en la nube. Listamos todas estas pruebas a continuación.

Pruebas funcionales o Pruebas unitarias: Se prueba módulo por módulo, funcionalidad por funcionalidad el

software desarrollado a nivel de clases y métodos. o Pruebas de integración: Se prueba el software en conjunto, para analizar su correcto

funcionamiento. En particular la conexión y paso de información entre módulos. o Pruebas de regresión: Se analiza el comportamiento del software cuando se añaden

nuevas funcionalidades, volviendo a verificar el correcto funcionamiento de los módulos desarrollados anteriormente.

20


o Pruebas de aceptación: Son pruebas donde se validan los requerimientos funcionales (pruebas diseñadas en las historias de usuario) con el cliente y en el ambiente de producción.

Validación de código HTML / CSS: Existen herramientas para validar la sintaxis del código HTML / CSS, la más conocida es la de la W3C.

Pruebas no funcionales: Son pruebas dedicadas a validar los atributos de calidad del software desarrollado.

o Pruebas Seguridad o Pruebas Desempeño (Carga) o Pruebas Resistencia (Stress) o Pruebas Volumen o Pruebas Concurrencia o Pruebas de Usabilidad o Pruebas de Accesibilidad

En este proyecto se realizaron pruebas funcionales de aceptación y pruebas no funcionales de usabilidad mediante chequeo de heurísticas. Los resultados de la aplicación se encuentran en el CAPÍTULO 4.

1.4.7.1 Usabilidad

Para (Jakob Nielsen, 2012), la usabilidad es un atributo de calidad que evalúa que tan fácil son de usar las interfaces de usuario. La palabra "usabilidad" también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseño. Para este autor, usabilidad se define por 5 componentes de calidad:

Facilidad de aprendizaje: ¿Es fácil para los usuarios llevar a cabo tareas básicas la primera vez que se encuentran con el diseño?

Eficiencia: Una vez que los usuarios han aprendido el diseño, ¿qué tan rápido pueden realizar las tareas?

Memorabilidad: Cuando los usuarios vuelven a la interfaz después de un período de no usarla, ¿qué tan fácil pueden restablecer la memoria de uso?

Errores: ¿Cuántos errores cometen los usuarios?, ¿qué tan graves son estos errores? y ¿con que facilidad pueden recuperarse de estos errores?

Satisfacción: ¿Qué tan agradable es la utilización de la interfaz?

Las heurísticas de usabilidad son principios, patrones y recomendaciones para el mejoramiento de la experiencia de usuario en cuanto a la interacción con la interfaz del software. Muchos autores han propuesto distintas heurísticas o principios de usabilidad para su medición. Entre ellos (J Nielsen, 1995) propone los siguientes grupos de principios orientados hacia la usabilidad en las interfaces de usuario:

Información a tiempo de lo que está sucediendo con el sistema

El sistema debe hablar el sistema del usuario, no entrando en palabras técnicas incomprensibles.

Consistencia y estándares.

Prevención de errores

Es mejor reconocer que recordar.

Flexibilidad y eficiencia de uso.

Diseño minimalista

Permitir al usuario solucionar el error.

Ayuda y documentación.

21


Las heurísticas de Nielsen son las más usadas como un instrumento de valoración de usabilidad mediante listas de chequeo. Sin embargo, existe evidencia en la literatura la cual establece que estas heurísticas no son totalmente apropiadas cuando son usadas para medir el nivel de usabilidad de nuevas categorías emergentes de aplicaciones software (Paz, Pow-Sang, & Collantes, 2014). Además de esto, las heurísticas deben ser adaptadas a un software en específico, por esto y a través de búsqueda referencial a continuación se definen ciertas heurísticas de usabilidad para la realización de un chequeo en el portal web CIER-SUR, utilizando como base las heurísticas de Nielsen además de algunas encontradas en artículos de (Junior, Nishida, & de Melo, 2012), (Paz et al., 2014) y (Har & Portwood, 2009) y adaptándolas a este proyecto en específico.

¿Son visibles los elementos principales en la navegación del portal?

¿El portal provee información acerca de la ubicación del usuario en la navegación?

¿El portal provee retroalimentación en las acciones realizadas por el usuario? Ej: ingreso al portal, acceso a una visualización, creación y edición de reseñas de objetos de aprendizaje, etc.

¿El portal está diseñado dentro de los lineamientos estándar para portales web? Ej. HTML, CSS JavaScript

¿El portal es consistente en cuanto a identidad visual en todas las páginas?

¿Cuándo se emplean simbologías dentro del portal, estas son mediante iconos estándar?

¿El portal provee secciones de ayuda, documentación y soporte?

¿El portal permite el reconocimiento de todos los módulos mediante interfaces intuitivas sin necesidad de acordarse de la navegación hacia estos de memoria?

¿El portal permite la interactividad entre los usuarios?

¿Las características en el portal como longitud y espaciado de textos, gráficos e imágenes afectan al usuario a la hora de entender esta misma información?

¿Las características de la navegación en el portal como enlaces, jerarquías, uso de convenciones estándares web, y consistencia ayudan al usuario a encontrar la información fácilmente?

¿Es correcta la visualización del portal en diferentes resoluciones?

¿El rendimiento del portal afecta la habilidad de los usuarios para encontrar información?

¿El portal motiva a los usuarios a explorar el sitio?

¿El portal provee los recursos requeridos por los usuarios?

1.4.8 Visualización de datos

(Kirk, 2012) define la visualización de datos como la representación y presentación de datos, que explotan nuestras habilidades de percepción visual para amplificar nuestra cognición. Para este autor existen tres definiciones principales que nos ayudan a entender la visualización de datos, las cuales listamos a continuación.

Representación: Se refiere a la manera en la que se decide representar datos de una manera física, es decir por líneas, barras círculos o cualquier otra variable visual.

Presentación: Se refiere a cómo integrar la representación de los datos en el mundo de comunicación global.

Explotar nuestras habilidades de percepción visual: Se refiere al entendimiento científico de como nuestros ojos y cerebros procesan la información efectivamente

Amplificar la cognición: Se refiere a maximizar la eficiencia y efectividad en la que somos capaces de procesar la información en pensamientos, ideas y conocimiento

El objetivo de la visualización de datos debe ser la de hacer que el lector o los usuarios se sientan mejor informados acerca de un tema. Otra cuestión importante dentro de la definición de visualización de datos es la de los agentes que intervienen en el proceso. Para (Kirk, 2012) los principales son el mensajero, el mensaje y el receptor.

22


En la Figura 12 se ilustra el proceso que se registra cuando un agente mensajero presenta una visualización de datos a un agente receptor. En este caso el mensajero busca impartir resultados, análisis e historias de los cuales es el diseñador. En el otro lado está el receptor del mensaje el cual es el receptor de la visualización. El mensaje en el medio es el canal de comunicación entre el mensajero y el receptor, el cual en este caso es la visualización de datos; un gráfico, una interactividad en línea o una infografía.

Figura 12. Agentes que intervienen en el proceso de visualización de datos. Tomada de (Kirk, 2012)

Una vez definida teóricamente que es la visualización de datos, es necesario describir las librerías que para esta tarea fueron utilizadas en este proyecto. Estas librerías fueron seleccionadas mediante el análisis y comparación de algunas preseleccionadas mediante indagación en el internet. El análisis y selección de la librería a utilizar se presenta en la sección 2.3 de este documento.

1.4.8.1 Librería D3.js para la visualización de datos

D3.js es una librería de JavaScript para la manipulación de documentos basados en datos la cual ayuda a visualizarlos usando HTML, SVG y CSS. Esta librería permite vincular datos arbitrarios al Document Object Model (DOM), y luego aplica transformaciones, graficas, de desplazamiento y animaciones basadas en estos. Esta herramienta es bastante compleja, con base a ella existen cientos de tipos de visualizaciones de datos dando todo un Framework para su realización. Por su complejidad y moderada curva de aprendizaje, existen sub librerías para realizar un grupo específico de tipos de gráficos más fácil y ágilmente, entre ellas datamaps para visualizaciones geográficas y C3.js para gráficos estadísticos básicos. En la Tabla 6 se presentan algunos de estos tipos de gráficos y su descripción, para mostrar la múltiple variedad de visualizaciones que se pueden realizar utilizando D3.js.

23


Tabla 6. Visualizaciones de datos librería D3.js

Nombre Visualización Descripción

Bubble Chart

Figura 13. Gráfico de burbuja en D3.js.

Tomada de 1

Los gráficos de burbuja codifican la información en círculos, aunque perceptualmente menos preciso que los gráficos de barra, se pueden visualizar cientos de

valores en un espacio pequeño.

Chord Diagram

Figura 14. Diagrama de Cuerdas en D3.js.

Tomada de 2

Un diagrama de cuerdas en D3.js, mostrando las dependencias entre clases en una jerarquía de clases de software. Las dependencias se agrupan de acuerdo

a los paquetes de origen y de destino. Aunque este diagrama no muestra el detalle nivel- clase visible,

mejor revela el número total de las importaciones entre y dentro de los paquetes

Hive Plot

Figura 15. Diagrama de parcela en

Este diagrama de parcela es un tipo de diagrama de nodo de enlace, se muestra el grafo de dependencia

de la herramienta Flare visualization toolkit. Cada punto representa una clase, y cada línea

representa una declaración de importación de una clase a otra. Clases relacionadas comparten el mismo

color.

1 http://bl.ocks.org/mbostock/4063269


24


D3.js.

Tomada de 3

Radial Reingold –

Tilford Tree

Figura 16. Árbol Radial Reingold - Tilford.

Tomada de 4

El diseño del árbol implementa el algoritmo Reingold-Tilford para una eficiente disposición ordenada de nodos en capas. La profundidad de los nodos se

calcula mediante la distancia desde la raíz, lo que lleva a una apariencia irregular. Orientaciones cartesianas

también pueden ser implementadas. Aplicación basada en el trabajo de Jeff Heer y Jason Davies usando

Buchheim y cols. Variante de tiempo lineal del algoritmo Reingold-Tilford. Los datos muestran la jerarquía de clases de Flare, también cortesía Jeff

Heer.

Como se presentó anteriormente se puede realizar con D3.js casi cualquier tipo de visualización que se requiera, lo que hace a esta librería flexible y útil. Para nuestro proyecto utilizaremos D3.js puro para la realización de una visualización geográfica de los datos presentados por el componente de formación. Se hace necesario definir ciertas librerías y herramientas que fueron necesarias para la implementación de esta visualización en esta sección, estas herramientas se listan a continuación.

GeoJson: En (Group, 2015) se define a GeoJson como un formato para la codificación de múltiples datos geográficos, como su nombre lo indica, está basado en JSON. GeoJson soporta múltiples tipos de figuras geométricas tales como LineString, Polígono, Multipunto, MultiLineString y MultiPolygon. Objetos geométricos con propiedades adicionales son almacenados como objetos de características.

A pesar de que GeoJson es un estándar para la representación geográfica en un objeto con formato JSON, en D3.js el formato utilizado es el de TopoJson, el cual se define a continuación.

TopoJson: Es una extensión de GeoJson que codifica topología. Más que representar geometrías discretamente, las geometrías en archivos TopoJSON se agrupan mediante segmentos de línea compartidos llamados arcos. TopoJSON elimina la redundancia, lo que permite geometrías relacionadas para ser almacenadas de manera eficiente en el mismo archivo. Por ejemplo, la frontera compartida entre California y Nevada se representa sólo una vez, en lugar de ser duplicado para ambos estados. Un solo archivo TopoJSON puede contener varias colecciones de datos sin duplicación, como los estados y condados. O bien, un archivo TopoJSON puede representar eficientemente ambos polígonos (de relleno) y límites (para el accidente cerebrovascular) como colecciones de dos características que comparten la misma malla arco. Información tomada de (Bostock, 2012).

GDAL: Por sus siglas en ingles Geospatial Data Abstraction Library, es una librería que sirve para la transformación de archivos .shp en archivos GeoJson y luego para la combinación de diferentes datos en formato TopoJson. Información tomada de (Bostock, 2012).

Se necesitaba una fuente de donde sacar la información topográfica de los mapas que necesitábamos hacer en cualquier formato para luego convertirlo en el formato apropiado con la herramienta GDAL, para esto, se utilizó Naturale Earth, herramienta que se define a continuación.

Natural Earth: Es un conjunto de datos para mapas de dominio público disponible en 1: 10m, 1: 50 y 1: 110 millones de escalas. Con los datos vectoriales y raster estrechamente integrados, con Natural

3 http://bost.ocks.org/mike/hive/


25


Earth se pueden hacer una variedad de mapas visualmente agradables, bien elaborados mediante la cartografía o software GIS. Información tomada de (Bostock, 2012).

Entre los requerimientos del componente de formación estaba la creación de visualizaciones de datos para estadísticas del proceso de formación entre los que se identificaron 3 tipos de gráficos: de Barras, de pastel y geográficos. Como se había mencionado antes, C3.js explota la librería D3.js para la realización de gráficos estadísticos simples, entre los que se encuentran los de barras y pastel.

1.4.8.2 Librería C3.js para la visualización de datos

C3.js es una librería para facilitar la generación de gráficos basados en D3.js, debido a la alta complejidad en cuanto a implementación de gráficos en esta herramienta, nos brinda la posibilidad de simplemente poner los datos necesarios en objetos y desplegarlos en visualizaciones mediante la librería D3.js. Además de esto C3.js provee soporte para personalizar los gráficos generados y realizar vistosas animaciones en estas visualizaciones.

En la sección 2.4 de este documento se realizó un análisis y selección de una herramienta para la construcción de Wiki en el portal web del CIER-SUR. A continuación se definen estas herramientas y se define Media Wiki, la herramienta escogida para su implantación en el portal web.

1.4.9 Herramientas Wiki

Una Wiki es un software para la web, que permite a todos los visitantes de una página realizar cambios al contenido, editándolos en línea mediante su navegador. Esto hace a las herramientas Wiki una plataforma simple y fácil de usar para el trabajo cooperativo en textos e hipertextos. (Ebersbach, Glaser, Heigl, & Warta, 2008).

Las Wikis pueden ser utilizadas tanto en espacios cerrados (grupos de trabajo) o pueden ser direccionadas hacia todas las personas que quieran compartir conocimientos en toda la red. Gracias a su potencial, las Wikis sirven como herramientas de gestión del conocimiento en la planeación y documentación de diferentes proyectos. Además de esto pueden ser utilizadas como un sistema de gestión de contenidos (CMS) abierto y orientado a la web. Otro uso común es el de libreta de notas o foros de discusión para diferentes temas especializados.

Debido a su gran flexibilidad, este tipo de software ha sido utilizado en múltiples espacios educativos. Según (Bernardez, 2007) las Wikis sirven como una herramienta para captar la atención de los estudiantes en la búsqueda, difusión y validación de información y conocimiento, además de aportar habilidades de colaboración y trabajo en equipo. Además de esto y ya que las Wikis soportan múltiples formatos multimedia, pueden ser una excelente herramienta de difusión de habilidades en literatura, expresión personal y artística. Uno de los objetivos de trabajo de grado web es la creación de una comunidad virtual, las Wikis pueden ser una herramienta más para la constitución de este objetivo como espacio de discusión y colaboración en torno a intereses comunes del CIER-SUR. A continuación se listan las características mas relevantes de este tipo de herramienta:

Edición, formato y gestión de referencias al contenido

Subida de archivos multimedia

Multilenguaje

Gestión de usuarios

Sindicación de contenidos

Gestión de versiones de contenido

Gestión de revisión de contenido

Notificaciones por correo electrónico cada vez que una página es cambiada

Niveles de acceso mediante gestión de permisos al contenido

26


1.4.9.1 Media Wiki

Media Wiki es un software creado especialmente para el proyecto Wikipedia, sin embargo se convirtió luego en un motor para Wikis. Está diseñado para la gestión de miles de peticiones diarias en un sitio que recibe millones de visitas. En Media Wiki, las páginas tienen formato wikitext, lo que permite que usuarios sin conocimiento XHTML o CSS puedan publicar contenidos de una manera fácil y ágil. Cuando un usuario envía una edición a una página, Media Wiki la escribe en la base de datos, pero sin eliminar las versiones anteriores de la página, permitiendo así reversiones fáciles en caso de vandalismo o spam. Media Wiki puede gestionar imágenes y archivos multimedia, que se almacenan en el sistema de archivos. Para grandes wikis con muchos usuarios, Media Wiki soporta el almacenamiento en caché y se puede acoplar fácilmente con el software de servidor proxy Squid.

En la sección 2.5 se realizó un análisis para la selección de un sistema de gestión de incidencias; Por esto a continuación se definen estas herramientas y se profundiza en MantisBT, la herramienta escogida para su implantación en el portal web.

1.4.10 Herramientas de gestión de incidencias

Para reducir el tiempo de arreglo de defectos o errores, y para resolver los problemas sistemáticamente, las organizaciones utilizan un sistema de gestión de problemas o incidencias. Cualquier problema reportado por un cliente se conoce como una incidencia y es ingresado a este sistema. Un sistema de seguimiento de incidencias o gestión de incidencias, es una herramienta software que gestiona y mantiene listas de problemas, quejas o incidentes reportados, mantiene el seguimiento de estos defectos y ayuda al equipo del proyecto a mantener un orden, a buscar estos incidentes y a solucionarlos. (BASU & ANIRBAN, 2015)

La información captada por un problema depende del sistema, su configuración y los requerimientos que tenga la organización, sin embargo existen conjuntos de información necesaria para realizar un seguimiento de todos los problemas. Aspectos como cuál es el producto afectado por el problema, cual componente del producto es el implicado en el problema, Cual es la versión del producto afectado, quien descubrió el problema, cuales son los pasos necesarios para reproducir el problema entre otros es básica en la detección y seguimiento de incidencias. (Kurbel, 2008).

1.4.10.1 MantisBT

MantisBT es un software para el seguimiento de incidencias de código abierto, que provee un balance entre simplicidad y escalabilidad. Algunas características principales de mantis son: Gratuita, facilidad en la instalación, simplicidad en la experiencia de usuario, basado en la web, soporte para cualquier plataforma que tenga PHP, Múltiples proyectos por instancia, Soporte para proyectos, sub-proyectos y categorías, Hoja de ruta, búsqueda y filtrado de incidencias entre otras muchas.

1.5 Estado del arte

Existen diversos portales web en la red, como ya mencionamos anteriormente, estos portales se agrupan en portales horizontales, verticales, especializados y corporativos (Intranet). Enmarcando el actual proyecto de grado en un portal web especializado en educación y teniendo en cuenta características como tecnologías usadas, CMS, Interactividad con los usuarios, acceso a recursos y visualizaciones de datos entre otros; a continuación definimos algunos portales educativos representativos que se encontraron realizando una inspección en el internet, organizándolos por universidad y centros de innovación regional.

1.5.1 Portales Universitarios

1.5.1.1 Universidad de Harvard

El portal web especializado harvard.edu, ofrece visualización de los procesos educativos que se vienen desarrollando en la Universidad dando noticias, eventos, información organizacional entre otros.

27


Además de esto ofrece servicios de contacto y acceso a recursos como bibliotecas online, laboratorios, museos y centros de investigación para el soporte de actividades académicas. También es posible acceder a formatos de admisión en todos los grados disponibles en la universidad.

En la Tabla 7, Se describen algunas de las tecnologías web utilizadas por el portal de la universidad de Harvard.

Tabla 7. Tecnologías web utilizadas por www.harvard.edu

Servidor Web Alojamiento Framework Back-End

Analíticas Visualización de Analíticas

Framework Front-End

CMS

Apache Amazon PHP Google Analitycs

ChartBeat, comScore, New Relic

jQuery Joomla

Figura 17. Harvard. Edu. Tomada de www.harvard.edu

1.5.1.2 Portal Universidad del Valle

En el portal web de la universidad del Valle se encuentran noticias de actualidad, información organizacional, de programas de pregrado y posgrado, y una gran variedad de recursos de bibliotecas, software libre, convocatorias entre otros. Además permite realizar todo el proceso de admisión y registró totalmente virtual, lo que ayuda a personas que no tienen fácil acceso físico a la universidad. El enlace al portal es www.univalle.edu.co

28


Figura 18. Página principal univalle.edu.co. Tomada de www.univalle.edu.co

1.5.2 Portales de Centros De Innovación

1.5.2.1 Blog CIER-Oriente

El CIER-Oriente hace parte del macro proyecto CIER a nivel nacional, y cuenta con un portal web que gestiona sus noticias y algunos recursos informativos. El portal web CIER-Oriente puede ser encontrado en www.cieroriente.edu.co

Figura 19. Portal CIER-Oriente. Tomada de www.cieroriente.edu.co

1.5.2.2 Portal CIER-Centro

El CIER-Centro hace parte del macro proyecto a nivel nacional. Cuenta con un portal web para la gestión de su información. El portal web del CIER-Centro puede ser encontrado en ciercentro.edu.co

29


Figura 20. Portal web CIER-Centro. Tomada de ciercentro.edu.co

1.5.3 Análisis del estado del arte.

Es muy común encontrar portales web especializados en organizaciones educativas, casi todas las organizaciones que tienen un crecimiento relativamente rápido de su información tienen uno. La mayoría ofrecen información, recursos y servicios que los hacen tener ventajas en cuanto a visualización y socialización de su información. Muchas aplicaciones utilizan alojamientos gratuitos bastante limitados en cuanto a funcionalidad y almacenamiento. Otras más grandes tienen como características portales con acceso a recursos e información bastante eficiente, agradables visualmente, y de fácil acceso cumpliendo el propósito de estas herramientas tecnológicas.

Uno de los objetivos fundamentales de estas herramientas es dar a conocer la organización a niveles casi globales, introduciendo una identidad grafica que permite identificarlas en cualquier contexto. El acceso a servicios, gestión, visualización de la información e interacción con el sitio, hace pensar que esta herramienta es la adecuada para cubrir las necesidades expuestas por el CIER-SUR, idea que se refuerza cuando vemos la implementación de estas herramientas por otros CIER regionales (CIER-Oriente y CIER-Centro).

Una de las ideas principales de este proyecto es que su alcance no sea simplemente la gestión de la información. Aspectos como la creación de una red virtual académica para el CIER-SUR, análisis de datos recopilados en los distintos componentes, además de la introducción de una identidad organizacional, hacen del portal web CIER-SUR más extensivo comparado con los otros CIER regionales.

Se tomarán de las herramientas encontradas características fundamentales de un portal como la correcta gestión de la información, acceso a servicios y recursos; pero introduciendo una identidad limpia que facilite la usabilidad y la interacción con el usuario. Además se crearán herramientas que permitan la visualización de datos internos del CIER-SUR para su posterior análisis y discusión, lo cual facilita la coordinación de algunos aspectos en cada componente.

31


CAPÍTULO 2ANÁLISIS Y SELECCIÓN DE

TECNOLOGÍAS PARA EL PROYECTO

2.1 Caracterización, análisis y selección de herramienta CMS

A continuación se realiza un análisis comparativo de las 2 tecnologías CMS más usadas en la red en el cual se realiza la selección de la herramienta base para el portal. En este análisis se realizó una caracterización de herramientas, Una introducción a las características que se requieren en este proyecto y un análisis herramienta por herramienta de estas características. El producto final de este análisis será un cuadro comparativo de cada una de las herramientas, las características requeridas y el posterior análisis y conclusiones de este para la elección de la herramienta base de nuestro portal web. En la elección de esta herramienta se tuvieron en cuenta las limitaciones que teníamos en infraestructura descartando así uno de los CMS más utilizados en el desarrollo de portales web (Drupal).

Antes de comenzar, es necesario decir que nos basamos en las estadísticas de la plataforma BuildWith.com para tener un indicio de cuáles eran las tecnologías o herramientas CMS más utilizadas en la red.

En la Figura 21, se visualizan los porcentajes de tecnologías CMS utilizadas en la red, el CMS Wordpress con el 50% de uso es la tecnología más usada, seguido por Joomla con el 9%. La tabla 1 muestra el ranking de CMS más usados con el top de sitios en todo el internet.

Como conclusión a la información presentada anteriormente, según la plataforma BuildWith.com las 2 tecnologías CMS más utilizadas son Wordpress y Joomla.

Figura 21. Estadística de utilización de CMS en la red

32


2.1.1 Descripción y características generales de Wordpress y Joomla.

Para empezar el proceso de análisis y caracterización de herramientas CMS para la posterior selección de uno de estos, es necesario empezar por revisar las características de los preseleccionados. A continuación se describen y caracterizan los CMS Joomla y Wordpress.

2.1.1.1 Descripción y características generales de Wordpress

El sitio principal de Wordpress define esta herramienta como un software web que puede ser usado para la creación de sitios, blogs o aplicaciones gratuitamente. El núcleo del software es construido por cientos de voluntarios y existen miles de plugins y temas disponibles para transformar el sitio web en cualquier cosa que se pueda imaginar. (Wordpress.org, 2015). Lo enmarcamos como un CMS debido a su habilidad para gestión de la arquitectura del sitio, relaciones entre páginas, acceso a contenidos por rol de usuario, además de ofrecer ventajas en cuanto a los procesos editoriales, de autoría y de publicación pero su mayor uso está centrado en una herramienta blog. Vale la pena destacar la diferencia de distribuciones de Wordpress. Wordpress.org la rama gratuita por así decirlo de Wordpress, permite descargar el código Núcleo de Wordpress para ser implantado como sea la necesidad. Wordpress.com es la rama corporativa de Wordpress, la cual permite dinamización en la creación de un sitio web ya que provee alojamiento y hace el proceso de instalación casi invisible para el usuario final.

Simplicidad: Wordpress permite la publicación de todo tipo de contenidos de manera ágil y

eficaz sin restricciones en el conocimiento de lenguajes complicados, simplemente con el

conocimiento de uso de la interfaz de administración.

Flexibilidad: Con Wordpress se pueden crear todo tipo de sitios web como: Blogs, Blogs

basados en fotos, Sitios empresariales, Portafolios profesionales, Sitios Gubernamentales,

Revistas o Portales de noticias. Se puede personalizar mediante el uso de plantillas realizadas

o creadas, gratuitas o de pago. Se puede extender con una gran variedad de plugins

Gestión de usuarios: Wordpress permite la creación y uso de múltiples tipos de usuarios

para la restricción de usos, publicación y visualización de contenidos

Gestión de medios: Wordpress permite la gestión de múltiples tipos de medios como videos,

fotos y otros, de manera ágil con una usable interfaz de administración.

Fácil sistema de temas: Wordpress permite la inclusión de temas para personalizar la

interfaz gráfica del sitio web, se tienen múltiples opciones gratuitas en el sitio de Wordpress

además de que se pueden desarrollar desde cero al gusto del cliente.

Comentarios incorporados: Wordpress permite la gestión de comentarios a los artículos

publicados incorporados al sistema.

Las anteriores son las características más generales de Wordpress. A continuación se describe brevemente el CMS Joomla y se da a conocer un listado con sus características más generales.

2.1.1.2 Descripción y características generales de Joomla

Joomla es un sistema de gestión de contenidos (CMS), que permite la construcción de sitios Web y aplicaciones en línea potentes. Muchos aspectos, incluyendo su facilidad de uso y extensibilidad, han hecho de Joomla uno de los software de creación de sitios Web más popular disponible. Joomla es una solución de código abierto que está disponible gratuitamente para todos.

A continuación se listan algunas características generales de Joomla:

Multi-Lenguaje: Joomla permite la creación de contenidos en más de 64 idiomas disponibles

en su núcleo, lo que permite la accesibilidad de un sitio por parte de casi todas las personas.

33


Soporte: Joomla provee la infraestructura para que una gran comunidad de sus aportes en

una especie de foro para la construcción de un proyecto en particular, o se desarrolle un tema

específico acerca de este.

Fácil actualización: Joomla permite la actualización del software núcleo en un proceso de un

clic.

Sistema de ayuda integrado: Joomla tiene un sistema de ayuda contextual en la aplicación

para ayudar a todos los niveles de usuario a utilizar su Joomla. La mayoría de las páginas

tienen un botón de ayuda en la parte superior derecha, lo que ayuda a entender plenamente

todas las opciones en esa página en concreto.

Gestión de medios: Joomla incluye una herramienta para la subida, organización y gestión

de medios además de incluirla en la creación de contenidos para su fácil inclusión en estos.

Buscador: Se incluye un buscador para buscar cualquier tipo de contenido publicado en el

sitio web.

Gestión de contenidos: Se incluye una interfaz WYSIWYG de gestión de contenidos tales

como artículos y otro tipo de publicaciones.

Etiquetación: Joomla permite etiquetar los artículos de manera que el artículo sea más rico

en semántica.

Categorización: Joomla permite organizar el contenido publicado mediante la adición de

múltiples categorías anidadas.

Edición vista del cliente: No es necesario entrar a la interfaz de administración para editar

los contenidos publicados ya que Joomla permite hacer esta tarea directamente en la parte de

la vista del cliente.

Gestión de Menús: Joomla permite la gestión de menús en la interfaz de administración del

sitio.

Extensibilidad: Joomla permite la ampliación de la funcionalidad del sitio web mediante

múltiples extensiones contenidas (casi todas) en el directorio de extensiones.

2.1.2 Características requeridas por el proyecto.

Debido a la extensión en el mercado en cuanto a nuevas tecnologías CMS, elegir una que se adapte a las necesidades de un proyecto en específico se ha convertido en una tarea complicada ya que se generan preguntas relacionadas a las características que hacen de estos sistemas, software de calidad. Un primer indicio no concluyente para la elección de estas herramientas puede ser su volumen de uso a nivel mundial, una herramienta extensamente utilizada puede tener ventajas en cuanto a soporte, experiencia de usuarios, análisis más completos de la herramienta entre otros aspectos que no se conseguirían fácilmente con herramientas poco usadas. Por este primer indicio filtramos el listado a dos CMS (Wordpress y Joomla) los cuales son los más usados a nivel mundial.

Por otro lado, existen otras características que debemos reconocer para hacer una buena elección de un CMS, estas características fueron consultadas a través de la experiencia, y a su vez son integradas a las necesidades que identificamos en nuestro proyecto.

Facilidad en la publicación de contenido: La herramienta debe permitir la publicación de contenido intuitivamente, por parte de profesionales sin un amplio conocimiento en programación (PHP, JavaScript), o en lenguajes de etiqueta (HTML).

Facilidad en la gestión de la identidad visual: La herramienta debe permitir un diseño gráfico que nos permita crear una identidad institucional para el CIER-SUR. También se necesita que sea adaptable visualmente a cualquier dispositivo que la requiera. Todo lo anterior siguiendo estándares web de HTML, CSS y JS.

34


Rendimiento: Es necesario que la herramienta tenga un tiempo de respuesta moderado (máximo 20 segundos) para cubrir las peticiones de los usuarios.

Niveles mínimos de seguridad: La herramienta debe garantizar la seguridad del portal web, garantizar la seguridad de los datos que se incluyen además de impedir los diversos ataques web con múltiples propósitos entre los que se incluyen el spam.

Presupuesto: El costo de implementación de la herramienta CMS debe adaptarse al presupuesto del proyecto. El presupuesto máximo para este proyecto, en gastos de desarrollo no debe sobrepasar

2.1.3 Análisis por herramienta de las características requeridas

2.1.3.1 Facilidad en la publicación de contenido

Wordpress. Permite la simplicidad en la publicación de contenidos, dejando al usuario a su creatividad la creación de cualquier tipo de documento. Se pueden crear páginas con los formatos deseados, insertar archivos, imágenes, videos. La herramienta de publicación es WYSIWYG, pero se pueden tener editores de HTML para usuarios más avanzados.

Joomla: Joomla contiene características para la gestión de contenidos que permiten la organización y gestión de este muy ágilmente. La creación de contenido se puede realizar mediante un editor WYSIWYG que permite su edición sin ningún conocimiento de código. Después de la creación de contenido, se tienen múltiples maneras de mostrarlos en el Front-End de la página.

Ambas herramientas pre seleccionadas contienen módulos de gestión de contenidos que facilitan al usuario su publicación. Sin embargo se diferencian en la manera de realización, por ejemplo, Joomla permite crear un contenido base en el cual se insertan imágenes, videos entre otros, para su posterior publicación mientras que Wordpress en la creación de contenido es más visual y orientado hacia el diseño gráfico.

Consideramos más sencillo para un usuario final de nuestro portal web la creación de un contenido base que ponga todos los contenidos necesarios para su posterior publicación en un solo paso. Como conclusión, tanto Wordpress como Joomla, permiten la fácil creación, edición, organización y eliminación de contenidos además de su sencilla publicación.

2.1.3.2 Facilidad en la gestión de la identidad visual

Wordpress: Wordpress incluye múltiples herramientas para la gestión de la identidad visual de portal web, la inclusión de plantillas (gratuitas y de pago), Visual Composer (herramienta Drag and Drop, para la creación de páginas, publicaciones etc.), entre muchas otras.

Joomla: Al igual que Wordpress, incluye muchas plantillas gratuitas para la gestión de la identidad visual de un portal web, sin embargo es más simplista en cuanto a la personalización de esta, por lo general las plantillas se modifican mediante campos de un formulario en cuestiones como colores, fuentes, tamaños de fuentes, imágenes, etc.

En Wordpress y Joomla existen múltiples herramientas para la personalización de portal o sitio web, la diferencia radica en que Wordpress tiene más opciones para la personalización (mas graficas), Joomla es más simplista en este aspecto y está mejor diseñado para un usuario intermedio (entre diseñador de aspectos gráficos y Programador). Por esta simplicidad y teniendo en cuenta el entorno bajo el cual fue desarrollado este proyecto, consideramos que Joomla permite de una manera muy fácil la gestión de la identidad visual en un portal web, mientras que en Wordpress se complica un poco más para los usuarios intermedios.

2.1.3.3 Rendimiento

Existen varias características las cuales mediante su inclusión, pueden determinar el rendimiento de una herramienta CMS. Las características en las que nos enfocaremos para realizar este análisis son, el balanceo de carga, cacheo de páginas, replicación de base de datos y exportación de contenido

35


estático. Esta información fue tomada de (“Estudio de los sistemas de gestión de contenidos web,” 2015).

Wordpress: Wordpress ofrece algoritmos de balanceo de cargas en su núcleo, además de esto ofrece complementos gratuitos para el cacheo de páginas, cacheo avanzado, replicación de bases de datos y exportación de contenido estático.

Joomla: Soporta balanceo de carga, cacheo de páginas y cacheo avanzado, mientras que aún no tiene soporte para replicación de bases de datos y exportación de contenido estático.

Wordpress ofrece más características que pueden ayudar a optimizar el rendimiento de un portal web, siempre y cuando sean instalados complementos adicionales. Joomla ofrece lo básico desde su núcleo (balanceo de carga, cacheo de páginas y cacheo avanzado), lo que puede ser considerado un plus para usuarios que no tengan los conocimientos de estas características.

2.1.3.4 Niveles mínimos de seguridad

Existen múltiples características mínimas mediante las cuales se puede medir aproximadamente la seguridad de un CMS, algunas de ellas y mediante las cuales se basa este análisis son: Aprobación del contenido, Verificación de email, Granularidad de permisos, autenticación Kerberos, autenticación LDAP, historial de ingreso y registro de auditoria. Esta información fue tomada de (“Estudio de los sistemas de gestión de contenidos web,” 2015).

Wordpress: Ofrece la opción de aprobar el contenido de usuarios diferentes al administrador antes de ser publicado, verificación de email cuando un usuario se registra, múltiples niveles de permisos. En cuanto a autenticaciones, no admite ni tipo Kerberos ni LDAP. Por otra parte, no incluye el historial de ingreso, y el registro de auditoria es bastante limitado.

Joomla: Ofrece la opción de aprobar el contenido a publicar, verificación de emails de usuarios registrados, granularidad en los permisos de cada usuario, autenticación LDAP e historial de ingreso. No ofrece autenticación Kerberos ni registro de auditoria.

En términos generales, ambos CMS ofrecen seguridad básica para los portales web, sin embargo Joomla destaca por ofrecer más opciones de seguridad sin necesidad de instalar complementos adicionales.

2.1.3.5 Presupuesto

Ambos CMS pre seleccionados son gratuitos, así que ambos se ajustan a nuestro presupuesto. Sin embargo las plantillas son la base para la gestión de una identidad visual en el portal, por lo que se realizó un sondeo de 10 plantillas de pago para Joomla y 10 plantillas de pago para Wordpress, para intentar vislumbrar a niveles generales el costo promedio de las plantillas en ambos CMS. En la tabla Tabla 8 se consignan el nombre de la plantilla evaluada y el costo.

Tabla 8. Costo de algunas plantillas para Wordpress y Joomla

Wordpress

Nombre de la plantilla Costo

Paper 39 USD

Accent 49 USD

Applique 49 USD

Via 59 USD

REMARK 49 USD

Megatron 59 USD

LUXOR 49 USD

Grid312 49 USD

Modesty 44 USD

Harika 49 USD

Joomla

36


El promedio de costos de una plantilla para Wordpress según las plantillas evaluadas es de 49.5 USD. El promedio de costo de una plantilla para Joomla según las plantillas evaluadas es de 48.5 USD. A pesar de que existe una diferencia mínima entre los costos de las plantillas para Wordpress y Joomla, podemos decir que los precios se asemejan y no contamos con una vasta población para realizar el análisis estadístico apropiado. El promedio de costos de las plantillas de Joomla y Wordpress se adecuan al presupuesto del proyecto.

2.1.4 Conclusiones y selección de CMS

En este capítulo se ha realizado un análisis comparativo de diferentes características las cuales se consideraron mínimas para la selección de una herramienta CMS base. En esta sección se realizara la selección del CMS para el portal web CIER-SUR, utilizando los análisis ya realizados en las secciones anteriores.

En la Tabla 9 se muestra el resumen general de caracterización de las herramientas preseleccionadas como producto del análisis herramienta por herramienta de las características requeridas por este proyecto.

Tabla 9. Resumen caracterización

CMS Facilidad en la publicación de

contenido

Facilidad gestión de identidad

visual

Rendimiento Niveles

mínimos de seguridad

Presupuesto

Wordpress Muy fácil Fácil

Optimizado mediante la inclusión de

complementos gratuitos

Seguro Adecuado

Joomla Muy fácil Muy fácil Optimo Muy seguro Adecuado

En base a este resumen, podemos concluir que ambas herramientas son ajustables al proyecto, pero la que mejor se adecua a las características requeridas es Joomla, por su nivel de gestión de identidad visual fácil para usuarios intermedios, por su rendimiento optimizado sin la necesidad de incluir complementos y por su nivel de seguridad incluyendo características que Wordpress no incluye, además de incluir facilidad en la publicación de contenidos y ajustarse al presupuesto.

2.2 Análisis y selección de la plantilla base para Joomla

Uno de los objetivos principales de este proyecto era además de la creación de un portal web, el de brindarle una identidad grafica que lo distinguiera como perteneciente al CIER-SUR. Además de esto era importante que el portal fuera responsivo en cuanto a su interfaz gráfica. Para darle cumplimiento a estos objetivos, y tomando en cuenta la flexibilidad de Joomla para la adaptación de plantillas pre fabricadas, se decidió hacer uso de una de estas para constituir la parte visual, y asignar una identidad al portal web.

Vertica 43 USD

Sport.AK 48 USD

ShoppyStore 58 USD

Velo 58 USD

Constra 48 USD

ME 48 USD

Fitness Center 48 USD

Agency Semona 48 USD

Studio 43 USD

Event 43 USD

37


Existen múltiples opciones para la elección de una plantilla de Joomla, algunas son hechas para portafolios, web organizacional, páginas de ventas, entre otras muchas. El criterio básico para la elección de la plantilla a ser utilizada, fue la flexibilidad. Con flexibilidad nos referimos a múltiples maneras de presentar el contenido, galerías, imágenes y videos. Otro criterio muy importante fue el del manejo responsivo, la plantilla debe mostrar el contenido visual de manera responsiva y tener frameworks que ayuden a esto.

Para la elección de la plantilla realizamos una búsqueda en los múltiples mercados de plantillas a través de internet, seleccionando las más atractivas visualmente con la ayuda de la diseñadora gráfica y luego comparando sus características para realizar un análisis costo-beneficio. La caracterización de las plantillas pre-seleccionadas se encuentra en la Tabla 10.

Tabla 10. Caracterización de plantillas Joomla

Nombre URL vista previa Características Precio Descripción

Fontaine Theme

http://demo.arro wthemes.com/?t heme=fontaine

Diseño responsivo

5 esquemas de colores pre seleccionados

60 opciones en la administración de la plantilla

Estilo para el foro de Kunena

Estilos para el complemento K2

Estilos para Widgetkit

Combinación de múltiples diseño de pagina

Variación de módulos personalizados

Búsqueda con AJAX instantánea

Complemento de shortcodes

Robusta y extensiva tipografía

50 USD

Plantilla limpia, enfoque minimalista orientado hacia el Contenido, no está limitado a una distribución por página,

Colores fácilmente adaptables a la identidad gráfica.

Menús dinámicos con JavaScript, Barra de media social, slideshows sencillo.

Presentación para ítems de blog robusta y modificable.

Glenon http://joomla.th emesoul.com/?t heme=glenon

Diseño responsivo para las pantallas más pequeñas

8 Variaciones en el color de la plantilla

Soporte para el componente de Joomla K2

Módulos de carruseles

Múltiples opciones para el diseño

Bootstrap

Mega Menú

Todas las extensiones pre instaladas

45 USD

Orientado visualmente, menos presentación de

contenido textual.

Extremadamente minimalista.

Solution http://demo.joo

mlaplates.com/jp _solution/

40 posiciones para módulos

Carruseles incluidos

Soporte de estilos para K2

4 Variaciones de colores y 6 fuentes

6 estilos para módulos 25 USD

Diseño usando contraste y espacio en blanco interfaz minimalista con carrusel y tres columnas, diseños específicas para k2, Menús con JavaScript. Presenta una gama de colores más restringida. En cuanto a presentación de los artículos está orientada al texto más que a imágenes.

JSN http://themeforest.n Diseño responsivo 50 Diseño usando contraste y

38


Solid et/item/jsn-solid-responsive-joomla-

education-template/5371808

6 variaciones de colores

Integración con Google Maps e iconos sociales

Estilos para K2

Estilos para Kunena

40 parámetros para estilizar la plantilla

Soporte RTL

USD espacio en blanco interfaz minimalista con carrusel y tres columnas, diseños específicas para k2, Menús con JavaScript. Presenta una gama de colores más restringida. En cuanto a presentación de los artículos está orientada al texto más que a imágenes.

En conclusión por estilo gráfico, relación precio-funcionalidades, flexibilidad y por sus diversos estilos en módulos y en estilos de K2 y Kunena (componentes de blogs y foros), el tema Fontaine tiene ventaja con respecto a las demás caracterizadas y se seleccionó como la plantilla del portal web CIER-SUR.

2.3 Análisis y selección de librerias para visualización de datos en la web

Existen múltiples tecnologías que permiten la visualización de datos en la web, la selección apropiada de estas está condicionada a lo que se requiera dentro de un proyecto. Para este proyecto, se utilizaron 3 tipos de visualizaciones: Gráficos de barra, gráficos de pastel y visualización geográfica. Teniendo esto en cuenta, en la tabla Tabla 11 se presenta una comparación con algunas herramientas de visualización de datos que cubren todos o algunos de los 3 tipos de gráficos requeridos.

Tabla 11. Comparación librerías visualización de datos

D3.js C3.js jQplot Google Charts

Aspectos Generales

Formato Salida Canvas, SVG, HTML5, DOM

Canvas, SVG, HTML, DOM

HTML5, Canvas HTML5, Canvas, SVG

Formato Entrada JSON, Javascript, CSV

JSON, JavaScript, CSV

JavaScript DataTable, JavaScript

Tipos de Gráficos Ilimitados 8 tipos de gráficos 25 o más tipos de gráficos

18 o más tipos de gráficos

Licencia Licencia BSD MIT MIT y GPL Versión 2

Creative Commons Attribution 3.0

Soporte

Documentos de referencia, Ejemplos de referencia y foros de discusión en github

Documentos de referencia, Ejemplos de referencia y foros de discusión en github

Grupos de discusión, documentos de referencia, ejemplos de referencia

Foros y grupos de discusión, documentos de referencia, ejemplos de referencia

Soporte Mapas SI NO NO SI

Aprendizaje Moderado Fácil Fácil Fácil

Características

Animación SI SI SI SI

Personalización

Mediante CSS, JavaScript y cualquier animación del DOM

SI SI SI

Múltiples ejes Ilimitados SI SI SI

Zoom SI SI SI SI

Tooltip SI SI SI

Legend SI SI NO SI

39


Las herramientas D3.js, C3.js y Google Charts, soportan todos los tipos de gráficos a utilizar en el proyecto, mientras que jQplot no soporta la realización de gráficos geográficos, por lo cual la descartamos como herramienta de visualización para este portal. C3.js es una sub librería de D3.js, para facilitar la realización de gráficos sencillo de barras, líneas y pastel entre otro lo que permite mitigar la curva de aprendizaje significativa en D3.js para la realización de estas visualizaciones sencillas. Teniendo esto en cuenta, a continuación se realiza una comparación de tipos de gráficos en Google Charts y C3.js como sub librería de D3.js

Tabla 12. Comparación de tipos de graficas en Google Charts, C3.js y D3.js

Tipo de Grafico

C3.js Y D3.js Google Charts

Gráfico de

Barra

Figura 22. Gráfico de barras C3.js. Tomada de

5

Figura 23. Gráfico de barras Google Charts. Tomada de

6

Gráfico de

Pastel

Figura 24. Gráfico de pastel. Tomada de7

Figura 25. Gráfico de pastel Google Charts. Tomada de

8

5 http://c3js.org/samples/chart_bar.html

6 https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart

7 http://c3js.org/samples/chart_pie.html

8 https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

http://c3js.org/samples/chart_bar.html

40


Gráfico de

Mapas

Figura 26. Mapas en D3.js. Tomada de9

Figura 27. Mapas en Google Charts. Tomada de

10

Las visualizaciones generadas por ambas librerías son atractivas gráficamente y muestran los datos correctamente. Además de esto se pueden realizar animaciones incluyendo código JavaScript. Sin embargo D3.js permite hacer gráficos en los mapas más acertados y permite escoger las proyecciones que se deseen ya que su flexibilidad está en que los documentos cargan con los datos, es decir, cada representación de un polígono en SVG por ejemplo tiene los datos que queramos asociados, mientras que en Google Charts los datos son relacionados mediante objetos de JavaScript.

Por lo anterior tomamos como librería para visualización de datos en nuestro proyecto D3.js y C3.js como sub librería para facilitar la construcción de gráficos simples. La definición y algunas características esenciales de estas librerías fueron presentadas en la sección 1.4.8.1 y 1.4.8.2 de este documento.

2.4 Analisis y selección de una herramienta para Wiki

Uno de los objetivos específicos de este trabajo de grado es el de proveer herramientas tecnológicas para la creación de una red académica virtual. Una de estas herramientas es la Wiki, en la sección 1.4.9 se definen a estas herramientas. En esta sección nos dedicaremos a realizar una comparación de varias herramientas para Wiki y según esta comparación, el análisis y la selección de una herramienta, para su posterior implantación en el portal web.

Existen múltiples herramientas para la realización de Wiki desarrollados en variados lenguajes de programación. Sin embargo a lo largo de este proyecto hemos valorado herramientas bajo la premisa de utilización de PHP que es el lenguaje que nos brinda nuestro servidor, por esto solo se evaluaran herramientas Wiki que estén construidas bajo este lenguaje. Además de esto nuestro servidor solo nos da acceso a un RDBMS el cual es MySQL, por lo tanto herramientas que requieran otro serán descartadas.

Algunos ejemplos de herramientas que cumplen con los criterios antes mencionados son: Media Wiki, Php Wiki, Pm Wiki y Blue Spice, una herramienta que extiende la funcionalidad de Media Wiki. En la Tabla 13, se presentan algunas de las características esenciales de estas herramientas.

Tabla 13. Características principales herramientas Wiki

Características PHP Wiki Pm Wiki Media Wiki BlueSpice

Creador Steve Wainstead Patrick Michaud Magnus Manske Hallo Welt

Licencia GPL GPL GPL V2 GPL V2

9 http://www.nytimes.com/interactive/2013/04/08/business/global/asia-map.html?_r=0

10 https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

41


Lenguaje de Programación

PHP PHP PHP PHP

RDBMS

Berkeley DB, Flat-file, MySQL, PostgreSQL,

Microsoft SQL Server, Oracle 8,

Firebird

MySQL, SQLite MySQL, PostgreSQL,

SQLite y otros MySQL

Publicación de Contenido

Mediante interfaz WYSIWYG o editor

de HTML Editor HTML

Interfaz WYSIWYG y Editor HTML

Interfaz WYSIWYG y Editor HTML

Servidor Apache Apache Apache Apache

Personalización Mediante Temas Mediante temas y

CSS

Personalización mediante

manipulación directa en CSS

Plantillas, CSS, Temas y HTML Personalizado

Multi-Lenguaje SI SI SI SI

Documentación NO Incompleta Extensa mediante

Wiki SI

Costo Gratuito Gratuito Gratuito Versión de pago

extendida

Una de las cuestiones más importantes para seleccionar una herramienta Wiki, es la de publicación de contenidos. Si bien en las Wikis el formato y estilo de los contenidos no es tan complejo, la inclusión de este debe ser fácil mediante interfaces WYSIWYG, que permitan a los usuarios con cualquier tipo de conocimiento en tecnologías realizar ágilmente publicaciones, teniendo esto en cuenta y sabiendo la simplicidad en la instalación, el multilenguaje, la personalización, la documentación asociada y la gratuidad de la herramienta; Consideramos que la herramienta más apropiada para su implantación en este proyecto es Media Wiki.

2.5 Analisis y selección de una herramienta de gestión de incidencias para ayuda en infraestructura

Uno de los objetivos específicos de este trabajo de grado era el de proveer un módulo para la para la gestión, coordinación y análisis de datos del componente de infraestructura del CIER-SUR. Para esto se implantó una herramienta de gestión de incidencias internas para servicios de soporte y gestión de recursos.

La construcción de este módulo nace de la necesidad en la organización de recursos humanos, infraestructura interna, efectiva logística para la realización de soporte, y de la posibilidad de realizar seguimiento a estos recursos para posterior análisis.

Existen múltiples herramientas para la gestión de incidencias ya desarrolladas y gratuitas, sin embargo, reducimos las herramientas preseleccionadas en este análisis a las que fueron desarrolladas en PHP, las que se hallaron fueron MantisBT, GLPI y FusionForge. En la Tabla se caracterizan las herramientas preseleccionadas para el posterior análisis y selección de una herramienta que cumpla con los criterios requeridos.

Tabla 14. Características principales herramientas de gestión de incidencias

Características MantisBT GLPI FusionForge

Creador Varios (Contribuidores

voluntarios) INDEPNET

Varios (Contribuidores voluntarios)

Licencia GPL GPL GPL

Lenguaje de Programación

PHP PHP PHP

RDBMS MySQL, PostgreSQL, SQL

Server, entre otros MySQL PostgreSQL

Documentación SI NO SI

42


Flujo de trabajo personalizable

SI NO SI

Interfaces de entrada de incidencias

Web, Email, SOAP, Mylym y Aplicación en Android

Web WEB, SOAP

Interfaces de notificación de

incidencias Email, RSS y Twitter Web Email, RSS

Métodos de Autenticación

Formulario, OpenID, OAuth, y LDAP.

Formulario Formulario, OpenID,

LDAP

Las herramientas MantisBT y FusionForge ofrecen múltiples características gratuitas que las hacen poderosas para su función de gestionar incidencias, mientras que GLPI no tiene documentación ni flujo de trabajo personalizable. Por lo tanto, preseleccionando MantisBT y FusionForge e identificando que FusionForge solo soporta el RDBMS PostgreSQL, se selecciona la herramienta MantisBT para su implantación en el portal web. En la sección 1.4.10 se realiza una definición de las herramientas gestión de incidencias y se abordan las características fundamentales de la herramienta MantisBT.

43


CAPÍTULO 3DESARROLLO DEL PROYECTO

3.1 Planeación y diseño

A continuación se presenta la Metodología del desarrollo, la extensión de la vista de la arquitectura de Joomla para algunas funcionalidades, los modelos de datos por modulo implementado, las historias de usuario, el plan de entregas y la arquitectura especifica de los módulos.

3.1.1 Metodología

Para el actual proyecto se utilizó la metodología Extreme Programming (XP), ya que es la que mejor se ajusta a la dinámica de desarrollo del CIER-SUR permitiendo una mejor planeación e interacción con el cliente para obtener un mejor resultado en el producto final en un corto lapso de tiempo.

La metodología ágil XP fue una herramienta vital para el desarrollo de este proyecto; en la Fase de Planeación se realizaron iteraciones constantes por parte de la dirección del equipo web con el staff del CIER-SUR para la toma constante de requerimientos según las necesidades de gestión que iban surgiendo a través del tiempo. Es así como la toma de requerimientos fue incremental a medida de que iban surgiendo necesidades, lo que resalta la importancia de una metodología ágil dentro del proyecto de desarrollo.

A partir de estos requerimientos, se hicieron pequeños planes de entrega mensuales y cronogramas de trabajo con su respectiva priorización de requerimientos, permitiendo un ambiente ágil en cuanto la frecuencia de entregas y la directa relación cliente-desarrollador.

La Figura 28 ilustra el proceso de toma de requerimientos por parte del equipo de desarrollo web al staff del CIER-SUR. El staff del CIER-SUR se compone por la Dirección, Coordinadores de los componentes de formación, contenidos, infraestructura e investigación. En el equipo de trabajo se encuentra el profesional encargado de las comunicaciones, y otros equipos que realizan otras labores en los distintos componentes. El equipo de desarrollo está conformado por un diseñador gráfico, y dos desarrolladores.

44


Figura 28. Flujo de trabajo metodología de desarrollo

Se tuvo en cuenta en la Fase de Gestión la continua comunicación por parte del equipo de desarrollo y su dirección lo que permitió un desarrollo abierto a retroalimentación por parte de todos los interesados del CIER-SUR. Además de esto, las continuas reuniones permitieron el ajuste de metas, cronogramas y re-priorización en el desarrollo de requerimientos según las necesidades así lo requerían.

La fase de diseño fue dinámica y se orientó hacia la simplicidad, esto permitió la fácil integración de las nuevas funcionalidades requeridas a el portal web base.

3.1.2 Fase de planeación

En esta sección se presentan las historias de usuario agrupadas por módulo, que se consideraron más importantes en el desarrollo de este proyecto, las demás se encuentran en el Anexo 1. Historias de Usuario. Al final de esta sección, se incluye el plan de entregas, en el que se agrupan pequeñas funcionalidades para su entrega y recibimiento de retroalimentación por parte de los usuarios. En la Figura 29 se presenta un diagrama de historias de usuario que permite tener una vista global de y su relación con los tipos de usuario identificados (administrador y usuario).

45


Figura 29. Diagrama de historias de usuario

3.1.2.1 Historias de usuario módulo de Comunidad

A continuación se presentan algunas de las historias de usuario pertenecientes al módulo de comunidad, el resto se encuentran en el Anexo 1. Historias de Usuario.

Tabla 15. Historia de Usuario Redes Sociales

Historia de Usuario

Autor Juan David Ospina Módulo Comunidad

Nombre HU Redes Sociales Id / Prioridad HU04 / 1

Dependencia CIER-SUR Iteración 2

Actor (es) Usuario Responsable Juan David Ospina

Puntos Asignados 3

Descripción

Observaciones Quiero que las actividades en todas las redes sociales pertenecientes al CIER-SUR se puedan ver en una página del portal web.

Fecha 15/01/2015

Tabla 16. Historia de Usuario Redes Sociales - Facebook

Historia de Usuario


46


Nombre HU Redes Sociales - Facebook

Id / Prioridad HU05/ 1



Puntos Asignados 3

Descripción

Observaciones Quiero que las actividades en la página de Facebook perteneciente al CIER-SUR, se puedan ver en la página de redes sociales.

Fecha 15/01/2015

Tabla 17. Historia de Usuario Redes Sociales - Google +

Historia de Usuario


Nombre HU Redes Sociales – Google + Id / Prioridad HU06/ 1



Puntos Asignados 3

Descripción

Observaciones Quiero que las actividades en la página de Google + perteneciente al CIER-SUR, se puedan ver en la página de redes sociales.

Fecha 15/01/2015

Tabla 18. Historia de Usuario Redes Sociales - Twitter

Historia de Usuario


Nombre HU Redes Sociales – Twitter Id / Prioridad HU07/ 2



Puntos Asignados 3

Descripción

Observaciones Quiero que las actividades en la página de Twitter perteneciente al CIER-SUR, se puedan ver en la página de redes sociales.

Fecha 15/01/2015

Tabla 19. Historia de Usuario Redes Sociales - YouTube

Historia de Usuario


Nombre HU Redes Sociales – YouTube

Id / Prioridad HU08/ 2



Puntos Asignados 3

Descripción

Observaciones Como Usuario quiero ver los videos que se encuentran disponibles en el canal de YouTube del CIER-SUR

Fecha 15/01/2015

Tabla 20. Historia de Usuario Foro Principal

Historia de Usuario


Nombre HU Foro principal Id / Prioridad HU12 / 4



Puntos Asignados 10

47


Descripción

Observaciones Como usuario quiero disponer de una herramienta de foros.

Fecha 15/01/2015

3.1.2.2 Historias de usuario módulo de Noticias

A continuación se presentan las historias de usuario referentes al módulo de noticias.

Tabla 21. Historia de Usuario Noticias

Historia de Usuario

Autor Juan David Ospina Módulo Noticias

Nombre HU Noticias Id / Prioridad HU13 / 1



Puntos Asignados 5

Descripción

Observaciones Como usuario quiero poder ver las noticias recientes publicadas en el portal web CIER-SUR en las categorías: Investigación, Formación, Infraestructura y Contenidos.

Fecha 15/01/2015

3.1.2.3 Historias de usuario módulo de Formación

A continuación se presentan algunas historias de usuario pertenecientes al módulo de formación, el resto de historias de usuario de este módulo se encuentran en el Anexo 1. Historias de Usuario.

Tabla 22. Historia de usuario Pre procesamiento de datos – Visualización de datos

Historia de Usuario

Autor Juan David Ospina Módulo Formación

Nombre HU Pre procesamiento de datos – Visualización de datos

Id / Prioridad HU17 / 1



Puntos Asignados 10

Descripción

Observaciones Se requiere el pre procesamiento de los datos adquiridos en la plataforma CREATIC, para su posterior visualización en las correspondientes visualizaciones de datos.

Fecha 10/02/2015

Tabla 23. Historia de Usuario Visualización de datos – Inscritos al programa

Historia de Usuario


Nombre HU Visualización de datos – Inscritos al programa




Puntos Asignados 10

Descripción

Observaciones Como usuario del portal web CIER-SUR, quiero ver una visualización de datos referente al número de docentes inscritos en el programa de formación del CIER-SUR

Fecha 10/02/2015

48


Tabla 24. Historia de Usuario Visualización de datos – Leader Teachers Consolidado certificación Coreana y certificación por fases con respecto a la meta de formación.

Historia de Usuario


Nombre HU Visualización de datos – Leader Teachers Consolidado certificación Coreana y certificación por fases con respecto a la meta de formación.




Puntos Asignados 10

Descripción

Observaciones Como usuario del portal web CIER-SUR, quiero ver una visualización de datos correspondiente al número de certificaciones alcanzadas por los Leader Teachers inscritos al programa de formación del CIER-SUR, discriminadas por certificación Coreana y Certificación por fases con respecto a la meta de formación sobre este aspecto (certificar 3000 docentes).

Fecha 10/02/2015

Tabla 25. Historia de Usuario Visualización de datos – Consolidado tipos de certificación alcanzada.

Historia de Usuario


Nombre HU Visualización de datos – Consolidado tipos de certificación alcanzada.




Puntos Asignados 10

Descripción

Observaciones Como usuario del portal web CIER-SUR, quiero ver una visualización de datos correspondiente al número de certificaciones alcanzadas por los Leader Teachers inscritos al programa de formación del CIER-SUR, discriminadas por tipos de certificación alcanzada Coreana y por fase. (Excelencia, Completitud, Participación, Fase Virtual I, Fase Presencial, Fase virtual 2).

Fecha 10/02/2015

Tabla 26. Historia de Usuario Visualización de datos – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

Historia de Usuario


Nombre HU Visualización de datos – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.




Puntos Asignados 10

Descripción

Observaciones Como usuario del portal web CIER-SUR, quiero ver una visualización de datos correspondiente al número de certificaciones alcanzadas por los Leader Teachers inscritos al programa de formación del CIER-SUR, discriminada por secretaria de educación municipal y departamental.

Fecha 10/02/2015

49


Tabla 27. Historia de Usuario Visualización de datos geográfica – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

Historia de Usuario


Nombre HU Visualización de datos geográfica – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.




Puntos Asignados 10

Descripción

Observaciones Como usuario del portal web CIER-SUR, quiero ver una visualización de datos geográfica correspondiente al número de certificaciones alcanzadas por los Leader Teachers inscritos al programa de formación del CIER-SUR, agrupada por departamentos y secretarias de educación municipal y departamental.

Fecha 10/02/2015

3.1.2.4 Historias de usuario módulo de contenido

A continuación se presentan las historias de usuario referentes al módulo de contenidos del portal web del CIER-SUR. En esta sección se toman las historias de usuario enmarcadas en la creación de la visualización y reseñas de los objetos de aprendizaje del CIER-SUR, no se tomaron las historias de usuario referentes a la presentación de contenidos estáticos dentro de este módulo en el portal web.

Tabla 28 Historia de Usuario Presentación Objetos de aprendizaje

Historia de Usuario

Autor Juan David Ospina Módulo Contenido

Nombre HU Presentación Objetos de aprendizaje




Puntos Asignados 10

Descripción

Observaciones Como usuario quiero ver todos los objetos de aprendizaje producidos por el CIER-SUR, que ya hayan sido subidos al servidor

Fecha 10/02/2015

Tabla 29 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar

Historia de Usuario


Nombre HU Filtrar objetos de aprendizaje por grado escolar




Puntos Asignados 5

Descripción

Observaciones Como usuario quiero poder filtrar los objetos de aprendizaje por grado escolar

Fecha 10/02/2015

Tabla 30 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar y área de énfasis

Historia de Usuario


Nombre HU Filtrar objetos de Id / Prioridad HU31 / 1

50


aprendizaje por grado escolar y área de énfasis



Puntos Asignados 5

Descripción

Observaciones Como usuario quiero poder filtrar los objetos de aprendizaje por grado escolar y por área de énfasis

Fecha 10/02/2015

Tabla 31 Historia de Usuario Filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica

Historia de Usuario


Nombre HU Filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica




Puntos Asignados 4

Descripción

Observaciones Como usuario quiero poder filtrar los objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica.

Fecha 10/02/2015

Tabla 32 Historia de Usuario Sistema de reseñas – Promedio general

Historia de Usuario


Nombre HU Sistema de reseñas – Promedio general




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero poder ver dentro de cada objeto de aprendizaje, el promedio general de valoración que ha obtenido el objeto de aprendizaje, gráficamente mediante estrellas y numéricamente.

Fecha 10/02/2015

Tabla 33 Historia de Usuario Sistema de reseñas – promedio valoración de utilidad

Historia de Usuario


Nombre HU Sistema de reseñas – promedio valoración de utilidad




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones de utilidad que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

Tabla 34 Historia de Usuario Sistema de reseñas – Promedio valoración de contenido

Historia de Usuario

51



Nombre HU Sistema de reseñas – Promedio valoración de contenido




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones de contenido que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

Tabla 35 Historia de Usuario Sistema de reseñas – Promedio valoración de navegación

Historia de Usuario


Nombre HU Sistema de reseñas – Promedio valoración de navegación




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones de navegación que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

Tabla 36 Historia de Usuario Sistema de reseñas – Promedio valoración de apariencia

Historia de Usuario


Nombre HU Sistema de reseñas – Promedio valoración de apariencia




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones de apariencia que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

Tabla 37 Historia de Usuario Sistema de reseñas – Promedio valoración de material del estudiante

Historia de Usuario


Nombre HU Sistema de reseñas – Promedio valoración de material del estudiante




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones del material del estudiante que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

52


Tabla 38 Historia de Usuario Sistema de reseñas – Promedio valoración de material del docente

Historia de Usuario


Nombre HU Sistema de reseñas – Promedio valoración de material del docente




Puntos Asignados 3

Descripción

Observaciones Como usuario quiero ver el promedio de las valoraciones del material del docente que han realizado todos los usuarios en cada objeto de aprendizaje específicamente.

Fecha 10/02/2015

Tabla 39 Historia de Usuario Sistema de reseñas – Reseñas realizadas

Historia de Usuario


Nombre HU Sistema de reseñas – Reseñas realizadas




Puntos Asignados 10

Descripción

Observaciones Como usuario quiero ver todas las reseñas realizadas por otros usuarios en un objeto de aprendizaje.

Fecha 10/02/2015

Tabla 40. Historia de Usuario Sistema de reseñas – Ingreso por Facebook

Historia de Usuario


Nombre HU Sistema de reseñas – Ingreso por Facebook




Puntos Asignados 15

Descripción

Observaciones Como usuario quiero ingresar mediante mi cuenta de Facebook, al sistema de reseñas de objetos de aprendizaje.

Fecha 10/02/2015

Tabla 41. Historia de Usuario Sistema de reseñas – Ingreso por Google

Historia de Usuario


Nombre HU Sistema de reseñas – Ingreso por Google




Puntos Asignados 15

Descripción

Observaciones Como usuario quiero ingresar mediante mi cuenta de Google, al sistema de reseñas de objetos de aprendizaje.

Fecha 10/02/2015

53


Tabla 42. Historia de Usuario Sistema de reseñas – Registro e ingreso

Historia de Usuario


Nombre HU Sistema de reseñas – Registro e ingreso




Puntos Asignados 10

Descripción

Observaciones Como usuario quiero poder registrarme y luego mediante las credenciales proporcionadas, ingresar al sistema de reseñas de objetos de aprendizaje

Fecha 10/02/2015

Tabla 43. Historia de Usuario Sistema de reseñas – Crear reseña

Historia de Usuario


Nombre HU Sistema de reseñas – Crear reseña




Puntos Asignados 15

Descripción

Observaciones Como usuario quiero crear una reseña de un objeto de aprendizaje especifico una vez entrado en el sistema de reseñas, mediante el ingreso de valoraciones de contenido, utilidad, navegación, apariencia, material del estudiante y material del docente, comentario y tipo de usuario. Los tipos de usuario son Profesor, Estudiante, Directivo y otros. El número máximo de caracteres permitidos para los comentarios es de 600 caracteres.

Fecha 10/02/2015

Tabla 44. Historia de Usuario Sistema de reseñas – Editar reseña

Historia de Usuario


Nombre HU Sistema de reseñas – Editar reseña




Puntos Asignados 15

Descripción

Observaciones Como usuario quiero editar una reseña realizada a un objeto de aprendizaje, mediante el ingreso al sistema de reseñas en donde se muestran las valoraciones, tipos de usuario y comentarios que yo ya había realizado, permitiéndome editarlas y enviando el formulario de nuevo.

Fecha 10/02/2015

3.1.2.5 Plan de entregas

A continuación se presenta la versión final del plan de entregas, desarrollado conforme iban surgiendo y cambiando requerimientos a través del ciclo de vida de este trabajo de grado.

Tabla 45. Plan de entregas

Iteración id Puntos de Historia Total Puntos Fecha de inicio Fecha de fin

1

HU00 5

21 09/01/2015 28/02/2015 HU01 10

HU02 3

54


HU03 3

2

HU04 3

55 28/01/2015 28/02/2015

HU05 3

HU06 3

HU07 3

HU08 3

HU09 5

HU10 10

HU11 15

HU12 10

3 HU13 5 5 01/03/2015 10/03/2015

4

HU14 20

120 11/03/2015 15/07/2015

HU15 20

HU16 20

HU17 10

HU18 10

HU19 10

HU20 10

HU21 10

HU22 10

5

HU23 10

40 17/04/2015 15/05/2015 HU24 10

HU25 10

HU26 10

6 HU27 15

35 18/05/2015 01/06/2015 HU28 20

7

HU29 10

24 03/07/2015 03/24/2015 HU30 5

HU31 5

HU32 4

8

HU33 3

21 05/08/2015 06/09/2015

HU34 3

HU35 3

HU36 3

HU37 3

HU38 3

HU39 3

9

HU40 10

80 12/09/2015 28/12/2015 HU41 15

HU42 15

HU43 10

55


HU44 15

HU45 15

3.1.3 Fase de diseño

El portal web CIER-SUR se desarrolló en torno a 7 módulos principales los cuales a su vez están relacionados a sus 4 componentes principales más la red académica virtual o comunidad, Noticias y divulgación. Cada módulo está compuesto por todas o algunas de las siguientes categorías:

Implantación de herramientas de apoyo: Implantación de herramientas externas para dar apoyo en procesos a ciertos módulos. Ej. Wikis y Mantis BT.

Integración de extensiones de Joomla: Extensiones de Joomla que brindan alguna funcionalidad específica a cierto modulo. Ej. Kunena, Integración de redes sociales.

Implementación de módulos propios del portal: Funcionalidades implementadas desde cero, específicas para el portal web CIER-SUR. Ej. Visualización de datos de formación, Objetos de Aprendizaje.

Contenido dinámico generado por Joomla. Presentación de contenidos generados dinámicamente en HTML. Ej. Divulgación y Noticias.

En la Figura 30 se presenta el mapa de navegación por módulos del portal web CIER-SUR.

En donde se utiliza la integración de extensiones de Joomla, se intentará extender la vista de la arquitectura de esta herramienta, para comprender que módulos son llamados en el proceso. En la utilización de herramientas de apoyo, se intentará describir la arquitectura que tienen estas herramientas externas. Por ultimo en los módulos específicos implementados, se explicará la arquitectura propia de estos módulos.

Figura 30. Mapa de navegación portal web CIER-SUR

Para terminar en la Figura 31 se extiende la arquitectura de Joomla para identificar los módulos, plugins y componentes que se despliegan en todos los módulos mencionados anteriormente, a excepción de los módulos que se implantaron como herramientas de apoyo. Cabe mencionar que Joomla permite la inclusión de módulos, componentes y plugins en una, varias o todas las páginas de la aplicación, en este caso son incluidas en todas las páginas.

56


Figura 31. Visualización extendida de la arquitectura de Joomla. Módulos, Componentes y Plugins generales.

Como se ilustra en la Figura 31, los componentes básicos cargados por el framework de Joomla en el caso portal web CIER-SUR son: com_wrapper, el cual es el componente encargado de generar y anexar el contenido de una página y com_content, el cual es el componente encargado de realizar la gestión de distintos contenidos (imágenes, artículos y otros).

En la subcapa de módulos, los cargados genéricamente son: bottom info, el cual representa un módulo de HTML personalizado y es el encargado de mostrar la información en el pie de página de todas las páginas en Joomla. El bottom menú es un módulo de menú, encargado de mostrar la navegación de cada módulo en particular. El módulo buscar, es un módulo de búsqueda inteligente de cualquier contenido, en todas las páginas. El módulo header-right, es un módulo de HTML personalizado utilizado para desplegar la navegación de las redes sociales en todo el documento. El modulo logo-uv es un módulo de HTML personalizado para ubicar el logo de la Universidad del Valle dentro de la cabecera de las páginas. El módulo menú, es un módulo de tipo menú y despliega el menú principal de todo el portal. El módulo news contact, es un módulo de HTML personalizado para mostrar la información e invitación a los usuarios de nuestras redes sociales. Por último, el módulo mobile menú, es quien permite el despliegue del menú de nuestro portal en dispositivos moviles, por lo general está oculto en resoluciones grandes.

Los plugins son pequeños scripts, que se ejecutan cuando el usuario realiza una interacción con un módulo u otro elemento de la interfaz gráfica. Los utilizados por tipo son del sistema, de autenticación, de búsqueda y de contenido.

3.1.3.1 Módulo de Comunidad

El módulo de comunidad se compone por redes sociales, Foros, Wiki, central de blogs y RIE: Videoconferencia. En redes sociales se integraron extensiones de Joomla para la comunicación del portal con servicios web de redes sociales tales como Facebook, Google +, Twitter y YouTube. Extendemos la arquitectura de Joomla identificando los módulos, componentes y plugins necesarios para la visualización de esta página en la Figura 32.

57


Figura 32. Visualización extendida de la arquitectura de Joomla. Sub modólo Redes Sociales.

En el sub módulo de Foros, se integró el componente de Joomla Kunena. Este componente permite desplegar un módulo de foros en este caso para todos los foros de la página además de los correspondientes módulos para la generación y presentación del contenido. Esto se visualiza en la Figura 33.

Figura 33.Visualización extendida de la arquitectura de Joomla. Sub módulo Foros.

En el sub módulo de Wiki se implantó la herramienta MediaWiki. La arquitectura de MediaWiki está basada en 4 capas principales: La capa de usuario, de red, de lógica y de datos. La capa de datos está compuesta por la base de datos cualquiera de varios RDBMS, el File System el cual es el encargado de almacenamiento de medios y el sistema de cache. La capa lógica de MediaWiki, está construido en PHP y en scripts realizados por el equipo de MediaWiki. La página de red incluye el servidor Apache y Squid, el cual es un servidor proxy que también puede ser utilizado como “acelerador” del servidor web. Por ultimo esta la capa de usuario, en donde los usuarios realizan interacciones con la Wiki mediante su navegador. La arquitectura de MediaWiki se presenta en la Figura 34

58


Figura 34. Arquitectura MediaWiki.

En el sub módulo de Central de blogs, se utilizó un complemento de Joomla llamado Simple RSS, el cual permite la sindicación de contenidos mediante la inserción manual de direcciones RSS. La visualización extendida de la arquitectura de Joomla, con los componentes necesarios para la presentación de este sub módulo se presenta en la Figura 35.

Figura 35. Visualización extendida de la arquitectura de Joomla. Sub módulo central de blogs

3.1.3.2 Módulo de Noticias

En el módulo de noticias se incluye el módulo de artículos de Joomla, este módulo es capaz de desplegar artículos de todas las categorías o de algunas categorías. Por organización de la información siempre se manejaron 4 categorías para las noticias: Formación, Contenidos, Investigación e Infraestructura, por lo tanto los artículos a mostrar por este módulo son los pertenecientes a estas categorías. En la Figura 36 se extiende la visualización de la arquitectura para presentar los componentes de Joomla necesarios para la presentación de este módulo.

59


Figura 36. Visualización extendida de la arquitectura de Joomla. Módulo Noticias

3.1.3.3 Módulo de Formación

En el módulo de formación, además de la presentación de contenidos, se incluye un sub modulo para la presentación de visualizaciones de datos del componente de formación del CIER-SUR. Estas visualizaciones de datos son realizadas con base a los reportes suministrados por la plataforma de formación virtual CREATIC del Ministerio de Educación Nacional. Debido a que por parte de esta no se compartieron vistas o accesos a las bases de datos, el proceso de extracción de datos se realizaba de forma manual por algunos monitores del CIER-SUR, sin embargo y al tener que inspeccionar uno a uno a los más de 5000 docentes Leader Teachers que realizaban su formación, este proceso era ineficiente por la complejidad que esto implicaba. Por lo tanto desde la dirección del CIER-SUR, se encomendó la búsqueda de una solución que permitiera la extracción, pre procesado y visualización de esta información de manera eficiente y coherente, intentando obtener los datos más fidedignos posibles. Cabe resaltar que la importancia en la adquisición de esta información radica en la necesidad de reflejar avances en el cumplimiento de las metas que tenía el componente de formación.

Como se mencionó anteriormente, dentro del módulo de visualización de datos se incluye la extracción de los datos suministrados por la plataforma CREATIC, para este proceso se diseñó un algoritmo semi-automatizado, el cual, mediante herramientas externas ayudó a la realización del proceso de extracción y pre procesamiento de esta información, en la Figura 37 se presenta mediante un diagrama este proceso que llamaremos de extracción, agrupamiento, pre procesamiento y volcado de datos.

Mediante la herramienta Selenium, se automatiza la descarga de los archivos necesarios para la actualización de datos (294 archivos mediante la navegación en las mismas páginas de la plataforma CREATIC). Con la herramienta TamperMonkey, se realiza una inspección mediante JavaScript de las actividades realizadas por cada Leader Teachers en la plataforma, tomando esta información directamente desde la interfaz gráfica de reportes de CREATIC y almacenándola en un archivo CSV. Luego de esto se une la información descargada por Selenium, obteniendo así tres archivos base para la realización de la actualización de datos: Actividades.xls, Asistencia.xls y Calificaciones.xls. Luego mediante la herramienta Excel, se realiza todo el pre procesamiento de los datos, correlacionando los archivos de actividades, asistencia y calificaciones utilizando scripts desarrollados para este propósito. A partir de este archivo generado se calculan todas las certificaciones mediante macros y por último, debido a que la plataforma CREATIC arroja algunos registros de profesores duplicados, se filtran y se eliminan para mantener la coherencia en los datos. Cabe aclarar que existen datos adicionales necesarios propios de los Leader Teachers para la realización de visualizaciones de datos tales como: fecha de nacimiento, código DANE de la sede educativa donde labora, etc. La solución a esto fue la inclusión de un algoritmo en Selenium que tomaba los correos electrónicos de los maestros a los cuales les faltaba esta información y los buscaba en una aplicación que fue dada al CIER-SUR para la búsqueda de registros en el portal Colombia Aprende. Mediante la tabla de resultados de la búsqueda

60


(tabla realizada en HTML) y mediante JavaScript en Selenium, se tomaban los campos adicionales que se necesitasen. Esta búsqueda fue incremental ya que los nuevos registros aparecían semana a semana y se almacenaba una información base de las personas a las que ya se les había realizado el proceso de búsqueda. El proceso de extracción de datos en la descarga de archivos de calificaciones y asistencia, tiene un tiempo de búsqueda y descarga de aproximadamente dos horas. El proceso de extracción de datos realiza una búsqueda exhaustiva, Leader Teacher por Leader Teacher, por lo cual se demora en promedio 5 horas. El proceso de unión y pre procesamiento de datos por lo general toma 2 horas, por lo cual todo el proceso descrito tarda un día de trabajo.

Figura 37. Extracción, agrupamiento, pre procesamiento y volcado de datos

Una vez realizado el proceso extracción, agrupamiento, pre procesamiento y volcado de datos, los datos resultantes se almacenan en la base de datos del portal web CIER-SUR. El esquema de esta base de datos es presentado en la Figura 38.

61


Figura 38. Modelo de datos base de datos plataforma CIER-SUR. Visualización de datos

En la Figura 39, se muestra como fue construido el módulo de visualización de datos de formación, en él se puede apreciar que se utilizó el patrón Modelo, Vista, Controlador. Los paquetes pdfReport y CSVReport, fueron utilizados para generar reportes de soporte de cada una de las visualizaciones de datos desplegadas por el módulo, además el paquete GeoData contiene los controladores necesarios para el despliegue de la visualización geográfica.

Figura 39. Diagrama de paquetes visualización de datos

3.1.3.4 Módulo de investigación

En el módulo de investigación, además de contenido dinámico generado por Joomla, se incluye un sistema de foros llamado Geeks & Gamers. Este módulo fue realizado mediante la integración de un subforo en el componente Kunena y se despliega mediante la parametrización del componente. En la

62


Figura 40 se extiende la visualización de la arquitectura de Joomla para presentar los componentes necesarios en la presentación de este módulo.

Figura 40. Visualización extendida de la arquitectura de Joomla sub módulo semillero

3.1.3.5 Módulo de Contenido

En el módulo de contenido, además de la presentación de contenidos estáticos, se desarrolló un módulo para el despliegue, visualización y reseñas, de objetos de aprendizaje producidos por el CIER-SUR. En la Figura 41, se presenta el diagrama de paquetes de este módulo en donde se puede observar el patrón MVC.

Figura 41. Diagrama de paquetes. Modulo Objetos de Aprendizaje

Además de esto, se utilizaron tecnologías como Isotope para el filtrado de objetos de aprendizaje, UIKit como framework principal de estructura de la interfaz gráfica y las API’s de Facebook y Google+ para realizar el registro e ingreso de usuarios dinámicamente, todo esto del lado del cliente para hacer invisibles las transacciones asociadas al usuario. Estas tecnologías se ilustran mejor en la Figura 42.

63


Figura 42. Diagrama de tecnologías por capa. Modulo Objetos de Aprendizaje

Para finalizar, el esquema de datos para el almacenamiento de usuarios, reseñas y objetos de aprendizaje se presenta en la Figura 43.

Figura 43. Modelo de datos. Modulo objetos de aprendizaje

3.1.3.6 Módulo Infraestructura

En el módulo de infraestructura se realizó una muestra de los equipos de tecnológicos físicos que tiene el CIER-Sur, Adicional a esto, se implantó una herramienta de apoyo para incidencias de

64


infraestructura llamada MantisBT, en la sección 1.4.10 de este documento se realiza una definición de lo que son las herramientas de gestión de incidencias, además, en la sección 1.4.10.1 se especifican las características básicas de la herramienta MantisBT para la gestión de incidencias.

Para definición del proceso de registro de incidencias, MantisBT utiliza flujos de trabajo los cuales pueden ser definidos específicamente para cada proyecto, en estos flujos de trabajo toman partida ciertos roles que pueden ser personalizados según las necesidades. En la Figura 44 se ilustra un ejemplo típico de flujo de trabajo que incluye usuarios, reportadores de incidencias, gerentes y desarrolladores, y como Mantis actúa entre ellos en la gestión de incidencias.

Figura 44. Flujo de trabajo, MantisBT

65


CAPÍTULO 4PORTAL WEB CIER-SUR Y PRUEBAS

En este capítulo se presentan algunas pruebas funcionales realizadas en las funcionalidades realizadas específicamente para este portal.

Para la planeación y ejecución de pruebas se hace necesario identificar el escenario de las pruebas, por lo cual la ficha técnica de este se presenta continuación.

Tabla 46. Ficha técnica escenario de pruebas.

ID Escenario ES-01

Organización CIER-SUR

Producto Portal web CIER-SUR

Versión 1.0

Fecha Diciembre 10 de 2015

Tipo de Aplicación Web

Maquina Cliente

Software

Características Software Versión

Sistema Operativo Windows 8.1

Navegador Chrome 47.0.2526.106

Observación

Hardware

Características Capacidad

Procesador Intel Core i5-3470 Quad Core, 6MB Cache, 3.6GHz

Disco Duro 7.2K RPM, SATA 1 TB

Memoria RAM SDRAM 6 GB

Resolución Monitor 23 pulgadas

Conexión a internet 5 MBps

Teclado

Mouse

Maquina Servidor

Software

Características Software Versión

Sistema Operativo CentOS 6.3

Base de Datos MySQL 5.1.67

Librerías php5-curl, php5-gd, php5-mcrypt

Lenguaje de Programación PHP

Observación

Hardware

Procesador Intel Xeon ® 2,27 GHz

Disco Duro 7.2K RPM, SATA 296 GB

Memoria RAM DDR3 5,7 GB

Conexión Internet 10 MBps

Datos

El administrador debe estar registrado y activo ( tiene que poseer una clave para poder acceder al sistema)

Observaciones

Para acceder al módulo de administración se accede desde el cliente a través del navegador a la URL http://ciersur.univalle.edu.co/administrator y para acceder a la plataforma web CIER-SUR http://ciersur.univalle.edu.co

A continuación se presentas algunas de las pruebas realizadas, destacando las funcionalidades creadas específicamente para el portal web, las demás pruebas realizadas se presentan en el Anexo

66


2 Pruebas Portal Web en donde adicionalmente se presentan vistas en distintas resoluciones de estas para evidenciar el diseño responsivo presente en el portal.

Tabla 47. Resumen prueba visualización Inscritos al programa

Resumen Prueba

Nombre de la prueba Prueba visualización Inscritos al programa

ID HU18

Historia de usuario Visualización de datos – Inscritos al programa

Iteración 4

¿Qué hace esta prueba? Verifica que la visualización de datos Inscritos al programa se muestre de forma correcta.

Procesos para realizar la prueba

Comando / URL http://ciersur.univalle.edu.co/index.php/formacion/creatic/analiticas

Acción Avance en meta de inscripción

Datos de entrada Selección: Avance en meta de inscripción

Datos de Salida esperados

Número de inscritos: 5269 Meta de inscritos: 3000 Tipo Gráfico: De barras

Figura 45. Salida prueba HU18

Tabla 48. Resumen prueba visualización de datos avance en meta de formación

Resumen Prueba

Nombre de la prueba Prueba Visualización certificación coreana y por fases – meta de formación

ID HU19

Historia de usuario Visualización de datos – Leader Teachers Consolidado certificación Coreana y certificación por fases con respecto a la meta de formación.

Iteración 4

¿Qué hace esta prueba? Verifica que la visualización de datos por certificaciones de fases y coreana con respecto a la meta de formación se muestre de forma correcta.



Acción Avance en Meta de Formación

Datos de entrada Selección: Avance en Meta de Formación

Datos de salida Numero certificados coreanos: 1287

http://ciersur.univalle.edu.co/index.php/formacion/creatic/analiticas


67


esperados Numero certificados por fase: 1724 Meta de formación: 3000 Tipo Gráfico: Pastel

Tabla 49. Salida prueba HU19


Tabla 50. Resumen prueba visualización de datos avance en meta de formación con detalle de certificaciones

Resumen Prueba

Nombre de la prueba Prueba Visualización certificación por tipos de certificación alcanzada con respecto a la meta de formación

ID HU20

Historia de usuario Visualización de datos – Consolidado tipos de certificación alcanzada.

Iteración 4

¿Qué hace esta prueba? Verifica que la visualización de datos certificación por tipos de certificación alcanzada con respecto a la meta de formación se muestre de forma correcta.



Acción Avance en Meta de Formación con Detalle de Certificaciones

Datos de entrada Seleccion: Avance en Meta de Formación con Detalle de Certificaciones

Datos de salida esperados

Numero certificados excelencia: 167 Numero certificados completitud: 567 Numero certificados participación: 553 Numero certificados fase virtual 1: 1048 Numero certificados fase presencial: 580 Numero certificados fase virtual 2: 96 Meta de formación: 3000 Tipo Gráfico: Pastel

68



Tabla 51. Resumen prueba visualización de datos docentes certificados discriminado por secretaria de educación

Resumen Prueba

Nombre de la prueba Prueba Visualización consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

ID HU21

Historia de usuario Visualización de datos – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

Iteración 4

¿Qué hace esta prueba? Verifica que la visualización de datos consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental se muestre correctamente.



Acción Docentes Certificados Discriminado por Secretaría de Educación

Datos de entrada Selección: Avance en Meta de Formación con Detalle de Certificaciones


Numero certificados excelencia por secretaria de educación Numero certificados completitud por secretaria de educación Numero certificados participación por secretaria de educación Numero certificados fase virtual 1 por secretaria de educación Numero certificados fase presencial por secretaria de educación Numero certificados fase virtual 2 por secretaria de educación Tipo Gráfico: Barras


69



Tabla 52. Resumen prueba visualización de datos geográfica

Resumen Prueba

Nombre de la prueba Prueba Visualización de datos geográfica consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

ID HU22

Historia de usuario Visualización de datos geográfica – Consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental.

Iteración 4

¿Qué hace esta prueba? Verifica que la visualización de datos geográfica, consolidado tipos de certificación alcanzada por secretaria de educación municipal y departamental se muestre correctamente.



Acción Visualización Geográfica

Datos de entrada Seleccion: Visualización Geográfica

70


Figura 49. Salida prueba HU22 - 1

Tabla 53. Resumen prueba presentación de objetos de aprendizaje y estadísticas generales de reseña

Resumen Prueba

Nombre de la prueba Prueba presentación objetos de aprendizaje y estadísticas generales de reseñas

ID PR-00

Historias de usuario HU29, HU33, HU34, HU35, HU36, HU37, HU38, HU39

Iteración 7 y 8

¿Qué hace esta prueba? Verifica que los objetos de aprendizaje y los datos asociados con las reseñas realizadas se muestren correctamente.


Comando / URL http://ciersur.univalle.edu.co/index.php/media-main/results-content

Acción

Datos de entrada ID Objeto de aprendizaje


Promedio general de reseñas Promedio valoración de utilidad Promedio valoración de contenido Promedio valoración de navegación Promedio valoración de apariencia Promedio valoración de material del estudiante Promedio valoración de material del docente

http://ciersur.univalle.edu.co/index.php/media-main/results-content

71


Figura 50. Salida prueba PR-00

Tabla 54. Resumen prueba filtrar objetos de aprendizaje por grado escolar

Resumen Prueba

Nombre de la prueba Prueba filtrar objetos de aprendizaje por grado escolar

ID HU30

Historias de usuario Filtrar objetos de aprendizaje por grado escolar

Iteración 7

¿Qué hace esta prueba? Verifica que la filtración de objetos de aprendizaje por grado escolar se realiza de manera correcta



Acción Objetos de Aprendizaje -> Grado

Datos de entrada Grado Escolar

72


Figura 51. Salida Prueba HU30

Tabla 55. Resumen prueba filtrar objetos de aprendizaje por grado escolar y área de énfasis.

Resumen Prueba

Nombre de la prueba Filtrar objetos de aprendizaje por grado escolar y área de énfasis

ID HU31

Historias de usuario Filtrar objetos de aprendizaje por grado escolar y área de énfasis

Iteración 7

¿Qué hace esta prueba? Verifica que la filtración de objetos de aprendizaje por grado escolar y área de énfasis se realiza de manera correcta



Acción Objetos de Aprendizaje -> Grado -> Área

Datos de entrada Grado Escolar Área de énfasis


73



Tabla 56. Resumen prueba filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica.

Resumen Prueba

Nombre de la prueba Prueba filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica.

ID HU32

Historias de usuario Filtrar objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica

Iteración 7

¿Qué hace esta prueba? Verifica que la filtración de objetos de aprendizaje por grado escolar, área de énfasis y unidad didáctica se realiza de manera correcta



Acción Objetos de Aprendizaje -> Grado -> Área ->Unidad

Datos de entrada Grado Escolar Área de énfasis Unidad didáctica


74



Tabla 57. Prueba mostrar reseñas realizadas

Resumen Prueba

Nombre de la prueba Prueba sistema de reseñas – Mostrar reseñas realizadas

ID HU40

Historias de usuario Sistema de reseñas – Reseñas realizadas

Iteración 9

¿Qué hace esta prueba? Verifica que al desplegar el sistema de reseñas, se muestren las reseñas previamente realizadas por otros usuarios.



Acción Objetos de Aprendizaje -> LO -> sistema de reseñas

Datos de entrada ID objeto de aprendizaje


75


Tabla 58. Resumen prueba ingreso Facebook

Resumen Prueba

Nombre de la prueba Prueba sistema de reseñas – Ingreso Facebook

ID HU41

Historias de usuario Sistema de reseñas – Ingreso Facebook

Iteración 9

¿Qué hace esta prueba? Verifica el correcto funcionamiento del ingreso al sistema de reseñas mediante Facebook



Acción Objetos de Aprendizaje -> LO -> sistema de reseñas -> Facebook

Datos de entrada ID objeto de aprendizaje Usuario Facebook Password Facebook

Figura 55. Salida Prueba HU41 - 1



76


Tabla 59. Resumen prueba Ingreso Google

Resumen Prueba

Nombre de la prueba Prueba sistema de reseñas – Ingreso Google

ID HU42

Historias de usuario Sistema de reseñas – Ingreso Google

Iteración 9

¿Qué hace esta prueba? Verifica el correcto funcionamiento del ingreso al sistema de reseñas mediante Google



Acción Objetos de Aprendizaje -> LO -> sistema de reseñas -> Google

Datos de entrada ID objeto de aprendizaje Usuario Google Contraseña Google



Tabla 60. Resumen prueba registro e ingreso

Resumen Prueba

Nombre de la prueba Prueba sistema de reseñas – Registro e ingreso

ID HU43

77


Historias de usuario Sistema de reseñas – Registro e ingreso

Iteración 9

¿Qué hace esta prueba? Verifica el correcto funcionamiento del registro de nuevos usuarios al sistema y el ingreso mediante este registro



Acción 1. Objetos de Aprendizaje -> LO -> sistema de reseñas -> Registrarme -> Registrarse

2. Objetos de Aprendizaje -> LO -> sistema de reseñas -> Registrarme -> Ingresar

Datos de entrada ID objeto de aprendizaje 1. Nombre completo

Correo Electrónico Contraseña Repetir Contraseña

2. Correo Electrónico Contraseña



78


Figura 61. Salida Prueba HU43 – 3

Tabla 61. Resumen prueba crear reseña

Resumen Prueba

Nombre de la prueba Prueba crear reseña

ID HU44

Historias de usuario Sistema de reseñas – Crear reseña

Iteración 9

¿Qué hace esta prueba? Verifica el correcto funcionamiento de la creación de una reseña por un usuario registrado e ingresado al sistema



Acción Objetos de Aprendizaje -> LO -> sistema de reseñas -> Registrarme -> enviar reseña

Datos de entrada ID objeto de aprendizaje ID Usuario Rating Utilidad Rating Contenido Rating Navegación Rating Apariencia Rating Material Estudiante Rating Material Docente Comentario Tipo de usuario

79



Tabla 62. Resumen prueba editar reseña

Resumen Prueba

Nombre de la prueba Prueba editar reseña

ID HU45

Historias de usuario Sistema de reseñas – Editar reseña

Iteración 9

¿Qué hace esta prueba? Verifica el correcto funcionamiento de la edición de una reseña creada previamente por un usuario.



Acción Objetos de Aprendizaje -> LO -> sistema de reseñas -> Registrarme -> enviar reseña

Datos de entrada Reseña previamente creada Rating Utilidad Rating Contenido Rating Navegación Rating Apariencia Rating Material Estudiante Rating Material Docente Comentario Tipo de usuario

80



Por ultimo en esta sección se realiza una lista de chequeo con las heurísticas seleccionadas en la

sección 1.4.7.1 de este documento.

Tabla 63. Lista de chequeo. Heurísticas de usabilidad

Heurística Chequeo Observaciones

¿Son visibles los elementos principales en la navegación del portal?

SI Menús, breadcrumbs

¿El portal provee información acerca de la ubicación del usuario en la navegación?

SI Títulos grandes que referencian la sección accedida, Breadcrumbs

¿El portal provee retroalimentación en las acciones realizadas por el usuario?

SI Mensajes de error, redirección en ingreso

¿El portal está diseñado dentro de los lineamientos estándar para portales web? Ej. HTML, CSS

JavaScript SI

Realizado en frameworks de CSS y JavaScript

¿El portal es consistente en cuanto a identidad visual en todas las páginas?

NO Todas excepto Wiki y Mantis BT

¿Cuándo se emplean simbologías dentro del portal, estas son mediante iconos estándar?

NO No es posible comprobar los símbolos estándar para ciertas representaciones

realizadas en el portal web.

¿El portal provee secciones de ayuda, documentación y soporte?

NO No existen documentaciones de ayuda ni

de navegación en el portal

¿El portal permite el reconocimiento de todos los módulos mediante interfaces intuitivas sin

necesidad de acordarse de la navegación hacia estos de memoria?

SI Nombres genéricos para todos los

módulos en toda la página.

¿El portal permite la interactividad entre los usuarios?

SI Foros, Wiki, Soporte de gestión de

incidencias.

¿Las características en el portal como longitud y espaciado de textos, gráficos e imágenes ayudan

al usuario a la hora de entender esta misma información?

SI Utilización de un framework responsivo

que permite múltiples diseños UiKit.

¿Las características de la navegación en el portal como enlaces, jerarquías, uso de convenciones

estándares web, y consistencia ayudan al usuario a encontrar la información fácilmente?

SI

¿Es correcta la visualización del portal en SI Evidencia en Anexo 2.

81


diferentes tamaños de pantallas?

¿El rendimiento del portal ayuda la habilidad de los usuarios para encontrar información?

NO Existen tiempos de carga de hasta 1

minuto.

¿El portal motiva a los usuarios a explorar el sitio? SI Interfaz atractiva, información de noticias

de enganche en una página, servicios ofrecidos desde el inicio.

¿El portal provee los recursos requeridos por los usuarios?

SI No hay evidencia de lo contrario y es un

portal que lleva 1 año al aire.

79


CAPÍTULO 5CONCLUSIONES

En este trabajo de grado se presentó el desarrollo del portal web del CIER-SUR implantando Joomla como la herramienta base para su desarrollo. Para la elección de una herramienta base CMS, se realizó una caracterización y análisis comparativo entre Joomla y Wordpress en la cual se concluye que Joomla permite la gestión de identidad visual fácil para usuarios intermedios (entre diseñadores gráficos y programadores), rendimiento optimizado sin la necesidad de incluir complementos, un nivel de seguridad aceptable y facilidad en la publicación de contenido, características que eran requeridas y que lo hicieron la mejor elección para este proyecto. No se realizaron comparaciones con otros CMS por las restricciones que se tenían en la infraestructura.

El portal se puede dividir en 7 módulos que incluyen los 4 componentes principales del CIER-SUR (Formación, Contenidos, Investigación e Infraestructura) más Noticias, Comunidad y Divulgación. En el módulo de formación, además de contenidos informativos dinámicamente generados por Joomla se incluyen visualizaciones de datos relacionadas con el proceso de formación de docentes Leader Teachers y las metas del componente de formación como tal. Para estas visualizaciones de datos y debido a que no se tenía acceso a ninguna base de datos, se desarrolló un algoritmo semi-automatizado de extracción de datos desde la plataforma CREATIC del MEN mediante herramientas como Selenium y Tamper Monke. La plataforma CREATIC es un LMS en el que los docentes llevaban su proceso de formación. Debido a lo que podemos llamar no naturalidad en la extracción de estos datos, este proceso fue el cuello de botella de este proyecto debido a la complejidad en el desarrollo del algoritmo y a los múltiples re-diseños orientados hacia lograr coherencia en los datos obtenidos y así, poder presentarlos de manera correcta en las visualizaciones correspondientes.

A pesar de esto, la funcionalidad de visualización de datos en el portal permitió a la dirección general del CIER-SUR y a la unidad de formación, tener una referencia semana a semana de cómo se avanzaba en cada meta, ayudándoles en la gestión y organización general del componente y orientándolos hacia el cumplimiento de estas. Mediante estas visualizaciones se logró también dar una evidencia clara a la dirigencia encargada del proyecto desde el MEN de los avances en el cumplimiento de las metas de este componente en el CIER-SUR.

Otra de las funcionalidades incluidas en el portal web es la gestión de contenidos (característica principal de Joomla), de manera responsiva, lo que permitió la socialización de información, procesos internos, recursos, actividades promovidas dentro de los componentes principales y demás datos con todos los interesados en el CIER-SUR. Además de esto, en el portal web del CIER-SUR, se introdujo una imagen de identidad visual, que permitió diferenciar al CIER-SUR de todos los demás CIER y también de organizaciones con fines comunes.

En el módulo de Comunidad, se dejaron múltiples herramientas que permitirían la creación de una Red Académica Virtual en torno a todos los interesados en el CIER-SUR. Estas herramientas son Wiki, Central de Blogs, Foros e integración de las redes sociales organizativas.

Para la herramienta Wiki, se implanto Media Wiki, un motor para la creación de este tipo de herramientas web. Para la selección de Media Wiki, se realizó un proceso de análisis comparativo con otras herramientas del mismo estilo, llegando a la conclusión de que Media Wiki era el software idóneo para este proyecto por su fácil e intuitiva inclusión de contenido mediante interfaces WYSIWYG, por la simplicidad en la implantación, porque permite la personalización en sus interfaces, por la extensa documentación asociada y por su gratuidad.

80


Para la herramienta de gestión de foros, se utilizó una extensión de Joomla llamada Kunena. Para la integración de las redes sociales organizacionales en el portal web se utilizaron extensiones de Joomla que permitían funcionalidad de integración de Facebook, Twitter y Google+. Esto permitió la presentación de todas las actividades en estas Redes, centralizándolas en un solo sitio para comodidad del usuario interesado, y utilizándolas como gestoras de actividades propias de una Red Académica Virtual.

Por último en el módulo de comunidad, para la central de blogs, se utilizó una extensión del núcleo de Joomla llamada Simple RSS que permite la sindicación de contenidos de blogs mediante previo registro de este. Sin embargo, el correcto funcionamiento de este módulo depende de ciertos factores de configuración en el servidor web en torno a SSL, para la correcta obtención de fuentes RSS mediante interacción del servidor interno con servidores externos. Estas configuraciones se encuentran restringidas en el servidor actual del portal web CIER-SUR, por lo que este módulo aunque se encuentra implantado en el portal fue despublicado posteriormente debido a los conflictos mencionados anteriormente.

El módulo de comunidad brindó herramientas básicas y necesarias para la creación de una red académica virtual. Sin embargo, en la creación de estas redes se necesitan más que herramientas, se necesita difusión, dinamización y motivación en las personas interesadas, porque al final se construyen teniendo como insumo principal el componente humano para el trabajo colaborativo en cuanto a construcción y discusión de bases de conocimientos en cualquiera de los ámbitos y temas definidos.

En el módulo de contenido, además de la gestión y socialización de contenidos relacionados con el componente como tal, se incluyeron los empaquetamientos web de los objetos de aprendizaje construidos. La interfaz gráfica de usuario en este módulo tiene como características principales la construcción dinámica del menú y los objetos de aprendizaje mediante la inspección de los objetos subidos en el servidor, la filtración de estos objetos por grado escolar, área de énfasis y unidad didáctica y la presentación minimalista mediante paneles. Además de esto, se incluyó funcionalidad para la realización de valoraciones y comentarios en cada LO, lo que permitió tener un sistema que capte la retroalimentación y evaluación del trabajo que implico la construcción de dicho objeto por parte del usuario.

En el módulo de investigación se gestionaron contenidos del componente para su socialización con los usuarios interesados, entre estos contenidos se incluyen todos los proyectos de investigación asociados al CIER-SUR, el semillero de investigación incluyendo un sub foro llamado Geeks & Gamers mediante la extensión Kunena y el seminario de investigación como una especie de calendario de estos seminarios. Esto permitió la socialización con la comunidad del CIER-SUR de todos los procesos internos llevados a cabo en el componente de investigación para evidenciar todo el trabajo realizado en este.

En el módulo de Infraestructura se presentó toda la dotación tecnológica perteneciente al CIER-SUR que facilitó el desarrollo de las jornadas de formación y la producción de los objetos de aprendizaje. Además de esto se implanto una herramienta de gestión de incidencias para la organización de recursos humanos, infraestructura interna, logística para la realización de soporte y para la realización de seguimiento de estos recursos y su posterior análisis.

En el módulo de divulgación se socializó con los usuarios las diferentes publicaciones en medios de comunicación que ha tenido el CIER-SUR y las diferentes presentaciones del proyecto como información adicional.

Una de las maneras de ver el impacto del portal web en la comunidad asociada al CIER-SUR es revisar el número de visitas que tuvieron los contenidos publicados, los contenidos web del CIER-SUR fueron vistos 138927 veces. El contenido más accedido por la comunidad fue el módulo de

visualización de datos con 11148 visitas, seguido del módulo de comunidad con 4728 visitas y el módulo de objetos de aprendizaje con 2262 visitas. Teniendo en cuenta el número de personas

aproximadas que tuvieron alguna relación (5000 Leader Teachers inscritos al proceso de formación) con el proyecto CIER-SUR y el tiempo desde que su primera publicación (Octubre de 2014), podemos

81


concluir que no se accedió mucho a la información que contiene el portal por lo que se hace importante analizar cuáles son las causas de esto e intentar dinamizar y motivar el acceso a este recurso. Sin embargo, a pesar de que no hubo un acceso masivo al portal, se recibió retroalimentación positiva de usuarios Master Teachers, MEN, y otros interesados en el CIER-SUR.

Este trabajo de grado me permitió conocer, explorar, configurar e implantar distintas herramientas de tipo CMS, Gestión de incidencias y Wikis. En esta exploración y uso de Joomla logre identificar que estas herramientas proveen capacidades para la gestión de contenidos que facilitan de muchas maneras la creación de estos, además de acelerar el proceso de desarrollo, pero existe una considerable dificultad para integrar módulos y funcionalidades desarrolladas a la medida de una aplicación debido a múltiples conflictos que se generan con el propio núcleo de Joomla.

El desarrollo del Portal web CIER-Sur me permitió adquirir nuevas capacidades propias del conocimiento de las ciencias de la computación tales como: Ingeniería de software, Base de datos y visualización de datos. Además me permitió extender habilidades para resolver problemas específicos utilizando múltiples herramientas como en el caso del proceso de adquisición de datos.

Al trabajar en el entorno del CIER-SUR se tuvo que interactuar con un equipo multidisciplinario conformado por expertos en diferentes áreas del conocimiento como educación y comunicación social. Estas interacciones me obligaron a aprender un poco acerca de las maneras de pensar y metodologías propias de cada área para el correcto entendimiento de la lógica de negocio principalmente en la toma de requerimientos.

5.1 Trabajo futuro

Se tienen algunas ideas para complementar algunas funcionalidades en el portal web del CIER-SUR. Primero, la extensión del sistema de reseñas ya implementado en el portal, para obtener inteligencia derivada de estos datos y así realizar recomendaciones en cuanto a cuales objetos de aprendizaje pudieran ser más apropiados para la revisión dependiendo de los datos propios de un usuario en específico.

Segundo, en formación se plantea la necesidad del montaje de un LMS propio para el CIER-SUR y su integración directa con el portal web que permita la recolección de un conjunto de datos más amplio para los nuevos inscritos a programas de formación en el futuro, lo que permitiría realizar visualizaciones de datos más complejas y orientadas hacia análisis que permitan determinar factores de deserción de maestros, efectos sobre los docentes ubicados en zonas de fácil y difícil acceso (rurales o urbanas) entre otros. Además, el control en la recolección de datos mediante un proceso propio de inscripción, permitirá tener datos fidedignos y coherentes, y así, obviar el proceso de extracción de datos desde la plataforma CREATIC del MEN.

También se propone la realización de analíticas en el proceso de desarrollo de contenidos del CIER-SUR. Por una parte, producir analíticas que reporten el tipo de recursos (animación, imágenes, videos) que contienen. Por otra parte, analíticas que reporten estadística que permitan gestionar el proceso de desarrollo de contenidos y mediante el análisis e inteligencia de estos la optimización en este proceso.

En el componente de infraestructura se implantó Mantis BT como herramienta para la gestión de incidencias, se podría realizar visualizaciones de datos del flujo de trabajo y de las incidencias aquí generadas para tener una vista global en el desempeño de los recursos humanos y tecnológicos.

Como se comentó previamente, existieron errores en el funcionamiento de algunos módulos de Joomla, debido a la limitación en la infraestructura. La corrección de estos errores debe ser objeto de desarrollos futuros en la búsqueda de mejorar la experiencia de usuario y en un futuro extender la herramienta con otras funcionalidades.

Por último, se tiene la idea de realizar un sistema para la gestión de actividades del Staff del CIER-SUR, en particular se podría incorporar un sistema de gestión de reuniones, incorporando elementos como programación de estas, clasificación y definición de objetivos claves en una reunión,

82


notificación automática a los invitados a esta, generación automática de actas y permitir a las personas pertenecientes al Staff el seguimiento de los compromisos adquiridos.

83


REFERENCIAS

Akeeba Backup. (2015). Home - AkeebaBackup.com. Retrieved August 21, 2015, from https://www.akeebabackup.com/

Akhgar, B. (2013). Emerging Trends in ICT Security (Vol. 6). Newnes. Retrieved from https://books.google.com/books?id=ndqwAAAAQBAJ&pgis=1

Ascarza, A. (2005). Técnicas e indicadores para la evaluación de portales educativos en Internet. Gestión En El Tercer Milenio. Retrieved from http://revistasinvestigacion.unmsm.edu.pe/index.php/administrativas/article/view/9796

BASU, & ANIRBAN. (2015). SOFTWARE QUALITY ASSURANCE, TESTING AND METRICS. PHI Learning Pvt. Ltd. Retrieved from https://books.google.com/books?id=aNTiCQAAQBAJ&pgis=1

Bernardez, M. L. (2007). Diseno, Produccion E Implementacion De E-learning: Metodologia, Herramientas Y Modelos. AuthorHouse.

Bostock, M. (2012). Let’s Make a Map. Retrieved September 30, 2015, from http://bost.ocks.org/mike/map/

Browning, P., & Lowndes, M. (2001). JISC TechWatch Report: Content Management Systems. Techwatch Report TSW. Retrieved from https://pantherfile.uwm.edu/edari/www/Computing/CMS/10.1.1.15.9100.pdf

Buildwith.com. (2105). CMS technologies Web Usage Statistics. Retrieved September 27, 2015, from http://trends.builtwith.com/cms

Canós, J., Letelier, P., & Penadés, M. (2003). Metodologías Ágiles en el desarrollo de Software. Universidad Politécnica de ….

Chen, H., Chiang, R. H. L., & Storey, V. C. (2012). BUSINESS INTELLIGENCE AND ANALYTICS: FROM BIG DATA TO BIG IMPACT. MIS QUARTERLY, 36, 1165–1188.

Clarke, J. (2012). SQL Injection Attacks and Defense. Elsevier. Retrieved from https://books.google.com/books?id=KKqiht2IsrcC&pgis=1

Code Mirror. (2014). CodeMirror. Retrieved August 21, 2015, from https://codemirror.net/

CREATIC. (2014). Glosario CREATIC. Retrieved November 30, 2014, from http://creatic.colombiaaprende.edu.co/mod/glossary

cvedetails.com. (2012). CVE security vulnerabilities, versions and detailed reports. Retrieved December 9, 2015, from http://www.cvedetails.com/product/6129/Joomla-Joomla.html?vendor_id=3496

Ebersbach, A., Glaser, M., Heigl, R., & Warta, A. (2008). Wiki: Web Collaboration. Springer Science & Business Media. Retrieved from https://books.google.com/books?id=HDKA8ViZcpsC&pgis=1

Encyclopedia of Information Technology Curriculum Integration. (2008). IGI Global.

Escamilla, A. (1993). Unidades didácticas: una propuesta de trabajo en el aula. Edelvives.

Estudio de los sistemas de gestión de contenidos web. (2015). Estudio de Los Sistemas de Gestión de Contenidos Web. Retrieved from http://www.bilib.es/uploads/media/estudio_sistemas_gestion_contenidos_web_cms.pdf

García, F., & Camacho, F. (2014). Diseño web adaptable. Retrieved December 7, 2014, from https://developer.mozilla.org/es/docs/Desarrollo_Web/Web_adaptable

Group, I. G. J. W. (2015). GeoJSON. Retrieved September 23, 2015, from http://geojson.org/

84


Har, D., & Portwood, D. (2009). Usability testing of web sites designed for communities of practice: tests of the IEEE Professional Communication Society (PCS) web site combining specialized heuristic evaluation and task-based user testing. In 2009 IEEE International Professional Communication Conference (pp. 1–17). IEEE. http://doi.org/10.1109/IPCC.2009.5428218

Heinze, A., & Procter, C. (2004, September 1). Reflections on the use of blended learning. University of Salford, Salford. Retrieved from http://usir.salford.ac.uk/1658/1/4247745025H__CP_-_paper9_5.pdf

Jones, C. (2015). Networked Learning: An Educational Paradigm for the Age of Digital Networks. Springer.

Jones, K. M. L., & Farrington, P.-A. (2011). Using WordPress as a Library Content Management System. American Library Association.

joomla.org - about. (2105). About Joomla! Retrieved October 8, 2015, from https://www.joomla.org/about-joomla.html

joomla.org - Extensions. (2015). Joomla! Extensions Directory. Retrieved September 27, 2015, from http://extensions.joomla.org/

Joomla.org - Security Centre. (2015). Security Centre. Retrieved October 8, 2015, from https://developer.joomla.org/security-centre.html

Junior, H. F. de_Moraes, Nishida, F. L., & de Melo, A. C. V. (2012). Modelling Websites Navigation Elements According to Usability Aspects. In 2012 Eighth International Conference on the Quality of Information and Communications Technology (pp. 299–302). IEEE. http://doi.org/10.1109/QUATIC.2012.41

Kirk, A. (2012). Data Visualization: A Successful Design Process. Packt Publishing Ltd. Retrieved from https://books.google.com/books?id=I4qBVLfD3t4C&pgis=1

Kunena. (2014). Kunena - To Speak! Next Generation Forum Component for Joomla - Home. Retrieved August 22, 2015, from https://www.kunena.org/

Kurbel, K. E. (2008). The Making of Information Systems: Software Engineering and Management in a Globalized World. Springer Science & Business Media. Retrieved from https://books.google.com/books?id=ggVaezlfOCcC&pgis=1

Manthan M. Desai. (2010). Hacking For Beginners: a beginners guide to learn ethical hacking. Manthan M Desai. Retrieved from https://books.google.com/books?id=qQuqFlXDDaoC&pgis=1

McDowell, M. (2009). Understanding Denial-of-Service Attacks. Retrieved from http://www.us-cert.gov/ncas/tips/st04-015

McGreal, R. (2005). Learning objects: A practical definition. International Journal of Instructional Technology and Distance Learning.

Nielsen, J. (1995). 10 usability heuristics for user interface design. Fremont: Nielsen Norman Group.[Consult. 20 …. Retrieved from https://lexus.ischool.utexas.edu/Bias_Randolph/2014/Spring/INF385P/files/10 Usability Heuristics for User Interface Design.docx

Nielsen, J. (2012). Usability 101 : Introduction to Usability. All Usability, 9, 1–10. http://doi.org/10.1145/1268577.1268585

Paz, F., Pow-Sang, J. A., & Collantes, L. (2014). Usability Heuristics for Transactional Web Sites. In 2014 11th International Conference on Information Technology: New Generations (pp. 627–628). IEEE. http://doi.org/10.1109/ITNG.2014.81

Salas, K. R. (2002). GESTIÓN DE LA INFORMACIÓN EN LAS ORGANIZACIONES. Bibliotecas: Revista de La Escuela de Bibliotecología, Documentación E Información. Retrieved from http://www.revistas.una.ac.cr/index.php/bibliotecas/article/view/513

85


Singh, A., Singh, B., & Joseph, H. (2008). Vulnerability Analysis and Defense for the Internet. Springer Science & Business Media. Retrieved from https://books.google.com/books?id=PDR4nOAP8qUC&pgis=1

Tilborg, H. C. A. van. (2014). Encyclopedia of Cryptography and Security. Springer Science & Business Media. Retrieved from https://books.google.com/books?id=UGyUUK9LUhUC&pgis=1

TinyMCE. (2014). TinyMCE | The Most Advanced WYSIWYG HTML Editor. Retrieved August 22, 2015, from https://www.tinymce.com/

Wells, D. (1999). The rules and practices of extreme programming.

Wenger, E. (1999). Communities of Practice: Learning, Meaning, and Identity.

Widgetkit - Yootheme. (2015). Widgetkit - YOOtheme. Retrieved August 21, 2015, from http://yootheme.com/widgetkit

Zhou, J. (2003). A history of Web portals and their development in libraries. Information Technology and Libraries. Retrieved from http://aaa.volospin.com/BT606B/zhou-history-of-web-portals.pdf

Desarrollo del portal web responsivo para el CIER-Surobjetos.ciersur.co/reswebcier/TG4.pdf · 2.3...

Documents

Transcript of Desarrollo del portal web responsivo para el CIER-Surobjetos.ciersur.co/reswebcier/TG4.pdf · 2.3...