Organizando un sitio web

Entrelazando recursos

Una vez que tengas la estructura de directorios en su lugar, puedes comenzar a crear tus documentos. Y es en este proceso que necesitarás saber cómo llegar a un recurso particular en la estructura para, por ejemplo, incluir una imagen en un documento o estrablecer un vínculo.

Existen dos formas de construir un vínculo: usando URLs completos o URIs relativos. La forma más sencilla de hacerlo es utilizando un URL completo, y por allí es por donde comenzaremos.

Utilizando URLs completos

Este método de refereniar a un recurso, consiste en especificar su dirección completa (o URL), la cual incluye el nombre de la computadora. Como la dirección es completa, no interesa si el recurso está siendo referenciado desde el mismo directorio o desde una computadora al otro lado del mundo: la dirección es única y universal. Y eso es lo que hace a este método mucho más sencillo: sólo necesitas saber cuál es la dirección del recurso y usarla, tal y como es, cuando sea necesario.

Veamos un ejemplo de esto. Suponte que, en la última estructura de directorios analizada, necesitas establecer un vínculo a la biografía de Isaac. En tal caso deberías escribir, mirando la estructura de directorios, cada carpeta que tienes que atravesar para llegar desde el directorio raíz al archivo "bio.html" en la carpeta de Isaac, separando las carperas entre sí con una barra ("/"). Al hacer este proceso obtendrás "raiz/artistas/isaac/bio.html", pero no me creas a mi y fíjate por tí mismo.

  • raiz
    Carpeta
    • Paso 1artistas
      Carpeta
      • Paso 2isaac
        Carpeta
        • imagenes
          Carpeta
        • Paso 3bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • imagenes.html
          Documento HTML
      • yo
        Carpeta
        • imagenes
          Carpeta
        • bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • imagenes.html
          Documento HTML
      • index.html
        Documento HTML
    • contacto.html
      Documento HTML
    • index.html
      Documento HTML

Todo lo que resta hacer con esta ruta es reemplazar el directorio raíz por el nombre de la computadora precedido por el protocolo (normalmente "http://"). Por ejemplo, si esta estructura está alojada en el sitio web "www.hey-este-es-mi-arte-bro.com", el URL para la biografía de Isaac sería "http://www.hey-este-es-mi-arte-bro.com/artistas/isaac/bio.html".

Este método es bueno para establecer vínculos a recursos fuera de la computadora que aloja al documento. Pero como tal vez ya te hayas dado cuenta, su lado malo para vínculos internos (entre dos recursos en la misma computadora) es que depende de conocer el nombre de la computadora para determinar la ubicación de un recurso. Esta particularidad implica que mudar un sitio a un nuevo servidor o cambiar su nombre de dominio, requiere la actualización de todos los vínculos que utilicen URLs. Las siguientes alternativas solucionarán este problema.

Utilizando referencias de ruta absolutas

A veces, puede ser útil hacer un vínculo a un recurso en la misma computadora por su URL, pero sin tener que especificar el nombre de la computadora, ya que sabemos que está en la misma máquina. Esto podría evitar los problemas relacionados al cambio de nombre de dominio del sitio que mencionamos anteriormente.

Afortunadamente, las referencias de ruta absolutas hacen exactamente eso. Con una referencia de ruta absoluta puedes utilizar el mismo método que para los URLs, pero en lugar de reemplazar el directorio raíz por el nombre de la computadora y el protocolo, solo debes eliminarlo. Una referencia de ruta absoluta para la biografía de Isaac sería entonces "/artistas/isaac/bio.html". Esta ruta podría ser utilizada por cualquier documento en el mismo sitio web, independientemente del nombre de dominio asociado a éste.

Utilizando referencias de ruta relativas

Las referencias de ruta relativas, también conocidas como URIs relativas, no tratan simplemente de determinar la ubicación del recurso. En este método, es igualmente importante desde dónde se hace la referencia al recurso. Esto es lo que las hace relativas.

Para ilustrar esto con un ejemplo, supongamos que necesitas crear un vínculo desde la página principal de la sección de artistas (el documento "index.html" en el directorio "artistas") a las imágenes de Isaac (el documento "imagenes.html" en la carpeta "isaac"). El proceso es el mismo que usamos previamente: recorrer la estructura, tomando nota de cada directorio que atraviesas, hasta que llegas al recurso, separando las carpetas entre sí con una barra ("/"). La particularidad esta vez es el directorio desde el cual debes empezar.

Con los métodos anteriores, siempre comienzas desde el directorio raíz, pero en este caso tienes que empezar desde el directorio que contiene al documento donde se encuentra el enlace. La carpeta que contiene al documento con el vínculo es, en este caso, "artistas". La ruta resultante de este proceso es "isaac/imagenes.html".

  • raiz
    Carpeta
    • artistas
      Carpeta
      • Paso 1isaac
        Carpeta
        • imagenes
          Carpeta
        • bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • Paso 2imagenes.html
          Documento HTML
      • yo
        Carpeta
        • imagenes
          Carpeta
        • bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • imagenes.html
          Documento HTML
      • index.html
        Documento HTML
    • contacto.html
      Documento HTML
    • index.html
      Documento HTML

Puedes estar preguntándote por qué el directorio donde se encuentra el documento con el vínculo no está incluido. Esto se debe a que el documento está en ese directorio y la siguiente cosa que necesitas saber para encontrar el recurso referido es a dónde ir desde allí.

Existe un caso especial a considerar con los URIs relativos, que sucede cuando necesitas moverte hacia arriba en la estructura de directorios. En tal caso no puedes simplemente ir tomando nota de todos los directorios que atraviesas en tu camino hacia arriba. Esta simplemente no es la forma apropiada. Para indicar que te estás moviendo un nivel hacia arriba en la estructura de directorios debes usar el directorio especial ".." (dos puntos), el cual representa al directorio padre de un directorio.

Ya que existe una sola forma de ir hacia arriba en la estructura de directorios, los URIs usan el directorio especial ".." en lugar del nombre del directorio. Asimismo, se espera que todos los directorios especificados por nombre se encuentren camino abajo.

Para ejemplificar esto, suponte que necesitas establecer un vínculo a la página de contacto ("contacto.html") desde la biografía de Isaac (documento "bio.html" en la carpeta "isaac"). Comenzando desde la carpeta que contiene al documento con el vínculo ("isaac"), la ruta resulta en "../../contacto.html" (sí, nos desplazamos dos veces hacia arriba).

  • Paso 2raíz
    Carpeta
    • Paso 1artistas
      Carpeta
      • isaac
        Carpeta
        • imagenes
          Carpeta
        • bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • imagenes.html
          Documento HTML
      • yo
        Folder
        • imagenes
          Carpeta
        • bio.html
          Documento HTML
        • contacto.html
          Documento HTML
        • imagenes.html
          Documento HTML
      • index.html
        Documento HTML
    • Paso 3contacto.html
      Documento HTML
    • index.html
      Documento HTML

Prev123Próx