Proyecto Módulo 2: Mi página web sobre mi identidad digital 2/5

Como hemos visto en la entrada anterior, el proyecto del segundo módulo del curso es construir una web con HTML. Ya han quedado definidos los objetivos del sitio web, las necesidades de los usuarios, las funciones y requerimientos de la web y la navegación. Ahora hay que prototipar.

Prototipado de la web

Primero y antes de todo vamos a hacer un listado de los elementos que van a aparecer en el contenido de la web:

1. Identidad personal definida
2. Mis objetivos y servicios en la red
3. Mis objetivos y servicios fuera de la red
4. Método de contacto conmigo
5. Información de mis estudios
6. Información de mis "skills"
7. Proyectos personales finalizados
8. Proyectos personales en proceso

He numerado los elementos de la lista para poder trabajar a posteriori más cómodamente. Vamos a ver cómo podemos ordenar los elementos.

Por lógica el asunto más importante a tratar es mi identidad que quiero mostrar al mundo, la razón principal de la web, así que es el elemento que debería verse al entrar a mi web. La página principal debería contener el elemento 1.

Si queremos que las páginas queden sencillas y rápidas de leer será bueno no poner más elementos en la página principal y dejar los demás para las otras páginas deribadas de ésta.

Los elementos 2 y 3 pueden ir empaquetados en la mimsa página por tratar temas muy parecidos.

Los elementos 5 y 6 son parecidos a los elementos de un currículum y podrían juntarse en la misma página.

Lo mismo pasa con los elementos 7 y 8, que podrían ir perfectamente en el mismo apartado del sitio web.

Por último tenemos el elemento 4 que puede ser independiente al resto de las páginas.

Nombraremos cada una de las páginas con letras en mayúsculas, y partiremos de que la primera es la página principal de la web. Las páginas y sus contenidos quedarán organizados de la siguiente manera.

1. Identidad personal definida
2. Mis objetivos y servicios en la red y fuera de ella
3. Información de mis estudios y "skills"
4. Mis proyectos personales con sus resultados y los proyectos en proceso
5. Método de contacto conmigo

El proceso, como podéis observar, está formandose desde lo general y abstracto hacia algo más concreto y definido. Ahora vamos a hacer un diagrama sobre la estructura del sitio web y vamos a aclarar cómo será la navegación.

En este tipo de web hay que reconocer que prácticamente no hace falta el proceso de prototipado y la diagramación por la sencillez y escasez de páginas, pero hay que practicar siempre que se pueda y será una buena oportunidad empezar ahora.

Lo primero será un plano de la navegación de la web con el vocabulario visual descrito por James Garret.

Las conexiones sin flechas simbolizan que aunque las páginas B, C, D y E derivan de la A, todas están conectadas entre sí y hay enlaces en cada una de ellas para saltar a cualquier otra.

Ahora hay que crear una buena maqueta. He empezado por un sketch hecho con boligrafo en papel, y ahora pasaré a formalizarlo con un software adecuado. Por cierto, que sepas que para hacer cualquier tipo de archivo gráfico yo uso el GIMP.

Supongo que queda clara la estructura de la información y el contenido que tendrá cada una de las páginas. Ya tenemos un buen prototipado de las páginas web del proyecto.

Ahora voy a construir una especie de prototipo de alta fidelidad que en realidad vendrá a ser una maqueta que a su vez servirá de plantilla para el desarrollo de la web. Como ésto ya es desarrollo web lo dejaré para la siguiente entrada.