Graduado en Ingeniería Informáticaoa.upm.es/49737/1/TFG_ALBERTO_NAVACERRADA_MONTERO.pdfTrabajo Fin...

Trabajo Fin de Grado Actualización del espacio web del MHI

1

Graduado en Ingeniería Informática

Universidad Politécnica de Madrid

Escuela Técnica Superior de Ingenieros Informáticos

TRABAJO FIN DE GRADO

Actualización del espacio web del museo UPM de La Historia de la Informática

Autor: Alberto Navacerrada Montero

Director: M. Victoria Rodellar Biarge

MADRID, ENERO 2018


2


3

AGRACECIMIENTOS

En primer lugar y más importante agradecer todo el apoyo a mi familia durante mis años de carrera, sin su apoyo y motivación, tanto en los buenos como en los malos momentos, no podría haber conseguido llegar a este punto final.

A mis compañeros que también podría llamar hermanos, que desde el día uno en el proyecto inicio se mantienen en las buenas y en las malas ayudándome cuando ha sido necesario.

Sin todos vosotros no sería lo que soy hoy.

¡Gracias!


4

ÍNDICE

1. RESUMEN DEL TRABAJO .............................................................................................. 7

1.1. Resumen en español .................................................................................................... 7

1.2. Abstract in English ...................................................................................................... 8

2. INTRODUCCIÓN Y OBJETIVOS ................................................................................... 9

2.1. Antecedentes ................................................................................................................ 9

2.2. Objetivos del proyecto ................................................................................................ 9

2.3. Herramientas utilizadas ............................................................................................ 10

3. ANALISIS. ......................................................................................................................... 14

3.1. Paginas dinámicas ..................................................................................................... 14

3.2. Paginas estáticas ........................................................................................................ 14

3.3. Antecedentes .............................................................................................................. 15

3.3.1. Web antigua del MHI ....................................................................................... 16

3.3.2. Web nueva del MHI .......................................................................................... 17

3.3.3. Otros modelos de web ....................................................................................... 18

4. DISEÑO ............................................................................................................................. 25

4.1. Interfaz de Bajo Nivel ............................................................................................... 25

4.2. Interfaz de Alto Nivel ................................................................................................ 29

5. FASE DE PRUEBAS ........................................................................................................ 43

5.1. Pruebas de Usabilidad .............................................................................................. 43

6. CONCLUSIONES ............................................................................................................. 52

7. TRABAJOS FUTUROS ................................................................................................... 53

8. BIBLIOGRAFÍA ............................................................................................................... 54

9. ANEXO .............................................................................................................................. 56

9.1. Evaluación del sistema con usuarios ........................................................................ 56


5

Tabla de ilustraciones Ilustración 1: Logo Wordpress .................................................................................................... 10 Ilustración 2: Logo XAMPP ....................................................................................................... 11 Ilustración 3: Logo Apache. ........................................................................................................ 11 Ilustración 4: Tema utilizado Spacious por ThemeGrill ............................................................... 11 Ilustración 5: Logos de tecnologías ............................................................................................. 13 Ilustración 6: Comparativa entre CMS ........................................................................................ 15 Ilustración 7: Web Antigua MHI ................................................................................................ 16 Ilustración 8: Web Antigua, Inicio .............................................................................................. 17 Ilustración 9: Web Nueva MHI ................................................................................................... 18 Ilustración 10: Página web del Museo de Valencia .................................................................... 19 Ilustración 11: Página web del museo de la República Argentina .............................................. 20 Ilustración 12: Página web del Museo de Castilla la Mancha ..................................................... 21 Ilustración 13: Museo Reina Sofía .............................................................................................. 22 Ilustración 14: Museo Louvre ..................................................................................................... 23 Ilustración 15: Museo del Prado .................................................................................................. 24 Ilustración 16: Página principal llamada El Museo ..................................................................... 26 Ilustración 17: Pagina De Interés ................................................................................................ 27 Ilustración 18: Página de donaciones al museo ........................................................................... 28 Ilustración 19: Página de Contacto .............................................................................................. 29 Ilustración 20: Página principal 1 DAN ........................................................................................ 30 Ilustración 21: Página principal 2 DAN ........................................................................................ 30 Ilustración 22: Página De Interés DAN ........................................................................................ 31 Ilustración 23: Página Línea del Tiempo DAN ............................................................................. 32 Ilustración 24: Página Actividades DAN ...................................................................................... 33 Ilustración 25: Página Scratch DAN ............................................................................................. 33 Ilustración 26: Página de Donaciones ......................................................................................... 34 Ilustración 27: Página de contacto .............................................................................................. 34 Ilustración 28: Versión móvil ....................................................................................................... 35 Ilustración 29: Versión móvil 2 .................................................................................................... 36 Ilustración 30: Versión móvil 3 .................................................................................................... 37 Ilustración 31:Versión móvil 4 ..................................................................................................... 38 Ilustración 32: Versión móvil 5 .................................................................................................... 39 Ilustración 33: Versión Tablet 1 .................................................................................................. 40 Ilustración 34: : Versión Tablet 2 ................................................................................................ 41 Ilustración 35: : Versión Tablet 3 ................................................................................................ 42 Ilustración 36: Grafica de edades ................................................................................................ 43 Ilustración 37: Tiempos de la tarea 1 .......................................................................................... 44 Ilustración 38: Tiempos de la tarea 2 .......................................................................................... 45 Ilustración 39: Tiempos de la tarea 3 .......................................................................................... 46 Ilustración 40: Tiempos de la tarea 4 .......................................................................................... 47 Ilustración 41: Tiempos de la tarea 5 .......................................................................................... 48


