8/9/2019 Ppt_diseo web

1/13

Diseo de Sitios y

Pginas Web

8/9/2019 Ppt_diseo web

2/13

1. Concepto de sitios Web y pginas Web

2. Concepto de Usabilidad y Accesibilidad de

un sitio Web.

3.Aspectos de Usabilidad a tener en cuenta:a) Objetivos y pblico objetivo.

b) Tipos de estructura de un sitio Web

c) Niveles en un sitio Web

d) Navegacin en un sitio Web.Consejos

e) Tipos de enlaces Web

f) Diseo lgico de un sitiog) Prototipacin

INDICE

8/9/2019 Ppt_diseo web

3/13

Sitios Web y Pginas Web

Sitio Web: Es un conjunto de archivo llamados pginas Web generalmente

vinculadas entre si por enlaces, con un mismo contenido temtico, y organizadas

jerrquicamente. Generalmente tiene una pgina principal que se llama

index.html

Pgina Web: Es parte de un sitio Web y es un nico archivo con nombre propio.

Pgina Web

Sitio Web

Pgina principal:

Index.html

8/9/2019 Ppt_diseo web

4/13

Un Nombre

Una direccin fsica endeterminado lugar

Un espacio fsico (Local)

Organizar las mercaderasdentro del local

Una Vidriera (Primera caravisible)

Accesos internos a lasdistintas ofertas que secomercializan

Similitudes Comercio / Sitio WebSimilitudes Comercio / Sitio Web

Un Nombre

Una direccin virtual(Dominio)

Un espacio fsico dealojamiento (Hosting)

Organizar la informacindentro del Sitio Web

Una Pgina Principal(Primera cara visible)

Hipervnculos a las distintasPginas publicadas.

Un Sitio Web necesitaComercio

8/9/2019 Ppt_diseo web

5/13

Elementos de una pgina Web

Fuente: www.vectoralia.com/manual/html/elementos_web .html

8/9/2019 Ppt_diseo web

6/13

Qu hace que un sitio Web sea fcil de

usarlo e intuitivo para la mayora de las

personas?

Dos conceptos clavesDos conceptos claves

UsabilidadUsabilidad AccesibilidadAccesibilidad

Es la capacidad de un sitio Web deser comprendido, aprendido y usado

por un usuario. Conjunto de tcnicas

orientadas a tal fin (diseo grafico,

estructura, publico objetivo,

navegacin y enlaces entre otros

Es la capacidad de acceso a un sitio Web ysus contenidos por parte de todas las

personas independientemente de la

discapacidad (fsica, intelectual o tcnica)

que tengan o las relacionadas al contexto

de uso. Por ejemplo: textos alternativos en

imgenes (ALT), enlaces significativos, etc

8/9/2019 Ppt_diseo web

7/13

Objetivo y pblico objetivo

Implica

C. Qu necesitan

B. Para qu usan el sitio

D. Testar el sitio con los propios usuariosE. Investigar cmo reaccionan ante el

diseo

F. Cmo es su experiencia de uso

G. Cmo es el contexto de uso

MODELADO DEL

USUARIO

Es determinar perfilesde usuarios en relacin

a atributos comunes

Enlace: Perfiles de usuarios

A. Conocer cmo son Edad de la mayora de los usuarios que podran

acceder al sitio.Necesidades de informacin.

Conocimientos informticos.

Ubicacin geogrfica.Idioma.Equipo de cmputo

Capacidad de adaptacin al sistema

de navegacin.

Usos del sitio Web trabajo, divulgacin, comercial, educativo

Uso intuitivo y efectivo. Amigable

8/9/2019 Ppt_diseo web

8/13

Diseo lgico de un sitio Web

Luego de saber los objetivos se establece la organizacin lgica de las pginasdel sitio Web y la informacin que ir en cada una de ellas.

Para el diseo lgico se aplico metforas que implica utilizar ejemplos concretos y

familiares de la vida que me sirvan luego en la estructura del sitio. Por ejemplo un

rbol, libro, tienda entre otras.

De la estructura lgica de un sitio surgen los mapas de navegacin es decir la

estructura que tiene mi sitio Web y sus interconexiones

8/9/2019 Ppt_diseo web

9/13

Es la forma que tendr el Sitio Web con sus secciones, funcionalidades ysistemas de navegacin

Estructura de un sitio WebEstructura de un sitio Web

Tipos

Existe una pgina principaly de ah se accede a otro

grupo de pginas y estas a

su vez son nodo de otras

(niveles). Es jerarquizada,

compleja, y algo difcil para

navegar.Consejo no mas

de 3 niveles.

Arbol Listas

La organizacin delsitio es totalmente

opuesto al anterior.No

existe una pgina raz

o principal. Ideal para

manuales o guas.

Tiene las ventajasde las 2

anteriores. Las

pginas estn

jerarquizadas en

niveles, y en cada

nivel se organizan

como listas.

Mixta

Pginas todasconectadas entre

si. Algo anrquica.

Ojo! no dejar

enlaces

inexistentes y que

el usuario se

pierda

Red

8/9/2019 Ppt_diseo web

10/13

Niveles de un Sitio Web

Se refiere a distancia mxima para alcanzar un determinado documento dentro de

un sitio Web. Es aconsejable no mas de 3 niveles.

Nivel 1

Nivel 2

Nivel 3

Nivel 5

Nivel 4

8/9/2019 Ppt_diseo web

11/13

Navegacin en los sitios Web

Debe tener las siguientes caractersticas:

A-Consistente: El sistema de navegacin debe ser similar en todo el sitio

en su ubicacin y disposicin en las pginas.

B- Uniforme: Deben de usarse los mismos trminos en todas las pginaspara que el usuario se sienta seguro que va donde desea.

C-Visible: El sistema debe distinguirse claramente dentro del sitio

Tambin hay que considerar 2 elementos claves para la navegacin:

1- Textual: La navegacin se hace con elementos concretos: men, guas y

botones que digan con claridad la accin que van realizar

Se refiere a las formas de acceder a los distintos contenidos del sitio

2- Contextual: Elementos relevantes que permitan mostrar la navegacin en

pantalla

8/9/2019 Ppt_diseo web

12/13

Tipos de enlaces Web

Enlaces semnticos: Son enlaces entre pginas que tienen una relacin de

contenidos entre s

Enlaces de navegacin: Solo sirven para conectar pginas entre s sin un

relacin explcita. Ej.: El enlace Volver o Pgina inicial o el camino recorridoen el sitio

De una importancia igual o superior a la conquista militar, la

evangelizacin de los pueblos indgenas recay en manos de los

Frailes dominicos, quienes mandaron construir, con mano de obra

esclava de origen indgena, numerosos templos iglesias y conventos.

Enlace semntico

Enlace de navegacin

8/9/2019 Ppt_diseo web

13/13

Prototipado

Significa elaborar modelos o prototipos del sitio Web y por lo tanto no es

el producto final, pero sirve para observar si se van cumpliendo los

objetivos de usabilidad y accesibilidad. Luego de implementado se

desecha.

Segn el grado de fidelidad o calidad del prototipo se distingue entre:

Prototipado de alta fidelidad: El prototipo ser muy parecido al sitio

Web una vez terminado.

Prototipado de baja fidelidad: El aspecto del prototipo distar bastante

del que tenga el sitio Web final