Desarrollo de tres minisites interactivos multimedia para la página web del Museo de Informática de la ESTINF

JORGE DONAT OLCINA DESARROLLO DE TRES MINISITES INTERACTIVOS MULTIMEDIA PARA LA PÁGINA WEB DEL MUSEO DE INFORMÁTICA DE LA ETSINF DESARROLLO DE TRES MINISITES INTERACTIVOS MULTIMEDIA PARA LA PÁGINA WEB DEL MUSEO DE INFORMÁTICA DE LA ETSINF DIRECTOR: DIEGO ÁLVAREZ SÁNCHEZ FECHA: 01/07/2011 INGENIERIA TÉCNICA INFORMÁTICA GESTIÓN PFC – Jorge Donat Olcina Página 2 INDICE 1. INTRODUCCIÓN ................................................................................................................ 7 1.1. ORIGEN DEL PROYECTO............................................................................................. 7 1.2. JUSTIFICACIÓN DEL PROYECTO ................................................................................. 7 1.3. DESCRIPCIÓN GENERAL DEL PROYECTO .................................................................... 7 2. FASE DE ESTUDIO .............................................................................................................. 9 2.1. PRINCIPALES DISPOSITIVOS DEL MUSEO DE LA ETSINF ............................................. 9 2.1.1. Consolas y ordenadores .................................................................................... 9 2.1.2. Periféricos ....................................................................................................... 11 2.1.3. Otros ............................................................................................................... 12 2.2. SELECCIÓN DE LOS TRES DISPOSITIVOS ................................................................... 13 2.3. ELEMENTOS MULTIMEDIA ...................................................................................... 16 2.4. HERRAMIENTAS DE DESARROLLO DE LOS MINISITES ............................................. 20 2.5. HERRAMIENTAS DE CREACIÓN Y EDICIÓN DE ELEMENTOS MULTIMEDIA ............... 21 2.6. SITIOS WEB SIMILARES............................................................................................ 26 3. FASE DE DEFINICIÓN ....................................................................................................... 33 3.1. GESTIÓN DEL ALCANCE ........................................................................................... 33 3.1.1. Objetivo principal ............................................................................................ 33 3.1.2. Público objetivo .............................................................................................. 34 3.1.3. Contenidos ...................................................................................................... 38 3.1.4. Arquitectura de la información ....................................................................... 43 3.1.5. Metáfora ......................................................................................................... 46 3.1.6. Especificación de las distintas pantallas .......................................................... 46 3.2. GESTIÓN TÉCNICA ................................................................................................... 78 4. FASE DE PLANIFICACIÓN ................................................................................................. 79 4.1. GESTIÓN DE LA PLANIFICACIÓN TEMPORAL............................................................ 79 4.1.1. Descomposición en tareas ............................................................................... 79 4.1.2. Estimación de duraciones ................................................................................ 80 4.1.3. Orden de ejecución ......................................................................................... 81 4.1.4. Asignación de recursos .................................................................................... 83 5. FASE DE PRODUCCIÓN .................................................................................................... 84 6. CONCLUSIONES............................................................................................................... 88 7. BIBLIOGRAFÍA ................................................................................................................. 89 PFC – Jorge Donat Olcina Página 3 INDICE DE FIGURAS Figura 1. Atari 1040 STFM ......................................................................................................... 9 Figura 2. Amper Exelvision ........................................................................................................ 9 Figura 3. Macintosh Clasic ......................................................................................................... 9 Figura 4. Artech Portable .......................................................................................................... 9 Figura 5. Olivetti PT-XT-20 ......................................................................................................... 9 Figura 6. Consola Philips P2000 ................................................................................................. 9 Figura 7. Amstrad CPC 464 ...................................................................................................... 10 Figura 8. Nixdorf Computer Quattro ........................................................................................ 10 Figura 9. Olivetti M240............................................................................................................ 10 Figura 10. Sinclair ZX Spectrum ............................................................................................... 10 Figura 11. Sinclair ZX81 ........................................................................................................... 10 Figura 12. Silicon graphics Indigo impact ................................................................................. 10 Figura 13. Nixdorrf Computer Quattro .................................................................................... 10 Figura 14. Sperry Univac ......................................................................................................... 10 Figura 15. Toshiba T3100e ...................................................................................................... 10 Figura 16. PDP-11 de FIFE........................................................................................................ 10 Figura 17. Video Pinball ........................................................................................................... 10 Figura 18. Sony HB-20P MSX ................................................................................................... 10 Figura 19. HP Deskjet 510 ....................................................................................................... 11 Figura 20. Monitor Sun ........................................................................................................... 11 Figura 21. Monitor HP MP ....................................................................................................... 11 Figura 22. Teclado y ratón IBM ................................................................................................ 11 Figura 23. Nixdorf Computer Quattro ...................................................................................... 11 Figura 24. Creative CD2423E ................................................................................................... 11 Figura 25. Fujitsu DX2400 M33488 .......................................................................................... 11 Figura 26. BASF Data Cartridge 450 Ls ..................................................................................... 12 Figura 27. Disco ZIP ................................................................................................................. 12 Figura 28. Fichas perforadas BULL ........................................................................................... 12 Figura 29. Tarjeta de almacenamiento IBM ............................................................................. 12 Figura 30. Fuente alimentación Tüv......................................................................................... 12 Figura 31. Refrigerador de microprocesador IBM .................................................................... 12 Figura 32. Discos flexibles ....................................................................................................... 12 Figura 33. USL Tuxedo Client/WS ............................................................................................ 12 Figura 34. Pantalla visualización 360o ...................................................................................... 16 Figura 35. Visualización panorámica ........................................................................................ 16 Figura 36. Icono vídeo ............................................................................................................. 17 Figura 37. Reproductor de YouTube ........................................................................................ 17 Figura 38. Reproductor de WMP ............................................................................................. 18 Figura 39. Imagen Spectrum.................................................................................................... 18 Figura 40. Imagen documento PDF .......................................................................................... 19 Figura 41. Icono PDF ............................................................................................................... 19 Figura 42. Pantalla edición Adobe Flash .................................................................................. 20 Figura 43. Pantalla edición Adobe Premiere ............................................................................ 21 Figura 44. Imagen photoshop. ................................................................................................. 22 PFC – Jorge Donat Olcina Página 4 Figura 45. Entrada de imágenes Object2VR. ............................................................................ 23 Figura 46. Estados de las vistas Object2VR. ............................................................................. 23 Figura 47. Editor de skins Object2VR. ...................................................................................... 24 Figura 48. Exportación Object2VR ........................................................................................... 24 Figura 49. Pantalla PDF2SWF. .................................................................................................. 25 Figura 50. Página web Mercedes-Benz España ........................................................................ 26 Figura 51. Imagen Mercedes-Benz .......................................................................................... 27 Figura 52. Página web 20minutos sección vídeos .................................................................... 28 Figura 53. Imagen vídeo 20minutos.tv..................................................................................... 29 Figura 54. Página web Ministerio de Educación de España ...................................................... 30 Figura 55. Pantalla web Ministerio .......................................................................................... 31 Figura 56. PDF documentación Ministerio ............................................................................... 31 Figura 57. Gráfico evolución uso internet. ............................................................................... 34 Figura 58. Gráfico perfil por sexo............................................................................................. 35 Figura 59. Gráfico evolución uso por edades. .......................................................................... 35 Figura 60.Gráfico uso internet clase social............................................................................... 36 Figura 61. Gráfico lugar de acceso. .......................................................................................... 36 Figura 62. Imagen usuario arquetipo ....................................................................................... 37 Figura 63. Instantánea interacción dispositivo. ........................................................................ 39 Figura 64. Barra botones interacción. ...................................................................................... 39 Figura 65. Logotipo museo informática. .................................................................................. 39 Figura 66. Botón Home Interacción. ........................................................................................ 39 Figura 67. Reproductor sección audio. .................................................................................... 40 Figura 68. Botones sección Audio. ........................................................................................... 40 Figura 69. Logo Museo sección audio. ..................................................................................... 40 Figura 70. Botón Home Audio. ................................................................................................ 40 Figura 71. Visulizador de documentos. .................................................................................... 41 Figura 72. Botón Home ficha descriptiva. ................................................................................ 41 Figura 73. Reproductor sección vídeo...................................................................................... 42 Figura 74. Botones sección video. ........................................................................................... 42 Figura 75. Logotipo Museo informática. .................................................................................. 42 Figura 76. Botón Home video. ................................................................................................. 42 Figura 77. Arquitectura de la información ............................................................................... 43 Figura 78. Representación pantalla inicial. .............................................................................. 46 Figura 79. Representación pantalla interacción. ...................................................................... 52 Figura 80. Representación pantalla Audio ............................................................................... 58 Figura 81. Representación pantalla Ficha Técnica. ................................................................... 64 Figura 82. Representación pantalla Video Demostrativo. ........................................................ 69 Figura 83. Representación pantalla Experiencias de Uso. ........................................................ 75 Figura 84. Diagrama de Gantt.................................................................................................. 82 Figura 85. Tabla asignación de recursos. ................................................................................. 83 Figura 86. Escenario fotográfico dispositivos. .......................................................................... 86 PFC – Jorge Donat Olcina Página 5 INDICE DE TABLAS Tabla 1. Tabla selección dispositivos laboral-científicos ........................................................... 14 Tabla 2. Tabla selección dispositivos lúdicos ............................................................................ 14 Tabla 3. Tabla Relación contenidos - objetivos ........................................................................ 45 Tabla 4. Tabla I1 pantalla inicial. .............................................................................................. 47 Tabla 5. Tabla I2 pantalla inicial. .............................................................................................. 47 Tabla 6. Tabla T1 pantalla inicial. ............................................................................................. 48 Tabla 7. Tabla M1 pantalla inicial. ........................................................................................... 48 Tabla 8. Tabla M3 pantalla inicial. ........................................................................................... 49 Tabla 9. Tabla M3 pantalla inicial. ........................................................................................... 50 Tabla 10. Tabla M4 pantalla inicial. ......................................................................................... 51 Tabla 11. Tabla I1 pantalla interacción. ................................................................................... 52 Tabla 12. Tabla I2 pantalla interacción. ................................................................................... 53 Tabla 13. Tabla M1 pantalla interacción. ................................................................................. 53 Tabla 14. Tabla M2 pantalla interacción. ................................................................................. 54 Tabla 15. Tabla M3 pantalla de interacción. ............................................................................ 54 Tabla 16. Tabla M4 pantalla de interacción. ............................................................................ 55 Tabla 17. Tabla M5 pantalla de interacción. ............................................................................ 55 Tabla 18. Tabla M6 pantalla de interacción. ............................................................................ 56 Tabla 19. Tabla M7 pantalla interacción. ................................................................................. 56 Tabla 20. Tabla M8 pantalla interacción. ................................................................................. 57 Tabla 21. Tabla M1 pantalla Audio. ......................................................................................... 58 Tabla 22. Tabla M2 pantalla Audio. ......................................................................................... 59 Tabla 23. Tabla M3 pantalla Audio. ......................................................................................... 60 Tabla 24. Tabla M4 pantalla Audio .......................................................................................... 61 Tabla 25. Tabla M5 pantalla Audio. ......................................................................................... 62 Tabla 26. Tabla I1 pantalla Audio............................................................................................. 62 Tabla 27. Tabla I2 pantalla Audio............................................................................................. 63 Tabla 28. Tabla M1 pantalla Ficha Descriptiva. ........................................................................ 64 Tabla 29. Tabla M2 pantalla Ficha Descriptiva. ........................................................................ 65 Tabla 30. Tabla M3 pantalla Ficha Descriptiva. ........................................................................ 65 Tabla 31. Tabla M4 pantalla Ficha Descriptiva. ........................................................................ 66 Tabla 32. Tabla M5 pantalla Ficha Técnica. .............................................................................. 66 Tabla 33. Tabla M6 pantalla Ficha Descriptiva. ........................................................................ 67 Tabla 34. Tabla T1 pantalla Ficha Descriptiva........................................................................... 67 Tabla 35. Tabla T2 pantalla Ficha Descriptiva........................................................................... 68 Tabla 36. Tabla M1 pantalla Video Demostrativo. ................................................................... 69 Tabla 37. Tabla M2 pantalla Video Demostrativo. ................................................................... 70 Tabla 38. Tabla M3 pantalla Video Demostrativo. ................................................................... 71 Tabla 39. Tabla M4 pantalla Video Demostrativo .................................................................... 72 Tabla 40. Tabla M5 pantalla Video Demostrativo. ................................................................... 73 Tabla 41. Tabla I1 pantalla Video Demostrativo. ...................................................................... 73 Tabla 42. Tabla I2 pantalla Video Demostrativo. ...................................................................... 74 Tabla 43. Tabla M1 pantalla Experiencias de Uso. ................................................................... 75 Tabla 44. Tabla M2 pantalla Experiencias de Uso. ................................................................... 76 PFC – Jorge Donat Olcina Página 6 Tabla 45. Tabla I1 pantalla Experiencias de Uso. ...................................................................... 76 Tabla 46. Tabla I2 pantalla Experiencias de Uso. ...................................................................... 77 Tabla 47. Tabla tareas y subtareas........................................................................................... 79 Tabla 48. Tabla estimación de duraciones. .............................................................................. 80 PFC – Jorge Donat Olcina Página 7 1. INTRODUCCIÓN 1.1. ORIGEN DEL PROYECTO Este proyecto surge debido al rediseño y lanzamiento de la nueva web del Museo de Informática de la ETSINF. Partiendo de esta remodelación se creó la idea de hacer un proyecto para mejorar el aspecto de la página web del museo. Observando la antigua web del Museo podemos apreciar que los contenidos están faltos de interactividad y el aspecto es muy clásico y poco llamativo. La intención con la ejecución de este proyecto es la de rediseñar totalmente algunos de los aspectos de esta web, creando nuevos miniSites interactivos referidos a ciertos dispositivos del Museo. 1.2. JUSTIFICACIÓN DEL PROYECTO Con el desarrollo de éste proyecto se lleva a cabo el rediseño que queremos conseguir, creando para esto tres miniSites interactivos multimedia. Este proyecto contribuirá positivamente en la mejora del aspecto, navegabilidad, calidad de la información, entendimiento y otros aspectos relevantes. A corto plazo la creación de los miniSites producirá una sensación de una navegabilidad totalmente nueva para el espacio web atrayendo a los usuarios asiduos a ésta. A medio plazo producirá una aceleración y aumento de las visitas a la web debido a las innovaciones aportadas a ésta. A largo plazo pienso que producirá una total implantación y mejora constante respecto al resto de dispositivos, consiguiendo un aspecto totalmente interactivo, ameno, educativo y alcanzando el objetivo que es conseguir una remodelación de la página web del Museo de Informática de la ETSINF total y absoluto. El desarrollo del proyecto me va a beneficiar positivamente en el aspecto educativo, ya que este proyecto enlaza distintos y variados tipos de tecnologías usadas para llevarlo a cabo, aprendiendo de forma directa sobre aspectos relacionados con la multimedia. 1.3. DESCRIPCIÓN GENERAL DEL PROYECTO El proyecto se enmarca dentro de una línea de trabajo abierta para el rediseño y lanzamiento del Museo de Informática de la ETSINF. En este contexto proponemos la creación de tres miniSites interactivos y multimedia de carácter ilustrativo y educativo. Esta producción basa sus objetivos en conseguir que el usuario visitante de la página web del museo de informática pueda disponer de información referida a los dispositivos elegidos y pueda interactuar con ellos, consiguiendo de este modo un conocimiento del funcionamiento de éstos de forma más amena, educativa y entretenida. De esta forma se pretende también promocionar el Museo de Informática que dispone la Escuela Técnica Superior de Ingeniería Informática de la UPV, creando un enfoque de visita al museo distinto y especial. PFC – Jorge Donat Olcina Página 8 En los miniSites interactivos creados tendremos la capacidad de: Ver los dispositivos en 360o, dando una visualización atractiva del dispositivo desde distintos ángulos. Ver vídeos demostrativos del funcionamiento, ayudando de este modo el entendimiento de la tarea que llevaba a cabo el dispositivo en sí. Ver imágenes del dispositivo en una situación real de funcionamiento en su día. Consultar un documento explicativo del dispositivo que nos ayudará a saber las principales características que dispone. Oír pistas de audio que reproduzcan el sonido característico del dispositivo en funcionamiento. PFC – Jorge Donat Olcina Página 9 2. FASE DE ESTUDIO En esta fase se recaba y analiza toda la información necesaria para poder realizar correctamente, y partiendo de bases sólidas, la definición del proyecto. Los temas principales para llevar a cabo esta fase son: 2.1. PRINCIPALES DISPOSITIVOS DEL MUSEO DE LA ETSINF: En esta sección he hecho mención de todos los dispositivos que dispone el museo. A continuación he hecho una separación de tres secciones para poder clasificarlos. La clasificación la he hecho en base a: lo didáctico que puede resultar el tipo de dispositivo y a la clase a la que pertenece éste. Las secciones son: 2.1.1. Consolas y ordenadores: Atari 1040 STFM Figura 1. Atari 1040 STFM Amper Exelvision Figura 2. Amper Exelvision Macintosh Clasic (1990) Figura 3. Macintosh Clasic Artech Portable Figura 4. Artech Portable Olivetti PT-XT-20 (1992) Figura 5. Olivetti PT-XT-20 Consola Philips P2000 M Figura 6. Consola Philips P2000 PFC – Jorge Donat Olcina Página 16 2.3. ELEMENTOS MULTIMEDIA: En este apartado voy a mencionar y explicar las secciones multimedia que dispondrá cada miniSite interactivo. Las cinco secciones multimedia son: QTVR: QTVR son las siglas de "QuickTime VR" (VR: siglas en ingles de Realidad Virtual) formato de archivo creado por la compañía Apple Inc. que permite la visualización de imágenes panorámicas. También permite simular la exploración de objetos, a través de imágenes capturadas desde diversos ángulos. Actualmente, a través de una amplia gama de software disponibles en el mercado, así como también de lentes para cámaras fotográficas especializadas, es posible generar panoramas de todo tipo, desde imágenes panorámicas parciales, panoramas en 360 grados, y panoramas Cúbicos, que permiten visualizar una escena libremente en todas direcciones. Finalidad: La finalidad de la utilización de esta herramienta es para poder visualizar los distintos dispositivos en un panorama de 360 grados, dando la opción de poder rotar el objeto de la forma deseada y poder realizar zoom sobre éste, permitiendo al usuario una visualización total del objeto y una maniobrabilidad totalmente libre. Figura 34. Pantalla visualización 360o Figura 35. Visualización panorámica PFC – Jorge Donat Olcina Página 17 Video: El vídeo es la tecnología de la captación, grabación, procesamiento, almacenamiento, transmisión y reconstrucción por medios electrónicos digitales o analógicos de una secuencia de imágenes que representan escenas en movimiento. Finalidad: La finalidad de la utilización de esta herramienta es para poder visualizar los distintos vídeos recopilados o grabados. Los vídeos recopilados constan de vídeos recogidos de diversas fuentes donde se explicará y se podrá visualizar el funcionamiento del dispositivo y recalcar sus principales funcionalidades enriqueciendo la visión del usuario sobre la capacidad de trabajo del dispositivo. Los vídeos constan de vídeos grabados y editados por mí. En estos vídeos aparecerán distintos usuarios que explicarán sus experiencias de uso sobre el dispositivo. Los usuarios entrevistados podrán expresar su opinión, sus ventajas en los tiempos de su uso, sus desventajas, las principales características que recuerda, etc… creando de este modo un apartado de experiencias de uso personal, entretenido y educativo al mismo tiempo. Figura 36. Icono vídeo Figura 37. Reproductor de YouTube PFC – Jorge Donat Olcina Página 18 Audio: El audio digital es la codificación digital de una señal eléctrica que representa una onda sonora. Finalidad: La finalidad de la utilización de esta herramienta es para poder escuchar el sonido característico que emitía cada dispositivo durante su funcionamiento. Se dispondrá de una pista donde el usuario visitante podrá en todo momento reproducirla, pararla, pausarla, avanzar la reproducción, etc… teniendo un control absoluto de la reproducción. El usuario podrá hacerse una idea más cercana a la visión global del dispositivo. Imagen: Una imagen es una representación que manifiesta la apariencia de un objeto real. El concepto mayoritario al respecto corresponde a la de la apariencia visual, por lo que el término suele entenderse como sinónimo de representación visual. Finalidad: La finalidad de la utilización de esta herramienta es para poder visualizar el dispositivo mediante imágenes. En este caso el usuario podrá observar el dispositivo con un enfoque centrado en los detalles en un primer plano fijo. Figura 38. Reproductor de WMP Figura 39. Imagen Spectrum PFC – Jorge Donat Olcina Página 19 Documentos PDF: PDF es un formato de almacenamiento de documentos, desarrollado por la empresa Adobe Systems. Este formato es de tipo compuesto (imagen vectorial, mapa de bits y texto). Esta especialmente ideado para documentos susceptibles de ser impresos, ya que especifica toda la información necesaria para la presentación final del documento. Finalidad: La finalidad de la utilización de esta herramienta es para poder visualizar todas las características técnicas, los materiales de los que está hecho, la fecha de fabricación, las funciones que realizaba, etc. El usuario podrá explorar el PDF como lo desee, pudiendo hacer búsquedas de palabras determinadas dentro de éste, avanzar o retroceder las páginas de especificaciones, etc. Figura 40. Imagen documento PDF Figura 41. Icono PDF PFC – Jorge Donat Olcina Página 20 2.4. HERRAMIENTAS DE DESARROLLO DE LOS MINISITES: En este apartado voy a explicar los distintos programas software utilizados para el desarrollo de mi proyecto. Adobe Flash CS3: Adobe Flash 1 es una aplicación en forma de estudio que trabaja sobre "fotogramas", destinado a la producción y entrega de contenido interactivo para las diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente desarrollado y distribuido por Adobe Systems, y utiliza gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de vídeo y audio bidireccional. En sentido estricto, Flash es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos generados con Flash. Los archivos de Flash, que tienen generalmente la extensión de archivo SWF, pueden aparecer en una página web para ser vista en un navegador, o pueden ser reproducidos independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a menudo como animaciones en páginas Web y sitios Web multimedia, y más recientemente Aplicaciones de Internet Ricas. Son también ampliamente utilizados en anuncios de la web. 1 http://www.adobe.com/es/products/flash/ Figura 42. Pantalla edición Adobe Flash PFC – Jorge Donat Olcina Página 21 2.5. HERRAMIENTAS DE CREACIÓN Y EDICIÓN DE ELEMENTOS MULTIMEDIA: En este apartado voy a explicar los distintos programas software utilizados para la creación y edición de mi proyecto. Adobe Premiere Pro CS3: Adobe Premiere Pro 2 (antes conocido como Adobe Premiere) es una aplicación en forma de estudio informático destinada a la edición de vídeo en tiempo real. Es parte de la familia Adobe Creative Suite, un conjunto de aplicaciones de diseño gráfico, edición de vídeo y desarrollo web desarrollado por Adobe Systems. Hace poco tiempo salió a la venta la nueva versión de Adobe Premiere Pro, Adobe Premiere Pro CS5. Este editor de video profesional es bastante amigable, si el equipo cuenta con ciertas características en el sistema (mínimo 2 GB de memoria RAM, 80 GB de disco duro, 512 MB de memoria en tarjeta gráfica...); hay que tener en cuenta que el video es muy complejo, así que se necesita bastante espacio para almacenar todo lo que se capture para la edición, y también se necesita que la computadora cuente con una tarjeta de video para que pueda mostrar con fluidez la previsualización y todo se pueda reproducir sin cortes ni ralentizaciones. El programa se puede instalar en una computadora estacionaria o en una laptop y se pueden usar discos duros externos para almacenar ahí los proyectos y no tener que utilizar todo el disco duro de la computadora. 2 http://www.adobe.com/es/products/premiere/ Figura 43. Pantalla edición Adobe Premiere PFC – Jorge Donat Olcina Página 22 Adobe Photoshop Pro CS3: Adobe Photoshop 3 es el nombre o marca comercial oficial que recibe uno de los programas más populares de la casa Adobe, junto con sus programas hermanos Adobe Illustrator y Adobe Flash, y que se trata esencialmente de una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados). Su nombre en español significa "taller de Fotos". Su capacidad de retoque y modificación de fotografías le ha dado el rubro de ser el programa de edición de imágenes más famoso del mundo. Actualmente forma parte de la familia Adobe Creative Suite y es desarrollado y comercializado por Adobe Systems Incorporated inicialmente para computadores Apple pero posteriormente también para plataformas PC con sistema operativo Windows. Su distribución viene en diferentes presentaciones, que van desde su forma individual hasta como parte de un paquete siendo estos: Adobe Creative Suite Design Premium y Versión Standard, Adobe Creative Suite Web Premium, Adobe Creative Suite Production Studio Premium y Adobe Creative Suite Master Collection. Photoshop ha dejado de ser una herramienta únicamente usada por diseñadores / maquetadores, ahora Photoshop es una herramienta muy usada también por fotógrafos profesionales de todo el mundo, que lo usan para realizar el proceso de "positivado y ampliación" digital, no teniendo que pasar ya por un laboratorio más que para la impresión del material. 3 http://www.adobe.com/es/products/photoshop.html Figura 44. Imagen photoshop. PFC – Jorge Donat Olcina Página 23 Object2VR: Object2VR 4 para Mac OS X, Windows y Linux es una aplicación para crear uno o varios archivos QuickTime VR (QTVR) o Macromedia Flash 8 y Flash 9, películas de objetos con características tales como estados de vista, skins personalizables y rotación automática. Entrada: Object2VR permite crear imágenes de objetos de una o varias filas, sólo tienes que arrastrar y soltar imágenes de origen en el carrusel de preparado para ello. Los formatos de imagen soportados son JPEG, PNG, TIFF y archivos de QuickTime VR. También se pueden añadir imágenes de forma individual o mediante una secuencia de imágenes. Estados de las vistas: Para mostrar un objeto en diferentes variantes, por ejemplo, las características diferentes o en diferentes colores, Object2VR le permite agregar estas imágenes como estados de vista. A continuación, puede cambiar entre la imagen fija que muestra las opciones del objeto. 4 http://gardengnomesoftware.com/object2vr.php Figura 45. Entrada de imágenes Object2VR. Figura 46. Estados de las vistas Object2VR. PFC – Jorge Donat Olcina Página 24 Editor de skins: El editor de skins le permite diseñar su propia mirada y la sensación de su reproductor de objeto. Se pueden agregar sus propios botones y gráficos para que coincida con el sitio web del cliente ofreciendo un producto más a medida. También puede agregar animaciones y efectos de sonido al skin para ayudar al usuario a interactuar con las imágenes del objeto. Si no se desea diseñar un skin propio se puede utilizar uno de los aspectos que vienen precargados con Object2VR o skins de descarga de terceros. Exportación: Flash: Object2VR crea las exportaciones del objeto, incluyendo todos los elementos gráficos en un único archivo SWF en formato Flash 8 y Flash 9. Esto permite mayor control sobre el comportamiento de descarga y hace que sea más fácil de distribuir, pudiéndolo agregar a los sistemas de gestión de contenido o publicarlo en un blog. QuickTime: Object2VR también puede exportar los archivos en formato QuickTimeVR, con posibilidad de autoinicio de rotación, regulación de velocidad de rotación, datos de usuario, protección de flags y vistas previsualizadoras. Figura 47. Editor de skins Object2VR. Figura 48. Exportación Object2VR PFC – Jorge Donat Olcina Página 25 PDF2SWF: PDF2SWF 5 es un programa para Windows, Linux y Mac que permite transformar nuestros documentos en formato PDF a un SWF, es decir, un formato en Flash. Las razones por las cuales queramos hacer algo como esto son muy variadas y van desde hacer más difícil el que nuestro trabajo sea copiado al encontrarse en un formato SWF hasta poder insertar nuestro documento PDF en una página web. Normalmente la segunda alternativa es una de las razones más usadas por las que convertimos un documento PDF a Flash. Hacer uso de este programa especializado da muchas opciones de configuración, pues además se complementa con otras herramientas que forman parte de la suite de SWFTools, desarrolladores del programa, que te permiten extraer data de documentos Flash, combinar documentos en Flash provenientes de PDF, pasar imágenes a PDF, etc. PDF2SWF no se encuentra disponible como programa independiente pero puede ser descargado en conjunto como parte de la suite que es compatible no solamente con Windows, sino también con Linux (en sus versiones para 32 y 64 bits), Mac y FreeBSD, OpenBSD, HP-UX, Solaris. De esta forma se constituye en un programa multiplataforma, disponible además en varios idiomas. Características: o PDF2SWF es una herramienta GNU que permite pasar PDF a Flash SWF. o Su funcionamiento es bastante sencillo desde una interfaz gráfica. o Incluye soporte de PDF para bitmaps, colores, deshacer cambios, etc. o Soporte para caché de imágenes que facilitan el no cargarlo más de una vez. o Incluye una amplia gama de fuentes (tipos de letra) acordes al sistema operativo. o Permite conversión automática de hipervínculos (enlaces) en el documento. 5 http://www.descargastotales.com/pdf2swf Figura 49. Pantalla PDF2SWF. PFC – Jorge Donat Olcina Página 32 Conclusiones: Una vez analizados todos los elementos multimedia y seleccionadas las páginas web que para mi criterio se ajustan a éstos, puedo concluir que para el desarrollo de los distintos miniSites es conveniente intentar asemejar en la medida de lo posible la funcionalidad que estos sitios web ofrecen, ya que está comprobado que son herramientas muy útiles, fáciles de usar y sobretodo muy intuitivas para los usuarios que utilizan estas web de forma diaria. Las conclusiones directas obtenidas de los distintos sitios web y que me sirven para la creación de los miniSites son: Que los miniSites dispongan de un apartado para poder consultar en formato PDF embebido la documentación sobre el dispositivo seleccionado, utilizando para ello los iconos predeterminados de un PDF convencional para crear la máxima familiaridad posible con las herramientas utilizadas de forma diaria. Que los miniSites dispongan de algún apartado para poder visualizar imágenes del dispositivo, incluso que puedan simular en conjunto la rotación del objeto, siendo, en la medida de lo posible, lo más intuitivo posible y utilizando flechas de rotación fáciles de entender para poder crear el efecto de rotación deseado. Que los miniSites dispongan de diferentes apartados con vídeos para que el usuario pueda interactuar, oír el sonido, ver vídeos demostrativos o incluso poder ver entrevistas de determinadas personas. PFC – Jorge Donat Olcina Página 33 3. FASE DE DEFINICIÓN En esta fase definiré completamente la aplicación que he desarrollado. A continuación aportaré los datos que me han servido como punto de partida y que marcan el objetivo general del proyecto. 3.1. GESTIÓN DEL ALCANCE En este apartado he realizado el guión multimedia, que comprende el objetivo del miniSite interactivo, el público objetivo, los contenidos, la arquitectura de la información, la metáfora y la especificación de las distintas pantallas que forman el miniSite. 3.1.1. Objetivo principal: El objetivo principal de la creación de estos miniSites es: o Para la ETSINF: Promocionar el Museo de Informática que dispone la Escuela Técnica Superior de Ingeniería Informática de la UPV, creando una alternativa atractiva a la visita física al museo, y divulgar la historia de la informática entre los usuarios de edades comprendidas entre los 14 y los 17 años que estén escolarizados. o Para los usuarios: Poder consultar información educativa de los distintos objetos de forma interactiva, amena y con un enfoque de visita distinto al que se puede hacer de forma presencial en el museo. o Para mí: Mi objetivo principal es poder poner en práctica los conocimientos aprendidos a lo largo del estudio de la carrera, y para ello, poder desarrollar los diferentes miniSites donde se ofrece la posibilidad de poder interactuar con el dispositivo seleccionado, pudiéndolo rotar, oír el sonido original que producía, ver vídeos demostrativos del dispositivo en pleno funcionamiento e incluso poder ver entrevistas a determinadas personas redactando lo que ha sido para él el dispositivo y lo que le ha supuesto en su vida, etc. PFC – Jorge Donat Olcina Página 34 3.1.2. Público objetivo. El público objetivo de este sitio web son todos los usuarios con edades comprendidas entre los 14 y los 60 años. Para realizar el estudio sobre el público objetivo, me voy a apoyar de tablas o gráficos donde se muestran las tendencias de uso de internet. Todas las tablas e información que voy a mostrar han sido extraídas de la Asociación para la Investigación de Medios de Comunicación, basándose en el estudio de resultados de Abril de 2010. En la figura siguiente, según la AIMC (www.aimc.es), vemos la evolución del uso de internet por parte de la población de 14 o más años. Figura 57. Gráfico evolución uso internet. Fuente: http://www.aimc.es/-Audiencia-de-Internet-en-el-EGM-.html Podemos observar que la evolución del uso de internet va creciendo a medida que pasan los años, concluyendo que cada vez hay más usuarios a partir de los 14 años que utilizan esta herramienta de comunicación, donde está incluido nuestro arquetipo de usuario objetivo. En la figura siguiente, según la AIMC (www.aimc.es), observamos la evolución del uso de internet dependiendo del perfil por sexo de los usuarios de 14 o más años. PFC – Jorge Donat Olcina Página 35 Figura 58. Gráfico perfil por sexo. Fuente: http://www.aimc.es/-Audiencia-de-Internet-en-el-EGM-.html Observamos que, poco a poco, la evolución del uso por parte de los dos sexos de internet tiende a igualarse, concluyendo que tanto chicos como chicas hacen el mismo uso. Aplicado a nuestro público objetivo, concluyo que tenemos prácticamente la misma probabilidad que entren a visitar la página del Museo tanto chicos como chicas. En la figura siguiente, según la AIMC (www.aimc.es), observamos el uso de internet dependiendo del perfil por edad de los usuarios. Figura 59. Gráfico evolución uso por edades. Fuente: http://www.aimc.es/-Audiencia-de-Internet-en-el-EGM-.html Podemos ver que la evolución del uso de internet por parte de los usuarios con edades comprendidas entre los 14 y los 19 años, donde se incluye nuestro público objetivo, tiende a estabilizarse alrededor del 11%, pudiendo concluir que un 11% de la población PFC – Jorge Donat Olcina Página 36 que utiliza internet como medio de comunicación puede estar dentro de nuestro público objetivo. En el siguiente gráfico, según la AIMC (www.aimc.es), observamos el uso de internet dependiendo del perfil por clase social de los usuarios. Figura 60.Gráfico uso internet clase social. Analizando el gráfico podemos concluir que se tiende a que el uso de internet cada vez sea más por parte de los usuarios de clase media. En este caso y aplicado a nuestro público objetivo, podemos determinar que la mayoría de los usuarios objetivo serán de clase media. En el siguiente gráfico, según la AIMC (www.aimc.es), observamos el lugar de acceso a internet de los usuarios. Figura 61. Gráfico lugar de acceso. Fuente: http://www.aimc.es/-Audiencia-de-Internet-en-el-EGM-.html PFC – Jorge Donat Olcina Página 37 En este caso, el gráfico nos muestra que los usuarios tienden a conectarse a internet cada día más desde el hogar, mientras que la conexión desde los centros de estudios tiende a disminuir poco a poco, concluyendo que, los usuarios comprendidos dentro de nuestro público objetivo pueden acceder a la nueva página web del Museo cada vez más desde sus hogares y menos desde los centros de estudio. Conclusiones: Una vez observados los distintos gráficos y obtenidas las distintas conclusiones para cada uno de ellos, puedo concluir que disponemos de dos segmentos dentro del público objetivo claramente diferenciados. Por una parte, el principal segmento al cual se dirigen los miniSites son los usuarios entre los 14 y los 17 años, que estén escolarizados, que tengan unas nociones básicas de informática, una educación de nivel medio y estén interesados en realizar una visita interactiva multimedia por el museo. Por otra parte, tengo los usuarios entre 18 y 60 años que cumplan los mismos requisitos, pero que tienen menor grado de afinidad dentro de este público objetivo. Se dirige también a personas de todos los géneros e intenta facilitar lo máximo posible el acceso a la información deseada haciendo al mismo tiempo una navegación fácil y amena. Después de saber que disponemos de dos segmentos distintos, he decidido decantarme por el segmento, formado por los usuarios jóvenes con edades comprendidas entre 14 y 17 años, de clase media, con el objetivo de divertirse, aprender y trastear por la red, pudiendo ser chicos o chicas y que tienden a conectarse a la red principalmente desde sus hogares. Para una mayor especificación y entendimiento del público objetivo voy a proceder a describir el perfil de un usuario arquetipo. Voy a coger el siguiente ejemplo de usuario: · Juan Martínez Soriano. · 16 años. · Estudiante de 1º de Bachiller. · Aficiones: deporte, cine, leer, navegar por internet, chatear, acceder a las redes sociales, jugar a videojuegos, etc. · Música: Pop-Rock y dance. · Características: chico sociable de clase media cuya principal función es el estudio y con ganas de divertirse y entretenerse. Figura 62. Imagen usuario arquetipo PFC – Jorge Donat Olcina Página 38 Los objetivos que espera alcanzar el usuario arquetipo visitando los miniSites son los siguientes: Poder consultar información educativa de los distintos objetos existentes en el museo de forma divertida y amena. Poder realizar una visita al museo de forma distinta a la que se puede hacer de forma presencial. Divertirse durante la visita al museo. Aprender más y mejor sobre los dispositivos informáticos que se utilizaban años atrás. 3.1.3. Contenidos: En este apartado voy a detallar los distintos elementos que componen el miniSite, como por ejemplo el texto, las imágenes, los medios, etc. En mi caso dentro de cada miniSite podemos encontrar cuatro contenidos totalmente identificados, que son, interacción, audio, ficha descriptiva y vídeos. Ahora voy a especificar cada uno de ellos. Cabe destacar que ilustramos los contenidos con imágenes capturadas de la aplicación. PFC – Jorge Donat Olcina Página 39 o Interacción: Este apartado contiene: - Una imagen inicial del dispositivo en el centro de la pantalla. Esta imagen es una instantánea real del dispositivo tomada desde una cámara fotográfica que irá cambiando durante el paso del tiempo, mostrándose a continuación otra instantánea del mismo dispositivo tomada desde otro ángulo de vista, para poder crear de este modo un efecto de rotación del dispositivo continuo. - Una barra de botones en la parte inferior central de la pantalla. Esta barra se maximiza en cuanto el usuario sitúa el ratón encima creando así un efecto de zoom y pudiendo ver con más detalle el icono representativo de los botones. Esta barra contiene un total de 7 botones con una funcionalidad determinada para cada botón. La funcionalidad de los distintos botones especificados de izquierda a derecha es: o Un botón de paso a la instantánea del dispositivo anterior, que simula el giro en sentido horario del dispositivo. o Un botón de paso a la instantánea del dispositivo posterior, que simula el giro en sentido anti horario del dispositivo. o Un botón de paso a la instantánea del dispositivo superior, que simula el giro hacia arriba del dispositivo. o Un botón de paso a la instantánea del dispositivo inferior, que simula el giro hacia abajo del dispositivo. o Un botón de aumento de zoom que realiza una ampliación de la imagen del dispositivo. o Un botón de disminución de zoom que realiza una reducción de la imagen del dispositivo. o Un botón de paso de instantáneas automático en sentido horario que simula el giro continuado del dispositivo. - El logotipo del museo de informática a la parte superior izquierda de la pantalla. - Un botón que cuando es pulsado tiene la funcionalidad de llevarnos a la pantalla inicial del miniSite. Figura 63. Instantánea interacción dispositivo. Figura 64. Barra botones interacción. Figura 65. Logotipo museo informática. Figura 66. Botón Home Interacción. PFC – Jorge Donat Olcina Página 40 o Audio: Este apartado contiene: - Un reproductor de video/audio situado ligeramente en la parte izquierda inferior de la pantalla. Este reproductor dispone de 5 botones, una línea de tiempo de reproducción y un espacio reservado para la visualización del vídeo/audio. Los distintos botones, de izquierda a derecha, desempeñan las siguientes funciones: o Función play/pause de la reproducción. o Función stop de la reproducción. o Función retroceso de la reproducción. o Función avance de la reproducción. o Función mute del sonido de la reproducción. Aparte de las distintas funciones de los botones también existe la posibilidad de deslizamiento del marcador de tiempo de reproducción que nos ayuda a poder seleccionar un instante concreto en el tiempo para que la reproducción continúe desde el instante deseado. - Tres botones de selección de las distintas reproducciones de audio disponibles. Dependiendo de cada botón nos cargará una reproducción u otra en el reproductor. - El logotipo del museo de informática a la parte superior izquierda de la pantalla. - Un botón que cuando es pulsado tiene la funcionalidad de llevarnos a la pantalla inicial del miniSite. Figura 67. Reproductor sección audio. Figura 68. Botones sección Audio. Figura 69. Logo Museo sección audio. Figura 70. Botón Home Audio. PFC – Jorge Donat Olcina Página 41 o Ficha descriptiva: Este apartado contiene: - Un visualizador de documentos PDF integrado con distintas funcionalidades, que son: o Disponibilidad de utilización de barras deslizables, tanto lateral como inferior, para poder visualizar una zona determinada de la hoja del documento seleccionada con más detalle. o Disponibilidad de visualización en parte superior de la pantalla de un texto en formato “número de hoja actual / total hojas del documento” para poder situar al usuario en la hoja deseada. o Disponibilidad de creación de enlaces en el texto integrado en el documento resaltados de color azul. o Disponibilidad de seis botones que realizan distintas acciones. Voy a especificar cada una de ellas refiriéndome a los distintos botones de izquierda a derecha:  Retroceso a la página del documento anterior.  Avance a la página del documento siguiente.  Disminución de zoom de la vista del documento.  Ajuste automático de la vista encajada en pantalla.  Ajuste a escala 1:1 de la vista del documento.  Aumento de zoom de la vista del documento. - Un botón situado en la parte superior izquierda que cuando es pulsado tiene la funcionalidad de llevarnos a la pantalla inicial del miniSite. Figura 71. Visulizador de documentos. Figura 72. Botón Home ficha descriptiva. PFC – Jorge Donat Olcina Página 48 Nombre: T1 Descripción: El texto redactado es “Amstrad CPC 464”. En este caso el texto no dispone de hipervínculos. Apariencia: El texto tiene unas dimensiones de 500x200 pixeles. Está situado en la parte inferior derecha de la pantalla. Es de tipo estático, con un tamaño de fuente 27, negrita, color blanco y con estilo de fuente “Bookman Old Style”. En este caso el texto no conserva el estilo del resto de la interfaz. Comportamiento: Inicialmente el texto sale desde el centro de la pantalla con un tamaño muy reducido y con factor Alfa = 0%. Posteriormente el texto se va haciendo grande desde todos los ángulos y va aumentando progresivamente el nivel de Alfa hasta alcanzar el 100% y situarse en la posición final indicada en la pantalla. Origen de datos: En este caso el texto vendrá de origen con la aplicación. Tabla 6. Tabla T1 pantalla inicial. Nombre: M1 Descripción: El botón recibe el nombre técnico de “botonInteracción_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Interacción”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “INTERACCIÓN” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por la parte derecha de la pantalla y de forma muy rápida en el tiempo se coloca a la parte izquierda quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón el texto del botón se desplaza ligeramente a la parte derecha de éste y cambia de color pasando a negro. También aparece un rectángulo negro en la parte más a la izquierda del botón. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos enlaza con la pantalla “Interacción” detallada más abajo. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 7. Tabla M1 pantalla inicial. PFC – Jorge Donat Olcina Página 49 Nombre: M2 Descripción: El botón recibe el nombre técnico de “botonAudio_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Audio”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “AUDIO” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por la parte derecha de la pantalla y de forma muy rápida en el tiempo se coloca a la parte izquierda quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón el texto del botón se desplaza ligeramente a la parte derecha de éste y cambia de color pasando a negro. También aparece un rectángulo negro en la parte más a la izquierda del botón. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos enlaza con la pantalla “Audio” detallada más abajo. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 8. Tabla M3 pantalla inicial. PFC – Jorge Donat Olcina Página 50 Nombre: M3 Descripción: El botón recibe el nombre técnico de “botonFichaDescriptiva_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Ficha Descriptiva”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “FICHA DESCRIPTIVA” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por la parte derecha de la pantalla y de forma muy rápida en el tiempo se coloca a la parte izquierda quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón el texto del botón se desplaza ligeramente a la parte derecha de éste y cambia de color pasando a negro. También aparece un rectángulo negro en la parte más a la izquierda del botón. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos enlaza con la pantalla “Ficha Descriptiva” detallada más abajo. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 9. Tabla M3 pantalla inicial. PFC – Jorge Donat Olcina Página 51 Nombre: M4 Descripción: El botón recibe el nombre técnico de “botonVideoDemostrativo_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Video Demostrativo”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “VIDEO DEMOSTRATIVO” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por la parte derecha de la pantalla y de forma muy rápida en el tiempo se coloca a la parte izquierda quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón el texto del botón se desplaza ligeramente a la parte derecha de éste y cambia de color pasando a negro. También aparece un rectángulo negro en la parte más a la izquierda del botón. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos enlaza con la pantalla “Video Demostrativo” detallada más abajo. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 10. Tabla M4 pantalla inicial. PFC – Jorge Donat Olcina Página 52 Pantalla “Interacción”: La distribución de los elementos de la pantalla es la siguiente: I1 M 1 M2 M3 M4 M5 M6 M7 M8 I2 Figura 79. Representación pantalla interacción. Las características de los distintos elementos que forman la pantalla son: Nombre: I1 Descripción: La imagen tiene unas dimensiones de 145x60 píxeles. Está situada en la parte superior izquierda de la pantalla. Tiene la característica de tener el fondo transparente, situándose de esta forma encima de la imagen de fondo y solo mostrándose la silueta de la imagen, que en este caso es un texto con un símbolo. El texto que dispone la imagen está escrito en letras minúsculas y acompañado por un símbolo de color rojo redondo en la parte final simulando la letra “O” de la palabra museo. Las letras son de color gris para poder contrastar un poco con el fondo blanco. Comportamiento: Inicialmente la imagen está situada en la parte derecha de la pantalla, y de forma muy rápida en el tiempo se desplaza hacia la parte izquierda superior de la pantalla. Todo este desplazamiento se produce en un breve intervalo de tiempo de aproximadamente 1 segundo. Cabe destacar también que la imagen está importada en formato .psd para hacer posible que se visualice la silueta de la imagen sobre la imagen de fondo. Tabla 11. Tabla I1 pantalla interacción. PFC – Jorge Donat Olcina Página 53 Nombre: I2 Descripción: La imagen tiene unas dimensiones de 500x400 píxeles. Está situada en el centro de la pantalla. Tiene la característica de tener el fondo transparente, situándose de esta forma encima de la imagen de fondo y solo mostrándose la silueta de la imagen, que en este caso es la imagen del dispositivo. Comportamiento: La imagen siempre está situada en el centro de la pantalla, desde que entramos en la pantalla hasta que nos salimos de ella. La peculiaridad de la imagen es que mediante los botones inferiores de la imagen o con la ayuda del ratón, el usuario es capaz de seleccionar una determinada imagen que está situada de forma correlativa a las anteriores formando una especie de malla para simular la rotación del dispositivo. Tabla 12. Tabla I2 pantalla interacción. Nombre: M1 Descripción: El botón recibe el nombre técnico de “botonHomeInteracción_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Inicio”. Apariencia: El botón tiene 38 pixeles de ancho por 38 de alto. Está situado en la parte superior derecha de la pantalla. Su color es azul oscuro con un reborde de color blanco, y tiene aplicado un efecto brillo del 18%. Comportamiento: El botón siempre está situado a la parte superior derecha de la pantalla permaneciendo inmóvil. Cuando el usuario pulsa el botón nos enlaza con la pantalla “Inicio” detallada más arriba. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 13. Tabla M1 pantalla interacción. PFC – Jorge Donat Olcina Página 54 Nombre: M2 Descripción: El botón M2 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de un hipervínculo a la siguiente imagen situada a la parte izquierda de la imagen actual perteneciente a una malla de imágenes que forman el dispositivo. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 14. Tabla M2 pantalla interacción. Nombre: M3 Descripción: El botón M3 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de un hipervínculo a la siguiente imagen situada a la parte derecha de la imagen actual perteneciente a una malla de imágenes que forman el dispositivo. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 15. Tabla M3 pantalla de interacción. PFC – Jorge Donat Olcina Página 55 Nombre: M4 Descripción: El botón M4 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de un hipervínculo a la siguiente imagen situada arriba de la imagen actual perteneciente a una malla de imágenes que forman el dispositivo. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 16. Tabla M4 pantalla de interacción. Nombre: M5 Descripción: El botón M5 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de un hipervínculo a la siguiente imagen situada abajo de la imagen actual perteneciente a una malla de imágenes que forman el dispositivo. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 17. Tabla M5 pantalla de interacción. PFC – Jorge Donat Olcina Página 56 Nombre: M6 Descripción: El botón M6 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de la propiedad de ampliar el zoom de la imagen cuando es pulsado. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 18. Tabla M6 pantalla de interacción. Nombre: M7 Descripción: El botón M7 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de la propiedad de reducir el zoom de la imagen cuando es pulsado. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 19. Tabla M7 pantalla interacción. PFC – Jorge Donat Olcina Página 57 Nombre: M8 Descripción: El botón M8 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación ObjectVR. El botón dispone de la propiedad de hacer que las imágenes que forman la malla de imágenes vayan pasando de izquierda a derecha para simular la rotación del objeto de forma continuada cuando es pulsado una vez, y por otra parte dispone de la propiedad de hacer que las imágenes que forman la malla de imágenes paren su rotación, parando la imagen actual y dejándola fija, simulando que el objeto está parado. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño en estado de reposo, en cambio pasa a tener unos 25x25 píxeles en estado de trabajo. En estado de reposo el botón tiene un color grisáceo y difuminado, en cambio en estado de trabajo el botón cambia su apariencia y pasa a ser gris oscuro y con un alto contraste respecto a su estado anterior. Comportamiento: El botón siempre está dentro de la barra de botones situada en la parte inferior de la imagen. Cuando el usuario sitúa el ratón encima de la barra el botón pasa a estar en esta de trabajo, en cambio cuando el ratón está fuera de la barra el botón pasa a estar en estado de reposo. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 20. Tabla M8 pantalla interacción. PFC – Jorge Donat Olcina Página 64 Pantalla “Ficha Descriptiva La distribución de los elementos de la pantalla es la siguiente: M2 M 1M3 M7M6M5M4T1 T2 Figura 81. Representación pantalla Ficha Técnica. Las características de los distintos elementos que forman la pantalla son: Nombre: M1 Descripción: El botón recibe el nombre técnico de “botonHomeFichaDescriptiva_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Inicio”. Apariencia: El botón tiene 38 pixeles de ancho por 38 de alto. Está situado en la parte superior izquierda de la pantalla. Su color es azul oscuro con un reborde de color blanco, y tiene aplicado un efecto brillo del 18%. Comportamiento: El botón siempre está situado a la parte superior izquierda de la pantalla permaneciendo inmóvil. Cuando el usuario pulsa el botón nos enlaza con la pantalla “Inicio” detallada más arriba. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 28. Tabla M1 pantalla Ficha Descriptiva. PFC – Jorge Donat Olcina Página 65 Nombre: M2 Descripción: El botón M2 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación PDF2SWF. El botón dispone de un hipervínculo a la página anterior del conjunto de páginas que forman el documento Ficha Descriptiva. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño. El botón tiene un color grisáceo y difuminado, quedando bastante resaltado ya que el fondo de la pantalla es totalmente blanco, y creando también hacia el usuario una percepción y visualización clara. Comportamiento: Cuando este botón es pulsado con la ayuda del ratón el documento nos enlazará directamente con la página inmediatamente anterior a la actual, pudiendo simular el paso de la hojas de un documento real. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 29. Tabla M2 pantalla Ficha Descriptiva. Nombre: M3 Descripción: El botón M3 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación PDF2SWF. El botón dispone de un hipervínculo a la página posterior del conjunto de páginas que forman el documento Ficha Descriptiva. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño. El botón tiene un color grisáceo y difuminado, quedando bastante resaltado ya que el fondo de la pantalla es totalmente blanco, y creando también hacia el usuario una percepción y visualización clara. Comportamiento: Cuando este botón es pulsado con la ayuda del ratón el documento nos enlazará directamente con la página inmediatamente posterior a la actual, pudiendo simular el paso de la hojas de un documento real. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 30. Tabla M3 pantalla Ficha Descriptiva. PFC – Jorge Donat Olcina Página 66 Nombre: M4 Descripción: El botón M4 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación PDF2SWF. El botón dispone de funcionalidad de ampliación de zoom. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño. El botón tiene un color grisáceo y difuminado, quedando bastante resaltado ya que el fondo de la pantalla es totalmente blanco, y creando también hacia el usuario una percepción y visualización clara. Comportamiento: Cuando este botón es pulsado con la ayuda del ratón el zoom del documento se amplía pudiendo ver las fuentes del texto con un tamaño mayor e incluso ver las imágenes con más detalle. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 31. Tabla M4 pantalla Ficha Descriptiva. Nombre: M5 Descripción: El botón M5 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación PDF2SWF. El botón dispone de la funcionalidad de ajuste automático de zoom del texto. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño. El botón tiene un color grisáceo y difuminado, quedando bastante resaltado ya que el fondo de la pantalla es totalmente blanco, y creando también hacia el usuario una percepción y visualización clara. Comportamiento: Cuando este botón es pulsado con la ayuda del ratón el zoom del documento se ajusta automáticamente viendo de esta forma el texto centrado y sin tener que utilizar la barra de desplazamiento horizontal para leer toda una fila de texto. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 32. Tabla M5 pantalla Ficha Técnica. PFC – Jorge Donat Olcina Página 67 Nombre: M6 Descripción: El botón M6 no recibe nombre técnico debido a que no viene predeterminado de la aplicación Flash, sino de la aplicación PDF2SWF. El botón dispone de la funcionalidad de ajuste automático de zoom del texto a una hoja completa. Apariencia: El botón tiene alrededor de unos 10x10 píxeles de tamaño. El botón tiene un color grisáceo y difuminado, quedando bastante resaltado ya que el fondo de la pantalla es totalmente blanco, y creando también hacia el usuario una percepción y visualización clara. Comportamiento: Cuando este botón es pulsado con la ayuda del ratón el zoom del documento se ajusta automáticamente viendo de esta forma el texto centrado y sin tener que utilizar la barra de desplazamiento horizontal para leer toda una fila de texto, ni vertical, ya que se muestra una visualización de toda la página entera. Origen de datos: En este caso el botón no viene de origen con la aplicación. Tabla 33. Tabla M6 pantalla Ficha Descriptiva. Nombre: T1 Descripción: El texto muestra el “númeroPáginaActual / númeroPáginasTotales”. En este caso el texto no dispone de hipervínculos. Apariencia: El texto tiene unas dimensiones de 60x10 pixeles. Está situado en la parte superior de la pantalla. Es de tipo estático, con un tamaño de fuente 14 aproximadamente y color gris. En este caso el texto no conserva el estilo del resto de la interfaz. Comportamiento: El texto siempre figura en todo momento en la parte superior de la pantalla. Tiene la funcionalidad de informar al usuario en todo momento de la página actual que está leyendo y la cantidad de páginas totales que tiene el documento. Origen de datos: En este caso el texto no vendrá de origen con la aplicación. Tabla 34. Tabla T1 pantalla Ficha Descriptiva. PFC – Jorge Donat Olcina Página 68 Nombre: T2 Descripción: El texto muestra información referente al dispositivo, es decir, es una ficha descriptiva del dispositivo que estamos tratando. En este caso el texto dispone de hipervínculos que nos pueden ayudar a la hora de entender mejor algunos conceptos. Apariencia: El texto tiene un estilo de fuente “Tahoma” y un tamaño 11. Es de color negro a excepción de los hipervínculos existentes que son de color azul y subrayados. En este caso el texto no conserva el estilo del resto de la interfaz. Los títulos del texto tienen el mismo estilo de fuente, pero en cambio su tamaño es 24. Comportamiento: El texto siempre figura en todo momento en la parte central de la pantalla, a excepción de cuando se utiliza la ampliación o reducción de zoom que ya se debe de hacer uso de las barras horizontales y laterales para situar el texto deseado en el centro de la pantalla. Origen de datos: En este caso el texto no vendrá de origen con la aplicación. Tabla 35. Tabla T2 pantalla Ficha Descriptiva. PFC – Jorge Donat Olcina Página 69 Pantalla “Video Demostrativo”: La distribución de los elementos de la pantalla es la siguiente: I1 I2 M2 M3 M4 M5 M 1 Figura 82. Representación pantalla Video Demostrativo. Las características de los distintos elementos que forman la pantalla son: Nombre: M1 Descripción: El botón recibe el nombre técnico de “botonHomeVideoDemostrativo_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a la pantalla llamada “Inicio”. Apariencia: El botón tiene 38 pixeles de ancho por 38 de alto. Está situado en la parte superior derecha de la pantalla. Su color es azul oscuro con un reborde de color blanco, y tiene aplicado un efecto brillo del 18%. Comportamiento: El botón siempre está situado a la parte superior derecha de la pantalla permaneciendo inmóvil. Cuando el usuario pulsa el botón nos enlaza con la pantalla “Inicio” detallada más arriba. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 36. Tabla M1 pantalla Video Demostrativo. PFC – Jorge Donat Olcina Página 70 Nombre: M2 Descripción: El botón recibe el nombre técnico de “botonVideoDemostrativo1_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a un vídeo llamado “nombreDispositivoVideo1”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “VIDEO 1” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por el borde derecho de la pantalla y de forma muy rápida en el tiempo se coloca a la parte derecha quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón todo el botón se desplaza ligeramente a la parte derecha y no cambia de color. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos carga el vídeo “nombreDispositivoVideo1” en el reproductor “M4” que se detallada más abajo y se ve reflejado en la imagen ilustrativa anterior. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 37. Tabla M2 pantalla Video Demostrativo. PFC – Jorge Donat Olcina Página 71 Nombre: M3 Descripción: El botón recibe el nombre técnico de “botonVideoDemostrativo2_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a un vídeo llamado “nombreDispositivoVideo2”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “VIDEO 2” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por el borde derecho de la pantalla y de forma muy rápida en el tiempo se coloca a la parte derecha quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón todo el botón se desplaza ligeramente a la parte derecha y no cambia de color. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos carga el vídeo “nombreDispositivoVideo2” en el reproductor “M4” que se detallada más abajo y se ve reflejado en la imagen ilustrativa anterior. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 38. Tabla M3 pantalla Video Demostrativo. PFC – Jorge Donat Olcina Página 72 Nombre: M4 Descripción: El botón recibe el nombre técnico de “botonVideoDemostrativo3_mc” en la aplicación Flash. En este caso el botón dispone de un hipervínculo a un vídeo llamado “nombreDispositivoVideo3”. Apariencia: El botón tiene 222 pixeles de ancho por 76 de alto. Está situado en la parte lateral derecha de la pantalla. El fondo es de color rojo y con degradados negros a los laterales. También dispone de un texto “VIDEO 3” en el centro del botón de color blanco, con estilo negrita y con fuente tipo “Book Old Style” al tamaño 22. Comportamiento: El botón inicialmente sale por el borde derecho de la pantalla y de forma muy rápida en el tiempo se coloca a la parte derecha quedándose inmóvil y en la situación reflejada en la pantalla descriptiva. Cabe destacar que cuando el usuario coloca el cursor encima del botón todo el botón se desplaza ligeramente a la parte derecha y no cambia de color. Cuando el usuario no tiene el cursor encima el botón recupera su estado original. Finalmente cuando el usuario pulsa el botón nos carga el vídeo “nombreDispositivoVideo3” en el reproductor “M4” que se detallada más abajo y se ve reflejado en la imagen anterior. Origen de datos: En este caso el botón vendrá de origen con la aplicación. Tabla 39. Tabla M4 pantalla Video Demostrativo PFC – Jorge Donat Olcina Página 73 Nombre: M5 Descripción: El reproductor recibe el nombre técnico de “Video” en la aplicación Flash. La principal función de este reproductor es reproducir los distintos archivos que se cargan en él. Apariencia: El reproductor tiene un tamaño de 500x400 píxeles. El tipo de skin seleccionado para el aspecto de la barra de botones es “SkinUnderAllNoVolCaptionNoFull”. El color de la barra de botones inferior es de color grisáceo para que tenga una relación de color con la imagen de fondo seleccionada. Como hemos comentado el reproductor dispone de una barra de botones en la parte inferior que dispone de 5 botones y una línea de reproducción. Comportamiento: En este caso el reproductor carga automáticamente el vídeo “nombreDispositivoVideo1” situado en la raíz del archivo ejecutable. Dependiendo de si pulsamos o no algún botón de carga de vídeo anteriormente detallados se cargará o no un vídeo en el reproductor. Los 5 botones que dispone la barra de izquierda a derecha tienen las siguientes funciones. El botón 1 tiene la funcionalidad de pausar o inicializar la reproducción del vídeo cargado. El botón 2 tiene la funcionalidad de parar la reproducción del vídeo. El botón 3 tiene la funcionalidad de retroceder en el tiempo la reproducción actual del vídeo. El botón 4 tiene la funcionalidad de avanzar en el tiempo la reproducción actual del vídeo. El botón 5 tiene la funcionalidad de silenciar por completo el sonido del vídeo o habilitar el sonido nuevamente. La línea de reproducción ayuda al usuario a ver el instante de tiempo que ocupa la reproducción, pudiendo con el cursor seleccionar el instante deseado. Origen de datos: En este caso el reproductor vendrá de origen con la aplicación. Tabla 40. Tabla M5 pantalla Video Demostrativo. Nombre: I1 Descripción: La imagen tiene unas dimensiones de 800x600 pixeles que ocupan todo el fondo disponible de la pantalla. El estilo de la imagen es del tipo “wireframe” donde predomina el color negro y se combina con unos detalles en blanco formando un conjunto de rayas no iguales y no uniformes sobre fondo negro. Comportamiento: El comportamiento de la imagen es simplemente para establecer el fondo de pantalla. Tabla 41. Tabla I1 pantalla Video Demostrativo. PFC – Jorge Donat Olcina Página 80 4.1.2. Estimación de duraciones. En este apartado voy a especificar nuevamente mediante una tabla la duración de cada una de las tareas y subtareas que comprende. En ella podremos observar la descripción de la tarea en la tercera columna de la tabla, la duración en días de la tarea en la cuarta columna y la fecha de inicio y fin de cada una de ellas en la quinta y sexta columna respectivamente. La tabla es la siguiente: Tabla 48. Tabla estimación de duraciones. Cabe destacar que en el siguiente punto también se puede apreciar de forma gráfica la estimación de duraciones a través de una representación de un diagrama de Gantt. Id Nombre de tarea Duración Comienzo Fin Predecesoras Nombres de los recursos 1 Análisis. 18 días lun 01/11/10 mié 24/11/10 Trabajo Ingeniero Técnico I.G. 2 Recopilación de los principales dispositivos del museo de la ETSINF. 10 días lun 01/11/10 vie 12/11/10 Trabajo Ingeniero Técnico I.G. 3 Elección de los tres dispositivos más didacticos. 1 día lun 15/11/10 lun 15/11/10 2 Trabajo Ingeniero Técnico I.G. 4 Documentación de los dispositivos seleccionados. 1 día mar 16/11/10 mar 16/11/10 3 Trabajo Ingeniero Técnico I.G. 5 Elección de los elementos multimedia más didácticos. 2 días mié 17/11/10 jue 18/11/10 4 Trabajo Ingeniero Técnico I.G. 6 Especificación de los elementos multimedia seleccionados. 1 día vie 19/11/10 vie 19/11/10 5 Trabajo Ingeniero Técnico I.G. 7 Documentación de los elementos multimedia seleccionados. 3 días lun 22/11/10 mié 24/11/10 6 Trabajo Ingeniero Técnico I.G. 8 Diseño. 7 días jue 25/11/10 vie 03/12/10 Trabajo Ingeniero Técnico I.G. 9 Selección de las herramientas de desarrollo. 2 días jue 25/11/10 vie 26/11/10 7 Trabajo Ingeniero Técnico I.G. 10 Selección de las herramientas de creación y edición. 1 día jue 25/11/10 jue 25/11/10 7 Trabajo Ingeniero Técnico I.G. 11 Documentación de las herramientas de desarrollo. 2 días lun 29/11/10 mar 30/11/10 9 Trabajo Ingeniero Técnico I.G. 12 Documentación de las herramientas de creación y edición. 2 días vie 26/11/10 lun 29/11/10 10 Trabajo Ingeniero Técnico I.G. 13 Diseño de las distintas pantallas de los elementos multimedia. 4 días mar 30/11/10 vie 03/12/10 12 Trabajo Ingeniero Técnico I.G. 14 Implementación y pruebas. 29 días mar 30/11/10 vie 07/01/11 Trabajo Ingeniero Técnico I.G. 15 Realización, recopilación y edición de fotografías de los dispositivos. 5 días lun 06/12/10 vie 10/12/10 13 Trabajo Ingeniero Técnico I.G. 16 Recopilación de documentación referentes a los dispositivos. 2 días lun 13/12/10 mar 14/12/10 15 Trabajo Ingeniero Técnico I.G. 17 Recopilación y edición de vídeos referentes a los dispositivos. 2 días mié 15/12/10 jue 16/12/10 16 Trabajo Ingeniero Técnico I.G. 18 Recopilación y edición de vídeos referentes a las experiencias de uso. 7 días vie 17/12/10 lun 27/12/10 17 Trabajo Ingeniero Técnico I.G. 19 Recopilación y edición de audios referentes a los dispositivos. 2 días mar 28/12/10 mié 29/12/10 18 Trabajo Ingeniero Técnico I.G. 20 Creación del contenido interacción. 15 días mar 30/11/10 lun 20/12/10 12 Trabajo Ingeniero Técnico I.G. 21 Creación del contenido de la ficha técnica. 10 días mié 15/12/10 mar 28/12/10 16 Trabajo Ingeniero Técnico I.G. 22 Creación del contenido de vídeo. 4 días vie 17/12/10 mié 22/12/10 17 Trabajo Ingeniero Técnico I.G. 23 Creación del contenido experiencias de uso. 3 días mar 28/12/10 jue 30/12/10 18 Trabajo Ingeniero Técnico I.G. 24 Creación del contenido de audio. 7 días jue 30/12/10 vie 07/01/11 19 Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. J V S D L 15 nov '10 22 nov '10 PFC – Jorge Donat Olcina Página 81 4.1.3. Orden de ejecución. En este apartado voy a especificar mediante un diagrama de Gantt el orden de ejecución de las tareas y subtareas anteriormente descritas. En este gráfico podremos observar más claramente la dependencia entre las diferentes tareas, el tiempo empleado para la ejecución de cada una de ellas y el seguimiento del desarrollo del proyecto a lo largo del tiempo. El dato más relevante que nos muestra el diagrama es que para la realización completa de todo el proyecto se han empleado unos dos meses de trabajo, con inicio en fecha 01/11/2010 y con fin el 07/01/2011. Cabe destacar también que en el apartado anterior hemos visto en modo de tabla la duración de cada tarea, pero que en este caso esa duración se representa en modo de barras. El diagrama quedaría de la siguiente forma: PFC – Jorge Donat Olcina Página 82 Figura 84. Diagrama de Gantt PFC – Jorge Donat Olcina Página 83 4.1.4. Asignación de recursos. La asignación de recursos para la realización del proyecto ha sido, en este caso, recursos humanos propios, referenciado con la descripción “Trabajo Ingeniero Técnico I.G.”, ya que para el desarrollo del proyecto no se ha utilizado otro recurso humano adicional. Cabe añadir que el recurso humano dedicado para el desarrollo del proyecto ha sido de 8 horas diarias, con dedicación del 100% del tiempo. Estos recursos también se pueden ver reflejados en la tabla siguiente: Figura 85. Tabla asignación de recursos. Id Nombre de tarea Duración Comienzo Fin Predecesoras Nombres de los recursos 1 Análisis. 18 días lun 01/11/10 mié 24/11/10 Trabajo Ingeniero Técnico I.G. 2 Recopilación de los principales dispositivos del museo de la ETSINF. 10 días lun 01/11/10 vie 12/11/10 Trabajo Ingeniero Técnico I.G. 3 Elección de los tres dispositivos más didacticos. 1 día lun 15/11/10 lun 15/11/10 2 Trabajo Ingeniero Técnico I.G. 4 Documentación de los dispositivos seleccionados. 1 día mar 16/11/10 mar 16/11/10 3 Trabajo Ingeniero Técnico I.G. 5 Elección de los elementos multimedia más didácticos. 2 días mié 17/11/10 jue 18/11/10 4 Trabajo Ingeniero Técnico I.G. 6 Especificación de los elementos multimedia seleccionados. 1 día vie 19/11/10 vie 19/11/10 5 Trabajo Ingeniero Técnico I.G. 7 Documentación de los elementos multimedia seleccionados. 3 días lun 22/11/10 mié 24/11/10 6 Trabajo Ingeniero Técnico I.G. 8 Diseño. 4 días jue 25/11/10 mar 30/11/10 Trabajo Ingeniero Técnico I.G. 9 Selección de las herramientas de desarrollo. 2 días jue 25/11/10 vie 26/11/10 7 Trabajo Ingeniero Técnico I.G. 10 Selección de las herramientas de creación y edición. 1 día jue 25/11/10 jue 25/11/10 7 Trabajo Ingeniero Técnico I.G. 11 Documentación de las herramientas de desarrollo. 2 días lun 29/11/10 mar 30/11/10 9 Trabajo Ingeniero Técnico I.G. 12 Documentación de las herramientas de creación y edición. 2 días vie 26/11/10 lun 29/11/10 10 Trabajo Ingeniero Técnico I.G. 13 Implementación y pruebas. 25 días mar 30/11/10 lun 03/01/11 Trabajo Ingeniero Técnico I.G. 14 Realización, recopilación y edición de fotografías de los dispositivos. 5 días mar 30/11/10 lun 06/12/10 12 Trabajo Ingeniero Técnico I.G. 15 Recopilación de documentación referentes a los dispositivos. 2 días mar 07/12/10 mié 08/12/10 14 Trabajo Ingeniero Técnico I.G. 16 Recopilación y edición de vídeos referentes a los dispositivos. 2 días jue 09/12/10 vie 10/12/10 15 Trabajo Ingeniero Técnico I.G. 17 Recopilación y edición de vídeos referentes a las experiencias de uso. 7 días lun 13/12/10 mar 21/12/10 16 Trabajo Ingeniero Técnico I.G. 18 Recopilación y edición de audios referentes a los dispositivos. 2 días mié 22/12/10 jue 23/12/10 17 Trabajo Ingeniero Técnico I.G. 19 Creación del contenido interacción. 15 días mar 30/11/10 lun 20/12/10 12 Trabajo Ingeniero Técnico I.G. 20 Creación del contenido de la ficha técnica. 10 días jue 09/12/10 mié 22/12/10 15 Trabajo Ingeniero Técnico I.G. 21 Creación del contenido de vídeo. 4 días lun 13/12/10 jue 16/12/10 16 Trabajo Ingeniero Técnico I.G. 22 Creación del contenido experiencias de uso. 3 días mié 22/12/10 vie 24/12/10 17 Trabajo Ingeniero Técnico I.G. 23 Creación del contenido de audio. 7 días vie 24/12/10 lun 03/01/11 18 Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. J V S D L 15 nov '10 22 nov '10 Id Nombre de tarea Duración Comienzo Fin Predecesoras Nombres de los recursos 1 Análisis. 18 días lun 01/11/10 mié 24/11/10 Trabajo Ingeniero Técnico I.G. 2 Recopilación de los principales dispositivos del museo de la ETSINF. 10 días lun 01/11/10 vie 12/11/10 Trabajo Ingeniero Técnico I.G. 3 Elección de los tres dispositivos más didacticos. 1 día lun 15/11/10 lun 15/11/10 2 Trabajo Ingeniero Técnico I.G. 4 Documentación de los dispositivos seleccionados. 1 día mar 16/11/10 mar 16/11/10 3 Trabajo Ingeniero Técnico I.G. 5 Elección de los elementos multimedia más didácticos. 2 días mié 17/11/10 jue 18/11/10 4 Trabajo Ingeniero Técnico I.G. 6 Especificación de los elementos multimedia seleccionados. 1 día vie 19/11/10 vie 19/11/10 5 Trabajo Ingeniero Técnico I.G. 7 Documentación de los elementos multimedia seleccionados. 3 días lun 22/11/10 mié 24/11/10 6 Trabajo Ingeniero Técnico I.G. 8 Diseño. 4 días jue 25/11/10 mar 30/11/10 Trabajo Ingeniero Técnico I.G. 9 Selección de las herramientas de desarrollo. 2 días jue 25/11/10 vie 26/11/10 7 Trabajo Ingeniero Técnico I.G. 10 Selección de las herramientas de creación y edición. 1 día jue 25/11/10 jue 25/11/10 7 Trabajo Ingeniero Técnico I.G. 11 Documentación de las herramientas de desarrollo. 2 días lun 29/11/10 mar 30/11/10 9 Trabajo Ingeniero Técnico I.G. 12 Documentación de las herramientas de creación y edición. 2 días vie 26/11/10 lun 29/11/10 10 Trabajo Ingeniero Técnico I.G. 13 Implementación y pruebas. 25 días mar 30/11/10 lun 03/01/11 Trabajo Ingeniero Técnico I.G. 14 Realización, recopilación y edición de fotografías de los dispositivos. 5 días mar 30/11/10 lun 06/12/10 12 Trabajo Ingeniero Técnico I.G. 15 Recopilación de documentación referentes a los dispositivos. 2 días mar 07/12/10 mié 08/12/10 14 Trabajo Ingeniero Técnico I.G. 16 Recopilación y edición de vídeos referentes a los dispositivos. 2 días jue 09/12/10 vie 10/12/10 15 Trabajo Ingeniero Técnico I.G. 17 Recopilación y edición de vídeos referentes a las experiencias de uso. 7 días lun 13/12/10 mar 21/12/10 16 Trabajo Ingeniero Técnico I.G. 18 Recopilación y edición de audios referentes a los dispositivos. 2 días mié 22/12/10 jue 23/12/10 17 Trabajo Ingeniero Técnico I.G. 19 Creación del contenido interacción. 15 días mar 30/11/10 lun 20/12/10 12 Trabajo Ingeniero Técnico I.G. 20 Creación del contenido de la ficha técnica. 10 días jue 09/12/10 mié 22/12/10 15 Trabajo Ingeniero Técnico I.G. 21 Creación del contenido de vídeo. 4 días lun 13/12/10 jue 16/12/10 16 Trabajo Ingeniero Técnico I.G. 22 Creación del contenido experiencias de uso. 3 días mié 22/12/10 vie 24/12/10 17 Trabajo Ingeniero Técnico I.G. 23 Creación del contenido de audio. 7 días vie 24/12/10 lun 03/01/11 18 Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. Trabajo Ingeniero Técnico I.G. J V S D L 15 nov '10 22 nov '10 PFC – Jorge Donat Olcina Página 84 5. FASE DE PRODUCCIÓN En este apartado voy a especificar las tareas que he realizado para poder desarrollar la aplicación. Como hemos visto en los puntos anteriores la fase de producción se divide principalmente en cuatro partes: Análisis, Diseño, Implementación y Pruebas. Ahora voy a especificar cada una de ellas. Análisis: En esta fase, en primer lugar, se llevo a cabo la recopilación de los principales dispositivos del museo de la ETSINF. Para ello creé una colección de todos los dispositivos disponibles, reflejados en el punto “2.1. Principales dispositivos de la ETSINF” para poder realizar a continuación un mejor estudio de cada uno de ellos. Una vez recopilados todos los dispositivos tuve que realizar la elección de los tres dispositivos más didácticos. Para realizar esta elección me base en la utilización de una tabla donde se recogían distintos criterios evaluadores que me ayudasen en la elección. A continuación, realicé una documentación de los tres dispositivos seleccionados y partiendo de esta documentación realicé la elección de los elementos multimedia más didácticos que se ajustaran a los dispositivos seleccionados. Para finalizar con esta fase una vez elegidos los distintos elementos multimedia procedí a especificar cada uno de ellos y realizar su correspondiente documentación. Diseño: En esta fase, para poder realizar el diseño tuve en primer lugar que seleccionar las herramientas de desarrollo, creación y edición más adecuadas para poder llevar a cabo el desarrollo de la aplicación. Una vez realizado este paso procedí a la documentación de cada una de las herramientas de desarrollo, creación y edición seleccionadas. Para finalizar esta fase, una vez realizado todo este proceso realicé el diseño de las distintas pantallas de los elementos multimedia, reflejado en el punto “3.1.6. Especificación de las distintas pantallas”. Implementación y Pruebas: En esta fase, para poder realizar la creación de los distintos miniSites hice lo siguiente: PFC – Jorge Donat Olcina Página 85 o Para el contenido de Audio: Para este contenido me centré principalmente en la ayuda que me ofrecían páginas web como por ejemplo YouTube, donde tenía la posibilidad de encontrar vídeos que contenían audio grabado original de los distintos dispositivos. Una vez seleccionados los distintos vídeos con audio que más se ajustaban a mis necesidades descargaba el vídeo correspondiente en formato .flv para la posterior vinculación con el proyecto Flash. La vinculación con el proyecto la he realizado mediante la utilización de scripts específicos que dispone Flash. o Para el contenido de Video: Este contenido es muy similar al contenido anterior, y las tareas de producción son prácticamente las mismas. Igualmente para este contenido me centré principalmente en la ayuda que me ofrecían páginas web como por ejemplo YouTube, donde tenía la posibilidad de encontrar vídeos donde aparecían o que tenían relación con los distintos dispositivos. Una vez seleccionados los distintos vídeos que más se ajustaban a mis necesidades descargaba el vídeo correspondiente en formato .flv para la posterior vinculación con el proyecto Flash. La vinculación con el proyecto la he realizado mediante la utilización de scripts específicos que dispone Flash. o Para el contenido de la Ficha Descriptiva: Este contenido es un poco más complicado de confeccionar que los anteriores. Para la realización de éste he necesitado consultar páginas web como la Wikipedia donde podía consultar gran cantidad de información sobre los distintos dispositivos de forma fácil y obteniendo una gran cantidad de información detallada. Una vez detectada la información más adecuada de cada dispositivo la recopilaba en un archivo Word. La ventaja que me ofrecía la información obtenida de la Wikipedia era que ya disponía de enlaces creados dentro del mismo documento y que ayudaban mucho al usuario visitante de los miniSites a comprender muchos términos técnicos que son difíciles de comprender. Una vez confeccionado el correspondiente archivo lo exportaba directamente a formato PDF para posteriormente con la ayuda del programa “PDF2SWF”, especificado en puntos anteriores, convertirlo en un archivo importable al proyecto Flash mediante la ayuda nuevamente de scripts incorporados por la aplicación Flash. PFC – Jorge Donat Olcina Página 86 o Para el contenido de Interacción: Este ha sido el contenido más complicado de realizar. Para este contenido necesitaba poder hacer fotos a los dispositivos desde varios puntos de vista. Cada dispositivo estaba formado por un total de 36 fotos. Estas 36 fotos se separaban en 12 fotos para la vista inferior del dispositivo con un movimiento de 360o, otras 12 para la vista central y otras 12 para la vista superior. Realizaba 12 fotos por vista para poder obtener una instantánea cada 30o de rotación del dispositivo. Para poder rotar el dispositivo de forma uniforme y sin obtener demasiados errores de montaje fotográficos posteriores tuve que construir una peana giratoria para poder situar en la parte superior el dispositivo y de este modo poder rotarlo de forma libre. Para la simulación de rodamientos que facilitaran la rotación utilicé pelotas de ping-pong, ya que son resistentes y pequeñas al mismo tiempo. Otro material utilizado fueron mesas cubiertas de tala blanca para poder crear un fondo blanco y facilitar el recortado de la imagen posterior. También se hizo uso de focos de luz blanca para disminuir en gran medida las sombras producidas por el flash de la cámara. Ahora muestro una imagen ilustrativa del escenario donde se realizó el proceso fotográfico del dispositivo, con los elementos anteriormente nombrados: Figura 86. Escenario fotográfico dispositivos. PFC – Jorge Donat Olcina Página 87 o Para el contenido de Experiencias de Uso: Para este contenido he necesitado grabar a tres personas distintas y cada una de ellas con una experiencia de uso sobre uno de los tres dispositivos seleccionados. Una vez digitalizadas las distintas grabaciones procedí a editarlas y a exportarlas en formato .flv para poder posteriormente importarlas a la aplicación multimedia. La vinculación con el proyecto la he realizado mediante la utilización de scripts específicos que dispone Flash. En este apartado el usuario grabado responde a cuatro preguntas formuladas respecto a la experiencia con el dispositivo, de este modo el usuario visitante del miniSite puede entender que supuso estos dispositivos para la gente de pudo disponer y tuvo experiencia con ellos. PFC – Jorge Donat Olcina Página 88 6. CONCLUSIONES Las conclusiones que obtengo una vez realizado el proyecto son: La realización del proyecto me ha servido principalmente para poner en práctica gran cantidad de conocimientos aprendidos a lo largo de la carrera y ayudándome a entenderlos mejor. He aprendido que es complicado usar herramientas de diseño, como por ejemplo la aplicación ‘Flash’, sin tener un previo conocimiento o uso de ellas, ya que se invierte gran cantidad de tiempo para familiarizarte y poder usar medianamente bien la herramienta. En caso de tener que realizar nuevamente el proyecto es muy probable que no volviera a utilizar una herramienta tan compleja. Otro aspecto positivo que he podido concluir es que he conocido de primera mano gran cantidad de dispositivos del Museo de Informática de la Universidad Politécnica de Valencia, consiguiendo un mayor conocimiento sobre éstos y un mejor entendimiento de la evolución del mundo de la informática en lo que ha dispositivos se refiere. Pienso también que la redacción de la memoria ha sido bastante completa, ya que abarca gran cantidad de contenidos distintos y todos han sido especificados con bastante detalle. La memoria recoge también información contratada de diferentes sitios web, ayudando de esta forma a la toma de diferentes decisiones durante la realización del proyecto. Una de las principales barreras para realizar determinados puntos del proyecto ha sido que en ciertas ocasiones no disponía del material necesario o adecuado para poder realizar las distintas tareas, imposibilitando así un mejor resultado en alguno de los contenidos de los distintos miniSites. Para finalizar, pienso que ha sido muy positiva la ejecución de este proyecto, ya que me ha servido para conocer nuevas herramientas de trabajo y sobre todo poder poner en práctica conocimientos aprendidos en diferentes asignaturas de la carrera. PFC – Jorge Donat Olcina Página 89 7. BIBLIOGRAFÍA Sitio web - Adobe Flash professional http://www.adobe.com/es/products/flash/ Sitio web - Adobe Premiere professional http://www.adobe.com/es/products/premiere/ Sitio web - Adobe Photoshop http://www.adobe.com/es/products/photoshop.html Sitio web - Garden Gnome Software http://gardengnomesoftware.com/object2vr.php Sitio web - Descargas Totales http://www.descargastotales.com/pdf2swf Sitio web - Mercedes Benz España www.mercedes-benz.es Sitio web – Periódico digital 20minutos – Sección televisión www.20minutos.tv Sitio web - Ministerio de Educación de España www.educacion.es Sitio web - Mercedes Benz España - Sección Turismos http://www.mercedesbenz.es/content/spain/mpc/mpc_spain_website/es/home_mpc/passengercars/home/new_ca rs/models/clclass/_c216/configurator/configurator_c216.html?tp_ccci=/dsc_es/globalsessionid/DSC_es6D 35367D67306F06FF50565A54500200/dsc_locale/es_ES/appId/DSC_es/siteLocale/es_ES/P350 1ViewBean.jam1;jsessionid=0000N_RSUr1i1_MTAWPemTUj8Ce:15hadqf37 Sitio web - Periódico digital 20minutos – Sección televisión – Activistas http://www.20minutos.tv/video/kyzADL02-activistas-se-manifiestan-en-barcelona/0/ Sitio web - Ministerio de Educación de España – Sección requisitos http://www.educacion.es/dctm/ministerio/educacion/universidades/convocatorias/tituladosdoctores-profesores-universitarios/becas-fpu/convocatoria-2009/2009-1-a-requi-soli-direcentro.pdf?documentId=0901e72b80093179 Sitio web – Asociación para la Investigación de Medios de Comunicación http://www.aimc.es/-Audiencia-de-Internet-en-el-EGM-.html Diego Álvarez – Universidad Politécnica de Valencia Guión multimedia y lenguaje de especificación de guiones