6

Ilustración 42: Tiempos de la tarea 6 .......................................................................................... 49 Ilustración 43: Tiempos de la tarea 7 .......................................................................................... 50 Ilustración 44: Tiempos de la tarea 8 .......................................................................................... 51


7

1. RESUMEN DEL TRABAJO

1.1. Resumen en español

Como el propio nombre del proyecto indica, actualización del espacio web del Museo Histórico de la Informática (MHI) de la Universidad Politécnica de Madrid (UPM), este Trabajo de Fin de Grado tiene como objetivo crear una nueva web, que mejore las anteriores, para la difusión de la historia y si contenido.

Como digo, mi tutora M. Victoria Rodellar me mostró la primera de estos sitios web anteriores, el cual se trata de una web comprimida muy antigua [Web.1] cuya actualización, se trata de ni más ni menos generar otro comprimido completo añadiendo o quitando lo deseado. Por contrario el segundo sitio web [Web.2] era mucho más actual pero totalmente incompleto y con funcionalidades que se habían quedado a medias y sin funcionar.

Hoy en día existen en el mercado millones de maneras de crear tu propio espacio web y gestionarlo, en nuestro caso buscamos una web basada en Wordpress con el fin de crear un sitio web sencillo para el usuario y sencillo para el administrador, que en este caso soy yo, pero en el futuro será otra persona para que la web se mantenga actualizada.

Alguna de las características más buscadas en esta web es la capacidad de integrarse con las redes sociales, un medio que como todos sabemos está en un punto máximo donde publicitarse en ellas puede ser muy beneficioso para captar visitantes, así como la posibilidad que usuarios extranjeros puedan convertirla a su idioma, sin ningún tipo de problemas y de una forma muy intuitiva.

A continuación, se detallará el proceso que se ha llevado a cabo para la realización completa de este TFG.

Palabras clave: web, museo, informática,


8

1.2. Abstract in English

As the name of the project indicates, updating the web space of the Historical Museum of Information Technology of the Polytechnic University of Madrid (UPM), this Final Degree Project aims to create a new website, which improves the previous ones, for the dissemination of the story and if content.

As I say, my tutor M. Victoria Rodellar showed me the first of these previous websites, which is a very old compressed web whose update, is generate another full compression adding or removing the desired. By contrast, the second website was much more current but totally incomplete and with features that had been half-baked and not working.

Today there are millions of ways to create your own web space and manage it, in our case we look for a web based on WordPress in order to create a simple website for the user and simple for the administrator, which in this case it's me but in the future it will be another person so that the web stays updated.

Some features on this website is the ability to integrate with social networks, a means that as we all know is at a maximum point where advertising in them can be very beneficial to attract visitors, as well as the possibility that foreign users can convert it to your language, without any problems and in a very intuitive way.

Next, the process that has been carried out for the complete realization of this TFG will be detailed.

Keywords: web, museum, information, technology


9

2. INTRODUCCIÓN Y OBJETIVOS

El Proyecto trata de generar un espacio web, cuya finalidad es permitir recorrer la historia de la informática plasmada en el Museo, como si de una visita virtual se tratase. Añadiendo el la posibilidad de consultas y colaboraciones con el mismo para hacerlo aún más grande.

2.1. Antecedentes

No son demasiados los conocimientos respecto al Museo Histórico de la Informática, tan solo unas breves reuniones en las que se me mostraron versiones anteriores de los espacios web disponibles actualmente y una visita al propio museo.

Esto no quita que mi objetivo es generar un sitio web digno del MHI, que sin duda tiene un valor muy alto y cojo este proyecto con gran ilusión de hacer un gran trabajo.

