Está en la página 1de 68

Principios Bsicos

de
Diseo de Sitios Web

Ing. Fabio Garca Ramirez(fagarra@yahoo.com)


Seminario de Tecnologa de Punta VI Semestre
Tecnologa en Sistemas de Informacin
Fundacin Universitaria Tecnolgico Comfenalco
1

Principios Bsicos de Diseo de Sitios Web

Objetivo
Conocer

acerca de la teora y las


tcnicas de diseo de sitios web.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

El diseo web

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

Temtica
El diseo web. Concepto.
Caractersticas.
Construccin de sitios webs.
Ingeniera Web.
Requisitos de Calidad.
Modelo del proceso de desarrollo web.
Principios esenciales de un diseo web eficaz.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

El diseo web. Concepto.


Que es?

Diseo grfico
Programacin
Cliente/Servidor
Comercio Electrnico

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

El diseo web. Concepto.


Es

un campo interdisciplinario muy


centrado en el usuario que incluye
influencias de las artes visuales, la
tecnologa, el contenido y la finalidad.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

Caractersticas.
Contenido(informa o persuade al usuario).
Tecnologa(da funcionalidad al sitio).
Aspectos visuales(forma visual del sitio).
Aspectos econmicos(beneficios).

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

Caractersticas.

Finalidad(Econmica)

Usuarios

Contenido

Diseadores

Forma(Visual)
Funcin(Tecnologa)
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

Construccin de sitios webs.


Tendencias(errores comunes):
Construir a partir de los aspectos visuales(resulta
en un folletoware o panfletoware).
Enfoque tecnolgico(diseo arbol de navidad).

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Principios Bsicos de Diseo de Sitios Web

Construccin de sitios webs.

Errores imperdonables en los sitios webs:


Usar grficas demasiado grandes.
Emplear fondos inapropiados.
No ofrecerles algo gratuito a los visitantes.
No darles motivos para regresar al sitio.
No cambiar la apariencia del sitio ocasionalmente.
No ofrecer contenido interesante.
No llevar un registro de visitantes.
No promover el sitio.
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin

10

Principios Bsicos de Diseo de Sitios Web

Ingeniera Web.

Toma prestado muchos de los conceptos y principios bsicos de la


Ingeniera del Software, dando importancia a las mismas
actividades tcnicas y de gestin.
No es un clnico perfecto de la Ingeniera del Software.
La filosofa principal es la aplicacin de un enfoque disciplinado
para el desarrollo de un sistema basado en computadora.
La Ingeniera Web aplica un enfoque genrico que se suaviza con
estrategias, tcticas y mtodos especializados.
La Ingeniera Web est relacionada con el establecimiento y
utilizacin de principios cientficos, de ingeniera y de gestin, y
con enfoques sistemticos y disciplinados del xito del desarrollo,
empleo y mantenimiento de sistemas y aplicaciones basados en
Web de alta calidad.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

11

Principios Bsicos de Diseo de Sitios Web

Requisitos de Calidad.

La calidad se refiere a las caractersticas mensurables, que se


pueden comparar con estndares conocidos como longitud, color,
propiedades elctricas, maleabilidad, otros.
A nivel de software, existen unas mtricas tcnicas que
proporcionan una manera sistemtica de valorar la calidad
basndose en un conjunto de reglas claramente definidas.
Las mtricas o requisitos de calidad mas relevantes para evaluar la
calidad de los sistemas basados en Web son:
a. Usabilidad.
b. Funcionalidad.
c. Fiabilidad.
d. Eficiencia.
e. Capacidad de mantenimiento.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

12

Principios Bsicos de Diseo de Sitios Web

Modelo del proceso de desarrollo


web.
Definicin del problema.
Exploracin conceptual

Modelo en Cascada

Especificacin y anlisis
de los requisitos
Diseo
de prototipos
Materializacin y
Pruebas unitarias

Integracin y prueba
del sistema
Entrada en funcionamiento,
operacin y mantenimiento

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

13

Principios Bsicos de Diseo de Sitios Web

Principios esenciales de un
Usted no es el USUARIO.
diseo
web
eficaz.

Los usuarios no son diseadores.


