Ir al contenido principal

Incluye marcadores o anclas en tus post de #Wordpress #Blogger y #GoogleSites



Es posible que te hayas preguntado alguna vez si es posible incluir marcadores o anclas (anchor link) internas en un post de Blogger, Wordpress o de un Sites de Google. La respuesta es que sí que se puede, aunque el proceso no es para nada intuitivo y nos obliga a seguir unas pautas un tanto engorrosas. No obstante, si alguna persona se ha asustado, que se esté tranquila, porque no es difícil, aunque tediosa.

Como este post va precisamente de marcadores, a través del índice de contenidos que se pone a continuación podréis acceder directamente al tema que os interese, simplemente haciendo click.

Índice de contenidos:


0. Para qué sirven los marcadores o anclas (anchors)


Los marcadores o anclas (en inglés anchor links) son hyperlinks (hiperenlaces o hipervínculos) internos de una página.

En otras palabras, así como un hipervínculo convencional nos lleva a otra página o elemento web externo a la página o post que estemos visitando, los marcadores o anclas nos llevan a una zona diferente de la propia página o post.

Por ejemplo, si hacéis click aquí, os llevará a la zona de bibliografía de esta página, Pero si hacéis click en   Volver al índice os retornará al índice de contenidos de esta web.

En definitiva, los marcadores nos hace la navegación interna de una página o post mucho más cómoda y directa, sin tener que obligar al lector a leerse todo el contenido.

Os invito que utilicéis este sistema cuando escribáis post o página muy largas, como por ejemplo, ésta.

1. Incluir marcadores (anclas) en Blogger

1.1. Con estilos de párrafo

2) Si utilizamos estilos de formato, deberemos escribir lo siguiente (**tener en cuenta que puede tratarse de un h1, h2, h3... ):


<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

<h3 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h3>

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.2. Sin estilo de párrafo (texto normal)

1) Vamos al editor HTML como en el apartado anterior.
2) Sin estilo de párrafo (texto normal), escribimos lo siguiente para crear el marcador (o ancla)

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.3. Enlazar el marcador

1) Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):
NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

2) Para sacar la dirección de nuestros post tan sólo deberemos ir al menú vertical derecho de blogger, donde se indica el link del post. Peor no os olvidéis de escribir al final de la URL que copiéis  un .html seguirdo de la almohadilla y el nombre del marcador:

NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

Haceis click encima y os aparecerá el enlace permanente

2. Incluir marcadores (anclas) en WordPress

2.1. Crear el marcador cuando usamos estilos de párrafo

1) Como en el caso de blogger, iremos al editor HTML.
2) Si utilizamos estilos de formato, deberemos escribir lo siguiente:
<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)


2.2. Crear el marcador cuando NO utilizamos estilos de párrafo (texto normal)

1) Vamos al editor HTML
2) En el caso de no utilizar estilos de párrafo, en el editor HTML escribiremos lo siguiente:

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

2.3. Enlazar el marcador

Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):
NOMBREdetuPÁGINA.com/nombre-del-post/#NOMBREdelMARCADOR

Fuente: blogtimenow.com/

2.4. Incluir marcadores mediante apps

@Sureyea. nos recomienda dos apps por si no queremos hacer todo el proceso de edición del hml de nuestra página web:
  • Ultimate TinyMCE: un apps que nos permite reconvertir nuestro editor de posts de wordpress en una interface visual e intuitiva. (No lo he probado, pero tiene muy buena pinta).

3. Incluir marcadores (anclas) en Google Sites

3.1. Con la función del índice de contenidos

■ Cuestiones previas

* Todo lo que se explica a continuación ha de hacerse el el modo de edición de la página (click en el icono del lapiz de la parte superior derecha del sites)





1) Para poder utilizar la opción de tabla de contenidos, primeramente deberemos editar nuestra página del sites utilizando los estilos de párrafo (en el menú FORMATO), a saber, cuando pongamos un título aplicarle formato T1 (h1 en html), T2 (h2) etc., tal y como se puede observar en la siguiente imagen:


2) Una vez escrita la página con la utilización de estilos de formato (T1, T2...), crearemos en índice o la tabla de contenidos. 
Para crear el índice iremos al menú INSERTAR > ÍNDICE DE CONTENIDO

3) Nos saldrá un índice automático, al estilo de éste:

■ Crear marcadores con el índice de contenidos

1) Creamos un índice de contenidos

2) Una vez creado, salimos del modo de edición.
Nnos situamos sobre el elemento elegido para ser marcador y hacemos click con e botón derecho del ratón y copiamos el link/enlace:


3) Volvemos al modo de edición.
Nos situamos sobre el elemento deseado y hacemos click en el icono para agregar un enlace:


4) pegamos el enlace del paso 2, que tendrá una forma así:
https://sites.google.com/site/NOMBREdelSITES/home/NOMBREsdelaPÁGINA#TOC-NOMBREMARCADOR


3.2. Creando un marcador en cualquier lugar del texto

Al igual que hemos hecho en el caso de Blogger y WordPress, si queremos incluir un marcador interno dentro del texto de nuetsro sites, tendremos que ir al editor HTML e incluir las siguientes etiquetas HTML sobre la(s) palabra(s) deseadas:

 <a name="nombredelmarcador"> Texto a enlazar </a>. 

4. Bibliografía









Comentarios

  1. Muy completo, no me había planteado utilizarlo con Google Sites, pero veo que puede tener mucha utilidad

    ResponderEliminar
  2. Me alegra que te animes a utilizarlo Javier.

    ResponderEliminar
  3. No tenía ni idea de que podía hacerse. Muchas gracias por la explicación, Alazne y el curro que hay detrás, porque sí es un poco engorroso, sí.
    Un abrazo

    ResponderEliminar
  4. Muchas gracias por el post, está muy currado, pero tengo que decir que con plantilla de vistas dinámicas de blogger no he conseguido, creo que no es posible con estas plantillas.
    Un saludo!

    ResponderEliminar
  5. Una gran entrada que me ha resuelto el problema que tenía. Gracias.

    ResponderEliminar
  6. Me alegra mucho que lo hayas podrido lograr Iván.
    En cuanto a ti Luciano, no, en plantillas dinémicas no deja :'(

    ResponderEliminar
  7. Muy buena nota Alazne te agradezco que la compartas con nosotros, creo que tiene mucha aplicación.

    ResponderEliminar
  8. sobre todo viene fetén para google sites y wordpress, en blogger, según con qué plantillas da problemas, Franco

    ResponderEliminar
  9. Genial para mi wordpress, muchas gracias!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Top 100 de las Herramientas 2.0 para Educación

Aquí comparto con vosotros/as las herramientas 2.0 de mi PLE. Las 100 herramientas que más uso y con las que trabajo. Las he querido agrupar en este Symbaloo (hacer clic sobre la imagen para acceder) para que se pueda tener acceso rápido. 






Kahoot! : aprendizaje basado en el juego

Kahoot! : Un gran aprendizaje comienza formulando grandes preguntas
Hace unos días descubrí una de esas aplicaciones que pueden llegar a ser de gran ayuda en el cambio de metodologías en el aula. Se trata de Kahoot!, un sistema de respuesta basada en el juego, con el que se obtiene feedback de nuestros alumnos en tiempo real. Nadie mejor que sus creadores para describirla:
Kahoot! es una plataforma de aprendizaje mixto basado en el juego, permitiendo a los educadores y estudiantes investigar, crear, colaborar y compartir conocimientos. Se ofrece a los estudiantes una voz en el aula, y permite a los educadores que se dediquen y centren sus estudiantes a través del juego y la creatividad. Kahoot! instiga experiencias como ésta  y trabaja a través de dispositivos móviles como este . Sin embargo, hay un elemento social. Estamos alentando el intercambio (y colaboración) de grandes concursos, debates y encuestas. Nuestra filosofía y la visión es que la gente de todo el mundo deben compartir …

De ppt a vídeo

Hoy quiero compartir con vosotros un pequeño truco TIC. Seguramente muchos de vosotros habéis utilizado el programa powerpoint de Microsoft Office para realizar presentaciones. Me refiero al formato ppt, porque en los centros educativos que conozco, es el más utilizado, ya que casi todos los ordenadores disponibles en estos centros tienen este programa instalado.

Uno de los formatos que mejor navegan en la red en cualquier sistema es el formato vídeo, puede que queráis utilizar la metodología FlippedClass, o quizá sois unos ases haciendo un powerpoint y no sabríais hacerlo en vídeo...

Existen varias maneras de transformar el formato, creo que la última versión del powerpoint te permite exportar a formato vídeo, pero supongo que tampoco tenéis esta última versión como ocurre en un gran porcentaje de centros educativos. Hay también programas instalables o aplicaciones portátiles que funcionan bien, pero voy a recomendaros un servicio web, en la nube ;-), que funciona muy bien y no neces…