Si quieres ser colaborador en este blog colectivo dedicado a pequeñas rutinas

que nos puedan facilitar las tareas con las aplicaciones en la nube (o en
tierra) envía un email con tu dirección de correo electrónico a

enlanubetic@gmail.com



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









¡Compártelo!

3 comentarios:

Javier Roig Garro

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

Alazne González

Me alegra que te animes a utilizarlo Javier.

Inés Andrés

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

Publicar un comentario en la entrada

La nube

"Google Apps" #eltpics #guappis 123D catch 360º 3D about.me accesibilidad acortador acortar direccion actitud ActiveTextBook actividades activismo social aditzak agrupar direcciones web AICLE alertas almacenamiento alumnado analisis anatomía Anatronica android angry birds animación animación a la lectura animoto análisis APA aplicaciones App app colaborativo aprender archivos_pesados ARcrowd arduino astronomia aTube Catcher Audacity audio audio audacity tutorial audiolibro audiovisuales augment aula aula de ciencias Aumentaty Aurasma Autodesk AVATAR ayudas bachillerato backchannel backup badges barcode scanner base de datos bases de datos bContext bibliografía bilingüismo Biodigital Biografía biología bitacoras bitly Blackberry blendspace Blog blogger blogvio Bloomfits bloxp Blubbr bluetooth brainstorming brillo Buscador búsqueda búsquedas avanzadas cacoo Calaméo calendario canva capturador celtx Chibimachine chrome citación clasificar class dojo classroom cloud coggle colaborar colaborativo colecciones color compartir compartir archivos competencias complementos comunidades de aprendizaje concentración concurso conducta connected classrooms construir contenidos Contenidos Digitales content curator contraseña contraste controlRemoto conversor audio convertidor de música Convertidor de videos convertir documentos Convertir formatos Cooliris Express copia de seguridad correo electrónico Cortafuegos creative commons creatividad CSS cuaderno de notas cuaderno profesor cuentos Cuerpo humano cuestionarios curación de contenidos Cuña código códigos QR cómics delicious derechos de autor dermandar descargas desktop deuteranope dia 0.97.2 diagramas diapositivas dibujo vectorial diccionarios dickens dictados didáctica difundir Diigo dipity diplomas diseño diseño gráfico diseños dispositivos móviles divertimento dnoise docente.me docentes doctopus donostia qr dotdotdot dotepub dotsub drive drivers droid dropbox ebook ebook glue economía EdAS edcanvas edición edilim editor de imágenes edmodo Edpuzzle Educación educación especial educaplay eduClipper efectos en imágenes eje temporal ejercicios ejes cronológicos El País electronica ELT email embeber emuladores de discos encuestas Enigma Enigma virtualbox enlaces epub escenas escribir escritorio escritura escritura manual ESO esquemas esquinas estadística estante Estoig Digital estrategias de enseñanza estudio etiquetas eTwinning euskera evaluación eventos evernote examenes examtime excel exelearning extensiones facebook favicon feed Firefox firewall firma firma digital flash Flickr flipbook flipped classroom fondo fondos ForgetBox Formación format factory formulario fotografías fotor freeware ftp fuentes fumetti física gadget GAFE galería de imágenes gamificacion geacron generadores Generadores de actividades geogebra geolocalización gestion de aula gestión del tiempo gestión docente GIMP Glogster gmail goggles goodrae google google + google apps google apps script google art google classroom Google Cloud Connet google docs google drive google keep Google Maps Google Play Music google sites googlemaps goteo GPS gratis GROOVESHARK grouply gráficos Haiku Deck hang out hello sign hermanamientos europeos herramienta 2.0 herramienta20 herramientas herramientas automáticas historia historias Historypin hoja de cálculo HTML html5 iAnnotate iconos ideas idiomas iDoceo ikaskidetza Imagen imagen panorámica images Images Actives imaginación iMotion Impresión en línea imágenes imágenes vectoriales in3Dgallery inclusión infantil infografía Inforgr.am informacion inglés Inkscape insertación insignias Instagram instalación Insync INTEF interactivo intercambio educativo interfaces internet intranet investigación iOS Ipad iTunes iVoox jigsawplanet Jingle joomag JotForm juegos jugar jumpchat junaio kahoot karaoke musica kidblog labolsavirtual Layar lector lectura leer más tarde legibilidad Lego lengua lenguaje visual lenguas extranjeras letras LibreOffice libro libro electrónico libros libros interactivos licencias likebox lineas de tiempo linkedin Linux lista listas de reproducción LiveBinders lluvía de ideas logos Lucidpress léxico magicscroll Makewaves Manual mapas mapas conceptuales mapas de flujo mapas de sitio mapas mentales mapear Maps Engine Lite maquetación marcador social Marcadores Sociales marketing matematicas Matemáticas materiales metaio metta mezcla de audio microblogging mind42 mindflash Mindmeister Mindomo mlearning mobiletest MOOC Moodle Moovly movil mozilla MP3 multimedia Multimedia: Vídeo multisistema mural murales Music Timeline My Maps móvil música Naptha narración digital navegación anónima navegador navidad notas notebook Notes Plus novedades nube nubes de palabras OCR oddcast online open badges Open Sankoré open source operaciones oralidad orden Organización de la Información padres palillos pantalla PDF PDI pensamiento computacional perfil periodismo periódico photopeach photopin photoshop photoshop express picasa Pinterest pixenate pixlr plagios planetario plantilla plantillas plataforma PLE Pocket podcast popplet popularidad portable Portables portafolios portal post-its posts powerpoint PPT preguntas premios prensa present.me presentaciones prezi primaria Privacidad procesador de texto profesorado Programa programación pronunciación proprofs protanope protección prototipos proxy proyecto colaborativo proyectos proyectos europeos publicaciones publicación publicar contenido puzzles qr qrhacker questionform Quickscreenshare quimica quizbox quizz química radio ranking Readability reader readium Realidad Aumentada reconocimiento facial recurso didáctico recursos recursos digitales Redes Educativas Redes Sociales redimensionar redondear Reeder regalos relajación repositorio respuestas retoque digital revistas digitales robotica rotar roundpic RSS rúbricas scanner scratch screen screencastify screencastomatic secuencia de comandos google secundaria seguridad seo servidor simo simulación simulador sincronización sistema de información científica sistema de respuesta Sketchup SKYPE slide.ly Slidemypics SlideTalk smart smartphone software Software Libre Sonic Notify sonido SoundCloud spreaker stop motion Storify subtítulos SVG SWF sync símbolos tabla tablet tackk talk it tamaño tamborrada teachem Teamviewer tecnología TED templates test testeando text to speech texto thatquiz the noun project TIC tickets tightvnc time lapse timeline timerime Timetable Web tipografias tipografía tiro parabólico Tolosa toondoo trabajos colaborativos traductor transferencia tritanope trivial truco TTS tutorial TV Twitter twitterfeed typeform umapper unfollowersme unidades Unitag URL USB usuarios vacaciones valores vcard verbos video videoconferencias videojuegos Videotutorial vimeo viper Virtualbox Virtualización visibilidad Visible Tweets visualizar vlc VOKI voz vídeo wallwisher wav web web 2.0 Weebly wetranfer widget wire frames word wordle wordlens wordpress WorldTV Youtube
 
En la nube TIC Copyright © 2011 | Tema diseñado por: compartidisimo | Con la tecnología de: Blogger