Identificadores e Hipervínculos (I)

- Hola, ya estoy aquí otra vez.

- Hola, yo también. ¿Qué tal?

- Bien, gracias... ¿Preparado para el siguiente tutorial?

- Espero que sí. Hoy toca hablar de identificadores e hipervínculos...

- Sí, ¿has preparado una lista de tus páginas favoritas como te dije?

- Sí, está todo listo. ¿Empezamos?

- Muy bien. Si recuerdas, una de las primeras cosas que te dije en el primer tutorial es que cada recurso disponible en la Web necesita un identificador único que le diferencie de todos los demás.

- Sí, ya me acuerdo.

- Bien, ese identificador se llama Identificador Uniforme del Recurso, en inglés Uniform Resource Identifier, y sus siglas, por las que se le conoce habitualmente son URI.

- O sea, que cada recurso tiene un URI, ¿no?

- Exacto.

- Y cuando dices "recurso", ¿a qué te refieres exactamente?

- A cualquier cosa. Puede ser una página web, una imagen, un sonido, un vídeo, un fichero almacenado en una computadora, un mensaje de un grupo de noticias, una dirección de correo electrónico, un párrafo de un página de un libro electrónico... Pero no sólo eso: también puede ser algo que no esté en la red: un libro, una organización, incluso una persona.

- Vaya... je, qué cosas...

- Sí, es lo que yo digo. El caso es que dar con una forma de poner nombres a cosas tan diferentes entre sí no es tan sencillo, y por eso tuvieron que inventar un sistema completo con sus reglas. Y me gustaría explicarte un poco las reglas para que las conozcas.

- Muy bien, pues ¡adelante con ello!

- Bien. Existen dos tipos de URI: los URN y los URL.

- Empezamos bien. ¿En qué se distinguen?

- Existen dos maneras distintas de identificar un recurso, según la finalidad que se persiga: podemos identificar un recurso por su nombre, o podemos identificarlo por su localización. El URN es un nombre ("N" de "name", "nombre") y el URL es un localizador ("L" de "locator", "localizador").

- Bien, veamos, a ver si lo entiendo. Si yo soy un recurso, mi URN sería mi nombre propio, y mi URL sería por ejemplo mi domicilio, ¿no?

- Sí, bueno, al menos básicamente esa es la idea. Nosotros en nuestras páginas web sólo vamos a usar URLs, así que de los URNs nos olvidamos.

- Muy bien, olvidados.

- Los URLs tienen una sintaxis que depende del tipo de recurso.

- Explícate un poco, anda.

- A ver. Por ejemplo, los URLs de las páginas web tienen una sintaxis que no es igual que la de los URLs de las direcciones de correo electrónico. Según el tipo de recurso, el URL se estructura según un esquema diferente.

- Creo que te entiendo, pero me estoy perdiendo. Mejor que me pongas algún ejemplo.

- Eso está hecho. Esto es un URL de una página web:

http://www.conclase.net/index.html

Y esto es un URL de una dirección de correo electrónico:

mailto:html@conclase.net

- Ya veo. Entonces lo que pones a la izquierda te dice el tipo de recurso...

- ...y según el tipo de recurso, la parte de la derecha tiene una sintaxis diferente.

- Mmm, sí, entiendo. Es fácil.

- Entonces vamos a profundizar un poco más...

- Si te has fijado, los URLs del tipo http están formados por un grupo de palabras separadas por barras inclinadas, como por ejemplo, http://html.conclase.net/tutorial/index. A estos URLs se les llama URLs genéricos, y a los que no son así, se les llama URLs opacos. Por ejemplo, los URLs de tipo mailto son URLs opacos.

- Er... ¿y eso me lo dices o me lo cuentas?

- Verás, el motivo por el que se distingue entre unos y otros es porque los URLs genéricos pueden ser relativos...

- Te advierto que no me entero de nada de lo que dices...

- Muy bien, te voy a poner un ejemplo.

