Opciones

De Imágenes y Paths

Aqui vamos a recordar que una página web es nada mas que un humilde archivo de texto, que apunta o puede apuntar a otros elementos, como imágenes, o otras páginas web, por ejemplo.
Estos elementos referenciados no están "incrustados" en el propio archivo, que solo contiene su dirección. Será el navegador de cada visitante el que al leer la página se encarga de buscar estos elementos en las direcciones indicadas, cargarlos y mostrarlos como un todo.

¿ Es este tu caso ?

Asi que estas comenzando y te has encontrado en una situación como esta:

• un enlace funciona perfectamente en la página web que estas desarrollando en tu pc, pero cuando la subes al servidor web, ya no funciona.
• tu hoja de estilos en cascada se aplica en tu pc, localmente, no en el servidor.
• lo mas fastidioso de todo: tus bonitas imagenes no se ven en la página. Solo un recuadro con una cruz roja.

Todos estos problemas tienen una base común: el navegador no encuentra el camino (path) al elemento que quiere mostrar.

¡ La estructura de internet es DISTINTA de la estructura de tu PC !

Bien, una página web esta formada por elementos aislados, ficheros distintos. Su elemento de unión es el propio fichero de texto que contiene el código html. Este fichero, por ejemplo index.html representa tu página. Cuando cargas tu página, este es el fichero que se lee primero.

Tu, que eres el autor, puedes cargar la página simplemente escribiendo en tu navegador c:\mis documentos\index.html. ¡pero nadie mas puede hacerlo! La página en tu disco duro no es visible desde internet. Tampoco son visibles desde internet las imagenes y demas recursos situados en tu HD.

Por tanto debes colocar tu página en un ordenador que sí sea accesible desde internet: un servidor web. Al proceso de pasar el fichero desde tu pc a un ordenador abierto a internet es lo que se llama subir el fichero.

Una vez subido, puedes ver la página escribiendo su nueva dirección, que será el nombre del servidor MAS la ruta hacia el fichero dentro de ese pc.

Supongamos que tienes un espacio web gratuito, y que el nombre de tu cuenta es example.com. Supongamos también que como eres una persona ordenada, has decidido crear dos carpetas, una llamada personal para tus datos privados, y otra trabajo para tu idem. Como vas a tener un montón de datos personales, dentro de personal creas las carpetas excursion y cumpleaños, por ejemplo.

Tu primera página es sobre la excursión del domingo, llamada excursion.html asi que la subes a la carpeta excursion del servidor. Una vez subido tu fichero, para verlo deberias escribir en tu navegador "http://www.example.com/personal/excursion/excursion.html", o lo que es lo mismo, le dices al navegador que recupere un fichero llamado excursion.html usando el protocolo http en tu dominio de internet, llamado www.example.com, carpeta /personal/, subcarpeta /excursion/.

El navegador lee el dominio, averigua en que ordenador está almacenado, y pide a dicho ordenador que le muestre su contenido en esa dirección.
Tu ordenador recibe el código html (texto y etiquetas) contenido en excursion.html y comienza a leerlo linea a linea de principio a fin, y a interpretarlo.
Cuando llega a la parte de la página donde debe mostrarse una imagen, lee la etiqueta img src = "....", es decir, image source, la fuente de la imagen, el fichero que la contiene. En ese momento tu navegador hace una nueva petición, esta vez de la imagen, a la dirección escrita en la etiqueta. Por tanto para que la encuentre es preciso que la dirección esté bien escrita.

Rutas absolutas

Puedes indicar la dirección de forma completa:
"http://www.example.com/fotos/excursion.jpg" de forma que el navegador sabe que tiene que buscar la imagen excursion.jpg en el servidor que alberga el dominio example.com, en la carpeta /fotos/.

Rutas relativas