Disee para el usuario medio, pero tenga en cuenta las
diferencias.
La ejecucin de un sitio tiene que rayar la perfeccin.
Conoce y respeta las restricciones de la web y del
medio Internet.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

14

Principios Bsicos de Diseo de Sitios Web

Principios esenciales de un
Los sitios web debern respetar los principios GUI siempre que
diseo
web eficaz.
sean apropiados.
La navegacin es solamente un medio para conseguir un
resultado final.
Los elementos visuales influirn en gran medida en la
percepcin inicial del inters del sitio por parte del usuario.
No invente interfaces para crear marca.
Lo que ve es lo que desea(WYSIWYW).

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

15

Principios Bsicos de Diseo de Sitios Web

Principios esenciales de un
El valor permanente del sitio viene determinado por
diseo
web
eficaz.
los aspectos visuales, el contenido, la tecnologa, la
facilidad de empleo y la consecucin del objetivo.
No existe una nica forma correcta de diseo web
que se adapte a todos los sitios.
El control debera estar en manos del usuario o al
menos debera parecerlo.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

16

Principios Bsicos de Diseo de Sitios Web

Resumen.
El diseo web es un campo interdisciplinar que
consta de cuatro elementos principales: contenido,
forma, funcin y finalidad.
El de seguir una metodologa, incluso bsica, de
diseo web puede ser extremadamente til.
No existe una nica forma correcta de diseo web
que se adapte a todos los sitios.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

17

Principios Bsicos de Diseo de Sitios Web

El proceso
de
diseo web

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

18

Principios Bsicos de Diseo de Sitios Web

Temtica
Mtodo web ad hoc.
Modelo en cascada.
Modelo en cascada modificado.
Diseo de aplicacin conjunta(JAD).
Modelo de proceso IWeb.
Enfoque de un proyecto de un sitio web.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

19

Principios Bsicos de Diseo de Sitios Web

Mtodo web ad hoc.


Similar al mtodo codificacin y prueba.
Diseo al vuelo(realizar y publicar).
Mtodo informal(disea segn vas avanzando).
Planificacin escasa y limitada.
Adecuado para proyectos pequeos con escaso
mantenimiento.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

20

Principios Bsicos de Diseo de Sitios Web

Modelo en cascada.
Definicin del problema.
Exploracin conceptual
Especificacin y anlisis
de los requisitos
Diseo
de prototipos
Materializacin y
Pruebas unitarias
Integracin y prueba
del sistema
Entrada en funcionamiento,
operacin y mantenimiento

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

21

Principios Bsicos de Diseo de Sitios Web

Modelo en cascada modificado.


Definicin del problema.
Exploracin conceptual
Especificacin y anlisis
de los requisitos

Anlisis de riesgos
en remolino

Diseo
de prototipos
Materializacin y
Pruebas unitarias
Integracin y prueba
del sistema
Entrada en funcionamiento,
operacin y mantenimiento

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

22

Principios Bsicos de Diseo de Sitios Web

Diseo de aplicacin conjunta


(JAD, Joint Application Design).
1

El diseador habla con


los clientes para conocer
sus requisitos. Realiza el
primer prototipo.
El cliente prueba el
prototipo y sugiere
cambios y ampliaciones.
Si es correcto se publica.

El diseador prepara un
nuevo prototipo.
Volver al paso 2.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

23

Principios Bsicos de Diseo de Sitios Web

Modelo de proceso IWeb


Planificacin
Formulacin

Anlisis

Ingeniera

Evaluacin
del cliente
Generacin
de pginas
y pruebas

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Diseo
arquitectnico
Diseo del
contenido

Diseo de
navegacin

Produccin
Diseo de
la interfaz

24

Principios Bsicos de Diseo de Sitios Web

Enfoque de un proyecto de un
Objetivos
y problemas.
sitio
web.
Audiencia perfil del usuario.

Anlisis de requisitos.
Planificacin del sitio.
Fase de diseo.
Pruebas.
Puesta en funcionamiento.
Mantenimiento.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

25

Principios Bsicos de Diseo de Sitios Web

Objetivos y problemas.
Deben

ser claros.
Medibles.
Para determinarlos se realiza una
Tormenta de Ideas (BrainStorming).
Deben refinarse.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

26

Principios Bsicos de Diseo de Sitios Web

