DESARROLLO WEB

En primer lugar  distinguir entre desarrollo web y diseño web:

Desarrollo web: Se refiere a la programación necesaria para construir una aplicación o sitio web se suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor que funcionan de manera independiente y emplean tecnologías distintas aunque aveces interactúan por lo que también se habla de programación  de la parte cliente-servidor.

• PARTE CLIENTE: Los conocimientos que se necesitan tener son por un lado HTML y CSS para la creación de las paginas web y por otro JAVASCRIPT y DOM para la programación de la parte cliente. 
• PARTE SERVIDOR: El desarrollo de la parte servidor se refiere a la programación necesaria para construir el "back end" de un sitio web, que es la parte de  un sitio web que no ven los visitantes pero es muy necesaria para poder presentar la información correcta en el formato correcto a los visitantes. 
• En el desarrollo de la parte servidor se emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusión, par acceder a una base de datos y recuperar la información necesaria para visualizar una pagina web, por tanto el programador web también cubre la parte del diseño y desarroyo de las bases de datos, y también es necesario tener en cuenta la seguridad del producto final.

Diseño web: Se refiere al diseño visual de un sitio web o de una pagina web y con frecuencia implica el diseño de los elementos gráficos de la pagina. En el diseño se tienen en cuenta elementos gráficos como la tipografía, los colores, los tamaños y las proporciones. 

El diseño se suele realizar con una herramienta gráfica como Adobe Photoshop o GIMP y proporciona el marco para la presentación y comportamiento de la pagina, el diseño  final de un diseño web no  suele contener código.

PROTOTIPADO:  Al igual que un arquitecto que crean los planos y las maquetas antes de realizar un edificio, en programación también se realizan los equivaentes a planos y maquetas antes del desarrollo de una web.

• PLANOS:  serian los diagramas de organización y funcionamiento y se denominan diagramas de contenido o flujo o mapa web (Blueprints).  A la hora  de realizar este paso es muy importante que sea comprensible y se refleje con claridad la estructura el flujo de navegación y la relación entre los elementos. Enlace al libro de Jesse James Garret destacado arquitecto de la información. http://www.jjg.net/ia/recon/spanish.html. Otro enlace interesantes es este la diagramación en los sistemas de información de Ronda Leon http://www.nosolousabilidad.com/articulos/diagramacion.htm, en el recopila diferentes propuestas de vocabulario entre ellos el suyo propio. 

• MAQUETA:  serian diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel pagina. Existen diferentes tipos entre prototipos de alta fidelidad y de baja fidelidad, skeching, wireframes, storyboard, prototipos funcionales.  En ningún caso se debe incluir diseño  grafico  en un prototipo , este lo realizaremos en etapas posteriores y es importante aclararselo al cliente, tampoco se deben utilizar colores y por ello se usan gamas de grises. 

1. Skeching: Boceto rapido e informal para expresar ideas al cliente o en reuniones de equipo, un libro recomendable es Sketching user experience de http://www.billbuxton.com/.
2. Wireframe: Es mas elavorado ya incluye el contenido de cada pagina, cabeceras elaces, listas, formularios, el layout (ubicación, colocación y agrupación e los elementos de pagina asi como la estrategia de navegación y la priorización de contenidos en la misma). Un wireframe debe tambien incluir el comportamiento mediante notas asociadas a los elementos para idicar como deben mostrarse o su comportamiento. 
3. Storyboard: No es mas que una secuencia de wireframes.
4. Prototipos funcionales: Son de alta fidelidad, tambien llamados maquetas  o mockups y pemitn detallar el proceso interactivo de una o varias tareas, son prototipos o maquetas dinamicas normalmete en HTML que simulan partes del sistema final a desarroyar.

Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios los requisitos del proyecto y la arquitectura de la información de la aplicación web. 

Lecturas recomendadada 

• http://www.trea.es/books/arquitectura-de-la-informacion-en-entornos-web. 
• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• http://wireframes.linowski.ca/

Cinco consejos basicos para realizar un buen prototipo:

1. Sencillez y claridad. 
2. Hazlo en blanco y negro. 
3. Represnta los tamaños y proporciones de los bloques  de contenido. 
4. Ten en cuenta las pautas de accesibilidad y usabilidad. 
5. Y sobre todo "diseña para tus usuarios".