Sitios Web

Conceptos Básicos

• Historia

• Conceptos Básicos

• Necesidades de Hardware y Software

• Organización de Contenidos

• Guías para la creación de Paginas Web

Atractivas.

• Navegación (Recomendación y patrones)

1945 Vannevar Bush MEMEXMEMEX

1960 Douglas Egelbart OnLineSystemOnLineSystem

1965 Ted Nelson “HIPERTEXTO”“HIPERTEXTO”

1989 Tim Berners-LeeWWWWWW

CERN (Suiza)CERN (Suiza)

AntecedentesAntecedentes

2 tecnologías2 tecnologías

HipertextoHipertexto

Tcp-Ip Tcp-Ip

MosaicMosaicMarc AndreessenMarc Andreessen

htmlhtml

19931993

Página WebPágina WebColección de palabras, gráficos y otros objetos organizados en un flujo continuo y lineal desde arriba hacia abajo

Colección de palabras, gráficos y otros objetos organizados en un flujo continuo y lineal desde arriba hacia abajo

Sitio WebSitio Web

Colección de página Web interconectadas entre sí mediante enlaces de Hipertexto de forma que cada página se encuentra asociada con las demás

Colección de página Web interconectadas entre sí mediante enlaces de Hipertexto de forma que cada página se encuentra asociada con las demás

Conceptos básicosConceptos básicos

Página de Inicio

Página introductoria de un sitio Web. Es el punto de entrada a un sitio web particular

HTML

Lenguaje en el que se escriben las páginas a las que se accede a través de navegadores WWW.

HipertextoHipertexto

En Internet el término se aplica a los enlaces existentes en las páginas escritas en HTML, enlaces que llevan a otras páginas

En Internet el término se aplica a los enlaces existentes en las páginas escritas en HTML, enlaces que llevan a otras páginas

HipervínculoHipervínculo

Puntero existente en un documento hipertexto que apunta (enlaza) a otro documento que puede sero no otro documento hipertexto

Puntero existente en un documento hipertexto que apunta (enlaza) a otro documento que puede sero no otro documento hipertexto

Ancho de banda

Cantidad de información que puede ser trasmitida o recibida en un determinado intervalo de tiempo.

PreguntasPreguntas

Que tipo de servicios utilizará el sitio?Que tipo de servicios utilizará el sitio?

Cual es la naturaleza de sus contenidos?Tiene mucho contenido grafico?Cual es la naturaleza de sus contenidos?Tiene mucho contenido grafico?

Espera un crecimiento del sitio en un futuro cercano?Espera un crecimiento del sitio en un futuro cercano?

Qué tipo de usuarios espera tener? Son nuevos dentro de Internet o avanzados?Qué tipo de usuarios espera tener? Son nuevos dentro de Internet o avanzados?

Plan de CapacidadPlan de Capacidad

Requerimientos de Hardware mínimos

Tráfico bajo

(menos de 3 usuarios simultáneos)

Trafico medio

(de 3 a 15 usuarios simultáneos)

Tráfico Alto

(más de 15 usuarios)

WWW Pentium-133

64 MB de RAM

4 GB de DD

Pentium-133

64 MB de RAM

4 GB de DD

Pentium-200

125 MB de RAM

4 GB de DD

FTP Pentium-200

64 MB de RAM

4 GB de DD

Pentium -200

64 MB de RAM

4 GB de DD

Pentium-200

64 MB de RAM

4 GB de DD

E-mail Pentium II-400

125 MB de RAM

4 GB de DD

Pentium II-400

256 MB de RAM

4 GB de DD

Pentium II-600

512 MB de RAM

4 GB de DD

Otros serv.

Pentium II-400

256 MB de RAM

4 GB de DD

Pentium II-400

512 MB de RAM

4 GB de DD

Pentium III-800

1024 MB de RAM

4 GB de DD

• Seguir una estructura piramidal:. • Permitir una fácil exploración del

contenido: • Un párrafo = una idea: Cada párrafo es

un objeto informativo. • Ser conciso y preciso: • Vocabulario y lenguaje: • Confianza:

Diseño de ContenidosDiseño de Contenidos

Forma como los usuarios recorrerán a lo largo del las páginas del sitio, utilizando los enlaces.Forma como los usuarios recorrerán a lo largo del las páginas del sitio, utilizando los enlaces.

Organización jerárquicaOrganización jerárquica

Organización LinealOrganización Lineal

Organización de TelarañaOrganización de Telaraña

Esquemas de navegaciónEsquemas de navegación

_________________________

___________________________________

______________________________

______________________________

_____________________________________________

_____________________________________________

_____________________________________________

_____________________________________________

_________________________

_________________________

_________________________

_________________________

_________________________

Organización Jerárquica

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

Organización Lineal

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

Organización en Telaraña

La página de Inicio debe ser atractivaLa página de Inicio debe ser atractiva

Las páginas individuales deben tener un tamaño reducido y se debe limitar el alcance de los contenidos

Las páginas individuales deben tener un tamaño reducido y se debe limitar el alcance de los contenidos

Las páginas deben ser interesantesLas páginas deben ser interesantes

No se debe abusar de los gráficosNo se debe abusar de los gráficos

Recomendaciones para la creación de sitios webs

Precaución al utilizar gráficos para representar opcionesPrecaución al utilizar gráficos para representar opciones

No se debe llenar la pantalla con un único gráficoNo se debe llenar la pantalla con un único gráfico

No se debe depender de los gráficos a la hora de seguir el flujo del textoNo se debe depender de los gráficos a la hora de seguir el flujo del texto

• No perder a usuario– Que no se aburra– Que no se pierda navegando

Recomendaciones sobre la navegación

Qué hacer?

1. Coherencia en el diseño

•Uniformidad en la estructura de las paginas

•Uniformidad en los colores

2. Jerarquía visual

2

2

4

1

3. Botón inicio

Patrones de diseño

Tipos de diseño

5-Navegación L invertida

6-Navegación L inv. y espejo

1-Navegación superior

1

2-Navegación inferior

2

3-Navegación izquierda

3

4-Navegación derecha

4

Navegación en L invertida

Navegación en L invertida

Navegación en L inv. en espejo

Navegación en L inv. en espejo

Gracias por la atención