wireframes, mockups y prototipos

En este mudulo se aprenderá ha escribir una página web con HTML. 

Aquí se tratara el proceso para realizar la parte visual de una página o sitio web.

Bueno para empezar se debe saber que el diseño y desarrollo web son dos cosas distintas pues el 
Diseño web =  elementos gráficos, look and feel y sin codigo.
miestras el 
Desarrollo web = codigo.
El desarrollo  de una aplicacion o sitio web se dibide en dos partes:

• Parte cliente utilisa HTML,CSS.
• Parte servidor utiliza base de datos, o lenguajes de script.

Fases del desarrollo web:

• Contacto inicial
• Planificacion 
• Diseño 
• Desarrollo 
• Lanzamiento

wireframes, mockups y prototipos

 Arquitecto de información

• Identificar los objetivos del proyecto 
• Identificar las necesidades del usuario
• Especificar las funcionalidades y requerimientos de la aplicación web
• Definir y diseñar los sistemas de navegación, organización, etiquetado y busqueda.
• prototipa la aplicacion.

y desarrollar el entorno de nuestro sitio o pagina web debemos seguir lo siguiente: 

El Prototipado: wireframes, mockups y prototipos

Primero es recomendable hacer uso de un plano o mapa web donde se especificara como fluye la informacion dentro de nuestro sitio.Lo más importante a la hora de elaborar el plano es fijarse en que sea comprensible, represente la estructura, flujo de navegacion y relaciones entre los elementos.  
En este enlace se encuentra mas informacion sobre la Arquitectura de la Información (AI).
  Después se hace uso de Las maquetas.Estas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página y estas se deben de realizar con diferentes maquetas las primeras no suelen usar colores solo son ideas nada de forma detallada las ultimas dos tienen mas detalles sobre que informacion va a contenr la pagina. Estas maquetas se esplican a continuacion y para realizar la ultima se deben de haber hecho las 3 anteriores.

1. sketching  es cuando realizamos bocetos de forma rápida e informal, con lápiz y papel, para transmitir una idea o concepto con rapidez y claridad, ente se puede ir esquematizando las páginas y definiendo las diferentes zonas de las mismas. 

   2. wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe estar presente en cada página. Los elementos de la misma como cabeceras, enlaces, listas, formularios, etc; el etiquetado de los vínculos o de los títulos; el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la estrategia de navegación y la priorización de contenidos dentro de la misma.Es recomendable que este esquema lleve etiquetas que infique lo que se refiere ciertas partes del wireframe.

 3. prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas.

Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.