Sitio web: estructura web

Sitio web: estructura y navegacin

Qu es un sitio web?
Un sitio web (en ingls:website) es un conjunto de pginas html relacionadas entre s
por hiperenlaces, gestionadas por una nica entidad o persona, accesibles desde
Internet a partir de una direccin URL de su pgina ndice (index) y con una unidad de
contenido y de estilo grfico. Incluye textos, imgenes, archivos de audio, vdeo y
enlaces a otros sitios web. Normalmente no se disea una pgina web aislada sino ms
bien un sitio completo donde a partir de una pgina principal o ndice se enlazan el
resto de pginas.

La estructura de archivos y carpetas

Antes de iniciar el diseo de un sitio web es necesario preparar su estructura de
carpetas y archivos. Cuando el nmero de ficheros es considerable, resulta muy til
ubicarlos en carpetas para facilitar su localizacin y edicin. Existen mltiples
posibilidades de organizar el sistema de ficheros.
Con carcter general se proponen un modelo basado en la organizacin por tipos de
archivos.
Las pginas HTML se guardarn en el directorio o carpeta principal mientras que los
elementos que utilizan (audios, vdeos, hojas de estilo, imgenes, etc) se situarn en
las subcarpetas correspondientes.

Esta organizacin est especialmente pensada para un sistema de pginas HTML que
comparten recursos: imgenes, hoja de estilo, javascript, etc.
Las principales carpetas que utiliza son:

audios: archivos de audio mp3.

css: hojas de estilo css.
descargas: archivos zip, exe, etc que se ofrecen para descarga.
images: imgenes jpg, gif o png.
pdf: documentos pdf.

Prof:Bryan Timoteo Flores

Pgina 1

Sitio web: estructura web

scripts: archivos js con cdigo javascript reutilizable.

swfs: archivos con animaciones flash (*.swf).
vdeos: ficheros en distintos formatos de vdeo: *.wmv, *.flv

Prof:Bryan Timoteo Flores

Pgina 2

 Cuando el nmero de pginas 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 Fsica y Qumica dentro del sitio web del Instituto. El
acceso por el navegador web a los archivos HTML de esta subcarpeta ser:
http://www.misitio.es/nombre_subcarpeta/. La estructura de archivos de esta
subcarpeta puede ser similar a la propuesta para la carpeta raz: audios, css, docs,
images, js, etc o bien tener una organizacin ms plana (sin carpetas) e incluso
independiente de los archivos de otras carpetas.

Los nombres de carpetas y archivos

Con intencin de evitar errores es interesante respetar las siguientes normas cuando se
asigna nombre a carpetas o archivos:
El nombre asignado estar formado por caracteres alfanumricos: a-z y 0-9
No debe contener caracteres no alfanumricos, signos de puntuacin, espacios en
blanco, caracteres acentuados, ees, etc.
Los nicos caracteres no alfanumricos permitidos son el subrayado _ y el guin
No debe superar los 20 caracteres.
Utilizar siempre letras minsculas aunque se admitan maysculas. Hay servidores que
distinguen entre maysculas y minsculas. Esto significa que la pgina INDEX.html no es
la misma que la pgina index.html.
Para las pginas HTML utilizar siempre la extensin: *.html aunque se admita la
o *.htm.
Reserva el nombre index.html para la pgina que deseamos se muestre por defecto
cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto.

La estructura de navegacin

La estructura de navegacin por un sitio web viene definida por la experiencia de

navegacin del visitante en virtud de la cual puede saltar de una pgina a otra dentro
del sitio web utilizando el sistema de hipervnculos.
La estructura de navegacin se suele elegir en funcin del tipo de contenido. Existen
distintos tipos de estructuras:

Jerrquica. Estructura en rbol donde existe una pgina ndice o principal desde
donde se accede al resto de pginas. Desde estas subpginas se puede acceder a
otras y as sucesivamente creando distintos niveles o jerarquas. Es ideal para
sitios web de centros o proyectos. No se aconseja utilizar ms de 4 niveles para
evitar que el usuario se desoriente durante la navegacin. Conviene situar en
todas las pginas un men que permita moverse de una forma fcil y directa por
los distintos niveles y pginas de cada nivel.

Prof:Bryan Timoteo Flores

Pgina 3

Lineal. Es una estructura muy simple similar a las pginas de un libro. Desde una
pgina concreta se puede ir a la pgina siguiente o la pgina anterior. Es
especialmente til si deseamos que el usuario siga un itinerario fijo y guiado sin
posibilidad de acceder a otras pginas que pudieran distraerle. Ejemplo: Gua o
tutorial de aprendizaje. No es recomendable si el nmero de pginas
encadenadas es muy elevado porque produce sensacin de fatiga y no permite
retomar fcilmente la secuencia all donde se abandon en la ltima sesin.

Lineal con jerarqua. Es una estructura hbrida que trata de aprovechar las
ventajas de las dos estructuras anteriores. Las pginas y subpginas se organizan
de forma jerrquica pero tambin es posible navegar de forma lineal por las
pginas de un mismo nivel. Los contenidos web de este curso utilizan esta
estructura.

Red. A partir de la pgina ndice o principal se puede navegar a otra u otras sin
ningn orden aparente. Es una estructura ms libre pero no es aconsejable
cuando el nmero de pginas es elevado porque desorienta al usuario al no saber
dnde est ni disponer de recursos para ir donde desea.

Prof:Bryan Timoteo Flores

Pgina 4

Cmo crear un sitio web con Kompozer?

Es prctica 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 continuacin 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 funcin <F9>
3. En el panel Administrador de sitios pulsa en el botn Editar sitios.

4. En el cuadro Configuracin de publicacin introduce MiSitio en el cuadro de texto

Nombre de sitio y pulsa el botn Seleccionar directorio para apuntar a la carpeta
miweb. Clic en el botn Aceptar.

Prof:Bryan Timoteo Flores

Pgina 5

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 aaden elementos utilizando el explorador de archivos de
Windows o bien cuando se crea una pgina 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 modificacin 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.

Prof:Bryan Timoteo Flores

Pgina 6

Sitio web: estructura web

8. A continuacin vamos a crear la pgina index.html de nuestro sitio web. Para ello
seguiremos el procedimiento habitual: Archivo > Nuevo.
9. Escribe Mi pgina principal, selecciona el texto y elige como formato Ttulo 1.
10. Pulsa la tecla <enter> para situarte en la siguiente lnea y pulsa en el botn
de la barra de herramientas de Formato.

Vietas

11. Escribe Federico Garca Lorca, selecciona el texto y pulsa en el botn Enlace.

12. En el cuadro de dilogo Propiedades del enlace haz clic en el botn Elegir archivo
y localiza la pgina lorca.html situada en la carpeta miweb. Clic en Aceptar.

13. Repite los pasos 11 y 12 para crear los enlaces al resto de pginas :
Demografa: poblacion.html
Escribe tu cuento: escribe.html
Glosario: glosario.html
14. Selecciona Archivo > Guardar como
15. Introduce el ttulo: Mi pgina principal para guardar la pgina index.html en la
carpeta miweb.
16. Para probar su funcionamiento pulsa en el botn Navegar.

Prof:Bryan Timoteo Flores

Pgina 110