Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

La estructura de archivos de un sitio web funciona de forma similar a la de tu disco duro. Sin embargo, ¿sabes cómo opera en realidad? Lo conocerás a continuación.

Estructura de archivos

Toda computadora, e incluso los teléfonos, emplean la misma estructura de archivos. Esto es un árbol de carpetas dónde se almacena toda la información del ordenador. En ese sentido, tienes carpetas dedicadas a diferentes objetivos y todo vive dentro de estas carpetas.

Estructura de archivos según el sistema operativo

💡 En Windows, la carpeta raíz es el disco duro (comúnmente llamado “C:”).

¿Por qué una “C:”? Pues, alguien le asignó la “A:” y la “B:” a los disquetes o “Floppy disc” de antes. Así que los discos duros empiezan a contar a partir de la “C:”.

💡 En el caso de Linux, la carpeta raíz es el “home”. Desde ahí parte todo, incluyendo tu carpeta de usuario donde guardas todo lo demás.

💡 el caso de una web no es muy diferente. La carpeta raíz generalmente es tu dominio web (ej.: “www.platzi.com”). Y desde ahí parten todas las carpetas y archivos que componen tu sitio web.

💡 Ojo

Windows tiene una particularidad en su estructura de archivos: Windows no presta atención a las mayúsculas en los nombres de carpetas o archivos. Pero todos los demás sí. La mayoría de los servidores web son Linux. Y en Linux, la carpeta “Documentos/” es diferente a la carpeta “documentos/”.

Presta mucha atención al uso de mayúsculas en los nombres de archivos para tu sitio web. Y, preferiblemente, escribe todos los nombres en minúscula. En el caso de nombres compuestos, puedes utilizar “_” para separar las palabras (de_este_modo.txt).

Estructura de archivos relativa

Para escribir una ruta absoluta, tienes que empezar por la carpeta raíz y escribir la dirección carpeta por carpeta, hasta llegar al archivo que estás buscando. Por ejemplo:

/home/Freddier/docs/cursito/codigo.html. Sin embargo, recuerda que naturalmente puedes navegar entre carpetas (en especial si lo haces desde la terminal de comandos, o desde el explorador de archivos).

Cuando navegas hacia una carpeta, esta se convierte en tu posición relativa. Y en programación, puedes aprovechar tu posición relativa para referir a todos los archivos que necesites dentro de esa carpeta, o incluso un nivel afuera. Por ejemplo, si estás dentro de la carpeta “programar/”, entonces puedes hacer referencia a un archivo dentro de ella simplemente por si nombre, o por la dirección que sigue luego.

Dentro de “programar/” puedes invocar archivos que viven dentro de ella tan fácil como escribir como “imágenes/foto.jpg” o “juego.html”

💡 Esto es importante porque tu sitio web tiene una estructura de carpetas como esta, dónde se guardan todos los archivos que vas a usar.

Sin embargo, para que el usuario pueda observarlos, antes tienes que ejecutarlos desde el HTML. Y eso significa que tendrás que escribir estas rutas de archivos con mucha frecuencia dentro de tu código.

Estructura de archivos de un sitio web

Todo empieza por la carpeta dónde se encuentra el proyecto. Allí es dónde suelen estar los archivos HTML del sitio web.

Sin embargo, archivos complementarios como imágenes, código JavaScript o las hojas de estilos CSS suelen vivir en carpetas diferentes dentro de la carpeta del proyecto, cada una dedicada a un tipo de archivo.

💡 Aunque puedes escribir el código directamente en el archivo HTML, la mejor práctica es escribirlo en archivos separados.

Recuerda que en muchas ocasiones los archivos pueden volverse muy extensos y complejos. Por esa razón, lo ideal es tener al menos un archivo para el HTML, otro para el CSS y otro para el código JavaScript. Esto también te beneficia en tu editor de código porque si trabajas en un archivo con un solo lenguaje, le das la oportunidad al editor de código de brindarte todo el soporte que ya tiene para ese lenguaje.

💡 Puedes invocar el código en otros archivos a través de etiquetas HTML con sus respectivos atributos.

Para ejecutar un archivo CSS se usa:

<link href="css/estilos.css" rel="stylesheet">

Y para ejecutar un archivo JavaScript, colocas:

<script src="js/codigo.js"></script>

💡 Es importante que coloques la extensión correcta para los archivos. Si los escribes mal, el navegador no podrá cargarlos para construir tu sitio web.

Si estás en Windows, recuerda activar la opción para ver las extensiones de los archivos desde el explorador de archivos → vista → mostrar u ocultar → Extensiones de nombre de archivo.

---

Conocer y dominar la estructura de archivos es una habilidad fundamental para un programador.

De hecho, existe otra habilidad que es de mucha ayuda para programadores, que consiste en dominar la terminal y línea de comandos. Esto es relevante para dominar Git o para programar en backend. Si te interesa, puedes profundizar más en el curso de terminal y línea de comandos de Platzi.

Pero no dejes de completar este curso. Así que empieza por separar el código JavaScript del HTML en nuestro juego de piedra, papel o tijera, y conéctalos con el atributo de la etiqueta <script> que conociste más arriba (y no olvides revisar la indentación luego de copiar y pegar).

Válida que tu juego aún funciona, puedes usar los archivos de la clase como punto de comparación si lo necesitas. Y cuando termines continúa a la siguiente clase, donde aprenderemos sobre qué es el DOM.

Contribución creada por Jhonkar Sufia (Platzi Contributor).