2.2. Objetivos del proyecto

El objetivo principal, y como he dicho en algún apartado, es la creación de un espacio web público a todo el mundo, el cual les permita realizar un viaje a todas las características, exposiciones eventuales y permanentes, noticias sobre eventos próximos, dispositivos, consultas de inventario y muchas más posibilidades disponibles en el MHI.

Teniendo en cuenta que está en pleno auge y crece cada día, la actualización del espacio web tiene que ser sencilla y rápida con el fin de que se pueda, por así decirlo, mantener “al día”.

Otro aspecto importante es la exposición al mundo, el Museo Histórico de la Informática cuenta con una serie de cuentas en distintas redes sociales y trataremos de combinarlas para dar más visibilidad del mismo.


10

A continuación, enumerare una lista de objetivos y subobjetivos que se plantean:

- Dar visibilidad de evento en el Museo. - Exposición al mundo mediante redes sociales. - Espacio web usable e intuitivo para todo usuario interesado. - Web estable y atractiva. - Necesidad de ampliación, el museo crece cada día y la web debe crecer

paralelamente con los nuevos contenidos.

2.3. Herramientas utilizadas

A continuación, se listan todas las herramientas utilizadas para la realización del Trabajo de Fin de Grado.

Herramientas para la implementación:

Equipo: Ordenador sobre el que se ha trabajado, se trata del equipo personal.

Sistema operativo Windows 10: Sistema principal instalado en el

equipo donde están alojadas la mayoría de las herramientas utilizadas.

Sistema Wordpress: es un sistema de gestión de

contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de sitio web. [Web.3].

Ilustración 1: Logo Wordpress

XAMPP: es un servidor web de plataforma, software libre, que consiste principalmente en el sistema de gestión de bases de


11

datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script PHP y Perl. [Web.4] Más adelante nos centraremos en cómo se ha configurado e instalado ya que se necesita una BBDD para Wordpress.

Ilustración 2: Logo XAMPP

Apache: es un servidor web HTTP de código abierto para todas las plataformas que implementa el protocolo HTTP/1.1. [Web.5]

Ilustración 3: Logo Apache.

MySQL: Gestor de bases de datos vinculado a XAMPP donde crearemos nuestra base de datos. En ella se guardarán todo nuestro contenido. [Web.6]

Plantillas: Mediante Wordpress hay millones de plantillas y aunque parezca contrario es uno de los pasos más importantes ya que es la primera visión de la web. Más adelante explicaremos todo el proceso. En nuestro caso hemos utilizado la plantilla Spacious por ThemeGrill que como vemos es simple pero dinámica e intuitiva a la vez. [Web.16]

Ilustración 4: Tema utilizado Spacious por ThemeGrill


12

Módulos: Como en el caso anterior los módulos son parte de la columna vertebral de la web, los cuales añaden funcionalidades tales como acceso a redes sociales, traductores, formularios, etc. Algunos de los que hemos utilizado son: Contacto Form para realizar formularios, SiteOrigin que genera infinitas posibilidades para rellenar una página web, Gtraslate para las paginas en otros idiomas, Max menú para generar menús con muchas opciones, Custom CSS para modificar a mano archivos CSS y otros muchos.

Herramientas para la realización de memoria:

Microsoft Word: Herramienta para la realización de memoria. Microsoft Excel: Herramienta para generar diagramas y tablas.

Microsoft Project: Herramienta para la realización de la

planificación del proyecto. Tecnologías:

SQL: Lenguaje para el manejo y gestión de bases de datos.

HTML5: Tecnología basada en etiquetas para edición y creación

de webs.

CSS: Diseño de estilos que se combina con HTML y XML.

PHP: es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.


13

Ilustración 5: Logos de tecnologías

Otras herramientas:

Dropbox/Drive: herramienta para almacenar datos y copias para

tener acceso a ellos desde cualquier sitio. Tanto los datos del proyecto como la memoria, imágenes, graficas, etc.


14

3. ANALISIS.

Como especificamos en el plan de trabajo, el primer paso del proyecto era situarnos en lo que actualmente hay y cómo íbamos a llevar a cabo la ejecución hasta lograr la meta, una web del museo de la forma más correcta posible.

En esta fase la primera cuestión a resolver es ¿Qué tipo de página queremos?, ya que existen dos grandes tipos con sus ventajas y desventajas, las cuales vamos a mostrar a continuación.

3.1. Paginas dinámicas

Este tipo de páginas son las más comunes hoy en día, por consiguiente nuestra web se va centrar en este tipo por la razón de que vamos a necesitar tanto contenido multimedia, texto, instalaciones de módulos, formularios e infinidad de cosas que permiten.

