Navegación, Archivos y Directorios

Las rutas de archivos (filepaths) son fundamentales en el desarrollo web, ya que indican al navegador o proyecto dónde encontrar archivos como imágenes, hojas de estilo o scripts. Comprender cómo funcionan correctamente es clave para evitar errores y mejorar la estructura de tu proyecto.

¿Qué es una Ruta de Archivo?

Una ruta de archivo es una cadena de texto que describe la ubicación de un archivo o carpeta dentro de un sistema o proyecto. Las rutas pueden ser de dos tipos: absolutas o relativas.

Rutas Absolutas vs Relativas

Tipo	Descripción	Ejemplo
Absoluta	Ruta completa desde la raíz del sistema o proyecto.	`/imagenes/logo.png`, `C:/Users/Desktop`
Relativa	Ruta en relación con la ubicación actual del archivo o la estructura del proyecto.	`../imagenes/logo.png`, `./estilo.css`

Símbolos Clave en las Rutas de Archivos

Algunos de los símbolos más comunes en las rutas de archivos, junto con ejemplos de cómo se utilizan:

Símbolo	Significado	Ejemplo
`./`	Directorio actual.	`./index.html`
`../`	Directorio padre (subir un nivel).	`../imagenes/logo.png`
`/`	Directorio raíz o punto de inicio de una ruta absoluta.	`/css/estilo.css`
`C:/`	Especifica una unidad en sistemas Windows.	`C:/Usuarios/Escritorio/archivo.txt`

¿Qué significa usar /file, file o ./file?

/file: Ruta absoluta desde la raíz del servidor o proyecto.
file: Ruta relativa al directorio actual (sin necesidad de usar ./ explícitamente).
./file: Ruta relativa explícita desde el directorio actual, una forma más clara de indicar el contexto relativo.

Usar ./file es una buena práctica porque deja claro que la ruta es relativa al archivo actual.

Ejemplos Prácticos en Desarrollo Web

Aquí tienes algunos ejemplos de rutas de archivos utilizadas en diferentes contextos dentro de un proyecto web:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Ejemplo de Rutas</title>
    <!-- Enlazar CSS -->
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <!-- Agregar una imagen -->
    <img src="./images/logo.png" alt="Logo" />
  </body>
</html>

body {
  background-image: url("../images/bg.jpg");
  font-family: "Arial", sans-serif;
}

fetch("./datos/config.json")
  .then((response) => response.json())
  .then((data) => console.log(data));

Ejecución Local (Sin Servidor)

Cuando abres un archivo .html directamente en el navegador (sin un servidor), las rutas de archivo se interpretan en relación al sistema de archivos local. Esto puede causar problemas si las rutas no están correctamente configuradas para el entorno del navegador.

Errores Comunes y Cómo Evitarlos

Estos son algunos errores comunes que puedes cometer al usar rutas y cómo corregirlos:

<!-- Ruta incorrecta -->
<img src="imgs/logo.png" alt="Logo" />
<!-- Ruta corregida -->
<img src="../images/logo.png" alt="Logo" />
<!-- `../` sube al directorio padre (en este caso de `pages` a `src`) -->

Directorysrc/
- Directoryimages/
  - logo.png
- Directorypages/
  - index.html

// Ruta incorrecta
import data from "/datos/config.json";
// Ruta corregida
import data from "./datos/config.json";
/* `./` asegura que la ruta es relativa al archivo actual */

Directorysrc/
- index.js
- Directorydata/
  - config.json

<!-- Ruta incorrecta -->
<img src="C:/Users/Desktop/The-Vault/src/images/logo.png" alt="Logo" />
<!-- Ruta corregida -->
<img src="../../images/logo.png" alt="Logo" />
<!--
  `../../` sube dos niveles:
  - De `atlas/` a `pages/`
  - De `pages/` a `src/`
  - Luego, accede a `images/` desde `src/`
-->

DirectoryC:/Users/Desktop/The-Vault/
- Directorysrc/
  - Directoryimages/
    logo.png
  - Directorypages/
    Directoryatlas/
    filepaths.html

Mejores Prácticas

Al seguir estas mejores prácticas, puedes evitar errores comunes y mantener tu proyecto organizado:

Usa rutas relativas siempre que los archivos estén dentro del mismo proyecto.
Evita usar rutas absolutas a menos que sea necesario (por ejemplo, para enlaces a CDNs).
Organiza tu proyecto para mantener los archivos relacionados cerca unos de otros.
Verifica tus rutas después de mover o renombrar archivos.
Usa una convención de nombres consistente para las carpetas y los archivos.

Configuración de Rutas en TypeScript

Si usas TypeScript, puedes configurar las rutas en el archivo tsconfig.json, lo que facilita la resolución de rutas relativas a partir de una base predefinida.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

import { Button } from "@components/button";
import { $, $$ } from "~/lib/dom-selector";

const button = $("#button") as HTMLButtonElement;
button.innerHTML = Button.render({ label: "Click me!" });

¿Por qué no usar rutas absolutas al disco local?

Las rutas absolutas como C:/ o file:/// no son portables y solo funcionan en tu máquina. Usar rutas relativas asegura que el proyecto funcione en cualquier entorno.

Fin.