- Sí, sí, un ejemplo.

- Está bien, vamos a hablar de los URLs del tipo http, que son los que se refieren a páginas web y al resto de los documentos que se transmiten por el protocolo HTTP. Esos son los que usarás con más frecuencia en tus páginas web.

- Ok, soy todos oídos.

- La sintaxis de los URLs http sigue el siguiente esquema:

http://conclase.net:80/html/recursos/pagina.html?parametro

Este URL tiene cinco partes diferentes:

1. http es como sabes el nombre del esquema, dice qué tipo de URL le sigue.
2. conclase.net es el nombre de la computadora en que está almacenado el recurso. En realidad no tiene por qué ser un nombre de dominio, también puede ser un número, pero de eso no nos preocupamos.
3. :80 es el número del puerto de la computadora por el que salen los documentos transmitidos por el protocolo HTTP. 80 es el valor por defecto, si no pones nada se supone que es el 80.
4. /html/recursos/pagina.html es la ruta de acceso al recurso en cuestión. Esto es parecido a los ficheros de tu disco duro. En este caso es algo así como el fichero pagina.html que está en el directorio (o carpeta) recursos que a su vez está en el directorio html que a su vez está contenida en el directorio principal o raíz del dominio.
5. Por último, parametro es una cadena de parámetros que recibe algún programa que esté en el servidor. De momento pasamos de eso, ya hablaremos en el futuro.

¿Está todo claro hasta aquí?

- Sí, creo que sí.

- Bien. Este URL era un URL absoluto. Te dice en qué máquina está el documento y en que directorio. Pero muchas veces es más práctico utilizar URLs relativos...

- Pero a ver, ¿qué es un URL relativo?

- Un URL relativo te da la localización de un recurso con respecto a la localización del recurso que contiene al URL.

- ¿Mmmm...?

- Para ponerte un ejemplo gráfico, imagínate esta situación: estamos en la cocina de tu casa y te pregunto: "¿Dónde está el ketchup?"; y tú me contestas: "en la nevera, en el segundo estante". Pero también me podrías haber dicho "En el Universo, en la Vía Láctea, en el Sistema Solar, en el Planeta Tierra, en el continente Europa, en el país España, en la ciudad Madrid, en la calle José Abascal, en el portal número 140, en el piso 4, en la puerta C, en la cocina, en la nevera, en el segundo estante".

- Je je, no, no creo que te hubiera dicho todo eso, pero creo que te entiendo. Lo primero sería un URL relativo, y lo segundo un URL absoluto, ¿no?

- Exacto. Lo primero, "en la nevera, en el segundo estante", sería un URL relativo, con relación a la cocina. Como veo que lo has entendido, vamos a ver más a fondo la sintaxis para los URLs relativos.

- Muy bien.

- Hablemos de URLs relativos. Hemos dicho que los URLs relativos sólo se pueden usar con URLs genéricos, como los del tipo http.

- Sí, lo dijiste antes, aunque no me enteré muy bien.

- Todos los URLs genéricos tiene una ruta de acceso. Por ejemplo, en el URL http://conclase.net/html/recursos/pagina.html, ¿cuál sería la ruta de acceso?

- Pues, según lo que me has dicho antes, sería lo que va entre el número del puerto y los parámetros. Supongo que en este caso sería /html/recursos/pagina.html.

- Sí señor. Pues bien, el URL base de un recurso es todo lo que hay en el URL absoluto del recurso, hasta la última barra inclinada inclusive. O sea, que en este ejemplo, el URL Base sería http://www.conclase.net/html/recursos/

- Ya... ¿y si no hubiera ninguna barra, por ejemplo, http://www.conclase.net?

- No, siempre hay una barra. En realidad es http://www.conclase.net/. Este URL se refiere al fichero que se carga por defecto en el directorio raíz (el directorio /) del dominio.

- Entiendo. En este caso el URL base es igual que el URL absoluto, ¿no?

