Módulo 2. Cómo se escribe una página web

Resumen de contenidos de la Unidad.

1. Desarrollo web
1. Parte cliente
1. HTML / CSS
2. Javascript / DOM
2. Programador servidor
1. Lenguajes de script (PHP, ASP, ASP.NET, JSP, Perl, Coldfusion)
2. Diseño y desarrollo de bases de datos.
3. Etapas del desarrollo de una página web
2. Prototipado
1. Planos
2. Maquetas
1. Prototipos de baja fidelidad
1. Sketch
2. Wireframe  >> Storyboard
2. 
   

Etapas del desarrollo de una página web.

Considerar que en las páginas web de tipo promocional el mayor tiempo lo ocupará el diseño web, mientras que en las aplicaciones web lo que demandará más tiempo es la fase de desarrollo.

¿Qué fase no se puede eliminar del primer diagrama?:  El desarrollo.

Siempre definir previo a la prototipación: 

1. Objetivos del cliente
2. Necesidades de los usuarios
3. Requisitos del proyecto
4. Arquitectura de información

Consejos para realizar un buen prototipo: 

- Sencillez y claridad
- En blanco y negro
- Representa los tamaños y proporciones de los bloques de contenido.
- Ten en cuenta las pautas de accesibilidad y usabilidad.
- Diseña para los usuarios

Diccionario:

Diseño web: Diseño visual de los elementos gráficos de la página.
- Tipografia, colores, gráficos y proporciones. 
- Realizado con photoshop / GIMP
- No contiene código

Desarrollo web: Programación necesaria para construir una aplicación o sitio web.
Se divide en 2 partes: cliente y servidor. 

Backend: parte de un sitio web que no ven los visitantes del mismo.

Plano /Blueprint / Architecture map / Diagrama de contenido o flujo:  diagrama de organización y funcionamiento.

Prototipo funcional / Maqueta / Mockup: 
Diagramas de presentación.
Permiten detallar el proceso interactivo de una(s) tarea(s). Son interactivas en HTML, que simulan o implementan partes del sistema final.

Prototipos de baja fidelidad: conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, de tal manera que implementan aspectos generales del sistema sin entrar en detalle.
= ESTATICOS

Prototipos de alta fidelidad: = DINAMICOS.

Sketch: boteco rápido e informal en lápiz y papel.

Wireframe: dibujo o esquema que representa el esqueleto o estructura visual de un sitio web.
Incluye el inventariado de contenido.
- Cabeceras, enlaces, listas, formularios
- Etiquetado de los vínculos o títulos
- Layout
- Estrategia de navegación
- Priorización de contenidos
* Se recomienda agregar notas numeradas para definir el comportamiento funcional de ciertos elementos.
Suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

Layout: Ubicación, colocación y agrupación de los elementos de la página.

Storyboard: secuencia de wireframes.


Principio de Pareto regla del 80/20; / Distribución A-B-C / Ley de los pocos vitales / principio de escasez del factor: es un principio empírico que cuando se evalúa un factor (distribución de la riqueza, x ej.) el 20% de la población tiene el 80%,  y viceversa.
Aplicado al software, el 20% del código genera el 80% del esfuerzo en desarrollo.  Y el 80% de los fallos de código están en un 20% del mismo.

Links:

Prototipado:
http://olgacarreras.blogspot.cl/
http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
http://wireframes.linowski.ca/
http://www.usableyaccesible.com/recurso_glosario.php
http://www.jjg.net/ia/visvocab/spanish.html      Vocabulario visual diseño de programación.
http://real.developer.yahoo.com/ypatterns/about/stencils/