Diseño de Sitios Web

Un sitio web es un conjunto de páginas web relacionadas entre sí.  Se entiende por página web a un archivo que contiene código HTML, y los recursos que se emplean en la página (imagenes, sonidos, scripts, etc.).

Estructura física

El contenido de un sitio web suele estar estructurado por diferentes recursos (archivos) que en conjunto representan todo un sistema de archivos en el servidor web. Dependiendo de la cantidad de archivos del sitio se pueden hacer las siguientes preguntas: ¿Todos los archivos se pueden almacenar en una única carpeta? ¿O deben almacenarse en distintas carpetas?. Al definir la estructura física de un sitio web hay que tener presente estas preguntas, ya que una adecuada planificación de esta estructura reduce costos de mantenimiento cada vez que se tenga que actualizar el sitio web, o de tiempo cada vez que se tenga que buscar un recurso para su actualización.

Si el sitio web contiene un número pequeño de archivos (5 o 10 archivos), quizás sea suficiente con tenerlos todos en una misma carpeta, pero si el número de archivos es muy grande conviene organizar los archivos en diferentes carpetas, de manera que sea fácil localizar los archivos y editarlos.

Existen diferentes alternativas de organización de un sitio web en archivos. Algunas de las más usuales son:

• Por el tipo de archivo. Por ejemplo, archivos HTML, archivos gráficos, de video, entre otros.
• Por el nivel de acceso (visibilidad). Por ejemplo, parte pública, parte privada de los clientes, parte privada de los administradores, etc.  
• Por el contenido. Por ejemplo, una empresa que vende productos puede organizar los archivos según la información que contiene: los archivos de la familia de productos A en una carpeta, en otra carpeta la familia de productos B, etc.
• Por fecha.  Por ejemplo, el sitio web de una revista puede organizar archivos según la fecha de publicación.
• Por su propietario. Por ejemplo, una empresa puede organizar los archivos, según el departamento al que pertenecen: departamento A, departamento B, etc.
• Por su estructura lógica o de navegación. La estructura física puede ser copia de la estructura lógica.

Por ejemplo, en la siguiente figura tenemos dos ejemplos de organización, para (a) el sitio web se ha organizado físicamente según su contenido, para (b) el sitio web se ha estructurado por tipo de archivo, (asp, html, etc) en  un primer nivel y en función del tipo de acceso (privado y público) y de tipo de archivo (gif, jpg,  png) en un segundo nivel.

Como buena práctica no se debe de crear estructuras de directorios muy profundas, ya que cada directorio que se crea añade unas letras más a la URL. Podría llegar a ser difícil recordar tal URL.

Los nombre de carpetas y archivos

 

Con la intencion de evitar errores es recomendable respetar las siguientes normas cuando se le asiga nombre a las carpetas o archivos:

1. El nombre debe estar formado por caracteres alfanuméricos: a-z y 0-9.
2. No debe contener caracteres no alfanuméricos como signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.
3. Los unicos caracteres no alfanuméricos permitidos son el subrayado _ (guión bajo) 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 lo mismo que la página index.html.
6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la  *.htm. 
7. Reservar el nombre index.html para la página que deseamos se muestre por defecto cuando el usuario navega en el sitio web, esta no deberá ir en ninguna carpeta.

Enlaces 

 

Los enlaces son claves en la web, ya que son los que permiten crear el hipertexto. Los enlaces se pueden crear en distintas formas. Atendiendo al ámbito de referencia, se pueden dividir en enlaces que hacen referencia a recursos del propio sitio web y enlaces que hacen referencia a recursos de otro sitio web.

Por otro lado, los enlaces se pueden clasificar en absolutos y relativos. Cuando se crea un enlace desde un sitio web, siempre se emplea un enlace absoluto de la forma:  
http://www.otrositio.mx/dir/recurso.yyyy.

Sin embargo, cuando se crea un enlace a un recurso en el mismo sitio web, se puede hacer en absoluto o relativo:

• Absoluto 1:  Similar al enlace a otro sitio web. Se indica el nombre del sitio actual y la ruta completa al recurso. Todos los enlaces de este tipo comienzan por http://. Por ejemplo: http://www.sitioactual.mx/dir/recurso.yyyy
• Absoluto 2: Se indica la ruta completa al recurso. Como  no se indica el nombre del sitio web, se emplea el actual. Todos los enlaces de este tipo comienzan por /.  Por ejemplo: /dir/recurso.yyyy
• Relativo:  No se indica la ruta completa, sino la posición relativa del recurso respecto al archivo que contiene el enlace. Por ejemplo, si un  enlace en la página a.html de la carpeta dir quereremos que apunte a la página b.html del mismo directorio, simplemente escribiremos: b.html.

 

Estructura lógica

La estructura lógica o de navegación define como un visitante se va a mover (navegar) de una zona a otra de un sitio web. Según el tipo de navegación que se permita en un sitio web, los usuarios pueden tener una sensación de  "poca libertad" (navegación controlada) o "mucha libertad" (navegación libre).

La estructura de navegación se suele elegir en función del tipo de contenido. Existen distintos tipos de estructura como:

Jerarquica. Estructura en árbol donde existe una página índice (index) o principal desde donde se accede al resto de las páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando distintos niveles o jerarquías. Esta estructura 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 más fácil y directa por los distintos niveles y páginas de cada nivel.

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 a la página anterior. Es muy útil si deseamos que el usuario siga un itinerario fijo y guiado sin la posibilidad que pueda acceder a otras páginas que puedan 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.

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