Curso HTML 2.4 Estructura básica de un proyecto web (carpetas y archivos)

2.4 Estructura básica de un proyecto web (carpetas y archivos)

Para cualquier proyecto web es fundamental mantener una estructura de carpetas y archivos clara, escalable y fácil de entender. Esto facilita el trabajo en equipo, la mantenibilidad del código y la evolución futura del proyecto. A continuación profundizamos en cada elemento clave.

1. Raíz del proyecto

La carpeta raíz debe contener archivos de configuración, el punto de entrada principal y subcarpetas que separen responsabilidades:

• index.html: página de inicio o punto de entrada a la aplicación.
• README.md: documentación básica del proyecto (opcional pero recomendado).
• package.json: si usas Node.js para scripts, dependencias o gestores de paquetes.
• .gitignore: para excluir archivos/directorios del control de versiones.

2. Carpetas principales

3. Ejemplo de estructura de carpetas

Una vista en modo árbol de directorios:

/mi-proyecto/
├── index.html          
├── README.md           
├── .gitignore
├── css/                
│   ├── reset.css
│   ├── styles.css
│   └── componentes/
│       └── botones.css
├── js/                 
│   ├── main.js
│   ├── utils.js
│   └── vendors/
│       └── libreria.js
├── images/             
│   ├── logo.png
│   └── icons/
│       └── home.svg
├── fonts/              
│   └── OpenSans-Regular.woff2
└── assets/             
    └── intro.mp4
  

4. Detalles y buenas prácticas

• Usa nombres en minúsculas y separados con guiones (por ej. mi-archivo.js) para evitar problemas en servidores UNIX.
• Evita espacios y caracteres especiales en nombres de carpetas/archivos.
• Mantén separación de responsabilidades: estilos en css/, scripts en js/, recursos estáticos en images/ y assets/.
• Si crece mucho el proyecto, subdivide carpetas en módulos o componentes.
• Incluye un archivo README.md o DOCUMENTATION explicando la estructura y comandos de construcción.

5. Ejemplo de index.html básico

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Mi Proyecto Web</title>
    
    <link rel='stylesheet' href='css/reset.css'>
    <link rel='stylesheet' href='css/styles.css'>
  </head>
  <body>
    <!-- Contenido principal -->
    <header>
      <img src='images/logo.png' alt='Logo'>
      <nav>
        <ul>
          <li><a href='#'>Inicio</a></li>
          <li><a href='#'>Contacto</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>Bienvenido a mi sitio</h2>
      <p>Este es un ejemplo de proyecto con estructura organizada.</p>
    </main>

    <footer>
      <p>&copy; 2024 Mi Proyecto</p>
    </footer>

    
    <script src='js/utils.js'></script>
    <script src='js/main.js'></script>
  </body>
</html>
  

6. Rutas relativas y absolutas

Las rutas más comunes son relativas al archivo que las incluye:

• css/styles.css apunta a mismo nivel que index.html.
• images/logo.png baja a la carpeta images/.
• Si desde css/ quieres importar otra hoja de estilos: @import url('../css/reset.css'); (sube un nivel con ..).

7. Automatización y herramientas

Cuando el proyecto crece, conviene usar:

• Task runners (Gulp, Grunt) o bundlers (Webpack, Vite) para procesar, minimizar y versionar CSS/JS.
• Preprocesadores (Sass, Less) ubicando archivos parciales en css/scss/ o css/less/.
• Herramientas de control de versiones (Git) y repositorios remotos (GitHub, GitLab).