Objetivos y problemas.
Objetivos poco claros:
Proporcionar un mejor servicio al
cliente.
Conseguir ms dinero abriendo un
mercado interactivo.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

27

Principios Bsicos de Diseo de Sitios Web

Objetivos y problemas.
Objetivos bien declarados:

Desarrollar un sitio Web de ayuda y soporte tcnico que aumente la satisfaccin del
cliente, permitiendo un acceso 24/7 para cuestiones comunes y disminuyendo en un
25 por 100 la atencin telefnica prestada.
Crear un almacn interactivo de recambios de automvil que venda directamente al
consumidor productos por un valor mnimo de 10.000 dlares al mes.
Desarrollar un sitio Web que proporcione a los potenciales clientes de un
restaurante de comida japonesa cierta informacin importante, tal como horario,
men, ambiente y precios, y les anime a visitar el lugar o a hacer su pedido por
telfono.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

28

Principios Bsicos de Diseo de Sitios Web

Audiencia perfil del usuario.


Cual es la audiencia potencial del sitio y sus motivos para
acceder al sitio.
Preguntas bsicas tales como: Dnde viven? Que edad tienen? Hombres

o mujeres? Que idioma hablan? Que conocimientos tcnicos poseen? Que obtienen del
sitio? Que desean ejecutar en el sitio? Cuando visitarn el sitio?

Para la mayora de los sitios hay muchos tipos de usuarios,


cada uno con diferentes caractersticas y objetivos.
Se recomienda elaborar un perfil del usuario.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

29

Principios Bsicos de Diseo de Sitios Web

Anlisis de requisitos.
Clase

de contenido a publicar.
Cual sera el aspecto del sitio.
Tecnologa a utilizar.
Restricciones tcnicas.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

30

Principios Bsicos de Diseo de Sitios Web

Planificacin del sitio.


Es plasmar en papel las especificaciones del sitio. Puede contener las
siguientes secciones:
Declaracin y anlisis de objetivos.
Anlisis de la audiencia.
Requisitos de contenido, tcnicos y visuales.
Diagrama de la estructura del sitio.
Personal requerido.
Duracin.
Presupuesto.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

31

Principios Bsicos de Diseo de Sitios Web

Fase de diseo.
Recopile el contenido, antes de abordar el diseo.
El diseo visual debe realizarse de arriba abajo(TopDown).
Realice prototipos en papel o en pantalla.
Tenga en cuenta el explorador(browser) a utilizar y las
dimensiones de la pantalla.
Realice un sitio simulado.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

32

Principios Bsicos de Diseo de Sitios Web

Pruebas.
Los sitios siempre tienen errores, de modo que
pruebe bien su sitio.
Las pruebas deben tener en cuenta todos los
aspectos del sitio, incluyendo el contenido, la
apariencia visual, la funcin y la finalidad.
Las pruebas ms importantes son las realizadas
por el usuario, y deberan realizarse en ltimo lugar.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

33

Principios Bsicos de Diseo de Sitios Web

Puesta en funcionamiento y

mantenimiento.
El desarrollo de un sitio web es un
proceso continuo: planificacin, diseo,
desarrollo, entrega y vuelta a empezar.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

34

Principios Bsicos de Diseo de Sitios Web

Resumen.

Los diseadores de sitios Web deben adoptar


una metodologa o modelo de procedimiento
que les gue durante el proceso de desarrollo
y les ayude a minimizar riesgos, a gestionar
la complejidad del proyecto y, en general, a
mejorar el resultado final.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

35

Principios Bsicos de Diseo de Sitios Web

Diseo para
los
usuarios

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

36

Principios Bsicos de Diseo de Sitios Web

Temtica
Facilidad de empleo.
Los usuarios.
Caractersticas comunes de los usuarios.
Entornos del usuario.
Tipos comunes de usuarios.
Convenios Web.
Accesibilidad.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

37

Principios Bsicos de Diseo de Sitios Web

Facilidad de empleo.

Es la facilidad con la que un grupo de usuarios puede


utilizar un sitio para conseguir objetivos determinados
con efectividad, eficacia y satisfaccin en un contexto
concreto de empleo(segn norma ISO).
Vara tanto como los usuarios que acceden al sitio.
Depende del tipo de sitio y de la familiaridad que
tenga el usuario con l.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