- Sí. Bueno, pues el URL base es la localización con relación a la cual se declaran los URLs relativos. Como la cocina del ejemplo de antes.

- Mmm, necesito un ejemplo.

- Sí, imagina el recurso http://www.conclase.net/docs/html/doc1. Su URL base es http://www.conclase.net/docs/html/. Entonces si escribes en doc1 el URL relativo doc2, estás haciendo referencia al documento http://www.conclase.net/docs/html/doc2.

- Ya veo. Añades el URL relativo al URL base y te da el URL absoluto, ¿no?

- Exactamente. Por ejemplo, el URL manual/css/ correspondería al directorio http://www.conclase.net/docs/html/manual/css/, etc. Como ves los directorios siempre acaban con una barra, y los ficheros sin una barra.

- Entiendo.

- De todos modos, no siempre es tan directo como añadir el URL relativo al URL base, hay algunas excepciones...

- ¡Cómo no!

- El directorio ".." se refiere al directorio padre. En nuestro ejemplo, ../css/ correspondería a http://www.conclase.net/docs/css/.

- Ya, es como si quitaras del URL base todo lo que hay después de la penúltima barra.

- Sí, justo. Puedes concatenar varios hasta llegar al raíz, por ejemplo: ../../index.html corresponde a http://www.conclase.net/index.html

- Muy bien, está claro.

- El directorio "." se refiere al directorio actual, o sea, que es lo mismo ./hola.txt que hola.txt

- Muy bien, no le veo mucha lógica, pero bueno.

- Un URL relativo que comienza con "/" sustituye a toda la ruta de acceso del URL base. Te quedas sólo con el nombre de la máquina y el puerto.

- A ver, a ver, entonces /hola.txt sería http://www.conclase.net/hola.txt, ¿no?

- Sí. Y por último, un URL que comienza con "//" sustituye a todo lo que hay en el URL base desde el nombre de destino incluido.

- Por ejemplo, //www.yahoo.com/ correspondería a http://www.yahoo.com/, ¿no?

- Sí, muy bien. Pues ya está. Eso es todo lo que tienes que saber sobre URLs relativos.

- Creo que lo entiendo más o menos bien.

- Como ves usando URLs relativos nos podemos ahorrar teclear un montón, pero sobre todo nos permite aislar partes enteras de un sitio web de su contexto. Por ejemplo, trabajando con URLs relativos, puedes crear tu sitio web en el disco duro de tu ordenador, puedes probar todos los vínculos y navegar perfectamente de unas páginas a otras, porque sólo usas caminos relativos: retrocede dos directorios, entra en este directorio, lee este fichero. Da igual que las páginas estén en tu ordenador, en el mío, en www.conclase.net o en www.rediris.es

- Pues tienes razón, no se me había ocurrido...

- Bueno, por ahora tenemos URLs para rato. Vamos a ponerlos en práctica...

- En el tutorial anterior te dije que para crear hipervínculos en HTML se utiliza el elemento A.

- Sí, lo recuerdo.

- Bien, entonces es muy fácil. Un hipervínculo tiene tres características que lo definen: de dónde sale, hacia dónde va, y el tipo de vínculo.

- Las dos primeras las comprendo, pero la tercera no.

- En realidad la tercera característica, el tipo de vínculo, no es excesivamente importante. Por ejemplo, en el caso típico de un vínculo que apunta al capítulo siguiente, el tipo de vínculo es "Next" ("Siguiente"). Pero no nos preocupemos por eso de momento.

- Muy bien, lo que tú digas.

- El elemento de HTML A permite determinar estas características. ¿De dónde sale? De donde hayamos puesto el elemento en el código. ¿A dónde va? A donde diga el valor del atributo href del elemento. Incluso te permite determinar el tipo de vínculo.

- Ya veo. Y el valor del atributo href es justamente un URL, ¿no?

