Manual de Autogestión

👋 ¡Bienvenidos a su Casa Digital!

Este manual está diseñado para que el equipo de El Molinete tenga el control total. Aquí aprenderán a actualizar la agenda, gestionar la tienda y subir fotos nuevas sin depender de nadie.

📅

1. Cómo actualizar la Agenda Cultural

Cada mes podrán cambiar los eventos. Solo necesitan abrir el archivo index.html con el Bloc de Notas o VS Code.

Busquen el bloque de la Agenda

Usen Ctrl + B y busquen "Agenda Diciembre" (o el mes actual).

Editen SOLO el texto negro

Lo que está marcado en amarillo es lo que deben cambiar:

<!-- TARJETA DE EVENTO -->
<p>Sábado 15 de Enero</p>
<h3>Taller de Verano: Títeres</h3>

<!-- HORA -->
<span>4:00 p.m.</span>

<!-- BOTÓN WHATSAPP (¡No borren las comillas!) -->
onclick="openWhatsApp('Hola, quiero info del taller del 15')"

🛒

2. Gestión de "La Tiendita"

A. Cambiar Precios o Textos

Es igual que la agenda. Busquen la sección "La Tiendita" en el archivo.

<span class="text-2xl font-extrabold...">
  S/ 65.00
</span>

Simplemente borren el número viejo y escriban el nuevo.

B. Agregar un Nuevo Producto

Para agregar un producto, deben copiar un "bloque de producto" existente y pegarlo debajo. Un producto empieza con <article> y termina con </article>.

Pasos:

Busquen el último producto de la tienda.
Identifiquen donde termina su etiqueta </article>.
Hagan un espacio (Enter) y peguen este código bloque debajo:

<!-- NUEVO PRODUCTO -->
<article class="bg-white rounded-3xl shadow-xl overflow-hidden border border-neutral-100...">
  
  <!-- FOTO (Asegúrense que el archivo exista en la carpeta images) -->
  <div class="relative h-72 overflow-hidden bg-gray-100">
    <img src="assets/images/NOMBRE-DE-TU-FOTO.jpg" class="w-full h-full object-cover...">
  </div>

  <div class="p-8">
    <h3 class="text-2xl font-bold...">Nombre del Producto</h3>
    <p class="text-neutral-600...">Descripción corta del producto aquí.</p>

    <!-- PRECIO Y BOTÓN -->
    <div class="flex items-center justify-between...">
      <span class="text-2xl font-extrabold...">S/ 50.00</span>
      <button onclick="openWhatsApp('Hola, quiero comprar el Producto Nuevo')" class="btn...">
        Comprar
      </button>
    </div>
  </div>
</article>

C. Eliminar un Producto

Si un producto se agotó y quieren quitarlo:

Identifiquen el producto en el código (busquen su nombre, ej: "Títeres divertidos").
Seleccionen TODO el bloque, desde la palabra <article...> que está arriba del nombre...
...hasta el cierre </article> que está debajo del botón de comprar.
Presionen la tecla Borrar (Supr). ¡Y listo!

🖼️

3. Cambiar Fotos (El Método Fácil)

No toquen el código para esto. Solo "reemplacen" el archivo.

PASO 1 Vayan a la carpeta assets > images y miren el nombre de la foto vieja (ej: hero-festival.jpg).
PASO 2 Tomen su foto nueva y cámbienle el nombre para que se llame EXACTAMENTE IGUAL que la vieja.
PASO 3 Copien la foto nueva, péguenla en la carpeta y denle a "Reemplazar archivo". La web se actualizará sola.

🌟

4. Consejos de Experto (¡Muy Importante!)

⚡ Velocidad (Imágenes)

Nunca suban fotos directas de la cámara o WhatsApp, pesan demasiado (3MB+). Antes de usarlas, pásenlas por TinyPNG.com. Esto hará que pesen menos (200kb) y la web cargará rápido en los celulares de sus clientes.

🔄 "No veo los cambios"

Si suben un cambio a Netlify y no lo ven en su compu, es por la "Memoria Caché". Intenten abrir la página en una ventana de Incógnito o presionen Ctrl + F5 para forzar la recarga.

📐 Tamaños en la Tienda

Para que la tienda se vea ordenada, intenten que todas las fotos de los productos sean del mismo tamaño (o al menos todas cuadradas o todas rectangulares). Si mezclan fotos verticales con horizontales, las tarjetas se verán disparejas.

🚀

5. Publicar en Internet (Netlify)

Arrastrar carpeta aquí

Cuando hayan guardado sus cambios en la PC:

Entren a su cuenta de Netlify.com.
Vayan a la pestaña "Deploys".
Arrastren la carpeta MOLINETE completa al recuadro punteado.
Esperen a que diga "Published".