Estructura sitio webEstructura sitio web · Programación en Internet 2007-2008 DLSI - Universidad...

Programación en Internet 2007-2008

DLSI - Universidad de Alicante 1

Departamento de Lenguajes y Sistemas Informáticos

Estructura sitio webEstructura sitio web

Programación en InternetCurso 2007-2008

Programación en Internet – Curso 2007-2008

Índice• Qué es un sitio web• Contenido de un sitio webContenido 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 árbolProblemas estructura en árbol– Estructura en red (web structure)– Estructura mixta

• Comparativa de estructuras• Guía de estilo




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 principal: home page, root page, entry page, g p p p g , p g , y p 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 su utilidadsu é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, i i tservicios, 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 ficherop– 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 escribiry 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




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

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


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

previoprevio• 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)





Estructura en rejillaInicio

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 redInicioInicio

Inicio




Estructura mixtaInicio

InicioInicio

Inicio

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


Comparación

Alto, contenido

Expresividad

Bajo, contenido sencillo, poco

,complejo, muy flexible,

usuarios expertos

SecuencialÁrbol

RejillaRed

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

Impredecible, no lineal, confusa, riesgo alto de desorientación y pérdida

pflexible, usuarios no

expertos Navegación




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

i d d t l ió dpierda 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 (2)• Barra de navegación (menú con las opciones

principales del sitio web)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.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 elcaminos 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

Estructura sitio webEstructura sitio web · Programación en Internet 2007-2008 DLSI - Universidad...

Documents

Transcript of Estructura sitio webEstructura sitio web · Programación en Internet 2007-2008 DLSI - Universidad...