Las ventajas que nos ofrece este sistema en la fácil integración de lo nombrado anteriormente y lo más importante de su actualización. [Web.7]

Algunos inconvenientes son el tener unos conocimientos previos de lenguajes de programación, el más utilizado es PHP, o bases de datos.

3.2. Paginas estáticas

Son páginas enfocadas principalmente a mostrar información permanente, aquella que no va ser actualizada en periodos de tiempo cortos. Esta opción es perfecta para aquellos que solo muestran descripciones sin tener muchas pretensiones con la web, solo informar. Se crean mediante el lenguaje HTML.

La ventaja de estas webs suele ser la vía económica, ya que tienen un costo mucho menos que las webs dinámicas, añadiendo el tiempo necesario de mantenimiento. [Web.7]


15

Una vez aclarado las diferencias entre los estilos de páginas web y que es lo que vamos querer tener en nuestra web, nos hemos decidido a generar una web dinámica mediante el gestor de contenidos. A continuación, mostraremos una tabla comparativa entre los distintos CMS que hay en el mercado y su uso. [Web.8]

Ilustración 6: Comparativa entre CMS

La imagen habla por sí sola, como vemos, hoy en día, Wordpress está por encima de cualquier otro gestor. ¡Se barajó la idea de generarlo en otros sistemas como Jommla! o Drupal, pero ninguna de estas opciones me convencía.

3.3. Antecedentes

El Museo Histórico de la Informática ya tiene dos espacios web generados previamente, [Web.1] [Web.2], de las cuales vamos hablar un poco más en profundidad. Ambas cumplieron sus funciones en sus respectivos momentos, pero se ha decidido generar una nueva desde cero, aunque compartiendo contenido.


16

3.3.1. Web antigua del MHI

El primero de estos espacios antiguos se corresponde a [Web.1], donde si accedemos podemos ver como en una primera vista, es muy antigua y llena de publicidad en la que es difícil navegar.

Ilustración 7: Web Antigua MHI

También se trata de un fichero comprimido, donde la actualización es muy costosa ya que hay que generar uno nuevo completo. A continuación, podemos ver su ventana de Inicio, donde el diseño es bastante robusto y poco vistoso al público.


17

Ilustración 8: Web Antigua, Inicio

3.3.2. Web nueva del MHI

Por otro lado, tenemos una segunda web realizada por exalumnos mediante Drupal [Web.9], donde a simple vista es una web mucho más modernizada realizada con un gestor de contenido, con plugins de traductores, redes sociales, mucho más visible e intuitiva, etc. El único problema es que se quedó a medias y muchas funcionalidades no hacen su función.


18

Ilustración 9: Web Nueva MHI

3.3.3. Otros modelos de web

Sin dejar de tener en cuenta nuestras propias webs, hemos decidido echar un vistazo a espacios web externos como toma de ejemplos, para coger alguna característica o simplemente tomarlos de referencia como modelo activo y funcional los cuales vamos a mostrar a continuación sin entrar mucho en detalle.

Para empezar, la Universidad de Valencia tiene activa una web [Web.10] muy parecida a nuestro objetivo final, una web sencilla moderna tal y como estamos buscando. En la siguiente imagen podemos visualizar la pantalla principal sin muchas florituras y con bastante claridad.


19

Ilustración 10: Página web del Museo de Valencia

Algunos detalles de recalcar son el plugin de cambio de idioma, búsqueda, un menú sencillo con desplegables en submenús y un gran slider con diversas fotografías relacionadas.

Por otro lado, hemos localizado la web de la universidad de la República Argentina [Web.11] que como vamos a ver a continuación, posee igual muchas características parecidas a la anterior y a nuestro objetivo.


20

Ilustración 11: Página web del museo de la República Argentina

De la misma forma algunas características son el menú con submenús, un slider con imágenes, enlaces a redes sociales, etc.

Este tipo de espacios web siguen unos patrones de los cuales no queremos aprovechar nosotros para la realización de nuestra web.

Por ultimo mostrar algún ejemplo que se sale de la normalidad como es el caso de la universidad de Castilla la Mancha [Web.12] donde en la imagen podemos observar la desaparición del menú y simplemente es una página con toda la información posicionándose muy lejos de nuestro objetivo.


21

Ilustración 12: Página web del Museo de Castilla la Mancha

No podemos olvidarnos de las webs de los museos tradicionales como pueden ser Reina Sofía [Web.13], Louvre [Web.14], Museo del Prado [Web.15] entre otros muchos. Vamos a plasmar unas imágenes de cómo son actualmente y dar una breves descripción de que nos pueden aportar.


