Manejando los archivos

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 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.

  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

Notaras que en este articulo, 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 asi: sitio-prueba/MiImagen.jpg, y luego en un archivo diferente tratas de llamar a la imagen como sitio-prueba/miimagen.jpg, ésta 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 las URIs), rompiendo todos tus enlaces. Por ello es mejor separar las palabras de un nombre con "-" o "_" Asi:  mi-archivo.html o 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, 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 :

  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 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.
  2. Carpeta images: Esta carpeta almacenará todas las imagenes 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 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 opción molesta llamada Ocultar las extensiones de archivo para tipos de archivo conocidos que por defecto está activada. 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 información específica sobre la versión de tu Windows has una búsqueda en ¡Yahoo!

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, 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?"

  1. Copia la imagen que seleccionaste antes dentro de tu carpeta images.
  2. 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> 
  3. La línea <img src="" alt="My test image"> es un codigo HTML que inserta una imagen dentro de nuestra página. Necesitamos decirle a nuestro HTML dónde está 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, necesitará ponerle como ruta images/nombre_archivo_imagen. Por ejemplo, la imagen se llama firefox-icon.png, entonces la ruta sera 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 click en el archivo). Deberías ver tu nueva página 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. mi-imagen.jpg.
  • Para hacer referencia a una subcarpeta, escribe en la ruta: primero el nombre de la carpeta y le agregas un slash, Ejemplo. carpeta/mi-imagen.jpg.
  • Para enlazar un archivo que está fuera de la carpeta que contiene al archivo HTML, deberás 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, 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 acerca de lo que necesitas conocer.

Nota: El sistema de archivos de windows tiende a usar el backslashes (\), no el slash (/), Por Ejemplo. C:\windows. Esto no es importante — Aún si tú desarrollas tus sitios web en windows deberías usar los slashes (/) en tu código.

¿Qué más hay que hacer?

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

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Etiquetas y colaboradores del documento

 Última actualización por: GuilleMiranda,