Los hiperenlaces conviven con nuestros documentos en la red desde sus inicios ya que son parte fundamental de su finalidad: enlazar recursos en la red; páginas, documentos, archivos, etc.
Antes de intentar comprender la esructura formal de los enlaces en la web, debemos entender el concepto URL (identificador único de recurso).
Una URL digamos que es la clave única en la red para acceder a un recurso, como por ejemplo una imagen alojada en nuestro servidor.
Está compuesta por tres partes:
- Protocolo. Normalmente http://, o https:// para los entornos seguros, o ftp://, etc.
- Servidor. Nombre de dominio o ip pública del servidor que sirve el recurso, como por ejemplo velneo.es
- Ruta. Ruta interna al servidor que lleva hasta el recurso compartido y servido, como por ejemplo /cgi-vel/alias-aplicacion/imagen.jpg para un archivo imagen.jpg dentro de la carpeta raiz de la aplicación con ese alias servida por un vServer.
Existen dos tipos de url: absoluta y relativa.
Una url absoluta contiene las tres partes comentadas; protocolo, servidor y ruta.
Una url relativa prescinde de alguna de las partes anteriores. Por ejemplo, si ya estamos en el documento http://midominio.com/cgi-vel/alias-aplicacion/index.pro, para acceder al proceso portada.pro de la misma aplicación, la url podría ser simplemente portada.pro en lugar de http://midominio.com/cgi-vel/alias-aplicacion/portada.pro
Xhtml define toda una serie de reglas para acceder por ruta relativa a recusos compartidos: si el origen del enlace y el destino se encuentran en el mismo directorio, si el destino se encuentra en el nivel superior, en un nivel inferior, muy lejos, etc, pero como nosotros trabajamos en Velneo, nuestras páginas web siempre van a tener una ruta relativa: proceso-destino.pro, ya que nuestras páginas xhtml siempre las vamos a componer por proceso.
Veamos pues como es un elemento enlace.
ENLACE (<a></a>)
Un enlace es un elemento en línea y dispone de los siguientes atributos, entre otros:
- name, para poder referirnos a un enlace por su nombre único.
- href, para indicar la url del recurso enlazado.
- type, para indicar al navegador sobre el tipo de elemento enlazado; imagen (image/gif), documento (text/css o application/rss+xml), etc.
- rel, para indicar la relación entre el documento actual y el enlazado, muy útil a la hora de indicar a Google si debe seguir e indexar el contenido enlazado o no.
- hreflang, para indicar el idioma del recurso enlazado (es-ES para español de españa, o es-AR para español de Argentina, por ejemplo).
- charset, para la codificación del recurso enlazado (utf-8 o iso-8859-1, por ejemplo).
Veamos algunas aplicaciones de estos atributos.
El atributo name se suele utilizar para lo que se conoce como "anclas" o "anchors".
Si tenemos un enlace del tipo <a name="punto1"></a> dentro de un documento podemos generar un enlace a él de la siguiente forma <a href="#punto1"></a>, como por ejemplo para acceder desde una tabla de contenidos al principio de una página "larga" hasta el Punto 1 dentro de la misma página.
Si el origen del enlace está en la página index.pro, por ejemplo, y el destino está en la página faq.pro en el ancla con name="faq1", el enlace sería <a href="faq.pro#faq1"></a>.
El atributo rel se suele utilizar por ejemplo para decirle al robot de Google si debe seguir un enlace e indexar el contenido del documento enlazado, cuestión muy importante en el trabajo SEO de una web.
Si indicamos el atributo rel="noindex, nofollow", le estamos diciendo al robot de Google que no siga el enlace y que no indexe el contenido del documento enlazado, tema muy interesante si no queremos que páginas "inútiles" como el contactar o condiciones de servicio resten importancia al resto de páginas de nuestra web con contenidos frescos e interesantes que sí queremos que Google indexe.
Dentro de la cabecera de nuestro documento encontraremos unos tipos de enlaces especiales como por ejemplo:
- <link rel="stylesheet" type="text/css" href="/css/estilo.css" />, para hacer referencia a la hoja de estilos css que se utiliza para renderizar el documento xhtml
- <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />, para hacer referencia al icono de nuestra página web que se mostrará en la barra de direcciones del navegador web o en el enlace al ser añadido a favoritos.
- <link rel="alternate" type="application/rss+xml" title="Canal RSS" href="/feed.xml" />, para hacer referencia al documento xml donde publicamos periodicamente las actualizaciones de nuestra web.
- <script type="text/javascript" src="/js/javascript.js"></script>, para hacer referencia al archivo que contiene la definición de las funciones javascript que usaremos en nuestro documento.
Me gustaría comentar un par de tipos de enlace cuyo uso está desaconsejado:
- Los enlaces <a href="mailto:cuenta@dominio.com">correo</a>, que abren el programa asociado en el equipo al envío de correo electrónico y componen un nuevo correo indicando en el Para, la dirección indicada. Su uso está desaconsejado debido al mal uso de la web de robots malintencionados que recolectan emails que aparecen en webs y los inundan de spam, y más desaconsejado está el intento de incluir el Asunto del mensaje o parte del contenido, pasando los parámetros subject o body en el enlace, ya que esto es una violación de seguridad.
- Los enlaces por javascript. Un enlace sin destino y con un comportamiento onclick que abra una url no es un enlace. Un usuario normal puede tener dificultades para seguirlo, y no digamos un usuario ciego como Google que no ve el javascript asociado ni el enlace compuesto en la función.
Y hoy hasta aquí. En la próxima entrega seguiremos con las Listas, un elemento muy, muy, muy útil para menús de navegación usando un poco de css.
Hasta entonces,
Life is soft!
No hay comentarios:
Publicar un comentario