Flux rss
Bookmark Favorito / Compartir
Webmastering - Webdesign Webmastering - Webdesign Webmastering - Webdesign Webmastering - Webdesign Webmastering - Webdesign

Diseño de un sistema de navegación

La estructura de un sitio web debe ser el reflejo de una estrategia. Se deben elaborar contextos de navegación para hacer que los usuarios sigan un recorrido en el sitio web.

Sin embargo, los visitantes no deben sentirse atrapados y deben tener la libertad de irse o cambiar de sección en el momento que deseen.

Recorrido visual

Existen estudios que han demostrado que la vista del usuario de Internet promedio suele desplazarse por las páginas en "zigzag", comenzando en la esquina superior izquierda y moviéndose hacia la esquina inferior derecha.

Recorrido visual de páginas web

El área que corresponde a la mitad superior de la página es un sitio especialmente estratégico para colocar información.

Estructuración de un sitio web

La estructuración de un sitio web consiste en construir la arquitectura global del sitio mediante la organización de las distintas piezas de información.

El primer paso es hacer una lista del contenido del sitio web y agrupar el contenido por temas con el fin de formar secciones. Esto a veces se denomina creación de secciones.

Tan pronto como se definan las secciones principales (no deben usarse más de doce), se deben organizar y dividir en subsecciones. Casi siempre, la estructura de un sitio web se asemeja a la forma de un árbol, dónde la página de inicio es la raíz:

Creación de secciones

Elementos estándar

Algunos elementos se encuentran en casi todos los sitios web:

  • El logotipo del sitio web, ubicado en la esquina superior izquierda. Al hacer clic en este logotipo el visitante es dirigido directamente a la página de inicio del sitio web.
  • Un vínculo a la página de inicio, que siempre se encuentra en cada página del sitio.
  • En todas las páginas pueden hallarse elementos de navegación que permitan a los usuarios saber en qué parte del sitio web se encuentran y volver fácilmente a la sección principal.

Elementos de navegación

Son herramientas que ayudan al visitante a saber dónde se encuentra dentro del sitio web, a volver y a desplazarse entre las secciones. Existen varios métodos para configurar los elementos de navegación:

Rastro de migas de pan (breadcrumbs)

Un rastro de migas de pan es una herramienta de navegación constituida por una serie de vínculos jerárquicos. Un rastro de migas de pan representa la ruta de navegación y permite a los usuarios:

  • Saber en qué parte del sitio web se encuentran,
  • Regresar a las secciones principales fácilmente.

Un rastro de migas de pan se presenta en el siguiente orden:
Página de inicio > Webmastering > Navegación.

Un rastro de migas de pan incluye los siguientes elementos:

  • Vínculos separados por el carácter ">" que simboliza la idea de jerarquía.
  • El último vínculo aparece en negrita y no puede hacerse clic sobre él. Este vínculo representa la página en la que el visitante se encuentra.

El término "rastro de migas de pan" refiere al cuento de los hermanos Grimm, "Hansel y Gretel", que narra la historia de dos niños que se pierden en un bosque y que van dejando caer pedacitos de pan detrás de ellos para poder encontrar el camino de regreso.

La traducción del término francés equivalente sería "la cuerda de Ariadna", que refiere a la mitología griega. En el mito, Ariadna entrega a su amor, Teseo, un cordel antes de que se aventure en el laberinto para matar al Minotauro. Al desenrollar y luego volver a enrollar el cordel, Teseo logra salir del laberinto.

Navegación por pestañas

Las pestañas son herramientas de navegación muy útiles que ayudan a los visitantes a distinguir las secciones de un sitio web y a moverse de una sección a otra. También pueden usarse códigos de colores como una manera de reforzar las diferencias entre las secciones.

Navegación por pestañas

Mapa del sitio

El mapa del sitio proporciona a los usuarios de Internet una vista global del sitio web. Además, un cartel de "usted está aquí" puede ayudar a los usuarios a saber dónde se encuentran dentro del sitio web.

Flechas de navegación

Las flechas de navegación (siguiente, anterior, regresar al capítulo, regresar a la página de inicio) son herramientas de navegación intuitivas para el usuario.

Última actualización el jueves, 16 de octubre de 2008, 15:43:29 .Este documento intitulado « Webmastering - Diseño web » de Kioskea (es.kioskea.net) esta puesto a diposición bajo la licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la licencia, siempre que esta nota sea visible.

