Estructura sitio web

Transcripción

1 Departamento de Lenguajes y Sistemas Informáticos Estructura sitio web Programación en Internet Curso Í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 DLSI - Universidad de Alicante 1

2 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 DLSI - Universidad de Alicante 2

3 DLSI - Universidad de Alicante 3

4 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 DLSI - Universidad de Alicante 4

5 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 DLSI - Universidad de Alicante 5

6 Ejemplos de estructuras físicas (1) Ejemplos de estructuras físicas (y 2) DLSI - Universidad de Alicante 6

7 Nombres de ficheros y carpetas Elegir nombres intuitivos y fáciles de recordar y escribir 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 casesensitive, sensibles a las mayúsculas y minúsculas Productos.html productos.html PRODUCTOS.HTML Enlaces (1) DLSI - Universidad de Alicante 7

8 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 > DLSI - Universidad de Alicante 8

9 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... Navegación libre Poca libertad... Mucha libertad DLSI - Universidad de Alicante 9

10 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) DLSI - Universidad de Alicante 10

11 Inicio Estructura secuencial Ejemplo: Un curso o tutorial Una visita (tour) guiada Un asistente (wizard) Un proceso determinado (una compra) DLSI - Universidad de Alicante 11

12 DLSI - Universidad de Alicante 12

13 Inicio Estructura en rejilla Estructuras secuenciales paralelas Ejemplo: sitio web bilingüe, sitio web en varios formatos de presentación DLSI - Universidad de Alicante 13

14 DLSI - Universidad de Alicante 14

15 Estructura en árbol Inicio DLSI - Universidad de Alicante 15

16 Problemas estructura en árbol Poco profunda Muy profunda Estructura en red Inicio Inicio Inicio DLSI - Universidad de Alicante 16

17 Estructura mixta Inicio Inicio Inicio Esta estructura es el caso más frecuento de sitios web Expresividad Comparación Alto, muy flexible Rejilla Red Bajo, poco flexible Secuencial Árbol Navegación Predecible, poco confusa, riesgo bajo de desorientación Impredecible, confusa, riesgo alto de desorientación DLSI - Universidad de Alicante 17

18 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 DLSI - Universidad de Alicante 18

19 DLSI - Universidad de Alicante 19

20 DLSI - Universidad de Alicante 20

21 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 DLSI - Universidad de Alicante 21

22 DLSI - Universidad de Alicante 22

23 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) DLSI - Universidad de Alicante 23