PROGRAMACION WEB

-------------------------------------------------ANLISIS DEL PROCESO DE

CREACIN DE UN SITIO WEB
ING. AMERICO TORRES GONZALES

DEFINICIONES BASICAS
Fases Genricas del Proceso de Creacin de un Sitio Web

DEFINICIONES BASICAS
Que Quiere decir el Termino DISEO WEB?
En la actualidad es un termino complejo de definir debido a la enorme cantidad
de tecnologas disponibles en el mercado. Sin embargo, el Diseo Web al margen
de las tecnologas usadas abarca las siguientes secciones funcionales:
Diseo Grafico.
Diseo de Interfaces.
Autora de Contenido (UX).
Optimizacin para motores de
bsqueda.

DEFINICIONES BASICAS
Definicin de DISEO WEB:
El termino Diseo web se emplea generalmente para describir el proceso
de diseo de la parte front-end (cliente) de una pagina web, incluyendo
El markup o cdigo. Suele ocurrir que el termino se emplea
mezclndose con trminos de desarrollo e ingeniera web,
abarcando un concepto ms amplio del proceso de creacin.

DEFINICIONES BASICAS
OJO: Es de esperar que los diseadores web cuenten con unos conocimientos
bsicos sobre usabilidad y si se espera que ellos tambin formen parte del
proceso de creacin de cdigo, estn al da en metodologas y
accesibilidad.

DEFINICIONES BASICAS
El enfoque moderno del diseo web exige una cooperacin estrecha entre
Diseadores e Ingenieros Web.

DEFINICIONES BASICAS
Que cosas abarca el diseo web?

DEFINICIONES BASICAS
Nunca olvidemos que una Pagina Web constituye un mecanismo de
entrega de informacin, de eso se trata; de all que sea ella (la
informacin) la meta Suprema de la creacin de una pagina web o
sitio web.
Entonces, el xito de un buen diseo web pasa por ser el arte
de crear la mejor experiencia de
navegacin de usuario posible
esto es: mostrar la informacin de una
forma sencilla, legible y entendible
para el usuario.

PROCESO DE CREACION DE UN SITIO WEB

La primera pregunta que debemos hacernos es:
Para quin estamos haciendo el sitio web?
Si hemos sido contratados para desarrollar un sitio web, debemos
tener en claro que el sitio web no es para nuestro cliente, es para
la persona que va a visitar el sitio web, quien es, en ultima instancia
el motivo y la meta del proyecto web.
Lo que si es importante es definir que cosas son importantes para cada
agente relacionado con el proyecto:

PROCESO DE CREACION DE UN SITIO WEB

Que importa a Quien?
Para el Propietario

Para el Usuario Final

Implementacin.

Calidad de Informacin.

Tecnologa.

Precisin.

Plataforma / CMS

Reconocible.

Facilidad de Publicacin.

Difusin.

Facilidad de Interaccin.

En resumen:

PROCESO DE CREACION DE UN SITIO WEB

Aspectos que no le importan al usuario
Tengamos siempre en mente que el sitio web debe ser atractivo para el
Usuario, por ese motivo no debemos permitir que nuestros gustos o
preferencias personales interfieran en el concepto que estamos
desarrollando. Por ejemplo en el terreno informtico tenemos
las batallas tecnolgicas siguientes:
Sin embargo, para el usuario estos
aspectos tcnicos son Irrelevantes
pues el va por la informacin.

PROCESO DE CREACION DE UN SITIO WEB

MUY IMPORTANTE
Al igual que con el medico o cualquier otro profesional,
cuando nos encargan un Proyecto Web, es porque reconocen
nuestra experiencia en el sector, recae sobre nosotros EDUCAR
al cliente sobre perspectivas que no haba considerado
inicialmente as como acotar su visin o indicarle un
Esquema de Escalabilidad factible a su realidad
tcnico econmica.

PROCESO DE CREACION DE UN SITIO WEB

MUY IMPORTANTE
Existen aun clientes que piensan que la Web es un canal Unidireccional
de comunicacin, es ah donde entramos nosotros para abrir su
espectro conceptual, ya que la Web es una Plataforma de
Comunicacin: Escalable, Dinmica y Multidireccional.

PROCESO DE CREACION DE UN SITIO WEB

MUY IMPORTANTE
Ejemplos de como podemos innovar la concepcin de nuestros
clientes:

PROCESO DE CREACION DE UN SITIO WEB

FASES DEL PROCESO DE CREACION DE UN PROYECTO WEB
-- II -Roles y
Roles
y
Responsabilidade
Responsabilidade
s
s

-- II
II -Guas
Guas de
de
Referencia
Referencia

-- III
III -Control
Control de
de
Versiones
Versiones

-- IV
IV -Estrategia
Estrategia de
de
Contenidos
Contenidos

PROCESO DE CREACION DE UN SITIO WEB

-IDEFINIENDO
ROLES Y
RESPONSABILIDA
DES

PROCESO DE CREACION DE UN SITIO WEB

ROLES Y RESPONSABILIDADES
Cuando nos toque definir roles y responsabilidades, recordemos que
el cliente es parte del equipo.
Diseador: Le corresponde la bsqueda y construccin de la solucin.
Propietario: Le corresponde facilitar los recursos y medios tcnicoeconmicos
necesarios para el desarrollo sin retrazos del proyecto.
Cliente: Le corresponde proporcionar la Visin, el Contenido y el Feedback a lo
largo del proceso de desarrollo del proyecto.

PROCESO DE CREACION DE UN SITIO WEB

ROLES Y RESPONSABILIDADES
Una lista de roles y responsabilidades tentativo podra ser la siguiente:
Lista de Roles
Creador de Contenidos.
Creador de la Estrategia de Contenidos.
Arquitecto de Informacin.
Responsable de Tests a Usuarios.
Diseador Grafico.
Diseador UX (Experiencia de Usuario)
Desarrollador Front-End.
Desarrollador Back-End.
Diseador CMS (Gestor de Contenidos).
Arquitecto de Sistemas.
Responsable de Calidad.
Responsable de Beta Testing.

PROCESO DE CREACION DE UN SITIO WEB

ROLES Y RESPONSABILIDADES
Es muy comn que, en proyectos pequeos, estos roles sean cubiertos por
la misma persona, sin embargo, se recomienda que los siguientes roles
sean ejercidos por personas diferentes:
- Diseador UX.
- Arquitecto de Sistema.
- Responsable de Calidad.
- Responsable de Beta Testing.

PROCESO DE CREACION DE UN SITIO WEB

TRES VERDADES SOBRE DISEO WEB

PROCESO DE CREACION DE UN SITIO WEB

TRES VERDADES SOBRE DISEO WEB

PROCESO DE CREACION DE UN SITIO WEB

TRES VERDADES SOBRE DISEO WEB

PROCESO DE CREACION DE UN SITIO WEB

- II CREANDO GUIAS
DE REFERENCIA

PROCESO DE CREACION DE UN SITIO WEB

Creacin de Guas de Referencia
Guas
Guas
Guas
Guas

de
de
de
de

Contenido.
Estilo.
Cdigo.
Proceso e Implementacin.

Visitemos por ejemplo:

http://www.starbucks.com/static/reference/styleguide/

PROCESO DE CREACION DE UN SITIO WEB

- III IMPLEMENTANDO
CONTROL DE
VERSIONES

PROCESO DE CREACION DE UN SITIO WEB

Control de Versiones
Es un termino tcnico para la creacin de
instantneas y lneas de tiempo de nuestro
trabajo y contenido.

Nuevos componentes o pruebas son separados en ramas o branchs que se unen

o fusionan con la rama principal cuando se terminan.

PROCESO DE CREACION DE UN SITIO WEB

- IV APLICANDO UNA
ESTRATEGIA DE
CONTENIDOS

PROCESO DE CREACION DE UN SITIO WEB

LAS FASES DE LA ESTRATEGIA DE CONTENIDOS SON:

4.1
Crear Perfiles
de Usuario

4.2
Realizar
Auditoria de
Contenidos

4.3
Realizar el
Modelamiento
de los
Contenidos

4.4
Jerarquizar los
Contenidos

4.5
Realizar el
Prototipado

PROCESO DE CREACION DE UN SITIO WEB

ESTRATEGIA DE CONTENIDOS

4.1
Creando Perfiles
de Usuario

PROCESO DE CREACION DE UN SITIO WEB

