Marcadores. Moverse rápidamente por una página. | Oloblogger A l igual que podemos marcar el lugar por dónde vamos en la lectura de un libro, también podemos mar...

27 de mayo de 2009

Marcadores. Moverse rápidamente por una página.

Al igual que podemos marcar el lugar por dónde vamos en la lectura de un libro, también podemos marcar partes de nuestra página para acceder rápidamente a ellas.

Quizás lo que más se utilice sea la opción del botón "Ir arriba", para que el usuario de una página web pueda acceder al principio de esta con sólo un click. Sin embargo, en alguna ocasión puede resultar conveniente utilizar más marcadores, señalando distintos puntos de la página para que el visitante puede acceder a esos apartados de una manera más ágil.

Seguro que es especialmente útil en páginas largas con muchos apartados. Por ejemplo, cuando al principio colocamos una especie de índice y queremos que se pueda acceder a los distintos capítulos desde allí mismo.

Declarar un marcador es bastante sencillo. Para ello, utilizamos la etiqueta A en asociación con NAME, de esta manera.

<a name="nombre_marcador">Texto del marcador</a>

Aunque parezca un enlace, lo que realmente estamos haciendo es indicar mediante HTML que justo delante de "Texto del marcador" queremos una marca a la que se pueda acceder cuando lo solicitemos. Podemos utilizar como marca un solo caracter de nuestro texto, una palabra, una frase o incluso una imagen. En esta entrada las marcas las hemos resaltado para que sean "visibles" con letras capitales. Hay un marcador abajo que ni siquiera tiene ningún contenido. El enlace-llamada, que será lo que veremos a continuación, nos llevará al principio de lo que marquemos.

La llamada a cada marcador se hace mediante un enlace normal HREF, pero en lugar de una dirección HTTP, utilizamos #nombre_marcador.

<a href="#nombre_marcador">Enlace al marcador</a>
...
<a href="#nombre_marcador2">Enlace al marcador2</a>
<a href="#nombre_marcador3">Enlace al marcador3</a>

Fácil ¿no?

En las siguientes imágenes y para ver el resultado, tienes enlaces que te llevan a las tres marcas que hemos colocado en este post.


No hay ningún problema en colocar distintas llamadas al mismo marcador en distintos puntos. Sin embargo el marcador en sí (su nombre), tiene que ser único para cada destino. No se puede utilizar el mismo nombre en distintos destinos... evidentemente. Una prueba de ello...


También se pueden crear llamadas a marcadores en distinta página o incluso web. La página de destino tendrá que tener un marcador creado de la misma manera que se ha explicado aquí y deberás conocer su nombre. La diferencia sólo estará en el enlace HREF, que incluirá delante del nombre del marcador, la direccion completa de la página (o dirección relativa si estás dentro de la misma web).

Ver <a href="http://singenio.com/instrucciones.htm#reglas">reglas</a>

Que daría lugar a: Ver reglas

Este último ejemplo nos llevaría a un apartado (marcador) de una página web distinta a esta y no al principio de la misma que sería lo normal.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

