Manual mapas de_navegacion

Unidad didáctica: Mapas de Navegación P.E. Diseño y Programación Web
Recopilado por: Mg. Roberto Macetas Rodríguez 1
Instituto de Educación Superior Tecnológica Público
SANTIAGO ANTUNEZ DE MAYOLO

MACETAS RODRÍGUEZ, ROBERTO JOHNNY
HUANCAYO - PERÚ
2019

MAPAS DE NAVEGACIÓN
AUTOR:
MACETAS RODRÍGUEZ, ROBERTO
© Reservado todos los derechos
EDITOR:
MACETAS RODRÍGUEZ, ROBERTO
Email: rmacetas@hotmail.com
Publicación.
Primera Edición, abril 2019

Resumen: Análisis de sistemas de navegación de sitios Web.
Muchos de los sitios Web que encontramos en Internet presentan
una serie de enlaces hacia sus diferentes secciones a lo largo de
todas sus páginas, como una manera de mostrar al usuario los
contenidos del sitio.
Estos menús de navegación pueden presentarse en diferentes
formatos y organización, ya sean simples listas de opciones,
sistemas gráficos, sistemas de pestañas, menús desplegables, etc.
En primer lugar, este trabajo define los sistemas y menús de
navegación más utilizados que se pueden encontrar en las sedes
Web.
En segundo lugar, analiza los diferentes tipos de sitios Web en
función de la estructura, tipo de contenido, volumen de
información y perfil de usuario y presenta los menús de
navegación más comunes que podemos encontrar.
Por último, se analizan con más detalle los diferentes sistemas de
navegación, descritos bajo los aspectos de usabilidad y
accesibilidad tanto desde el punto de vista del diseño como desde
el punto de vista tecnológico.

Guía de práctica N° 01
Fundamentos de Mapas de
navegación
Semana 1
¿QUE ES MAPA DE NAVEGACION?
Los mapas de navegación proporcionan una representación esquemática de
la estructura del hipertexto, indicando los principales conceptos incluidos en el
espacio de la información y las interrelaciones que existen entre ellos. Un
mapa es, por ejemplo, una representación completa (o resumida) del sitio
web para orientar al lector/usuario durante el recorrido o para facilitarle un acceso
directo al lugar que le interese. Reflejará la estructura del web por
medio de enlaces a los nodos principales, y éstos también pueden
desarrollarse para mostrar los subnodos. El mapa de navegación puede
representarse bien en forma textual, bien en forma gráfica, o una combinación
de ambas.

De manera similar a los sumarios, índices y tablas de contenido que sirven
para "navegar" por los documentos en papel, estas herramientas también
son útiles para navegar por un hipertexto. En la Web, estos mecanismos
tradicionales pueden tomar la forma de menús.
Para ofrecer una visión global, es muy útil mostrar un mapa de todo el
contenido, poder verlo en una sola pantalla y que esté accesible desde
cualquier nodo del hiperdocumento. Sin embargo, mostrar todo el contenido
reflejado en un mapa o esquema global en una sola pantalla cuando el espacio
web o un hipertexto son demasiado grandes, es casi imposible de llevar a
la práctica y tampoco tiene ninguna utilidad confeccionar una farragosa sopa
de letras o imágenes. Una solución es emplear diagramas globales con los
nodos más importantes y luego desarrollar cada subnodo en diagramas locales
con información más detallada. También puede ofrecerse el empleo de las
llamadas fish-eye views o mapas ojo de pez que muestran todo el espacio
hipertextual en un único gráfico en distintos niveles de detalle, ofreciendo más
información sobre la posición actual en la que se encuentra el usuario y
disminuyendo los detalles de forma gradual según estén más alejadas las partes.
Sin embargo, este tipo de mapas son muy difíciles de confeccionar con la
tecnología web, puesto que cada nodo necesitaría un tratamiento específico.
Para confeccionar mapas que reflejan el contexto del nodo activo existen
programas específicos que también son capaces de mostrar en forma gráfica
toda la estructura de un hipertexto. Estas funcionalidades las tienen algunos
programas de creación de páginas web, tales como FrontPage de Microsoft.
Sin embargo, no se trata de verdaderas herramientas de navegación, ya que
estas funcionalidades son posibles únicamente dentro del programa de
construcción de las páginas web residentes en el disco duro, y no cuando el
hipertexto se publica en la web. Ejemplos de mapas de este tipo, creados con
el programa Knowledge Manager, se puede encontrar en:
http://www.knowledgemanager.it/ Se trata de un programa que permite
crear mapas conceptuales que puedan representar los recorridos cognitivos de
un hipertexto: la estructura reticular, los grados, extensión y profundidad
de los conceptos y sus relaciones.
¿CARACTERISTICAS DE LOS MAPAS DE
NAVEGACION?
Entre las características de los mismos se encontraban funciones que
pretendían evitar el desbordamiento cognitivo de los usuarios, y orientar sus
procesos de Exploración recuperación de la información deseada
 Mapas Hipertextuales: Estas herramientas dibujan una
representación gráfica de los documentos y de los enlaces existentes
entre los mismos.
 Mapas de Navegación en Acción: Desarrolla en profundidad las
categorías existentes en el menú de navegación.

 Software para crear mapas: Se utiliza código JavaScript para generar
un menú activo que utiliza los iconos de carpetas y documentos
estándares.
¿PARA QUE SE UTILIZAN LOS MAPAS
DE NAVEGACION?
Nos sirve para organizar la información en una página Web
¿Para qué Sirven?
El principal valor de un mapa de navegación es que permite anticipar
errores de organización de la información, de modo de corregirlos cuando
aún no se ha invertido tiempo y dinero en la construcción del producto.
La falla más frecuente que se busca soslayar a través de la
nacionalización de un mapa es el desequilibrio entre amplitud y profundidad
de la información. Amplitud se refiere a la cantidad de secciones o páginas
de igual jerarquía a las que se puede acceder desde el inicio o desde
secciones concentradoras de contenidos y se expresa horizontalmente en un
mapa. La profundidad se gráfica de manera vertical e indica el número de
opciones de jerarquía decreciente que hay dentro de una misma sección.
¿En Qué Proyectos se Aplican los Mapas de
Navegación?
Casi cualquier proyecto en formato web requiere graficar la información en
un mapa de navegación, pero resulta especialmente necesario en sitios web
que poseen un volumen importante de contenidos. Cuando los proyectos
están enfocados a funcionalidades (esto es más típico de las Intranets y
Extranets) el mapa de navegación es complementado o directamente
reemplazado por el diseño de interacción.
¿Qué es un Diseño de Interacción?
En todo proyecto de Internet (o Intranet/Extranet) con operaciones que
involucren la participación de diversos usuarios y variables del propio
proceso, debiera planificarse su ejecución partiendo con un diseño de
interacción que bosqueje el panorama general.
El sólo hecho de que un usuario ingrese su nombre y contraseña en un
producto de acceso privado, involucra un llamado a una base de datos y una

validación. Puede que existan distintos perfiles de usuarios que ingresen al
sistema a través de la misma puerta de entrada, como un administrador y
editor de contenidos.
Errores Más Comunes a la Hora de Hacer un Mapa
de Navegación
 Error N° 1: Una estructura de navegación demasiado amplia y poco
profunda expresada en este mapa. Se ofrecen ocho opciones
principales, de las cuales sólo dos (la primera y la tercera) dan la
posibilidad de seguir navegando.
 Error N° 2: una estructura de navegación demasiado profunda y poco
amplia expresada en este mapa. El usuario enfrenta sólo tres opciones
de inicio y en cada una de ellas debe hacer demasiados clics para
acceder a contenidos de su interés.
Se Debe Tener en Cuenta: La Busca del Equilibrio
El mapa expresa la estructura básica del propio web de arquitectura de
información. Para intentar facilitar la navegación al usuario, se ofrecen pocas
opciones en el menú principal; y luego, dentro de cada una de ellas, basta un
clic para acceder a contenidos específicos.
TIPOS DE MAPAS DE NAVEGACION
Existen seis tipos o clases de mapas de navegación primarias utilizadas
en los entornos virtuales:
• Navegación lineal
• Navegación lineal en estrella
• Navegación jerárquica
• Navegación no lineal
• Navegación compuesta
• Navegación múltiple
NAVEGACIÓN LINEAL:
La navegación lineal permite un flujo de la información mas estable, es muy
útil cuando se quiere lllevar un proceso paso a paso, con una multimedia de
estructura lineal permite que el usuario reciba la información en un orden
adecuado, únicamente con la opción de ir adelante y atrás.

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si
estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la
siguiente página o a la anterior.
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado,
además impedimos su distracción con enlaces a otras páginas.
Por otra parte podemos causar al usuario la sensación de estar encerrado si el camino es
muy largo o poco interesante. Este tipo de estructura sería válido para temas no muy largos
en contenido.
NAVEGACIÓN LINEAL EN ESTRELLA
La navegación en estrella se basa es igual que el sistema explicado
anteriormente, a diferencia que este va y vuelve hacia el inicio.

NAVEGACIÓN JERÁRQUICA
Navegación jerarquica o de arbol. Esta estructura comienza con una
página principal o raíz , se presentan varias opciones que permite
ir visualizando páginas más especificas . el contenido se desarrolla
en forma ramificada pudiendose visitar cada una de las secciones por
separado.
NAVEGACIÓN NO LINEAL
Es adecuada cuando se tiene que conservar el camino general, pero
hay que dar cabida a ligeras variaciones, tales como saltarse
determinadas páginas. Permite algunos desvíos controlados, la
estructura obliga a regresar al camino principal, al tener un desvió
lateral es una pequeña información adicional.

NAVEGACIÓN COMPUESTA
La navegación multiple es la que combina diferentes sistemas de navegación
NAVEGACIÓN MÚLTIPLE
La estructura de un sitio en el que cada una de sus páginas está vinculada
a todas las demás se denomina navegación multiple. Con este sistema

el número de vínculos o enlaces es igual al número de páginas por el
número de páginas menos una.
ACTIVIDAD INDIVIDUAL Nº 01
Elaborar el mapa conceptual de lo estudiado en la Guía Nº 01 Semana 01
Fundamentos de Mapas de navegación.

Semana 2
HERRAMIENTAS PARA ELABORAR LOS MAPAS
DE NAVEGACIÓN
MAPA DE NAVEGACIÓN EN MICROSOFT WORD
MAQUETA DEL SITIO EN WORD O ADOBE ILUSTRATOR:

MAPA DE NAVEGACIÓN EN GOCONQR
Link de acceso: https://www.goconqr.com/es-ES/mind_maps/

MAPA DE NAVEGACIÓN EN STARUML ó RATIONAL ROSE
(DIAGRAMA DE ESTADOS)

MAPA DE NAVEGACIÓN EN POWER POINT

Semana 3 y 4
2. Tipos de navegación. Definición.
Uno de los principios básicos de la Web estriba en el hecho de que los usuarios
pueden moverse libremente por las diferentes secciones que componen un sitio
Web o entre los “infinitos” volúmenes de información diseminados por millones
de páginas Web distribuidas en servidores de todo el mundo.
Esta intrínseca característica de Internet provoca que en numerables ocasiones el
usuario se sienta perdido en el ciberespacio y sienta incapacidad de encontrar el
camino hacia la información que realmente le interesa.
Tal y como comenta Jakob Nielsen en el libro “Usabilidad. Diseño de sitios
Web”1
esta sensación de pérdida se produce cuando el usuario:
• No sabe dónde está: El usuario desconoce su situación actual en
relación a la estructura global de la información del sitio Web y no
percibe la relación que hay entre la página actual y el resto de páginas.
• No sabe dónde ha estado: El usuario desconoce la ruta de navegación
que ha seguido hasta la posición actual y por consiguiente no es capaz de
identificar las páginas ya visitadas.
• No sabe a dónde puede ir: El usuario no puede identificar los enlaces
que contienen información relacionada con la página actual.
Este problema de orientación se ha intentado resolver mediante la búsqueda de
sistemas que permitan al usuario ubicarse y desplazarse a través de las
estructuras de información de una manera fácil y eficaz.
Los sistemas de navegación, compuestos por los diferentes enlaces a las
diferentes secciones de un sitio Web, permiten ubicarnos y desplazarnos a través
de las estructuras de la información, facilitando a los usuarios saber en cada
momento dónde están, dónde pueden ir y cómo está organizada la información.
Existen diversas formas de organizar estos enlaces dentro de una página Web y
según los autores Louis Rosenfeld y Peter Morville en el libro "Arquitectura de
la información para la World Wide Web"2
podemos diferenciar entre cuatro
tipos diferentes de sistemas de navegación: Sistemas de navegación jerárquicos,
Sistemas de navegación globales, Sistemas de navegación locales y Sistemas de
navegación ad hoc.
1
Libro: Nielse, J. Usabilidad. Diseño de sitios Web. Madrid, Ed. Pearson Educación S.A.,
2000.
2
Libro: Morville, P. Rosenfeld, L. Arquitectura de la información para la World Wide
Web. Madrid, Ed. McGraw-Hill, 1998.

A estos cuatro tipos de sistemas de navegación podemos añadir dos más que
denominaríamos Sistemas de navegación directos o buscadores y Sistemas de
navegación lineales.
2.1 Sistemas de navegación jerárquicos
Los sistemas de navegación jerárquicos son aquellos que nos permiten
conocer tanto las subsecciones que están subordinadas a la sección en la
que nos encontramos como la sección a la que pertenece la subsección
actual.
Los sistemas de navegación jerárquicos se han consolidado como uno de
los sistemas más utilizados, ya que a través de la organización jerárquica
de los contenidos de los sitios Web se organiza la navegación en los
mismos. Podemos observar un claro ejemplo de estructura y navegación
jerárquica en la página Web del "DOGC - Diari Oficial de la Generalitat
de Catalunya" (http://www.gencat.net/diari), donde los contenidos se
organizan en un árbol jerárquico de diferentes niveles tal y como se
muestra en la siguiente figura:
Ilustración 1: Estructura de la información en DOGC

Esta estructura jerárquica se plasma después de manera directa en la
navegación del sitio Web. Por ejemplo, en las siguientes ilustraciones se
ve el camino para acceder al DOGC 4041 correspondiente al mes de
enero de 2004:
Ilustración 2: Home DOGC (1er
Nivel). Ilustración 3: Indice DOGC's
2002, 2003 y 2004 (2º nivel).
Ilustración 4: Listado DOGC's enero
2004 (3er
nivel).
Ilustración 5: DOGC 4041 (4º nivel).
Rápidamente podemos deducir que estos sistemas serán de gran utilidad
cuando se dispone de grandes volúmenes de información agrupados por
temas o unidades conceptuales. Además, una de las principales ventajas
estriba en el hecho de que permite a los diseñadores y arquitectos de la
información guiar fácilmente la navegación de los usuarios hacia el
objetivo deseado. En contrapartida no se permite la libre navegación de
los usuarios a través de sitio Web.
Debido a la rigidez de navegación que presenta este sistema, se suele
utilizar combinado con otros sistemas de navegación que lo dotan de
mayor flexibilidad y permite a los usuarios escapar de la rigidez que
imprimen las estructuras de la información jerarquizadas.

