Estructura sitio webEstructura sitio web · Programación en Internet 2007-2008 DLSI - Universidad...
Transcript of 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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 2
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 3
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 4
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 5
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 6
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 7
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
Estructura física (1)• Forma de almacenar los elementos de
un sitio web Directorios
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 8
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
Ejemplos de estructuras físicas (1)
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 9
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)• 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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 10
Programación en Internet – Curso 2007-2008
Nombres de ficheros y carpetas (y 2)
• No confundir ‘/’ para las direcciones de la web con ‘\’ para las direcciones en Microsoft Windows
Programación en Internet – Curso 2007-2008
Enlaces (1)
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 11
Programación en Internet – Curso 2007-2008
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”>
Programación en Internet – Curso 2007-2008
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”>
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 12
Programación en Internet – Curso 2007-2008
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”>
Programación en Internet – Curso 2007-2008
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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 13
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
Estructura lógica (y 3)
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 14
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Estructura secuencial
Inicio
Ejemplo:
•Un curso o tutorial
•Una visita (tour) guiada
•Un asistente (wizard)
•Un proceso determinado (una compra)
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 15
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 16
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Estructura en rejillaInicio
Estructuras secuenciales paralelas
Ejemplo: sitio web bilingüe, sitio web en varios formatos de presentación
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 17
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 18
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Estructura en árbol
Inicio
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 19
Programación en Internet – Curso 2007-2008
Problemas estructura en árbol• Poco profunda • Muy profunda
Programación en Internet – Curso 2007-2008
Estructura en redInicioInicio
Inicio
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 20
Programación en Internet – Curso 2007-2008
Estructura mixtaInicio
InicioInicio
Inicio
Esta estructura es el caso más frecuento de sitios web
Programación en Internet – Curso 2007-2008
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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 21
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 22
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 23
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 24
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 25
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
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
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 26
Programación en Internet – Curso 2007-2008
Programación en Internet – Curso 2007-2008
Programación en Internet 2007-2008
DLSI - Universidad de Alicante 27
Programación en Internet – Curso 2007-2008
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
Programación en Internet – Curso 2007-2008
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