En el sitio de Internet: Midiendo la Biodiversidad en América del ...
Estructura sitio web - rua.ua.es · Programación en Internet 2006-2007 DLSI - Universidad de...
Transcript of 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
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 2
Programación en Internet – Curso 2006-2007
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
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 3
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 4
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
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
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 5
Programación en Internet – Curso 2006-2007
Estructura física (1)• Forma de almacenar los elementos de
un sitio web Directorios
Programación en Internet – Curso 2006-2007
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
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 6
Programación en Internet – Curso 2006-2007
Ejemplos de estructuras físicas (1)
Programación en Internet – Curso 2006-2007
Ejemplos de estructuras físicas (y 2)
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 7
Programación en Internet – Curso 2006-2007
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
Programación en Internet – Curso 2006-2007
Enlaces (1)
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 8
Programación en Internet – Curso 2006-2007
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 2006-2007
<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”.
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 9
Programación en Internet – Curso 2006-2007
<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í.
Programación en Internet – Curso 2006-2007
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
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 10
Programación en Internet – Curso 2006-2007
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
Programación en Internet – Curso 2006-2007
Estructura lógica (y 3)
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 11
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Estructura secuencial
Ejemplo:
•Un curso o tutorial
•Una visita (tour) guiada
•Un asistente (wizard)
•Un proceso determinado (una compra)
Inicio
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 12
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 13
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Estructura en rejilla
Estructuras secuenciales paralelas
Ejemplo: sitio web bilingüe, sitio web en varios formatos de presentación
Inicio
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 14
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 15
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Estructura en árbol
Inicio
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 16
Programación en Internet – Curso 2006-2007
Problemas estructura en árbol• Poco profunda • Muy profunda
Programación en Internet – Curso 2006-2007
Estructura en redInicio
Inicio
Inicio
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 17
Programación en Internet – Curso 2006-2007
Estructura mixtaInicio
Inicio
Inicio
Esta estructura es el caso más frecuento de sitios web
Programación en Internet – Curso 2006-2007
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
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 18
Programación en Internet – Curso 2006-2007
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
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 19
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 20
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 21
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
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 2006-2007
DLSI - Universidad de Alicante 22
Programación en Internet – Curso 2006-2007
Programación en Internet – Curso 2006-2007
Programación en Internet 2006-2007
DLSI - Universidad de Alicante 23
Programación en Internet – Curso 2006-2007
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)