38

Principios Bsicos de Diseo de Sitios Web

Facilidad de empleo.

Tenga en cuenta las siguientes directrices:


Sea consistente(interfaz sencilla de usar).
Simplifique al mximo el sitio y sus pginas.
Confe en la accin de reconocer, no en recordar.
Intente prevenir o corregir errores.
Proporcione informacin.
Concntrese en la velocidad.
No suponga que los usuarios leern las
instrucciones.
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin

39

Principios Bsicos de Diseo de Sitios Web

Los Usuarios.

Tratar de satisfacer sus necesidades.


Tenga en cuenta el usuario comn(no irse a los
extremos: novatos o expertos).
Los exploradores no utilizan los sitios, los utilizan las
personas.
No existe un tipo genrico de persona, pero suelen
tener caractersticas fsicas similares: visin,
memoria y reaccin a los estmulos.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

40

Principios Bsicos de Diseo de Sitios Web

Caractersticas comunes de los


usuarios: Visin.

Es la forma en que reciben la informacin del sitio Web.


Existen tres factores que afectan a la forma en que se
percibe el color: Matiz, saturacin y tonalidad.
Matiz: Grado de similitud entre un color y los colores
bsicos(rojo, verde y azul) o algunas de sus
combinaciones.
Saturacin: Hasta que punto un color difiere del
acromtico(blanco, gris o negro).
Tonalidad: Hasta que punto un color es ms claro o ms
oscuro que otro bajo las mismas condiciones visuales.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

41

Principios Bsicos de Diseo de Sitios Web

Caractersticas comunes de los


usuarios: Visin.
Evite el uso de texto, grficos y fondos de matices similares(en
vez de utilizar azul claro y azul oscuro, utilice en su lugar azul y
amarillo, o blanco).
Evite combinar texto, grficos y fondos con saturaciones
similares(en vez de utiliza un texto gris sobre un fondo rosado,
utilice un texto de color blanco sobre un fondo rosado, o
viceversa).
Ponga un contraste alto. Evite el uso de texto, grficos o fondos
de tonalidad similar(nunca utilice texto oscuro sobre fondo oscuro
o texto brillante sobre fondo brillante).
Asegrese que los colores que utilice para diferenciar elementos,
tales como vnculos, difieran claramente en dos atributos: matiz y
tonalidad(evite los vnculos que cambian de rojo a rosado).

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

42

Principios Bsicos de Diseo de Sitios Web

Caractersticas comunes de los


usuarios: Memoria.

Los usuarios tienen tendencia a maximizar las ganancias y a


minimizar el trabajo.
El reconocimiento resulta ms sencillo que la memorizacin, de
modo que no obligue a los usuarios a memorizar informacin.
No utilice el mismo color para resaltar los vnculos visitados de
los que no lo han sido todava.
Elabore pginas que incluyan importantes diferencias visuales
con el resto de pginas.
Limite el nmero de opciones de importancia similar, tales
como vnculos, a grupos entre 5 y 9 elementos.
Pngase por objetivo la memorizacin de slo tres elementos o
pginas secuenciales.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

43

Principios Bsicos de Diseo de Sitios Web

Caractersticas comunes de los usuarios:


Respuesta y tiempo de reaccin.

El tiempo que un usuario esperar es


proporcional al beneficio obtenido.
Cuando los tiempos de respuesta para la
descarga de pginas sean superiores a 30
segundos, trate de proporcionar al usuario su
propia informacin del progreso, por ejemplo, una
barra de progreso del tiempo de descarga.
Esfurcese en conseguir que el usuario conozca
lo ms importante del contenido de una pgina
en un tiempo mximo de un minuto de carga.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

44

Principios Bsicos de Diseo de Sitios Web

Caractersticas comunes de los usuarios:


Respuesta y tiempo de reaccin.

Intente optimizar el acceso por teclado para


todas las pginas y no solamente para las
pginas de formulario.
Minimice la distancia que el usuario tiene que
desplazar el ratn entre elecciones sucesivas.
Minimice el desplazamiento del ratn entre la
zona de actuacin en la pgina principal y el
botn Atrs del explorador.
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin

45

Principios Bsicos de Diseo de Sitios Web

Entornos del usuario.