Estrategia de Contenidos
Esta etapa abarca la planificacin, el desarrollo y la gestin
de contenidos para la web.
Este es un aspecto clave que condiciona el tema visual del
Proyecto.
Aspectos Externos (relacionados con marketing)
Tono
Elementos del lenguaje.
Personas (definicin conceptual del perfil/perfiles de nuestros
usuarios finales)
Rasgos caractersticos del usuario.
Tipo de Usuario(s) finales de la web.
Diseo centrado en estos usuarios.

PROCESO DE CREACION DE UN SITIO WEB

Planteamos la pregunta clave:

Para quien estamos creando esto?
Como respuesta, se crean perfiles
imaginarios como
el mostrado a la derecha
El xito de esta fase es que estos
perfiles sean lo mas parecido posible a una persona del mundo real.
Se recomienda la creacin de la menos Tres Perfiles de usuarios diferentes.

PROCESO DE CREACION DE UN SITIO WEB

Preguntas a que debemos someter a nuestros perfiles:
Har clic Juan en este botn y le llamar la atencin?
Alicia completara los pasos de este formulario?
Comprar Marco este producto?

Estos perfiles deben ser compartidos por todos los miembros

del equipo de desarrollo para su evaluacin y consenso.

PROCESO DE CREACION DE UN SITIO WEB

ESTRATEGIA DE CONTENIDOS

4.2
Implementando
Auditoria de
Contenidos

PROCESO DE CREACION DE UN SITIO WEB

Auditora de Contenidos
Se ha establecido que es el CONTENIDO lo que realmente importa.
Cada Proyecto de Diseo Web debe comenzar con el contenido.
Es necesario realizar ahora un INVENTARIO DE LOS CONTENIDOS y
realizar una auditora sobre ellos.
Los contenidos son todos y cada uno de los elementos que
vamos a necesitar para dar vida al proyecto:
Textos.
Imgenes.
Videos.
Formularios.
El importante anotar si existe algn tipo de relacin entre ellos. Por ejemplo:
Si hay ciertas imgenes que tienen un significado especial, si van junto a
determinados textos o van en una seccin especfica.

PROCESO DE CREACION DE UN SITIO WEB

Auditora de Contenidos
Metodologa de Auditora de Contenidos
Realizar un Diagrama de Gantt con hitos en los siguientes tems:
Inventario Inicial.
Verificacin (Que todo lo listado exista y est disponible).
Validacin (Que todos los contenidos estn correctos, validados por
el cliente).

PROCESO DE CREACION DE UN SITIO WEB

Auditora de Contenidos
Inventario Inicial: Ejemplos 1:

PROCESO DE CREACION DE UN SITIO WEB

Auditora de Contenidos
Inventario Inicial: Ejemplos 2:

PROCESO DE CREACION DE UN SITIO WEB

Auditora de Contenidos
Inventario Inicial:

No olvidar mantener el Inventario Actualizado a medida que

van pasando las fechas de entrega, revisin y publicacin.

PROCESO DE CREACION DE UN SITIO WEB

ESTRATEGIA DE CONTENIDOS

4.3
Realizando
Modelado de
Contenidos

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos
Tomemos como ejemplo una empresa llamada AM, la cual brinda los
siguientes servicios:
a. Catering.
b. Cursos de Cocina.
c. Servicio a Domicilio.
d. Restaurante.

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos
Tipos de Contenidos
- Paginas Estndar: Pagina de Inicio, Contacto, Aviso Legal, etc.
- Seccin de Recetas: ndice + Paginas Individuales.
- Paginas de Servicios: ndice + Paginas Individuales.
- Seccin de Blog: Se publicaran aqu noticias con descuentos y novedades:
ndice +
Paginas Individuales.
- Seccin de Testimonio.
Sobre esta base hemos definido 3 tipos de paginas:

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos
Tipos de Contenidos
Debemos especificar las caractersticas de cada uno de estos Tipos de
Contenidos.
Para ello le preguntamos a cada Tipo de Contenido:
Que informacin va aqu?

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos
Tipos de Pginas
Debemos contar con 5 modelos de paginas:
Paginas Estndar.
Publicaciones del Blog.
Paginas de Servicio.
Paginas de Recetas, y
Paginas de Testimonios.
Estos modelos de paginas van a influenciar de manera directa al CMS
del sitio web.

PROCESO DE CREACION DE UN SITIO WEB

ESTRATEGIA DE CONTENIDOS

4.4
Realizando la
Jerarqua de
Contenidos

