Quiero enlazar mejor

Hoy me he planteado una mejor forma de enlazar, quizás estoy equivocado, pero suele ocurrir que cuando intento llegar a un punto interesante de la semántica mediante los elementos de HTML, encuentro que un simple enlace no es suficiente.

No hablo de describir “vas a este enlace” sino “este enlace está fuera de este dominio y sirve de ayuda o para complementar este tema”.

En la definición de los tipos de enlaces del W3C encuentro varias opciones, una de ellas es alternate, y dice:

Alternate

Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

Simple, crear un enlace que sea <a href="http://www.blogalia.com" rel="Alternate">Blogalia</a> no dice correctamente que eso es algo exterior, “más información”, sino que expresa “alternatividad”. Esto significa que en el documento que escribo existe otra versión alternativa, preparada para otro Agente de Usuario (Eje. Un navegador) y no que es un enlace externo con información relevante al tema.

Antes en el pasado existía algo que ayudaba pero era puramente de presentación, por ejemplo utilizando el target="_blank" podíamos intuir que iba a otra página, pero como esto está desaprobado, busco entre las opciones, y he llegado a la conclusión leyendo la documentación que lo mejor puede que sea utilizar el atributo rel="help".

¿Por qué utilizar “Help”? Veamos la definición:

Help

Refers to a document offering help (more information, links to other sources information, etc.)

No está tan mal esto, la definición bien lo explica -en inglés lo siento- referers to a document offering help, que refiere más información ofreciendo ayuda, esto podemos interpretarlo como “apunta a un enlace a una página de ayuda”, pero también “apunta un documento donde explica mejor o más detalladamente el tema”.

