Detrás de casi cualquier web hay datos: los proyectos de un portfolio, las obras de una exposición, los productos de una tienda, los inscritos en un taller. Aquí aprendes a organizarlos. Empezamos por la forma más sencilla de guardarlos: los ficheros.

Un fichero es un conjunto de datos guardado con un nombre y una extensión que indica su formato: cartel.png, estilos.css, proyectos.json. La extensión le dice al sistema qué programa lo abre, pero lo que manda es el contenido.

Hay dos grandes familias:

Los ficheros de texto se pueden versionar con Git y comparar línea a línea; por eso los datos de un proyecto web suelen guardarse en formatos de texto.

• Organización: carpetas con nombres claros, sin espacios ni acentos, y una convención (fecha al principio para ordenar: 2026-10-05-cartel-festival.png).
• Acceso secuencial: se lee de principio a fin (un CSV que se recorre línea a línea).
• Acceso directo: se va a un dato concreto sin leer lo anterior (una base de datos con un índice encuentra un registro entre millones al instante).

Cuando los datos crecen, se relacionan entre sí o los usan varias personas a la vez, los ficheros sueltos se quedan cortos: ahí entran las bases de datos (lección Tipos de bases de datos y SGBD).

CSV (Comma-Separated Values) guarda una tabla: una fila por línea y los valores separados por comas (o por punto y coma, habitual en español porque la coma es el separador decimal):

titulo;autor;anio;tecnica
Cartel Festival Sur;Ana Ruiz;2025;Serigrafía
Identidad Café Lento;Luis Mora;2026;Digital
Exposición Tipos Móviles;Ana Ruiz;2024;Tipografía móvil

• La primera línea suele ser la cabecera con los nombres de las columnas.
• Lo abre cualquier hoja de cálculo (Excel, LibreOffice Calc, Google Sheets) y se exporta desde ellas.
• Es plano: no admite datos anidados (una lista de técnicas dentro de un cartel).

JSON (JavaScript Object Notation) usa la sintaxis de los objetos y arrays de JavaScript (lección Arrays y objetos). Es el formato de las API web y de muchos ficheros de configuración (package.json, lección La terminal y npm):

[
  {
    "titulo": "Cartel Festival Sur",
    "anio": 2025,
    "autor": { "nombre": "Ana Ruiz", "web": "https://example.com" },
    "tecnicas": ["serigrafía", "tipografía"],
    "publicado": true
  }
]

Reglas que no perdona:

• Las claves y los textos van siempre entre comillas dobles.
• Números, true, false y null van sin comillas.
• Sin coma después del último elemento.
• Sin comentarios.

Admite datos anidados (un objeto dentro de otro, una lista dentro de un objeto).

JavaScript convierte JSON en objetos y al revés:

const texto = '{"titulo": "Cartel Festival Sur", "anio": 2025}';
const cartel = JSON.parse(texto);          // de texto a objeto
cartel.anio;                               // 2025

const vuelta = JSON.stringify(cartel);     // de objeto a texto

Y puede cargar un fichero JSON con fetch (lo verás a fondo en la lección Del gestor a JavaScript: leer datos por API):

const respuesta = await fetch("datos/proyectos.json");
const proyectos = await respuesta.json();

1. Crea en una hoja de cálculo una tabla con 5 proyectos tuyos (título, año, categoría, cliente) y expórtala a CSV. Ábrela en VS Code y observa el separador.
2. Escribe los mismos proyectos en un proyectos.json, añadiendo a cada uno una lista de herramientas. Pásalo por un validador (la extensión de VS Code te marca los errores).
3. Carga el JSON con fetch y muestra los títulos en la consola.

• Comillas simples o claves sin comillas en JSON.
• Coma después del último elemento de un array u objeto JSON.
• Abrir un CSV con punto y coma en un programa que espera comas (todo sale en una columna): elige el separador al importar.
• Guardar números como texto ("2025") y luego no poder ordenarlos bien.
• Nombres de fichero con espacios y acentos.