Manejando los archivos

« Anterior Siguiente »

Un sitio web consta de varios archivos: archivos de texto, código, hojas de estilo, contenido multimedia, y así sucesivamente. Cuando estás construyendo un sitio web, primero necesitas organizar todos estos archivos en tu ordenador local utilizando cierta lógica, asegúrate de que estos archivos pueden comunicarse entre sí, y de que todos tus contenidos están correctos antes de subirlos a un servidor. Manejo de Archivos analiza algunas cuestiones que debes de tener en cuenta para que puedas establecer una estructura de archivos coherente para tu sitio web.

En que lugar de tu ordenador deberia estar Tu Web Site?

Cuando estás trabajando en un sitio web local en tu propio ordenador, debes mantener todos los archivos relacionados en una sola carpeta que refleja la estructura de archivos de la página web publicada en el servidor. Esta carpeta puede ubicarse en cualquier lugar que quieras, pero debes ponerlo en algún lugar donde puedas encontrarlo fácilmente, tal vez en el escritorio , en la carpeta de inicio, o en la raíz de tu disco duro.

Elije un lugar donde almacenar tu proyecto Web. Ahí, crea una nueva carpeta llamada proyecto_webs (o similar). Es ahí donde ubicarás todos tus proyectos Web.
Dentro de esta primera carpeta, crea otras carpetas para almacenar tu primer proyecto Web. Lo llamaremos: sitio-prueba (o algo más imaginativo).

Mayúsculas, Minúsculas y espacios

Notaras que en este articulo, te dimos la tarea de crear tus carpetas con los nombres completamente en minusculas y sin espacios. Esto es porque:

Muchas computadoras, particularmente servidores, son sensibles (distinguen MAYUSCULAS de minusculas). Por ejemplo, si pones una imagen en tu sitio asi: test-site/MyImage.jpg, y el archivo es diferente, al tratar de llamar a la imagen como test-site/myimage.jpg, ésta no se mostrará.
Los Navegadores, servidores Web y los lenguajes de programación no manejan bien los espacios en blanco. Por ejemplo, si pones espacio en el nombre de una carpeta, algún sistema podria creer que son dos carpetas(1 carpeta por nombre). Algunos servidores reemplazan el espacio en los nombres con "%20" (codigo para el espacio en las URIs), rompiendo todos tus enlaces. Por ello es mejor separar las palabras de un nombre con "-" o "_" Asi: my-file.html or my_file.html.

Por estas razones, es mejor que tengas como hábito escribir el nombre de tus archivos y carpetas en minusculas y sin espacios, al menos hasta que entiendas bien cada cosa que haces, y asi te evitaras algunos problemas.

¿Que estructura deberá tener tu Sitio Web?

Ahora, veamos qué estructura deberia tener nuestro sitio de prueba. Las cosas más comunes que tendremos en cualquier proyecto de sitio web que creamos son un archivo HTML índice y carpetas que contienen imágenes, archivos de estilo y archivos de script. Vamos a crear estos ahora :

index.html: Este archivo contendrá generalmente el contenido de tu página web inicial, es decir, el texto y las imágenes que la gente ve cuando por primera vez van a tu sitio. Usando el editor de texto , cree un nuevo archivo llamado index.html y guardarlo justo dentro de tu carpeta sitio-prueba.
Carpeta images: Esta carpeta almacenara todas las imagenes que vas a usar en tu sitio. Crea una carpeta llamada images dentro de tu carpeta sitio-prueba.
Carpeta styles: Esta carpeta tendra todos tus codigos CSS usados para darle estilo a tus contenidos (por ejemplo, establecer el color de tus textos y de fondos). Crea una carpeta llamada styles, dentro de tu carpeta sitio-prueba.
Carpeta scripts: Esta carpeta tendrá todos tus codigos JavaScript usados para darle interactividad y funcionalidad a tu sitio (por ejemplo. botones que cargan datos cuando hacen clic). Crea una carpeta llamada scripts, dentro de tu carpeta sitio-prueba.

Nota: En ordenadores con Windows, podrías tener problemas al ver el nombre de los archivos, porque Windows tiene una opcion molesta llamada Ocultar las extensiones de archivo para tipos de archivo conocidos que por defecto esta activado. Generalmente puedes desactivarlo por medio del Explorador, ve a Opciones de Carpeta... pestaña Ver, desactiva la casilla Ocultar las extensiones de archivo para tipos de archivo conocidos, Luego click en Aceptar. Para mayor informacion especifica sobre la verion de tu Windows has una busqueda en ¡Yahoo!

Ruta de Archivos

Para hacer que los archivos se comuniquen entre sí , tienes que proporcionarles una ruta entre ellos — basicamente es como un archivo se comunica con otro. Para demostrar esto, vamos a insertar un poco de HTML en nuestro archivo index.html , y hacer que se vea la imagen que eligió en el artículo "¿Cuál será la apariencia de tu sitio Web?"

Copia la imagen que seleccionaste antes dentro de tu carpeta imagenes.
Abra su archivo index.html, e inserte la siguiente línea en el archivo exactamente como se ve. Por ahora no te preocupes de todo lo que ves — Más adelante veremos las estructuras con mas detalle en la serie.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html> 
```
Esta linea <img src="" alt="My test image"> es un codigo HTML que inserta una imagen dentro de nuestra pagina. Necesitamos decirle a nuestro HTML dónde esta la imagen. La imagen esta dentro de la carpeta images, que está en el mismo directorio que el archivo index.html. Para llamar la imagen desde tu archivo HTML, necesitara ponerle como ruta images/nombre_archivo_imagen. Por ejemplo, la imagen se llama firefox-icon.png, entonces la ruta sera images/firefox-icon.png.
Inserta la ruta del archivo dentro del codigo HTML entre las comillas del código src="".
Guarda tu archivo, ahora carga tu pagina en el navegador (doble click en el archivo). Deberias ver tu nueva pagina mostrando tu imagen!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Algunas reglas generales para la ruta de Archivos:

Para enlazar un archivo que esta en la misma carpeta que el archivo HTML, solamente usa el nombre del archivo, Ejemplo. my-image.jpg.
Para hacer referencia a una subcarpeta, escribe en la ruta: primero el nombre de la carpeta y le agregas un slash, Ejemplo. carpeta/my-image.jpg.
Para enlazar un archivo que está fuera de la carpeta que contiene al archivo HTML, deberas escribir 2 puntos(..). Asi por ejemplo, si index.html esta dentro de una subcarpeta de sitio-prueba y mi-imagen.png esta dentro de sitio-prueba, podrias referenciar tu archivo mi-image.png desde index.html usando ../my-image.png.
Puedes hacer muchas combinaciones asi como, Por Ejemplo: ../subdirectory/another-subdirectory/my-image.png.

Por ahora, eso es todo acerca de lo que nesecitas conocer.

Nota: El sistema de archivos de window tiende a usar el backslashes (\), no el slash (/), Por Ejemplo. C:\windows. Esto no es importante — Aun si tu desarrollas tus sitios web en window deberias usar los slashs en tu codigo.

¿Que mas hay que hacer?

Por ahora es todo. Tu estructura de carpetas se deberia ver asi como la imagen:

 
    « AnteriorSiguiente  »