Tipos de rutas: absolutas y relativas. Referencias a niveles superiores.
Si se tiene un archivo index.html colocado en una ruta como esta http://dominio.com/carpeta1/index.html, toda referencia del tipo carpeta2/pagina.html (sin barra delante) colocada en index.html será una ruta dada de manera relativa a la carpeta que contenga al index.html. Así, en el ejemplo, estaremos accediendo a http://dominio.com/carpeta1/carpeta2/pagina.html. Por otra parte, si la referencia se coloca con una barra adelante de esta forma /carpeta2/pagina.html será también una ruta dada de manera relativa, pero en este caso será relativa al root (carpeta raiz) del dominio. En el ejemplo se estará apuntando a http://dominio.com/carpeta2/pagina.html.
Una ruta absoluta será aquella que es colocada dando el path completo donde se encuentra el archivo, incluyendo el dominio, carpetas y nombre del archivo. Así por ejemplo si quisieramos acceder a pagina.html que se encuentra en el root de nuestro dominio, una ruta abosulta será http://dominio.com/pagina.html.
Si utilizando rutas relativas queremos hacer referencia a un archivo que se ubica en un nivel superior al actual, se utiliza ../. Entonces si estamos en el archivo pagina.html colocado en http://dominio.com/carpeta1/pagina.html y se pretende referenciar a index.html colocado en http://dominio.com/index.html, se coloca algo como ../index.html. También de esta forma podemos subir más de un nivel de carpetas colocando ../../ en el caso de querer subir dos niveles.
A modo de resumen se puede citar lo siguiente. Teniendo un index.html en http://dominio.com/carpeta1/index.html podemos colocar en dicho archivo:
- un link carpeta2/pagina.html que hará referencia a http://dominio.com/carpeta1/carpeta2/pagina.html.
- un link /carpeta2/pagina.html que hará referencia a http://dominio.com/carpeta2/pagina.html.
- un link absoluto que apuntará exactamente al archivo que indique.
- un link ../pagina.html que apuntará a http://dominio.com/pagina.html.
Utilidad de la etiqueta base
La etiqueta base colocada en la cabecera del HTML (entre head) permite que todo link o referencia colocada de manera relativa en el código de una página tome como carpeta relativa a aquella especificada dentro de su definición. De esa manera si la etiqueta base es del tipo base href=”http://dominio.com/” una referencia del tipo carpeta/pagina.html colocada en cualquier página con dicha etiqueta base apuntará a http://dominio.com/carpeta/pagina.html. Dicho rápidamente, toda referencia relativa se “transformará” en absoluta completándose con aquello que hemos colocado en la etiqueta base.
Esta etiqueta resulta especialmente útil cuando se utiliza el módulo de redireccionamiento del Apache mod-rewrite. Con este módulo se puede hacer que una dirección del tipo http://dominio.com/1/5 apunte realmente a http://dominio.com/index.php?page=1&module=5, pero en todo momento el navegador y el usuario crean que se encuentran en la primer URL. El problema con esto es como se describe a continuación. Supongamos que tenemos las imágenes de nuestro sitio en la carpeta images de la carpeta raiz. Si desde el index.php deseamos cargar algunas de estas imágenes, lo normal sería colocar direcciones relativas a ellas del tipo images/header.jpg. Siendo que el navegador cree que se encuentra en http://dominio.com/1/5, en efecto, intentará cargar la imágen desde la ruta http://dominio.com/1/5/images/header.jpg que obviamente no existe. Una etiqueta base del tipo base href=”http://dominio.com/” le indicará entonces al navegador que toda ruta relativa debe “completarse” con http://dominio.com al comienzo logrando así que, aunque el navegador crea que nos encontramos en http://dominio.com/1/5, la referencia images/header.jpg apunte a http://dominio.com/images/header.jpg como se pretendía.
Cuando la etiqueta base no alcanza para las referencias necesarias
Supongamos el caso que se tenga un sitio web multi lenguaje cuya URL varía de http://dominio.com/es/ a http://dominio.com/en/ dependiendo el idioma y que ambas URL utilizan mod-rewrite para llamar al index.php de esta forma http://dominio.com/index.php?language=es. Supongamos también que las hojas de estilo y las imágenes se encuentran en http://dominio.com/css y http://dominio.com/images respectivamente. Tendremos también en el index.php una referencia a una hoja de estilos del tipo
y un link así href=”carpeta1/pagina.html”.
Si no colocamos una etiqueta base, tendremos el mismo problema con la carga de la hoja de estilos que se ha descripto en el título anterior. Pero si colocamos una etiqueta base del tipo base href=”http://dominio.com/” la carga de estilos.css se hará en http://dominio.com/css/estilos.css como se espera, pero el vínculo apuntará finalmente a http://dominio.com/carpeta1/pagina.html con lo que estaremos perdiendo el /en/ o /es/ correspondiente al idioma. Podríamos hacer entonces que la etiqueta base sea dinámica: si el sitio debe mostrase en ingles que se genere base href=”http://dominio.com/en/” y si el sitio debe cargar en español será base href=”http://dominio.com/es/”. Con esto solucionariamos el problema del vínculo ya que el mismo apuntaría a http://dominio.com/es/carpeta1/pagina.html. Pero resulta que la hojas de estilos apuntaria en este caso a http://dominio.com/es/css/estilos.css cosa que no es correcta. Una posible solución a esto pasa por definir una regla especial para el mod-rewite que indique que todo archivo que se solicite dentro de las carpetas es/css apunte finalmente a css en la raiz del directorio. Esta regla puede ser definida como sigue: RewriteRule ^(es|en)/(css|imagenes)/([a-zA-Z0-9_\-\.]*)$ $2/$3.
Para resumir podemos decir que si se pretende realizar un sitio multi idioma cuyas URL se vean de esta forma http://dominio.com/es/ y http://dominio.com/en/ siendo que apuntan a http://dominio.com/index.php?language=es y la carpeta css que contiene los estilos se encuentra en la raiz del dominio se puede realizar lo siguiente:
- colocar una etiqueta base que se genere dinámicamente en función del idioma con el cual se debe cargar el sitio siendo base href=”http://dominio.com/en/” o base href=”http://dominio.com/es/” logrando que todos los vínculos relativos a referencien correctamente respetando el lenguaje actual del sitio.
- colocar una regla de redirección que indique que todo archivo que se solicite en la carpeta http://dominio.com/es/css se cargue desde http://dominio.com/css: RewriteRule ^(es|en)/(css)/([a-zA-Z0-9_\-\.]*)$ $2/$3 y lo mismo para otro tipo de referencias como imágenes y archivos JS.