22

Ilustración 13: Museo Reina Sofía

El Museo Reina Sofía sigue la línea nombrada antes, pero con muchísimo más contenido y complejidad. Nos sirve de ejemplo, pero no queremos llegar a ese extremo, pero posee plugins de idiomas, un menú centrado con submenús, logo, slider, etc.


23

Ilustración 14: Museo Louvre

En el Museo del Louvre se aprecia un ligero cambio, pero sigue la misma línea con su logo, menú, slider, noticias en la parte inferior, etc.


24

Ilustración 15: Museo del Prado

En el Museo del Prado es donde más cambio podemos ver, pero simplemente es de diseño donde el slider ocupa toda la web y se mueve con el usuario, manteniendo el menú en la parte superior.


25

4. DISEÑO

En este apartado de la memoria se va a describir toda la fase de diseño del proyecto desde la interfaz de bajo nivel hasta alto nivel teniendo en cuanta los requisitos que se tienen que cumplir como se ha aprendido en Ingeniería del Software del grado.

4.1. Interfaz de Bajo Nivel

En primer lugar, se realizó una serie de diseños en sucio para ir teniendo una idea de lo que se quería obtener, sin olvidar que luego se debía amoldar a una plantilla. Juntando la plantilla seleccionada con las ideas previas se realizó unos bocetos o diseños de bajo nivel, lo cuales se muestras a continuación:

En el primer diseño nos encontramos la portada o índex de la página web, donde podemos ver una cabecera (que se repetirá en todas las páginas) con el logo enlazado y el menú principal. Por otro lado, tenemos la parte central cuyo contenido es un slider al cual se le puede introducir cualquier fotografía que rotara automáticamente cada 3 segundos, seguido de un cuadro de entradas para noticias, programado para mostrar las 2 últimas. En la última sección e la parte central vemos tres enlaces a páginas de información y contenido. Por ultimo en el pie de página nos encontramos la descripción del museo, incluyendo la dirección y logo de la UPM junto a los enlaces de todas las redes sociales del museo. No podemos olvidar del plugin de idiomas ubicado en un primer plano que nos acompañara siempre en la parte inferior estemos donde estemos en nuestra navegación.


26

Ilustración 16: Página principal llamada El Museo

A continuación, tenemos la página “De Interés” a la que podemos acceder a través del menú principal, en la cual nos encontramos con la cabecera y pie de página nombrados anteriormente, así como una sección central dividida en tres enlazadas a contenido de la web como por ejemplo enlaces a otros museos, una línea del tiempo de la informática, etc.


27

Ilustración 17: Pagina De Interés

No podía faltar la página para recibir donaciones de personas que tienen algún instrumento, manual, dispositivo… que no necesite o quiera y tenga la bondad de donarlo al museo. En esta página encontramos una descripción en la que indicamos las formas de donar, ya sea por un correo electrónico o rellenando el formulario que se encuentra justo debajo.


28

Ilustración 18: Página de donaciones al museo

Por último, la famosa página de contacto que probablemente tengan todas las webs del mundo donde tenemos un mapa interactivo donde muestra la situación del museo, así como un plano del campus. Además, a la derecha añadimos una descripción con la dirección exacta que coincide con la del mapa y un formulario de contacto para cualquier duda o consulta.


29

Ilustración 19: Página de Contacto

4.2. Interfaz de Alto Nivel

En el diseño de alto nivel se observa cómo queda el software final para los usuarios, imitando un equipo, Smartphone, Tablet… En nuestro caso vamos a mostrar un plano real de cómo se vería el sistema en un ordenador, Smartphone y Tablet.

En primer lugar, tenemos todas las páginas web anteriormente explicadas en el diseño de bajo nivel.

Como podemos ver, primero mostramos la pantalla de inicio, con su menú, slider, sección de noticias, apartados y pie de página.


30

Ilustración 20: Página principal 1 DAN

Ilustración 21: Página principal 2 DAN


31

A continuación, mostramos la página de interés de igual forma siguiente los diseños previos vistos en el diseño de bajo nivel. En este caso mostramos una página interna llamada línea del tiempo para comprobar su correcta visualización.

Ilustración 22: Página De Interés DAN


32

Ilustración 23: Página Línea del Tiempo DAN

Del mismo modo mostramos la página de actividades donde se incluyen nuestros talleres y visitas guiadas, la cual también enseñamos su contenido, dotada de fotografías, texto y enlaces.


33

Ilustración 24: Página Actividades DAN

Ilustración 25: Página Scratch DAN

