Seguro ha escuchado los términos «enlace», «vínculo», «link» e «hiperlink«. Pues bien, todos ellos se refieren al mismo elemento dentro del contexto de la web.
Básicamente, el enlace es el recurso multimedia que utilizan los hiperdocumentos para conectarse con otros recursos disponibles en Internet.
Haciendo un símil con la producción editorial, el vínculo es la referencia bibliográfica que indica al lector dónde puede consultar y ampliar la información que está leyendo.
Por ejemplo, desde un libro de Carl Sagan es posible llegar, a través de una cita, a una publicación de Isaac Newton. En este caso, la cita funge como enlace entre ambos recursos.
De ahí la importancia de crear vínculos que generen sentido y valor.
Apariencia del vínculo web
El estándar de producción web indica que los enlaces de texto se deben presentar en color azul y con una línea sólida de subrayado. Sin embargo hay excepciones de acuerdo a la interfaz del usuario.
Por ejemplo, el enlace e-Lexia.com conserva las recomendaciones de renderización.
Sin embargo, el menú de navegación por categorías y el pie de página de este sitio web utilizan un colores diferentes, privilegiando la apariencia gráfica. Es una excepción válida, pero que se recomienda usar con cautela.
¿Estás buscando un profesor digital?
Aumenta las competencias digitales de tus estudiantes o colaboradores. Como comunicador y magister en educación digital, estoy preparado para ser parte de tu estrategia.
Estados de los enlaces
Los vínculos tienen cuatro estados o comportamientos. Estos indican al usuario qué sucede con el recurso que está enlazado.
Link: significa que el recurso de destino no ha sido visitado, teniendo presente los registros que almacena el navegador en la sesión actual. Se presenta en color azul.
Hover: aparece cuando el puntero del ratón está sobre el enlace y su área activa. Su color estándar es gris.
Active: indica que el puntero del ratón está presionando el enlace y activará alguna acción al liberarse (visitar una página web, abrir una ventana emergente, desplegar un contenido, entre otros). El color estándar es el rojo.
Visited: contrario al primer estado, aquí indica que la página de destino ya ha sido visitada. Su color estándar es el violeta.
Focus: indica que el foco de acción está sobre ese elemento. Es un estado intermedio entre el hover y el active. Se utiliza especialmente en la navegación por teclado.
Declaraciones CSS
Para conservar el estándar, se anexan las declaraciones CSS para los cuatro estados principales del enlace:
/* Enlace sin visitar */
a:link {
color: blue;
}
/* Enlace visitado */
a:visited {
color: violet;
}
/* Puntero encima */
a:hover {
color: grey;
}
/* Puntero accionando */
a:active {
color: red;
}
—
Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter
Licencia: Esta publicación, escrita por Juan Carlos Morales Saldarriaga, se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/diccionario-tic.
