Sitio web estructura y navegación

Un sitio web es un conjunto de páginas html relacionadas entre sí, accesibles desde Internet a partir
de una dirección URL

Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas archivos

Existen múltiples posibilidades de organizar
el sistema de ficheros.

Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los

elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las

subcarpetas correspondientes.

Las principales carpetas son:
• audios: archivos de audio mp3.
• css: hojas de estilo css.
• descargas: archivos zip, exe, etc que se ofrecen para descarga.
• images: imágenes jpg, gif o png.
• pdf: documentos pdf.
• scripts: archivos js con código javascript reutilizable.
• swfs: archivos con animaciones flash (*.swf).
• vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos:

1. El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9

2. No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.

3. Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión –

4. No debe superar los 20 caracteres.

5. Utilizar siempre letras minúsculas aunque se admitan mayúsculas. Hay servidores que distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no es la misma que la página index.html.

6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm.

7. Reserva el nombre index.html para la página que deseamos se muestre por defecto cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto.

La estructura de navegación por un sitio web viene definida por la experiencia de navegación del visitante

Existen distintos
tipos de estructuras:

Jerárquica. Estructura en árbol donde existe una página índice o principal desde donde se accede al resto de páginas.

Lineal. Es una estructura muy simple similar a las páginas de un libro. Desde una página concreta se puede ir a la página siguiente o la página anterior.

Lineal con jerarquía. Es una estructura híbrida que trata de aprovechar las ventajas de las dos estructuras anteriores. Las páginas y subpáginas se organizan de forma jerárquica pero también es posible navegar de forma lineal por las páginas de un mismo nivel. Los contenidos web de este curso utilizan esta estructura.

Red. A partir de la página índice o principal se puede navegar a otra u otras sin ningún orden aparente.

Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Esta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP.

Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Esta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP.

A continuación se detalla el procedimiento para convertir la carpeta miweb en un sitio web local utilizando Kompozer

1. Abre Kompozer

2. Elige Ver > Mostrar/Ocultar > Administrador de sitios o bien pulsa directamente la tecla de función

3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta miweb. Clic en el botón Aceptar.

5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono“+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas y archivos que contiene.

6. En la parte superior derecha del Administrador se dispone de botones que permiten:

1) Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es útil cuando se añaden elementos utilizando el explorador de archivos de Windows o bien cuando se crea una página HTML nueva.

2) Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta seleccionada en el árbol del Administrador de sitios.

3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta seleccionado.

4) Eliminar. Elimina el archivo o carpeta seleccionada.

7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css, descargas, pdf, plantillas, scripts, swf y videos.

8. A continuación vamos a crear la página index.html de nuestro sitio web. Para ello seguiremos el procedimiento habitual: Archivo > Nuevo.

9. Escribe “Mi página principal”, selecciona el texto y elige como formato Título 1.

10. Pulsa la tecla para situarte en la siguiente línea y pulsa en el botón Viñetas de la barra de herramientas de Formato.

11. Escribe “Federico García Lorca”, selecciona el texto y pulsa en el botón Enlace.

12. En el cuadro de diálogo Propiedades del enlace haz clic en el botón Elegir archivo y localiza la página lorca.html situada en la carpeta miweb. Clic en Aceptar. y localiza la página lorca.html situada en la carpeta miweb. Clic en Aceptar.