Programación en Internet Curso Índice

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 (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: p home page,, root page,, entry ypage,, 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 DLSI - Universidad de Alicante 2

3 DLSI - Universidad de Alicante 3

4 DLSI - Universidad de Alicante 4

5 DLSI - Universidad de Alicante 5

6 DLSI - Universidad de Alicante 6

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

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

9 Ejemplos de estructuras físicas (y 2) Nombres de ficheros y carpetas (1) 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 DLSI - Universidad de Alicante 9

10 Nombres de ficheros y carpetas (y 2) No confundir / para las direcciones de la web con \ para las direcciones en Microsoft Windows Enlaces (1) DLSI - Universidad de Alicante 10

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

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

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

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

15 DLSI - Universidad de Alicante 15

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

17 DLSI - Universidad de Alicante 17

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

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

20 Estructura mixta Inicio Inicio Inicio Esta estructura es el caso más frecuento de sitios web Expresividad Comparación Alto, contenido complejo, muy flexible, usuarios expertos Rejilla Red Bajo, contenido sencillo, poco flexible, usuarios no expertos Secuencial Árbol Navegación Predecible, lineal, poco confusa, riesgo bajo de desorientación y pérdida Impredecible, no lineal, confusa, riesgo alto de desorientación y pérdida DLSI - Universidad de Alicante 20

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

22 DLSI - Universidad de Alicante 22

23 DLSI - Universidad de Alicante 23

24 DLSI - Universidad de Alicante 24

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

26 DLSI - Universidad de Alicante 26

27 Guía de estilo (2) 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 Guía de estilo (y 3) Evitar menús, opciones, estructuras y caminos 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 DLSI - Universidad de Alicante 27