Por ultimo mostramos tanto la página de donaciones como la de contacto donde mostramos los mapas y formularios de contacto.


34

Ilustración 26: Página de Donaciones

Ilustración 27: Página de contacto


35

Los dispositivos móviles hoy en día son muy importantes, por lo que hemos adaptado la web a ellos y a continuación vamos a ver en su forma real como los vemos.

Ilustración 28: Versión móvil


36

Ilustración 29: Versión móvil 2


37



38



39



40

Ahora vamos a pasar a la versión Tablet.

Ilustración 33: Versión Tablet 1


41

Ilustración 34: : Versión Tablet 2


42

Ilustración 35: : Versión Tablet 3

Como podéis ver no hay ningún tipo de compatibilidad en ambos dispositivos y mantiene todas las funcionalidades.


43

5. FASE DE PRUEBAS

Como hemos aprendido en la asignatura de Interacción Persona-Ordenador para la realización de todo software, aplicación… es necesario realizar un plan de pruebas a usuarios para medir la usabilidad y corregir en el peor de los casos algunas funcionalidades complejas y hacer la aplicación lo más usable por todo tipo de personas. Para ello vamos a recoger el feedback de todo tipo de personas desde compañeros de carrera o trabajo, así como desconocidos barajando todo rango de edades.

La fase de pruebas consiste en realizar una serie de simulaciones sobre el espacio web para encontrar las mayores dificultades e intentar subsanarla antes de su publicación. Estas simulaciones estarán diseñadas estratégicamente para llegar a todos los puntos de la web y serán medidas para ver los desfases entre las pruebas.

5.1. Pruebas de Usabilidad

Para la consecución de esta fase se han realizado una serie de pruebas a 15 personas, las cuales son 7 mujeres y 8 hombres de entre 22 y 46 años a excepción de 1 que tenía 59. La diversidad en las edades es importante, ya que no se desenvuelve de la misma forma una persona adulta que una joven.

Ilustración 36: Grafica de edades

0,53

0,13

0,27

0,07

EDADES

Entre 21 - 30 Entre 31 - 40 Entre 41 - 50 Entre 51 - 60


44

Otro aspecto importante es la profesión o conocimiento de la tecnología, en este caso 10 de los 15 están habituados a trabajar con ordenadores y los 5 restantes, que a su vez son los de mayor edad no están tan acostumbrados. Donde podremos ver como con aumento de edad y a su vez desconocimiento de la tecnología e internet los tiempos aumentarán.

Con el fin de averiguar todos nuestros errores y defecto hemos realizado 8 tareas a 15 personas mediante un plan de pruebas que podemos encontrar en la sección de Anexos. A continuación, detallaremos mediante unos gráficos un resumen de los resultados obtenidos.

Por lo general en la tarea 1 no hay picos de altas cifras, el aumento de tiempos se debió al desconocimiento, pero con buscar unos segundos más se completó satisfactoriamente. En general la media de tiempos de esta tarea se definió como correcta.

Ilustración 37: Tiempos de la tarea 1

10 11 12 1315 16

13

16 17

11

21

12

1820

18

Tarea 1

Tarea 1


45

En la tarea 2 podemos observar una repetición de tiempos bastante constante, exceptuando 2 casos. Son los casos en primer lugar con mayor edad y segundo lugar es una persona no habituada a utilizar ordenadores, por lo que entendemos que son tiempos normales.


56

4

6

98

5

1011

4

9

6 6

1514

Tarea 2

Tarea 2


46

En este caso podríamos repetir cada una de las palabras del anterior, la media de tiempos es más que correcta.


4 4 4

5

6

8

5 5 5

4

5

4

7

9 9

Tarea 3

Tarea 3


47

Esta tarea ha sido una de las más especiales, los resultados no llevaron a modificar el título del menú ya que algunas personas lo encontraban confuso.


23

4 4

6

8

2

1011

4

9

34

76

Tarea 4

Tarea 4


48

En esta tarea no hay mucho que decir los tiempos son contantes con una media muy buena.


10

1315 14

16 17

14 13 12 1315 15 15

20 19

Tarea 5

Tarea 5


49

Al igual que la tarea 4, esta fue una de las más engorrosas ya que hay picos de tiempo independientemente de la edad o conocimientos técnicos, el problema se producía en la formulación de la pregunta ya que los usuarios accedían correctamente a la página, pero seleccionaban el video que no era adecuado.


3

4

3

4

7

8

3

8

7

3

5

3

5

8

4

Tarea 6

Tarea 6


50

La tarea 7 no supuso ningún problema para nadie, las cifras son altas ya que se tenía que rellenar un formulario completo.


