- ¿Cómo hago para indicarle al navegador dónde se encuentra un archivo? ¿Qué significan las "." , ".." , "../" , "/", etc?
Una de las razones más frecuentes de fallo al hacer un sitio web es la mala colocación de las rutas, resultando en que alguna imagen sale rota, un menú no quiere salir o un enlace te da 404.
A instancias de tunait, moderadora del Foro de HMTL en Foros del Web, aprovecho la oportunidad para intentar lanzar algo de claridad sobre este tema.
Empecemos:
Cuando uno sube sus archivos a un servidor web, uno está de hecho subiéndolo a una computadora que está en algún lado del planeta. Y como todas las computadoras que conozco, la información que se guarda en ella, está organizada en lo que se conoce como un "árbol de directorios". Este árbol empieza por una raíz y se va ramificando sin límites (bueno, seguro tiene un límite, pero no creo que ni tú ni yo lleguemos a el).
Ahora bien, el servidor web donde subes tus archivos también está organizado en directorios y tu cuenta, sea FTP o de alguna otra clase es un directorio más en el árbol de directorios. Cuando haces una página web, tienes que especificarle al navegador dónde encontrar la información. Le dices *que ruta tomar* para llegar donde está la información.
Es por esto, que a esa información se le llama la ruta. En Windows, si has tenido la oportunidad de utilizar la ventana de comandos o incluso de fijarte en la barra de direcciones del explorador de archivos, verás que una ruta típica es algo asi: C:\Archivos de Programa\mi programa\setup.exe
Esa es la ruta que lleva desde C:\ (directorio raíz) hasta el archivo setup.exe
En UNIX y Linux, no existe C: y se utiliza / como directorio raíz.
Rayitas y Puntitos
¿Pero cómo se entera la computadora en que directorio está entonces algo? ¿Cómo se lo digo? ¡Con rayitas y puntitos!
/ significa el directorio más alto, que puede ser el más alto del servidor o el más alto de tu sitio. Si tienes un sitio que se llame
www.tusitio.com, al poner / significa que es lo que se ve inmediatamente que entras al servidor. Es el directorio raiz de tu sitio. Si pones /index.html significa "el archivo index.html que se encuentra en mi directorio raiz". Y la computadora te entiende.
Pero digamos que tienes un subdirectorio que se llama imágenes donde guardas por ejemplo tus imágenes (coincidentemente
). Y digamos que tienes una imagen dentro de ese directorio que se llama... hmmm... figurita.jpg.
Y digamos también que esa imagen aparece en tu página index.html. Para indicarle a tu navegador dónde está, hay dos maneras de hacerlo.
Primero que todo, le dijiste al navegador: mira, vete a
www.tusitio.com y mírate /index.html. El ya sabe que está en el directorio raíz. Ahora al abrirse index.html hay una imagen:
<img src="/imagenes/figuritas.jpg">
Lo que le estamos diciendo al navegador es: Ok, ya que estamos en el archivo index.html del directorio raíz, aprovecha y vete al directorio raíz, bajas un escalon al directorio imagenes y dentro de el búscate la imagen figuritas.jpg.
Esto es una ruta absoluta, porque viene descrita desde la raíz: /imagenes/figuritas.jpg
Y la otra manera es poner:
<img src="imagenes/figuritas.jpg">
¡Hey! y el / ??? ¿Ahora cómo sabe el navegador que la imagen está en ese directorio si ya no le dijimos a partir de la raíz? Sencillo: Ya de por sí, index.html "sabe" que está en la raíz y al no ponerle el /, el asume que debe buscar desde ahi mismo hacia abajo. Por tanto, el busca a ver si hay un directorio "imagenes" que este dentro del directorio ene l cual el está ahorita y como en efecto existe, lo encuentra y publica la imagen. Esto se llama ruta relativa. Precisamente porque es relativa al archivo y directorio donde está plasmada.
La importancia de todo esto es que si por casualidad pusiste la ruta relativa y luego decidiste guardar index.html en otro directorio, si no le copiaste el subdirectorio imágenes debajo de el, la imagen no aparecerá. Si pusiste la absoluta si, porque el navegador buscará desde el / para abajo.
Para mayor aclaración: Si pusiste index.html en un directorio "html", el cual está dentro de un directorio "web" el cual está dentro de un directorio "usuarios" la ruta a index.html es /usuarios/web/html/index.html mientras que la de figuritas.jpg sigue siendo /imagenes/figurita.jpg. Si usas la ruta relativa imagenes/figuritas.jpg, el navegador buscaría en: /usuarios/web/html/imagenes/figuritas.jpg y no la va a encontrar. ¿Ves?
Pero me dirás ¿Y los puntitos? ¿Dónde caen el . y el ..?
Bueno, . significa "este mismo directorio" y .. significa "el directorio arriba de mi"
Si te acuerdas de DOS (no se si viviste esa epoca) el comando para ir a un directorio arriba de donde estas era:
cd ..
En unix/linux es exactamente el mismo y cuando pones ../ le estas diciendo llevame a un directorio arriba de este.
Digamos que tienes un archivo fotos.html que se encuentra en tu directorio /imagenes/familia/noviembre/ y que quieres que aparezca en ese archivo la imagene figuritas.jpg, la cual se encuentra en /imagenes. Puedes volver a especificarle /imagenes/figuritas.jpg, o ponerle una ruta relativa de la siguiente manera:
<img src="../../../figuritas.jpg">
En ella le estas diciendo: mira, para llegar a figuritas.jpg subes un escalón a "noviembre", luego otro escalón a "familia", luego otro a "imagenes" y ahi la encuentras.
Como puedes ver es muy fácil.
Antes de terminar, el . significa: aquí mismo, y normalmente se usa en los scripts para informarle al script que busque el archivo en el mismo directorio en que se encuentra el script y no se vaya a ir a un directorio que sea relativo a donde se encuentra el programa que interpreta el script.
Espero que eso te haya servido de algo.