El siguiente texto es una descripción muy general, a vista de pájaro o a tres metros sobre el cielo, del proyecto que se desarrollará a lo largo del curso.
En una situación real, puedes comenzar un proyecto a partir de diferentes escenarios, como por ejemplo:
En este curso, el escenario es una mezcla entre el primero y el segundo, porque en algunos momentos la información que recibirás es la misma que puedes recibir de un cliente medio:
Cliente: quiero una web.
Desarrollador: ¿qué tipo de web?
Cliente: pues una web.
Desarrollador: ¿y cómo la quiere?
Cliente: sorprendente, única, que deje a la gente con la boca abierta.
Desarrollador: ¿y qué presupuesto tiene?
Cliente: ¿Ehhh, es que te tengo que pagar?
Sin embargo, en otras ocasiones (por ejemplo, en el diseño de la base de datos) recibirás una información más completa y detallada, como si la hubiese realizado un compañero de trabajo.
El objetivo de este escenario mixto es que en algunas partes tengas libertad para pensar, ser creativo e intentar encontrar la mejor solución por ti mismo, mientras que en otras partes estarás limitado a hacer lo que se te pida y tendrás que cumplir la especificación “al pie de la letra”.
Muy importante: la siguiente descripción, y la que se te proporcionará en el resto de las prácticas, no está basada en ninguno de los formalismos que se emplean en la ingeniería del software para la recogida de requisitos y el análisis y el diseño del software. En un proyecto real deberías de aplicar las buenas prácticas de la ingeniería del software, pero en este curso no lo hacemos porque no es el objetivo del curso: este no es un curso de ingeniería del software.
Con esta práctica vamos a empezar el desarrollo de un sitio web de gestión de álbumes de fotos llamado “PI - Pictures & Images” (este es el nombre que nosotros le hemos dado, tú lo puedes llamar como quieras). Con cada práctica el sitio web crecerá tanto en número de páginas como en funcionalidad. Al llegar a la última práctica, aunque ahora te pueda parecer un imposible, tendrás un aplicación web real en funcionamiento, pero eso sí, recuerda, “de juguete”.
El objetivo es crear un sistema gestor de álbumes de fotos que admita múltiples usuarios, una especie de flickr6 o Instagram7, pero de juguete. Un usuario se tendrá que registrar para poder emplear el sistema y publicar fotos. Una vez registrado, podrá crear todos los álbumes que quiera y en cada álbum podrá publicar todas las fotos que quiera. Para visualizar las fotos no es necesario estar registrado: cualquiera puede ver los álbumes y sus fotos, aunque no con la máxima resolución y con toda la información existente.
Desde el punto de vista del control de acceso (seguridad), la aplicación web (o sitio web) está divida en tres partes:
En esta práctica vamos a plantear parte del contenido y del funcionamiento de la parte pública y de la parte pública restringida. La parte privada de la aplicación, su contenido y funcionamiento se planteará más adelante en otras prácticas.
La parte pública contiene la página principal del sitio web, en la que se mostrará, entre otras cosas, un formulario de acceso a la parte privada y un formulario para registrase como nuevo usuario. Estos dos formularios también se pueden mostrar como enlaces a sendas páginas independientes en las que se muestran los formularios con sus correspondientes instrucciones.
En la página principal también se mostrará un listado con las últimas fotos subidas. ¿Cuántas fotos se deben mostrar? Un prototipo no se debe sobrecargar con muchos detalles concretos porque el objetivo es tener una visión general del sistema que se desea construir. Más adelante te diremos que se deben mostrar las últimas cinco fotos subidas.
En la página principal también se mostrará un enlace para ir a la página con el formulario de búsqueda, que contiene un formulario para poder realizar búsquedas de fotos en base a diferentes criterios, como por ejemplo, el título de la foto, la fecha de realización de la foto, o el país en el que se tomó la foto. En la página principal también se mostrará un formulario de búsqueda rápida con un único cuadro de texto.
La página de registro como nuevo usuario contiene un formulario con los datos necesarios para registrarse:
La página de resultado de una búsqueda contiene un listado con un resumen (foto, título, fecha y país) de las fotos que cumplen los criterios de una búsqueda (el criterio empleado en la búsqueda se debe visualizar en la página).
A continuación se describe el contenido de la parte pública restringida, que sólo debe ser visible para aquellos usuarios que se hayan registrado e identificado. Los usuarios no registrados o los usuarios registrados pero no identificados no pueden tener acceso a ella y se debe mostrar una página de aviso.
Cuando se visualiza la página de detalle de una foto, a la que se puede llegar de diferentes formas, como por ejemplo a partir del listado con las últimas fotos subidas desde la página principal o a partir de la página de resultado de una búsqueda, se debe mostrar la foto y toda la información disponible sobre la foto, como por ejemplo, el título de la foto, la fecha de realización de la foto, el país en el que se tomó la foto, el álbum al que pertenece la foto y el usuario que tomó la foto.
Desde la página de detalle de una foto se puede navegar a la página para ver un álbum (el álbum correspondiente a la foto que se está visualizando), que muestra todas las fotos que contiene el álbum seleccionado. A esta página también se puede navegar desde la página con el detalle del usuario, que debe mostrar la lista de todos los álbumes del usuario.
La página con el detalle del usuario muestra todos los datos de registro del usuario y un listado de todos sus álbumes. Si se selecciona un álbum, se muestra la página para ver un álbum con todas las fotos que contiene. Desde ahí se puede navegar a la página de detalle de una foto.
Muy importante: el objetivo de la práctica del curso es aprender a desarrollar aplicaciones web, el objetivo no es desarrollar una aplicación web “sorprendente, única, que deje a la gente con la boca abierta”, como te pediría el típico cliente. Es decir, puedes pensar que hay cosas inútiles, tontas o que se podrían haber hecho mejor: puedes tener razón, pero no pasa nada, porque la aplicación que vas a desarrollar es simplemente una excusa para que practiques y aprendas. Cuando la termines, deberías tirarla a la basura, porque te darás cuenta de que si la tuvieras que volver a hacer, la harías de una forma totalmente diferente. Por supuesto, dentro de 15 semanas no sabrás lo mismo que ahora, no serás la misma persona, hoy es el primer día del resto de tu vida como desarrollador web. Recuérdalo, no lo olvides.
En esta práctica debes aplicar las técnicas de la diagramación y el prototipado para especificar la organización, la estructura, la navegación y el funcionamiento de la aplicación web. ¿Con qué método? ¿Hasta qué nivel de detalle? Tienes libertad, pero en el vídeo del curso Prototipado: wireframes, mockups y prototipos8 se te ofrecen numerosos recursos y en particular te recomendamos el Un vocabulario visual para describir arquitectura de información y diseño de interacción9 de Jesse James Garret.
Antes de ponerte a realizar el diagrama de estructura y navegación, debes leer varias veces la descripción del sistema para tener una imagen mental de la aplicación. Intenta imaginar las distintas páginas que componen la aplicación y a un usuario navegando de una página a otra. Cuando lo tengas claro, plásmalo en un diagrama.
Después de leer la descripción del sistema quizás te hayas preguntando “¿cómo se llega a la página con el detalle del usuario?”.
También te puedes preguntar “¿qué debe hacer la aplicación cuando un usuario no esté registrado e intente acceder al detalle de una foto?”. Existen muchas opciones y como analista y diseñador debes elegir la que creas más adecuada, aquí te damos algunas ideas:
En el enunciado no te hemos dicho muchas cosas: acostúmbrate, el cliente tampoco te lo contará todo (bueno, en realidad, te contará bastante poco).
Y recuerda, la Web es hipertexto, la Web no es lineal, a un mismo sitio se puede llegar de diferentes formas, aprovéchalo y explótalo al máximo.
Además del diagrama de estructura y navegación, también debes realizar el prototipo (wireframe) de dos páginas: página principal y la página de resultado de una búsqueda.