- No exactamente. Concretamente, es una referencia URL. Una referencia URL es un URL al que opcionalmente se le puede añadir un identificador de fragmento. Por ejemplo, imagina que quieres hacer un hipervínculo al cuarto párrafo de una página web. Pues sólo tienes que dar un identificador de fragmento a ese párrafo, y para apuntar a él añades al URL de esa página web el identificador de fragmento, separado por el símbolo #.

- Ya... ¿por ejemplo?

- Por ejemplo, <a href="../manual/instalacion.html#montaje">

- Ya veo. ¿Y cómo se asigna un identificador de fragmento a un... fragmento?

- Pues, ¡con el elemento A!

- ¡Ah, claro, ya me acuerdo! Lo vimos en el tutorial anterior. Para que un elemento A sea el origen de un hipervínculo, hay que darle un valor a su atributo href, y para que sea el destino de un hipervínculo, hay que darle un valor a su atributo name.

- ¡Sí, muy bien! En realidad también puedes usar el atributo id en lugar del atributo name. Por ejemplo:

<p><a id="montaje">El montaje</a> del equipo es sencillo y no necesita herramientas especiales, etc., etc.</p>

- Sí, ya entiendo.

- Por cierto, si el autor de una página no ha definido destinos de vínculo en su página, difícilmente podrás crear hipervínculos a partes de esa página. Y lo malo es que en general casi nadie define destinos a menos que le hagan falta a él, lo cual es una pena, porque así desperdiciamos la capacidad de la Web. Así que, si eres tan amable, cuando ya sepas HTML y diseñes páginas de verdad, no te olvides de poner identificadores de fragmento en los sitios que puedan resultar interesantes, ¿vale?

- Venga, vale, lo haré por ti.

- No, por mí no, por la Web, y por ti mismo. Así será más fácil hacer enlaces a tus páginas y tus páginas serán más fáciles de usar y por tanto más útiles.

- Vale, vale, si ya me habías convencido...

- Venga, no nos enrollemos. Prepara tus enlaces y abre tu editor de textos. ¡Vamos a hacer nuestro pequeño primer portal!

- ¡Bien, bien!

- Tengo la impresión de que tu portal va a tratar de música celta...

- Sí, ¿cómo lo has sabido?

- No, por nada... Bueno, ya sabes cómo empezar, ¿no?

- Sí, a ver si lo encuentro... Así:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html40/strict.dtd">
<html>
 <head>
  <title>El portalillo de música celta</title>
 </head>
 <body>
 </body>
</html>

- Muy bien. Vamos a empezar a rellenar el cuerpo. Cómo ya sabes, nos olvidamos de momento de la apariencia y pensamos sólo en términos de estructura lógica de los contenidos.

- Bien, entonces lo primero que voy a poner es un encabezado H1. Me gusta este nombre, es de una de mis canciones favoritas:

 <body>
  <h1>Port An Deoraí</h1>
 </body>

- Buena idea.

- Me gustaría ponerle un subtítulo. ¿Qué elemento debería usar?

- Mmm, buena pregunta. Podrías usar un elemento de encabezado, pero yo usaría un elemento P.

- Sí, es lo que yo había pensado.

 <body>
  <h1>Port An Deoraí</h1>
  <p>El portalillo de música celta</p>
 </body>

- Muy bien. ¿Cómo has organizado los enlaces?

- Por zonas geográficas.

- Bien, pues escribe las zonas que tengas pensado. De momento no pongas ningún vínculo.

- Vale:

 <body>
  <h1>Port An Deoraí</h1>
  <p>El portalillo de música celta</p>

  <h2>Irlanda</h2>
  <h2>Escocia</h2>
  <h2>Bretaña</h2>
  <h2>España</h2>
  <h2>Estados Unidos y Canadá</h2>
 </body>

- Lo ideal sería tener una página para cada zona, en la que pusieras una lista con los grupos cada uno enlazado con su página web. En la portada puedes poner debajo de cada zona tres o cuatro grupos.

