Este pequeño detalle puede ser la diferencia entre una web que sirva y una que no.
Si, ya se que habíamos dicho que íbamos a hablar de los CSS, pero en este momento debemos hablar de algo que es importantísimo en el diseño de páginas web. Una pequeña cosa que hace la diferencia entre una imagen mostrada y una rota, o entre una página de estilos que sirve y otra que no.
Y son, como lo dice el título, las rutas, también conocidas por su nombre en inglés “paths”.
Como probablemente sabes, para que tu página web pueda ser vista por todos en cualquier momento del día, hay que ponerla en un servidor, el cual no es más que una computadora que está encendida 24 horas del día y conectada por una línea de datos espectacularmente rápida.
Y como toda computadora, tiene un sistema operativo, el cual en la mayoría de los casos es Unix o Linux. Y todos los sistemas operativos (que yo conozca) tienen una estructura similar a la que esta acostumbrado en Windows; tienen directorios (los que Windows llama Carpetas) y subdirectorios, que son sub-carpetas.
Ahora bien, para que la máquina sepa donde está un archivo, tienes que darle una ruta. Por ejemplo, digamos que en tu máquina tienes una carpeta en tu disco “C:” y esa carpeta se llama “webs” y luego dentro de la carpeta webs hay otra que se llama “clientes” y en esa clientes, está el archivo index.html.
La ruta para llegar a ese archivo es “C:\webs\clientes\index.html”
Esa es tu ruta absoluta, porque emana del inicio de tu disco duro. Pero si estás en la carpeta “webs”, y la máquina ya lo sabe de alguna manera, peudes decirle que index.html se encuentra en “clientes\index.html”.
Esto es muy importante, porque en una web, también querremos tener sub-directorios, de manera de tener bien ordenados los archivos. Ahora, en el sistema de archivos Unix/Linux no se usa la \, sino la /. Y tampoco existe C:
En una web que tenga un dominio propio, como http://www.tudominio.com/ el nivel mas alto que puedes tener es /.
En español esto significa que si tienes un archivo /index.html, eso significa que es exactamente lo mismo que si escribieras http://www.tudominio.com/index.html.
Y si has hecho un subdirectorio que se llame “principal” y dentro de ese metiste un subdirectorio de “imagenes” y otro de “css”, la ruta para una imagen “ejemplo.jpg” sería /principal/imagenes/ejemplo.jpg, lo cual es exactamente igual para el server que si escribieras http://www.tudominio.com/principal/imagenes/ejemplo.jpg
La ventaja de poner el / en vez de http… es que si algún día mudas tu web de www.tudominio.com a www.otrodominio.com, no tienes que cambiar nada en las rutas.
Al poner el / inicial, estás definiendo que la ruta empieza en la “raíz” aparente del web. Pero ojo, esto no funciona bien en los servidores gratuitos que tienen nombres largos de páginas.
Por ejemplo, si tienes una página en Geocities, tu dirección podría ser: http://www.geocities.com/boulevard/park/index.html
Si allí tienes “principal” y dentro de ese metiste un subdirectorio de “imagenes” y otro de “css”, ya no puedes poner /principal, porque eso significaría http://www.geocities.com/principal. ¿Ves? En este caso, tienes que utilizar las rutas relativas, las cuales son todas relativas al comienzo aparente de tu web.
O sea que si tienes una página http://www.geocities.com/boulevard/park/index.html y en esa quieres mostrar una imagen que está en la carpeta principal/imagenes/ejemplo.jpg, tienes que poner que la imagen está en: principal/imagenes/ejemplo.jpg sin el / inicial. Facil, ¿no crees?
Este capítulo en la saga de las páginas web es importantísimo, ya que luego todo girará alrededor de el. Espero haber sido claro explicándolo. Ahora si, les prometo que en la próxima entrega hablaremos de los CSS.