PDF de programación - 1.13 Sitio web: estructura y navegación

104

Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0



1.13 Sitio web:
estructura y navegación



105

Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0


1.13 Sitio web: estructura y navegación


1.13.1 ¿Qué es un sitio web?

Un sitio web (en inglés:website) es un conjunto de páginas html relacionadas entre sí por
hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir
de una dirección URL de su página índice (index) y con una unidad de contenido y de estilo
gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web.
Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a
partir de una página principal o índice se enlazan el resto de páginas.


1.7.2 La estructura de archivos y carpetas

Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y
archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en
carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar
el sistema de ficheros.

Con carácter general se proponen un modelo basado en la organización por tipos de archivos.

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.



Esta organización está especialmente pensada para un sistema de páginas HTML que
comparten recursos: imágenes, hoja de estilo, javascript, etc.

Las principales carpetas que utiliza son:



css: hojas de estilo css.

images: imágenes jpg, gif o png.

• audios: archivos de audio mp3.
•
• descargas: archivos zip, exe, etc que se ofrecen para descarga.
•
• 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

106

web

a

los

archivos

HTML

Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0


Cuando el número de páginas sobre un tema es elevado se suele abrir una subcarpeta dentro
de la carpeta principal. A este espacio se la suele llamar micrositio. Ejemplo: Sitio web del
Departamento de Física y Química dentro del sitio web del Instituto. El acceso por el
navegador
sera:
http://www.misitio.es/nombre_subcarpeta/. La estructura de archivos de esta subcarpeta
puede ser similar a la propuesta para la carpeta raíz: audios, css, docs, images, js, etc o bien
tener una organización más plana (sin carpetas) e incluso independiente de los archivos de
otras carpetas.


1.7.3 Los nombres de carpetas y archivos

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


subcarpeta

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

esta

de

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.



1.7.4 La estructura de navegación

La estructura de navegación por un sitio web viene definida por la experiencia de navegación
del visitante en virtud de la cual puede saltar de una página a otra dentro del sitio web
utilizando el sistema de hipervínculos.

La estructura de navegación se suele elegir en función del tipo de contenido. 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. Desde estas subpáginas se puede acceder a
otras y así sucesivamente creando distintos niveles o jerarquías. Es ideal para
sitios web de centros o proyectos. No se aconseja utilizar más de 4 niveles para
evitar que el usuario se desoriente durante la navegación. Conviene situar en
todas las páginas un menú que permita moverse de una forma fácil y directa por
los distintos niveles y páginas de cada nivel.

Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0



107



• 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. Es
especialmente útil si deseamos que el usuario siga un itinerario fijo y guiado sin
posibilidad de acceder a otras páginas que pudieran distraerle. Ejemplo: Guía o
tutorial de aprendizaje. No es recomendable si el número de páginas encadenadas
es muy elevado porque produce sensación de fatiga y no permite retomar
fácilmente la secuencia allí donde se abandonó en la última sesión.

• 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 una estructura más libre pero no es aconsejable
cuando el número de páginas es elevado porque desorienta al usuario al no saber
dónde está ni disponer de recursos para ir donde desea.



Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0



108



1.10.5 ¿Cómo crear un sitio web con Kompozer?

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

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.



Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0



109



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.

Páginas web ::: El sitio web: estructura y navegación
Diseño de materiales multimedia. Web 2.0



110



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 <enter> 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.



13. Repite los pasos 11 y 12 para crear los enlaces al resto de páginas :

• Demografía: poblacion.html
• Escribe tu cuento: escribe.html
• Glosario: glosario.html


14. Selecciona Archivo > Guardar como
15. Introduce el título: Mi página principal para guardar la página index.html en la

carpeta miweb.

16. Para probar su funcionamiento pulsa en el botón Navegar.