04b EstructuraSitiosWeb

Programación en Internet 2007-2008
Departamento de Lenguajes y
Sistemas Informáticos
Estructura sitio web
Programación en Internet
Curso 2007-2008
Programación en Internet – Curso 2007-2008
Índice
• Qué es un sitio web
• Contenido de un sitio web
• Estructura física
– Ficheros y enlaces
• Estructura lógica
– Estructura secuencial (sequence structure)
– Estructura en rejilla (grid structure)
– Estructura en árbol (tree structure)
– Problemas estructura en árbol
– Estructura en red (web structure)
– Estructura mixta
• Comparativa de estructuras
• Guía de estilo
DLSI - Universidad de Alicante 1

Qué es un sitio web (1)

• Un sitio web es un conjunto de páginas web
relacionadas
• Una página web es:
código HTML + recursos
• Página inicial: splash page
– Atractiva, poco texto y mucho multimedia. Túnel de entrada
– Selección de idioma, requisitos técnicos. Salto automático.
Caché de imágenes
• Página
g p
principal:
p home p
page,
g , root p
page,
g , entryy p
page,
g ,
front page
– Índice de la web, menú de opciones
– Cruce de todos los “caminos” del sitio web
– Evitar muchas opciones
Qué es un sitio web (y 2)

• Ejemplos página inicial-principal:
– Selección idioma
– Selección situación geográfica
– Selección tipo de usuario





Contenido de un sitio web

• Parte fundamental de un sitio web. Clave de
su éxito
éxito, su utilidad
• Contenidos comunes y específicos
– Empresas: quienes somos, información de
contacto, objetivos, clientes, productos, etc.
– Periódicos: noticias (nacionales, deportivas, …),
opiniones, servicios informativos, etc.
– Centros educativos: profesorado, estudios,
servicios,
i i etc.
t
– Portales: noticias, canales, correo, chat, etc.
• Un mismo contenido puede estar en varias
categorías Æ Hipertexto
Estructura física (1)

• Forma de almacenar los elementos de
un sitio web Æ Directorios

Estructura física (y 2)
• Puede reducir (o aumentar) los costos de
mantenimiento
• Se ha de elegir al principio, cambiarla puede ser muy
costoso (cambio de enlaces, referencias a imágenes,
etc.)
• Evitar ponerlo todo en un único directorio o crear
muchos niveles de subdirectorios Æ URL largas
• Tipos de clasificaciones:
– Por tipo
p de fichero
– Nivel de acceso
– Contenido de los ficheros
– Fecha de creación o publicación
– Propietario, autor o departamento
– Según la estructura lógica de navegación
Ejemplos de estructuras físicas (1)

Ejemplos de estructuras físicas (y 2)
Nombres de ficheros y carpetas (1)

• Elegir nombres intuitivos y fáciles de recordar
y escribir
http://www.electropeix.net/electronica/video/producto0103.html
• Evitar caracteres “extraños”. Todo lo que no
sea un número y letras del alfabeto inglés:
– Ç, ñ, &, %, #, acentos y diéresis
• Cuidado con los sistemas operativos “case-
sensitive”, sensibles a las mayúsculas y
minúsculas
Productos.html
http://www.empresa.com/productos.html productos.html
PRODUCTOS.HTML

Nombres de ficheros y carpetas (y 2)

• No confundir ‘/’ para las direcciones de
la web con ‘\’ para las direcciones en
Microsoft Windows
Enlaces (1)

Enlaces (y 2)
• Enlaces relativos Æ Facilita “transporte”
– Relativos al directorio donde reside la
página
<A HREF=“privado/index.html”>
<IMG SRC=“../img/gif/logo.gif”>
• Enlaces absolutos Æ Estructura fija
– A partir del directorio raíz del sitio web
<A HREF=“/privado/index.html”>
<IMG SRC=“/media/img/gif/logo.gif”>
La página index.html posee una serie de enlaces, absolutos y

relativos. Trasladamos (copiamos) el sitio web a otro
ordenador y lo tenemos que alojar dentro de un directorio
llamado “pepe”.
<IMG SRC=“img/logo.gif”>
<IMG SRC=“/img/logo.gif”>
<A HREF=“publico/index.html”>
<A HREF=“/publico/index.html”>

Los enlaces relativos no necesitan cambiarse, pero los

absolutos sí.
<IMG SRC=“img/logo.gif”> <IMG SRC=“img/logo.gif”>

<IMG SRC=“/img/logo.gif”> <IMG SRC=“/pepe/img/logo.gif”>
<A HREF=“publico/index.html”> <A HREF=“publico/index.html”>

<A HREF=“/publico/index.html”> <A HREF=“/pepe/publico/index.html”>
Estructura lógica (1)

