Editor

Estructura organizada de carpetas de proyecto

Es la forma ordenada y consistente de acomodar todos los archivos de un proyecto en carpetas con un propósito claro, para que cualquiera (tú, tu equipo o tu “yo” del futuro) pueda encontrar, entender y mantener el trabajo sin perder tiempo.

Una estructura de carpetas es como la organización de un taller: si cada herramienta tiene su lugar, trabajas más rápido y cometes menos errores.

Principios básicos

  1. Una carpeta = un propósito

    • No mezclar “documentos”, “imágenes” y “código” en el mismo lugar.

  2. Nombres claros y consistentes

    • Evitar: cosas, nuevo, final_final, aaaa
    • Preferir: docs, assets, src, backup

  3. Separar lo editable de lo generado

    • Editable: tus archivos (documentos, código, imágenes fuente)
    • Generado: compilados, exportaciones, cachés, builds

  4. Evitar duplicados

    • Si hay copias, deben estar justificadas (ej. releases/).

  5. Mantenerlo simple

    • Estructura corta, fácil de memorizar.

Estructura ejemplo

Imagina un proyecto típico de clase:

MiProyecto/
├─ README.txt
├─ docs/
│  ├─ guia.pdf
│  └─ evidencias/
├─ src/
│  ├─ main/
│  └─ modules/
├─ assets/
│  ├─ img/
│  ├─ icons/
│  └─ fonts/
├─ data/
│  ├─ ejemplos/
│  └─ respaldos/
├─ tests/
└─ build/   (salidas/exportaciones)

¿Qué va en cada carpeta?

  • README: qué es el proyecto y cómo se usa.
  • docs/: documentación, reportes, evidencias, manuales.
  • src/: archivos principales del trabajo (código o contenido base).
  • assets/: recursos (imágenes, iconos, tipografías, multimedia).
  • data/: datos de ejemplo, archivos de entrada, respaldos controlados.
  • tests/: pruebas o casos de verificación (si aplica).
  • build/: exportaciones finales (lo que se entrega o se ejecuta).

Actividades

Actividad 1: Proyecto organizado

Paso 1 - Elegir un diseño en CodePen

Ingresar a https://codepen.com y seleccionar un diseño sencillo que tenga:

  • HTML
  • CSS

Extraer el código y prepararlo para usarlo en archivos separados.

Paso 2 – Crear estructura de proyecto

Crear una carpeta principal con el nombre:

Proyecto_Apellido_Nombre

La estructura debe quedar EXACTAMENTE así:

Proyecto_Apellido_Nombre/
│
├── index.html
│
├── css/
│     └── estilos.css
│
├── docs/
│     └── evidencia.txt
│
└── README.md

No se permiten archivos fuera de esta estructura.

Paso 3 – Separación correcta del código

  • El código HTML va en index.html.
  • El código CSS debe guardarse en css/estilos.css.
  • El HTML debe enlazar correctamente el archivo CSS externo.
  • No se permite CSS interno ni dentro del HTML.

Paso 4 – Archivo README obligatorio

En la raíz del proyecto deben crear README.md que debe contener:

  • Nombre del proyecto
  • Nombre del alumno
  • Grupo
  • Fecha
  • Descripción breve del proyecto
  • Explicación de la estructura de carpetas

Ejemplo de estructura del README:

# Proyecto Web

Autor: Juan Pérez  
Grupo: 5°A  
Fecha: 10/02/2026  

## Descripción

Sitio web estático basado en un diseño de CodePen.

## Estructura

- index.html → Archivo principal
- css/estilos.css → Estilos externos
- docs/evidencia.txt → Reflexión del proyecto