20

15

24

1518 17

15

2118

2421

15

25

30

15

Tarea 7

Tarea 7


51

Esta tarea también supuso algún problema, ya que se trata de un enlace incrustado, en una palabra, pero con tiempo de visualización todos consiguieron descargarlo correctamente.


Por lo general, salvo algún punto concreto que modificar, las pruebas fueron satisfactorias y podríamos decir que nuestro espacio web es usable. Las medias de los tiempos de todas las pruebas y usuarios son correctas por lo que para una primera versión está bastante bien.

1514

10

1516

1715

1416

1011

1213

19

13

Tarea 8

Tarea 8


52

6. CONCLUSIONES

En resumen, tras la realización de este TFG, nuestro objetivo era dotar al museo de una web con la tecnología actual, que fuese usable, simple y atractiva a todo el público.

Todo esto ha sido posible gracias a la herramienta Wordpress, un gestor web que una vez obtenido los conocimientos para su uso, te permite crear cualquier cosa mediante sus herramientas y widgets.

Desde un principio hubo complicaciones de comunicación y de aprendizaje de la herramienta, pero, en mi opinión, creo que hemos llegado a un fin correcto con una web que salvo modificaciones de estética podría llegar a ser una muy buena web y el enlace del museo con el mundo. Obviamente queda mucho trabajo en ella, sobre todo de contenido, pero sin duda este es un comienzo muy bueno.

Superadas todas las complicaciones, poco a poco se ha ido generando la página web cumpliendo la mayoría de objetivos generados y plasmándolo es una web sencilla pero completa.

Hablando de las webs anteriores, creo que se ha mejorado las previas versiones realizando una web mucho más dinámica y vistosa a la vez de una mejor navegación y accesibilidad.

También añadir que el beneficio que trae usar este gestor de contenidos es la garantía de futuro que posee. Todo el contenido de la web se puede migrar fácilmente a otro servidor, puede ser gestionado por más de un administrador o creador de contenido para mantener actualizada al máximo la web ya sea con noticias, artículos, etc.

En cuanto al diseño se han seguido las pautas especificadas con la sencillez y colores corporativos como es el azul característico dividendo los distintos bloques, así como menús, enlaces, iconos…

Por último y no menos importante la incorporación de herramientas al público como personas extranjeras con conversores de web a otros idiomas, o geolocalización con un mapa interactivo, así como la integración de las redes sociales del MHI, actualmente imprescindible en cualquier web para sí visibilidad.

En líneas generales estoy satisfecho con el trabajo realizado y con el diseño final con el fin de que algún día puede llegar a ser al web oficial o que algún otro compañero desee firmemente continuar con esta web.


53

7. TRABAJOS FUTUROS

Una vez finalizada la ventana de tiempo del TFG este proyecto tiene mucho recorrido, debido a la seguridad de los servidores de la escuela el trabajo se ha realizado en una maquina propia en local.

Por lo tanto, yo tengo generada un backup de la web y he enviado una copia a mi tutora Victoria por si gusta el diseño y se quiere continuar con ella es un TFG próximo o simplemente para publicarla

En este momento se encuentra en una fase inicial que dispone de las funciones básicas para su funcionamiento.

Algunas mejoras para el futuro podrían ser:

Mejoras en el diseño, hacerla más atractiva visualmente.

Añadir contenido y mantenerla actualizada con noticias, eventos, imágenes, etc.

Añadir una sección con todo el inventario del museo mediante una base de datos y poder hacerle consultas a la vez que añadir o suprimir una pieza.

Publicarla en un servidor para la visualización pública.


54

8. BIBLIOGRAFÍA

En este apartado se muestran todas las fuentes visitadas con sus enlaces de donde se ha obtenido información para la realización del proyecto. A lo largo del proyecto se identifican por una etiqueta para diferenciar unas de otras. [Web.X]

[Web.1] Web antigua del Museo Histórico de la Informática de la UPM.

http://www.mhi.fi.upm.es/

[Web.2] Web moderna del Museo Histórico de la Informática de la UPM.

http://mhi2.fi.upm.es/

[Web.3] Web de Wordpress.

https://es.wordpress.org/

[Web.4] Web donde está disponible XAMPP

https://www.apachefriends.org/es/index.html

[Web.5] Web de Apache

https://httpd.apache.org/

[Web.6] Web MySQL

https://www.mysql.com/

[Web.7] Web comparativa entre estáticas y dinámicas

https://www.clomputech.com/paginas-estaticas-vs-dinamicas.html

[Web.8] Comparativa entre CMS, web 1and1