Cuando disee para los usuarios piense siempre


desde dnde estn accediendo al sitio.
Entre los entornos posibles se tienen: Oficina,
Casa, Cibercaf, puesto pblico(kiosko),
PDA(Asistente Personal).

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

46

Principios Bsicos de Diseo de Sitios Web

Tipos Comunes de usuarios.

Desde el punto de vista de la utilizacin de un sitio Web,


existen tres tipos de usuarios: novatos, intermedios y
expertos.
Un usuario novato es el que tiene poco conocimiento de un
sitio, incluso, de cmo funciona la Web. Requiere ayuda extra.
Los usuarios expertos, son los que comprenden muy bien la
Web o el sitio. Requieren relativamente pocas ayudas y
preferirn hacer menos clics y consumir ms.
Los usuarios intermedios, son realmente el grupo ms
numeroso de usuarios de la Web. Entienden cmo funciona la
Web, pero no saben navegar de una manera eficiente.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

47

Principios Bsicos de Diseo de Sitios Web

Tipos Comunes de usuarios.

Trate de crear un sitio Web adaptable que


cumpla con los requisitos de los usuarios
noveles, de los intermedios y de los expertos.
Disee para el usuario intermedio si no es
posible desarrollar una interfaz Web adaptable.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

48

Principios Bsicos de Diseo de Sitios Web

Convenios Web.
No se desve de los convenios utilizados de
forma habitual en el desarrollo de interfaces
presentes en los sitios Web ms populares.
Algunas normas Web ms comunes son:
El logotipo situado en la esquina superior
izquierda le permitir volver a la pgina principal.
Los vinculos de texto se repiten en la parte
inferior de la pgina.
Vnculo para volver a la parte superior de la
pgina utilizado en pginas largas.
Los elementos sobre los que se puede hacer clic
son azules y se encuentran subrayados.
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin
49

Principios Bsicos de Diseo de Sitios Web

Convenios Web.

Los elementos secundarios de exploracin, tales


como un plano del sitio o un buscador, se
presentan de forma separada al resto de
elementos de exploracin.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

50

Principios Bsicos de Diseo de Sitios Web

