crear paginas web

Introducción al desarrollo web (iDESWEB)
Práctica 0: Prototipado de una aplicación web

1.

Objetivos
Aprender a prototipar una aplicación web.

2.

Recursos
Prototipado: wireframes, mockups y prototipos1 : vídeo sobre el prototipado, explica la importancia de prototipar una aplicación web antes de implementarla, los diferentes tipos de diagramas
para representar la navegación, laestructura y el funcionamiento de una aplicación web.
Wireframes2 : terminología, tipos de diagramas, wireframes.
Un vocabulario visual para describir arquitectura de información y diseño de interacción3 : los diagramas son una herramienta esencial para comunicar arquitectura de información
y diseno de interacción en equipos de desarrollo Web. Este documento trata las consideraciones
en eldesarrollo de tales diagramas, delinea una simbología básica para diagramar conceptos de
arquitectura de información y diseno de interacción, y entrega guías para el uso de estos elementos.
La diagramación en la arquitectura de información4 : un acercamiento conceptual a los
diagramas en el proceso de creación de arquitecturas de información. Se muestran algunas formas
de hacer diagramas, tipos dediagramas existentes y posibles herramientas para su elaboración. El
autor también propone su propia forma para la elaboración de diagramas.

3.

Introducción

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 diferentesescenarios, como por
ejemplo:
Puede ser que tengas que iniciar el proyecto desde cero a partir de una o varias entrevistas con el
cliente que te solicita la realización del proyecto. El cliente es la persona (que puede representar a
una empresa u organización), que te solicita el proyecto y puede ser un cliente “de verdad”, es decir,
alguien ajeno a la empresa en la que trabajas, puede ser undepartamento de tu propia empresa,
puede ser tu vecino o familiar que te viene con el rollo de “¿me puedes hacer una web?, eso para
ti es fácil, lo haces en una tarde y además seguro que te diviertes” o, si el proyecto es para ti, el
cliente serías tú mismo.
Puede ser que tengas que iniciar el proyecto a partir del análisis y diseño que ha realizado previamente otra persona, como por ejemplootro compañero de trabajo. Según el nivel de madurez
del equipo de trabajo, puede ser que inicies tu trabajo a partir de unas pocas hojas con manchas
de café, a partir de una descripción textual y algunos diagramas informales, o en el otro extremo,
puede ser que se disponga de una amplia documentación alojada en un repositorio compartido que
incluso incluye control de versiones (si se da esecaso, significa que alguien del equipo ha trabajado
antes en la NASA, seguro).
1 http://youtu.be/vJrEbO50kxA
2 http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
3 http://www.jjg.net/ia/visvocab/spanish.html
4 http://www.nosolousabilidad.com/articulos/diagramacion.htm

1

Puede ser que tengas que iniciar el proyecto a partir de un proyecto a medio hacer, o incluso,
un proyecto yaterminado al que hay que cambiarle algo, añadirle algo nuevo o hacerle “unos
pequeños retoques” (mantenimiento de software5 ). Esto es bastante ingrato, se puede convertir en
un verdadero infierno (hasta con el software hecho por uno mismo) y es mejor que no pensemos en
ello.
En este curso, el escenario es una mezcla entre el primero y el segundo, porque en algunos momentos
la información querecibirá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...