Los marcadores son anclas específicas, para ver contenido interno en páginas o entradas
Se denomina ancla, a nivel general, a cualquier tipo de enlace. Por contra, un marcador, designa un tipo muy concreto de enlace, podríamos decir a nivel general que se trata de anclas internas.
Las anclas, se conocen bajo código como HTML Links y dentro de este tipo vamos a ver unos muy característicos: bookmark, es decir marcadores.
Enlazan un contenido a otro de la misma página o entrada de nuestra web, hacen saltos rápidamente a la información que nos interesa.
Normalmente son utilizados para mostrar el índice de un contenido perteneciente a una página o entrada. Haciendo clic sobre cada elemento, permiten acceder de forma rápida al mismo, sin necesidad de ver un contenido previo que no sea de nuestro interés.
Un ejemplo práctico, en un artículo:
Imagina que tienes una lista de nombres en la parte superior de un artículo. Puedes vincular cada nombre a un lugar diferente más abajo, por lo que los visitantes pueden ir directamente a la información sobre el nombre en particular que les interesa. A continuación, puedes vincular con un carácter especial directamente a los lectores de nuevo a la lista de nombres.
Un ejemplo práctico, de la vida cotidiana:
Tienes un libro, el cual a su vez está dividido en diferentes capítulos donde se habla de varios autores que tocan una especialidad diferente. En las librerías te permiten comprar marcadores de páginas, los cuales sirven para separar el contenido que te interesa y acceder en cualquier momento de forma rápida al contenido que separaste, es decir marcaste.
Nota 1: WordPress a partir de la versión 3.9 eliminó esta pestaña de su editor visual. Yo comencé en WordPress en la versión 3.7 y recuerdo que mostraba un icono en forma de ancla, la cual se utilizaba como marcador. Desconozco su destierro porque a decir verdad, es algo útil, como verás.
Índice
- ¿Por qué son importantes los marcadores en diseño web?
- Easy Smooth Scroll Links (plugin WordPress)
– Características - Tutorial básico
Paso 1. Instalación y activación del plugin
Paso 2. Ver en que ruta está por si queremos cambiar algunas opciones
– Explicación al detalle, de lo que ofrece la pantalla opciones
Paso 3. Empezar a trabajar con los marcadores
– Enlaces del índice, precedidos del símbolo almohadilla (#), para identificación individual
– Uso del icono marcador (texto de enlace), ancla que designa un vínculo específico - Videotutorial
– Observaciones - Artículos interés
- Opinión
¿Por qué son importantes los marcadores en diseño web?
- Facilita a tu lector su comodidad al desplazarse por el índice de tu contenido
- Despierta mayor interés por leer tu artículo, ya que el índice es donde se muestra todo el contenido del mismo
- Mejora la permanencia en nuestro sitio web, sobre todo si acceden desde una pantalla móvil
- Recuerda: las entradas que mejor posicionan en el buscador Google, son aquellas con una longitud de 1.000 (mil) a 4.000 (cuatro mil) palabras, facilita el contenido del que vas a hablar desde el principio, mostrando el índice
Yo mismo me lo tengo que aplicar aún para entradas más antiguas.
Easy Smooth Scroll Links (plugin WordPress)
El plugin que yo utilizo se llama: Easy Smooth Scroll Links (autor: Jeriff Cheng).
Permite a cualquier usuario, fijar un marcador donde desee, de manera muy fácil desde el editor visual.
Para la gente que le gusta WordPress pero siente una relación de amor/odio por los plugins, le diré que este plugin respeta el estándar HTML.
Si el día de mañana desactivamos o borramos este plugin, los marcadores seguirán siendo 100% operativos (siempre y cuando no usemos la opción de shortcodes). Las animaciones desaparecerán, porque son mostradas gracias a este plugin.
Las animaciones, están relacionadas todas ellas con el movimiento suave (o no) del enlace que te lleva al marcador correspondiente.
Por norma general, cuando introducimos los marcadores por código HTML (sin activar plugin) no hay ningún efecto suave al llevarnos desde el enlace del remitente hacia el propio de destino, por lo que la información se presenta ‘ipso facto’ (en el acto).
Características
- Puedes determinar la velocidad y el valor de desplazamiento
- Elegir entre 30 efectos de animación de desplazamiento
- Puede excluir ciertos anclajes de desplazamiento
- Funciona en todos los principales navegadores: IE, Firefox, Chrome, Safari…
- Botón de ancla en editor visual
- Shortcode soportado
Nota 2: personalmente no recomiendo el uso de shortcodes, porque si el día de mañana decides borrar el plugin, los shortcodes se mostrarán en tu web y tendrás que ir artículo por artículo borrándolos. El autor los ofrece en caso que no aparezca el icono de marcador en el editor visual. En la versión 2.1 aparece, además es la que vamos a analizar.
Tutorial básico
Me basaré en mi propia experiencia con este plugin, el cual de todos los que tiene el autor del mismo, éste es el único que actualiza. Es de los pocos que quedan relacionados con este tipo de utilidad. Es algo que se puede hacer perfectamente por código HTML, pero este plugin nos brinda comodidad y rapidez, desde el editor visual.
Paso 1. Instalación y activación del plugin
Acudimos al repositorio de WordPress.org (en adelante WP) para buscar y descargar el plugin. También lo puedes hacer desde el apartado correspondiente en tu Escritorio de WP. Debemos descargar / instalar / activar Easy Smooth Scroll Links (autor: Jeriff Cheng) y automáticamente nos añade al editor visual, un icono con forma de marcador de página (típico en libros).
Paso 2. Ver en que ruta está por si queremos cambiar algunas opciones
Vamos a ver sólo una captura de pantalla porque es un plugin que hace lo que dice y no viene ningún elemento extra de más. De hecho, las 3 primeras características son las que vamos a detallar.
La ruta para modificar las opciones del plugin, es muy sencilla, ya que se hace desde el propio apartado de Plugins. Buscamos el mismo, y hacemos clic en: Settings (Opciones).
A continuación, nos encontramos con la pantalla de opciones de la cual te muestro una mini captura, haz clic sobre ella para ver todas opciones y explicación de cada una de ellas.
Explicación al detalle, de lo que ofrece la pantalla opciones
- FAQs – Rate it – Support Forum —- Suggestions? Contact Me
Varios enlaces a: preguntas frecuentes (FAQ), valoraciones del plugin (Rate it), foro de soporte en WordPress.org (Support Forum), y contacto directo con el autor por email o skype (Contact Me). - Everyone should Read these articles:
HTML 5 – Using attribute ‘id’ instead of attribute ‘name’ for Anchors
Este plugin usa el estándar ‘id’ mientras que ‘name’ se usaba a principios de 2014. - Scroll Speed ( smaller number, faster, default is 900 )
Rapidez con la que nos traslada de un contenido a otro. Cuanto más bajo es el valor, más rápido se desplaza. - Offset ( default is 20 )
Altura superior en la que nos deja el marcador, con respecto a la nueva información que nos enlaza. Si ponemos el valor en 0, el titular quedará justo al ras de la parte superior del navegador. - Scrolling Animation Effects ( default is easeInQuint )
Diferentes efectos de animación con los que nos trasladan de un contenido a otro, pueden ser más suaves o más bruscos, ir probando. - Exclude Anchors Beginning With ( default is #tab #quicktab #pane )
Excluir anclas que empiezan por cierta palabra. Especialmente indicado para quien use WooCommerce. - Exclude Anchors Exactly Match
Excluir anclas más específicas. Especialmente indicado para quien use WooCommerce. - Enable Scrolling from One Page to Another ?
Warning: This feature is experimental, might cause conflict with some slider plugins, or blank pages.
Habilitar marcador de una página a otra, con estas animaciones. Se avisa que es una característica experimental que puede provocar conflictos si tienes plugins para slider o páginas en blanco.
Paso 3. Empezar a trabajar con los marcadores
La forma normal de proceder, es siempre ir primero al titular de destino y poner allí tu ancla, en nuestro caso el marcador (dibujo que figura en el icono del editor visual). Pero en mi caso, lo voy a hacer al revés y lo vais a entender mucho mejor.
No escribo el índice hasta que no he terminado el artículo y puesto los titulares (h3, h4, h5) que dividen diferentes apartados informativos.
Una vez que escribo el índice, es cuando identifico cada enlace precedido de este símbolo: “#” al que le sigue el nombre que yo quiera. Sí, sí, conoces dicho símbolo bajo el nombre de almohadilla (muy usado en los móviles). ¿Qué enlaces son esos? Pues el nombre de cada titular, al cual queremos que accedan (mediante el marcador) de forma cómoda y rápida. Lo vemos por imágenes.
3.1. Enlaces del índice, precedidos del símbolo almohadilla (#) para identificación individual
El nombre que sirve de enlace, es lo que vamos a ver en este apartado y el ancla que sirve de destino, lo veremos en el siguiente.
Me acerco al primer titular del índice, y selecciono con el cursor izquierdo del ratón, un máximo de 60 caracteres. Después hago clic sobre la herramienta: insertar/editar enlace (icono cadena, del editor visual) y acto seguido, en la casilla correspondiente, introduzco primeramente el símbolo almohadilla (#) y tras él, un nombre que identifique claramente a ese titular y no se repita nuevamente. Finalmente, aplica los cambios.
El primer texto de enlace es: ¿Por qué son importantes los marcadores en diseño web? El enlace que voy a elegir es: #MarcadoresDisenoWeb
Yo siempre he visto las palabras compuestas de los enlaces a marcadores, escritas todas juntas. De hecho, el autor del plugin también lo tiene así. Nunca ha de haber espacios entre las palabras. Pueden ir:
- Juntas todas las palabras:
#marcadoresdisenoweb - Juntas pero la primera letra de cada nueva palabra se presenta en mayúscula:
#MarcadoresDisenoWeb - Separadas todas las palabras por guiones bajos, con el fin de ver mejor el mensaje:
#Marcadores_Diseno_Web - Separadas todas las palabras por guiones altos, con el mismo fin que anteriormente:
#marcadores-diseno-web
Por ejemplo, WordPress.com usa este método que pudiera parecer el más lógico desde siempre, pero antaño no se usaba.
3.2. Uso del icono marcador (texto de enlace), ancla que designa un vínculo específico
Una vez introducido el enlace desde el cual, al hacer clic, iremos al contenido desarrollado… ahora falta precisamente establecer ese marcador hacía donde queremos conducir a nuestro usuario. ¿Cómo se hace eso?
Vamos titular por titular donde desarrollamos la información y justo al inicio del mismo, ponemos el marcador. Para lo cual debemos ir a las herramientas del editor visual y hacer clic sobre la que tiene forma de marcador (separador de libros). Tras esto nos pide un nombre como texto de enlace. Deberemos poner el mismo que en el paso 3.1 pero esta vez sin el símbolo almohadilla (#). Haz clic en aceptar para terminar la acción. Y listo.
Una vez terminados todos estos pasos, te aparecerá delante del titular, un pequeño icono cuadrado con el símbolo de un ancla en su interior. Señal que has hecho bien el proceso.
Ahora repite este proceso una y otra vez hasta que termines con todos los titulares mostrados en el índice.
Esta acción la puedes realizar para muchas más cosas, aquí sólo te di una idea de su uso más común. Incluso podríamos habilitar un nombre que indicará la acción para volver al índice y establecer en la parte superior de éste un marcador (ancla específica) con mismo nombre, para que haga el efecto deseado. Probemos con una imagen (sí, también se puede).
Videotutorial
- WordPress: marcadores, acceso rápido al contenido interno
Los marcadores son anclas específicas, enlazan contenido interno a otro en la misma página o entrada de nuestra web, hacen saltos rápidamente al contenido que nos interesa.
Observaciones
En el tiempo 17′:27″ declaro que no se puede volver a repetir el nombre en un enlace interno. En realidad, para el ejemplo que estoy utilizando, sí se puede. Ya que se refiere a ‘volver al índice’.
Podemos escribir diferentes palabras que sirvan de enlace para el mismo tipo de acción (subir, top, volver al índice) y siempre se vinculen: #TopIndice (punto 3.1.) a un mismo texto de enlace: TopIndice (punto 3.2.).
Artículos interés
No sólo hay artículos, sino también guías y webs de aprendizaje. Os puede ser de utilidad en caso que queráis aprender el código necesario a introducir aunque sin efectos de animación.
- W3Schools Online Web Tutorials (HTML Links)
Esta web es un sitio online desde la que aprender código relacionado con: HTML, CSS, JavaScript. Permite estudiar con ejemplos prácticos, incluso pistas para resolver la práctica. También hace exámenes y expide certificaciones de dichos estudios. - Use Page Jumps (WordPress.com)
En este apartado los usuarios de WordPress.com se les indica como pueden hacer saltos dentro de la misma página o a otras, con el ancla específica ‘Page Jumps’ que es lo que nosotros hemos visto aquí bajo el nombre de ‘Marcador’. A ellos se les explica la forma de hacerlo desde la pestaña HTML, es decir por código. Y es aquí donde vemos que la separación del nombre, se efectúa con guiones altos. - Our favorite set — CopyPasteCharacter.com (actualizado 10-10-2017: deshabilite este enlace por ser considerado un sitio de phishing aunque nunca tuve esa sensación, he preferido prevenirte)
En esta web nos permite elegir el carácter que queramos para indicar la acción que deseemos. La esquina superior izquierda contiene una serie de símbolos que al hacer clic sobre ellos, nos permite copiar el símbolo como código HTML, o volviendo a pulsar sobre los símbolos, podemos copiar y pegar el símbolo en el editor visual (esta opción funciona mejor en navegador ‘Mozilla Firefox’). - Preguntas frecuentes, plugin ‘Easy Smooth Scroll Links’
Se analiza el uso del atributo ‘id’ en lugar de ‘name’, el uso del shortcode en caso que no se visualice el icono marcador en el editor visual, como deshabilitar los efectos de animación en algunas anclas, soluciones en caso que no trabaje el plugin (versiones anteriores a la 2.1). - 05-06-2012. Cómo crear enlaces anclados internos (y añadir una función al editor de WordPress)
En este sitio web nos advierten: “El plugin del botón ‘Anchor’ de TinyMCE ya no viene incluído en las últimas versiones de WordPress (3.9, 4.0…), es decir que ya no es posible añadirlo con el método que se explica aquí (ni siquiera con el plugin ‘TinyMCE Advanced’)”.
Opinión
No comprendo cómo WordPress decidió prescindir en el editor visual, de esta utilidad, a partir de las versión 3.9.
Quizás años atrás no se diera importancia porque los artículos no solían ser de gran envergadura, pero hoy día sabiendo que el buscador de Google valora para el SEO, artículos que comprenden entre 1.000 (mil) y 4.000 (cuatro mil) palabras, es algo que se hace necesario para confeccionar un índice que facilite la navegación de nuestro usuario por el artículo o página. ¿No crees lo mismo?
Por ejemplo, una de las personas que me parece más se trabaja un artículo de valor de mi gremio (diseño web), es Ernesto G. Bustamante. Puedes ver cualquiera de sus artículos en el blog de la academia Aula CM (Escuela de Comunicación y Marketing en Madrid), donde además da cursos sobre esta materia.
Todos los artículos de Ernesto son de sobresaliente, porque hasta el más mínimo detalle que necesites saber sobre la temática que trata, te la incluye. Ahora bien, a mi parecer lo único que le falta para tener ‘matrícula de honor’, es precisamente tener un índice. No sólo que indique todos los temas a tratar en dicho artículo, sino que sirva de enlace para acceder a ese apartado en concreto, rápidamente.
Déjame tu opinión, si consideras que este artículo te ha sido útil y si no es el caso, sugiéreme cómo mejorarlo.
Fuente imágenes
Ver apartado relacionado en mi Pinterest.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.