Notas_Módulo 2_Cómo se escribe una página Web

 

Introducción

Desarrollo web no es lo mismo que diseño web.

El ciclo de desarrollo de un sitio web consta de 6 fases,

1. contacto inicial
2. planificación
3. contenido
4. diseño
5. desarrollo
6. lanzamiento

Diseño Web

Es el diseño visual o diseño de los elementos gráficos de la página (se tienen en cuenta la tipografía, los colores, los tamaños y las proporciones).

Se suele realizar mediante una herramienta gráfica como Adobe Photoshop o GIMP)

No suele contener código.

El diseño se divide o trocea en parte partes que se pueden representar en

• Códigos HTML + CSS
• Elementos gráficos 

 

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_Se necesitan conocimientos de HTML + CSS y JavaScript + DOM. El encargado de esta tarea se le llama diseñador web.
• La parte servidor_Construye el back-end. No lo ven los visitantes de la web. Es necesaria para presentar la información correcta, en el formato correcto. Se emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusion para acceder a una base de datos y recuperar la información necesaria para visualizar una página web. El encargado de esta tarea, junto con la seguridad, se le llama desarrollador web.

Ambas partes funcionan de forma independiente y emplean tecnologías distintas, aunque muchas veces también interactúan, por lo que también se habla de programación de

• La parte cliente-servidor.

Planificación_Prototipado:wireframes, mockups y prototipos

 

Planos o blueprints

En diseño web, un wireframe (esquema de la página o plano de la pantalla), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe no suele tener aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

Antes de comenzar el diseño de una página web, es necesario prototiparla. Es decir, determinar el plano (blueprint o diagramas de contenido o mapa web) que detalle la estructura, la organización, la navegación y funcionamiento de la aplicación web. Lo más importante es que sean comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos.

Maquetas o mockup

Son diagramas de presentación que no incluyen diseños gráficos ni tampoco deben incluir colores (gama grises mejor)

Hay de dos tipos,

• Baja fidelidad_Son dibujos estáticos sketching, rápidos y claros. Son muy útiles en las entrevistas iniciales con el cliente. Los wireframes son más elaborados ya que deben incluir el contenido que irá en cada página, la estrategia de navegación, la priorización de contenidos y comportamiento funcional. Y por último el storyboard que es una secuencia de wireframes. 
• Alta fidelidad_Son maquetas dinámicas, normalmente en HTML

 

Resumen

Los puntos para realizar un buen prototipo son,

• Sencillez y claridad
• Blanco y negro
• Representar los tamaños y proporciones de los bloques de contenido
• Tener en cuenta las pautas de usabilidad y accesibilidad
• Y sobre todo, diseñar para los usuarios

Los prototipos se pueden hacer a mano, a lápiz o papel, o bien mediante aplicaciones que permiten crear multitud de diagramas.

• Gratuitas como Pencil Project. Incluye una gran variedad de funciones y características para ayudar a crear rápidamente mockups. Está disponible como un complemento de Firefox o como una aplicación independiente (Linux y Windows). Esencialmente instala una aplicación de dibujo en su navegador Firefox y da la posibilidad de mostrar, guardar y cargar un lienzo externo, junto con una paleta de formas. El prototipo final se puede exportar como una imagen PNG, página web, archivo de OpenOffice, PDF o DOC) 
• De pago como Balsamiq (permite escoger entre su versión web o de escritorio, ambas gratuitas durante 30 días. Permite dotar de funcionalidad a los elementos,  de esta manera, cada elemento, puede simular la ejecución de diferentes comportamientos de la aplicación. Es una herramienta fácil de usar, intuitiva y eficiente a la hora de trabajar) o Gliffy (permite crear diagramas de flujo de procesos, organigramas, planos, procesos de negocio, diagramas de red, dibujos técnicos, wireframes de web, y más. Utiliza un arrastrar y soltar, con la posibilidad de añadir cajas, botones, y líneas a cualquier parte de la página. Tiene acceso a una biblioteca completa de formas y puede incluso importar sus propias imágenes, como logotipos y fondos, para complementar sus diagramas).