- A ver, voy a poner los típicos, así:

 <body>
  <h1>Port An Deoraí</h1>
  <p>El portalillo de música celta</p>

  <h2>Irlanda</h2>
   <p>Lúnasa, Clannad, Altan, Dervish...</p>
  <h2>Escocia</h2>
   <p>Andy M. Stewart, Battlefield Band, Tannahill Weavers...</p>
  <h2>Bretaña</h2>
   <p>Gwendal, Strobinell, Diwall...</p>
  <h2>España</h2>
   <p>Milladoiro, Na Lúa, Luar Nalubre...</p>
  <h2>Norteamérica</h2>
   <p>La Bottine Souriante, Fine Crowd, Tempest...</p>
 </body>

- Muy bien. Yo creo que es el momento de poner los vínculos; orígenes de vínculo para ser más concretos. Por ejemplo, <a href="el/URL/de/lunasa">Lúnasa</a>, y así todos. Ten cuidado con las mayúsculas y las minúsculas: en el nombre de la máquina (el dominio) no se distingue, pero en la ruta de acceso sí. No es lo mismo /docs/doc1.doc que /DOCS/doc1.doc.

- Vale, lo voy a ir haciendo.

- A ver qué tal queda...

- ¿Ya has acabado?

- Sí aquí tienes el código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html40/strict.dtd">
<html>
 <head>
  <title>El portalillo de música celta</title>
  <link rel="StyleSheet" href="ejemplo5.css" media="screen" type="text/css">
 </head>
 <body>
  <h1>Port An Deoraí</h1>
  <p><em><strong>El portalillo de música celta</strong></em></p>

  <h2><a href="http://www.ceolas.org/artists/index-ie.html">Irlanda</a></h2>
   <p><a href="http://www.lunasa.ie/">Lúnasa</a>,
      <a href="http://www.ceolas.org/artists/Clannad/">Clannad</a>,
      <a href="http://www.altan.ie/">Altan</a>,
      <a href="http://www.dervish.ie/">Dervish</a>...</p>

  <h2><a href="http://www.ceolas.org/artists/index-sc.html">Escocia</a></h2>
   <p><a href="http://www.andymstewart.com/">Andy M. Stewart</a>,
      <a href="http://www.battlefieldband.co.uk/">Battlefield Band</a>,
      <a href="http://www.tannahillweavers.com/">Tannahill Weavers</a>...</p>

  <h2><a href="http://www.gwerz.com/index.html">Bretaña</a></h2>
   <p><a href="http://www.gwerz.com/artistes/biographies/gwendal.htm">Gwendal</a>,
      <a href="http://www.arbedkeltiek.com/galleg/musique/strobinell.htm">Strobinell</a>,
      <a href="http://www.bmol.infini.fr/adherent/diwall/index.fr.htm">Diwall</a>...</p>

  <h2><a href="http://www.arrakis.es/~josugp/folk.htm">España</a></h2>
   <p><a href="http://www.milladoiro.com/">Milladoiro</a>,
      <a href="http://www.nalua.net/">Na Lúa</a>,
      <a href="http://www.luarnalubre.com/">Luar Nalubre</a>...</p>

  <h2><a href="http://www.ceolas.org/artists/index-us.html">Estados Unidos</a> y
      <a href="http://www.ceolas.org/artists/index-ca.html">Canadá</a></h2>
   <p><a href="http://www.millepattes.com/Anglais/bottine/">La Bottine Souriante</a>,
      <a href="http://celtic.relics.com/finecrowd/">Fine Crowd</a>,
      <a href="http://www.tempestmusic.com/">Tempest</a>...</p>
 </body>
</html>

- Vamos a ver cómo queda.

- Mmm, vaya, ya sabes lo que opino yo de esto...

- Sí, ya lo sé. Pero no te preocupes, había preparado una hoja de estilo para que no te desanimaras. Es una cosa sencillita, no esperes grandes cambios: aquí lo puedes ver.

- Bueno, queda resultón.