PROCESO DE CREACION DE UN SITIO WEB

Jerarqua de Contenidos:
En este punto ya sabemos quien podra ser el usuario final y que contenido
vamos a mostrar en la web. El siguiente paso es organizar ese contenido
en base a Prioridades y Jerarquas.

PROCESO DE CREACION DE UN SITIO WEB

Modelado de Contenidos:

Jerarqua de Contenidos: En este punto ya sabemos quien podra ser el usuario

final y que contenido vamos a mostrar en la web. El siguiente paso es organizar
ese contenido en base a Prioridades y Jerarquas.

PROCESO DE CREACION DE UN SITIO WEB

Jerarqua de Contenidos Jerarqua Global del Sitio:

PROCESO DE CREACION DE UN SITIO WEB

Jerarqua de Contenidos Jerarqua de Pagina Home:

PROCESO DE CREACION DE UN SITIO WEB

Jerarqua de Contenidos:
Este proceso de jerarquizacin se realiza mejor en asociacin con el cliente:

PROCESO DE CREACION DE UN SITIO WEB

Arquitectura de la Informacin:
Concepto Como Trinomio:

PROCESO DE CREACION DE UN SITIO WEB

Arquitectura de la Informacin:

PROCESO DE CREACION DE UN SITIO WEB

ESTRATEGIA DE CONTENIDOS

4.5
Realizando el
Prototipado del
Proyecto Web

PROCESO DE CREACION DE UN SITIO WEB

Prototipado: Ahora que tenemos todos los elementos, es momento de
ver como encaja todo en la pantalla, para ello usamos Wireframes.
que son fundamentalmente cajas de contenido donde se
elimina la parte de diseo y el atractivo visual, tal como se
ve .
Piensa en el wireframe como la plantilla del sitio web, su
esqueleto.
Mediante la manipulacin de Wireframes la tarea de
estructuracin se hace mucho mas sencilla ya que no nos
distraemos con elementos grficos u otros elementos y nos
centramos en la propia distribucin de los contenidos.

PROCESO DE CREACION DE UN SITIO WEB

Prototipado:
Los Wireframes pueden tener anotaciones, comentarios de compaeros,
etc.
Tambin sirven para confirmar las prioridades
de los elementos se organizan y ubican en
diferentes contextos.

PROCESO DE CREACION DE UN SITIO WEB

Prototipado Pensando en Mobile First.
Pensando en Mobile desde el comienzo del proyecto nos ayudar a:
Una mejor apreciacin de Jerarquas de Contenidos.
Detectar elementos superfluos.
Algunos Constructores de Wireframes disponibles en el mercado son:
# Nombre

Descripcin

1 Axure RP
http://www.axure.com

Es una herramienta de Prototipado profesional que

permite crear wireframes para hacer el pre-diseo de
una pgina web. Disponible tanto para plataforma
Windows como Mac. Puedes dibujar tanto wireframes
estticos como interactivos que simulan una
experiencia de navegacin del usuario real. Tiene una
funcin de colaboracin para compartir las maquetas
Web con otras personas y poder recibir feedback en
tiempo real.

PROCESO DE CREACION DE UN SITIO WEB

Prototipado Pensando en Mobile First.
# Nombre

Descripcin

2 Balsamiq
https://balsamiq.com/product
s/mockups/

Con ella puedes hacer prototipos interactivos de webs.

Puedes usar esta herramienta como un servicio web o
bien descargarla en tu equipo (funciona con Windows,
Mac y Linux). Su cuenta gratuita te permite crear un
nmero ilimitado dewireframesque duran 7 das.
Tambin posee la funcin de colaboracin.

3 FlairBuilder
http://www.flairbuilder.com/

Herramienta web que te permite hacer bocetos de tus

webs y de tus Apps para iPhone. No tiene posibilidad de
colaborar con otras personas ni tampoco es posible
exportar caractersticas.

4 Gliffy
http://www.gliffy.com/uses/wi
reframe-software/

Basada en un servicio web, permite dibujar bocetos de

tu pgina web y crearwireframestanto estticos como
dinmicos. Tambin puedes colaborar con otras
personas y recibir su opinin en tiempo real. La cuenta
gratuita te deja hacer hasta 5 croquis no cifrados pero
llevan publicidad.

PROCESO DE CREACION DE UN SITIO WEB

TESTEO CON USUARIOS