2.2 Sistemas de navegación globales
Los sistemas de navegación globales suelen servir de complemento a los
sistemas de navegación jerárquicos ya que permiten a los usuarios
moverse libremente por las estructuras de la información mediante saltos
verticales y laterales.
Estos sistemas permiten que el visitante acceda directamente a la
información que desea consultar sin la necesidad de retroceder por las
páginas visitadas para alcanzar otra rama del árbol de contenidos.
Este sistema de navegación no implica que desde una determinada
posición podamos desplazarnos hacia cualquier otro punto de la
estructura de contenidos, ya que esto podría provocar una sensación de
pérdida en el usuario. Por consiguiente, se hace indispensable que los
diseñadores y arquitectos de la información diseñen cuidadosamente
cuales serán los caminos a través de los cuales los usuarios podrán
desplazarse vertical y lateralmente dentro de la estructura de la
información del sitio Web.
Un sistema global de navegación podría estar formado por un menú
situado en los diferentes niveles de un sistema jerárquico y que
permitiera a los usuarios interrumpir la navegación jerárquica para
acceder a otra información en otra parte de la estructura.
Un claro ejemplo de este tipo de sistemas de navegación lo podemos
encontrar en Terra (http://www.terra.es/). En la home de este portal,
podemos acceder a cualquiera de los ejes temáticos (o canales) que
proponen los autores de este sitio mediante un menú de navegación
jerárquico ubicado en la parte izquierda del navegador.
Ilustración 6: Terra con sistema de
navegación jerárquico: Acceso a Internet,
Canales y Servicios.
Ilustración 7: Área temática de cine.

Una vez dentro de un canal temático podemos acceder a todos los
contenidos relacionados con esta área mediante el menú de navegación
izquierdo, pero también disponemos en la parte superior de la pantalla de
una sistema de navegación global denominado Canales y Servicios que
nos permite abandonar esta sección y acceder a cualquier otro canal
temático:
Ilustración 8: Menú de navegación global; Canales y Servicios.
2.3 Sistemas de navegación locales
Si los sistemas de navegación globales complementaban a los sistemas
jerárquicos, los sistemas de navegación locales complementan a los
sistemas de navegación globales.
Así pues, en los sitios Web complejos donde existe diversidad en los
contenidos o incluso cada subsección posee un estilo propio, los sistemas
de navegación globales se ven complementados con uno o más sistemas
de navegación adaptados a las características y necesidades propias del
sub-sitio en cuestión.
Sin embargo, el sistema de navegación local no sustituye al sistema de
navegación global, simplemente lo complementa.
Un ejemplo claro de sistemas de navegación local lo encontramos en los
diferentes menús de navegación de los canales del portal de Terra.

Ya se ha comentado la característica de la navegación global de este
portal. Ahora centramos la atención en los sistemas de navegación
locales de los diferentes canales que aparecen como listas de opciones
ubicadas en la parte izquierda del navegador. Por ejemplo, en las
siguientes ilustraciones se muestran los sistemas de navegación local de
los canales de Cine y Actualidad respectivamente.
Ilustración 9: Sistemas de navegación local de Terra
Estos menús ubicados en la misma posición de la pantalla siempre
complementan al sistema de navegación global situado en la parte
superior del navegador y en ningún caso lo sustituyen.
2.4 Sistemas de navegación ad hoc
Los sistemas de navegación no siempre encajan en los sistemas descritos
anteriormente. Por ejemplo, un sistema muy utilizado en los documentos
electrónicos consiste en relacionar palabras, expresiones o frases con
contenidos que amplían la información proporcionada por el autor. De
esta manera estas palabras, expresiones o frases se convierten en vínculos
incrustados en el propio texto.
Ilustración 10:Texto con enlaces incrustado; Navegación ad hoc.

La principal ventaja de este tipo de navegación estriba en el hecho de que
permite enriquecer los contenidos con información complementaria y
permite la navegación entre contenidos relacionados entre sí.
En contrapartida, este sistema ha de ser utilizado por los diseñadores de
manera muy cuidadosa ya que si se utiliza indiscriminadamente suele
producir sobre el usuario una sensación de pérdida y desorientación al no
entender cuál es la estructura del documento ni cuál es el orden de la
información.
2.5 Sistemas de navegación directos
Infinidad de sitios presentan a los usuarios un quinto modelo de
navegación que permite acceder directamente a una información
específica lo más rápidamente posible.
Los sistemas de navegación directos o buscadores son alternativas o
complementos de los sistemas de navegación citados anteriormente y
facilitan a los usuarios la posibilidad de buscar directamente una
determinada información, sin necesidad de navegar por las distintas
secciones que componen el sitio Web.
Sin entrar en detalles del funcionamiento de este tipo de navegación hay
que mencionar el hecho de que estos sistemas normalmente se dirigen
hacia usuarios más expertos ya que el proceso de búsqueda requiere, en
la mayoría de casos, un aprendizaje de la herramienta de búsqueda.
Ilustración 11: Sitio Web de IBM con
sistema de navegación directo.
Ilustración 12: Resultado de una
búsqueda en www.ibm.com/es.
Existen algunas tendencias que afirman que este tipo de navegación
directa se convertirá en el sistema de navegación del futuro y que no
tardará mucho en poder verse buscadores internos como sistemas de
navegación principal de las páginas Web.

Estas tendencias se basan en la argumentación de que nadie dejaría su
negocio sin una persona que atendiera al público y por consiguiente no se
deberían dejar las páginas Web sin una interface que pudiera resolver las
preguntas de los usuarios.
Afirman que los buscadores internos son lo más cercano a estas personas
físicas que atienden a los clientes. Así pues, el usuario no busca en
nuestra Web mediante el buscador, sino que hace preguntas y el buscador
no da resultados, sino que responde.
Para que esto llegue a ser una realidad se deberán mejorar los sistemas de
búsqueda actuales. Los sistemas de búsqueda tradicionales están muy
limitados por los lenguajes de consulta, que en ocasiones provocan unos
resultados que no son la información esperada por el usuario.
Estos estudios intentan desarrollar un buscador capaz de admitir frases y
preguntas en lenguaje coloquial, por ejemplo: ¿Dónde puedo encontrar
información sobre el cambio climático?. El buscador convertirá la
consulta del usuario en lenguaje natural a una consulta booleana. Una vez
identificado el tema de la consulta, se obtendrá una lista de enlaces
relacionados.
Algunos ejemplos de este tipo de buscadores se pueden encontrar en Ask
Jeeves (www.ask.com) o una versión de demostración en
tornado.dia.fi.upm.es/mesia/mesia_demo.html.
2.6 Sistemas de navegación lineales
Los Sistemas de navegación lineales son aquellos que nos permiten
recorrer el contenido de las páginas de una manera secuencial y
preestablecida por el diseñador. Las únicas opciones de navegación que
se le permiten al usuario son avanzar, retroceder o regresar al índice.
Este tipo de navegación se utiliza en contadas ocasiones pero suele ser de
gran ayuda cuando se quiere presentar la información en una secuencia
preestablecida, como por ejemplo en el uso de un manual o algún tipo de
material docente donde se pretende que la información pueda ser recorrida
de una sola manera.
La navegación lineal provoca una necesaria transición por todas y cada
una de las páginas lo que puede también inducir al abandono o desinterés
por parte del usuario.
Ilustración 13: Ejemplo de navegación secuencial

Unidad didáctica: Mapas de navegación Programa de estudios: Diseño y Programación Web
PRÁCTICA DE LABORATORIO
SEMANA 04
PASOS PARA REGISTRARSE EN WORDPRESS.COM
Ingresar a la página web de wordpress en español

Tutorial: crear menús en WordPress
Ahora sí, vamos con la parte más “técnica”
Lo primero de todo es que, desde el escritorio WordPress vayas a Apariencia -> Menús
[1].
Lo que te saldrá a continuación es el lugar desde el que vamos a gestionar la creación y
modificación de los menús de navegación del blog.

En la columna de la izquierda [2] salen todos los elementos que puedes añadir a un menú, y
que son los que te había comentado antes: páginas, entradas, enlaces personalizados
(hacia donde tú quieras) y etiquetas.
Ahora mismo sale todo en gris atenuado porque aún no se pueden usar. Hasta que no crees
un menú no podrás acceder a esas opciones.
Y para crear el menú, solo tienes que poner el nombre del menú en la casilla donde te lo
pide [3].
Lo mejor es que aquí le pongas como nombre el de su ubicación. Es decir, si el menú que
vas a crear va a ser el principal, ponle de nombre menú principal o algo similar, sino luego
los confundirás.
Y es que puedes crear tantos menús como quieras, aunque luego solo puedes usar los que
el tema te permita (alguno más si utilizas un widgets de menús).
Y una vez que hayas elegido el nombre del menú, haz clic en el botón azul donde pone
“Crear menú” [4].

Como puedes ver, ahora la columna de la izquierda que no podrías usar antes [2] sí que la
puedes usar.
Básicamente, lo que hay que hacer es ir seleccionando, dentro de todas las opciones que te
da, las páginas (o entradas o lo que sea) que quieres añadir al menú y hacer clic en el
botón “Añadir al menú” [5].
Automáticamente, los elementos seleccionados de pasarán a la zona de la derecha, donde
pone “Estructura del menú” [6], y cada uno de ellos será un botón de tu nuevo menú.

Lo veremos todo más adelante, no te preocupes
Pero vayamos por partes. Vamos a ver primero cómo se agregan botones al menú (si ya
te imaginas lo que hay que hacer, puedes saltarte todo lo que viene a continuación rodeado
con el marco azul).
Cómo agregar páginas, entradas y categorías al menú
Para agregar páginas, entradas o categorías al menú solo tienes que hacer clic en la
sección correspondiente en la columna de la izquierda [2], y te saldrá un desplegable
similar a los de la imagen.

Es muy fácil.
Solo tienes que seleccionar las páginas, entradas o categorías que quieras añadir al
menú [8] y hacer clic en el botón “Añadir al menú” [5].
Para facilitarte la vida, también puedes usar de las pestañas de arriba [7] que te ayudarán a
encontrar lo que andes buscando (muy útil si tienes muchas entradas o páginas y no quieres
perder tiempo buscando en la lista que te sale).
Una vez le des al botón de “Añadir al menú” verás como a la derecha, en la “Estructura del
menú” [6], se añaden los nuevos botones.
Cómo agregar enlaces personalizados al menú
Ésta opción la separo porque es un poco diferente a las anteriores, pero ya verás que
tampoco tiene ningún misterio.
En donde pone URL [9] tienes que poner la url a donde quieres que el botón lleve al hacer
clic en él.
En “texto de enlace” [10] tienes que poner lo que quieres que ponga en el botón del
menú.
Y cuando ya lo tengas, le das al botón “Añadir al menú” [5] y se añadirá a la
“Estructura del menú” [6] para que podemos seguir trabajando con él.
Si quieres guardar el menú tal y como está ahora haz clic en el botón azul donde pone
«Guardar menú», pero te aconsejo que sigas leyendo porque aún queda por hacer alguna
cosilla más.

Cómo modificar un menú en WordPress
Vale, ahora que ya hemos añadido los botones al menú, toca hacer algunas modificaciones
para que se vea como queremos, ya que si te fijas hasta ahora solo hemos añadido los
botones, pero también supongo que también querrás elegir en qué orden los quieres poner.
O incluso si quieres crear un submenú desplegable.
Ahora vamos a trabajar solo con la parte derecha de la pantalla, lo que corresponde a
la estructura del menú.
Si te fijas, todas las páginas que he agregado al menú para este tutorial salen como si ya
fuesen botones.
El orden en que aparecen de arriba abajo es el orden en cómo se van a ver los botones
en tu blog, solo que de izquierda a derecha (porque aquí vemos los botones como una
columna, pero lo más normal es que en el blog se vean como una fila).
Así que si quieres cambiar el orden de los botones, lo que tienes que hacer es cambiar el
orden de los mismos desde estructura del menú, donde estamos ahora.
Para ello tienes que hacer clic sobre el botón que quieres mover y arrastrarlo hasta
ponerlo en el nuevo lugar en que quieres que se vea.

Una vez que tengas todos los botones ordenados, toca elegir dónde se va a mostrar el
menú. Para ello, en “Opciones del menú”, donde pone “Ubicación del tema”, elige la
posición marcando la casilla correspondiente [11].

Para este ejemplo yo he seleccionado la ubicación principal, pero ten en cuenta que ésto
depende al 100% del tema que estés utilizando, ya que habrá temas que te den más
opciones que otras.
Además, la “posición principal” puede variar de un tema a otro. Por eso es importante que
a la hora de elegir un tema te fijes en la ubicación de los menús.
Una vez que hayas ordenado los botones y hayas elegido la ubicación, haz clic en el botón
azul done pone “Guardar menú” [12] (si te olvidas de hacer clic aquí y te vas de la
página perderás todos los cambios que hayas hecho, así que ten cuidado jejeje).
Si marcas la opción de añadir páginas automáticamente, cada vez que publiques una página
Una vez que guardes el menú, vamos a ver cómo queda en el blog.

Cómo crear un menú desplegable
Ahora vamos a ver cómo hacer un menú desplegable en WordPress, para que cuando
pases el cursor sobre alguno de los botones se despliegue un submenú con más opciones.
Para ello, tenemos que volver a la estructura del menú.
Lo que hay que hacer es coger el botón que queremos que aparezca en el desplegable, y
ponerlo debajo del botón principal (el que generará el desplegable al pasar el cursor por
encima), pero un poquito a la derecha.
Si te fijas, mientras haces clic en el botón y lo arrastras para cambiarlo de posición, te van
saliendo unos contornos dibujados con una línea discontinua que indican dónde va a
quedar el botón cuando lo sueltes.

Y si te fijas, si en vez de poner el botón justo debajo del anterior, y alineado con él, lo
mueves un poquito hacia la derecha, verás que queda como más desplazado [13].
Eso indica que cuando sueltes ese botón va a ser un subelemento del botón principal, que
será el que tiene justo encima y que está alineado a la izquierda del todo. Y ésto lo puedes
hacer tantas veces como quieras.
Fíjate en la siguiente imagen:
En este ejemplo, los servicios que «ofrezco» en el blog son 2: “Asesoría WordPress” y
“Servicio Crear Blog”. Entonces, quiero que al pasar el cursor sobre el botón servicios del
menú se despliegue un submenú con esos dos servicios.
Para ello, los botones tendrán que quedar ordenados como en la imagen anterior, donde los
2 servicios [14] están un poco más desplazados a la derecha, y están justo debajo del botón
principal, que es el de “Servicios”.
Y así es cómo se verá en el blog al pasar el cursor por encima [15] (acuérdate siempre
de darle al botón azul de “Guardar Menú” para que los cambios se hagan efectivos):

Todo ésto se ve bastante mejor en el vídeo que te he dejado al empezar el post, la verdad,
así que si aún no lo has visto te animo a que le eches un vistazo. Pero bueno, aún así creo
que me ha quedado bastante bien explicado
Si me permites un consejo, aunque el botón servicios se convierta en un desplegable al
pasar el cursor por encima, haz que también sea una página, ya que muchos harán clic
Cómo editar y eliminar botones del menú
Para editar o eliminar un botón, desde la pantalla de “Estructura del menú” en la que
estamos trabajando tienes que hacer clic en la flechita pequeña que sale a la derecha de
cada botón [16], y se abrirá un desplegable con más opciones.
Si el botón es un enlace personalizado tienes la opción de cambiar la url poniendo otra
nueva [17].
Luego, y ésto ya es común para todos los botones, en “Etiqueta de navegación” [18]
puedes elegir el texto que quieres que contenga cada botón.
Ya ves que los botones en WordPress son bastante personalizables.
Una vez hechos todos los cambios no te olvides de darle al botón azul de “Guardar
menú”.
Y si lo que quieres es eliminar un botón del menú haz clic donde pone “Eliminar” [19].
Cómo crear y gestionar múltiples menús de navegación

Cuando ya tienes creado un menú, para crear otro (por ejemplo un menú secundario) tienes
que ir a donde pone “Edita tu menú abajo o crea uno nuevo” y hacer clic donde pone
“Crea uno nuevo” [20].
Y automáticamente volveremos al principio, donde te pedirá que le pongas nombre al
nuevo menú [21].
Luego haz clic en el botón azul de crear menú [22] y ya, al igual que antes, desde la
columna de la izquierda solo tendrás que añadir los botones que quieres que tenga, elegir
su orden (y si quieres añadir menús desplegables), elegir su posición en donde pone
“ubicación del tema”. Finalmente, dale al botón azul de guardar menú.
Vamos, todo lo que hemos visto a lo largo de este tutorial.

Una vez que tienes varios menús creados, para modificar uno u otro tienes que ir a donde
pone “Elige el menú que quieras editar” [23], elegirlo en el desplegable, y luego hacer
clic en el botón “Elegir” [24].
Y si quieres eliminar un menú entero que has creado pero que no quieres usar, solo tienes
que seleccionar el menú tal y como te acabo de explicar, y abajo del todo verás un botón
que pone “Borrar menú” [25].
Te saldrá un mensaje de confirmación, haces clic en “Aceptar” y listo
Gestionar los lugares del menú
Por último, cuando tienes varios menús, si te vas a la pestaña “Gestionar lugares” [26]
desde ahí podrás elegir la ubicación de cada menú haciendo clic en el desplegable que tiene
a su lado [27], seleccionando la ubicación y haciendo clic en “Guardar cambios” [28].

Pero bueno, no me voy a entretener más en ésto porque la ubicación de los menús también
se puede elegir desde la “Ubicación del tema” [29] en la pantalla de editar menús [30],
tal y como hemos visto antes y a lo largo de todo este tutorial.

Semana 5 y 6
3. Menús de navegación.
Los distintos tipos de navegación que se han descrito en el apartado anterior
(exceptuando la navegación ad hoc) pueden representarse de diferentes formas,
pero lo más habitual es encontrar bloques compactos de enlaces ubicados en la
misma posición, permitiendo a los usuarios usarlos reiteradamente para poder
desplazarse por las distintas páginas de un sitio Web.
Así pues, podemos definir estos vínculos, que están presentes en todas las
páginas de una Web de manera fija y que dan acceso a otras áreas de
información del mismo sitio, como menús de navegación.
Estos menús de navegación constituyen una pieza fundamental para el éxito de
un sitio Web ya que de ellos depende que el usuario pueda desplazarse
adecuadamente por las distintas páginas y sea capaz de encontrar la información
que le interesa, que en definitiva es una de las principales causas por las que los
usuarios deciden visitar un sitio Web.
3.1 Tipos de menús. Definición y características.
Casi todos los menús de navegación se pueden catalogar en dos tipos
diferentes: Barras de navegación y Menús desplegables. Pero en
cualquier caso, siempre cumplen estas dos condiciones:
• Su comportamiento es igual al de un simple enlace que será
utilizado para acceder a otro punto de la información dentro
de la estructura del sitio Web.
• Siempre están agrupados en una determinada zona de la
pantalla, que se suele repetir a lo largo de todo el site y se
presentan al usuario como un bloque unitario.
Barras de navegación
Las barras de navegación son probablemente uno de los sistemas de
navegación más utilizados en la actualidad y pueden consistir sólo en un
conjunto de enlaces de texto como estar formados por elaboradas
imágenes con sofisticados efectos que realizan las funciones de vínculos.

Por ejemplo, en la siguiente imagen correspondiente a la página Web de
la Ciudad de Barcelona (www.bcn.es/castella/laciutat/barcelona),
podemos encontrar tres claros ejemplos de barras de navegación en
formato textual. En primer lugar, un sistema de navegación local
implementado por una barra de navegación vertical (1) y en segundo
lugar dos sistemas de navegación globales implementados por dos barras
de navegación verticales (2).
2
1 2
Ilustración 14: Sitio Web de la Ciudad de Barcelona
Aunque la tendencia actual es eliminar estos enlaces textuales y
sustituirlos por elaborados sistemas gráficos, los enlaces de texto son el
método más versátil de vincular páginas. De los cuales podemos destacar
los siguientes aspectos:
• Las barras de navegación textuales son lo primero que el
usuario percibe como vínculo, dado que el texto es la primera
información que se visualiza debido a la velocidad de
transferencia de datos.
• Por otro lado, si el diseñador mantiene el uso de enlaces de
color azul y subrayados, permite al usuario localizar
rápidamente dónde se encuentran los recursos de navegación
de la página.
• Permiten ser generados directamente desde contenido de
bases de datos, como por ejemplo los resultados de un
buscador.

Por otro lado, tenemos las barras de navegación en formato gráfico, como
por ejemplo el que se muestra en la siguiente ilustración correspondiente
a la Web corporativa del Grupo Caprabo (www.caprabo.es) en la que se
puede observar en la parte superior de la pantalla un típico caso de barra
de navegación gráfica.
Ilustración 15: Sitio Web del Grupo Caprabo
Estas barras de navegación dotan a los diseñadores de un gran número de
posibilidades ya que pueden presentarse en forma de botones, imágenes,
iconos, etc. Cualquier imagen puede convertirse en un enlace, dando total
libertad a los diseñadores para mejorar espectacularmente los diseños de
las páginas Web.
A continuación se destacan las características más relevantes de las
barras graficas de navegación:
• El formato y el tamaño de las imágenes debe ser el apropiado
ya que si no se pueden provocar esperas demasiado largas en
los tiempos de transmisión de datos.
• Puede suceder que las imágenes no sean suficientemente
representativas, provocando que el usuario no pueda
relacionar la imagen con la información asociada.
• Los enlaces pueden pasar desapercibidos como meros
elementos de diseño, sobre todos en aquellos sitios Web
donde el diseño grafico es abusivo.

Sobre el tema del tamaño de las imágenes y su tiempo de descarga, existe
actualmente la incipiente tendencia de no confeccionar las barras de
navegación gráficas con diversas imágenes, sino confeccionarlas a partir
de una sola imagen que en realidad se convierte en un mapa de
navegación. Este sistema produce que la navegación sea más rápida
debido a que las imágenes agrupadas se descargan con mayor rapidez, al
no ser necesarias tantas peticiones al servidor.
Existe una combinación entres las barras de navegación textuales y las
barras de navegación gráficas ampliamente aceptada y utilizada,
consistente en un híbrido entre estos dos sistemas. Se trata de utilizar
imágenes o iconos acompañadas de pequeños rótulos de texto que
ayudan a corregir algunas de las debilidades de las barras de navegación
gráficas.
En la siguiente ilustración, podemos observar el sitio Web de La Caixa
de Catalunya (www.caixacat.es), donde se observa una barra de
navegación con pequeños iconos acompañados de un texto descriptivo.
Ilustración 16: Sitio Web de La Caixa de Catalunya
Independientemente de que las barras de navegación sean textuales,
gráficas o híbridas hay un aspecto esencial en el uso de estos sistemas.
Indiscutiblemente las barras de navegación permiten que los usuarios
puedan generarse mentalmente la estructura del sitio Web y obtener una
idea de cuales son los contenidos que podrán encontrar.
Este hecho es de vital importancia para los diseñadores que ven las barras
de navegación no sólo como simples agrupaciones de enlaces, sino como
herramientas que les van a permitir transmitir a los usuarios la estructura
y las piezas claves del site en cuanto a contenidos se refiere.

Así pues, los principales formatos que podemos encontrar dentro de las
barras de navegación son:
• Listas de opciones.
• Breadcrumbs.
• Barras de imágenes.
• Sistemas de pestañas.
Menús desplegables
Existen versiones más sofisticadas de las barras de navegación, con
elementos desplegables, árboles de carpetas y opciones que se expanden
y se contraen como si se tratara de menús de programas. Estos sistemas
son los que se conocen con el nombre de menús desplegables.
En estos menús se han ido imponiendo a medida que han ido avanzando
las tecnologías de programación para páginas Web, como los lenguajes
de programación Java, Javascript, HTML dinámico, etc. ya que es
necesario implementarlos en alguno de estos lenguajes. Estos lenguajes
de programación permiten interactuar con el navegador de manera
dinámica, proporcionando a las páginas Web mayor potencia y
flexibilidad.
Los menús desplegables presentan a los usuarios muchas opciones de
navegación de un modo compacto. Lo que en principio parece un simple
menú se desplega bajo petición del usuario para mostrar una ampliación
del menú inicial con submenús. Estos menús dan al diseñador la
posibilidad de compactar muchas opciones bajo simples rótulos o títulos
en una página, por lo que ocultan ciertos contenidos y obligan al usuario
a actuar antes de que pueda visualizar dichas opciones.
En las siguientes ilustraciones se puede observar el sitio Web de la
Generalitat de Catalunya (www.gencat.es), un claro ejemplo de menú
desplegable implementando un sistema de navegación jerárquico.
Ilustración 17: Sistema de menú desplegable. Ilustración 18: Submenú
desplegado.

Al igual que las barras de navegación, los menús desplegables presentan
las mismas características en cuanto al uso de texto e imágenes. Todo lo
descrito en al apartado anterior es aplicable a los menús desplegables. La
tendencia mayoritaria de estos menús es que sean de tipo texto o sistemas
híbridos que combinan textos con iconos, ya que en pocas ocasiones se
encuentra este tipo de sistemas implementados exclusivamente de
manera gráfica.
Los principales formatos que podemos encontrar dentro de los menús
desplegables son:
• Menús desplegables.
• Listas expandibles.
• Menús pop-up.
• Menús pop-up interactuantes.
3.2 Implementación de los menús. El formato.
Si bien es cierto que todos los sistemas de navegación se pueden
clasificar en uno de los dos sistemas descritos en el apartado anterior
(barras de menús y menús desplegables) pueden presentarse en las
páginas Web implementados en un sinfín de formas y estructuras
diferentes.
Aparecen así los elementos de interface con los que el usuario final
interactúa: listas de opciones, barras de imágenes, sistemas de pestañas,
menús desplegables, listas expandibles y los breadcrumbs.
Además de existir innumerables combinaciones de los principales
sistemas enumerados, estos diseños siguen evolucionando a medida que
avanzan las técnicas de programación y los sistemas de diseño gráficos,
provocando nuevas interfaces de navegación.
Listas de opciones
Esta implementación es la más básica y simple y la que primero se utilizó
en las páginas Web. No consiste más que en una barra de navegación en
la que se agrupan una serie de vínculos en una posición concreta de la
pantalla y se muestran como una simple lista unitaria de opciones, entre
las cuales el usuario puede seleccionar la que más le interese.

Ilustración 19: Lista de opciones en Google.
En la ilustración anterior se puede observar una lista textual de opciones
en Google (www.google.com) donde se ha respetado el color azul y
subrayado para los enlaces no visitados.
Como se ha mencionado anteriormente, el uso de estos enlaces textuales
conlleva unos indiscutibles beneficios en cuanto a velocidad de
transmisión de datos. Si además se respeta el uso de los colores y
tipografía por defecto, tenemos un simple pero eficaz sistema de
navegación.
Es evidente que aunque la tipografía es un punto esencial en cualquiera
de los sistemas de navegación, en este tipo concreto es crucial ya que en
este caso no hay ningún otro elemento que pueda subsanar el gravísimo
error de una mala elección en la tipografía, el tamaño o el color.
Existe una evolución de este tipo de menús, que consiste en provocar un
efecto sobre el texto cuando el usuario interactúa con una determinada
opción (coloca el curso sobre la opción, clica sobre la opción, etc.)
Ilustración 20: Lista de
opciones en
Portalmi
x.
Cursor sobre la opción Viajes.
En la imagen anterior se puede observar el comportamiento de la lista de
opciones del Portal de ocio Portalmix (www.portalmix.es) donde el
fondo de la lista cambia de color cuando el usuario pone el cursor sobre
una de las opciones.
Esta técnica es ampliamente utilizada por los diseñadores, ya que les
permite definir un diseño específico para la opción del menú
seleccionada y se ha convertido en un método de refuerzo a la hora de
presentar los elementos que se pueden clicar. De esta manera se facilita al
usuario la identificación de los enlaces dentro de la página Web y se
aumenta la navegabilidad del sistema.

Existe una variante de estas listas de opciones que es interesante
mencionar no por su diseño sino por la función que desempeñan dentro
de la página y por ser práctica habitual en el diseño Web.
Consiste en las denominadas listas de opciones a pie de página que, como
su nombre indica, se ubican siempre como pie de página cerrando los
contenidos de las páginas Web
En estas listas de opciones a pie de página es una regla generalizada
poner información referente a la empresa, enlaces de contacto, ubicación
de la empresa, aspectos legales, política de privacidad, ayuda y en
general todo tipo de información de carácter global.
Aunque son enlaces poco utilizados por los usuarios, ofrecen una imagen
de seriedad y realizan la función de cierre de los contenidos de las
páginas.
Ilustración 21: Lista de opciones a pie de página en www.wanadoo.es
Los breadcrumbs
El conjunto de enlaces que forman un sistema de navegación de
breadcrumbs cambia en cada página en función de la ubicación de esta
dentro de la estructura. Es decir, estos enlaces cambian en cada página
mostrando el camino que el usuario ha seguido desde la página de inicio
hasta el punto actual, como si el usuario hubiera ido dejando migas de
pan para localizar su posición dentro de la estructura.

Por consiguiente se considera que los breadcrumbs, más que un sistema
de navegación, son un sistema de posicionamiento, ya que indican al
usuario dónde está dentro de la jerarquía de contenidos del sitio Web.
Ilustración 22: Página Web del Forum de las Culturas
En la imagen anterior se puede observar el encabezado de la página Web
del Forum de las Culturas de Barcelona 2004 (www.barcelona2004.org).
Una primera barra de menús desplegables implementando una
navegación global, a continuación se observa una navegación mediante
breadcrumbs que nos indican la situación de la página actual, en el
ejemplo:
Eventos > Exposiciones > Guerreros de Xi’an > Presentación
Este tipo de menús siempre presenta el mismo formato; rótulos de textos
correspondientes a los títulos de las páginas visitadas separadas por algún
elemento que en la mayoría de casos se representa mediante el símbolo
“>”:
Portada > Página 1 > Página 2 > Página 3 > Página actual.
Una de las principales características de estos menús estriba en el hecho
de que suponen una solución sencilla y que ocupa muy poco espacio en
pantalla, en comparación con el resto de menús de navegación fijos que
pretenden mostrar los contenidos del sitio Web.

Barras de imágenes
Con la evolución de las tecnologías en desarrollo de páginas Web y los
diseños gráficos aparecen las listas de opciones compuestas por
imágenes. Estas Barras de imágenes no son más que una evolución de las
listas de opciones y por consiguiente se basan en los mismos principios.
Ilustración 23: Barra de imágenes en Televisió de Catalunya.
En la ilustración anterior se puede visualizar el sistema de navegación
global implementado mediante una barra de imágenes en el sitio Web de
Televisió de Catalunya (www.tvcatalunya.com).
Este sistema tiene mayor potencial, al poder ofrecer mayor variedad de
formas que el simple texto del formato HTML. Evidentemente permite
presentar los enlaces en forma de imágenes, logotipos (como el caso de la
anterior ilustración) , botones, gráficos, iconos, etc. Cualquier archivo en
formato JPG o GIF puede convertirse en un enlace y por consiguiente
formar parte de una barra de imágenes.
Evidentemente no todos las imágenes son tan representativas como el
ejemplo de la ilustración anterior y por consiguiente en ocasiones se hace
necesario reforzar estos vínculos gráficos con textos que ayuden a la
compresión de los enlaces.
Ilustración 24: Barra de imágenes híbrida (texto e imágenes) en Portalmix.
Al igual que en las listas de opciones, otra de las variantes de este sistema
consiste en generar efectos dinámicos cuando el usuario interactúa con
las opciones. Existe una interesante variante que consiste en una barra de
imágenes que solo se ve reforzada con rótulo de texto cuando el usuario
se interesa por alguna de las opciones.
Ilustración 25: Efectos dinámicos en Televisó de Catalunya.
En el ejemplo anterior se puede apreciar el efecto dinámico que provoca
la aparición de un pequeño texto descriptivo de cada enlace cuando el
usuario coloca el cursor sobre cada una de las imágenes que componen la
barra de navegación.

Un último estilo de barra de imágenes que merecen una especial atención
son las formadas por los elementos de tipo botón.
Los botones son elementos a través de los cuales los usuarios interactúan
con las máquinas en sus vidas cotidianas y por consiguiente no es de
extrañar que los diseñadores crearan una metáfora, es decir, la imitación
de un elemento de la realidad física en las aplicaciones informáticas para
aprovechar este hecho.
Esta metáfora también llegó a Internet y estos botones aparecieron
rápidamente, tanto representando enlaces como en formularios dentro de
las páginas Web.
Estas botoneras de navegación no dejan de ser más que barras de
imágenes en las cuales los iconos o imágenes han sido sustituidos por
pequeñas representaciones de botones acompañados de un texto
descriptivo que reforzará la idea de acción-causa (comprar, buscar, ir a,
etc).
Por otro lado, también se pueden aplicar efectos dinámicos sobre este
tipo de barras de navegación y provocar el efecto de botón pulsado con la
intención de realzar y enfatizar la metáfora.
Sistemas de pestañas
Al igual que las barras de botones, las pestañas fueron creadas para
aprovechar un hecho real de la vida cotidiana. Estos sistemas intentan
imitar las pestañas de los archivadores, que permiten a los usuarios
localizar información categorizada en un archivador.
Perece ser que la primera página Web en utilizar este sistema fue
Amazon (www.amazon.com) que con este sistema consigue una clara y
eficaz distribución de sus productos y permite a sus clientes localizarlos
rápidamente.
Ilustración 26: Sistemas de pestañas en Amazon.
Estos sistemas de pestañas no son más que barras de navegación que
permiten implementar sistemas de navegación globales.

Tal y como Eduardo Manchón especifica en el artículo “Pestañas en
diseño Web, cuándo y cómo usarlas”1
hay una serie de características
fundamentales en este tipo de sistemas que conviene remarcar.
Fundamentalmente son:
• La categorización de una sección dentro de una pestaña la
excluye de cualquiera de las otras pestaña.
• No existe conexión directa entre varias pestañas. La única
manera de pasar de una pestaña a otra (de una sección a otra)
es cliclando sobre la pestaña de destino.
• Una de las piezas claves para el correcto funcionamiento de
este tipo de sistema, estriba en el etiquetaje de las pestañas.
• Permite a los usuarios generarse una clara y rápida idea de los
diferentes contenidos que va a encontrar en el site.
Algunos sitios Web que utilizan este sistema han creado una doble
categorización en un segundo nivel. Por lo general, este segundo nivel se
muestra en la parte inmediatamente inferior a la navegación principal y
solo se ve aquel relacionado con la pestaña activa.
Ilustración 27: Sistema de pestañas en Apple.
Como se puede observar en la ilustración anterior, en el sitio Web de
Apple (www.apple.es) existe un sistema de navegación en pestañas con
segundo nivel lo que permite a los diseñadores crear una doble
categorización: la primera identifica claramente las secciones por
pestañas y la segunda se oculta en un segundo nivel.
Menús desplegables
Tal y como se ha descrito en este mismo capítulo, los menús desplegables
son utilizados para proporcionar diferentes opciones, agrupadas en una
lista y que en un principio están ocultas al usuario. Sólo se mostrarán bajo
petición, normalmente cuando el internauta pasa el cursor o clica sobre el
título que agrupa dicha lista de opciones.
Las implementaciones más utilizadas de los menús desplegables son
principalmente tres:
1
Ainda.info: Usabilidad, diseño Web fácil
de usar. Pestañas en diseño Web, cuándo y
cómo usarlas.
[http://www.ainda.info/pestanas.html,
Marzo 2004].

• Los menús desplegables:
Ilustración 28.
Menú desplegable en La Generalitat de Catalunya
(www.gencat.es). En este tipo de menús el usuario accede al
conjunto de opciones agrupadas bajo cada título cuando pone
el cursor encima.
• Las listas expandibles:
Ilustración 29.
Lista expandible en la Web corporativa del Grupo Caprabo
(www.caprabo.es). En este tipo de menús los submenús se
expanden o se contaren cuando el usuario realiza un clic sobre
una de las opciones.
• Los menús pop-up:
Ilustración 30.
Menús pop-up en Terra (www.terra.es). En este tipo de
menús los submenús también se expanden y se contraen
cuando el usuario interactúa con ellos. Utilizan un elemento
de formulario para su implementación.

Una variante de estos menús es la denominada Menús pop-up
interactuantes, en donde las opciones en un menú cambian
cuando los usuarios seleccionan algo en otro menú de la
misma página.
Ilustración 31.
En la ilustración anterior se puede observar el sistema de
menús pop-up interactuantes de tres niveles de Capraboacasa
(www.capraboacasa.com), que nos permite seleccionar las
diferentes secciones, las familias dentro de las secciones y las
subfamilias de cada uno de los productos.

Análisis de sistemas de navegación de sitios Web
Los menús en los distintos tipos de sitios Web
Semana 7 y 8
4. Los menús en los distintos tipos de sitios Web.
Internet cuenta con cientos de millones de sitios Web y crece anualmente a un
ritmo que difícilmente permite predecir que ocurrirá en un futuro. En esta
vorágine de información es difícil catalogar las diferentes páginas Web en
función de su contenido, el perfil de su audiencia, el tipo de estructura, etc. y
más difícil todavía especificar qué sistemas de navegación se implementan en
cada una de estas categorías.
En este apartado se van a describir los tipos de menú más característicos que se
utilizan en los diferentes sitios Web en función de:
• Estructura del sitio Web.
• Tipo de contenido.
• Volumen de información.
• Perfil del usuario.
4.1 Estructura de la información
La estructura de la información de un sitio Web es una de las piezas
fundamentales en la navegabilidad ya que influirá directamente en la
forma en que los usuarios acceden a la información.
Según Adrián Coutin en “Arquitectura de la información para sitos
Web”1
existen tres tipos de estructuras de información que no son
excluyentes y son:
• Estructura jerárquica:
Las estructuras jerárquicas son aquellas que agrupan la información
en subsecciones que están subordinadas a una sección “madre”. A su
vez, estás subsecciones pueden contener otras subsecciones.
Así pues, la información se divide en bloques que son divididos en
subbloques y así sucesivamente. Estas subsecciones descendentes son
excluyentes y al ubicar un bloque en una sección queda excluido de
estar en cualquier otra de las secciones “hermanas”.
1
Libro: Coutin, A. Arquitectura de la información para sitos Web. Madrid, Ed. Ediciones
Anaya
Multimedia (Grupo Anaya S.A.), 2002.

Ilustración 32: Estructura jerárquica
Este tipo de estructura es fácilmente comprensible por los usuarios,
ya que las estructuras jerarquizadas se utilizan ampliamente en la vida
cotidiana, lo que permite que los usuarios pueden generarse una
estructura mental del sitio donde se encuentran y de su posición
actual dentro de la estructura.
Debido a las características de estas estructuras, los menús de
navegación que mejor se adaptan son los sistemas de pestañas de
varios niveles (por ejemplo, un sistema de pestañas como el utilizado
en Amazon.com o Fnac.es o un sistema de pestañas con doble nivel
como el utilizado en la página de Apple.es). Tal y como se comentó
en el apartado anterior, infinidad de páginas Web implementan estos
sistemas, especialmente sitios dedicados al comercio electrónico.
Los sistemas de menús desplegables también son ampliamente
utilizados en este tipo de estructuras: menús desplegables de varios
niveles, listas expandibles y finalmente los sistemas de menús pop-up
interactuantes.
Todos ellos respetan una de las características principales de las
estructuras jerárquicas: presentan en un primer nivel las áreas de
contenido más generales y relevantes y esconden las subdivisiones de
estas áreas principales, que se irán presentando al usuario en
sucesivas subdivisiones bajo petición de éste.
Normalmente, cuando la estructura jerárquica es muy profunda se
suele acompañar la navegación principal con algún tipo de sistema de
posicionamiento, como los breadcrumbs, para ubicar al usuario
dentro de la estructura general.
• Estructura de hipertexto:
Este tipo de estructura consiste en organizar la información de una
manera no lineal, es decir los bloques de información pueden estar
enlazados utilizando cualquier tipo de asociación, ya sea jerárquica o
no.

Ilustración 33: Estructura secuencial versus estructura de hipertexto
Por consiguiente, estos sistemas proporcionan gran flexibilidad ya
que permite establecer relaciones entre cualquiera de los elementos y
áreas de información.
Si el modelo jerárquico era un sistema fácilmente entendible por los
usuarios, ahora nos encontramos en el lado opuesto ya que la
estructura de hipertexto plantea una complejidad conceptual que
pueden confundir al usuario. El usuario puede sentirse perdido al no
ser capaz de generar un modelo mental de la organización del sitio y
al no poder encontrar la información que realmente le interesa.
Por este motivo, estas estructuras de la información suelen utilizarse
como complemento a otro tipo de estructuras.
Los sistemas de navegación que mejor implementan este tipo de
estructura son los sistemas de navegación ad hoc, que relacionan
palabras, expresiones o frases con contenidos que amplían la
información proporcionada por el autor.
Estas palabras, expresiones o frases suelen ser vínculos incrustados
en el propio texto y por consiguiente no podemos tratarlos como
menús de navegación.
El único sistema de menús de navegación que de alguna manera se
podría ajustar a este tipo de estructura de la información serían las
listas de opciones o las barras de imágenes. Estas podrían ser
diferentes en cada uno de los bloques de información y, de esta
manera, cada nodo de información tendría sus propios enlaces
personalizados.
• Estructura relacional base de datos:
Las bases de datos son herramientas muy potentes para organizar y
manipular la información. Por este motivo, el uso de bases de datos
como estructuras de la información para sitios Web, permite
organizar los bloques de información de un determinado site de una
manera eficaz y permite recuperar la información desde diferentes
niveles y en diferentes formatos.

Las aplicaciones de las estructuras relacionales de bases de datos en
páginas Web son principalmente dos.
En primer lugar, son utilizadas para facilitar la búsqueda de
contenidos entre los distintos bloques de información que conforman
el sitio Web.
En segundo lugar, son utilizadas para confeccionar sitios Web
dinámicos y personalizados, donde los contenidos que provienen de
una base de datos pueden variar en función del usuario que los
visualiza, la plataforma u otras variables externas.
Los menús de navegación de este tipo de estructura también pueden
ser generados dinámicamente. Mediante sistemas de programación se
pueden generar listas de opciones y algunos tipos de sistemas de
pestañas y menús desplegables cuyos elementos provienen
directamente de una base de datos.
Así pues, cualquier menú de navegación se puede obtener a partir de
un sistema de bases de datos con mayor o menor dificultad.

Semana 9 y 10
4.2 Tipo de contenido
Los sitios Web se pueden clasificar, en función de sus contenidos, en los
siguientes tipos:
• Personales:
Son un medio de expresión de su creador o creadores, cuyo propósito
suele ser difundir información personal o recopilada por los autores
del sitio Web.
Sus contenidos y audiencia pueden ser de los más variopinto, desde
colecciones de fotografías familiares a estudios universitarios
pasando por páginas con información personal, laboral y por supuesto
todo tipo de hobbis y aficiones.
Por regla general, este tipo de páginas suele tener una estructura y
diseño bastante caótico. Aunque se pueden encontrar páginas
personales cuidadas, con una estructura bien definida y un diseño
elaborado, lo normal es que estas páginas hayan ido creciendo
desordenadamente sin ningún tipo de criterio y donde en muchos
casos el diseño ahoga los contenidos.

Es difícil determinar el tipo de menús de navegación que utilizan
estas páginas, debido al amplio sector de internatutas que cada día se
lanza a confeccionar sus propias páginas Web, pero lo más corriente
es encontrar Listas de opciones y Barras de imágenes ya que estos
dos tipos de menús son los más fáciles de implementar. Unos básicos
conocimientos de HTML permiten a los usuarios confeccionar los
sistemas de navegación de sus sites.
Ilustración 34: Barra de botones en una Web personal.
Tal y como se ve en la ilustración anterior, un recurso gráfico muy
utilizado en este tipo de site consiste en la implementación de barras
de navegación mediante botones.
• Corporativos:
Están pensados para promocionar los negocios de una empresa. Su
finalidad es puramente comercial y su audiencia puede estar formada
por clientes, inversores, empleados, empresas de la competencia,
medios de comunicación, etc.
En este tipo de sitios Web podemos encontrar, básicamente, los
siguientes subapartados: “Quiénes somos”, “La historia de la
empresa”, “Los productos” y “Contacte con nosotros”.
La sección de productos es una de las piezas fundamentales en este
tipo de páginas Web y se desarrolla con la finalidad de que los
potenciales clientes encuentren toda la información sobre los mismos.
Enfatizan las ventajas y características de un producto o marca y
suelen incluir todo tipo de información técnica, precios,
distribuidores, etc.
No suelen ser sitios de comercio electrónico, ya que no buscan una
relación comercial a través de Internet. Solo pretenden utilizar la red
como un canal más para dar a conocer sus productos y servicios.
Las empresas intentan alinear la entidad corporativa con el diseño de
las páginas Web y por consiguiente suelen invertir gran cantidad de
recursos para confeccionar sus sedes en Internet (lo que provoca que
este tipo de páginas sean tecnológicamente avanzadas, con diseños
gráficos y multimedia muy elaborados y con información muy
detallada y organizada).

Debido a la gran variedad de empresas, servicios y productos, es
difícil determinar el tipo de menús que utilizan estas páginas para
implementar los sistemas de navegación. Lo más frecuente, igual que
en los sitios Web personales, es encontrar Listas de opciones y Barras
de imágenes y por la gran cantidad de recursos que las empresas
invierten en este medio, es común encontrar todo tipo de elaborados y
avanzados menús desplegables.
Ilustración 35: Menú desplegable en el site corporativo de Lexmark
(www.lexmark.es)
Cuando los contenidos son muy amplios es normal en este tipo de
sitios encontrar implementado un sistema de navegación de
Breadcrumbs o migas de pan para informar al usuario de la su
posición dentro del site.
• Institucionales:
Son una variante del Web corporativo pero en este caso el titular del
site será una institución publica o privada en lugar de una empresa.
La información que presentan depende de los objetivos de la
organización pero lo más común es que pretendan darse a conocer al
público en general. Suele ser muy parecida a la información que
presentan los Sites corporativos, pero eliminado el subapartado de
productos, añadiendo la sección “Qué hacemos” y fortaleciendo la
sección “Contacte con nosotros”.
Algunas Web institucionales públicas empiezan a adaptar sus sedes
en Internet para que los ciudadanos pueden realizar trámites
administrativos on-line. Con la aparición de las técnicas de
programación seguras a través de Internet, cada vez son más las
entidades que presentan sistemas transacionales remotos a través del
navegador.
Las características de los sistemas de navegación implementados en
este tipo de site son idénticas a las Web corporativas, todo está en
función de los medios y de los recursos de la organización, si es
pública o privada y de qué tipo de servicios presta a través de
Internet.

Ilustración 36: Lista de opciones en el Parlament de Catalunya
(www.parlament- cat.net)
• Contenido y entretenimiento:
El valor de estos sitios es la información que proporcionan,
actualizada de manera permanente en tiempo real, cómo por ejemplo
noticias, estado del tiempo, cotizaciones en bolsa, etc.
Claros ejemplos de este tipo de sitios son las páginas de los
periódicos, los portales de entretenimiento, de contenidos,
financieros, etc.
Como su principal objetivo es distribuir información, la audiencia de
este tipo de sitios depende en gran medida del tipo de información
que distribuyen.
Normalmente son sitios con una finalidad económica, propiamente
derivada de la información que ofrecen o comercializan. Intentan
fidelizar a los usuarios, además de con la propia información,
mediante sofisticados diseños y sorprendentes experiencias
multimedia.
Por este motivo, los sistemas de navegación son los más complejos,
elaborados y evolucionados de todos los sites Web. Podemos
encontrar cualquier tipo de menú, cualquier tipo de recurso grafico o
multimedia y mayoritariamente están implementadas con efectos
dinámicos para sorprender al usuario.
Normalmente, cuando los contenidos son muy amplios, es normal
encontrar Breadcrumbs de apoyo al sistema de navegación principal.
Ilustración 37: Sofisticado menú de navegación en el portal
multimedia de Amena
(www.amena.com/mms)
• Comercio electrónico:
Los sitios Web de comercio electrónico se centran en vender
productos de manera on-line a través de Internet, los cuales se pueden
pagar mediante tarjeta de crédito o cualquier otro medio de pago.

La evolución de los sistemas de pago seguros en Internet ha
provocado un tímido despegue del comercio electrónico, ya que cada
vez son más los usuarios que provocados por la comodidad y la
facilidad se deciden a comprar a través de las páginas Web.
La cantidad de productos que podemos comprar a través de Internet
es infinita, desde un simple libro o CD de música hasta una parcela
de terreno en la Luna. Cualquier cosa se puede vender o comprar a
través de la red.
La mayoría de páginas Web de comercio electrónico utilizan sistemas
de navegación centrados en un proceso de compra simple e
inmediata. Las sedes Web de los comercios virtuales utilizan sistemas
enfocados a usuarios que tienen muy claro que es lo que quieren
comprar y por consiguiente navegan con un objetivo muy definido.
Tal y como afirma Jakob Nielsen en el artículo “The 3Cs of Critical
Web Use: Collect, Compare, Choose”2
, el 96% de los usuarios tienen
objetivos muy claros cuando navegan por este tipo de sedes.
Para conseguir estos sistemas de navegación simples y claros se
organizan los artículos e información en una estructura muy
jerarquizada conocida por los usuarios. Es decir, se utiliza una
categorización y un etiquetado que al usuario le son familiares, ya
que los conoce del mundo real.
Esto se consigue mediante los sistemas de navegación basados en
pestañas, listas expandibles, menús pop-up y menús pop-up
inetractuantes. Utilizando etiquetas en un lenguaje cercano al usuario
se fomenta la navegación intuitiva, que favorece la localización de los
productos.
Además, estos sistemas permiten agrupar gran cantidad de productos,
ya que son capaces de compactar gran cantidad de opciones en muy
poco espacio de la pantalla.
Ilustración 38: Sistema de menús pop-up interactuantes en Condisline
2
Useit.com: Jakob Nielsen's Website
The 3Cs of Critical Web Use: Collect, Compare, Choose
[http://www.useit.com/alertbox/20010415.html, Marzo 2004]

Tal y como se puede observar en la ilustración anterior, el menú pop-
up interactuante del supermercado virtual Condisline
(www.condisline.com) permite en un menú de tres niveles de ancho
catalogar los más de 5.000 productos que podemos encontrar en este
supermercado virtual, utilizando un etiquetado familiar al usuario (en
el ejemplo, Droguería – Insecticidas – Spray).
Por este motivo, este sistema se ha convertido prácticamente en un
estándar de navegación en los comercios electrónicos y muy
especialmente en aquellos donde se ha de catalogar gran cantidad de
productos, como es el caso de los supermercados virtuales.
Otro de los sistemas de navegación estándar ampliamente utilizado en
los sitios de comercio electrónico son los sistemas de pestañas. Este
sistema es otro de los sistemas ampliamente utilizado ya que, igual
que el anterior, nos permite catalogar gran cantidad de productos
fácilmente encontrables por los usuarios, debido al uso de un
etiquetaje familiar al cliente.
Si bien este tipo de sistema debe apoyarse en algún sistema de
navegación lateral (principalmente lateral izquierdo) para ampliar las
subsecciones de las categorías principales, que se encuentran
ubicadas en las pestañas superiores.
Ilustración 39: Sistema de pestañas en la web de Fnac
En la imagen anterior se puede observar un típico ejemplo de sistema
de pestañas reforzado con una barra lateral izquierda, mostrando las
subsecciones de la categoría seleccionada.

Este tipo de estructura ampliamente utilizado se conoce con el nombre
de diseño en forma de “L invertida”. Como ya se ha comentado, se
trata de una cabecera en la parte superior con un sistema de navegación
global, reforzado con un menú en una barra lateral izquierda.
Hasta la fecha, algunos estudios afirmaban que esta estructura intenta
aprovechar la forma de operar del cerebro humano: el hemisferio
izquierdo corresponde al lado racional capaz de controlar más fácilmente
textos y procesar información, mientras que el hemisferio derecho se
asocia con la visión y está más capacitado para procesar contenidos.
Las investigaciones llevadas a cabo en los últimos años por James
Kalbach y Tim Bosenick y reflejadas en el artículo “Web Page
Layout: A Comparison Between Left- and Right-justified Site
Navigation Menus”3
afirman que la facilidad de uso de la estructura
de “L-invertida” no se debe a la distribución de tareas entre los
hemisferios del cerebro humano, sino que concluye afirmando que el
cerebro del ser humano es ambidiestro y que la facilidad de uso de
esta estructura estriba en una convención aceptada por los
diseñadores y aprendida y asimilada por los usuarios.
Otra de la maneras de reforzar la navegación global en este tipo de
sistemas es mediante los breadcrumbs que permiten ubicar a los
usuarios dentro de las diferentes categorías tal y como se puede
apreciar en la siguiente ilustración.
Ilustración 40: Sistema de pestañas y Breadcrumbs en la Web de Fnac
Una características a tener en cuenta sobre este tipo de sitios Web es
que habitualmente utilizan otro tipo de sistema de navegación basado
en la navegación directa mediante herramientas de búsqueda.
Jakob Nielsen en el libro “Usabilidad: Diseño de sitios Web”4
afirma
que algo más de la mitad de los usuarios se decantan por la búsqueda
directa dentro de las sedes Web.
Estos sistemas directos de navegación también
se han convertido en un estándar que
implementan prácticamente la totalidad de
sitios Web de comercio electrónico, ya que
brindan al usuario la posibilidad de acceder
directamente a los productos de su interés.
Ilustración 41:
Buscador en
Elcorteingles.es
3
Artículo: Bosenick, T. Kalbach, J. Web Page Layout: A Comparison Between Left- and
Right-justified
Site Navigation Menus, 2003 - Journal of Digital Information, Volume 4 Issue 14
2000.

Evidentemente, este tipo de sistema resta oportunidades de venta en
comparación con los sistemas de navegación descritos hasta el
momento ya que mediante las herramientas de búsqueda el usuario ya
no tiene la necesidad de ir desplazándose por las distintas categorías y
visualizando listas de productos, con lo que se reduce drásticamente
la denominada “compra impulsiva”.
Por último, un punto a destacar de las sedes de comercio electrónico,
aunque no es un elemento propio de la navegación, es otro de los
estándares que habitualmente implementan y consiste en la
utilización de la metáfora del carro de la compra para facilitar a los
usuarios el proceso de compra mediante una simbología que les sea
familiar.
4.3 Volumen de la información
En cuanto al volumen de información que podemos encontrar en las
páginas Web y que afecten directamente a los sistemas de navegación,
tenemos dos grandes categorías: páginas con poco volumen y que
normalmente no se actualizan con mucha frecuencia (por ejemplo,
páginas personales) y páginas con grandes volúmenes de información
que se actualizan con mayor frecuencia (por ejemplo, los portales de
entretenimiento y ocio).
Para los site con escasa información cualquier tipo de menú será válido,
pero se adaptan mejor las simples listas de opciones o barras de imágenes
con pocos elementos. Esto se debe a que desde uno de estos menús de
navegación podemos acceder rápidamente a cualquiera de las secciones
que componen el sitio Web.
En cambio, para los site donde los volúmenes de información son más
amplios una lista de opciones o una barra de imágenes no se adaptará
adecuadamente.
Recordemos que los sites con grandes volúmenes de información suelen
organizarse en estructuras jerárquicas. Tal y como se comentó en el
subapartado anterior, este tipo de páginas optan por menús de navegación
que permiten mostrar en un primer nivel las áreas de contenido más
generales y relevantes y esconder las subdivisiones de estas áreas
principales. Por consiguiente, los menús más utilizados serán todo tipo de
menús desplegables y los sistemas de pestañas de varios niveles.
Muchos sistemas con grandes volúmenes de información utilizan los
sistemas de navegación directos, que permiten acceder a la información
mediante búsquedas específicas.

Estos sistemas de navegación no se implementan mediante menús de
navegación, sino que lo hacen mediante índices que normalmente suelen
ser generados como resultado de peticiones a bases de datos.
4.4 Perfil del usuario
Otra de las piezas claves para determinar los sistemas y menús de
navegación es el perfil del usuario que visitará una determinada página
Web.
Es evidente que los diseños se enfocan de diferente manera en función de
la audiencia a quien se dirige el site. No tendrá la misma interface una
Web de entretenimiento y ocio dirigido a un público joven, que una
tienda on line de alimentación dirigida principalmente a un público
femenino.
Los menús de navegación también se deben adaptar a las características
de la audiencia: edad, nivel cultural, grado de uso de Internet, etc.
De todas las características que podemos citar, existe una especialmente
relevante para los menús de navegación: el grado de experiencia en el
uso de Internet, tanto a nivel profesional como a nivel personal.
Así pues, para usuarios menos avanzados y con niveles de utilización
más bajo de Internet serán preferibles las litas de opciones y barras de
imágenes, ya que permiten que el usuario identifique rápida y claramente
cuáles son las diferentes secciones a las que puede acceder y que se
genere una estructura mental de sitio Web.
Además, si los elementos de estos menús se acompañan de efectos
dinámicos que se activan cuando el usuario pasa el cursor sobre ellos, se
ayuda a la localización de los enlaces y las zonas de navegación.
Otro de los sistemas que ayuda a la navegación de estos usuarios son los
sistemas de navegación lineales, donde el diseñador establece el camino
más optimo para recorrer una estructura de la información y le da al
usuario un número muy reducido de posibilidades, que normalmente se
reducen a “Página siguiente”, “Página anterior” y “Índice de contenidos”.
Por otro lado, para este tipo de usuario son muy aconsejables la
utilización de metáforas, como las barras de imágenes en forma de
botones o sistemas de navegación de pestañas. Los usuarios saben como
funcionan estos elementos (botones y pestañas) en su vida cotidiana y por
consiguiente sabrán utilizarlos en la Web sin necesidad de ningún
aprendizaje previo.

En cambio, para este tipo de usuarios no son tan recomendables los
menús desplegables, ya sean menús desplegables como listas expandibles
o menús pop-up. Tal y como afirma Xavier Mestres en su artículo “El
usuario español en Internet: ¿no quiere o no puede?”5
el 52% de los
usuarios tiene dificultades en utilizar este tipo de menús.
Estos menús no permiten ver a simple vista cuales son todos los enlaces
que hay disponibles, lo cual puede llevar a confusión a los usuarios más
inexpertos. Esta ocultación parcial provoca que el usuario no sea capaz
de hacerse una composición del site ni del volumen de información a la
que puede acceder y por eso son más recomendables para usuarios con
un nivel más avanzado en el uso de Internet.
5
Propiedad intelectual
El usuario español en Internet: ¿no quiere o no puede?
[http://www.propiedadintelectual.info/opinan_los_medios/usuario_local_Internet_noQ
uiereONoPuede.ht m, Abril 2004]

La usabilidad en los menús de navegación
Semana 11 y 12
5. La usabilidad en los sistemas de navegación.
Debido al ingente volumen de información que se puede encontrar en Internet y
a la gran diversidad de fuentes disponibles sobre un mismo tema, los usuarios
han desarrollado un modelo de navegación que algunos autores denominan “La
navegación impaciente”.
Este sistema de navegación se basa en el hecho de que un usuario, cuando busca
información en la red, sabe que cuantos más sitios Web visite más posibilidades
tendrá de encontrar la información que busca, y por consiguiente, dedicará pocos
segundos a cada una de las páginas que se encuentra durante su búsqueda, con el
fin de “ojear” el mayor número de páginas posible.
Así pues, las páginas Web deben tener la capacidad de transmitir a los usuarios,
en pocos segundos, la sensación de que en ese site podrán encontrar de una
manera fácil y eficaz toda la información que necesitan.
En resumen, los usuarios quieren el mayor número de resultados en el menor
tiempo posible y de una manera fácil y eficaz. Los usuarios no están dispuestos a
perder su tiempo en el aprendizaje de sofisticados sistemas de navegación, o de
deslumbrantes pero complicados diseños, o de perder tiempo en la descarga de
un determinado plug-in para la correcta visualización de un site en concreto.
Por esta razón, existe la necesidad de crear diseños centrados en los usuarios
donde prime la sencillez y que permita a los internautas navegar con facilidad,
para optimizar al máximo los tiempos de búsqueda de información y de
navegación.
Este enfoque de diseño es lo que se conoce como “la facilidad de ser usado” o
usabilidad. Esta perspectiva es aplicable a cualquier elemento, herramienta,
dispositivo, etc. con el cual el hombre interactúa: desde pequeños dispositivos
electrónicos domésticos hasta sofisticados sistemas informáticos, pasando por
cualquier herramienta o utensilio de nuestra vida cotidiana.
5.1 La usabilidad en el entorno Web
La usabilidad para la Web surge a partir del uso masivo de Internet como
sistema de comunicación. El desarrollo de la tecnología permite la
aparición de sites más complejos y de diseños más sofisticados con
interfaces más difíciles de usar por los usuarios.

Aunque las páginas Web están basadas en principios relativamente
básicos como texto, enlaces, imágenes, tablas, etc., existen un sinfín de
aspectos que pueden convertir un sitio Web en un verdadero reto para un
usuario inexperto.
La usabilidad aporta un enfoque para la confección de entornos Web, de
tal manera que los diseños elaborados sean fáciles de usar y de aprender,
efectivos, eficaces y que cubran las expectativas tanto de los diseñadores
como de los futuros usuarios.
La usabilidad engloba una amplia gama de aspectos. Estos abarcan desde
los aspectos más puramente de diseño gráfico, como las tipografías,
colores e imágenes, a los aspectos más específicos, como el estilo
narrativo, la estructura de la información, los elementos que integran los
sistemas de navegación, etc. Principalmente podemos agrupar estos
aspectos en cuatro grandes bloques:
• La información: Podemos englobar en este apartado todos los
aspectos referentes a los sistemas de organización de la
información, que vendrán determinados por las características de
la misma y que serán decisivos para los sistemas de navegación
del sitio Web.
• La navegabilidad: Este apartado engloba todos los aspectos que
permitirán a los usuarios moverse a través de las diferentes
páginas del sitio. Este apartado está estrechamente relacionado
con la arquitectura de la información del sitio Web.
• El interface: Es uno de los elementos fundamentales, ya que es la
herramienta a través de la cual el usuario se comunica con el
sistema. Debe ser fácil de usar y de aprender, eficaz, cómodo y
agradable. En este apartado se englobaría los aspectos puramente
de diseño, como los colores, tipografía, imágenes, etc.
• Los lenguajes de programación: Engloba lo aspectos más
tecnológicos: lenguajes de enmaquetación y de programación
(htnl, dhtml, javascript, etc), formatos de diseño gráfico (flash,
formatos multimedia, etc.) y de manipulación de información
(recuperación de información de bases de datos, envío de
información mediante formularios, etc.).
La Organización Internacional para la Estandarización definió la
usabilidad como “el grado en el que un producto puede ser utilizado por
usuarios específicos para conseguir objetivos específicos con
efectividad, eficiencia y satisfacción en un determinado contexto de uso”
(ISO 9241-11).

Como se puede apreciar en el párrafo anterior, hay tres elementos claves
en esta definición: usuarios específicos, objetivos específicos y contexto
de uso. Es decir, la usabilidad de un sitio Web está en función del público
que ha de utilizarlo, del objetivo para el que fue creado y de la situación
en la que se utilizará.
En consecuencia, las posibles variables en estos tres elementos impiden
que existan una serie de reglas que se deban aplicar de manera estricta,
sino más bien un conjunto de principios básicos que los sitios Web
usables deben respetar. Así, deben ser:
• Fácilmente entendibles.
• Fáciles de aprender.
• Eficaces.
• Intuitivos.
• Rápidos.
• Libres de errores.
• Proporcionar satisfacción al usuario.
• Visualmente agradable.
• Flexibles.
5.2 La accesibilidad
Otra de las piezas claves de la usabilidad es la accesibilidad, que es
definida por W3C World Wide Web Consortium como la posibilidad del
acceso a la información por el mayor número de personas posibles sin
limitaciones por razones de deficiencia, discapacidad, minusvalía o
cualquier otra limitación derivada del contexto de uso.
Aunque las páginas Web están basadas en principios básicos, las
personas con discapacidades se encuentran con toda una serie de barreras
al utilizar Internet, impidiéndoles acceder a gran parte de la información
y servicios.
La accesibilidad no solo hace referencia al acceso de la información por
parte de personas con discapacidades, sino también a cualquier otro
colectivo que sin sufrir ningún tipo de deficiencia física o psíquica puede
encontrar problemas al utilizar los entornos Web, como por ejemplo,
personas de edad que pueden ver reducidas sus posibilidades de
utilización de los sitios Web por encontrar sistemas de navegación muy
complejos, estructuras de la información poco coherentes, etc. o
simplemente aspectos relacionados con el idioma o experiencia
informática.

Aunque en un principio se podría pensar que este tipo de problemas
afectan a un pequeño número de personas, según datos del Instituto
nacional de Estadística el porcentaje de ciudadanos españoles con algún
tipo de discapacidad es del 9% y según el informe “eEurope 2002:
Accesibilidad de los sitios Web públicos y de su contenido”1
más de 37
millones de ciudadanos europeos sufren algún tipo de discapacidad. En
Estados unidos, según datos del US Census, el porcentaje se dispara hasta
un 20% (que una persona de cada cinco tiene algún tipo de discapacidad).
Estos datos demuestran la necesidad de mejorar la accesibilidad mediante
el respeto de una serie de normas aplicadas en los procesos de creación
de los sitios Web. Además hay que tener en cuenta que es predecible que
estos porcentajes aumenten en las próximas décadas debido al progresivo
aumento de la longevidad de la población.
Estas normas de “buena conducta” de los creadores y diseñadores se
recogen en las “Pautas de accesibilidad al contenido en la Web 1.0”2
publicadas por la WAI del World Wide Consortium. También se
encuentra disponible una “Guía de referencia rápida”3
con diez
recomendaciones sobre la accesibilidad aplicables al diseño de sitios
Web publicadas por la misma organización:
1. Imágenes y animaciones: Use texto alternativo (atributo alt)
para describir la función de los elementos visuales.
2. Mapas de imagen: Use mapas de cliente y texto alternativo para
las zonas activas.
3. Multimedia: Facilite subtítulos y transcripción de los ficheros de
sonido, descripción de los vídeos y versiones accesibles en el caso
de usar formatos no accesibles.
4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea
fuera de contexto. Por ejemplo, no usar "pincha aquí".
5. Organización de las páginas: Use encabezados (H1, H2, H3,...),
listas y estructura consistente. Use Hojas de Estilo en Cascada
(CSS) para maquetación y estilo, donde sea posible.
6. Gráficos de datos: Resuma o use el atributo longdesc.
1
El portal de la Unión Europea
eEurope 2002: Accessibility of Public Web Sites and their Content
[http://europa.eu.int/information_society/eeurope/2002/news_library/pdf_files/communi
cation_accessibili ty_en.doc, Abril 2004]
2
W3C World Wide Web Consortium
Web Content Accessibility Guidelines
1.0 [http://www.w3.org/TR/WCAG10/,
Mayo 2004]
3
W3C World Wide Web Consortium
WAI Quick Tips Reference Card
[http://www.w3.org/WAI/References/QuickTips/, Mayo 2004]

7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el
caso de que las características activas no sean accesibles o no
tengan soporte.
8. Marcos (Frames): Etiquete con los atributos title o name.
9. Tablas: Realícelas de manera que se puedan leer línea a línea. Incluya
un resumen. Evite el uso de tablas para dar formato a las páginas.
10. Revise su trabajo: Valide el código HTML. Use herramientas de
evaluación y navegadores sólo-texto para verificar la
accesibilidad.
5.3 Sistemas de navegación usables: La navegabilidad
Como ya se ha comentado en diversas ocasiones, la usabilidad del
sistema de navegación o navegabilidad es un hecho de vital importancia
para el éxito o el fracaso de un sitio Web en Internet.
Los usuarios llegan a un site en busca de una determinada información y
esperan poder encontrar dicha información de una manera rápida,
sencilla y eficaz. Si no es así, es probable que tarden pocos segundos en
abandonar la página para continuar su búsqueda.
Para conseguir la navegabilidad es necesario que los sistemas de
navegación cumplan una serie de principios:
• Facilidad de aprendizaje: El sistema de navegación debe ser
fácilmente identificable y aprendibles. Por este motivo se han de
basar en la sencillez y claridad.
• Enlaces claros y concisos: El rótulo del enlace debe definir
claramente el contenido de la información con la que enlaza y ha
de ser lo más breve posible, ya que palabras muy largas o
compuestas dificultan la lectura.
• Consistencia: Los sistemas de navegación se deben agrupar en
unidades lógicas y deben mantener el mismo número de
elementos, las mismas etiquetas, el mismo orden, el mismo
formato y la misma posición dentro de la pantalla y a lo largo de
todo el site, con el fin de que el usuario pueda familiarizarse
rápidamente con su funcionamiento.
• Optimización del número de clics: Deben proporcionar un
camino rápido para acceder a cualquiera de las páginas del site.
No es recomendable que la navegación tenga mucha profundidad,
ya que a más niveles mayor será el riesgo de perder al usuario por
el camino.

• Ubicación del usuario: Los sistemas de navegación no solo
sirven para indicar al usuario dónde puede ir, sino que también
deben servir para indicarle dónde está. También es importante
que muestren al usuario las páginas que ya se han visitado para
evitar repeticiones inútiles.
• No deben estar basados exclusivamente en imágenes: Los
sistemas de navegación basados en imágenes son más lentos de
descargar y por consiguiente es aconsejable acompañar este tipo
de sistemas con enlaces de texto, para que los usuarios puedan
empezar a navegar sin necesidad de esperar a descargar todas las
imágenes. En cualquier caso se debe dotar a las imágenes del
atributo ALT que describirá la imagen en caso de no visualizarse.
• No deben tener muchos elementos: Los menús de navegación
no deberían sobrepasar los siete elementos, ya que estudios
realizados por G. Miller en 19564
sobre la memoria a corto plazo
demostraron que a partir de este número se complica el recuerdo
de los diferentes elementos. Si un menú ha de tener más de siete
elementos, se deberá jerarquizar en diferentes niveles aunque no
se debería sobrepasar los tres niveles de profundidad, ya que se
podría incumplir el principio de “Optimización de número de
clics”.
• Implementación de las tareas más comunes: Deben prever las
tareas más comunes que los usuarios puedan realizar en el site,
como avanzar, retroceder, inicio, etc.
Al igual que los principios de usabilidad expuestos anteriormente, los
principios de navegabilidad no son una serie de reglas que se deban
aplicar de manera estricta, sino más bien un conjunto de principios
básicos que es aconsejable que los menús de navegación cumplan.
Las tres variables de la usabilidad (usuarios específicos, objetivos
específicos y contexto de uso) también entran en juego en la
navegabilidad y por consiguiente un menú que no cumpla alguno de estos
principios básicos puede ser totalmente válido para un determinado
público, una determinada situación o para un objetivo específico. Por
ejemplo, el menú de navegación del portal multimedia de Amena
(www.amena.com/mms) no cumple con algunos de los principios básicos
de navegabilidad, pero en contrapartida es un menú muy atractivo para el
colectivo al cual se dirige. O difícilmente se podrían organizar los más de
8.000 productos del supermercado virtual de Caprabo
(www.capraboacasa.com), si el número de elementos del menú no
superara los siete y los tres niveles de profundidad.
4
Artículo: Miller, G. The Magical Number Seven, Plus or Minus Two: Some Limits on
Our Capacity for
Processing Information, 1956 - The Psychological Review 63.

5.4 La navegabilidad de los menús de navegación
En los apartados anteriores se han descrito los principios de usabilidad,
accesibilidad y navegabilidad de manera general. En este apartado se
describirá de manera específica las características de usabilidad de cada
uno de los menús de navegación descritos tratados en el capítulo 3
(Implementación de los menús. El formato).
Listas de opciones
Como ya se comentó en los capítulos anteriores, este formato de menú de
navegación posee unos indiscutibles beneficios por su claridad y simplicidad
y por ser uno de los primeros sistemas que se utilizó en Internet.
Los elementos más importantes en los que se basa este sistema son: el
etiquetaje, el color y la tipografía.
• El etiquetaje:
Está formado por la palabra o palabras que describen el contenido del
destino con el que enlazan; por este motivo debe ser lo más
descriptivo y representativo posible. Por tanto, se han de evitar los
términos ambiguos o los que no indican con exactitud qué es lo que
el usuario va encontrar al otro lado del enlace.
Las palabras compuestas o expresiones muy largas dificultan la
lectura, por lo que también se deben evitar. Además, el hecho de
utilizar expresiones muy largas puede provocar que una opción de un
menú de navegación ocupe varias líneas, lo que puede confundir al
usuario y hacerle pensar que se trata de varios enlaces diferentes.
Por otro lado, la etiqueta debe intentar avisar de características
especiales del enlace, como por ejemplo la descarga de un archivo en
formato PDF, la necesidad de ser usuario registrado, el volumen de
información que se va a descargar si el enlace linca con un archivo, etc.
• El color:
El color por omisión para los enlaces no visitados es el azul y
subrayado, así que, tal y como afirma Jacob Nielsen5
en el libro
“Usabilidad. Diseño de sitios Web”, si se respeta este estándar el
usuario rápidamente localizará cuáles son las zonas de navegación de
la página. Además, la utilización de un color de texto oscuro sobre un
fondo claro fomenta la legibilidad, leer un texto de color claro sobre
un fondo oscuro resulta mucho más difícil que lo contrario.
5
2000.

Esto no significa que siempre se deba respetar esta nomenclatura para
que las listas de opciones tengan una buena usabilidad. Lo realmente
importante en este aspecto es que los colores de los enlaces de las
listas sean diferentes del texto que no sea enlace.
También será de gran ayuda que estos enlaces cambien de tonalidad o
color cuando el usuario pasa el cursor sobre ellos. De esta manera,
facilitaremos al usuario el reconocimiento de la opción que se va a
seleccionar.
Ilustración 42: Lista de opciones con enlace resaltado
En la ilustración anterior se puede observar claramente cuál es el
enlace seleccionado gracias a un efecto al situar el cursor sobre él.
También se puede observar un globo de texto o título del vínculo con
más información sobre el enlace seleccionado (caja de color
amarillo). Estos textos que se visualizan al pasar el cursor sobre el
enlace son de gran utilidad para ampliar la información.
Hay que tener en cuenta que estos dos efectos descritos anteriormente
dependen directamente del uso del ratón por parte de usuario y por
consiguiente estas funciones pasarán desapercibidas para usuarios
que debido a deficiencias físicas accedan a Internet únicamente
mediante el teclado de sus ordenadores.
La ilustración anterior es un claro ejemplo de uso inapropiado de
enlaces en una lista de opciones, ya que el etiquetaje (TrackBacks,
PingBacks y Enlace) es ambiguo y poco esclarecedor de la
información que podremos encontrar detrás. Por otro lado, el globo
de texto no aporta información útil al usuario.
Otro hecho de vital importancia es la diferenciación de color para los
enlaces de páginas ya visitadas, lo que ayuda al usuario a saber qué
páginas ha visitado, para regresar de nuevo a ellas o para no provocar
repeticiones innecesarias.
Ilustración 43: Lista de opciones en Yahoo
En la imagen anterior se aprecia una lista de opciones en yahoo
(www.yahoo.es) donde se respetan los colores y formato por defecto
(azul para los enlaces no visitados y lila para ya visitados) lo que
facilita la navegación de los usuarios.

• La tipografía:
En cuanto a la tipografía existen una serie de principios recogidos por
Jacob Nielsen en su obra “Usabilidad. Diseño de sitios Web”6
que
conviene tener en cuenta para este tipo de menús de navegación.
Los tipos de letras que más cómodamente se leen en pantalla son los
tipos Sans-Serif, Arial y Verdana.
Estos tipos de letras se visualizan de una manera más nítida en
comparación con las fuentes Serif que son más recomendables para
documentos impresos. Los pequeños remates en los extremos de las
letras (tal y como se puede observar en la siguiente ilustración)
facilitan su lectura al conseguir que las letras sean más fácilmente
reconocibles sobre el papel, un soporte en el que se consigue una
definición tres veces superior al de una pantalla de ordenador.
Ilustración 44: Comparación entre fuente Serif y Arial
Otro punto a tener en cuenta es el tamaño del texto, que debe estar
entre 10 y 12 puntos, pero en ningún caso menor a 10 ya que se
podría dificultar la lectura del usuario. Por otro lado, es aconsejable
que el tamaño sea relativo y no absoluto para que los usuarios puedan
cambiarlo a sus necesidades mediante las opciones disponibles de los
navegadores.
Tampoco es aconsejable usar mayúsculas en los enlaces, ya que las
palabras en mayúsculas son menos fácilmente legibles que las
palabras en minúsculas.
El mecanismo de la lectura consiste en el reconocimiento de la forma
general de las palabras mediante las letras que la forman, no se
reconoce cada letra para luego unirlas sino que el ojo escanea la
forma global de cada palabra, con lo que las palabras escritas en
mayúsculas tienen menor legibilidad.
Este problema también ocurre con las palabras en cursiva, que son
menos legibles y por lo tanto menos recomendables.
Todas estas consideraciones sobre la usabilidad de las listas de opciones
son aplicables a todos aquellos menús que incluyan texto, ya sean
breadcrumbs, barras de imágenes, como cualquier tipo de menú
desplegable y por eso se deberán tener en cuenta en los siguientes
subapartados.
6
Libro: Nielse, J. Usabilidad. Diseño de sitios Web. Madrid, Ed. Pearson
Educación S.A., 2000.

Los Breadcrumbs
Como ya se comentó los breadcrumbs o migas de pan son un sistema
sencillo mediante el cual se muestra el camino en el que se encuentra la
página actual. Es decir, muestran un posible camino desde la Home hasta
una página en concreto que no tiene por qué coincidir con el camino
seguido por el usuario.
Es un sistema ampliamente utilizado como complemento a los sistemas
principales de navegación debido a su sencillez y el poco espacio que
ocupan en pantalla.
En primer lugar, hay que destacar que estos menús siempre presentan el
mismo formato: rótulos de textos, correspondientes a los títulos de las
páginas, separados por algún elemento que en la mayoría de casos se
representa mediante el símbolo “>”. Por consiguiente, todas las
especificaciones realizadas para las listas de opciones son aplicables a
este sistema de navegación.
El símbolo de separación entre las distintos elementos de un sistema de
breadcrumbs suele ser el símbolo “>” ya que denota una relación de
superioridad jerárquica entre los distintos elementos. Utilizar otros
símbolos como * ó – no sería aconsejable ya que estos denotan relación
de igualdad, tal y como se muestra en el siguiente ejemplo.
Portada > Página 1 > Página 2 > Página 3 >
Página actual. Portada * Página 1 * Página 2 *
Página 3 * Página actual. Portada - Página 1 -
Página 2 - Página 3 - Página actual.
Por otro lado, algunos estudios realizados demuestran que estos sistemas
son más utilizados cuando los usuarios profundizan más en la estructura
del sitio Web. Así pues, en los sistemas poco profundos (hasta tres
niveles) el porcentaje de uso solo llega al 4%. En cambio, este porcentaje
llega hasta el 15% en estructuras de más de 4 niveles.
Esto que indica que cuanto más profunda sea la posición del usuario
dentro de la estructura es mayor la probabilidad de error, de que el
usuario crea que ha seleccionado el camino incorrecto y de que tenga la
necesidad de volver a un punto anterior del camino correcto.
En resumen, los breadcrumbs son una herramienta simple pero eficaz de
reubicación que siempre deben acompañar a los sistemas de navegación
principales y son muy aconsejables para estructuras de información muy
amplias y profundas y poco claras. Además, también hay que remarcar
que se facilita la comprensión de la estructura de la información del site,
ya que el usuario puede ver las dependencias jerárquicas entre cada una
de las páginas que visita.

Barras de imágenes
La gran ventaja de estos sistemas estriba en el hecho de que permiten
crear interfaces y diseños visualmente más agradables al usuario. En
consecuencia este tipo de menús es utilizado en aquellos site donde el
aspecto visual es especialmente importante.
La usabilidad de las barras de imágenes viene definida por dos aspectos
fundamentales: la representatividad y el tamaño.
• La representatividad:
Unos de los primeros problemas que podemos encontrar en el uso de
este tipo de sistemas es que pueden pasar desapercibidos como meros
elementos de diseño decorativo, con lo que se estaría obligando al
usuario a “cazar los enlaces” de la página.
Pero uno de los puntos más delicados de estos sistemas es que en
muchas ocasiones los usuarios no entienden qué representan los
iconos que forman una determinada barra de imágenes. Además, hay
que tener en cuenta que los iconos no son siempre comprensibles
para personas con limitaciones psíquicas o pueden no ser accesibles a
personas con discapacidades visuales que utilizan lectores de
pantallas o simplemente utilizan navegadores no gráficos.
En primer lugar, se ha de tener en cuenta que a veces resulta difícil
encontrar imágenes que representen bien las ideas y que identifiquen
claramente qué es lo que el usuario va a encontrar detrás de ellas.
Ilustración 45: Barra de imágenes
Por ejemplo, en la ilustración anterior podemos observar una barra de
navegación de www.cruzroja.es implementada mediante iconos,
donde el usuario debe reflexionar antes de poder identificar que
representa cada uno de los enlaces, lo que implica una pérdida de
tiempo innecesaria.
En segundo lugar, los iconos no son universales lo cual quiere decir
que su interpretación estará en función de la visión subjetiva del
usuario, que vendrá determinada por elementos de carácter personal y
cultural y en cualquier caso no controlables por el diseñador.
Por consiguiente, los usuarios cometen más errores en el
reconocimiento de barras de imágenes compuestas por pequeños
iconos que en la utilización de listas de opciones compuestas por
texto.

Además, la utilización de estas barras implica un aprendizaje por
parte del usuario para poder reconocer y memorizar la función de
cada uno de los iconos de una determinada barra de navegación, que
se puede complicar de manera considerable si el número de
elementos es elevado.
Unas de las maneras con las que se intentan paliar estos
inconvenientes consiste en acompañar a los iconos con pequeños
textos descriptivos, que pueden ser tanto globos de texto como
pequeños rótulos.
Ilustración 46: Barra de imágenes con ayuda textual
En el caso de los globos de texto es necesario que el usuario
interactué con ellos para poder obtener más información, pero serán
de gran ayuda para las personas discapacitadas o que por cualquier
razón no puedan visualizar las imágenes. Por ejemplo, las personas
invidentes que naveguen con lectores de pantalla podrán, mediante
este texto alternativo, comprender el contenido de la imagen.
Además, como ya se ha descrito en las listas de opciones, este efecto
depende directamente del uso de ratón y pasará desapercibido para
usuarios que accedan a Internet exclusivamente a través del teclado.
Para el segundo formato (imagen acompañada de texto) se han de
aplicar las mismas consideraciones ya expuestas en las listas de
opciones pero además hay que tener en cuenta que estas etiquetas no
se muestran con la misma nitidez que el texto visualizado por los
navegadores, con lo que se puede dificultar su legibilidad.
Además, otro factor importante es que los iconos no son escalables,
lo que quiere decir que estos rótulos siempre tendrán el mismo
tamaño independientemente de la configuración de pantalla del
usuario, lo que puede provocar deficiencias en su visualización.
• El tamaño:
Otro de los aspectos fundamentales de este tipo de sistemas es que las
imágenes tardan más tiempo en descargarse debido a que su tamaño
es mayor y porque generan un mayor número de peticiones al
servidor (una por enlace en el supuesto de que los iconos sean de
tamaño pequeño).

Algunos estudios demuestran que los usuarios empiezan a interactuar
con las páginas antes de que estas se hayan descargado por completo.
Así pues, si las imágenes que forman los enlaces tardan en
visualizarse, los usuarios pueden sentirse frustrados al verse obligados
a largas esperas antes de poder empezar a navegar por el sitio Web.
Estudios de psicología cognitiva realizados por Robert B. Miller en
19687
demuestran que diez segundos es el límite para retener la
atención de una persona en espera, por lo que no se debería
sobrepasar este tiempo sin que el usuario pudiera empezar a
interactuar con el sistema.
Para solucionar este problema es aconsejable utilizar la etiqueta ALT
de lenguaje HTML, para visualizar un rótulo mientras no sea visible
la imagen. Esto permitirá al usuario identificar los enlaces sin
necesidad de visualizar las imágenes.
Como ya se comentó anteriormente, otra de las opciones que
permiten mejorar la usabilidad de estos sistemas consiste en agrupar
en una sola imagen todos los iconos que forman una barra de
imágenes y convertirla después en un mapa de navegación, con lo
que se consigue reducir el tiempo de transmisión de datos al ser
necesarias menos peticiones al servidor.
Existe una variante de las barras de imágenes que merecen una especial
atención, la barra de botones. Estas barras de botones están basadas en un
principio ampliamente conocido y utilizado por los diseñadores: las
metáforas. El uso de metáforas permite crear interfaces más eficientes, ya
que permiten ser usadas por comunidades de usuarios más diversas.
Las metáforas intentan copiar el funcionamiento y forma de componentes
cotidianos de la vida de los usuarios: ventanas, archivos, escritorios,
botones, pestañas, etc. De esta manera el aprendizaje de estos sistemas es
mucho mas rápido.
Todas las características descritas para las listas de opciones y barras de
imágenes son aplicables a estos sistemas de navegación.
La gran diferencia estriba en el hecho de que las barras de botones son
más fácilmente identificables por el usuario como áreas de navegación y
además el usuario ya sabe de antemano cual va a ser su comportamiento.
Por ejemplo, en la siguiente imagen podemos observar una barra de
botones para avanzar y retroceder por las páginas que forman el sitio
Web. Estos botones son más fácilmente reconocibles por el usuario que
los enlaces que hay justamente debajo, los cuales poseen la misma
funcionalidad.
7
Artículo: Miller, Robert B. Response time in man-computer conversational
transactions, 1968 - Proc. AFIPS Fall Joint Computer Conference Vol. 33.

Ilustración 47: Barra de botones
Por otro lado, estas barras de botones pueden estar dotadas de efectos
para enfatizar la acción de selección o de pulsación, con lo que el usuario
tendrá la percepción de respuesta inmediata por parte del sistema cuando
pulse sobre uno de los elementos del menú de navegación.
Sistemas de pestañas
Como ya se comentó en el capitulo 3 las pestañas, igual que las barras de
botones, son otro claro ejemplo de la utilización de metáforas en el
entorno Web. Los sistemas de pestañas imitan las pestañas que
sobresalen en un archivador de oficina, creando un sistema cómodo de
presentar información en un formato de página múltiple.
El usuario selecciona la página haciendo clic sobre la pestaña apropiada,
que muestra su contenido y queda resaltada de alguna manera.
Ilustración 48: Sistema de pestañas en Fnac
Los sistemas de pestañas son realmente una estrategia efectiva. En la
imagen anterior, que muestra el sistema de pestañas de Fnac, es obvio
para cualquier usuario saber en qué pestaña se encuentra ubicado, qué
información contiene y cómo cambiar a otra pestaña.
Las primeras pruebas de usabilidad que realizó Microsoft de este
interface revelaron que estos sistemas aumentaban la usabilidad de las
aplicaciones en más de un 30%.
Dado que este sistema es una variante de la barras de imágenes híbridas
(imágenes y texto) todas las características comentadas en los apartados
de las lista de opciones y de las barras de imágenes son aplicables a este
formato. Pero hay que hacer una especial atención a los siguientes
aspectos fundamentales:
• El etiquetado:
El etiquetado de las pestañas es de vital importancia en estos
sistemas, ya que debe ser claro y conciso y deben identificar
conceptos muy concretos: libros, música, etc. De lo contrario, si las
etiquetas son muy generales no se adaptarán a la metáfora del mundo
real que representan y el usuario puede sentirse confundido.

Por ejemplo, en muchos sitios Web que utilizan este sistema es fácil
encontrar una pestaña titula Home, Bienvenidos, Inicio, etc. Bajo este
nombre general se puede llegar a confundir al usuario ya que nos
estamos alejando del objeto real que representaba las pestañas
(compartimentos que clasifican sin ambigüedad la información).
• Color y forma:
En primer lugar, es aconsejable que la pestaña seleccionada quede
marcada de alguna manera: con un cambio de color, de tamaño o con
la sobreposición al resto de pestañas. En cualquier caso es muy
importante que el usuario sepa en qué sección se encuentra.
También es aconsejable que respeten la forma original de pestaña, ya
que en muchos sitios Web se ha diseñado de tal manera que
vagamente recuerdan la idea original.
• La metáfora:
En el capítulo 3 se explicó que se deben respetar las características
del elemento de la vida real que representan.
Así, en primer lugar, destacar que la inclusión de un elemento en una
pestaña lo excluye de clasificarlo en cualquiera de las otras pestañas.
Y en segundo lugar, que no debe existir conexión directa entre varias
pestañas. La única manera de pasar de una pestaña a otra (de una
sección a otra) es cliclando sobre la pestaña de destino.
Aunque el incumplimiento de estos requisitos puede llegar a
confundir al usuario, ya que no se está representando la realidad a la
que imita de una manera fehaciente, no siempre tiene porqué ser así.
Por ejemplo, imaginemos que en la Web del Fnac un usuario que ha
seleccionado la pestaña libros y que se encuentra en la sección de
libros de cocina ve un enlace directo hacia la pestaña de DVD
anunciando un curso de cocina. En este caso, aunque no se respeta la
metáfora, es poco probable que se cree confusión al usuario.
O imaginemos un usuario de un supermercado virtual que en la
sección de cocina preparada - pizzas, encuentre un enlace hacia la
sección de refrescos. Tampoco parece poco probable que se vaya a
causar algún problema en el modelo mental que el usuario tiene del
sistema de navegación.
En resumen, es importante que se respete el funcionamiento del objeto
que representan para que el sistema de pestañas no se convierta en una
simple barra de imágenes, pero como se ha visto en los ejemplos
anteriores esto tampoco ha de preocupar en exceso a los diseñadores.

Menús desplegables
Tal y como se describió en el capítulo 3, los menús desplegables son
utilizados para proporcionar diferentes opciones agrupadas en una lista y
que en un principio están ocultas al usuario. Sólo se mostrarán bajo
petición, normalmente cuando el internauta interactúa con alguna de las
opciones de la lista.
Estos menús presentan a los usuarios muchas opciones de navegación de
un modo compacto. Lo que en principio parece un simple menú se
desplega bajo petición del usuario para mostrar una ampliación del menú
inicial con submenús.
Por consiguiente, una de las principales ventajas de estos sistemas es que
permiten la posibilidad de compactar muchas opciones bajo simples
rótulos o títulos en una página, con el consecuente ahorro de espacio.
La tendencia mayoritaria de estos menús es que sean de tipo texto, en
pocas ocasiones se encuentra este tipo de sistemas implementados
exclusivamente de manera gráfica. Así, todas las consideraciones ya
expuestas en las listas de opciones son aplicables a este tipo de menú.
Por otro lado, la usabilidad de estos sistemas de navegación se está
cuestionando ampliamente por autores como Jacob Nielsen. En el
artículo “Drop-Down Menus: Use Sparingly”8
afirma que este tipo de
sistemas aportan más problemas que beneficios y, como ya se comentó
en el capítulo cuarto, algunos estudios afirman que el 52% de los
usuarios tiene dificultades en utilizar este tipo de menús.
También existe un problema asociado a estos menús que cabe destacar.
Como ya se ha mencionado estos sistemas permiten crear sistemas de
navegación que agrupan gran cantidad de opciones lo que los hace muy
recomendados para sitios Web con gran volumen de información. Los
sitios Web con grandes volúmenes de información no son usables debido
al hecho de que los usuarios pueden sentirse apabullados por la gran
cantidad de información que se les ofrece, por la cantidad de opciones
disponibles dentro de los menús y submenús y por la excesiva
categorización de la estructura de la información.
• Menús desplegables:
Este tipo de menú, que suele estar programado en Javascript o HTML
dinámico (con capas), intenta imitar a los menús desplegables de las
aplicaciones de entornos gráficos.
8
Useit.com: Jakob Nielsen's Website Drop-Down
Menus: Use Sparingly
[http://www.useit.com/alertbox/20001112.html,
Mayo 2004]

Este tipo de sistemas presenta dos principales inconvenientes. En
primer lugar, suelen desaparecer en cuanto el puntero deja de
sobrevolarlos, lo que puede llevar a confundir al usuario. Todos
hemos sufrido la frustración de intentar abrir la última opción de un
menú de este tipo y ver como repentinamente el conjunto de opciones
desaparece de nuestra vista porque hemos sobrepasado el área
sensible de la capa (caja con la lista de opciones).
En segundo lugar, como todos los menús de esta familia, esconden
información al usuario. Se ha de interactuar primero con ellos para
poder ver la lista de una determina opción, lo que provoca que a
simple vista no nos podamos hacer una idea clara de todas las
opciones disponibles.
• Listas expandibles:
Al igual que los menús deplegables, no permiten que el usuario
pueda crearse una idea de todas las opciones que tiene a su alcance.
Además, el funcionamiento habitual de estos menús implica que
cuando el usuario clica sobre un rótulo aparecen todas las opciones
correspondientes pero al mismo tiempo se cierra cualquier otro
submenú que hubiera abierto en ese momento. Este baile de opciones
a menudo provoca confusión en el usuario, que ve como las opciones
se desplazan por la pantalla.
• Menús pop-up:
El principal inconveniente de este tipo de sistemas estriba en el hecho
de que los diseñadores los utilizan con diferentes propósitos y por
consiguiente crean confusión y problemas de utilización, ya que los
usuarios no pueden intuir cómo va a reaccionar el menú cuando
interactúen con él.
Además hay otra característica de vital importancia. En muchas
ocasiones y debido a la cantidad de opciones que se agrupan bajo cada
opción, es necesario dotar a estos sistemas de barras de deslizamiento
verticales, con lo que es imposible que el usuario pueda visualizar todas
las opciones de un solo vistazo. Es necesario realizar un lento
desplazamiento vertical para que el usuario pueda elegir la opción que
más le interese.

Semana 13 y 14
5.5 La usabilidad de la tecnología Web
Hasta este punto se ha descrito principalmente la usabilidad y
accesibilidad de los diferentes menús de navegación en función de su
diseño gráfico.
Todavía resta un factor determinante que consiste en la tecnología Web
que se puede utilizar para implementar cada uno de estos tipos de
menús.
Por tecnología Web se entienden los distintos lenguajes de etiquetas,
lenguajes de programación, tecnología multimedia, etc. que permiten
confeccionar los diferentes menús de navegación y que permiten a los
navegadores visualizar las diferentes implementaciones de los sistemas
de navegación.
A parte del HTML, las principales tecnologías Web de implementación
de los menús de navegación se pueden clasificar en 4 tipos diferentes:
• Applets Java y Javascript
• HTML dinámico
• Marcos o Frames
• Macromedia Flash
La utilización de uno u otro sistema para la implementación de un menú
tendrá consecuencias de gran impacto sobre el modo en el que
posteriormente un usuario interactuará con dicho menú.
Así pues, a todos los efectos no tendrá las mismas consecuencias
implementar un menú en simple HTML que utilizar un lenguaje
multimedia como Flash; no será lo mismo usar Marcos que funciones
Javascript, etc.
Applets Java y Javascript
Java es un lenguaje de programación implementado por la
empresa Sun Microsystem a principios de 1995.
La peculiaridad de este lenguaje de programación estriba en el
hecho de que los programadores no generan como producto
final un fichero directamente ejecutable. Lo que significa que
el programa obtenido, para poder ser ejecutado, necesita de un
“ejecutador” denominado intérprete de Java que compilará y pondrá en
marcha el programa en el momento de la ejecución.
En consecuencia, los programas en Java pueden ser ejecutados en
cualquier ordenador que disponga de un intérprete de Java
independientemente de la plataforma o sistema operativo que utilicen, ya
que será el interprete de Java el encargado de generar un código
ejecutable para una determinada máquina en cuestión.

Los applets Java son pequeños programas implementados en Java que no
poseen código máquina y por tanto pueden transmitirse a través de
Internet y ejecutarse en cualquier tipo de ordenador siempre y cuando
tengan instalado su correspondiente intérprete de Java.
En el entorno Web estos applets Java se pueden dividir en dos grandes
categorías:
• Applets de funcionalidad: Son aplicaciones independientes que
suelen manipular datos, como por ejemplo permitir a los usuarios
mediante un entorno Web acceder y manipular bases de datos.
Ilustración 49: Applets Java en Serviticket.es (www.serviticket.es)
• Applets de contenido: Permiten generar menús de navegación
elaborados, como por ejemplo listas expandibles que expanden o
contraen una determinada rama jerárquica como resultado de un
evento, que normalmente es un clic del ratón. Otros ejemplos podrían
ser un rotativo de titulares de noticias o cualquier otro dispositivo que
muestre información de una estructura de datos externa a la propia
página Web.
En cuanto a la usabilidad de esta tecnología hay que tener en cuenta dos
factores claves:
• Lentitud:
Como ya se ha comentado, la ejecución de un applet Java conlleva
una serie de procesos, realizados por el intérprete Java para adaptar la
mini-aplicación a las características de la máquina sobre la que se
está ejecutando.

Evidentemente, esta serie de preparativos conlleva un tiempo de
demora desde que el usuario descarga el applet hasta que este
empieza a visualizarse en pantalla.
Como ya se comentó en el aparatado sobre la usabilidad de las barras
de imágenes en este mismo capítulo, los tiempos de demora
superiores a 10 segundos pueden causar frustración en el usurario, ya
que este es el límite de tiempo máximo para retener la atención de
una persona en estado de espera, según los estudios realizados por
Rober B. Miller en 19689
.
Por consiguiente, para este tipo de sistemas se hacen indispensables
los indicadores de progreso en forma de barras porcentuales, para
informar al usuario de la duración estimada del proceso.
• Estandarización:
El interprete Java necesario para poder ejecutar estos applets no es un
componente básico de los principales sistemas operativos que venga
instalado por defecto.
Además, Microsoft eliminó este componente de las últimas versiones del
Internet Explorer, con lo que el usuario tiene que descargarse este plug-
in adicional para poder visualizar correctamente estas mini-aplicaciones.
Por lo tanto, es muy importante que los diseñadores que incluyan
applets Java o cualquier otro lenguaje de programación se aseguren
de que las páginas son accesibles y utilizables cuando el usuario no
dispone de los intérpretes correspondientes.
Si se trata de menús de navegación será imprescindible que se ofrezca
accesibilidad a las páginas del sitio Web de una manera alternativa, que
permita a los usuarios acceder a las distintas secciones del sitio aunque
no puedan visualizar correctamente los applets Java de navegación.
Podríamos decir que el Javascript es el hermano pequeño del Java. Los
Scripts son pequeños fragmentos de código integrados en el mismo
código HTML de las páginas Web que el navegador interpreta para
realizar tareas determinadas.
La primera versión de Javascript apareció con Netscape, que lo introdujo
a partir de la versión 2.0.
La única razón de ser de Javascript son las páginas Web, ya que no
pueden construirse programas independientes con Javascript. Sólo
pueden escribirse Scripts que funcionarán interpretados y ejecutados por
un explorador.
9
Artículo:: Miller, Robert B. Response time in man-computer conversational
transactions, 1968 - Proc. AFIPS Fall Joint Computer Conference Vol. 33.

Por consiguiente una de las características fundamentales de estos Scripts
es la dependencia con el navegador que los interpreta. Y aquí nos
encontramos con su principal inconveniente ya que no todos los
exploradores interpretan de la misma forma el código Javascript.
Puede ocurrir que un guión Javascript que funciona bien en un navegador
no se visualice correctamente en otro navegador diferente. Por ejemplo,
un Script que funciona correctamente en Internet Explorer no tiene por
que funcionar con Netscape y viceversa.
Incluso puede darse el caso que un Script que funciona correctamente en
una versión determinada de un navegador no funcione para otras
versiones del mismo navegador. Por ejemplo, muchos de los Script que
funcionaban correctamente con Netscape no son compatibles para la
última versión de este mismo navegador (Netscape 6).
Así, los diseñadores deben utilizar Scripts universalmente aceptados. Es
decir, código Javascript que ha sido verificado en diferentes plataformas
y diferentes navegadores para asegurarse la máxima compatibilidad
posible.
Además de este inconveniente, hay que añadir que aproximadamente el
10% de los usuaiors tienen desactivado el Javascript en sus navegadores,
ya sea por motivos de seguridad y rapidez de navegación o simplemente
por desconocimiento.
Por todo esto y al igual que con los applets Java, es aconsejable que las
páginas Web sean accesibles también a los usuarios que han desactivado
el Javascript o que no pueden visualizarlo por motivos de
incompatibilidad mediante páginas con contenido alternativo, sobretodo
si los elementos implementados mediante Javascript son sistemas de
navegación.
HTML dinámico
El HTML dinámico es la combinación de HTML 4, Javascript y CSS
(Hojas de estilo en cascada) para conseguir efectos dinámicos en las
páginas Web y se empezó a implementar a partir de la versión 4 de
Netscape.
El HTML dinámico permite situar ciertos contenidos en unos
contenedores denominados capas (layers). Cada una de estas capas tiene
sus propios atributos de posición (coordenadas dentro de la página),
orden entre las diferentes capas, visibilidad y acciones asociadas en
función de eventos.

Además, estas capas pueden estar superpuestas unas a otras lo cual, junto
al control de la visibilidad y a la asociación de eventos, permite generar
determinados formatos de menús despleglables que se comportan como
los menús de las aplicaciones en entorno gráfico, tal y como se describió
en el capítulo 3.
Ilustración 50: Estructura de capas en una página Web
En la anterior imagen podemos apreciar la estructura de un menú de
navegación con cuatro opciones disponibles y cuatro capas,
correspondientes a cada una de las opciones del menú que en principio
están ocultas. Al clicar sobre alguna de las opciones se modifica la
visibilidad de la capa correspondiente y aparece la lista de opciones.
Ilustración 51: Menú de navegación implementado en DHTML con
capas, en la página oficial de Bill Gates (www.microsoft.com/billgates)
Podríamos decir que el DTHML dinámico y el Javascript son sistemas
gemelos, en cuanto a usabilidad y accesibilidad se refiere.
Por un lado, el DHTML dinámico, igual que el Javascript, no necesita la
instalación de ningún plug-in adicional para su correcto funcionamiento.
El código se descarga conjuntamente con el código HTML de la página y
es el propio navegador el encargado de interpretar las instrucciones, lo
que se traduce en una mayor velocidad de descarga y de ejecución.

Pero en contrapartida y otra vez al igual que el Javascript, no todos los
navegadores interpretan de la misma manera el DHTML dinámico y así
puede ocurrir que código HTML dinámico que funciona correctamente
en un navegador no se visualice en otro navegador o plataforma
diferente.
Por consiguiente, el código HTML dinámico utilizado debe ser
universalmente aceptado, verificado y testado para el mayor número de
navegadores y plataformas posible o al menos que sean mínimamente
accesibles y usables, aunque no puedan reproducirse correctamente los
efectos avanzados implementados mediante código HTML dinámico. En
el caso que de esto no fuera posible es aconsejable ofrecer diseños
alternativos que ofrezcan la misma información.
Marcos o Frames
Los Marcos es una técnica implementada en HTML que permite
subdividir el espacio del navegador en distintos fragmentos
independientes entre sí. En cada espacio se puede colocar una página
Web diferente con sus propias barras de desplazamiento verticales y
horizontales.
Así pues, la implementación de marcos está formada, por un lado, por
una página que contiene la declaración de los marcos y por otro lado, por
tantas páginas como divisiones se hayan definido.
Pero una de sus características más importantes estriba en el hecho que
pulsando un enlace situado en un Frame, se puede cargar una página
determinada en otro Frame.
Este hecho es lo que ha convertido a los Frames en una herramienta muy
utilizada durante una época para generar menús de navegación fijos,
permitiendo crear un menú de navegación situado en un Frame y cargar
los enlaces de dicho menú en otro Frame diferente de la misma pantalla.
De esta manera, se consigue fijar un menú de navegación dentro de una
página Web e ir cargando los distintas páginas dentro de otro Frame.
Ilustración 52: Ejemplo de marcos

En la ilustración anterior podemos observar un típico ejemplo de
distribución de marcos: Un marco superior que funciona como cabecera,
un marco izquierdo donde se ubica el sistema de navegación y un marco
central donde se disponen los contenidos.
Ilustración 53: Página implementada mediante Frames
(www.terra.es/personal8/asesoria_decara)
De esta manera, algunos frames, incluido el menú de navegación, no se
deberán recargar en cada una de las páginas que visite el usuario si no
que solo se cargarán en el primer acceso, ya que a partir de ese momento
permanecerán fijos en pantalla independientemente de las páginas que se
visiten.
Este hecho proporciona al sistema una serie de ventajas indiscutibles:
• La navegación es más rápida al no tener que recargar fragmentos del
site en cada uno de los accesos que realiza el usuario.
• Permiten homogenizar fácilmente el diseño y mantener una misma
identidad a lo largo del site, ya que el usuario aprecia una serie de
bloques fijos que se repiten constantemente a lo largo de todo el sitio
Web.
• Facilita el aprendizaje y utilización de la página Web y de los
sistemas de navegación por parte del usuario.
• Facilita la creación del site a los diseñadores, al no tener que repetir
fragmentos de código en cada una de las páginas.

Pero a pesar de estas ventajas, desde hace algún tiempo se viene
cuestionando ampliamente el uso de marcos debido a algunos de los
inconvenientes que presentan, en cuanto a usabilidad y accesibilidad se
refiere:
• Hay que tener en cuenta que el lenguaje HTML se creó con el fin de
dotar a la información de una estructura lógica. La representación de
esta estructura estará en función del dispositivo que se utilice. La
técnica de los frames rompe este esquema, ya que no es información
lógica sino información de representación (no dice qué es cada
elemento sino dónde debe situarse en la pantalla) lo que solo tiene
sentido para navegadores gráficos ya que para navegadores textuales,
sintetizadores de voz, motores de búsqueda, etc. este tipo de
documentos son difícilmente accesibles.
• Algunos sintetizadores de voz que utilizan las personas invidentes
para acceder a la Web, no identifican correctamente la presencia de
frames. En este caso, es imprescindible que los títulos de los marcos
sean significativos y que identifiquen claramente la función que
cumplen para poder entender la estructura de los marcos, aún sin ver
su distribución en la pantalla
• Muchos navegadores no los soportan, bien porque son navegadores
antiguos (los frames fueron implementados a partir de la versión 2.0
de Netscape), bien porque no son navegadores gráficos.
• El espacio para mostrar los contenidos de la página queda reducido a
espacios más pequeños, sobre todo en resoluciones de pantalla
antiguas de 640x480 píxeles o dispositivos portátiles como PDA o
móviles.
• Obligan a los usuarios a entrar en los site por la página de definición
de los marcos. De otra manera, el usuario puede llegar directamente a
una página de contenidos sin los correspondientes marcos de
navegación o de información necesaria para identificar el site. Este
caso se da frecuentemente si el usuario accede desde un buscador, por
lo que las páginas con frames tienen una promoción más limitada ya
que muchos motores de búsqueda no los reconocen correctamente.
• Los bookmarks (favoritos) no funcionan correctamente, ya que la url
que se muestra en la barra del navegador de cualquiera de las páginas
incluidas en un sitio Web con marcos, siempre es la misma y
corresponde a la dirección de la página de definición de los marcos.
Por consiguiente, tampoco se pueden crear enlaces a páginas
concretas desde otros sitios Web.
• Puede que el botón de atrás del navegador se comporte de manera
inesperada, especialmente en navegadores antiguos.

• Si queremos actualizar el contenido de varios frames
simultáneamente deberemos utilizar funciones Javascript con el
inconveniente que esta técnica conlleva, como ya se describió
anteriormente en este mismo capítulo.
• Muchos navegadores no imprimen correctamente páginas Web
formadas por diversos marcos. En una página formada por marcos es
habitual que el comando imprimir imprima únicamente el marco
activo.
En resumen, los marcos que en principio parecen un buen sistema
conllevan una serie de inconvenientes difícilmente salvables por los
usuarios. Por consiguiente deben ser utilizados con mucha discreción.
En cualquier caso, si se han de utilizar es muy aconsejable incluir en la
página de definición de los marcos la etiqueta <NOFRAME> mediante la
cual se podrán generar contenidos alternativos para todos los
navegadores que no soportan este sistema . Por ejemplo, estos contenidos
alternativos pueden estar constituidos por enlaces a las páginas que se
muestran en cada uno de los frames.
Macromedia Flash
Flash es una herramienta avanzada para desarrollar contenidos
multimedia enfocados a Internet. Es una aplicación (Macromedia Flash)
que permite generar ficheros con avanzadas características multimedia
como animación, audio, interactividad, etc.
Para poder visualizar estos ficheros flash, es necesario que el usuario
tenga instalado un plug-in en el navegador: un pequeño programa que
una vez instalado en el ordenador hace de intérprete de estos ficheros.
Según datos de un estudio realizado por la propia Macromedia10
, las
estadísticas demuestran que el 98% de los usuarios tienen instalado este
intérprete y por consiguiente su uso no representa un grave problema de
incompatibilidad.
Una de las principales características del Flash es que utiliza gráficos
vectoriales para crear animaciones. Estos gráficos vectoriales están
formados por líneas y curvas llamadas vectores, que permiten que los
ficheros en este formato se descarguen rápidamente, ya que ocupan muy
poco espacio. Además se pueden escalar (cambiar el tamaño de la
presentación Flash) sin aumentar el tamaño del fichero generado y
conseguir así unos resultados ciertamente espectaculares.
10
Macromedia
Macromedia Flash Player Statistics
[http://www.macromedia.com/software/player_census/flashplayer/, Junio 2004]

Hoy en día Flash se ha convertido en un estándar y los diseñadores de
páginas Web lo utilizan para crear animaciones y todo tipo de
presentaciones para la Web. Evidentemente, también es utilizado para
crear sistemas de navegación con deslumbrantes gráficos y
espectaculares efectos dinámicos.
Ilustración 54: Calendario implementado en Flash (www.serviticket.com)
En los últimos años se ha empezado a cuestionar ampliamente la
usabilidad y accesibilidad de este sistema por diferentes autores. Jacob
Nielsen ha afirmado que el 99% de los sitios Web que utilizan este
sistemas son malos11
.
En el artículo “Flash: 99% malo”, Nielsen afirma que la tecnología Flash
desmejora los sitios Web por tres razones:
• Alienta el abuso del diseño
• Rompe con los principios de la Web.
• Distrae la atención de los valores primordiales del sito.
En cualquier caso, si un diseñador decide utilizar este tipo de formato
para generar pequeñas “películas”, presentaciones o menús de
navegación, debe tener en cuenta los siguientes aspectos:
11
Useit.com: Jakob Nielsen's Website Flash: 99%
Bad
[http://www.useit.com/alertbox/20001029.html,
Junio 2004]

• Se debe utilizar la última versión de este software (Macromedia Flash
MX) que incorpora nuevas funcionalidades en cuanto accesibilidad se
refiere y que permite generar contenido accesible por sintetizadores
de voz y accesible exclusivamente a través del teclado.
• Se debe utilizar también la etiqueta ALT para incorporar texto
descriptivo para este tipo de objetos, lo que permitirá a los usuarios
que no puedan acceder a este tipo de información hacerse una idea de
los contenidos.
• El tamaño de las películas debe ser el mínimo posible para no
penalizar los tiempos de descarga. En el caso de incluir objetos muy
pesados se deberá indicar con una barra el proceso de carga.
• Los contenidos de una presentación Flash no se indexarán
correctamente por los motores de búsqueda, debido al hecho de que
los buscadores no pueden acceder a los contenidos de un objeto Flash
y por consiguiente, la promoción de la página Web será más limitada.

Semana 15 y 16
¿Qué es un sitemap?
Un sitemap (también conocido como mapa del sitio web, mapa del sitio o mapa web) es un
archivo que presenta la estructura jerarquizada de todas las subpáginas que componen una
web, es decir, proporciona una visión de conjunto de esta. Imaginemos por un momento la
estructura de una web simple: cada uno de los documentos HTML está guardado en
carpetas diferentes y se conectan entre sí mediante hiperenlaces. Todo ello se deposita en el
espacio web. En el mapa del sitio las páginas se indican junto a sus URL correspondientes.
En los primeros días de la World Wide Web, el mapa web servía para facilitar la
navegación. En muchas ocasiones se intercalaban como un marco adicional al contenido
principal, permitiendo a los usuarios pasar de una página a otra sin tener que clicar en los
hiperenlaces individuales. Pero con el tiempo, la navegación se ha vuelto mucho más
elegante, aunque no por ello los sitemaps han perdido su legitimidad, y es que, además de
aumentar la usabilidad de la web, permiten a los buscadores acceder a su contenido.
Comparativa: XML vs. HTML
Se pueden distinguir principalmente dos tipos diferentes de sitemaps dependiendo de si
presentan un formato XML o HTML. Se recurrirá a los sitemaps HTML si se desea que los
usuarios tengan acceso a los mapas web. En este caso, el mapa del sitio constituirá un
documento más de la web y, como tal, podrá integrarse en la estructura web igual que
cualquier otra página HTML. Por su parte, los sitemaps XML están pensados para los
buscadores. XML, al igual que HTML, es un lenguaje de marcado, aunque con muchas
más funciones.
¿Cuál de ellos habría que utilizar? Lo cierto es que ambos presentan ventajas e
inconvenientes. Un archivo de navegación en formato HTML es de utilidad para los
visitantes, pues los enlaces les permiten orientarse en una web cuando buscan algún
resultado. El mapa del sitio acompaña a otros componentes de la web, por ejemplo, la
función de búsqueda o la barra de navegación, pensados todos ellos para mejorar la
experiencia del usuario. Por tanto, se trata de un elemento adicional que eleva la usabilidad
de la web. Eso sí, a día de hoy ya prácticamente no se incluyen como marco, sino que se
ponen a disposición del usuario mediante un enlace en el encabezado o el pie de la página.
Un mapa web escrito en lenguaje XML puede entregarse a la Google Search Console con
el objetivo de dar al buscador un mayor entendimiento de toda la web. Además, con este
lenguaje es posible crear sitemaps de vídeos y es que a Google y al resto de buscadores les
resulta muy difícil leer el contenido de los archivos de vídeo, motivo por el que dependen
de la información indicada en los metadatos. Si se quiere que Google integre en la
búsqueda de vídeos todos los vídeos que están incluidos en la propia web, es necesario
crear un sitemap de vídeo. Este se trata de un archivo XML con información de cada uno

de los vídeos de la página: el título y la descripción de los archivos de vídeo, el URL de
la subpágina en la que se encuentra, el enlace a las miniaturas y la ubicación del
reproductor de vídeo utilizado. Con las imágenes se sigue el mismo proceso.
Como webmaster no es obligatorio decantarse por un formato u otro, pues es posible
trabajar con ambos al mismo tiempo, ofreciendo así los mejores resultados tanto para los
usuarios como para las arañas de los buscadores. Además, aunque el sitemap XML está
especialmente pensado para los motores de búsqueda, los buscadores recurren también a
los mapas web de HTML, pues presentan a las arañas todas las páginas de una web.
Los sitemaps y SEO
Los sitemaps desempeñan un papel muy importante en la optimización para los motores de
búsqueda. ¿El motivo? Los buscadores permiten que los programas (arañas o rastreadores
web) examinen Internet para poder indexarlo y organizarlo de la mejor forma posible.
Cuando este tipo de programa rastrea una web, sigue los enlaces internos para conocer el
contenido, pero no se garantiza que sea capaz de llegar a cada una de las subpáginas, más
aún si se trata de una web muy extensa. Los sitemaps XML o HTML presentan a la araña
del buscador el índice de una web con todas las subpáginas, facilitando la indexación.
Las webs que no tienen una estructura con páginas correctamente enlazadas impiden a la
araña de Google acceder a todo su contenido. Por ello, un sitemap que contenga los enlaces
de cada una de las subpáginas es de gran utilidad en estos casos. Aun así, Google no
garantiza que la araña tenga en cuenta cada subpágina, aunque la probabilidad de que lo
haga es sin duda mucho mayor. Esto ocurre también cuando una web es relativamente
nueva y aún no hay enlaces externos que hagan referencia a ella.
Un sitemap XML ofrece a los buscadores información adicional de la página en
cuestión: la fecha de creación, la frecuencia con la que se edita, la relación con el resto de
páginas y la relevancia del contenido con respecto a la web completa.
Aunque normalmente se indica que un sitemap HTML está orientado hacia los usuarios y
su homólogo en formato XML a los buscadores, ambos son importantes en el
posicionamiento en los buscadores. Los sitemaps en formato HTML también influyen en
el ranking de Google, pues, cuando se rastrea la web, también se tienen en cuenta estos
documentos. Sin contar que, para establecer la posición de una web en los resultados de
Google, el buscador valora su usabilidad y, como ya se ha dicho, los mapas de sitio en
HTML son un elemento que facilita la navegación por la web y, por tanto, aumenta su
valor.
Cómo crear un sitemap
La creación del mapa de una web es muy sencilla, más si se utiliza un generador de
sitemaps. En función del formato que se desea aplicar, el procedimiento varía. Los
sitemaps en HTML son, en principio, muy fáciles de crear, pues solo requiere que el
usuario tenga algunos conocimientos básicos de HTML, aunque son indispensables
aquellos relativos a cómo marcar correctamente los enlaces. Para ello, basta con utilizar el
atributo href, el cual permite crear un listado de enlaces. No obstante, en la práctica, los
webmasters suelen hacer un esfuerzo mayor para crear sitemaps y, por ejemplo, adaptan su
diseño al del resto de la web.

<li class="lpage"><a href="http://one-test.website/" title="Theme Preview
– Previewing Another WordPress Blog">Theme Preview – Previewing
Another WordPress Blog</a></li>
Theme Preview – Previewing Another WordPress Blog
<li class="lpage"><a href="http://one-test.website/about-us" title="About
us – Theme Preview">About us – Theme Preview</a></li>
<li class="lpage"><a href="http://one-test.website/our-projects"
title="Our Projects – Theme Preview">Our Projects – Theme
Preview</a></li>
<li class="lpage"><a href="http://one-test.website/sample-page"
title="Sample Page – Theme Preview">Sample Page – Theme
Preview</a></li>
<li class="lpage"><a href="http://one-test.website/shop" title="Products
– Theme Preview">Products – Theme Preview</a></li>
La creación de los archivos en formato XML es algo más compleja: aquí se inicia el mapa
del sitio con una etiqueta <urlset>, donde se indica el protocolo estándar. A continuación,
se incluyen tantas etiquetas <url> como enlaces se quieran escribir en el sitemap, si bien el
enlace a la subpágina en sí mismo se encierra en una etiqueta <loc>. Mientras que estos
datos son obligatorios, se pueden incluir de forma opcional las siguientes etiquetas:
<changefreq> (frecuencia de edición), <lastmode> (fecha del último cambio) o
<priority> (importancia de la página).
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"></urlset>
<url></url>
<loc>http://one-test.website/</loc>
<lastmod>2018-03-23T14:32:21+00:00</lastmod>
<priority>1.00</priority>
<url></url>
<loc>http://one-test.website/about-us</loc>
<lastmod>2018-03-23T14:32:21+00:00</lastmod>
Quien quiera que el proceso sea aún más sencillo, puede evitar escribir el mapa del sitio a
mano utilizando un generador de sitemaps. Tras introducir el URL principal de la web, el
generador de sitemaps rastrea la web completa y crea un índice con todas las páginas que la
componen. Estos servicios web están disponibles tanto para HTML como para XML e
incluso algunos de ellos son capaces de crear directamente distintos tipos de mapas web.
En algunos sistemas de gestión de contenido como WordPress los usuarios pueden recurrir
a plugins específicos, pensados para crear los sitemaps de esa web.
Recomendaciones de Google para sitemaps
Aunque la apariencia del documento de navegación puede determinarse con bastante
libertad, Google establece algunas condiciones para los sitemaps que hay que respetar si
con ellos se pretende mejorar el ranking de búsqueda de la web. Un mapa web tiene que
estar codificado en UTF-8, no ha de contener más de 50 000 URL y no debe superar los 50
MB. Este límite de tamaño es aplicable a los archivos no comprimidos, por lo que si estos
se pasan de los MB establecidos, se puede optar por la compresión para reducir el tamaño.
En caso de que se trate de una web muy extensa, Google propone crear varios mapas de
sitio. Al finalizar, se crea un archivo de índice que enlace a todos los sitemaps y pueda
mostrarse a los buscadores.
Consejo

No es obligatorio incluir todas las subpáginas de una web en el sitemap. En el caso
de aquellas páginas a las que se puede acceder a través de diferentes URL, es
posible indicar solo uno de ellos (por ejemplo, aquellas que tienen el mismo
contenido pero han sido diseñadas para distintos dispositivos). Se indican solo las
llamadas páginas canónicas con las que Google debe trabajar.
Finalmente, existen dos posibilidades para que Google conozca el sitemap. Por un lado, se
puede cargar el archivo directamente en la Google Console, y, por el otro, se puede añadir
un enlace al archivo en el robots.txt. Hay que tener en cuenta que el archivo de texto está
concretamente diseñado para buscadores y las arañas al rastrear acceden primero a él. Con
un enlace al mapa del sitio en el servidor, el rastreador sabe dónde tiene que buscar.
Cómo crear un mapa de sitio
El mapa de sitio de un sitio web es una de las herramientas más importantes para ayudar a
aumentar el tráfico hacia tu sitio. Registrar un buen y efectivo mapa de sitio en los motores
de búsqueda aumenta enormemente las posibilidades de que el contenido de tu sitio
aparezca en las búsquedas relevantes. Si estás intentando ganar dinero con tu sitio web,
tómate unos minutos para crear y registrar hoy mismo un mapa de sitio. Esta guía te
mostrará cómo hacerlo.
Método 1
Construye tu propio mapa de sitio
1. Crea un documento nuevo en un editor de texto. El editor debe trabajar con texto
simple, como el Bloc de notas de Windows o TextEdit en Mac. Este método es el
más apropiado para los sitios pequeños, ya que tendrás que ingresar cada página
manualmente.
2. Crea la plantilla para tu mapa de sitio. Pega lo siguiente en tu documento de
texto. Los mapas de sitio básicos son archivos XML que se envían a los motores de
búsqueda para que puedan leer más fácilmente tu sitio. Al usar este formato, puedes
enumerar rápidamente todas las páginas de tu sitio:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.ejemplo.com/</loc>
</url>
<url>
<loc>http://www.ejemplo.com/pagina1</loc>
<lastmod>YYYY-MM-DD</lastmod>
<changefreq>always/hourly/daily/weekly/monthly/yearly/never</change
freq>
</url>
<url>
</url>
<url>
</url>

</urlset>
3. Reemplaza el <loc> de ejemplo con tus URLs. Visita tu sitio con un navegador y
pasa por cada enlace, copiando las URLs de la barra de direcciones del navegador,
y pegándolas en la plantilla. Si tienes más páginas que espacio en la plantilla,
simplemente copia una sección “<url>” en la parte inferior tantas veces como lo
necesites.
4. Usa las etiquetas opcionales. En la primera entrada del ejemplo, verás varias
etiquetas que pueden añadirse a cada URL, son opcionales pero facilitan la
exploración de los robots del motor de búsqueda.
o La etiqueta <lastmod> contiene la fecha en la que se modificó la página por
última vez.
o La etiqueta <changefreq> muestra qué tan seguido se actualiza la página.
'Always' significa quese actualiza cada vez que un usuario la visita, mientras
que 'Never' significa que está archivada.
o La etiqueta <priority> te permite clasificar la importancia de cada una de las
páginas del sitio en relación a las demás páginas. Este valor puede ir de 0.0
a 1.0. La prioridad por defecto de todas las páginas es 0.5.
5. Guarda el archivo en formato XML. Haz clic en Archivo y seleciona Guardar
como. Usa el menú “Guardar como tipo” y selecciona Todos los archivos. Cambia
la extensión del archivo de “.txt” a “.xml” y guárdalo como “sitemap.xml”.
6. Sube el mapa de sitio a tu servidor. Una vez que hayas completado el archivo del
mapa de sitio, necesitarás colocarlo en la carpeta raíz de tu servidor web. Es el
directorio inferior del servidor web. La URL final del mapa de sitio debería ser
www.ejemplo.com/sitemap.xml
7. Registra tu mapa de sitio en los motores de búsqueda. Todos los motores
principales permiten que los administradores web registren la URL del archivo para
sus exploradores. Regístrate en las Herramientas para Administradores del motor de
búsqueda que quiera y navega hasta la sección de Mapa de sitio. Pega la URL de tu
mapa de sitio en el campo correspondiente.
9
[2]
Método 2
Usa un generador de mapa de sitio
1. Navega los servicios disponibles. Hay una gran variedad de generadores de
mapa de sitio, tanto los gratuitos como los de pago. Puedes usar servicios en línea,
herramientas del lado del servidor, o descargar programas para generar tu mapa de
sitios. Los servicios gratuitos suelen tener un límite de entre 500 y 1000 páginas.
Algunos de los programas y servicios más populares son:[3]
o InSpyder
o GSiteCrawler
o XML-Sitemaps
o Free sitemap generator.com
o G-Mapper
2. Revisa si tu sistema de administración de contenidos (CMS por sus siglas en
inglés) tiene un programa de creación de mapa de sitio. Muchos CMS, como

WordPress, tienen generadores de mapa de sitio que pueden accederse iniciando
sesión en el tablero de control. Suelen ser mejores que los programas de terceros, ya
que son más adecuados para el contenido de tu sitio.[4]
3. Escoge un mapa de sitio alternativo. Además de los mapas de sitio XML
estándar, hay mapas de sitio alternativos para tipos específicos de sitios. Si vas a
crear un mapa para un sitio para móviles, imágenes, noticias o videos, verás que
Google tiene mapas de sitio especializados. Si necesitas crear un mapa de sitio
especializado, revisa que el programa que uses soporte estos formatos.
4. Registra tu mapa de sitio. Todos los motores principales permiten que los
administradores web registren la URL del archivo para sus exploradores. Regístrate
en las Herramientas para Administradores del motor de búsqueda que quieras y
navega hasta la sección de Mapa de sitio. Pega la URL de tu mapa de sitio en el
campo correspondiente.
o También puedes añadir una referencia al mapa de sitio en tu archivo
robots.txt. Simplemente agrégale la línea Sitemap:
http://www.example.com/sitemap.xml al archivo.

Bibliografía
• Bosenick, T. Kalbach, J. Web Page Layout: A Comparison Between Left- and
Right-justified Site Navigation Menus, 2003 - Journal of Digital Information,
Volume 4 Issue 1
• Coutin, A. Arquitectura de la información para sitos Web. Madrid, Ed.
Ediciones Anaya Multimedia (Grupo Anaya S.A.), 2002.
• Eaton, E. Diseño Web. Elementos de interfaz. Madrid, Ed. Ediciones Anaya
Multimedia (Grupo Anaya S.A.), 2003.
• Miller, G. The Magical Number Seven, Plus or Minus Two: Some Limits on
Our Capacity for Processing Information, 1956 - The Psychological Review 63.
• Miller, Robert B. Response time in man-computer conversational transactions,
1968 - Proc. AFIPS Fall Joint Computer Conference Vol. 33.
• Morville, P. Rosenfeld, L. Arquitectura de la información para la World Wide
Web. Madrid, Ed. McGraw-Hill, 1998.
• Nielse, J. Usabilidad. Diseño de sitios Web. Madrid, Ed. Pearson Educación
S.A., 2000.
• Veen, J. Arte y ciencia del diseño Web. Madrid, Ed. Pearson Educación S.A.,
2001.
Recursos de Internet
• Ainda.info: Usabilidad, diseño Web fácil de usar.
[www.ainda.info, marzo – junio 2004]
• Alzado.
[Alzado.org, marzo – junio 2004]
• Arquitectura de la información.
[www.malisa.cl, marzo – junio 2004]
• Baquia.
[www.baquia.com, marzo – junio 2004]
• Desarrollo Web.
[www.desarrolloweb.com, marzo – junio 2004]
• Disc@pnet.
[www.discapnet.es, marzo – junio 2004]
• Emergia.
[www.emergia.net, marzo – junio 2004]
• El portal de la Unión Europea.
[www.europa.eu.int, marzo – junio 2004]

• Fundación Sidar - Acceso
Universal. [www.sidar.org, marzo
– junio 2004]
• Genera.graphics.avanced.
[www.genera.com.ec, marzo – junio
2004]
• Grancomo.
[www.grancomo.com, marzo – junio 2004]
• HTML Point.
[www.htmlpoint.com, marzo – junio 2004]
• Introducción a la Interacción Persona-
Ordenador. [griho.udl.es/ipo/, marzo – junio
2004]
• Nosolousabilidad.
[www.nosolousabilidad.com, marzo – junio 2004]
• Master Disseny:
[www.masterdisseny.com, marzo – junio 2004]
• Minid.net: Weblog de tecnología de
diseño. [www.minid.net, marzo – junio
2004]
• Revista Poder.
[http://www.revistapoder.com, marzo – junio 2004]
• Talleres del Web.
[www.talleresdelweb.com, marzo – junio 2004]
• Tramullas:
[tramullas.com, marzo – junio 2004]
• Unidad de Investigación
ACCESO. [acceso.uv.es, marzo
– junio 2004]
• Jakob Nielsen's Website.
[www.useit.com, marzo – junio
2004]
• W3C World Wide Web
Consortium. [www.w3.org,
marzo – junio 2004]
• Webestilo: Usabilidad,
programación y mucho más.
[www.webestilo.com, marzo –
junio 2004]

GLOSARIO
A
Adobe
Adobe Systems Incorporated es una empresa de software, fundada en 1982 por John Warnock y
Charles Geschke cuando salieron de Xerox Parc. Son los creadores de PDF, y de programas como
Photoshop, Illustrator, Acrobat, entre otros.
Adsense
Es el sistema de Google de publicidad en la red internet.
ADSL
Abreviatura de Asymmetric Digital Subscriber Line. Se trata de un método de transmisión de datos
a través de la línea telefónica de cobre tradicional a velocidad alta. Los datos pueden ser descargados
a distinta velocidad que son cargados, esta es la razón por la cual se le denomina asimétrico. Esta
tecnología es adecuada para la Web, ya que es mucho mayor la cantidad de datos que se envían del
servidor a un ordenador personal, que a la inversa. Existen distintas velocidades y en diferentes
países se han implantado tecnologías como ADSL 2 y ADSL+2 que permiten un gran ancho de
banda con capacidades para la transmisión de televisión y vídeo de alta calidad.
Adwords
Sistema de Google de anuncios publicitarios de texto o graficos, que usualmente aparecen en el lado
derecho de la pantalla de los resultados de búsqueda. También pueden aparecer en la red de sitios
web que estan afiliados a AdSense de Google.
AJAX
Proviene del inglés Asynchronous JavaScript And XML (JavaScript y XML con ejecución
asíncrona). Al fin y al cabo AJAX es una forma de desarrollo o programación de aplicaciones web
que combina: - Una presentación basada en los estándares XHTML y CSS - Utiliza el DOM para
interactuar con la página web - Para el intercambio de datos se basa en XML y XSLT - Solicita datos
a un servidor de forma asíncrona utilizando XMLHttpRequest - Junta todo y lo presenta al usuario
utilizando JavaScript
Apache
Apache es programa de servidor HTTP Web de código abierto (open source). Su desarrollo empezó
en 1995 y actualmente es uno de los servidores web más utilizados en la red.
B
Backup
Copia de Respaldo o Seguridad. Acción de copiar archivos o datos de forma que estén disponibles
en caso de que un fallo produzca la perdida de los originales. Esta sencilla acción evita numerosos,
y a veces irremediables, problemas si se realiza de forma habitual y periódica.
Banner
Es una forma gráfica (utilizando un formato de imagen como JPEG, GIF o PNG o inclusive Flash)
de algún tipo de publicidad y que actúa como ancla entre el sitio donde se sirve y el sitio que tiene
como destino.

Base de datos
Datos almacenados en una computadora que pueden ser accesados y manipulados fácilmente; piense
en un gran gabinete físico con muchas etiquetas con archivos de información relevante.
Big Data
El Big Data trata trabaja con una gran masa de datos, los ordena y los estudia para obtener ideas que
lleven a mejores movimientos comerciales. Su estudio y análisis ayuda a los negocios a aprovechar
sus datos para identificar nuevas oportunidades.
Bing
Buscador (motor de búsqueda, search engine) de la empresa Microsoft.
Blog
Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila
cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente,
donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente.
Browser (navegador web)
Browser, web browser o navegador es un programa de ordenador utilizado para ver páginas web e
interactuar con ellas. Ejemplos de navegadores son: Firefox, Google Chrome, Opera, Konqueror,
Safari, Midori, Epiphany, Amaya, Links, Internet explorer, etc.
Buscadores de Internet
Son compañías que utilizan software elaborado para visitar todos los sitios de la Web regularmente,
indexar la información que encuentra y utilizando sus propios parámetros, despliegan la relevancia
de esas páginas cuando un usuario busca información relevante al gremio que pertenecen. Los tres
buscadores más grandes son Google, Yahoo y Bing.
C
Cabecera (header)
Encabezamiento de una página o una sección de esta. En el caso de encabezamiento de página, se
suele colocar el nombre de esta, un logotipo, menús de navegación que pueden ser desplegables,
barras de búsqueda, entre otros. Si bien se pueden generar con bloques comunes, a partir de HTML5
se introduce una etiqueta específica para otorgarle un mayor significado semántico, lo que nos ayuda
en cuestión de SEO.
Caché
Es la habilidad de un navegador o de un servidor para guardar copias de páginas Web en un disco
duro con la ventaja de que carga más rápido dado que la información no debe de ser "pedida y
entregada" por un servidor si no que apunta a un lugar en específico mucho más cercano.
Captcha
Captcha es el acrónimo de Completely Automated Public Turing test to tell Computers and Humans
Apart (Prueba de Turing pública y automática para diferenciar máquinas y humanos). Se trata de
una prueba desafío-respuesta utilizada en computación para determinar cuándo el usuario es o no
humano. El término se empezó a utilizar en el año 2000 por Luis von Ahn, Manuel Blum y Nicholas
J. Hopper de la Carnegie Mellon University, y John Langford de IBM. La típica prueba consiste en
que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada
que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la
secuencia de forma correcta por lo que solamente el humano podría hacerlo.

CEO
Siglas del inglés Chief Executive Officer (o director ejecutivo).
Certificado Digital
Acreditación emitida por una entidad o un particular debidamente autorizada garantizando que un
determinado dato (una firma electrónica o una clave pública) pertenece realmente a quien se supone.
Chrome
Navegador creado por Google. Según sus creadores, empezaron desde cero sin seguir patrones, e
hicieron un navegador mejor adaptado a tecnologías más recientes para aplicaciones web.
Cliente
Ordenador que requiere los servicios de otro ordenador. También, programa que requiere los
servicios de otros programa. Normalmente, el navegador es un cliente de un servidor de datos.
CMS
Son las siglas en inglés de Content Management System, se trata de un Sistema de gestión de
contenidos que permite la creación y administración de contenidos en páginas web. Consiste en una
interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema
permite manejar de manera independiente el contenido y el diseño.
CMYK
Modelo de color sustractivo, utiliza los colores cian, magenta, amarillo y negro. Es ideal para
impresiones, a diferencia del modelo RGB.
Comercio electrónico
En inglés e-commerce. Es la compra y venta de bienes y servicios realizado a través del internet,
habitualmente con el soporte de plataformas y protocolos de seguridad estandarizados.
Copyright (Derecho de Copia)
Derecho que tiene cualquier autor (incluido el autor de un programa informático), sobre todas y cada
una de sus obras de forma que podrá decidir en qué condiciones han de ser reproducidas y
distribuidas. Aunque este derecho es legalmente irrenunciable, el mismo puede ser ejercido de forma
tan restrictiva o tan generosa como el autor decida. El símbolo de este derecho es ©
Cookie
Es un fragmento de información que se almacena en el disco duro del visitante de una página web a
través de su navegador, a petición del servidor de la página. Esta información puede ser luego
recuperada por el servidor en posteriores visitas.
Correo electrónico (e-mail)
También conocido como e-mail, abreviación de electronic mail. Consiste en mensajes enviados de
un usuario a otro por medio de una red. El correo electrónico también puede ser enviado
automáticamente a varias direcciones. El e-mail, o correo electrónico, es uno de los servicios más
usados en Internet ya que permite el intercambio de mensajes entre las personas conectadas a la red
de manera similar al correo tradicional. Utiliza el protocolo de comunicación TCP/IP. Básicamente
es un servicio que nos permite enviar mensajes a otras personas de una forma rápida, barata y
cómoda. Mediante correo electrónico es posible intercambiar no sólo mensajes de texto, sino
también todo tipo de archivos, lo que facilita el trabajo en grupo a distancia. Es uno de los medios
de comunicación de más rápido crecimiento en la historia de la humanidad.

Cracker
Persona que se especializa en violar medidas de seguridad de una computadora o red de
computadoras, venciendo claves de acceso y defensas para obtener información que cree valiosa. El
cracker es considerado un personaje ruin y sin honor, a diferencia del hacker.
CSS
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para
definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en
XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación
de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores. La idea que
se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su
presentación.
D
Desarrollador web (programador web)
Un desarrollador web es un creador de páginas web que enfoca su trabajo en el desarrollo interno
del funcionamiento de una página web.
Dirección IP
Una dirección IP es la identificación numérica de un ordenador conectado a Internet. Estas son
escritas a menudo como 4 grupos de 3 números (IPv4). Los nombres de dominio utilizan las
direcciones IP como su dirección de forma que los navegadores Web puedan encontrarlos en
Internet.
Diseñador web
Un diseñador web es una persona que diseña la parte visible de la página web: concepto, imágenes,
estilo, etc. definiendo así parte de los requisitos de uso de ésta. Normalmente hacen uso de editores
WYSIWYG más que escribir el código HTML directamente.
Diseño
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios
web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere
tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la
información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro
del diseño multimedial.
Diseño web adaptable (responsive web design)
Se llama así al diseño web de aquellas páginas que se adaptan al tamaño de la pantalla o ventana en
que se despliegan, por medio del uso de, idealmente, un solo documento HTML y un solo documento
CSS. La cuadrícula utilizada en el diseño web adaptable es fluida, es decir, el tamaño de sus
elementos es relativo, midiéndose en porcentajes, ems, rems, etc., en vez de puntos y pixeles. Esto
permite hacer una sola página web para smartphones, phablets, tablets y PC.
Dominio
Un dominio de internet es un nombre de equipo que proporciona nombres más fácilmente recordados
en lugar de la IP numérica. Por medio de los dominios podemos encontrar páginas fácilmente. Por
ejemplo con sólo escribir google.com entramos a la web de Google. El dominio representa nuestro
nombre en internet y es la forma por el cual las personas llegarán a nuestro sitio.
Dominio de Alto Nivel

Caracteres que figuran en último lugar en una dirección de Internet los cuales van precedidos de un
punto (.). Por ejemplo, en los dominios de alto nivel son "com" , "es" e "info".
DNS
(Domain Name System/Server, Servidor de nombres de dominios) Sistema de computadoras que se
encarga de convertir (resolver) las direcciones electrónicas de Internet en la dirección IP
correspondiente y viceversa. Componen la base del funcionamiento de las direcciones electrónicas
en Internet y están organizados jerárquicamente.
Desarrollador Web
Web developer - Persona o empresa responsable de la programación de un sitio web así la cual
incluye, si se da el caso, plataformas de comercio electrónico.
E
ebook
Libro en formato digital que, en algunos casos, requiere programas específicos para su lectura. Suele
aprovechar las posibilidades del hipertexto, de los enlaces y del multimedia, y puede estar disponible
en la red. La finalidad de crear un contenido con este formato es darle a nuestro usuario un contenido
más profundo sobre algún tema de su interés. Un ebook es una buena forma de convertir a nuestro
usuario, que ha leído un post, en un lead.
Ecommerce
En castellano "Comercio electrónico". Es la venta de bienes y servicios en la web o a través de otros
mecanismos en línea.
E-mail
El e-mail o email, del inglés electronic mail (correo electrónico), ha sido uno de los medios de
comunicación de más rápido crecimiento en la historia de la humanidad. Por medio del protocolo de
comunicación TCP/IP, permite el intercambio de mensajes entre las personas conectadas a la red de
manera similar al correo tradicional.
eBay
Es el sitio de subastas por internet más popular en el mundo.
Emoticon
Símbolo gráfico el cual normalmente representa una cara feliz, triste, seria, alegre y diversas
expresiones que permiten que una persona puede mostrar su estado de ánimo en un medio "frío"
como es el email o la mensajeria instantánea ;)
Encriptación
Cifrado. Tratamiento de un conjunto de datos, contenidos o no en un paquete, a fin de impedir que
nadie excepto el destinatario de los mismos pueda leerlos. Hay muchos tipos de cifrado de datos,
que constituyen la base de la seguridad de la red.
F
Firewall

(pared a prueba de fuego) Conjunto de programas de protección y dispositivos especiales que ponen
barreras al acceso exterior a una determinada red privada. Es utilizado para proteger los recursos de
una organización de consultas externas no autorizadas.
Firefox
Mozilla Firefox (originalmente conocido como Phoenix y Mozilla Firebird) es un navegador de web
gráfico, gratuito, de código abierto, desarrollado por la Fundación Mozilla y miles de colaboradores
en el mundo. La versión 1.0 salio el 9 de noviembre de 2004. Instalable en los sistemas operativos
Windows, Linux i686 y Mac Os X.
Firma digital
Información cifrada que identifica al autor de un documento electrónico y autentica su identidad.
G
Gmail
Gmail es el servicio de email (correo electrónico) gratis, de Google.
Google
Buscador de páginas web en Internet (y el más popular por el momento). Introduce páginas web en
su base de datos por medio de robots (a los robots de google se le conocen como googlebots).
H
Hipervínculo
(También llamado hiperenlace, link o liga) es un elemento de un que hace referencia a otro recurso,
por ejemplo, otro documento o un punto específico del mismo o de otro documento. Interfaz: Es la
representación gráfica de una aplicación interactiva, es lo que media y facilita la comunicación e
interacción entre el individuo y la maquina, ella es lo que el usuario ve en la pantalla y con la que
interactúa finalmente.
Hosting
Es el espacio donde se hospeda el sitio web. Este servicio lo brindan instituciones o empresas que
cuentan con servidores y software que le permitan gestionar servicios IP. Código Sur cuenta con una
red propia de servidores en data centers de última generación, con servidores exclusivos para
procesar cada servicio de forma individual: mail, listas, web, ftp, boletines y DNS
Hipertexto
Modelo teórico de organización de la información de forma multisecuencial. También se denomina
hipertexto al programa informático o herramienta de software que permite leer y escribir hipertextos
(sistema de gestión de hipertextos). Documento digital en el que la información se estructura en una
red de nodos y enlaces y que permite acceder a la información no necesariamente de forma
secuencial (hiperdocumento). En documentación un hipertexto es un sistema de organización y
presentación de documentos en un medio informático, que se basa en la vinculación de documentos
o fragmentos documentales digitales (textuales o gráficos) a otros fragmentos o documentos (en
cualquier morfología digital: texto, imagen, audio, vídeo, datos, programas informáticos y otras
aplicaciones capaces de generar un contenido dinámico), lo que permite acceder a la información no
necesariamente de forma secuencial. El hipertexto por excelencia es la World Wide Web
Hipermedia

Hipertexto + Multimedia. Hipertexto e hipermedia se suelen usar como sinónimos, pero la
hipermedia, además de texto incluye gráficos, audio, vídeo, etc. Son hipermedia las páginas web
que integran información en distintas morfologías: texto, gráficos, sonidos y vídeo, etc.
Home page
También conocido como index o página principal. Es la página inicial o punto de partida de un
documento o sitio Web
Host
Un ordenador en una red. En Internet se usa host para indicar a una máquina conectada a la red (con
una única dirección IP). Host es el ordenador anfitrión o servidor y guest, el ordenador huésped o
cliente.
HTTP
Hyper Transfer Protocol. Protocolo base de la Web.y que ofrece un conjunto de instrucciones para
que los servidores y navegadores funcionen. Es el lenguaje usado para escribir documentos para
servidores World Wide Web. Es una aplicación de la ISO Standard 8879:1986.
Huésped (Guest)
Palabra clave utilizada comúnmente para obtener archivos de dominio público de un ordenador
llamada host (anfitrión), el cual es el servidor donde se encuentran dichos archivos.
HTTPS
Protocolo de Transferencia de Hipertexto sobre SSL (Secure Socket Layer). Es un protocolo TCP/IP
utilizado por los servidores Web para transferir y mostrar contenido Web de forma segura. Los datos
transmitidos son encriptados de manera que no se pueden leer por nadie a excepción del receptor.
HTTPS es usado por cualquier sitio Web que este recopilando información sensible de sus clientes
como información bancaria o de compra. Si estas haciendo una transacción online, deberías
asegurarte de que esta se lleva a cabo sobre HTTPS para que los datos permanezcan seguros y se
transmitan de forma segura.
Hyperlink
Una imágen o porción de texto resaltado de alguna forma (normalmente subrayado) que conecta la
página actual con otra. Los hiperlinks son lo que convierten el texto plano en hipertexto. Los enlaces
son una parte importante de las páginas Web. Se puede conectar los documentos de un mismo sitio
utlizando enlaces internos y dirigir a los lectores a sitios externos para obtener más información
utilizando enlaces externos.
Hackers
Experto técnico en algún tema relacionado con comunicaciones o seguridad; de alguna manera es
también un gurú. Los hackers suelen dedicarse a violar claves de acceso por pura diversión, o para
demostrar falencias en los sistemas de protección de una red de computadoras. Los Hackers son muy
respetados por la comunidad técnica de Internet, a diferencia de los Crackers.
Hardware
Maquinaria. Componentes físicos de una computadora o de una red (a diferencia de los programas
o elementos lógicos que los hacen funcionar).
Hotmail
Uno de los más populares sitios que otorgan cuentas de email gratis (@hotmail.com), cuenta con
millones de usuarios a nivel mundial. Fue comprado por MSN Networks, empresa miembro del
grupo Microsoft.

I
Intranet
Utilización de la tecnología de Internet dentro de la red local (LAN) y/o red de área amplia (WAN)
de una organización. Permite crear un sitio público donde se centraliza el acceso a la información
de la compañía. Bien utilizada, una Intranet permite optimizar el acceso a los recursos de una
organización, organizar los datos existentes en las PCs de cada individuo y extender la tarea
colaborativa entre los miembros de equipos de trabajo. Cuando una Intranet extiende sus fronteras
más alla de los limites de la organización, para permitir la intercomunicación con los sistemas de
otras compañías, se llama Extranet.
IIS
Microsoft Internet Information Services. Servicios de Información de Internet de Microsoft. IIS es
un conjunto de servicios basados en Internet, para maquinas con Windows.
Internet Explorer
Conocido también como IE es el browser web de Microsoft. Fue lanzado al mercado por primera
vez en 1995 junto con las distribuciones de Windows.
ISP
Internet Service Provider. Proveedor de Servicio Internet. Empresa que provee la conexión de
computadoras a Internet, ya sea por líneas dedicadas broadband o dial-up.
J
Javascript
Un lenguaje de programación que permite añadir ciertas funciones a las páginas web, e incluso
alterar la manera en que se ven algunos elementos dadas ciertas condiciones (ej. reducir el tamaño
de la cabecera al hacer scroll hacia abajo).
JPEG
Formato de imágenes que utiliza compresión perdiendo muy poca calidad, dando como resultado
imágenes de alta calidad y poco peso.
K
Kilobyte
Unidad de medida de capacidad de información de mil bytes, aunque actualmente equivale a1024
(dos elevado a la 10) bytes.
L
Lorem ipsum
Texto de relleno utilizado en wireframes y versiones iniciales de algún diseño web, con la finalidad
de mostrar cómo se vería algo de texto en cierta parte de la página. El texto lorem ipsum tiene su
origen en un texto en latín del filósofo Cicerón, del cual se han extraído fragmentos desde
aproximadamente el año 1,500 d.C. para dicho uso.

Linux
Versión de libre distribución del sistema operativo UNIX que no tiene código propietario y se
distribuye libremente bajo licencia pública GNU. El kernel fue escrito por Linux Torvalds y otros
voluntarios de distintos lugares del mundo. Muchos de los programas que corren sobre Linux son
de uso libre.
LinkedIn
LinkedIn es una red social orientada al ambiente comercial y de negocios.
M
Maquetado
Es el nombre que recibe la acción de distribuir los elementos en una página web.
Metadatos
Los metadatos son, valga la redundancia, datos que describen datos, generalmente no visibles para
el usuario. Algunos ejemplos son palabras clave, autor, codificación de caracteres, entre otros.
Menú hamburguesa
¿Has visto el icono de las tres líneas horizontales en los menús de las versiones móviles de páginas
Web? Seguro que sí, a eso se refiere la navegación hamburguesa. Simplemente es un elemento que
guarda en su interior otros elementos para que el diseño sea mucho más práctico en pantallas
pequeñas. Al no estar expuesto todo el menú, el usuario puede dar con la información en la página;
si quiere navegar otras páginas dentro del sitio, solo debe desplegar el menú.
Mapa de sitio (Sitemap)
Un mapa de sitio no es más que un documento que indica cómo está estructurado un sitio Web. Su
función es hacer más sencillo el rastreo del sitio.
Módem
Modulador/demodulador. Dispositivo que convierte señales digitales (binarias) desde un ordenador
en señales analógicas para transmitirlas sobre la línea telefónica, y al revés.
Malware
Es un término general que se le da a todo aquel software que tiene como propósito explícito
infiltrarse o dañar a la computadora.
Megabyte
El Megabyte (MB) equivale a un millon de bytes, o mil kilobytes (exactamente 1,048,576 bytes).
Hay 1024 Megabytes en un Gigabyte.
Microsoft
Fundada en 1975 por Bill Gates, entre otros. Responsable de los sistemas operativos Windows XP
y Vista, del grupo de programas Office (Word, Excel, Powerpoint), de los controles Active X, del
navegador Internet Explorer entre muchos otros programas.
Modelo Cliente-Servidor
Sistema que se apoya en terminales (clientes) conectadas a una computadora que los provee de un
recurso (servidor).

MP3
Su nombre viene de "MPEG-1 Audio Layer-3." MP3 es un popular formato de audio comprimido
que ayudó a popularizar la ola de descargar música digital a finales de los 1990s.
MPEG
Acrónimo del inglés Moving Picture Experts Group. Grupo de Expertos en Imágenes en
Movimiento. Sistema de compresión de vídeo que permite la codificación digital de imágenes en
movimiento, y su extension es mpg.
MySQL
MySQL es uno de los Sistemas Gestores de Bases de Datos más populares. Su ingeniosa arquitectura
lo hace extremadamente rápido y fácil de personalizar.
N
Nube
La nube es una metáfora empleada para hacer referencia a servicios que se utilizan a través de
Internet. Permite una separación funcional entre los recursos que se utilizan y los recursos de tu
computadora, esto es: se utilizan recursos en un lugar remoto y que se acceden por Internet.
Netscape Navigator
Uno de los primeros navegadores de WWW para las plataformas X-Windows (UNIX), Mac y
Windows.
O
OSI
Open Systems Interconnection. Estándar internacional para facilitar la comunicación entre
ordenadores. Es el protocolo en el que se apoya Internet. Establece la manera como se realiza la
comunicación entre dos computadoras a traves de siete capas: Física, Datos, Red, Transporte,
Sesión, Presentación y Aplicación.
Oracle
Oracle es una corporación Norteamericana multinacional de tecnología informática, basada en la
ciudad de Redwood, en California, Estados Unidos. La empresa se especialia en desarrollar y
mercadear sistemas de hardware y software, particularmente con su marca propia marca en sistemas
de manejo de base de datos (que es una herramienta cliente/servidor para la gestión de Bases de
Datos).
P
Página Web
Es una unidad de información individual a la que se accede a través de la WWW, en ella se presentan
texto, imágenes, sonidos, vídeos y enlaces, y su extensión puede ser más larga que una pantalla de
computador.
PHP
Lenguaje de programación del lado del servidor, es decir, es el servidor y no el dispositivo del
usuario el que lo interpreta; se puede incluir dentro del documento HTML.

Pie de página (footer)
La parte inferior de una página web, en que se coloca información como datos de contacto,
copyright, autor de la página, entre otros. Si bien se pueden generar con divs comunes, a partir de
HTML5 se introduce una etiqueta específica para otorgarle un mayor significado semántico, lo que
nos ayuda en cuestión de SEO en tiempos de la Web 3.0.
Pixel
Es la menor unidad de medición de los elementos gráficos mostrados en pantallas. Un pixel es
equivalente a un punto de la pantalla, que es la división más pequeña de la resolución de la pantalla.
PNG
Formato de imágenes de alta calidad que soporta trasparencias (composiciones alfa). Su
pronunciación es "ping"
Página principal
También denominada página de inicio. Es la página web por la que comienza la presentación de un
sitio web. Suele ser una especie de índice de lo que hay en el sitio web, y ofrece enlaces a distintas
partes del sitio.
Programación orientada a objetos
Técnica de programación que aumenta la velocidad de desarrollo de los programas y hace que su
mantenimiento sea más fácil al volver a utilizar "objetos" que tienen comportamientos,
características y relaciones asociadas con el programa. Los objetos son organizados en grupos que
están disponibles para la creación y mantenimiento de aplicaciones.
Proxy
Mecanismo que permite compartir una única conexión a una red externa entre todos los puertos de
una red local.
Phishing
Es un término empleado en el mundo de Internet para referirse a una estafa diseñada para obtener
información confidencial, como lo son números de tarjetas de crédito, claves de acceso, datos de
cuentas bancarias u otros datos personales.
PayPal
PayPal es una aplicación basada en Web para la transferencia segura de fondos, entre cuentas de
miembros.
Pop-Up
Formato publicitario el cual consiste en una ventana flotante desplegada en pantalla, sobre la página
visitada, al cual se debe hacer click en alguna parte de la misma.
Q
Quicktime
Popular formato de video (.mov) creado por Apple.
R

Resolución
El alto y el ancho de una pantalla en pixeles. A ciertas combinaciones de alto y ancho se les otorga
un nombre, por ejemplo, 1920x1080 px es Full HD, mientras que 3840x2160 px es Ultra HD 4K
RGB
Modelo de color que utiliza los colores rojo, verde y azul, los tres colores primarios aditivos, se
llaman así porque todo monitor trasmite emiten luz y la mezcla de los tres colores primarios generan
el color blanco. Entendiendo que un color es el resultado de la mezcla de los primeros tres. La
ausencia de color está representada por el 0 y la presencia total del mismo se representa con 255,
así, el color blanco seria RGB (255, 255,255)
Realidad virtual
La realidad virtual se refiere a las simulaciones en un ordenador del mundo real por medio de
imágenes tridimensionales y componentes externos como un casco para permitir que los usuarios
interactúen con la simulación. Los usuarios se mueven por una realidad virtual como si estuviesen
en un mundo real.
Redes sociales
Socialización en redes de comunidades en línea, donde es posible contactar con personas de
cualquier parte del mundo, sobre los asuntos y fines que más nos convengan, desde charlar de forma
insustancial, hasta hacer negocios, ligar, compartir archivos, chatear, etc.
Router
Dispositivo para dirigir paquetes de información entre dos áreas separadas de una red.
S
Servidor
Es el computador en el que se ejecutan los programas que realizan alguna tarea en beneficio de otras
computadoras. Algunos servicios habituales son los servicios de archivos, que permiten a los
usuarios almacenar y acceder a los archivos de un sitio web, así como ejecutar sus aplicaciones
asociadas, en beneficio directo del usuario final.
Sitio Web
Varias páginas web pueden estar agrupadas conformando un sitio Web, se trata de productos
comunicacionales cuya característica básica es que potencian una "desestructuración comunicativa",
es decir, que el sitio no hace explicito todas sus posibilidades de una sola vez, sino que para
conocerlas se incita al usuario a explorar y a interactuar con los distintos elementos que aparecen en
pantalla.
Sistemas Operativos
Constituyen un conjunto de programas básicos y utilidades, compilados y distribuidos en formato
sencillo para su fácil instalación, y de los cuales depende el funcionamiento de la computadora.
SQL
Lenguaje de programación para el manejo de bases de datos.
Servidor dedicado
En inglés "dedicated server". Un servidor dedicado es un servidor Web que está alquilado o en
propiedad absoluta. Los servidores dedicados proporcionan el uso exclusivo de los recursos del
servidor web para su negocio. En la mayoría de los casos, usted tendrá el control total del servidor,

incluyendo el acceso root y la administración. Algunos planes de servidor dedicado ofrecer consolas
de administración para administrar el servidor.
T
TCP/IP
Transmission Control Protocol/Internet Protocol, definido por Vint Cerf y Bob Kahnn en 1973, es
el protocolo que ha hecho posible Internet y se ha convertido en el protocolo de red más utilizado
en el mundo.
Tráfico sitio web
Generalmente el número de personas que visitan un website. Se puede medir de distintas formas,
siendo las "visitas únicas" las más cercanas a la realidad. Los "hits" son englobados y no
proporcionan información útil.
Twitter
Red social en donde los usuarios que estan registrados pueden tener su propio pagina en donde
pueden escribir lo que quieran, pero cada mensaje tiene un limite relativamente bajo de caracteres.
De esta forma se generan mensajes cortos. Se puede actualizar el status de la pagina de twitter
incluso desde un celular. Los usuarios tienen la opción de "seguir" a cualquier persona y leer sus
comentarios. Artistas de cine y farandula se comunican por este medio con el público en general, y
a veces millones de personas los "siguen"
U
URL
Uniform Resource Locator. Sistema de direccionamiento estándar de archivos y funciones en
Internet, especialmente en la WWW. El URL está formado por el protocolo de servicio (http: ftp:
gopher: mailto), el nombre del servidor u ordenador que contiene el recurso, la ruta de acceso al
recurso y el recurso buscado.
V
Visitante
Una visita es una persona que visualiza el website. Un visitante puede visitar una o varias páginas
por lo que es interesante tener este registro en base a herramientas propias o profesionales como
Google Analytics. Para identificar los visitantes y extraer cierta información podemos obtener datos
de ellos a través de su dirección IP, navegador, sistema operativo, idioma, etc. El número de visitas
es una métrica que indica la popularidad de una web o website.
VoIP
Es la abreviación en inglés de Voice over IP (en español, voz sobre IP o voz sobre protocolo de
Internet), y se usa para identificar la tecnología detrás de comunicaciones usando voz y vídeo a
través de Internet.
VPN
El término se usa para una red de comunicaciones que usa la infraestructura de Internet para proveer
conexiones remotas a redes de una organización, por ejemplo a empleados que trabajan desde su
casa o que están de viaje. VPN corresponde a las siglas en inglés de Virtual Private Network.

W
World Wide Web
Es un sistema hipermedial que permite el acceso a una diversidad de contenidos a través del
seguimiento de enlaces desde un elemento a otro, colocando a disposición de los usuarios referencias
o vínculos a otros documentos ya sean en formato de sonidos, gráficas o vídeo.
Web 1.0
Se refiere al concepto original de la web que comenzó con el desarrollo de páginas estáticas HTML
que no eran actualizadas frecuentemente. En esta etapa de desarrollo conseguir hits (visitas) y la
estética visual eran considerados como unos de los factores más importantes de desarrollo de
cualquier Sitio Web.
Web 2.0
Se usa para referirse a una segunda generación de Web basada en comunidades de usuarios y una
gama especial de servicios, como las redes sociales, los blogs, los wikis o las folcsonomías, que
fomentan la colaboración y el intercambio ágil de información entre los usuarios. En la Web 2.0, se
busca un intercambio de información en dos sentidos, y el usuario deja de tener un rol pasivo y pasa
a ser parte de la generación de la información.
WAMP
Es el acrónimo de Windows, Apache, MySQL y PHP (o Perl o Python) que conforma una plataforma
de desarrollo que incluye el sistema operativo (Windows), servidor web (Apache), base de datos
(MySQL) y un lenguaje de script (PHP, Perl o Python).
Webmaster
Es el técnico responsable de gestionar un sitio web a nivel informático, y revisa que los contenidos
se publiquen correctamente, así el funcionamiento de la página.
Wi-Fi
Es una marca registrada que también se usa como el término utilizado para nombrar la tecnología
con la que se conectan diversos dispositivos electrónicos de forma inalámbrica.
Wiki
Un website que permite que los usuarios editen contenido. Si uno tiene algo que aportar o corregir,
puede oprimir el boton de editar, que usualmente esta arriba o al final de la pagina, y escribir. Para
tener su propio wiki se necesita software especial.
Wikipedia
Una enciclopedia de contenido gratuito, multi-lenguaje (por lo menos 200 lenguajes), escrita por
miles de voluntarios alrededor del mundo y patrocinado por la fundación sin fines de lucro,
Wikimedia.
WordPress
Popular herramienta para hacer y mantener un blog, que ha evolucionado para convertirse en uno de
los CMS más versatiles del mercado, ya que por medio de plug-ins se puede expandir la
funcionabilidad del programa para hacer casi lo que sea, desde bienes raíces hasta catálogos de
comercio electrónico.
X

XML
Lenguaje Extensible de Marcado. Lenguaje desarrollado por el W3 Consortium para permitir la
descripción de información contenida en el WWW a través de estándares y formatos comunes, de
manera que tanto los usuarios de Internet como programas específicos (agentes) puedan buscar,
comparar y compartir información en la red. El formato de XML es muy parecido al del HTML
aunque no es una extensión ni un componente de éste.
Y
Yahoo!
Yahoo!, a diferencia de los "spiders" o "crawlers" (como google por ejemplo) es un directorio,
editado por humanos.
YouTube
Sitio web con millones de videos que provienen de cualquiera que tenga una camara digital en
adelante. Fue adquirido por Google en 2006 por sumas astronomicas de dinero.
Z
Zipear
Se refiere a la acción de comprimir en un solo archivo a un grupo de archivos que por lo general se
comprimen también para que ocupen el menor espacio posible en la computadora y aminore el
tiempo en que se transmiten a través de Internet.

Manual mapas de_navegacion

Más contenido relacionado

La actualidad más candente

Similar a Manual mapas de_navegacion

Último

Manual mapas de_navegacion