- Se podrían hacer cosas más complicadas, como poner gráficos y tal, pero por ahora no está mal para ser el tercer tutorial. Bueno, antes de acabar estaría bien que habláramos un poco de los otros tipos o esquemas de URLs además del http.

- Bueno, pero no te enrolles mucho que esto ya se está haciendo un poco largo.

- Muy bien. Hemos hablado ya del esquema mailto, que se refiere a buzones de correo electrónico. Por ejemplo, podrías crear un hipervínculo a un buzón de correo: <a href="mailto:lopez@example.com">La dirección de López</a>

- Vaya, ¿y podría entrar en el buzón y leer tus mensajes si siguiera ese hipervínculo?

- No hombre, lo normal es que se abra el programa de correo electrónico para enviar un mensaje a esa dirección de correo.

- Ah, claro, qué cenutrio soy.

- Seguimos. El esquema ftp es muy parecido al http, y se usa para ficheros que se pueden descargar por FTP.

- ¿Qué es FTP?

- FTP son las siglas de "File Transfer Protocol" ¡Sí, ya lo sé, está en inglés! "Protocolo de transferencia de ficheros", si te quedas más tranquilo...

- Vale, vale...

- El protocolo HTTP sirve para transportar páginas de hipertexto, el protocolo FTP sirve para transportar ficheros en general.

- Je, hay que reconocer que poniendo nombres a las cosas son unos hachas...

- Un URL del tipo ftp podría ser por ejemplo éste:

ftp://ftp.funet.fi/pub/standards/RFC/rfc2396.txt

Eso es un fichero de texto que está disponible a través de un servidor FTP. Además dentro de un URL ftp también puedes incluir el usuario y su contraseña, así:

ftp://usuario@ftp.servidor.es/pub/loquesea.zip
ftp://usuario:clave@ftp.servidor.es/pub/loquesea.zip

- Ya veo, no me entero muy bien, pero bueno.

- Pronto te enseñaré a usar el FTP, es la manera más normal de subir tus páginas a tu sitio web. Bueno, ya queda poco. El esquema file se usa para ficheros almacenados en un ordenador. De momento para nosotros no tiene mucho interés, pero también es similar a los URLs http. Por ejemplo, si estás en Windows, este URL se refiere al fichero c:templeeme.txt (Windows usa barras invertidas):

file://localhost/c:templeeme.txt

Como ves es muy parecido, primero el nombre de la máquina y luego la ruta de acceso.

- Ya. Qué cosas más raras.

- Más. El esquema news se refiere a grupos de noticias o a mensajes de grupos de noticias. Según se refiera a una cosa o a la otra, la sintaxis varía. Por ejemplo, para un grupo de noticias:

news:es.comp.infosistemas.www.paginas-web

y para un mensaje en particular:

news:3b3c46bd.3498640@news.cis.dfn.de

- Sí, conozco ese grupo. Por cierto, estas URL son opacas, ¿no?

- Jo, a veces me dejas alucinado. Sí son URLs opacas. Bueno, y para acabar, el esquema telnet. Telnet es un protocolo que te permite acceder a una computadora a través de la red. Un URL telnet se refiere a una sesión telnet. La sintaxis es una especie de mezcla entre la de http y la de ftp:

telnet://usuario:clave@servidor.es:35/

- Vale, aunque si te soy sincero lo del telnet es la primera vez que lo veo en mi vida.

- Quién sabe, quizás en el futuro uses telnet con más frecuencia de lo que te imaginas. Bueno, creo que ya hemos acabado.

- Uf, por fin...

- Pues había pensado hacer en el próximo tutorial un repaso de los elementos de HTML, que ya va siendo hora, así que prepárate para otra tutorial largo...

- Bueno, pero espero que sea menos abstracto que este. Estoy de URLs hasta el moño, la verdad.

- ¡Qué exagerado eres!

- Y tú que lo digas. Bueno, hasta la próxima.

- ¡Hasta luego!