https://www.1and1.es/digitalguide/hosting/cms/cms-en-comparativa-los-gestores-de-contenido-mas-usados/

[Web.9] Web Drupal

https://www.drupal.org/

[Web.10] Web MHI de la Universidad de Valencia.

http://museo.inf.upv.es/es/


55

[Web.11] Web MHI de la República Argentina.

http://museodeinformatica.org.ar/

[Web.12] Web MHI de la universidad de Castilla la Mancha.

http://www.esi.uclm.es/museo/

[Web.13] Web Museo Reina Sofía.

http://www.museoreinasofia.es/

[Web.14] Web Museo Louvre en inglés.

http://www.louvre.fr/en

[Web.15] Web Museo del Prado.

https://www.museodelprado.es/

[Web.16] Web Museo del Prado.

https://themegrill.com/themes/spacious/


56

9. ANEXO

9.1. Evaluación del sistema con usuarios

PLAN DE PRUEBAS DE USABILIDAD

INTERFAZ WEB MUSEO HISTÓRICO DE LA INFORMÁTICA

1. Descripción Se pretende observar la primera versión del espacio web para el museo histórico de la informática con las funciones básicas para detectar problemas potenciales de usabilidad para su correcta corrección. Es un análisis cualitativo que solo se realizara con 15 usuarios y que sirve de base para evaluar futuras versiones. La intención es llevar a cabo estas pruebas para observar el desempeño que el usuario muestra al utilizar la web.

2. Protocolo de bienvenida Buenos días, Gracias por acceder a realizar este, mi nombre es “Nombre del monitor” y estaré con usted en esta sesión. Estamos realizando una serie de pruebas en nuestro espacio web para el museo histórico de la informática y durante el proceso hacemos resolver a una serie de personas diversas pruebas para averiguar posibles defectos del sistema. El test va durar aproximadamente 10 minutos. Tu tiempo de realización va ser medido, si necesitas realizar cualquier parón sólo tienes que indicarlo. Aclarar que estamos testeando el espacio web y si encuentras alguna parte complicada y cometes errores, estos mismos son los que buscamos para solucionarlo.


57

Si estás de acuerdo con todo lo anterior por favor escribe tu nombre y firma justo debajo de esta línea. En total realizaras 8 pruebas que se te explicaran una a una y que trates de imitar una situación cotidiana y más real posible. Gracias por ayudarnos a mejorar el sistema, los resultados mejoraran el diseño.

TAREA 1

Esta tarea consiste en averiguar algún acontecimiento de la línea del tiempo de 1978.

- Tiempo total de realización: - Numero de errores:

Lugar de error:

TAREA 2

Esta tarea consiste en encontrar el enlace a la página web del museo de la informática de Valencia.


Lugar de error:

TAREA 3

Esta tarea consiste en entrar en el twitter del museo desde 2 páginas distintas.


Lugar de error:


58

TAREA 4

Esta tarea consiste en ver la localización y dirección del museo.


Lugar de error:

TAREA 5

Esta tarea consiste en encontrar la página de personas ilustres de 2 formas distintas.


Lugar de error:

TAREA 6

Esta tarea consiste en visualizar nuestra presencia en Tele Madrid.


Lugar de error:

TAREA 7

Esta tarea consiste en realizar una donación rellenando el formulario.


Lugar de error:


59

TAREA 8

Esta tarea consiste en encontrar y descargar la guía Scratch.


Lugar de error:

A continuación, vamos a rellenar una encuesta de satisfacción:

1. En general estoy satisfecho con la facilidad de realizar todas las tareas

Totalmente de acuerdo ....................................... Totalmente en desacuerdo N/A 1 2 3 4 5 6 7

2. En general estoy satisfecho con el tiempo empleado en realizar todas las tareas


3. En general estoy satisfecho con los mensajes de ayuda al realizar todas las tareas


Comentarios:

Este documento esta firmado porFirmante CN=tfgm.fi.upm.es, OU=CCFI, O=Facultad de Informatica - UPM,

C=ES

Fecha/Hora Mon Jan 15 17:01:44 CET 2018

Emisor delCertificado

[email protected], CN=CA Facultad deInformatica, O=Facultad de Informatica - UPM, C=ES

Numero de Serie 630

Metodo urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (AdobeSignature)

Graduado en Ingeniería Informáticaoa.upm.es/49737/1/TFG_ALBERTO_NAVACERRADA_MONTERO.pdfTrabajo Fin...

Documents

Transcript of Graduado en Ingeniería Informáticaoa.upm.es/49737/1/TFG_ALBERTO_NAVACERRADA_MONTERO.pdfTrabajo Fin...