Webmastering - Lenguajes web Introducción a la Web El término "Web" se refiere al servicio de Internet que permite a los usuarios navegar a través de las páginas web. El protocolo que se usa para este tipo de comunicación es el protocolo HTTP ("HyperText Transfer Protocol",... es.kioskea.net/contents/web/weblang.php3
Webmastering - Introducción a la creación de páginas web Sitios web Un sitio web, también llamado sitio de Internet, consiste en un grupo de archivos HTML conectados a través de hipervínculos y almacenados en un servidor web, o sea, un equipo que aloja páginas web y que está conectado a Internet... es.kioskea.net/contents/web/webintro.php3
Webmastering - Diseño de un sitio web Diseño de un sitio web El diseño de un sitio web debe ser el producto de un esfuerzo colectivo orientado al usuario. Esto significa que, de ser posible, el proceso de diseño debe abarcar la participación de un grupo de representantes de las empresas... es.kioskea.net/contents/web/conception.php3
Crear un sitio webIndice 1 - Crear nuestro propio sitio web Solución 1a: Crear el código HTML "a mano" Solución 1b: Editores WYSIWYG Solución 1c: modelos preconcebidos en línea 2 - Poner el sitio web en línea 2a - Los servidores de alojamiento web 2b -... es.kioskea.net/faq/sujet-506-crear-un-sitio-web
[Webmaster] Mostrar el código php/xhtml de páginas webSi deseas que los internautas que visitan tu página web puedan ver el código fuente de tus archivos (PHP o HTML), existen varias soluciones. En php Mostrar el código php Mostrar el código html En html Informaciones Ver también En... es.kioskea.net/faq/sujet-1641-webmaster-mostrar-el-codigo-php-xhtml-de-paginas-web
Configurar la cámara Web del MessengerConfigurar la cámara Web del Messenger Abrir el asistente de configuración Configuración del audio Configuración del video En este artículo veremos como puedes configurar el audio y video de tu cámara Web en el Messenger para que... es.kioskea.net/faq/sujet-2628-configurar-la-camara-web-del-messenger
Mi camara web no funciona con messenger (Resuelto)Hola, hey como le puedo hacer para que mi camara web funcione con messenger funciona con el programa cyberlink pero no me funciona con messenger me saca del msn y me marca error Configuración: Windows Vista Internet Explorer 7.0 es.kioskea.net/forum/affich-39358-mi-camara-web-no-funciona-con-messenger
Ayuda para crear paso a paso mi pagina web (Resuelto)Hola, soi gonza se mucho sobre pc tengo mas alla de conosimientos de sofwares se hackear algunas cosas pero diamos qe soi un novato todabia ok bueno kisiera qe me alludarian a crear paso a paso mi pajina web como qe programas nesesito y todo eso... es.kioskea.net/forum/affich-48176-ayuda-para-crear-paso-a-paso-mi-pagina-web
Conectarse MSN por Web (Resuelto)Hola, Me gustaría conectarme al msn por web. Sé que existen navegadores como imo.im y meboo. lo que pasa es que mi ordenador no me deja conectarme a estos links Habrá más navegadores para conectarme al msn por web? muchas gracias Configuración:... es.kioskea.net/forum/affich-85711-conectarse-msn-por-web
Descargar Veoh Web PlayerVeoh Web Player es un programa que te permite reproducir videos extensos o películas enteras desde el sitio de Veoh o descargarlos para poder visualizarlos offline. Necesitas registrarte previamente, aunque existen limitaciones geográficas para su... es.kioskea.net/telecharger/telecharger-2973-veoh-web-player
Descargar Dr.Web CureIt! 5.0Dr.Web CureIt! es un antivirus gratuito que te sera muy util, para cuando tengas tu ordenador infectado de virus . Viene en forma de archivo ejecutable y lo mejor es que no necesita ningun tipo de instalacion . Funciona escaneando todo el disco... es.kioskea.net/telecharger/telecharger-2852-dr-web-cureit-5-0
Descargar Sothink Web Video Downloader for FirefoxSothink Web Video Downloader for Firefox es una extensión para Firefox para capturar, descargar y almacenar videos de YouTube, Google, MSN y la mayoría de sitios populares que ofrecen video. Esta herramienta te permite descargar videos con contenido... es.kioskea.net/telecharger/telecharger-3026-sothink-web-video-downloader-for-firefox
La página 'web' del Vaticano puede consultarse en latínEl papa Benedicto XVI celebra una misa de ordenación de 29 nuevos sacerdotes el pasado 27 de abril en la Basílica de San Pedro del Vaticano. La página 'web' oficial del Vaticano puede consultarse a partir del viernes en latín, lengua "muerta" que... es.kioskea.net/actualites/la-pagina-web-del-vaticano-puede-consultarse-en-latin-10367-actualite.php3
Web - El navegadorNavegador Web Un "navegador" es una herramienta que permite a los usuarios de Internet visitar sus sitios Web favoritos. Es un tipo de software con una interfaz gráfica que incluye botones de navegación, una barra de direcciones y una barra de estado... es.kioskea.net/contents/www/navigateur.php3
Alojamiento web¿Qué es un alojamiento web? Para que un sitio web esté disponible las veinticuatro horas de los siete días de la semana debe estar alojado en un servidor que esté permanentemente conectado a Internet. Es posible, técnicamente hablando, que pueda... es.kioskea.net/contents/web/hebergement.php3
Web - Introducción a la Web (WWW)Introducción a la Web La "Web", apócope de "World Wide Web" (que se abrevia con las siglas www), es uno de los métodos que Internet ofrece para explorar documentos conectados a través de hipervínculos. El concepto de la Web se perfeccionó en el CERN... es.kioskea.net/contents/www/www-intro.php3