Flux rss

Webmastering - Diseño web

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.

Dernière modification le 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.

Resultados de

Webmastering - Diseño web El término "diseño web" se refiere a la actividad que consiste en estructurar los elementos gráficos de un sitio web para expresar estéticamente la identidad visual de una compañía u organización. Se trata de una etapa de diseño virtual más que de... es.kioskea.net/web/webdesign.php3
Webmastering - Introducción a la creación de páginas 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 permanentemente.... es.kioskea.net/web/webintro.php3
Webmastering - Navegador 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 (en general... es.kioskea.net/www/navigateur.php3

Resultados de

[MSN] Utilizar MSN sin instalarlo – desde un sitio webEs posible utilizar un cliente MSN para discutir con sus amigos sin tener que instalarlo. Existen algunos clientes concebidos para ser utilizados desde un navegador como una página web. Evidentemente, sus funcionalidades son muy básicas (sin... es.kioskea.net/faq/sujet-139-msn-utilizar-msn-sin-instalarlo-desde-un-sitio-web
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
[PHP] Redireccionar a otra página webCualquier webmaster puede decidir un día que uno de sus archivos tiene un nombre que no le conviene o que el árbol de directorios de los archivos debe ser modificado. Sin embargo, si es relativamente fácil cambiar los enlaces al interior de un sitio... es.kioskea.net/faq/sujet-537-php-redireccionar-a-otra-pagina-web
1 2 3 Siguiente

Resultados de

Me pueden ayudarLista de forosAyudarlesEstadisticasBuscarAviso legalPlataforma de asistencia Windows Linux/Unix MacOS Hardware Software Ofimática Videojuego Programación Webmastering Redes Virus/seguridad Discusiones y opiniones de la comunidad Actualidades... es.kioskea.net/forum/affich-22765-me-pueden-ayudar
Driver para WebCAM (Resuelto)Hola, Formate mi pc y necesito el driver de mi Web Cam. Ayuda es.kioskea.net/forum/affich-1342-driver-para-webcam
Web cam e-messenger 112 (Resuelto)Hola, compre una web cam e-messenger 112 Genius, y cuando la instale con el CD-room que trae, y por mas que intenete la pc no la detecta y me dice que hay un problema( codigo 28). Busque el codigo 28 y me aparece como desconocido. es.kioskea.net/forum/affich-5522-web-cam-e-messenger-112
1 2 3 Siguiente

Resultados de

Descargar Driver HP 1.3 MegaPixel Webcam - HP Pavilion dv6000Ahora tienes el driver HP 1.3 MegaPixel Webcam HP Pavilion dv6000 Descárgalo, es GRATIS. Guarda tu driver en una carpeta (crea una carpeta con nombre igual al modelo), para tenerlo siempre ubicado, cuando lo necesites nuevamente. Si tiene la... es.kioskea.net/telecharger/telecharger-1307-driver-hp-1-3-megapixel-webcam-hp-pavilion-dv6000
Descargar Active WebCamEs una potente herramienta que te permite sacarle el máximo partido a tu webcam, de la forma más fácil y eficaz. Se trata de una utilidad con la que podrás transmitir imágenes en tiempo real a través de Internet, publicándolas en una web que se arma... es.kioskea.net/telecharger/telecharger-380-active-webcam
Descargar Driver Webcam Ávila SIC-350K Windows XpAhora tienes el driver para Webcam Ávila SIC-350K. Para Windows Xp. Descárgalo, es GRATIS. Guarda tu driver en una carpeta (crea una carpeta con nombre igual al modelo), para tenerlo siempre ubicado, cuando lo necesites nuevamente. Si tiene la... es.kioskea.net/telecharger/telecharger-1341-driver-webcam-avila-sic-350k-windows-xp
1 2 3 Siguiente

Resultados de

Lanzamiento de la web oficial de los Juegos Olímpicos en 5 idiomasUna mujer pasa junto a unas vallas de los Juegos Olímpicos colocadas en una calle de Pekín, este 15 de julio. La página web de los Juegos Olímpicos de Pekín, disponible en cinco idiomas (chino, inglés, español, francés y árabe) fue lanzada este... es.kioskea.net/actualites/lanzamiento-de-la-web-oficial-de-los-juegos-olimpicos-en-5-idiomas-10574-actualite.php3
1 2 3 Siguiente

Resultados de

Webmastering - Indización de sitios "Posicionamiento web" es un término que, a grandes rasgos, hace referencia a todas las técnicas que se emplean para mejorar la visibilidad de un sitio web: Técnica de referencia, que consiste en presentar el sitio web en herramientas de búsqueda... es.kioskea.net/web/referencement.php3
Webmastering - Lenguajes 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", Protocolo de transferencia... es.kioskea.net/web/weblang.php3
Webmastering - 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 (Centre Européen de... es.kioskea.net/www/www-intro.php3
1 2 3 Siguiente