En ocasiones no es necesario indicar el camino completo al objeto web, ya que si la dirección es incompleta, se aplican una serie de presunciones:

   1) si unicamente especificas el nombre del archivo, el navegador asume que está en la misma carpeta que el fichero desde donde es llamado. Por ejemplo, si nuestra imagen excursion.jpg estuviera grabada en el directorio /excursion/ junto al archivo excursion.html podriamos indicar la ruta escribiendo en excursion.html <img src="excursion.jpg">. El navegador se limitará a buscar la imagen en la misma carpeta donde estaba excursion.html, es decir, http://www.example.com/personal/excursion/

    2) si el objeto web que estamos referenciando está en el mismo servidor web, pero en distinta carpeta, no hace falta escribir el nombre de dominio, sino solo la ruta a la carpeta donde se encuentra. Por ejemplo asumiendo que index.html estuviera en el directorio raiz de example.com y quisieramos llamar al gráfico excursion.jpg, gradado esta vez en la subcarpeta /fotos/, escribiriamos <img src="fotos/excursion.jpg">. Si dentro de /fotos/ existieran varios subdirectorios deberiamos añadir sus nombres hasta llegar al que contiene el fichero, por ejemplo <img src="fotos/vacaciones/excursion.jpg"> querria decir que el fichero excursion.jpg está en una carpeta llamada /vacaciones/, que a su vez está dentro de la carpeta /fotos/.
A la inversa, si la imagen no se encuentra en una carpeta en un nivel inferior respecto de la página de donde es llamado, sino superior, debemos indicar al navegador que para localizar la imagen debe retroceder en el arbol de directorios. Otro ejemplo. El fichero excursion.html está en la ruta /personal/excursion/ y excursion.jpg en la carpeta /fotos/. Para enlazar la imagen desde excursion.html Escribiriamos
<img src="../../fotos/excursion.jpg">.
La instrucción "../" señala que debe volverse atras un directorio; "../../" dos directorios, y asi sucesivamente. En este caso retrocedemos dos directorios (/personal/excursion/) para llegar al raiz: y una vez ahi avanzamos al directorio /fotos/.
Observa que no indicamos los nombres de las carpetas que deben recorrerse hacia atras, sino solamente cuantos saltos deben darse.

Si la imagen se encuentra en un directorio "padre", basta con saltar hacia atras hasta alcanzarlo: ../../index.html bastaria para enlazar desde excursion.html al fichero index.html en el directorio raiz. Pero si el destino está en un directorio transversal, debemos retroceder hasta el directorio común y luego avanzar hasta el directorio destino:

¿ que sistema es mejor ?

Usar paths relativos es más rápido que paths absolutos, ya que en el primer caso el navegador ya tiene localizado el servidor web al que realiza la petición, mientras que en el caso de los paths absolutos, debe realizar una nueva identificación a traves del sistema dns

¿ Aun con problemas ?

Si crees que no has cometido ningun error, prueba a recargar la página; puede ser un fallo temporal del servidor.

Asegurate una vez mas de que verdaderamente la imagen está en el lugar que supones; usa para ello un programa ftp

Hablando de ftp, las imagenes deben subirse al servidor de modo binario

Comprueba que has escrito bien el nombre. Imagen.jpg y imagen.jpg y IMAGEN.JPG son tres nombres DiStInToS.

Muchos servidores web no toleran carácteres extraños o espacios     en    blanco.

Advierte que la ruta de directorios se indica mediante sintaxis unix y no windows , es decir, escribimos directorio/directorio, y no directorio\directorio.

¿ Estas usando algun editor web demasiado inteligente ? si no ves tu imagen cuando pruebas la página recien subida al servidor apuesto a que es porque el editor ha escrito la ruta a tu disco duro.
Vigila que el path no sea c:\mis documentos\... Tu disco duro no es visible desde internet !.

No todos los tipos de gráficos pueden verse en internet. No hay problemas con gif y jpg; tampoco con .png, pero evita otros tipos de gráficos.