16 comentarios :

  1. Se me acaba de ocurrir una aplicación de dos trucos que has dado, pero no sé su viabilidad.
    ¿Sería posible combinar este truco con el del botón "ir arriba" (ese que se queda fijo en la pantalla aunque en la página subas o bajes) de forma que hubiera dos botones en pantalla que llevaran a "Entrada anterior" "Entrada siguiente"?

    ResponderEliminar
  2. Me parece buena idea, Mujer Quijote -¡ahhhh!-

    En cuanto tenga un rato veo a ver si se puede incorporar.

    ResponderEliminar
  3. Muy bueno eso de los marcadores, no sabía que existía y creo que es una herramienta muy útil. Buen truquillo!! Y otra cosa, me encanta el vecino que se aparece por la barra lateral.

    ResponderEliminar
  4. Muy interesante como siempre. Ultimamente tengo un grave problema porque cuando mis lectores quieren entrar a mi blog les sale un cartel que dice:
    Internet Explorer no puede abrir este sitio......... operación anulada

    No se que hacer tal vez me sugieras algo o me tires una ayuditas. Gracias!!

    ResponderEliminar
  5. Vivian, en un post de Vagabundia tienes muy bien explicado el motivo y también la solución. Es este:

    http://vagabundia.blogspot.com/search?updated-max=2009-06-13T00%3A00%3A00-03%3A00&max-results=4

    ResponderEliminar
  6. Hola...hace algun tiempo que sigo el blog...recientemente acabo de cambiar de plantilla a una que descargé (no las se crear desde zero...a ver si algun dia haceis un tuto en español, que todos los que pillo son en ingles...XD)bueno a lo que iva, que cambié de plantilla y sale un box cambiante, pero no se como porras poner mis propios posts importantes.
    Ojalá podais ayudarme, please.
    El blog es: http://bellablackphotos.blogspot.com/
    Muchas gracias por vuestro tiempo.
    Ya busqué a ver si havia la explicación por aqui, pero no encontré nada...^^U

    ResponderEliminar
  7. Hola BellaBlack, no creas que soy muy ducho en eso de crear una plantilla desde cero. Además, siempre he pensado que lo mejor es coger una MINIMA y luego empezar a modificarlo todo. Sobre eso sí encontrarás muchas cosas por aquí.

    Tampoco estoy muy familiarizado con el script que construye la lista de enlaces de tu carroussel, pero creo que está preparado para leer un feed y mostrar los posts más recientes. Sin verlo completo, no sé si se podrá modificar para hacer lo que quieres, pero de momento busca en la plantilla
    home_page = "http://hybridnews-fbt.blogspot.com/feeds/posts/default";

    y cámbialo por
    home_page = "http://bellablackphotos.blogspot.com/feeds/posts/default";

    para que al menos busque entre tus posts y no en los de la página Hybridnews ;)

    ResponderEliminar
  8. Hola Oloman...Buenísimo el truco, lo acabo de aplicar enlazando a otra página del mi blog y funciona OK. Lo único que note es que me dirige directo al marcador enlazado mientras la página esta cargando y cuando termina la carga el texto se sube un poco. Será que la imagen temporal que tengo durante la carga es la causa?
    Saludos y ¡Muchas Gracias!

    ResponderEliminar
  9. Hola Luis. Mucho tiempo sin intercambiar palabras.

    Podría ser lo que dices y podría ser cualquier otro de los cacharritos que tienes. Me parece recordar que te dije hace mucho que, en mi opinión, tenías demasiados artilugios que ralentizaban la carga. Veo que me has hecho caso y ahora tienes como... ¡el triple! O sea, que vaya Vd. a saber cual es el responsable de ese extraño efecto. Je, je. Sigue sin hacerme caso. Cada uno hace en su casa lo que quiere, porque cada cual la usa de forma distinta.
    Un saludo.

    ResponderEliminar
  10. JaJaJa...Tienes toda la razón, es como si eso hiciera parte de personalidad. No se porque me gusta el movimiento constante. Algún otro día que me visites procuraré ordenar la casa que tu bien me haz ayudado a construir en sus cimientos. De la fachada externa, el único culpable soy yo. Un fuerte abrazo.

    ResponderEliminar
  11. Qué blog tan chulo! Eres diseñador? Y por cierto, lo del vecino de la barra lateral muy bueno.

    ResponderEliminar
  12. No, sólo soy un "afisionao" :D

    ResponderEliminar
  13. Hola Oloblogger, tengo la siguiente duda:

    Estoy creando el siguiente blogger

    http://www.masquepalabras.net/

    y me gustaria crear un seguimiento de pedidos que estaria en el subdominio pedidos.masquepalabras.net.

    El funcionamiento seria el siguiente:
    en este subdominio apareceria una caja en el que introducir un codigo de 10 digitos y 4 letras (5364810972TGJN) y al hacer click en un boton o imagen nos enlazaria a .../2010/09/5364810972tgjn.html, pero que en caso de que no exista nos lleve a una pagina de aviso y en caso de que no se escriba nada en la caja en boton o la imagen no hagan nada o no se active.

    Pero el problema me surge que no se como hacer esto y que ademas se tengan que escribir obligatoriamente los 10 digitos y las 4 letras para poder acceder.

    Gracias anticipadas

    ResponderEliminar
  14. Lo de ir a la página que termina con el número tecleado, creo que se podría hacer. Sin embargo, lo de mostrar una página de aviso en caso de teclear un código erróneo (una página inexistente), en Blogger de momento no se puede hacer. Si tuvieras un hosting distinto de Blogger, la cosa cambiaría.

    Prueba este enlace. Pasa el cursor por la imagen de arriba a la izquierda y mete en el casillero que aparece una palabra cualquiera seguida de .htm (por ejemplo "prueba.htm") y verás que te lleva a una página personalizada de error que podría incluir cualquier cosa además de las que ves. Luego prueba de nuevo con treintaycuatro.htm. Verás como sí te lleva a esa página.

    Creo que esto es lo que quieres, pero lo dicho... todo eso se puede hacer ahí porque es un hosting de pago.

    ResponderEliminar