Explorando / Direcciones Relativas
Direcciones Relativas
(Relative Addresses)
El término "path" (pasillo) es a veces confuso para nuevos usuarios de la Web. Pero en realidad, es un concepto simple: Un "path" (pasillo) es la secuencia de directorios que se debe atravesar para llegar de un directorio a otro. (En Windows los directorios se llaman cartapacios ("folders"); y usaremos ambos términos como sinónimos). Hasta para construir la mas simple red de documentos, es muy útil saber lo básico de como especificar los "paths" (pasillos) entre directorios y archivos.
El material subsecuente en esta sección es algo más técnica que en la sección anterior. No es esencial para el uso casual de la Web, pero es importante si planificas construir tu propia dirección de Web.
Jerarquías de Directorios
(Directory Hierarchies)
Considera la estructura del directorio en la siguiente figura.

Esta estructura típica de directorio tiene un directorio Maestro (Matrix) (usualmente llamado el root directory y designado en una PC con el símbolo "\") que contiene todos los demás directorios como subdirectorios y cada directorio conteniendo subdirectorios. En este ejemplo, el directorio raíz (matrix) contiene el directorio Dir1, y este directorio a su vez contiene los directorios Dir 2 y Dir 5. Finalmente, Dir 2 contiene subdirectorios Dir 3 y Dir 4, mientras Dir 5 contiene el subdirectorio Dir 6.
Los archivos en el sistema están contenidos en estos directorios. En la figura algunos archivos representativos están ilustrados en rojo. Por ejemplo, el archivo index.html (con la flecha verde) está contenido en el directorio Dir 2, el cual es un directorio de Dir 1, el cual finalmente está en el subdirectorio del directorio raíz (matrix).
Mapa Conceptual de Directorios
(Directory Trees)
![]() |
Otra manera útil de ver esta estructura de Directorios es en términos de un mapa de direc- torios. La figura adyacente muestra el diagrama en forma de árbol correspondiendo a la estructura de los directorios ilustrada en la primera Figura. Si la miramos como un árbol (caído de lado), las ramas del árbol corresponden a la estructura de los subdirectorios. Si levantas el árbol hacia arriba, esta analogía hace evidente el porque el directorio maestro conteniendo todos los directorios es llamado directorio " raíz". |
Pasillos
(Paths)
El diagrama del mapa conceptual de directorios ilustra gráficamente el significado de un pasillo: literalmente ES un pasillo: la manera (mas corta) que seguiríamos en el mapa de directorios para ir de un directorio a otro. Por ejemplo, considera los archivos ilustrados en el primer diagrama. Supongamos que preguntamos cuál es el "pasillo" es desde el archivo index.html hasta el archivo file 3.ext. El archivo index.html esta en el directorio Dir 2 y file 3.ext esta en el directorio Dir 3. Desde el diagrama del árbol de directorios, para llegar desde index.html a file 3.ext primero tendremos que ir al directorio Dir3 el cual está en el directorio Dir2. Decimos que (relativo al archivo index.html) el archivo file 3.ext está en localizado en Dir3\file3.ext. De la misma manera, relativo al directorio Dir1, el archivo file 3.ext está localizado en Dir2\Dir3\file 3.ext y así sucesivamente. Ejemplos como tales son denominados " especificando el pasillo relativo a un archivo" desde su punto de comienzo.
Especificaciones de los Pasillos
(Specification of Paths)
Así, el pasillo completo a un archivo que se encuentra en un subdirectorio del archivo en que estas actualmente es especificado en un listado, en orden, los directorios (omite el que te encuentras dentro) que tu debes atravesar para llegar al archivo, con los backslashes después del nombre de cada directorio y finalmente seguido por el nombre del archivo. Bien simple, verdad, una vez practiques!!
![]() |
Pero y si el archivo no está en el subdirectorio de tu directorio actual? Por ejemplo, donde está el archivofile6.ext (el cual está en Dir6) relativo al archivo index.html? La misma regla se aplica como adyacente ilustra que para llegar al directorio Dir6 del directorio Dir2 tenemos que |
regresar (BACK) en la jerarquía de los directorios hasta que lleguemos al directorio que contiene Dir 6 (y, por supuesto, Dir 2) en la estructura de subdirectorios.
Así, para llegar a file 6.ext desde index.html regresamos a Dir1, y después a su subdirectorio Dir 5, y a su subdirectorio Dir6. La nota usada para regresar un nivel en la jerarquía de directorios es "\" ( dos puntos, seguidos por un backslash) y podemos decir que la localización de file 6.ext relativa a index.html es...\Dir5\Dir6\file6.html, como se ilustra en la siguiente figura.
Direcciones Absolutas y Relativas
(Absolute and Relative Addressing)
Los ejemplos de direcciones que hemos estado considerado se les denomina "Dirección Relativa" (Relative Addressing), porque la localización es especificada con relación a la localización actual. Pero, nota que también podemos especificar una "Dirección Absoluta" para archivos regresando al directorio raíz y escribiendo el pasillo completo del archivo desde allí. En el ejemplo anterior, la dirección absoluta de file6.ext es \Dir1\Dir5\Dir6\file6.ext, donde la inicial "\" significa que es de la raíz del directorio.
Nota la diferencia entre direcciones absolutas y relativas: si Yo muevo el archivo index.html a un directorio nuevo, la dirección de file6.ext relativa a index.html cambia, pero su dirección absoluta permanece igual.
De otra manera, supongamos que yo muevo la estructura completa de directorios hacia la derecha de "Root" en el árbol de directorios, intactos a una localización nueva en la misma computadora o a una computadora diferente, como lo ilustra el diagrama adyacente. Entonces, generalmente, la dirección absoluta de file6.ext cambiaría, pero su dirección relativa a index.html (de hecho, relativa a cualquier archivo en los directorios que yo haya movido) se quedaría igual.
![]() |
Así, en el diagrama que precede la dirección absoluta de file6.ext es \Dir1\Dir5\Dir6\file6.html en el ejemplo superior y \new\www\Dir1\Dir5\Dir6\file6.html en el inferior, pero ya que la parte interior de los encasillados grises es el mismo en ambos casos, la dirección relativa referida de index.html permanece incambiable.
Las Conexiones entre los Pasillos y las URLs
(The Connections Between Paths and URLs)
Y por qué preocuparnos por los pasillos, si son absolutos o relativos, si estas creando documentos de la Web? Porque el pasillo es la parte de la URL de un documento de la Web que da la localización del documento en el servidor donde reside. Así como la localización de un archivo puede ser dado relativo a la localización de otro archivo, o puede ser dado como el pasillo absoluto a un archivo (el cual en realidad es la localización relativa de un archivo al directorio matrix de la computadora), así que la porción del pasillo de la URL de un documento también puede ser especificada como relativa a la localización de otro documento o en términos de una localización absoluta. En el último caso, uno se refiere a un URL absoluto, y es dado, no en términos de la localización relativa a la matrix de la computadora, pero en términos de la base del directorio para todos los documentos html. Este directorio a menudo se le conoce como el la raíz del documento html.
Para determinar la porción apropiado del pasillo de un documento URL absoluto, uno necesita conocer su pasillo de directorio en el servidor, relativo a la raíz del documento html. Si el servidor es una máquina Windows, tiene un pasillo de la forma de la que hablamos anteriormente. Para obtener la porción del pasillo del URL absoluto del documento, simplemente:
Para obtener una URL absoluta completa, combina esta parte del pasillo con el nombre anfitrión y la tirilla (http://; ftp://; etc.) que te da el método de acceso.
Para determinar el URL de documento A con relación a documento B, simplemente escribe el pasillo del directorio de A con relación a B y reemplaza cada backslash con un forward slash.
Así que, te preguntarás, tengo que preocuparme con los slashes y los backslashes? Porqué simplemente no utilizamos uno u el otro para ambos pasillos del directorio y URL? La contestación depende en el hecho de que URL y navegadores de la Web primeramente fueron desarrolladas en máquinas Unix. Ahí, el forward slash es usado en pasillos de directorios y naturalmente se pasaron hacia los URL. Desafortunadamente, el backslash ya poseía un historial largo sirviendo como el delimitador en pasillos de directorios en el mundo de las PC, así que retuvo su papel aún después de que las máquinas Windows comenzaran a ser usadas en los servidores de la Web. Consecuentemente, en el ambiente Windows, uno tiene que usar dos símbolos diferentes, mientras que en el mundo Unix uno apenas tiene que usar uno solo.
Usa Direcciones Relativas Siempre
que sea Possible
(Use Relative Addressing Whenever Possible)
Claramente, direcciones absolutas y relativas tienen, cada una, sus ventajas y desventajas, pero cuando se refiere a producir páginas en la Web, es aconsejable hacer direcciones a archivos de direcciones relativas en la misma máquina a menos que existan circunstancias dictando lo contrario. Entonces, si los directorios conteniendo tus páginas de la Web son movidos intactos a otra máquina los enlaces entre éstos archivos deben trabajar sin ningún problema. Si, en vez, los archivos son especificados por sus direcciones absolutas, los enlaces a archivos locales en tus directorios se "romperá" cada vez que muevas los archivos, por que las direcciones absolutas generalmente cambiarán. Reparando estos enlaces rotos es una tarea que puede consumir mucho tiempo si tu dirección envuelve muchos directorios.
Ejercicio de la Página Inicial:
Direcciones Relativas y Absolutas
(Homepage Exercise: Relative and Absolute Addresses)
Vamos a usar tus expedientes y archivos de tu página para ilustrar la diferencia entre direcciones de URL absolutas y las relativas. Abre el archivo de tu página y haz lo siguiente:
http://csep10.phys.utk.edu/next.gif
Guarda la imagen que se muestra en el archivo de tu página con el nombre por omisión de "next.gif" oprimiendo el botón de la derecha del ratón y aguantándolo encima de la imagen, seleccionando "Save Picture as" y escogiendo el archivo de tu página del encasillado de diálogo resultante.
http://csep10.phys.utk.edu/previous.gif
Guarda la imagen mostrada en el archivo de "gifs" que tu creaste dentro del archivo de tu página con el nombre por omisión de "previous.gif" (NOTA: lee las instrucciones detenidamente; este archivo va a un archivo diferente que el del paso anterior!).
<h2> Examples of Absolute and Relative URL's </h2> This image has an absolute address of "?": <p> <img src="?"> <p> This is the same image displayed with a relative address "next.gif": <p> <img src="next.gif"> <p> Here is another image in a subdirectory "gifs" of the resent directory; it is displayed using therelative address "gifs/previous.gif" <p> <img src="gifs/previous.gif"> <p> |
Guarda el archivo de tu página, pero deja el archivo abierto en el editor.
5. Del menú de "File" usa el "Open" para abrir la imagen de "next.gif" guardada en el archivo de tu página. Copia la dirección que aparece en la ventana de "Address" con el ratón. Esta es la dirección de URL absoluta del archivo de tu máquina. Normalmente parecerá como algo así:
file://C:/myfolder/next.gif |
(pero el camino exacto del directorio dependerá de tu máquina). Ve al archivo de tu página que aún está abierta en el editor y REEMPLAZA LAS DOS OCURRENCIAS CON EL SIGNO DE INTERROGACION (?) CON LA DIRECCION DE URL QUE ACABAS DE COPIAR CON TU RATON. Guarda el archivo de tu página y cierra el editor.
Nota Adicional: La dirección de URL anterior es la forma de dirección de URL de un archivo de la misma máquina que el navegador. La parte "file://" nos lo dice. Después le sigue la dirección absoluta del archivo de la máquina. En el ejemplo arriba mencionado la dirección absoluta es C:\myfolder\next.gif.
6. Ahora muestra tu página con el navegador.
La muestra de tu navegador debe mostrar algo como esto:
| Examples of
Absolute and Relative URL's This image has an absolute address of "file://c:webcourse/next.gif":
This is the same image displayed with a relative address "next-old.gif":
Here is another image in a subdirectory "gifs" of the present directory; it is displayed using the relative address "gifs/previous.gif"
Here is another image in a subdirectory "gifs" of the present directory; it is displayed using the relative address "gifs/previous.gif" |
Estos ejemplos elementales ilustran la diferencia entre direcciones relativas y absolutas y como implementar direcciones relativas para las dos simples (pero común) casos donde el archivo recibiendo la dirección está o en el mismo directorio que el archivo de HTML (ejemplo, el next.gif) o está en un subdirectorio inmediato del archivo de HTML (ejemplo, el gifs/previous.gif). Como hemos visto anteriormente, es generalmente aconsejable usar direcciones relativas en tus páginas de Web para aumentar uso portátil.