La explicación concluye con more information, links to other sources information, etc. esto sin dudas, da la pista final, (más información, enlaces a otras fuentes de información.

Creo que un buen enlace por ejemplo a la nota de Dean Allen: Pompignan Wine podría hacerse de esta forma:

… pueden ver una <a href="" rel="help" title="Pompignan Wine" hreflang="en" lang="en">nota sobre la cosecha de vino</a> y luego…

Y para dar un toque visual, que mejor que aprovechar uno de los trucos hechos por Brad Choate para sus enlaces externos, todo con CSS y escribiendo unas pocas líneas de CSS, las cuales he modificado a mi gusto:


a[rel="help"] {
padding-right:12px;
background-image:url(/images/external.gif);
background-position:right;
background-repeat:no-repeat;
}

La reglas de CSS son simples, he utilizado un selector de atributos, digo que cada vez que exista un elemento <a> y contenga un atributo rel="…" que a su vez éste rel="…" sea "help" entonces se aplican estas reglas.

De modo que no tendré que escribir cientos de veces <img src="…" /> cada vez que enlace un documento, tampoco tendré que utilizar una clase como lo hace Brad, pro que utilizar clases en los enlaces no es del todo semántico según mi nivel de comprensión en el tema.

Ahora, ¿Qué opinan sobre esto? ¿Creen que es bueno empezar a tomar esta medida? ¿Alguna otra sugerencia semántica o “coherente”?

33 Respuestas a la entrada “Quiero enlazar mejor”

Una de las cosas que todavía no entiendo relacionado a este tema es la utilización del atributo @rev=”…”@ básicamente es “reverse” pero no está bien explicado y todavía no le he encontrado un uso útil.

Si alguien lo sabe, puede colaborar también escribiendo sobre ello.

Desde luego, es una forma de enlazar mucho más explicativa, y viéndola en funcionamiento aquí mismo, creo que es mucho mejor…

no me gusta nada añadir mas cosas a los enlaces, si ya de por si es largo escribir un enlaze ponerte a escribir mas cosas… ufff casi que no

“pero como esto está desaprobado”

Pues cosas como esa parecen más bien ganas de tocar las narices al personal y comerse la cabeza pensando un modo correcto (cómo tu has hecho con esta anotación).

Qué si, que está muy bien todo este rollo de la estandarización, pero a veces parece más un martirio que una ventaja…

Creo que help debería apuntar a un recurso que te ayude a entender como usar o aprovechar mejor el recurso actual. Dado que la W3C también te permite crear tus propios tipos de relaciones, creo que seria mejor algo como rel=”knowMore” o rel=”external”

De esta manera conseguiríamos un uso más coherente de rel=”help” que, en mi opinión, está pensado como algo más parecido a la ayuda contextual en una aplicación.

Yo estoy con erik, salvo que surgan herramientas que automatizen el proceso de semantizar los enlaces tal y como propones, veo francamente muy pesado ir añadiendo “a mano”, enlace a enlace, toda esa información, salvo que se tenga la costumbre de incluir muy pocos enlaces (no es mi caso). Será por tanto cuestión de que la gente que entienda de programar en Java, Python, etc, presenten propuestas de automatización de estas tareas, en ese caso el primero que se apunta a esa tarea de adaptación hacia hábitos más “semánticos” soy yo mismo… Saludos.

Como sugerencia un pequeño “truco” que igual ya conoceis:

http://www.sitepoint.com/article/1041

erik, tu eres un usuario avanzado de la web. mucha gente no entiende el uso de las ventanas nuevas o de los popups, les crean confusion. Si los creadores del codigo no pusieran target=”_blank” la gente se acostumbraria a usar el menu contextual, con boton derecho verian que hay una opcion que pone Abrir en ventana nueva. Seguro que hay gente que ni lo sabe. Y realmente no se porque se usa una ventana nueva para documentos de fuera de un site. Si la gente quiere volver tiene el boton de Atras.

Diego el articulo me parece bien en el sentido de avisar a alguien de que vas a salir del dominio, como informacion extra. Pero no estoy muy seguro del uso de ventanas nuevas, ya sea por medio de target o de javascript.

bq. utilizar clases en los enlaces no es del todo semántico según mi nivel de comprensión en el tema…

Utilizar clases no es semántico en cuanto no hay clases estandarizadas. Cada cual las utiliza como le conviene, no hay convenciones. Lo del valor “help” para el atributo rel me parece algo restrictivo en cuanto a temática.
Por otra parte no entiendo bien por qué algo tan arbitrario en cuanto a características de un enlace como es su ubicación debe tener tanta importancia a nivel semántico. Me refiero a que si es sólo para diferenciar enlaces externos podría bastar con:
a[href ^="http://"] {…
Y no haría falta ningún atributo extra.
Al margen ya de estos temas, el propio contexto del documento también debe dejar clara la naturaleza de cada enlace, máxime cuando, por el momento, la inmensa mayoría de navegadores cuenta con un aprovechamiento muy limitado de todas estas cosas.
Respecto al atributo target, creo que no estaría de más recordar que su uso para abrir nuevas ventanas siempre fue, en cierto modo, ilegal, puesto que su función real era –y sigue siendo– especificar el marco de destino en los documentos con marcos.

bq …Si alguien lo sabe, puede colaborar también escribiendo sobre ello.

Pues si tu tienes, por ejemplo, en la página “loquesea.html” un enlace como este:
href="http://fulanito.com/manual.html" rel="bookmark"
fulanito puede poner, en su página “manual.html”, otro enlace como este:
href="http://minid.net/loquesea.html" rev="bookmark"
Es decir, es como un enlace hacia quien te ha enlazado, indicando el tipo de vínculo (en este caso “bookmark”) que establece contigo.

minid es una guía de referencia en español sobre diseño, usabilidad, etc. Entonces, por que no tomarse el mínimo trabajo de traducir del inglés al español un puñado de renglones?

En mi sistema, una debian con el Konqueror, los enlaces no se ven correctamente y aparecen como largas palabras superpuestas. Solo por informacion.

Con el mozilla perfecto ;)

En mi modesta opinion.

A mi me desorienta mucho que los enlaces externos se abran en la misma ventana, de hecho me resulta muy incomodo cuando leo un articulo que tiene varios. A mi me gusta tenerlos todos abiertos, lo veo más ordenado. Vuelvo a la página original en 1 click. Y pq es incorrecto? no acabo de enterder que abrir un enlace en una ventana externa sea incorrecto.

Excelente articulo Diego.

Una pequeña aclaración diego, no fue brad choate el que usó el truco para poner la imagen junto a los links, en el artículo Well, how does it look? explica que la idea de los links la cogió de Adam Kalsey’s en External Links in new windows

José Oliveras dice que:

bq. A mi me desorienta mucho que los enlaces externos se abran en la misma ventana…

Pero es que el que un enlace sea externo o no lo sea no significa, a efectos temáticos, nada en absoluto. Un enlace externo puede tener más relación con el tema de la página actual que cualquier otra página del mismo sitio.

bq. mi me gusta tenerlos todos abiertos,

Tú mismo puedes controlar eso con cualquier enlace (Mayús+click, menú contextual…) sin necesitar que sea el autor el que obligue a ello.

bq. no acabo de enterder que abrir un enlace en una ventana externa sea incorrecto.

Al margen de correcciones sintácticas, obligar a abrir un enlace en una nueva instancia es un castigo para los navegadores con pestañas, como Opera o Mozilla, donde puedes tener todas las páginas que quieras en una única ventana de navegador y a un click de distancia. Una nueva ventana, en ese caso, rompe su utilidad.

Y Xeo dice que:

bq. … explica que la idea de los links la cogió de Adam Kalsey?s en External Links in new windows

Recuerdo haber participado en un hilo sobre estrategias de ese tipo hace más de dos años en e.c.i.w.paginas-web. Y seguro que el tema ya había salido en cualquier otro sitio. No creo que en algo como esto tenga sentido la autoría.

Enlazar mejor
El weblog de Diego Lafuente (mini-d en la Red) es siempre una interesante fuente de consejos en cuanto a la buena composición de webs se refiere. Una muestra clara de ello es este artículo que trata sobre una mejor semantización…

Enlazar mejor
El weblog de Diego Lafuente (mini-d en la Red) es siempre una interesante fuente de consejos en cuanto a la buena composición de webs se refiere. Una muestra clara de ello es este artículo que trata sobre una mejor semantización…

No sé mucho de todos estos temas, y siempre entiendo la mitad de las cosas que habla minid, pero siempre entro porque me gusta su forma didáctica de explicar y para probar cositas nuevas. (Por ejemplo, me convenció de bajarme el Mozilla Firebird, que por ahora uso de navegador complementario).

Dicho esto, quiero decirle 2 cositas + a minid: 1. en mi IE (puesto en 800×600) la página se ve mal (la columna principal aparece abajo, recien cuando termina la de la izquierda)
2. La imagen que señaliza el link externo, en el IE no se ve.
Con el Mozilla no hay ningun problema… pero quería avisarte, nomás.

SI en efecto como en Internet Explorer no soporta CSS 2, más propiamente en la sección de contenido generado, el efecto no funciona, de todos modos la degradación aquí está bien, no queda nada roto… por suerte se ve perfectamente.

Sin dudas yo no utilizaría ni de sueños el atributo @target=”_blank”@ por que no es estándar y por que no me parece bueno…

sysifus
Gracias por los comentarios, veo que la forma “correcta” es como decís y la forma de navegar q uso (usamos la mayoría) es la menos apropiada, obviamente heredada de sites que no comparten o desconocen toda esta “metodología”.

Pues si es verdad que se pueden definir las etiq rel=”lo_que_sea”, me quedo con la propuesta de Victor.

Ah! Supongo q ya lo sabeis pero no esta mal decirlo: el Iexplorer no hace caso del comando de la CSS para a[rel="help"] {…}. Es lo de siempre.

Pues si es verdad que se pueden definir las etiq rel=”lo_que_sea”, me quedo con la propuesta de Victor.

Ah! Supongo q ya lo sabeis pero no esta mal decirlo: el Iexplorer no hace caso del comando de la CSS para a[rel="help"] {…}. Es lo de siempre.

Pues si es verdad que se pueden definir las etiq rel=”lo_que_sea”, me quedo con la propuesta de Victor.

Ah! Supongo q ya lo sabeis pero no esta mal decirlo: el Iexplorer no hace caso del comando de la CSS para a[rel="help"] {…}. Es lo de siempre.

Escrito por David González
Diciembre 9th, 2003 at 9:12 am

Quiero enlazar documentos PDF a un botón flash, así como una instalación de un programa, es decir, que al pulsar el botón, comience la misma.
¿Cómo puedo hacerlo?

Escrito por virginio
Febrero 6th, 2004 at 5:10 am

yo nesecito mucha ayuda para poder usar la computadsoraalguien me podria ayudar

Escrito por Anónimo
Marzo 11th, 2004 at 6:43 pm

No encuentro relevante saber si un link es externo o interno. Al fin y al cabo esto es la web; navegar por contenidos indistintamente del formato o ubicación. Esta era la idea de su creador.

Haunque si creo que podemos sacar de un link información relevante para quien lee pa pàgina web, como hacemos en http://blog.informaticamunicipal.com de forma que las noticias quedan como podeis ver en esta noticia
donde un icono nos indica el lenguaje de la pàgina de destino, de forma que si no lo entendemos, no nos molestamos en hacer click.

La opción de Kalsey’s en External Links in new windows no me parece muy accesible pero creo que el concepto es muy bueno, de un vistazo sabes que ese enlace va a un sitio externo, y el usuario elige si quiere navegar en esa misma ventana o utilizar la acción del navegador para abrir una nueva ventana.

Partiendo de la premisa que en un sitio accesible debe tener una página dedicada a la accesibilidad del sitio. En esta se puede explicar que cuando un enlace lleva a su lado el símbolo “>” (decorado diferencialmente con css) debemos entender que navegaremos a otro sitio distinto al nuestro pero relacionado con nuestro tema.

En el pondría esto:

En el el enlace seria así:

Texto a enlazar >

Donde class=”rel-external” en el archivo css quedaría así:

.rel-external {
font-size: 70%;
color: #333;
background-color: #ccc;
border: 1px solid #666;
cursor: help;
padding-right: 4px;
padding-left: 4px;
}

Tengo dudas sobre lo del , no se si es correcto aunque la validación del xhtml strict lo valida.

Y otra duda que tengo es como leen el símbolo ‘>’ los navegadores de voz.

¿Creen que se ppodría utilizar este sistema?
o es una barbaridad…

saludos

Me gustaria que ampliaran esto de los links internos y externos.
Yo tengo un magazin y por lo regular publico el articulo y una link al sitio de donde lo baje. Debo tener un link a mis archivos y un link _blank para que el sitio no se carge en mi frame.

Como trabaja entonces css y los frames.

POR FAVOR ACLARENME ESTO

Enlazar mejor
El weblog de Diego Lafuente (mini-d en la Red) es siempre una interesante fuente de consejos en cuanto a la buena composición de webs se refiere. Una muestra clara de ello es este artículo que trata sobre una mejor semantización…