Accesibilidad.
El World Wide Web Consortium(W3C) ha
promulgado unas cuantas sugerencias para mejorar
la accesibilidad(http://www.w3c.org/wai) :
Proporcione alternativas equivalentes para los
contenidos auditivo y visual.
Aclare el uso del lenguaje natural(abreviaturas,
definiciones, citas, etc).
Garantice que las pginas que utilicen nuevas
tecnologas se transforman adecuadamente.
Garantice la accesibilidad de las interfaces de
usuario incrustadas.
Disee con independencia de los dispositivos.
Ing. Fabio Garca Ramrez
Tecnologa en Sistemas de Informacin
51

Principios Bsicos de Diseo de Sitios Web

Resumen.

La facilidad de empleo es uno de los aspectos de un sitio


que no siempre se advierte a primera vista, pero que influye
enormente en la comodidad con que un usuario puede
realizar una determinada tarea cuando utiliza el sitio.
Intente crear una interfaz adaptable que pueda ser utilizada
por los tres grupos comunes de usuarios(novatos,
intermedios y avanzados), con el fin de obtener un sitio
funcional.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

52

Principios Bsicos de Diseo de Sitios Web

Tipos de sitios y Arquitectura

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

53

Principios Bsicos de Diseo de Sitios Web

Temtica
Categoras

generales de sitios Web.


Estructura del sitio.
Tipos especificos de sitios Web.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

54

Principios Bsicos de Diseo de Sitios Web

Categoras generales de sitios

Web.
Sitio pblico: es un sitio cuyo acceso no est

restringido explcitamente a ningn tipo de usuarios.


Sitio intranet: es un sitio que est reservado a una
determinada organizacin y generalmente funciona
dentro de una red privada.
Sitio extranet: es un sitio Web al que puede acceder
una clase limitada de usuarios a travs de Internet.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

55

Principios Bsicos de Diseo de Sitios Web

Categoras generales de sitios


Sitios estticos: es aquel cuyo contenido es relativamente fijo,
Web.

en el que los usuarios no pueden modificar ni el aspecto ni el


mbito de los datos que observan.
Sitios interactivos: es aquel en el que los usuarios pueden
actuar directamente sobre el contenido del sitio o con otros
usuarios del mismo.
Sitios dinmicos: es aquel que sus pginas se generan en el
momento de la solicitud por parte del usuario.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

56

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio.


Hay dos tipos de estructuras en cualquier sitio Web:
Lgica: es la forma como se relacionan entre s los documentos y define
los vnculos entre documentos.
Fsica: describe dnde se encuentra realmente un documento, mostrando,
por ejemplo, el camino al directorio del documento en un servidor Web o
su situacin en una base de datos(por ejemplo, c:
\inetpub\wwwroot\default.htm).
La estructura lgica de un sitio Web es ms importante para el usuario que
su estructura fsica.
Siempre que sea posible, evite dar a conocer la estructura fsica de los
archivos del sitio.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

57

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Existen cuatro formas de organizacin lgica de los sitios Web:
Lineal: es una estructura secuencial similar a la que sigue la
informacin impresa(revistas, peridicos, etc).
Rejilla: es una estructura lineal doble, en la que sus elementos se
relacionan tanto vertical como horizontalmente.
Jerrquica: es la ms comn en la Web, similar a la estructura de
un rbol.
Tela de araa(Web): no sigue ninguna de las estructuras anteriores
y contiene muchos vnculos cruzados y saltos hacia delante.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

58

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Lineal
Pgina Principal

Pgina 1

Pgina 2

Pgina 3

Lineal con alternativas


Pgina 1
Pgina Principal

Pgina 4
Pgina 3

Pgina 2

Pgina 5

Lineal con opciones


Pgina Principal

Pgina 1

Pgina 2

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Pgina 3

59

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Rejilla
Camisas

Pantalones

Manga Corta

Lino

Cuero

Manga Larga

Dril

Lana

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Chaquetas

60

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Jerarqua estrecha
Empleos
Oferta

Hombres

Demanda

Mujeres

Ing. de Sistemas

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Contadores

61

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Jerarqua ancha
Pgina Principal

Servicios

Portales

Noticias

Banca

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Viajes

62

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Jerarqua mixta
Pgina Principal

Servicios

Descargas

Portales

E-mail

Todo en Uno

Banca

Nacional

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Internacional

63

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Arbol con entrada lineal
Productos

Pgina de
entrada o de
bienvenida

Pgina Principal
Verdadera

Servicios

Presentacin

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

Corporativos
Personales
Online
Catalogo
Mision, Vision
Staff

64

Principios Bsicos de Diseo de Sitios Web

Estructura del sitio(Modelos).


Web Pura
Productos

Mapa del Sitio

Servicios
Buscador
Principal

Contactos

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

65

Principios Bsicos de Diseo de Sitios Web

Tipos especficos de sitios Web.


Los sitios pblicos se pueden clasificar en:
Comerciales: su finalidad principal es servir al usuario, de modo
que, de manera directa o indirecta, se beneficie a la
empresa(transaccin comercial).
Informtivos: su finalidad general es la distribucin de
informacin(los de grupos religiosos, organizaciones sin nimo
de lucro, los de noticias, los educativos, sitios del gobierno).
Entretenimiento: su finalidad es simplemente entretener a sus
visitantes. Tratan de vender una experiencia agradable.
Navegacionales: es el que tiene como finalidad ayudar a la
gente a no perderse en Internet(portales).
Comunidad: su finalidad es crear un punto central para que los
miembros de una determinada comunidad se congreguen y se
relacionen.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

66

Principios Bsicos de Diseo de Sitios Web

Tipos especficos de sitios Web.


Los sitios pblicos se pueden clasificar en:
Artstico: su finalidad es inspirar, iluminar o entretener a los
espectadores.
Personal: su finalidad es personificar al individuo en la Web.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

67

Principios Bsicos de Diseo de Sitios Web

Resumen.

Los sitios Web se pueden clasificar segn su


audiencia(pblicos, intranet y extranet) o
finalidad(comerciales, informativos, personales,
artsticos,entretenimiento, navegacionales y
comunidad).
La eleccin de la estructura correcta para un
determinado sitio es compleja y puede estar influida por
varios factores.

Ing. Fabio Garca Ramrez


Tecnologa en Sistemas de Informacin

68