Estructura Sitios Web

Programacin en Internet 2006-2007
DLSI - Universidad de Alicante 1

Departamento de Lenguajes y
Sistemas Informticos
Estructura sitio web
Programacin en Internet
Curso 2006-2007
Programacin en Internet Curso 2006-2007
ndice
Qu es un sitio web
Contenido de un sitio web
Estructura fsica
Ficheros y enlaces
Estructura lgica
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
Gua de estilo
Qu es un sitio web
Un sitio web es un conjunto de pginas web
relacionadas
Una pgina web es:
cdigo HTML + recursos
Pgina inicial: splash page
Atractiva, poco texto y mucho multimedia. Tnel de entrada
Seleccin de idioma, requisitos tcnicos. Salto automtico.
Cach de imgenes
Pgina principal: home page, root page, entry page,
front page
ndice de la web, men de opciones
Cruce de todos los caminos del sitio web
Evitar muchas opciones
Contenido de un sitio web
Parte fundamental de un sitio web. Clave de
su xito, su utilidad
Contenidos comunes y especficos
Empresas: quienes somos, informacin de
contacto, objetivos, clientes, productos, etc.
Peridicos: noticias (nacionales, deportivas, ),
opiniones, servicios informativos, etc.
Centros educativos: profesorado, estudios,
servicios, etc.
Portales: noticias, canales, correo, chat, etc.
Un mismo contenido puede estar en varias
categoras Hipertexto
Estructura fsica (1)
Forma de almacenar los elementos de
un sitio web Directorios
Estructura fsica (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 imgenes,
etc.)
Evitar ponerlo todo en un nico directorio o crear
muchos niveles de subdirectorios URL largas
Tipos de clasificaciones:
Por tipo de fichero
Nivel de acceso
Contenido de los ficheros
Fecha de creacin o publicacin
Propietario, autor o departamento
Segn la estructura lgica de navegacin
Ejemplos de estructuras fsicas (1)
Ejemplos de estructuras fsicas (y 2)
Nombres de ficheros y carpetas
Elegir nombres intuitivos y fciles de recordar
y escribir
http://www.electropeix.net/electronica/video/producto0103.html
Evitar caracteres extraos. Todo lo que no
sea un nmero y letras del alfabeto ingls:
, , &, %, #, acentos y diresis
Cuidado con los sistemas operativos case-
sensitive, sensibles a las maysculas y
minsculas
http://www.empresa.com/productos.html
Productos.html
productos.html
PRODUCTOS.HTML
Enlaces (1)
Enlaces (y 2)
Enlaces relativos Facilita transporte
Relativos al directorio donde reside la
pgina
<A HREF=privado/index.html>
<IMG SRC=../img/gif/logo.gif>
Enlaces absolutos Estructura fija
A partir del directorio raz del sitio web
<A HREF=/privado/index.html>
<IMG SRC=/media/img/gif/logo.gif>
<IMG SRC=img/logo.gif>
<IMG SRC=/img/logo.gif>
<A HREF=publico/index.html>
<A HREF=/publico/index.html>
La pgina 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>
<A HREF=/publico/index.html>
<IMG SRC=/pepe/img/logo.gif>
<A HREF=/pepe/publico/index.html>
Los enlaces relativos no necesitan cambiarse, pero los
absolutos s.
Estructura lgica (1)
Navegacin, recorrido de las pginas por los
visitantes
La estructura define como se van a ver las pginas
de un sitio web
Independiente de la estructura fsica (lo debera ser)
Segn el tipo de navegacin:
Navegacin controlada
.
.
.
Navegacin libre
Poca libertad
.
.
.
Mucha libertad
Estructura lgica (2)
Hace falta una planificacin y un diseo
previo
En funcin:
Del propsito del sitio web
Del contenido
Del pblico o audiencia destinatarios
De aquello que se espera obtener del sitio web
De aquello que los visitantes esperan obtener
A veces existen autnticos guiones detrs de
muchas estructuras de navegacin
Estructura lgica (y 3)
Estructura secuencial
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 bilinge, sitio web en varios
formatos de presentacin
Inicio
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 ms frecuento de sitios web
Comparacin
Predecible,
poco confusa,
riesgo bajo de
desorientacin
Impredecible,
confusa, riesgo
alto de
desorientacin
Bajo, poco
flexible
Alto, muy
flexible
Secuencial
rbol
Rejilla
Red
Navegacin
Expresividad
Mecanismos de navegacin
Para evitar que el usuario o visitante no se
pierda durante la navegacin, se puede usar:
Rastro de las migas de pan: muestra una lista
con los enlaces que el usuario ha visitado o el
nivel actual de la jerarqua de navegacin desde
la pgina principal
Numeracin 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
Gua de estilo (1)
Regla de los tres clicks
Para acceder a la informacin til
Evitar callejones sin salida
Todas las pginas:
Un enlace a la pgina principal
A la pgina anterior
Gua de estilo (y 3)
Barra de navegacin (men con las opciones
principales del sitio web)
Opcin de bsqueda
Mapa del sitio
Indicar formas de contacto con alguna persona
(correo, telfono): webmaster, comercial, etc.
Aplicar una imagen corporativa para proporcionar
una sensacin de pertenencia al sitio web
Evitar mens, opciones, estructuras y caminos muy
largos o numerosos (siete es el nmero ms
apropiado)

Estructura Sitios Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Estructura Sitios Web

Încărcat de

Drepturi de autor:

Formate disponibile

Programacin en Internet 2006-2007

DLSI - Universidad de Alicante 1

S-ar putea să vă placă și