Manejo de archivos

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 qué lugar de tu ordenador debería estar tu sitio Web?

Cuando estás trabajando en un sitio web local en tu propio ordenador, debes mantener todos los archivos relacionados en una sola carpeta que refleje 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.

  1. Elije un lugar donde almacenar tu proyecto web. Ahí, crea una nueva carpeta llamada proyectos_web (o similar). Es ahí donde ubicarás todos tus proyectos web.
  2. 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

Notarás que en este artículo, te dimos la tarea de crear tus carpetas con los nombres completamente en minúsculas y sin espacios. Esto es porque:

  1. Muchas computadoras, particularmente servidores, son sensibles a mayúsculas y minúsculas. Por ejemplo, si pones una imagen en tu sitio así: sitio-prueba/MiImagen.jpg, y luego en un archivo diferente tratas de invocarla como sitio-prueba/miimagen.jpg, esta no se mostrará.
  2. Los navegadores, servidores web y los lenguajes de programación no manejan bien los espacios en blanco. Por ejemplo, si usas espacios en el nombre de archivo, algunos sistemas podrían creer que en realidad se trata de dos nombres de archivo. Algunos servidores reemplazan el espacio en los nombres con «%20» (código para el espacio en los URI), rompiendo todos tus enlaces. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html contra mi_archivo.html.

Por estas razones, es mejor que tengas como hábito escribir el nombre de tus archivos y carpetas en minúsculas y sin espacios, al menos hasta que entiendas bien cada cosa que haces, y así te evitarás algunos problemas.

¿Qué estructura deberá tener tu sitio web?

Ahora, mira qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo HTML índice y carpetas que contienen imágenes, archivos de estilo y archivos de script. Vas a crear estos ahora:

  1. 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 accede por primera vez a tu sitio. Usando el editor de texto, crea un nuevo archivo llamado index.html y guárdalo justo dentro de tu carpeta sitio-prueba.
  2. Carpeta images: Esta carpeta almacenará todas las imágenes que vas a usar en tu sitio. Crea una carpeta llamada images dentro de tu carpeta sitio-prueba.
  3. Carpeta styles: Esta carpeta tendrá todos tus códigos 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.
  4. Carpeta scripts: Esta carpeta tendrá todos tus códigos 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 opción molesta llamada Ocultar las extensiones de archivo para tipos de archivo conocidos que por defecto está activada. Generalmente puedes desactivarla 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 clic en Aceptar. Para mayor información específica sobre la versión de tu Windows, ¡haz una búsqueda en la Web!

Ruta de Archivos

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

  1. Copia la imagen que seleccionaste antes dentro de tu carpeta images.
  2. Abre tu archivo index.html, e inserta la siguiente línea en el archivo exactamente como se muestra. Por ahora no te preocupes de lo que esto significa —más adelante veremos las estructuras con más detalle en la serie—.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Título de mi página</title>
      </head>
      <body>
        <img src="" alt="Mi imagen de prueba">
      </body>
    </html> 
  3. La línea <img src="" alt="Mi imagen de prueba"> es un código HTML que inserta una imagen dentro de nuestra página. Necesitamos decirle a nuestro HTML dónde está la imagen. La imagen está dentro de la carpeta images, que está en el mismo directorio que el archivo index.html. Para llamar la imagen desde tu archivo HTML, necesitarás ponerle como ruta images/nombre_archivo_imagen. Por ejemplo, la imagen se llama firefox-icon.png, entonces la ruta será images/firefox-icon.png.
  4. Inserta la ruta del archivo dentro del código HTML entre las comillas del código src="".
  5. Guarda tu archivo, ahora carga tu página en el navegador (doble clic en el archivo). ¡Deberías ver tu nueva página mostrando tu imagen!

Una captura de pantalla de tu sitio web básico mostrando el logo de Firefox - un zorro flameante abarcando el mundo

Algunas reglas generales para la ruta de archivos:

  • Para enlazar un archivo que está en la misma carpeta que el archivo HTML, solamente usa el nombre del archivo. Ejemplo: mi-imagen.jpg.
  • Para hacer referencia a una subcarpeta, escribe en la ruta: primero el nombre de la subcarpeta y le agregas una diagonal. Ejemplo: subcarpeta/mi-imagen.jpg.
  • Para enlazar un archivo que está en el directorio anterior al que contiene al archivo HTML, deberás escribir dos puntos (..). Así por ejemplo, si index.html está dentro de una subcarpeta de sitio-prueba y mi-imagen.png está dentro de sitio-prueba, podrías referenciar tu archivo mi-imagen.png desde index.html usando ../mi-imagen.png.
  • Puedes hacer muchas combinaciones así como, por ejemplo: ../subcarpeta/otra-subcarpeta/mi-imagen.png.

Por ahora, eso es todo lo que necesitas saber.

Nota: El sistema de archivos de Windows tiende a usar la diagonal invertida (\), no la diagonal normal (/). Por ejemplo: C:\windows. Esto no es importante para HTML —aunque desarrolles tus sitios web en Windows deberás usar diagonales normales (/) en tu código—.

¿Qué más hay que hacer?

Por ahora es todo. Tu estructura de carpetas debería verse algo así:

Una estructura de archivos en el Finder de MacOS X, mostrando una carpeta de imágenes con una imagen en ella, carpetas de scripts y estilos vacíos, y un archivo index.html