• Navegación, recorrido de las páginas por los
visitantes
• La estructura define como se van a ver las páginas
de un sitio web
• Independiente de la estructura física (lo debería ser)
• Según el tipo de navegación:
Navegación controlada Poca libertad
. .
. .
. .
Navegación libre Mucha libertad

Estructura lógica (2)

• Hace falta una planificación y un diseño
previo
• En función:
– Del propósito del sitio web
– Del contenido
– Del público o audiencia destinatarios
– De aquello que se espera obtener del sitio web
– De aquello que los visitantes esperan obtener
• A veces existen auténticos guiones detrás de
muchas estructuras de navegación
Estructura lógica (y 3)

Estructura secuencial
Inicio
Ejemplo:
•Un curso o tutorial
•Una visita (tour) guiada
•Un asistente (wizard)
•Un proceso determinado (una compra)


Inicio
Estructura en rejilla
Estructuras secuenciales paralelas

Ejemplo: sitio web bilingüe, sitio web en varios
formatos de presentación


Estructura en árbol
Inicio

Problemas estructura en árbol

• Poco profunda • Muy profunda
Estructura en red
Inicio
Inicio
Inicio

Estructura mixta
Inicio
Inicio
Inicio
Esta estructura es el caso más frecuento de sitios web
Comparación
Expresividad
Alto,, contenido
complejo, muy flexible,
usuarios expertos Red
Rejilla
Árbol
Secuencial
Bajo, contenido
sencillo, p
poco
flexible, usuarios no
expertos
Navegación
Predecible, lineal, Impredecible, no

poco confusa, riesgo lineal, confusa, riesgo
bajo de alto de
desorientación y desorientación y
pérdida pérdida

Mecanismos de navegación
• Para evitar que el usuario o visitante no se
pierda
i d d durante
t lla navegación,
ió se puede d usar:
– “Rastro de las migas de pan”: muestra una lista
con los enlaces que el usuario ha visitado o el
nivel actual de la jerarquía de navegación desde
la página principal
– Numeración de los pasos: se indica una lista con
todos los pasos necesarios para completar un
proceso así como el paso en el que se encuentra
el usuario




Guía de estilo (1)

• Regla de los “tres clicks”
– Para acceder a la información útil
• Evitar “callejones sin salida”
• Todas las páginas:
– Un enlace a la página principal
– A la página anterior


Guía de estilo (2)

• Barra de navegación (menú con las opciones
principales del sitio web)
• Opción de búsqueda
• Mapa del sitio
• Indicar formas de contacto con alguna
persona (correo, teléfono): webmaster,
comercial, etc.
• Aplicar una imagen corporativa para
proporcionar una sensación de pertenencia al
sitio web
Guía de estilo (y 3)
• Evitar menús, opciones, estructuras y
caminos muy largos o numerosos (siete es el
número más apropiado)
• Mostrar la información de lo más general a lo
más detallado
• Aprovechar el hipertexto: el usuario puede
buscar una misma información mediante
varios conceptos

04b EstructuraSitiosWeb

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

04b EstructuraSitiosWeb

Uploaded by

Copyright:

Available Formats

Programación en Internet 2007-2008

Estructura sitio web

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 1

Programación en Internet – Curso 2007-2008

Qué es un sitio web (1)

Programación en Internet – Curso 2007-2008

Qué es un sitio web (y 2)

DLSI - Universidad de Alicante 2

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 3

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 4

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 5

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 6

Programación en Internet – Curso 2007-2008

Contenido de un sitio web

Programación en Internet – Curso 2007-2008

Estructura física (1)

DLSI - Universidad de Alicante 7

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

Ejemplos de estructuras físicas (1)

DLSI - Universidad de Alicante 8

Programación en Internet – Curso 2007-2008

Ejemplos de estructuras físicas (y 2)

Programación en Internet – Curso 2007-2008

Nombres de ficheros y carpetas (1)

DLSI - Universidad de Alicante 9

Programación en Internet – Curso 2007-2008

Nombres de ficheros y carpetas (y 2)

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 10

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

La página index.html posee una serie de enlaces, absolutos y

DLSI - Universidad de Alicante 11

Programación en Internet – Curso 2007-2008

Los enlaces relativos no necesitan cambiarse, pero los

<IMG SRC=“img/logo.gif”> <IMG SRC=“img/logo.gif”>

<A HREF=“publico/index.html”> <A HREF=“publico/index.html”>

Programación en Internet – Curso 2007-2008

Estructura lógica (1)

DLSI - Universidad de Alicante 12

Programación en Internet – Curso 2007-2008

Estructura lógica (2)

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 13

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 14

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante 15

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

Estructuras secuenciales paralelas