Estructura sitio web - rua.ua.es · Programación en Internet 2006-2007 DLSI - Universidad de...

Programación en Internet 2006-2007

DLSI - Universidad de Alicante 1

Departamento de Lenguajes y Sistemas Informáticos

Estructura sitio web

Programación en InternetCurso 2006-2007

Programación en Internet – Curso 2006-2007

Í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




Qué es un sitio web• 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 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 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, etc.

– 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 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• Elegir nombres intuitivos y fáciles de recordar

y escribirhttp://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

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 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”>


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

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

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”>

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

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

Los enlaces relativos no necesitan cambiarse, pero los absolutos sí.


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...

Navegación libre

Poca libertad...

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

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

Inicio





Estructura en árbol

Inicio




Problemas estructura en árbol• Poco profunda • Muy profunda


Estructura en redInicio

Inicio

Inicio




Estructura mixtaInicio

Inicio

Inicio

Esta estructura es el caso más frecuento de sitios web


Comparación

Predecible, poco confusa, riesgo bajo de desorientación

Impredecible, confusa, riesgo alto de desorientación

Bajo, poco flexible

Alto, muy flexible

SecuencialÁrbol

RejillaRed

Navegación

Expresividad




Mecanismos de navegación• Para evitar que el usuario o visitante no se

pierda durante la navegación, 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 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 (y 3)• 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• Evitar menús, opciones, estructuras y caminos muy

largos o numerosos (siete es el número más apropiado)

Estructura sitio web - rua.ua.es · Programación en Internet 2006-2007 DLSI - Universidad de...

Documents

Transcript of Estructura sitio web - rua.ua.es · Programación en Internet 2006-2007 DLSI - Universidad de...