Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Complementos

Manuales necesarios para el desarrollo web distintos de la programación.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



Diseño de páginas (V)

Estructura del sitio

Definición

Si estás siguiendo este mini-manual de diseño, habrás visto que hasta ahora hemos hablado del diseño de páginas. Sin embargo las páginas no están aisladas. Éstas forman parte de un sitio Web, el cual pretendemos que tenga a su vez un cierto estilo o diseño particular.

Un sitio web consiste en realidad en una serie de archivos, los cuales los subimos a un servidor para que puedan visualizarse en la red. Estos archivos son las páginas web y sus complementos, (hojas de estilo, imágenes, multimedia, etc.)

Al abrir cualquier sitio seb, vemos que las páginas del mismo no aparecen ni están de forma inconexa, sino que tienen relación unas con otras, no sólo mediante enlaces, sino también mediante simbolos, colores y estructuras que se repiten. Esto da un cierto estilo de sitio.

Veamos aquí cuales son las claves para crear un sitio con un estilo propio y coherente.

La navegabilidad

Entendemos por navegabilidad la facilidad para ir de una página a otra dentro del sitio, por muy distantes que estén entre sí. La clave para una buena navegabilidad está en los enlaces. Las barras de navegación y los menús de sección suelen ser claves para una buena navegabilidad.

Cuando creamos un sitio, al principio este es pequeño. Tal vez con unos pocos enlaces podemos recorrer todas las páginas. A medida que el sitio crece debemos estructurar el sitio por secciones. Cada sección puede tener varias páginas. O tal vez dentro de cada sección haya también subsecciones con varias páginas. Una buena navegabilidad exije que desde cualquier página podamos acceder rápidamente a cualquier otra del sitio.

Los sitios con un buen diseño suelen tener en todas sus páginas una barra de navegación desde la cual se puede acceder en cualquier momento a cualquiera de sus secciones. Además en cada página de la sección suele tener un menú específico de sección indicando las páginas que tiene en cada sección.

Colocar tanto la barra de navegación, como los menús de sección de forma destacada, hace que el usuario pueda en cualquier momento cambiar de página rápidamente para buscar lo que le interesa, lo cual es fundamental para una buena navegabilidad. Para que los menús no ocupen excesivo sitio en la página podemos ponerlos también como menús desplegables. Un menú desplegable hace que no tengamos que usar demasiado espacio en la página y le ahorra al usuario tener que dar algún paso intermedio para llegar de una pàgina a otra.

Hay una regla en el diseño web que indica si un sitio tiene buena navegabilidad, es la regla de los tres cliks. Ésta indica que en cualquier sitio, por grande que sea, para tener una buena navegabilidad, el usuario no debe hacer más de tres cliks en enlaces para cambiar de una página a otra.

Otra regla fundamental es que en todas las páginas debe haber un enlace de fácil localización hacia la página de inicio. Este suele ponerse en la barra de navegación o en el logo de la página. El enlace hacia la página de inicio hace que el usuario pueda volver siempre al principio de su búsqueda en el caso de que se pierda.

Por último indicar que los enlaces del tipo "página anterior" o "página siguiente", no deben ser la base para que el usuario cambie de página para llegar de un sitio a otro. Aunque está bien ponerlos en sitios donde las páginas pueden tener una cierta continuidad (tipo manuales, o listas en varias páginas). No tiene sentido en otros sitios donde el usuario lo que busca es una informacion concreta.

Identidad del sitio

Tal como hemos dicho, un sitio Web no es una serie de páginas distintas, sino que representa normalmente a un individuo, organización, empresa, etc. El usuario al navegar por las páginas de un mismo sitio debe saber en todo momento donde está. Esto se consigue mediante una serie de elementos que suelen repetirse en todas las páginas.

El logo o logotipo es la principal seña de identidad de un sitio. Este es un símbolo o dibujo que representa al sitio. Repetir el logo en todas las páginas en un lugar destacado, le indica al usuario el sitio donde se encuentra. Las grandes empresas o marcas de productos tienen todas su logotipo. Éste es una seña de identidad.

El logo debe figurar en todas las páginas en un lugar destacado. La gran mayoría de los sitios prefieren ponerlo en la esquina superior izquierda, ya que es lo primero en lo que se suele fijar el usuario al abrir la página.

la Repetición del estilo es otra seña de identidad del sitio. Es decir que hay una serie de elementos que se repiten en todas las páginas del sitio. Estos pueden ser de maquetación o ubicación de elementos en la página, los colores de fondo, los tipos de letra, titulos, imágenes, etc.

Estos pueden ser más o menos similares en todas las páginas dependiendo del sitio. De todas formas hay una serie de elementos que suelen repetirse en todas las páginas de un sitio. Entre ellos podemos citar la cabecera, el menú de navegación, algunos colores de fondo, la tipografía tanto de títulos como de párrafos, etc.

Este tipo de repeticiones crea una identidad para el sitio, y además le indica al usuario que sigue estando dentro del mismo sitio web.

La estructura de archivos

Desde el punto de vista del diseñador, un sitio web está formado por una carpeta en la que se guardan los archivos que lo componen. Tener bien organizada esta carpeta es fundamental para poder tanto añadir nuevos archivos (es decir nuevas páginas) como para poder localizarlos en en caso de tener que actualizarlos.

Desde el punto de vista del usuario esto puede ser irrelevante, ya que no se refleja en la página, pero desde el punto de vista del diseñador es fundamental, ya que puede ahorrar mucho tiempo y esfuerzo cuando haya que ampliar el sitio o simplemente revisarlo.

Unas sencillas normas para la creación y distribución de archivos en carpetas pueden ahorrarnos bastante tiempo y esfuerzo. Éstas no son aplicables sólo al diseño web, sino a cualquier tipo de diseño informático.

• En primer lugar seguir las normas dadas en el manual de HTML, página 1_3. Normas de escritura. Aquí se indican las normas básicas para escribir los nombres de archivos y carpetas de manera que puedan ser usados en un sitio web.

• Poner a los archivos y carpetas nombres representativos de lo que contienen. Por ejemplo si llamamos a una carpeta "seccion1", esto no nos indica lo que tiene dentro, es preferibe llamarla, por ejemplo, "fauna_del_pirineo", suponiendo que éste es el contenido de las páginas de la carpeta.
• Organizar las carpetas y los archivos por secciones. De esta manera podremos localizar un archivo o carpeta que queramos modificar o ampliar de una manera rápida, teniendo en todo momento una vision de la estructura del sitio.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com