BLOG DE Articulos sobre el Mundo Informático e Internet

Para ser estrictos con el significado de los términos que usamos, debemos primero hacer la diferencia entre lo que es un sitio web y una página web. Un sitio web (en inglés: website) es un conjunto de páginas html, asp o php, relacionadas entre sí por hiperenlaces, gestionadas por una 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. En resumen, un sitio web es un conjunto de páginas web.

Entonces, cuando hablamos del buen diseño de un sitio web, no nos estamos refiriendo a la ESTÉTICA o buena apariencia del mismo, sino fundamentalmente a la adecuada ESTRUCTURA DEL SITIO y a la correcta FUNCIONALIDAD del mismo. La estructura del sitio se refiere a como están organizados los contenidos del sitio. La estética la trataremos cuando analicemos el diseño de una página web (individual).

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

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:

• 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.
• Sripts: archivos js con código javascript reutilizable.
• Swfs: archivos con animaciones flash (*.swf).
• Videos: archivos en distintos formatos de vídeo: *.wmv, *.flv

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 Informática dentro del sitio web del Instituto. El acceso por el navegador web a los archivos HTML de esta subcarpeta será: http://www.misitio.com/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.

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:

• El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9
• No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.
• Los únicos caracteres no alfanuméricos permitidos son el subrayado (_) y el guión (–). Dándose prioridad a este último.
• Las carpetas no deberían superar los 20 caracteres, mientras que los archivos, los 40 caracteres.
• 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.
• Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm.
• 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

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

Estos tipos de estructuras (topologías) se construyen en la práctica con las llamadas barras de navegación, una lista de enlaces habitualmente alineados en horizontal o vertical. Cuando el número de enlaces pueda ser muy grande se recurre a sistemas de menús desplegables donde se agrupan las opciones, como se hace en los menús de opciones de la mayoría de los programas.

El diseño de una correcta estructura de sitio es muy importante porque facilita la navegación y la ubicación de contenidos a los visitantes del sitio web, así como también permite la correcta indexación de las páginas del sitio por parte del motor de búsqueda de Google.

El otro aspecto importante a tomar en cuenta en un buen diseño es la funcionalidad, la que trataremos en un próximo artículo.