La IA en el Ámbito Técnico y Administrativo

Índice de Contenidos

Definición y Concepto Clave
Áreas de Aplicación por Especialidad
La Ética y la "Regla de Oro"
El Prompting: El lenguaje del futuro
Conceptos Complementarios de IA
Ecosistema de Herramientas Recomendadas (incluyendo Cuadernos de Gemini / NotebookLM)
Talleres Prácticos y Ejercicios de Aplicación
- Taller 1: Generación de Material (Preescolar)
- Taller 2: Programación Asistida (Contabilidad)
- Taller 3: Creando tu Oficina/Aula Virtual (Google Sites, Forms, Asistentes IA, Footer, Audio Drive, Chatbot, Treblo, Spotify, Reproductor MP3 WebAmp, Carrusel y QR)
Profundización Ética en el Sector Administrativo
De Usuarios a Creadores: Diseñando Gems (Proceso en cuentas gratuitas y Pro)
Taller Práctico 5: Tu Primer "Gem"
El Futuro: Bases de Datos e Integración
IA en la Nube vs. IA Local
Marketing y Expansión de Servicios
Análisis Predictivo: La IA como Gerente
Taller Práctico 6: Diseñando una Campaña Multimedia
La Revolución del Video y Multimedia
Ecosistema de Herramientas para Creación
Taller Práctico 7: Produciendo una Campaña de Servicios
Taller Práctico 8: Dando Vida al Video (Banda Sonora)
Ética Visual y Transparencia en Redes
Meta AI: Generación y Animación en tu Bolsillo
Gamma App: Presentaciones de Alto Impacto (Guía Completa + Exportación a PowerPoint y Video MP4)
Taller Práctico 9: Exposición Generada con IA
Taller 10: Nivel Maestro - Creando tu propia Gema Arquitecta
Reflexión Final: El Corazón de la Labor Humana

1. Definición y Concepto Clave

La Inteligencia Artificial (IA) en el entorno corporativo y educativo no es una entidad pensante, sino un conjunto de algoritmos de aprendizaje automático (Machine Learning). Estos sistemas analizan miles de datos previos (correos electrónicos, balances financieros, planificaciones pedagógicas) para identificar patrones, redactar documentos y automatizar flujos con alta precisión.

Dato importante: La IA no sustituye al humano; funciona como un "Copiloto de Inteligencia" que ayuda al profesional técnico a trabajar más rápido, con menos errores y mayor creatividad.

2. Áreas de Aplicación por Especialidad

🏢 Modo Administrativo y Contable

Secretariado y Contabilidad

Secretariado (Gestión y Comunicación): Automatización de tareas repetitivas como redacción de minutas de reuniones, organización de agendas complejas y filtrado de correos electrónicos prioritarios.
Contabilidad (Análisis y Finanzas): Clasificación automática de facturas, detección de anomalías en los libros contables y resúmenes rápidos de extensas normativas tributarias.

🎨 Modo Educación Preescolar

Educación Preescolar

Preescolar (Pedagogía y Psicología): Creación de cuentos interactivos personalizados, diseño de material didáctico visual y redacción de informes de progreso emocional para los padres de familia.

3. La Ética y la "Regla de Oro"

El uso de IA en oficinas y aulas conlleva responsabilidades críticas:

Privacidad: Nunca se deben subir datos personales o sensibles (nombres de niños, identificaciones fiscales, información bancaria de clientes) a plataformas de IA abiertas.
Verificación: La IA puede sufrir "alucinaciones" (inventar datos). Por tanto, todo balance financiero o informe pedagógico generado por IA debe ser revisado, validado y firmado por el profesional a cargo.

4. El Prompting: El lenguaje del futuro

Para que la IA sea útil, debes saber darle órdenes. Esto se llama Prompt Engineering. Un buen comando siempre debe incluir la fórmula R-C-T-F:

🏢 Ejemplo R-C-T-F Administrativo / Contable

Rol (R): Quién debe ser la IA (ej. "Actúa como un contador experto").
Contexto (C): Qué está pasando (ej. "Tengo que explicarle a un cliente por qué debe pagar el IVA").
Tarea (T): Qué necesitas (ej. "Redacta un correo explicativo").
Formato (F): Cómo lo quieres (ej. "En 3 párrafos formales").

🎨 Ejemplo R-C-T-F Educación Preescolar

Rol (R): Quién debe ser la IA (ej. "Actúa como docente de preescolar").
Contexto (C): Qué está pasando (ej. "Los niños de 4 años están aprendiendo las vocales").
Tarea (T): Qué necesitas (ej. "Diseña un juego de asociación").
Formato (F): Cómo lo quieres (ej. "En una tabla con viñetas").

🧠 Cuestionario de Repaso (Capítulos 1 al 4)

1. ¿Cuál es la función principal de la IA en la labor diaria de un técnico?

a) Reemplazar al contador, secretaria o docente. b) Actuar como un "copiloto" para agilizar tareas y potenciar la creatividad. c) Tomar decisiones financieras sin supervisión humana.

2. ¿Qué se entiende por "alucinación" en un sistema de IA?

a) Cuando la IA genera dinámicas de juego muy útiles. b) Cuando la IA inventa normativas, cifras o datos que parecen reales pero son incorrectos. c) Cuando la IA detecta un error en una factura.

3. En la fórmula de "Prompting" (R-C-T-F), ¿qué significa la letra "R"?

a) Resultado: Lo que esperamos obtener. b) Rol: Definir quién debe ser la IA (ej. "Actúa como secretaria ejecutiva"). c) Revisión: El proceso de corregir el texto final.

5. Conceptos Complementarios de IA

Para dominar la IA, es fundamental entender sus ramas principales:

Procesamiento de Lenguaje Natural (PLN): Capacidad de entender y generar texto. Es lo que permite que la IA lea la transcripción de una reunión de 2 horas y extraiga únicamente los compromisos asignados a cada empleado.
Visión Artificial (Computer Vision): El "ojo" de la IA. Algoritmos que pueden leer recibos escaneados arrugados y digitalizar los montos, o analizar la foto de un salón de clases para sugerir una distribución de mesas más segura para los niños.
Agentes de IA: Sistemas configurados para un rol específico. Por ejemplo, un agente entrenado exclusivamente con el manual de convivencia del colegio para responder dudas de los padres.

6. Ecosistema de Herramientas Recomendadas

(Consulta el material complementario en: https://asoeduca.edu.co/inteligencia/)

No todas las IAs sirven para lo mismo. Aquí tienes un kit de herramientas clave:

Texto y Análisis General:

Gemini (Google): Excelente para integración con correos (Gmail), redacción corporativa y análisis rápido.
Claude (Anthropic): Destaca por leer documentos PDF larguísimos (como leyes laborales) y redactar con un tono muy empático y natural.

Generación de Imágenes y Multimedia:

Gemini (Imagen): Rápido y útil para crear ilustraciones infantiles o gráficos sencillos.
ComfyUI / Midjourney: Para resultados profesionales y altamente controlables (útil para la imagen corporativa de una empresa).
Suno: Para generar canciones infantiles educativas o jingles para la central telefónica de la oficina.

Gestión del Conocimiento y Estudio: NotebookLM (ahora Cuadernos de Gemini / Gemini Notebook)

NotebookLM (Google) — Actualmente integrado como "Cuadernos de Gemini" (Gemini Notebook):

Es la herramienta definitiva para estudiar y cruzar información de múltiples fuentes cerradas. Subes tus apuntes, estatutos tributarios, leyes laborales o manuales pedagógicos, y creas un asistente experto personalizado que te examina y resume basándose exclusivamente en tus documentos, reduciendo a cero las alucinaciones.

¿Cómo crear y usar tu Cuaderno en NotebookLM / Cuadernos de Gemini?

Ingresa a https://notebooklm.google.com/ o accede desde tu cuenta de Google / Gemini en la sección de Cuadernos (Notebooks).
Haz clic en "Nuevo Cuaderno" (Create Notebook) y asígnale un nombre (ej. "Normativa Tributaria 2026" o "Proyecto Pedagógico Primera Infancia").
Agrega tus Fuentes (Sources): Sube tus archivos PDF, documentos de Google Docs, presentaciones de Slides, enlaces web o videos de YouTube.
Consulta e Interactúa: Hazle preguntas específicas en el chat del cuaderno (te mostrará citas exactas del párrafo de tu documento de donde extrajo el dato) o genera guías de estudio, cronologías, preguntas frecuentes y resúmenes de audio tipo podcast.

7. Talleres Prácticos y Ejercicios de Aplicación

La mejor forma de aprender es haciendo. Estos talleres están diseñados para ejecutarse utilizando herramientas como Gemini (https://gemini.google.com/) y el administrador de Gems (https://gemini.google.com/gems/view).

🎨 Exclusivo Modo Preescolar

Taller 1: Generación de Material (Preescolar)

Objetivo: Crear una guía visual para padres sobre motricidad fina.

Ejercicio Textual (Prompt R-C-T-F):

Prompt Psicopedagogo (Preescolar)

Actúa como un psicopedagogo experto. El contexto es que los padres de niños de 3 años no saben cómo estimular el agarre del lápiz en casa. Tu tarea es redactar una guía rápida con actividades cotidianas (como usar pinzas de ropa). El formato debe ser un texto de 3 párrafos con viñetas amigables.

Ejercicio Visual:

Prompt Ilustración Infantil

Genera una ilustración vectorial, estilo acuarela infantil suave, que muestre a un niño pequeño jugando feliz con bloques de construcción de madera. Fondo blanco limpio, colores cálidos.

🏢 Exclusivo Modo Administrativo y Contable

Taller 2: Programación Asistida (Contabilidad)

Objetivo: Crear una calculadora web para la empresa sin saber programar.

Ejercicio: Pídele a la IA el código completo con este prompt:

Prompt Calculadora Rápida de IVA

Actúa como desarrollador web experto (HTML/JS). Necesito el código completo en un solo archivo (HTML, CSS y JavaScript) para una 'Calculadora Rápida de IVA'. Debe tener un campo para ingresar el Valor Base, y al presionar 'Calcular', debe mostrar el IVA (19%) y el Valor Total. Diseño corporativo, limpio y responsivo.

Resultado: Copia el código generado, guárdalo en un bloc de notas como calculadora_iva.html y ábrelo en tu navegador o incrustalo en Google Sites.

Taller 3: Creando tu Oficina / Aula Virtual (Google Sites e IA)

Objetivo: Digitalizar la captura de datos (recepción/matrícula), integrar elementos visuales y conectar un asistente de IA en tiempo real.

Paso 1: Digitalizando la Recepción (Google Forms)

Ingresa a https://docs.google.com/forms/. Para capturar la información que alimentará a nuestros sistemas o asistentes de IA, debes crear un formulario en Google Forms. A continuación, se presentan las estructuras exactas adaptadas para cada especialidad:

🎨 Opción A: Educación Preescolar

Formulario para Educación Preescolar

Título del Formulario: Ficha de Matrícula y Caracterización Inicial - Aula Virtual
Descripción: Estimados padres y tutores, este formulario recopila datos clave para personalizar el proceso pedagógico y de adaptación de su hijo/a.

Preguntas a configurar:

Nombre completo del estudiante (Tipo: Texto corto - Obligatorio)
Fecha de nacimiento (Tipo: Fecha - Obligatorio)
Nombre completo del Padre, Madre o Tutor (Tipo: Texto corto - Obligatorio)
Teléfono celular de contacto (WhatsApp) (Tipo: Texto corto - Obligatorio)
Correo electrónico (Tipo: Texto corto - Obligatorio)
¿El estudiante presenta alguna alergia, condición médica o restricción alimentaria? (Tipo: Párrafo - Obligatorio. Indicar "Ninguna" si no aplica)
Describa brevemente los intereses del niño/a (juegos favoritos, personajes, miedos comunes) (Tipo: Párrafo - Opcional. Útil para que la IA diseñe cuentos o actividades personalizadas)
Autorización de uso de registro fotográfico pedagógico (Tipo: Varias opciones. Opciones: "Sí, autorizo para fines pedagógicos internos" / "No autorizo")

🏢 Opción B: Contabilidad y Secretariado

Formulario para Contabilidad y Secretariado

Título del Formulario: Recepción de Clientes y Solicitud de Servicios Profesionales
Descripción: Bienvenido a nuestra plataforma de atención. Por favor, diligencie los siguientes datos para agilizar la asignación de su asesor y la revisión de su caso.

Preguntas a configurar:

Nombre completo o Razón Social de la empresa (Tipo: Texto corto - Obligatorio)
Número de Identificación Fiscal (NIT / Rut / Cédula) (Tipo: Texto corto - Obligatorio)
Nombre del contacto principal / Representante (Tipo: Texto corto - Obligatorio)
Teléfono celular de contacto (Tipo: Texto corto - Obligatorio)
Correo electrónico corporativo (Tipo: Texto corto - Obligatorio)
Tipo de Régimen Tributario (Tipo: Varias opciones. Opciones: "Persona Natural" / "Responsable de IVA (Régimen Común)" / "No Responsable de IVA (Régimen Simplificado)" / "Régimen Simple de Tributación - RST")
Servicio o Requerimiento Principal (Tipo: Casillas de verificación. Opciones: "Asesoría Contable / Mensual" / "Liquidación y Declaración de Impuestos" / "Gestión de Nómina y Recursos Humanos" / "Organización de Archivos y Correspondencia" / "Auditoría Financiera")
Describa brevemente el estado actual o la urgencia de su solicitud (Tipo: Párrafo - Obligatorio)

Paso 2: Construcción del Sitio Web (Google Sites)

Ingresa a https://sites.google.com/ y crea un proyecto en blanco en Google Sites. Reemplaza el encabezado integrando este bloque HTML (Insertar > Código incorporado):

HTML - Encabezado Hero para Google Sites

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
    .hero-section {
      position: relative; width: 100%; height: 450px;
      background-image: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
      background-size: cover; background-position: center;
      display: flex; align-items: center; justify-content: center;
    }
    .overlay {
      background-color: rgba(0, 0, 0, 0.6); position: absolute;
      top: 0; left: 0; right: 0; bottom: 0; display: flex;
      flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 0 20px;
    }
    h1 { color: #ffffff; font-size: 2.8rem; margin: 0 0 10px 0; }
    .slogan { color: #f1f1f1; font-size: 1.2rem; max-width: 650px; margin-bottom: 30px; }
    .btn-agendar {
      background-color: #2761F5; color: #ffffff; padding: 15px 35px;
      text-decoration: none; font-size: 1.1rem; font-weight: bold;
      border-radius: 8px; transition: 0.3s;
    }
    .btn-agendar:hover { background-color: #1e4bbd; transform: translateY(-2px); }
  </style>
</head>
<body>
  <div class="hero-section">
    <div class="overlay">
      <h1>Soluciones Profesionales e Integrales</h1>
      <p class="slogan">Optimizando tu tiempo, cuidando tus finanzas y educando para el futuro.</p>
      <a href="#" target="_blank" class="btn-agendar">Contactar Ahora</a>
    </div>
  </div>
</body>
</html>

Códigos de Colores Hexadecimales: https://htmlcolorcodes.com/es/

🎨 Paso 3 (Preescolar): Cerebro IA EduPeque

Paso 3: Insertar el Cerebro de la IA (El Asistente Virtual para Preescolar)

Copia este bloque en Google Sites (Insertar > Código incorporado) para conectar tu copiloto educativo:

HTML Completo - 🎨 EduPeque (Asistente Preescolar)

<!-- ESTILOS VISUALES -->
<style>
  :root {
    --color-fondo-principal: #fdfbfb; 
    --color-borde: #dee2e6;           
    --color-primario: #ff6b6b;        
    --color-boton-hover: #fa5252;     
    --color-texto-titulo: #2c3e50;    
    --color-texto-general: #333333;   
  }

  #contenedor-chat {
    font-family: sans-serif; padding: 20px; background: var(--color-fondo-principal); 
    border-radius: 8px; border: 1px solid var(--color-borde); max-width: 500px; margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  }
  #btn-enviar {
    background: var(--color-primario); color: white; border: none; padding: 10px 15px; 
    border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold; font-size: 16px;
    transition: background 0.3s;
  }
  #btn-enviar:hover { background: var(--color-boton-hover); }
  #btn-enviar:disabled { background: #6c757d; cursor: not-allowed; }
  #resultado {
    margin-top: 15px; padding: 15px; background: white; border-radius: 4px; 
    border-left: 4px solid var(--color-primario); min-height: 50px; 
    white-space: pre-wrap; color: var(--color-texto-general); line-height: 1.5; overflow-wrap: break-word;
  }
  .creditos {
    text-align: center; font-size: 11px; color: #6c757d; margin-top: 15px; font-style: italic;
  }
</style>

<!-- INTERFAZ DEL CHAT -->
<div id="contenedor-chat">
  <h3 id="titulo-bot" style="color: var(--color-texto-titulo); margin-top: 0;">🎨 EduPeque - Asistente Preescolar</h3>
  
  <textarea id="prompt" rows="3" onkeydown="manejarEnter(event)" style="width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--color-borde); resize: none; font-family: inherit;" placeholder="Pide una canción, una actividad didáctica o un consejo sobre desarrollo infantil..."></textarea>
  
  <button onclick="consultarIA()" id="btn-enviar">
    Enviar Consulta Educativa
  </button>
  
  <div id="resultado">
    Esperando tu consulta...
  </div>

  <div class="creditos">
    Desarrollado por Rubén Eduardo Rojas Santa - Senior Staff Engineer
  </div>
</div>

<div style="text-align: center; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; max-width: 500px; margin: 0 auto; margin-top: 15px;">
  <p style="font-family: sans-serif; color: #333; margin-top: 0; font-size: 14px; font-weight: bold;">¿Necesitas hablar con un humano?</p>
  
  <a href="https://wa.me/573163001221?text=Hola,%20quisiera%20más%20información%20sobre%20asesoría%20educativa%20o%20preescolar" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; background-color: #25D366; color: white; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-family: sans-serif; font-weight: bold; font-size: 16px; width: 100%; box-sizing: border-box; transition: background-color 0.3s;">
    
    <svg style="width: 24px; height: 24px; margin-right: 10px; fill: white;" viewBox="0 0 24 24">
      <path d="M12.031 0C5.385 0 0 5.385 0 12.031c0 2.12.551 4.183 1.597 6.002L.03 24l6.115-1.602A11.966 11.966 0 0012.031 24c6.646 0 12.031-5.385 12.031-12.031S18.677 0 12.031 0zm3.834 17.291c-.281.794-1.637 1.545-2.261 1.62-.577.069-1.294.225-4.103-1.428-3.385-1.992-5.59-5.46-5.759-5.688-.169-.228-1.378-1.834-1.378-3.497 0-1.663.858-2.484 1.167-2.822.309-.338.675-.422.9-.422.225 0 .45.006.647.013.203.006.475-.075.74.563.338.816 1.097 2.672 1.197 2.869.1.197.169.428.028.694-.141.266-.213.431-.422.684-.209.253-.44.55-.631.763-.209.231-.431.484-.181.913.25.428 1.113 1.838 2.394 2.981 1.656 1.478 3.031 1.938 3.475 2.147.444.209.703.178.966-.119.263-.297 1.144-1.331 1.453-1.788.309-.456.619-.381 1.025-.225.406.156 2.569 1.209 3.013 1.434.444.225.741.338.847.525.106.188.106 1.088-.175 1.881z"/>
    </svg>
    Hablar por WhatsApp
  </a>
</div>

<!-- LÓGICA Y CONEXIÓN AL BACKEND -->
<script>
  // ==========================================
  // ⚙️ ZONA DE CONFIGURACIÓN PARA EL ESTUDIANTE
  // ==========================================
  const CONFIG = {
    // 1. Ponle un nombre y un emoji a tu asistente
    nombreAsistente: "🎨 EduPeque - Asistente Preescolar",
    
    // 2. Define cómo debe comportarse la IA (Personalidad)
    instruccionesSistema: "Eres un asistente de preescolar muy creativo y cariñoso. Responde con un tono entusiasta, usa metáforas sobre juegos y aprendizaje, y mantén la precisión pedagógica para niños de la primera infancia.",
    
    // 3. ENLACE DEL SERVIDOR (El archivo PHP en tu hosting)
    urlServidor: "https://asoeduca.edu.co/aura/ia_html.php" 
  };
  // ==========================================

  // Inicializar el título
  document.getElementById('titulo-bot').innerText = CONFIG.nombreAsistente;

  function manejarEnter(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault(); 
      consultarIA(); 
    }
  }

  async function consultarIA() {
    const promptInput = document.getElementById('prompt');
    const resDiv = document.getElementById('resultado');
    const btn = document.getElementById('btn-enviar');
    
    const p = promptInput.value.trim();
    if(!p) {
      resDiv.innerText = "Por favor, escribe una consulta.";
      return;
    }

    resDiv.innerText = "Pensando en la mejor respuesta...";
    btn.disabled = true;
    
    // Empaquetamos la personalidad y la pregunta del usuario en el formato JSON esperado por el PHP
    const payload = {
        system_prompt: CONFIG.instruccionesSistema,
        prompt: p
    };

    try {
      const response = await fetch(CONFIG.urlServidor, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }, // Cambiado a JSON
        body: JSON.stringify(payload)
      });
      
      const textoCrudo = await response.text();
      
      try {
        const data = JSON.parse(textoCrudo);
        resDiv.innerText = data.respuesta || "Respuesta vacía del servidor.";
        promptInput.value = ""; 
      } catch (jsonError) {
        resDiv.innerText = "Error de formato. Servidor respondió:\n" + textoCrudo;
      }
      
    } catch (e) {
      resDiv.innerText = "Error de red/CORS: " + e.message;
    } finally {
      btn.disabled = false;
    }
  }
</script>

🏢 Paso 3 (Administrativo y Contable): Centro de Asistencia Técnica

Paso 3: Insertar el Cerebro de la IA (El Asistente Virtual para Secretariado y Contabilidad)

Copia este bloque en Google Sites (Insertar > Código incorporado) para integrar el asistente dual con selector desplegable (Contable / Administrativo):

HTML Completo - 🏢 Centro de Asistencia Técnica

<!-- ESTILOS VISUALES -->
<style>
  :root {
    --color-fondo-principal: #f4f6f9; 
    --color-borde: #ced4da;           
    --color-primario: #0f4c81;        
    --color-boton-hover: #0a365c;     
    --color-texto-titulo: #212529;    
    --color-texto-general: #343a40;   
  }

  #contenedor-chat {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    padding: 25px; background: var(--color-fondo-principal); 
    border-radius: 10px; border: 1px solid var(--color-borde); 
    max-width: 550px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  }
  
  .selector-container {
    margin-bottom: 15px;
  }
  
  select#selector-rol {
    width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--color-primario);
    font-size: 15px; font-weight: bold; color: var(--color-primario);
    background-color: white; cursor: pointer;
  }

  #btn-enviar {
    background: var(--color-primario); color: white; border: none; padding: 12px 15px; 
    border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold; font-size: 16px;
    transition: background 0.3s; margin-top: 5px;
  }
  #btn-enviar:hover { background: var(--color-boton-hover); }
  #btn-enviar:disabled { background: #adb5bd; cursor: not-allowed; }
  
  #resultado {
    margin-top: 15px; padding: 15px; background: white; border-radius: 4px; 
    border-left: 4px solid var(--color-primario); min-height: 60px; 
    white-space: pre-wrap; color: var(--color-texto-general); line-height: 1.6; overflow-wrap: break-word;
  }
  .creditos {
    text-align: center; font-size: 11px; color: #6c757d; margin-top: 15px; font-style: italic;
  }
</style>

<!-- INTERFAZ DEL CHAT -->
<div id="contenedor-chat">
  <h3 style="color: var(--color-texto-titulo); margin-top: 0; text-align: center;">🏢 Centro de Asistencia Técnica</h3>
  
  <div class="selector-container">
    <select id="selector-rol" onchange="cambiarPlaceholder()">
      <option value="contable">Consultar a: Experto Contable y Tributario</option>
      <option value="administrativo">Consultar a: Asistente Administrativo</option>
    </select>
  </div>
  
  <textarea id="prompt" rows="4" onkeydown="manejarEnter(event)" style="width: 100%; box-sizing: border-box; padding: 12px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--color-borde); resize: none; font-family: inherit;" placeholder="Ej: ¿Cómo se liquida la nómina con el salario mínimo actual? o ¿Qué es la retención en la fuente?"></textarea>
  
  <button onclick="consultarIA()" id="btn-enviar">
    Enviar Consulta
  </button>
  
  <div id="resultado">
    Selecciona tu experto en el menú superior y escribe tu duda...
  </div>

  <div class="creditos">
    Desarrollado por Rubén Eduardo Rojas Santa - Senior Staff Engineer
  </div>
</div>

<div style="text-align: center; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; max-width: 550px; margin: 0 auto; margin-top: 15px;">
  <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; margin-top: 0; font-size: 14px; font-weight: bold;">¿Necesitas hablar con un asesor humano?</p>
  
  <a href="https://wa.me/573163001221?text=Hola,%20quisiera%20más%20información%20o%20asesoría%20técnica%20con%20un%20especialista" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; background-color: #25D366; color: white; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 16px; width: 100%; box-sizing: border-box; transition: background-color 0.3s;">
    
    <svg style="width: 24px; height: 24px; margin-right: 10px; fill: white;" viewBox="0 0 24 24">
      <path d="M12.031 0C5.385 0 0 5.385 0 12.031c0 2.12.551 4.183 1.597 6.002L.03 24l6.115-1.602A11.966 11.966 0 0012.031 24c6.646 0 12.031-5.385 12.031-12.031S18.677 0 12.031 0zm3.834 17.291c-.281.794-1.637 1.545-2.261 1.62-.577.069-1.294.225-4.103-1.428-3.385-1.992-5.59-5.46-5.759-5.688-.169-.228-1.378-1.834-1.378-3.497 0-1.663.858-2.484 1.167-2.822.309-.338.675-.422.9-.422.225 0 .45.006.647.013.203.006.475-.075.74.563.338.816 1.097 2.672 1.197 2.869.1.197.169.428.028.694-.141.266-.213.431-.422.684-.209.253-.44.55-.631.763-.209.231-.431.484-.181.913.25.428 1.113 1.838 2.394 2.981 1.656 1.478 3.031 1.938 3.475 2.147.444.209.703.178.966-.119.263-.297 1.144-1.331 1.453-1.788.309-.456.619-.381 1.025-.225.406.156 2.569 1.209 3.013 1.434.444.225.741.338.847.525.106.188.106 1.088-.175 1.881z"/>
    </svg>
    Hablar por WhatsApp
  </a>
</div>

<!-- LÓGICA Y CONEXIÓN AL BACKEND -->
<script>
  // ==========================================
  // ⚙️ ZONA DE CONFIGURACIÓN PARA EL ESTUDIANTE
  // ==========================================
  const CONFIG = {
    // Definimos las personalidades según la opción que elijan en el menú desplegable
    roles: {
      contable: "Eres un experto contable y tributario colombiano. Responde de forma profesional, clara y precisa sobre normatividad financiera, liquidación de nómina, impuestos y retenciones en la fuente.",
      administrativo: "Eres un asistente administrativo experto y eficiente. Ayudas a redactar correos formales, organizar archivos de gestión, planificar reuniones y optimizar procesos de oficina."
    },
    
    // ENLACE DEL SERVIDOR AURA
    urlServidor: "https://asoeduca.edu.co/aura/ia_html.php" 
  };
  // ==========================================

  // Cambia el texto de ayuda según el experto seleccionado
  function cambiarPlaceholder() {
    const rol = document.getElementById('selector-rol').value;
    const textarea = document.getElementById('prompt');
    if (rol === 'contable') {
      textarea.placeholder = "Ej: ¿Cómo se liquida la nómina con el salario mínimo actual? o ¿Qué es la retención en la fuente?";
    } else {
      textarea.placeholder = "Ej: Redacta un correo para convocar una reunión, o ¿Cómo se debe organizar un archivo de gestión?";
    }
  }

  function manejarEnter(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault(); 
      consultarIA(); 
    }
  }

  async function consultarIA() {
    const promptInput = document.getElementById('prompt');
    const rolSeleccionado = document.getElementById('selector-rol').value;
    const resDiv = document.getElementById('resultado');
    const btn = document.getElementById('btn-enviar');
    
    const p = promptInput.value.trim();
    if(!p) {
      resDiv.innerText = "Por favor, escribe una consulta.";
      return;
    }

    resDiv.innerText = "Consultando al especialista...";
    btn.disabled = true;
    
    // Asignamos dinámicamente la personalidad basada en lo que eligió el usuario
    const systemPromptDinamico = CONFIG.roles[rolSeleccionado];

    // Empaquetamos en formato JSON
    const payload = {
        system_prompt: systemPromptDinamico,
        prompt: p
    };

    try {
      const response = await fetch(CONFIG.urlServidor, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      
      const textoCrudo = await response.text();
      
      try {
        const data = JSON.parse(textoCrudo);
        resDiv.innerText = data.respuesta || "Respuesta vacía del servidor.";
        promptInput.value = ""; 
      } catch (jsonError) {
        resDiv.innerText = "Error de formato. Servidor respondió:\n" + textoCrudo;
      }
      
    } catch (e) {
      resDiv.innerText = "Error de red: " + e.message;
    } finally {
      btn.disabled = false;
    }
  }
</script>

Paso 4: Código Independiente "Solo Botón de WhatsApp"

Si deseas insertar únicamente el bloque de contacto directo hacia un humano en cualquier sección de tu sitio web:

HTML - Botón Solo WhatsApp

<div style="text-align: center; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; max-width: 500px; margin: 0 auto; margin-top: 15px;">
  <p style="font-family: sans-serif; color: #333; margin-top: 0; font-size: 14px; font-weight: bold;">¿Necesitas hablar con un humano?</p>
  
  <a href="https://wa.me/573163001221?text=Hola,%20quisiera%20solicitar%20información%20personalizada" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; background-color: #25D366; color: white; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-family: sans-serif; font-weight: bold; font-size: 16px; width: 100%; box-sizing: border-box; transition: background-color 0.3s;">
    <svg style="width: 24px; height: 24px; margin-right: 10px; fill: white;" viewBox="0 0 24 24">
      <path d="M12.031 0C5.385 0 0 5.385 0 12.031c0 2.12.551 4.183 1.597 6.002L.03 24l6.115-1.602A11.966 11.966 0 0012.031 24c6.646 0 12.031-5.385 12.031-12.031S18.677 0 12.031 0zm3.834 17.291c-.281.794-1.637 1.545-2.261 1.62-.577.069-1.294.225-4.103-1.428-3.385-1.992-5.59-5.46-5.759-5.688-.169-.228-1.378-1.834-1.378-3.497 0-1.663.858-2.484 1.167-2.822.309-.338.675-.422.9-.422.225 0 .45.006.647.013.203.006.475-.075.74.563.338.816 1.097 2.672 1.197 2.869.1.197.169.428.028.694-.141.266-.213.431-.422.684-.209.253-.44.55-.631.763-.209.231-.431.484-.181.913.25.428 1.113 1.838 2.394 2.981 1.656 1.478 3.031 1.938 3.475 2.147.444.209.703.178.966-.119.263-.297 1.144-1.331 1.453-1.788.309-.456.619-.381 1.025-.225.406.156 2.569 1.209 3.013 1.434.444.225.741.338.847.525.106.188.106 1.088-.175 1.881z"/>
    </svg>
    Hablar por WhatsApp
  </a>
</div>

NOTA: Para seleccionar todo el código en el bloque de Google Sites pulsa Ctrl + A.

Paso 5: ¡Conviértete en Diseñador! (Uso de Códigos Hexadecimales)

Si observas la parte superior del código de tu Asistente, verás una lista de colores con códigos como #0f4c81 o #ff6b6b. Como ejercicio, cambia el valor de --color-primario por uno de estos colores y observa cómo cambia tu asistente al instante:

Azul Corporativo / Contable: #0f4c81

Coral Infantil / Preescolar: #ff6b6b

Verde Crecimiento / Éxito: #198754

Naranja Creativo / Dinámico: #fd7e14

(Nota: Puedes consultar la web https://htmlcolorcodes.com/es/ para más referencias).

Paso 6: Crea tu propio Pie de Página (Footer Transparente) con IA

Copia el siguiente texto, llena los espacios entre corchetes [ ] y envíaselo a tu Inteligencia Artificial para que programe tu diseño a medida:

Prompt - Pie de Página (Footer Transparente)

Rol: Actúa como un desarrollador web experto en Frontend (HTML y CSS).
Contexto: Estoy creando una página web institucional en Google Sites para mi proyecto llamado [Escribe el nombre de tu empresa contable, oficina o jardín infantil]. La identidad de mi marca transmite un estilo [Ej. corporativo y confiable / cálido, infantil y pedagógico / ejecutivo moderno].
Tarea: Escribe el código HTML y CSS en un solo bloque para un pie de página (footer) profesional. Debe ser responsivo y contener 3 columnas flexibles: 1. Descripción de la institución o firma. 2. Ubicación y Contacto. 3. Botón "Atención por WhatsApp".
Formato: Entrégame únicamente el código listo para copiar y pegar. 
Reglas: Usa el color [Escribe un código Hexadecimal] para el botón y títulos. Texto general blanco o gris claro. MUY IMPORTANTE: El background-color del contenedor principal debe ser exactamente transparent para que funcione en Google Sites.

Paso 7: Creando la Sala de Recepción / Aula Virtual (Música de Fondo desde Drive)

Nuestra página web tendrá su propia música ambiental o canción de bienvenida:

Sube tu archivo de audio (.mp3) a tu Google Drive. Asegúrate de compartirlo para "Cualquier usuario que tenga el vínculo".
Copia el enlace y extrae el ID (la cadena larga de letras y números entre /d/ y /view).
Ve a Google Sites > Insertar > Incorporar > Código incorporado, pega esto y reemplaza TU_ID_DE_DRIVE_AQUÍ:

HTML - Audio Ambiental Google Drive

<div style="width: 100%; max-width: 500px; margin: 0 auto; text-align: center; padding: 10px;">
  <p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; color: #64748b; margin-bottom: 10px; font-weight: 500;">
    🔊 Reproducir audio ambiental para la sala de recepción / aula virtual:
  </p>
  <iframe src="https://drive.google.com/file/d/TU_ID_DE_DRIVE_AQUÍ/preview" 
          width="100%" height="60" frameborder="0" allow="autoplay" 
          style="border: none; border-radius: 8px; background: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
  </iframe>
</div>

Chat Bot Personalizado (Árbol de Decisiones)

Copia el siguiente Prompt Maestro y envíaselo a Gemini indicando tu negocio (ej. "Jardín Infantil", "Colegio", "Despacho Contable" o "Consultoría Administrativa"):

Prompt Maestro Completo - Bot Builder

Eres "Bot Builder", un Ingeniero Frontend Senior. 
El usuario te dará un tipo de negocio (ej: "Pizzería", "Ferretería", "Colegio").
Tu ÚNICA tarea es devolver un archivo HTML completo con un Chatbot de Árbol de Decisiones (basado en botones) funcional para ese negocio.

REGLAS ESTRICTAS (HARD RULES):
1. NUNCA expliques el código ni saludes. Devuelve SOLO el bloque de código empezando por ```html y terminando en ```.
2. TIENES PROHIBIDO TRUNCAR EL CÓDIGO. No uses comentarios de relleno. Debes escribir el CSS y el JS completos.
3. INVENTA los datos: Título del negocio, Avatar (emoji), Color Principal (Hexadecimal que pegue con el negocio), 3 Servicios (con precio, título, beneficios, recomendación y texto de WhatsApp) y 3 Consejos.

UTILIZA EXACTAMENTE ESTA PLANTILLA (Reemplaza los textos en MAYÚSCULAS entre corchetes con los datos inventados):

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat - [NOMBRE_DEL_NEGOCIO]</title>
<style>
  * { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
  body { margin: 0; padding: 10px; background-color: transparent; display: flex; justify-content: center; }
  .chat-wrapper { width: 100%; max-width: 450px; height: 600px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d1d5db; color: #000000; }
  .chat-header { background-color: [COLOR_PRINCIPAL]; color: #ffffff !important; padding: 15px; display: flex; align-items: center; gap: 12px; }
  .chat-header .avatar { width: 42px; height: 42px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
  .chat-header .info h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #ffffff !important; }
  .chat-header .info span { font-size: 0.85rem; color: #f1faee !important; display: flex; align-items: center; gap: 5px; font-weight: 500; }
  .chat-header .info span::before { content: ''; width: 8px; height: 8px; background-color: #2ecc71; border-radius: 50%; display: inline-block; }
  .chat-messages { flex: 1; padding: 15px; overflow-y: auto; background-color: #f8f9fa; display: flex; flex-direction: column; gap: 12px; }
  .msg { max-width: 85%; padding: 12px 16px; border-radius: 14px; font-size: 0.95rem; line-height: 1.4; animation: fadeIn 0.3s ease forwards; word-wrap: break-word; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .msg.bot { background-color: #ffffff; color: #000000 !important; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  .msg.user { background-color: [COLOR_PRINCIPAL]; color: #ffffff !important; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .info-block { margin-top: 10px; background: #f1f5f9; padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; border-left: 4px solid [COLOR_PRINCIPAL]; color: #1a1a1a !important; }
  .info-block b { color: #000000 !important; }
  .price-tag { font-weight: 800; color: #d62828 !important; font-size: 1.1rem; }
  .chat-options { padding: 12px; background-color: #ffffff; border-top: 1px solid #cbd5e1; display: flex; flex-direction: column; gap: 8px; }
  .btn { width: 100%; background-color: #ffffff; color: [COLOR_PRINCIPAL] !important; border: 2px solid [COLOR_PRINCIPAL]; padding: 12px 14px; font-size: 0.95rem; font-weight: 700; border-radius: 8px; cursor: pointer; text-align: left; transition: all 0.2s ease; display: flex; align-items: center; justify-content: space-between; }
  .btn:hover { background-color: [COLOR_PRINCIPAL]; color: #ffffff !important; }
  .btn-action { background-color: [COLOR_PRINCIPAL]; color: #ffffff !important; border: none; justify-content: center; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 4px 6px rgba(0,0,0,0.25); }
  .btn-action:hover { filter: brightness(0.85); }
  .btn-secondary { color: #333333 !important; border-color: #666666; justify-content: center; }
  .btn-secondary:hover { background-color: #f1f5f9; color: #000000 !important; }
  .typing-indicator { display: flex; gap: 4px; padding: 8px 12px; }
  .typing-indicator span { width: 8px; height: 8px; background-color: #475569; border-radius: 50%; animation: bounce 1.3s infinite both; }
  .typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
  .typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
</style>
</head>
<body>
<div class="chat-wrapper">
  <div class="chat-header">
    <div class="avatar">[EMOJI]</div>
    <div class="info">
      <h4>[NOMBRE_DEL_NEGOCIO]</h4>
      <span>En línea ahora</span>
    </div>
  </div>
  <div class="chat-messages" id="chatMessages"></div>
  <div class="chat-options" id="chatOptions"></div>
</div>
<script>
  const WHATSAPP_NUMBER = "573163001221";

  const SERVICIOS = {
    srv1: {
      titulo: "[EMOJI] [NOMBRE_SERVICIO_1]",
      precio: "$[PRECIO_1]",
      beneficios: "[DESCRIPCION_1]",
      recomendacion: "[TIP_1]",
      mensajeWA: "Hola, me interesa [NOMBRE_SERVICIO_1]."
    },
    srv2: {
      titulo: "[EMOJI] [NOMBRE_SERVICIO_2]",
      precio: "$[PRECIO_2]",
      beneficios: "[DESCRIPCION_2]",
      recomendacion: "[TIP_2]",
      mensajeWA: "Hola, me interesa [NOMBRE_SERVICIO_2]."
    },
    srv3: {
      titulo: "[EMOJI] [NOMBRE_SERVICIO_3]",
      precio: "$[PRECIO_3]",
      beneficios: "[DESCRIPCION_3]",
      recomendacion: "[TIP_3]",
      mensajeWA: "Hola, me interesa [NOMBRE_SERVICIO_3]."
    }
  };

  const CONSEJOS = [
    "[CONSEJO_INVENTADO_1]",
    "[CONSEJO_INVENTADO_2]",
    "[CONSEJO_INVENTADO_3]"
  ];

  const chatMessages = document.getElementById('chatMessages');
  const chatOptions = document.getElementById('chatOptions');

  // Ejecución directa para evitar fallos de window.onload
  setTimeout(() => {
    mostrarMensajeBot("¡Hola! Bienvenido a <b>[NOMBRE_DEL_NEGOCIO]</b>. Soy tu asistente virtual, ¿en qué te puedo ayudar hoy?", 0);
    setTimeout(mostrarMenuPrincipal, 600);
  }, 100);

  function agregarBurbuja(texto, remitente) {
    const burbuja = document.createElement('div');
    burbuja.classList.add('msg', remitente);
    burbuja.innerHTML = texto;
    chatMessages.appendChild(burbuja);
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  function mostrarMensajeBot(texto, delay = 1000) {
    if (delay === 0) { agregarBurbuja(texto, 'bot'); return; }
    const indicador = document.createElement('div');
    indicador.classList.add('msg', 'bot', 'typing-container');
    indicador.innerHTML = `<div class="typing-indicator"><span></span><span></span><span></span></div>`;
    chatMessages.appendChild(indicador);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    setTimeout(() => { indicador.remove(); agregarBurbuja(texto, 'bot'); }, delay);
  }

  function registrarEleccionUsuario(texto) { agregarBurbuja(texto, 'user'); chatOptions.innerHTML = ''; }

  function mostrarMenuPrincipal() {
    chatOptions.innerHTML = `
      <button class="btn" onclick="seleccionarMenuPrincipal('servicios')">📋 Ver Servicios <span>➔</span></button>
      <button class="btn" onclick="seleccionarMenuPrincipal('contacto')">📞 Contacto <span>➔</span></button>
      <button class="btn" onclick="seleccionarMenuPrincipal('consejo')">💡 Información <span>➔</span></button>
    `;
  }

  function seleccionarMenuPrincipal(opcion) {
    if (opcion === 'servicios') {
      registrarEleccionUsuario("Quiero ver los servicios");
      mostrarMensajeBot("¡Claro! Aquí tienes nuestras opciones principales:", 800);
      setTimeout(mostrarMenuServicios, 1000);
    } else if (opcion === 'contacto') {
      registrarEleccionUsuario("Necesito los datos de contacto");
      const infoContacto = `<b>📍 Ubicación y Contacto:</b><br><br>🏢 <b>Dirección:</b> Sede Principal<br>📱 <b>WhatsApp:</b> +57 316 300 1221<br>⏰ <b>Horarios:</b> Lunes a Sábado de 8:00 AM - 6:00 PM`;
      mostrarMensajeBot(infoContacto, 800);
      setTimeout(mostrarMenuVolver, 1200);
    } else if (opcion === 'consejo') {
      registrarEleccionUsuario("Dime algo útil");
      const consejoAleatorio = CONSEJOS[Math.floor(Math.random() * CONSEJOS.length)];
      mostrarMensajeBot(`💡 <b>Dato útil:</b><br><br>${consejoAleatorio}`, 800);
      setTimeout(mostrarMenuVolver, 1200);
    }
  }

  function mostrarMenuServicios() {
    let htmlBotones = '';
    for (let clave in SERVICIOS) {
      htmlBotones += `<button class="btn" onclick="verDetalleServicio('${clave}')">${SERVICIOS[clave].titulo} <span>➔</span></button>`;
    }
    htmlBotones += `<button class="btn btn-secondary" onclick="volverAlInicio()">🏠 Volver al Menú Principal</button>`;
    chatOptions.innerHTML = htmlBotones;
  }

  function verDetalleServicio(clave) {
    const servicio = SERVICIOS[clave];
    registrarEleccionUsuario(`Saber más sobre ${servicio.titulo}`);
    const respuestaBot = `<b>${servicio.titulo}</b><br><div class="info-block">💵 <span class="price-tag">Precio:</span> <b>${servicio.precio}</b></div><div class="info-block">✨ <b>Detalles:</b><br>${servicio.beneficios}</div><div class="info-block">💡 <b>Nota:</b><br>${servicio.recomendacion}</div><br>¿Te interesa?`;
    mostrarMensajeBot(respuestaBot, 1000);
    const urlWhatsApp = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(servicio.mensajeWA)}`;
    setTimeout(() => {
      chatOptions.innerHTML = `
        <button class="btn btn-action" onclick="window.open('${urlWhatsApp}', '_blank')">✅ Solicitar por WhatsApp</button>
        <button class="btn btn-secondary" onclick="irAtrasServicios()">🔙 Volver atrás</button>
        <button class="btn btn-secondary" onclick="volverAlInicio()">🏠 Menú Principal</button>
      `;
    }, 1400);
  }

  function irAtrasServicios() { registrarEleccionUsuario("Volver a servicios"); mostrarMenuServicios(); }
  function volverAlInicio() { registrarEleccionUsuario("Volver al inicio"); mostrarMensajeBot("¿En qué más te ayudo?", 600); setTimeout(mostrarMenuPrincipal, 800); }
  function mostrarMenuVolver() { chatOptions.innerHTML = `<button class="btn btn-secondary" onclick="volverAlInicio()">🏠 Volver al Menú Principal</button>`; }
</script>
</body>
</html>

Creación de Canciones en MP3 (Gemini y Treblo)

Crea canciones en MP3 en Gemini desde la caja de herramientas "Crear música"

Usa el siguiente prompt estructurado para componer canciones infantiles pedagógicas (Preescolar) o música ambiental corporativa y jingles (Secretariado y Contabilidad):

Prompt Productor Musical (Preescolar / Oficina)

Actúa como un productor musical y compositor experto.
Tu objetivo es crear la musica
La temática de la canción es [canción infantil educativa para preescolar / música ambiental corporativa para recepción y oficina]. El género principal es ritmos adaptados para el entorno, enfocado en instrumentos como [piano, guitarra acústica, xilófono o percusión suave]. La vibra general debe ser [ej: alegre y pedagógica / tranquila y ejecutiva].
Entrega el resultado exactamente con el siguiente formato:
Style Tags: [Máximo 120 caracteres con géneros e instrumentos separados por comas]
Title: [Nombre llamativo]
Lyrics: [Intro: Instrumental] [Verse 1] (4 líneas de letra) [Pre-Chorus] (2 líneas de letra para subir la energía) [Chorus] (4 líneas muy pegadizas, ritmo alto) [Bridge] (Cambio de ritmo y melodía) [Chorus] [Outro: Fade Out]

Plataforma adicional para crear las canciones: Para generar las pistas también podemos usar https://treblo.com/

Incrustar Playlist Oficial de Spotify en Google Sites

Para incrustar una playlist de Spotify directamente en tu página de Google Sites (de forma totalmente independiente a Treblo o a otros reproductores), debes usar el código de inserción (iframe) oficial que proporciona la plataforma.

Obtener el código en Spotify:

Abre la playlist que deseas compartir en la aplicación o en la versión web de Spotify.
Haz clic en los tres puntos horizontales (...) ubicados debajo del título y la portada.
Selecciona Compartir y luego haz clic en Insertar lista.
Ajusta las opciones visuales (color, tamaño) si lo deseas y presiona el botón Copiar código.

Estructura del Código Oficial de Inserción (iframe) de Spotify:
(Pégalo en Google Sites > Insertar > Incorporar > Código incorporado)

HTML Oficial de Spotify (Iframe Embed)

<iframe style="border-radius:12px" 
        src="https://open.spotify.com/embed/playlist/37i9dQZF1DX4sWSpwq3LiO?utm_source=generator" 
        width="100%" 
        height="352" 
        frameBorder="0" 
        allowfullscreen="" 
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
        loading="lazy">
</iframe>

Reproductor de MP3 Personalizado (WebAmp v2.1)

Estructura completa para pedirle a Gemini que actualice las pistas de tu reproductor MP3 estilo Winamp, o para copiar directamente el reproductor ya actualizado:

1. Estructura completa con el prompt para Gemini (Código Base + Instrucción de cambio de canciones):

Prompt + Código Reproductor MP3 Original

Estructura para gemini ayudame a agregar a este reproductor
  
Inicio del Código

<style>
  :root { --theme-color: #0f0; --bg-dark: #222; --bg-black: #000; }
  .winamp-container { background: var(--bg-dark); border: 2px solid #555; border-right-color: #111; border-bottom-color: #111; padding: 10px; width: 340px; color: var(--theme-color); font-family: monospace; user-select: none; }
  .header-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 11px; color: #aaa; }
  .color-picker { background: transparent; border: 1px solid #555; cursor: pointer; height: 20px; width: 25px; padding: 0; }
  .screen { background: var(--bg-black); border: 2px solid #555; border-top-color: #111; border-left-color: #111; padding: 5px; margin-bottom: 10px; position: relative; }
  
  /* Nuevo contenedor para título y tiempo */
  .track-info-bar { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; font-weight: bold; }
  .track-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
  .time-display { color: #aaa; font-size: 12px; font-weight: normal; margin-top: 2px; }
  
  #visualizer { width: 100%; height: 60px; background: var(--bg-black); display: block; }
  .controls { display: flex; gap: 5px; margin-top: 5px; margin-bottom: 10px; justify-content: center; }
  .controls button { background: #444; color: #ddd; border: 2px solid #666; border-bottom-color: #222; border-right-color: #222; cursor: pointer; padding: 5px 10px; font-weight: bold; font-size: 12px; }
  .controls button:active { border-color: #222 #666 #666 #222; background: #333; }
  .controls button.active-btn { color: var(--theme-color); } 
  .playlist { max-height: 120px; overflow-y: auto; background: var(--bg-black); border: 2px solid #555; border-top-color: #111; border-left-color: #111; padding: 2px; }
  .playlist-item-wrapper { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #111; }
  .playlist-item { cursor: pointer; padding: 6px 4px; font-size: 12px; color: var(--theme-color); flex-grow: 1; opacity: 0.8; }
  .playlist-item:hover { background: #111; opacity: 1; }
  .playlist-item-wrapper.active .playlist-item { background: #0000aa; color: #fff; opacity: 1; }
  .dl-btn { text-decoration: none; padding: 2px 6px; font-size: 14px; margin-left: 5px; opacity: 0.7; }
  .dl-btn:hover { opacity: 1; transform: scale(1.1); }
  .playlist::-webkit-scrollbar { width: 10px; }
  .playlist::-webkit-scrollbar-track { background: var(--bg-dark); }
  .playlist::-webkit-scrollbar-thumb { background: #555; border: 1px solid #777; }
</style>

<div class="winamp-container">
  <div class="header-tools">
    <span>WebAmp v2.1</span>
    <label>Color: <input type="color" id="theme-color" class="color-picker" value="#00ff00"></label>
  </div>

  <div class="screen">
    <div class="track-info-bar">
      <div class="track-title" id="current-track">Cargando...</div>
      <div class="time-display" id="time-display">0:00 / 0:00</div>
    </div>
    <canvas id="visualizer" width="300" height="60"></canvas>
  </div>
  
  <audio id="audio-player" controls crossorigin="anonymous" style="width: 100%; height: 30px; outline: none;"></audio>
  
  <div class="controls">
    <button onclick="prevTrack()" title="Anterior">|&lt;&lt;</button>
    <button onclick="nextTrack()" title="Siguiente">&gt;&gt;|</button>
    <button id="btn-shuffle" onclick="toggleShuffle()" title="Aleatorio">SHUFFLE</button>
  </div>
  
  <div class="playlist" id="playlist-container"></div>
</div>

<script>
  const proxyUrl = 'https://asoeduca.edu.co/stream.php?id=';
  
  // Agrega la duración (duration) manualmente a cada pista
  const tracks = [
    { title: "Canción 1 - Demo", duration: "3:45", id: "1BtPp9WuuADsQJbpSPgtwHKv2S5sm6ZmP" },
    { title: "Canción 2 - Beat", duration: "2:30", id: "1AOY-7SpKOjphUD_cn6Xa1MpfCtmB_4RP" },
    { title: "Canción 3 - Groove", duration: "4:12", id: "1BEB8uwczAPDZQwChhw4tiJO2OHEeWpo_" },
    { title: "Canción 4 - Final", duration: "3:05", id: "1AzsNev-hQUBT9ihrji5CeqSelx7f2mkD" }
  ];

  const player = document.getElementById('audio-player');
  const playlistContainer = document.getElementById('playlist-container');
  const currentTrackLabel = document.getElementById('current-track');
  const timeDisplay = document.getElementById('time-display');
  const btnShuffle = document.getElementById('btn-shuffle');
  const themeInput = document.getElementById('theme-color');
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  
  let currentIndex = 0;
  let isShuffle = false;
  let currentHexColor = '#00ff00';

  themeInput.addEventListener('input', (e) => {
    currentHexColor = e.target.value;
    document.documentElement.style.setProperty('--theme-color', currentHexColor);
  });

  let audioCtx, analyser, source;
  let isAnalyzerReady = false;

  function initAnalyzer() {
    if (isAnalyzerReady) return;
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    analyser = audioCtx.createAnalyser();
    
    source = audioCtx.createMediaElementSource(player);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    
    analyser.fftSize = 256; 
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    
    function draw() {
      requestAnimationFrame(draw);
      analyser.getByteFrequencyData(dataArray);
      
      ctx.fillStyle = '#000';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      const barWidth = (canvas.width / bufferLength) * 2.5;
      let x = 0;
      
      for(let i = 0; i < bufferLength; i++) {
        let barHeight = dataArray[i] / 4.2; 
        ctx.fillStyle = currentHexColor;
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        x += barWidth + 1; 
      }
    }
    draw();
    isAnalyzerReady = true;
  }

  function loadTrack(index) {
    initAnalyzer();
    if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();

    currentIndex = index;
    const track = tracks[index];
    currentTrackLabel.innerText = track.title;
    player.src = proxyUrl + track.id;
    player.play();
    
    Array.from(playlistContainer.children).forEach((wrapper, i) => {
        wrapper.className = i === index ? 'playlist-item-wrapper active' : 'playlist-item-wrapper';
    });
  }

  function nextTrack() {
    let nextIndex = isShuffle ? Math.floor(Math.random() * tracks.length) : (currentIndex + 1) % tracks.length;
    loadTrack(nextIndex);
  }

  function prevTrack() {
    let prevIndex = currentIndex - 1;
    if (prevIndex < 0) prevIndex = tracks.length - 1;
    loadTrack(prevIndex);
  }

  function toggleShuffle() {
    isShuffle = !isShuffle;
    btnShuffle.className = isShuffle ? 'active-btn' : '';
  }

  // Formateador de segundos a minutos:segundos
  function formatTime(seconds) {
    if (isNaN(seconds)) return "0:00";
    const min = Math.floor(seconds / 60);
    const sec = Math.floor(seconds % 60);
    return `${min}:${sec < 10 ? '0' : ''}${sec}`;
  }

  // Actualizar el reloj superior mientras suena la canción
  player.addEventListener('timeupdate', () => {
    const current = formatTime(player.currentTime);
    const total = player.duration ? formatTime(player.duration) : tracks[currentIndex].duration;
    timeDisplay.innerText = `${current} / ${total}`;
  });

  player.addEventListener('ended', nextTrack);

  tracks.forEach((track, index) => {
    const wrapper = document.createElement('div');
    wrapper.className = 'playlist-item-wrapper';
    
    const trackDiv = document.createElement('div');
    trackDiv.className = 'playlist-item';
    // Se inserta el título y la duración harcodeada
    trackDiv.innerText = `${index + 1}. ${track.title} (${track.duration})`;
    trackDiv.onclick = () => loadTrack(index);

    const downloadLink = document.createElement('a');
    downloadLink.className = 'dl-btn';
    downloadLink.innerText = '💾';
    downloadLink.title = 'Descargar pista';
    downloadLink.href = proxyUrl + track.id + '&dl=1'; 
    downloadLink.target = '_blank';
    downloadLink.download = track.title + '.mp3';

    wrapper.appendChild(trackDiv);
    wrapper.appendChild(downloadLink);
    playlistContainer.appendChild(wrapper);
  });
</script>
las siguientes canciones eliminando las existentes https://drive.google.com/file/d/1AusMyXoamGQPzMiNOv_RhphFFRqFM9--/view?usp=drive_link se llama cola sin control y esta https://drive.google.com/file/d/10x0HNqN7ehAXx6Glh4tpLgG7SiNEp4YC/view?usp=drive_link se llama el calor del hogar

Fin del Código

2. Código HTML ya actualizado con tus pistas de Google Drive listo para copiar e incrustar:

HTML WebAmp v2.1 (Actualizado y Listo)

<style>
  :root { --theme-color: #0f0; --bg-dark: #222; --bg-black: #000; }
  .winamp-container { background: var(--bg-dark); border: 2px solid #555; border-right-color: #111; border-bottom-color: #111; padding: 10px; width: 340px; color: var(--theme-color); font-family: monospace; user-select: none; margin: 0 auto; }
  .header-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 11px; color: #aaa; }
  .color-picker { background: transparent; border: 1px solid #555; cursor: pointer; height: 20px; width: 25px; padding: 0; }
  .screen { background: var(--bg-black); border: 2px solid #555; border-top-color: #111; border-left-color: #111; padding: 5px; margin-bottom: 10px; position: relative; }
  .track-info-bar { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; font-weight: bold; }
  .track-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
  .time-display { color: #aaa; font-size: 12px; font-weight: normal; margin-top: 2px; }
  #visualizer { width: 100%; height: 60px; background: var(--bg-black); display: block; }
  .controls { display: flex; gap: 5px; margin-top: 5px; margin-bottom: 10px; justify-content: center; }
  .controls button { background: #444; color: #ddd; border: 2px solid #666; border-bottom-color: #222; border-right-color: #222; cursor: pointer; padding: 5px 10px; font-weight: bold; font-size: 12px; }
  .controls button:active { border-color: #222 #666 #666 #222; background: #333; }
  .controls button.active-btn { color: var(--theme-color); } 
  .playlist { max-height: 120px; overflow-y: auto; background: var(--bg-black); border: 2px solid #555; border-top-color: #111; border-left-color: #111; padding: 2px; }
  .playlist-item-wrapper { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #111; }
  .playlist-item { cursor: pointer; padding: 6px 4px; font-size: 12px; color: var(--theme-color); flex-grow: 1; opacity: 0.8; }
  .playlist-item:hover { background: #111; opacity: 1; }
  .playlist-item-wrapper.active .playlist-item { background: #0000aa; color: #fff; opacity: 1; }
  .dl-btn { text-decoration: none; padding: 2px 6px; font-size: 14px; margin-left: 5px; opacity: 0.7; }
  .dl-btn:hover { opacity: 1; transform: scale(1.1); }
</style>

<div class="winamp-container">
  <div class="header-tools">
    <span>WebAmp v2.1</span>
    <label>Color: <input type="color" id="theme-color" class="color-picker" value="#00ff00"></label>
  </div>
  <div class="screen">
    <div class="track-info-bar">
      <div class="track-title" id="current-track">Cargando...</div>
      <div class="time-display" id="time-display">0:00 / 0:00</div>
    </div>
    <canvas id="visualizer" width="300" height="60"></canvas>
  </div>
  <audio id="audio-player" controls crossorigin="anonymous" style="width: 100%; height: 30px; outline: none;"></audio>
  <div class="controls">
    <button onclick="prevTrack()" title="Anterior">|&lt;&lt;</button>
    <button onclick="nextTrack()" title="Siguiente">&gt;&gt;|</button>
    <button id="btn-shuffle" onclick="toggleShuffle()" title="Aleatorio">SHUFFLE</button>
  </div>
  <div class="playlist" id="playlist-container"></div>
</div>

<script>
  const proxyUrl = 'https://asoeduca.edu.co/stream.php?id=';
  
  const tracks = [
    { title: "Cola sin control", duration: "3:15", id: "1AusMyXoamGQPzMiNOv_RhphFFRqFM9--" },
    { title: "El calor del hogar", duration: "3:30", id: "10x0HNqN7ehAXx6Glh4tpLgG7SiNEp4YC" }
  ];

  const player = document.getElementById('audio-player');
  const playlistContainer = document.getElementById('playlist-container');
  const currentTrackLabel = document.getElementById('current-track');
  const timeDisplay = document.getElementById('time-display');
  const btnShuffle = document.getElementById('btn-shuffle');
  const themeInput = document.getElementById('theme-color');
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  
  let currentIndex = 0; let isShuffle = false; let currentHexColor = '#00ff00';

  themeInput.addEventListener('input', (e) => {
    currentHexColor = e.target.value;
    document.documentElement.style.setProperty('--theme-color', currentHexColor);
  });

  let audioCtx, analyser, source; let isAnalyzerReady = false;

  function initAnalyzer() {
    if (isAnalyzerReady) return;
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    analyser = audioCtx.createAnalyser();
    source = audioCtx.createMediaElementSource(player);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    analyser.fftSize = 256; 
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    function draw() {
      requestAnimationFrame(draw);
      analyser.getByteFrequencyData(dataArray);
      ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
      const barWidth = (canvas.width / bufferLength) * 2.5; let x = 0;
      for(let i = 0; i < bufferLength; i++) {
        let barHeight = dataArray[i] / 4.2; 
        ctx.fillStyle = currentHexColor;
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        x += barWidth + 1; 
      }
    }
    draw(); isAnalyzerReady = true;
  }

  function loadTrack(index) {
    initAnalyzer(); if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();
    currentIndex = index; const track = tracks[index];
    currentTrackLabel.innerText = track.title;
    player.src = proxyUrl + track.id; player.play();
    Array.from(playlistContainer.children).forEach((wrapper, i) => {
        wrapper.className = i === index ? 'playlist-item-wrapper active' : 'playlist-item-wrapper';
    });
  }

  function nextTrack() {
    let nextIndex = isShuffle ? Math.floor(Math.random() * tracks.length) : (currentIndex + 1) % tracks.length;
    loadTrack(nextIndex);
  }
  function prevTrack() {
    let prevIndex = currentIndex - 1; if (prevIndex < 0) prevIndex = tracks.length - 1;
    loadTrack(prevIndex);
  }
  function toggleShuffle() {
    isShuffle = !isShuffle; btnShuffle.className = isShuffle ? 'active-btn' : '';
  }
  function formatTime(seconds) {
    if (isNaN(seconds)) return "0:00";
    const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60);
    return `${min}:${sec < 10 ? '0' : ''}${sec}`;
  }

  player.addEventListener('timeupdate', () => {
    const current = formatTime(player.currentTime);
    const total = player.duration ? formatTime(player.duration) : tracks[currentIndex].duration;
    timeDisplay.innerText = `${current} / ${total}`;
  });
  player.addEventListener('ended', nextTrack);

  tracks.forEach((track, index) => {
    const wrapper = document.createElement('div'); wrapper.className = 'playlist-item-wrapper';
    const trackDiv = document.createElement('div'); trackDiv.className = 'playlist-item';
    trackDiv.innerText = `${index + 1}. ${track.title} (${track.duration})`;
    trackDiv.onclick = () => loadTrack(index);
    const downloadLink = document.createElement('a'); downloadLink.className = 'dl-btn';
    downloadLink.innerText = '💾'; downloadLink.title = 'Descargar pista';
    downloadLink.href = proxyUrl + track.id + '&dl=1'; downloadLink.target = '_blank';
    downloadLink.download = track.title + '.mp3';
    wrapper.appendChild(trackDiv); wrapper.appendChild(downloadLink);
    playlistContainer.appendChild(wrapper);
  });
</script>

Carrusel de Imágenes en Google Sites

El carrusel de Google Sites ajusta todas las imágenes al tamaño de la primera que subes. Si subes una foto vertical y luego una horizontal, el carrusel se verá desproporcionado y dará "saltos".

Regla de oro: Todas las imágenes deben tener exactamente el mismo tamaño.
Formato recomendado: 1920 x 1080 píxeles (formato horizontal 16:9) o 1920 x 800 (formato panorámico moderno).

2. El toque moderno: Sin bordes y "Full Width"

Para que no parezca un widget viejo de los 2000:

Elimina el pie de foto: Cuando subas las imágenes al carrusel, deja el campo de "Texto alternativo" y "Título" vacío. Los textos flotando sobre las imágenes suelen verse desordenados en móviles.
Configuración del carrusel: Haz clic en el icono de Ajustes (engranaje) dentro del bloque del carrusel en Google Sites:
- Mostrar puntos: Mantenlo activado (ayuda al usuario a saber que hay más fotos).
- Mostrar flechas: Desactiva esta opción. Las flechas de Google Sites son muy básicas y rompen la estética. Si tus usuarios ven puntos abajo, intuitivamente intentarán deslizar el dedo o hacer clic.
- Inicio automático: Actívalo, pero pon una velocidad moderada.
- Velocidad de transición: Déjalo en "Media".

3. Integración Visual (El "Enmarque")

El carrusel nativo queda mejor cuando no flota en el medio de la página:

Ancho completo: Asegúrate de que el carrusel ocupe todo el ancho de la sección de la página.
Sin espaciadores innecesarios: Coloca el bloque del carrusel justo debajo del título principal o de la barra de navegación para que se sienta integrado en el diseño.
Capa de color: Si tus imágenes tienen colores muy distintos, ponles a todas en Canva un "filtro" ligero (por ejemplo, una capa negra con 10% de transparencia) para que todas tengan el mismo tono de color antes de subirlas. Esto unifica el diseño.

Resumen: La clave para que el carrusel nativo de Google Sites se vea moderno es la uniformidad absoluta de tamaño y limpiar la interfaz eliminando los textos y las flechas que vienen por defecto.

🎨 Carrusel Modo Preescolar

¿Cómo estructurar las imágenes para tu Jardín Infantil y Prompt 3D?

Si es para tu jardín infantil, sigue esta secuencia de narrativa visual en tu carrusel:

Foto 1 (Impacto emocional): Un plano detalle o un momento tierno (ej. manos de un niño pintando).
Foto 2 (Entorno): Una toma amplia de las instalaciones modernas y limpias.
Foto 3 (Interacción): Una maestra con los niños en plena actividad.
Foto 4 (Resultado): Un espacio de juego terminado o un proyecto escolar creativo.

Ejemplo de Prompt para Carrusel de Jardín Infantil:

Prompt Carrusel Jardín Infantil (R-C-T-F)

R (Rol): Actúa como un diseñador gráfico profesional especializado en branding educativo y arte digital 3D.
C (Contexto): Estoy diseñando un sitio web para un jardín infantil moderno y necesito imágenes de alta calidad para un carrusel. La estética debe ser acogedora, profesional y alineada con las tendencias actuales de diseño web (estilo minimalista y amigable).
T (Tarea): Genera una imagen que represente un rincón luminoso dentro de un jardín infantil.
- Sujetos: Tres niños pequeños (3-4 años, diversas etnias) sentados en una alfombra de tonos pastel (verde menta, amarillo pálido) mirando un libro que una maestra joven y sonriente les muestra.
- Fondo: Estanterías de madera clara, juguetes educativos, dibujos infantiles minimalistas en la pared; efecto bokeh para mayor profundidad.
- Iluminación: Luz natural cálida que entra por una ventana, creando una atmósfera alegre y tranquila.
- Composición: Escena centrada, asegurando mucho "espacio negativo" (aire) a los lados derecho e izquierdo para que la imagen se adapte perfectamente a diferentes tamaños de pantalla en un carrusel web.
F (Formato): Imagen digital en estilo ilustración 3D minimalista (tipo Pixar/Dreamworks pero estilizada y limpia), relación de aspecto 16:9 (horizontal), alta resolución.

🏢 Carrusel Modo Administrativo y Contable

Ejemplo de Prompt para Carrusel de Auxiliar Contable y Administrativo

Prompt Carrusel Contable y Administrativo (R-C-T-F)

[Rol]
Actúa como un director de arte corporativo y fotógrafo experto en imágenes comerciales.
[Contexto]
Estoy diseñando la página principal de un sitio en Google Sites para mi negocio de "Asistencia Contable y Administrativa". La página tendrá un carrusel de imágenes deslizante en la parte superior. Mi público objetivo son pequeñas y medianas empresas (pymes) que buscan delegar sus finanzas y papeleo. Quiero transmitir confianza, profesionalismo, orden, tecnología y cercanía humana. Los colores de mi marca son tonos azules, blancos y grises.

[Tarea]
Crea 3 imágenes (o genera los prompts exactos en inglés para generarlas en Midjourney/DALL-E) que funcionen de manera cohesiva en un carrusel. Las escenas deben ser:
1. Una mesa de trabajo moderna con un portátil mostrando gráficos financieros, una taza de café y unas manos escribiendo en una calculadora.
2. Dos profesionales (un hombre y una mujer) en una oficina luminosa, revisando juntos un documento impreso con expresiones de tranquilidad y éxito.
3. Un primer plano de una agenda organizada, un bolígrafo elegante y un teclado desenfocado al fondo, simbolizando la organización administrativa.
[Formato]
Entrega los resultados en una lista numerada. Para cada escena, incluye un prompt detallado que especifique: estilo fotográfico (foto realista, cinemático), iluminación (natural, de oficina moderna), paleta de colores corporativos y una relación de aspecto panorámica ideal para banners de sitios web (16:9).

Paso 8: Generar código QR de Acceso Rápido

Por último, generamos un código QR para que los padres de familia o clientes corporativos entren fácilmente desde su celular.

Opción 1: Generador Directo Asoeduca

Puedes crearlo de forma inmediata y sin registro en la web oficial: https://asoeduca.edu.co/qr/

Opción 2: Generador Personalizado en QR.io

Ir a la página https://qr.io/ y copiar el link del sitio publicado (ejemplo: https://sites.google.com/asoeduca.edu.co/mocositosfelices/inicio):

Elegir el diseño y colores.
Pulsa el botón Download QR Code.
Iniciar sesión con Google.
Download Code.
Guardar el QR en la carpeta de IA en Drive.

8. Profundización Ética en el Sector Administrativo y Educativo

Sesgos Algorítmicos (Bias) [Secretariado y Contabilidad]: Si usas IA para filtrar currículums (Secretariado) o analizar riesgos de crédito (Contabilidad), el algoritmo puede heredar sesgos humanos y discriminar. Siempre audita los resultados.
La Empatía no es Automatizable [Preescolar]: La IA puede redactar un reporte perfecto sobre el mal comportamiento de un niño, pero comunicar esto a los padres requiere tacto, contención y calidez estrictamente humana.
Transparencia y Consentimiento: Si utilizas herramientas de IA para procesar datos institucionales o académicos, debe estar contemplado en las políticas de privacidad.
Responsabilidad Profesional: Si un Copiloto de IA sugiere un cálculo tributario erróneo o una pauta inadecuada y el técnico la aplica sin validarla, la responsabilidad recae 100% sobre el humano.

9. De Usuarios a Creadores: Diseñando Agentes Especializados (Gems)

Un Gem es una versión de la IA que configuras una sola vez con un conjunto de instrucciones directivas, un tono específico y un rol permanente. Queda guardado en tu panel y actúa como un "empleado virtual".

El Analista Fiscal (Contabilidad): Entrenado con las últimas reformas tributarias.
El Coordinador de Eventos (Secretariado): Para organizar agendas, caterings y logística corporativa.
El Asistente Pedagógico (Preescolar): Para sugerir pausas activas y juegos didácticos según la edad.

10. Taller Práctico 5: Construyendo tu Primer "Gem"

⚙️ Nuevo Proceso de Ingreso a Gems (Desde Cuentas Gratuitas y Cuentas Pro):

Ingresa a https://gemini.google.com/ con tu cuenta de Google (actualmente habilitado también para cuentas gratuitas).
Ve al botón de engranaje o Configuración (⚙️) ubicado en la parte inferior izquierda (o en el menú lateral) y elige "Gems", y dentro del Gestor de Gems elige "Nuevo Gem" (o entra directo a https://gemini.google.com/gems/view).
Asigna el Nombre de tu Gem y pega las Instrucciones correspondientes a tu especialidad.
En la sección inferior de Conocimientos (Archivos), puedes agregar documentos (PDFs de normativas, manuales de convivencia, circulares, etc.) para que tu Gem responda basándose en ellos.

🏢 Gem Modo Administrativo / Contable

Gem: "Simplificador Corporativo"

Instrucciones del Gem: Simplificador Corporativo

Eres un asistente ejecutivo experto. Tu objetivo es tomar correos electrónicos o documentos legales y tributarios extensos y transformarlos en resúmenes ejecutivos en 3 puntos clave, indicando: 1. Resumen sencillo de la situación. 2. Pasos a seguir en viñetas. 3. Alertas o fechas límite que requieren acción inmediata. Tono cordial, claro y formal. Agrega documentos etc

🎨 Gem Modo Preescolar

Gem: "Traductor Pedagógico a Padres"

Instrucciones del Gem: Traductor Pedagógico

Eres un Docente y Psicopedagogo Experto en primera infancia especializado en comunicación con las familias. Tu único objetivo es tomar observaciones del aula o hitos del desarrollo infantil y transformarlos en comunicados claros, empáticos y tranquilizadores para los padres de familia. Tu tono debe ser cálido y profesional. El formato de salida siempre debe ser: 1. Resumen positivo del proceso del niño. 2. Actividades sencillas de refuerzo en casa en viñetas. 3. Recordatorio de acompañamiento conjunto con el jardín. Agrega documentos etc

11. El Futuro: Bases de Datos e Integración

El siguiente nivel es conectar estas inteligencias directamente a los sistemas de la institución a través de APIs. Por ejemplo, integrar la IA a plataformas como AURA (Administración Unificada de Registro Académico), sistemas ERP financieros o asistentes locales como ALFI (Asistente Local Financiero: https://alfi.mascotascolombia.org/), permitiendo gestionar historiales de estudiantes o cruzar facturas automáticamente en un entorno seguro y encriptado.

12. Privacidad Absoluta y Rendimiento: IA en la Nube vs. IA Local

IA en la Nube (Cloud AI): No requiere equipos costosos. Dependencia total de internet; los datos salen de la empresa.
IA Local (Local LLMs): Consiste en ejecutar la IA directamente en el ordenador sin internet. Garantiza un 100% de privacidad (ideal para contabilidad confidencial), pero requiere estaciones de trabajo con tarjetas gráficas (GPUs) potentes.

13. Expansión y Comunidad: Marketing de Servicios

Usa la IA para crear campañas que atraigan clientes a tu firma contable, o matriculen estudiantes en el preescolar. Genera guiones para redes sociales, automatiza respuestas de WhatsApp (pre-filtro) y diseña material publicitario.

14. Análisis Predictivo: La IA como Gerente

Control de Inventario Inteligente: Algoritmos que predicen cuándo se agotará el material didáctico o la papelería de la oficina.
Predicción de Flujo de Caja: Sistemas que analizan históricos contables para prever meses de baja liquidez.

15. Taller Práctico 6: Diseñando una Campaña Multimedia

Prompt Campaña Redes Sociales

Actúa como un Director de Marketing. Diseña una campaña para redes sociales llamada 'Finanzas Sanas' para mi despacho contable. Necesito: 1. Eslogan. 2. Guion de 30 seg para Instagram. 3. Sugerencia musical.

16. La Revolución del Video y la IA en la Educación y Oficinas

De Texto a Video (Text-to-Video): Escribes una descripción y la IA genera un videoclip realista.
Locución de IA (Text-to-Speech): Voces sintéticas que suenan 100% humanas leyendo un guion de bienvenida.
Avatares Digitales: Personajes virtuales que mueven los labios al ritmo del texto para videos de inducción corporativa sin grabar a un empleado real.

17. Ecosistema de Herramientas para Creación Multimedia

Generación de Video: labs.google, Runway, Luma Dream Machine o Veo.
Música y Sonido: Suno (https://suno.com/es) o Udio.
Voces Realistas: https://aistudio.google.com/ (Speech and Music - Gemini 3.1 TTS - Turn text into natural speech) o ElevenLabs.
Edición Asistida: CapCut.

18. Taller Práctico 7: Produciendo una Campaña para Carreras Técnicas

Prompt Guion TikTok Secretariado Ejecutivo

Actúa como un director creativo. Queremos invitar a empresas a contratar nuestros servicios de Secretariado Ejecutivo. Escribe un guion para TikTok (máx 45 seg) en una tabla de dos columnas: izquierda para imágenes/clips, derecha para la voz en off.

19. Taller Práctico 8: Dando Vida al Video (Banda Sonora)

Crea una letra motivadora y pégala en Suno usando este estilo:

Estilo Musical Suno

Pop corporativo moderno, alegre, inspirador, ritmo enérgico y profesional.

20. Ética Visual y Transparencia en Redes

Veracidad: Nunca generes imágenes con IA para simular resultados financieros "falsos" o instalaciones de un colegio que no existen.
Transparencia: Añade una etiqueta que diga "Imagen/Ilustración generada por IA".

21. Meta AI: Generación y Animación de Imágenes en tu Bolsillo

Meta AI ha integrado la Inteligencia Artificial directamente en WhatsApp, Instagram y Facebook. No solo funciona como un asistente para responder preguntas o resumir audios largos, sino que es un potente estudio creativo al alcance de un mensaje.

1. Generación de Imágenes (/imagina):

Con solo escribir el comando /imagina seguido de tu idea, Meta AI creará imágenes al instante.

🎨 Comando Meta AI - Preescolar

WhatsApp / Meta AI (Preescolar)

/imagina un león bebé estilo acuarela leyendo un libro

(Ideal para decorar guías de estudio).

🏢 Comando Meta AI - Secretariado / Contabilidad

WhatsApp / Meta AI (Corporativo)

/imagina un ícono moderno 3D de una calculadora y un reloj

(Ideal para la foto de perfil corporativa).

2. Animación de Imágenes a Video:

Una vez que Meta AI genera una imagen estática, te ofrece la opción de "Animar". Con un solo toque, la IA toma esa imagen y la convierte en un videoclip corto (GIF o MP4) dándole movimiento fluido a los elementos.

Aplicación Práctica: Las docentes pueden generar la mascota del jardín y animarla para que salude en los estados de WhatsApp de la institución, o la secretaria puede animar el logotipo de la empresa para enviar un mensaje dinámico de "Feliz Día" a los clientes contables, proyectando una imagen de marca moderna sin necesidad de usar programas de edición complejos.

22. Gamma App: Creando Presentaciones de Alto Impacto

Nota aclaratoria: No confundas la aplicación web "Gamma", que se utiliza para diseñar diapositivas, con "Gemma", que es la familia de modelos de lenguaje abierto creados por Google.

Gamma App es la plataforma definitiva para crear presentaciones corporativas o pedagógicas en segundos. Solo escribes el tema y la IA genera la estructura, redacta textos, elige colores y acomoda las imágenes, eliminando el "Síndrome de la Página en Blanco".

23. Taller Práctico 9: Tu Primera Exposición Generada con IA

Entra a gamma.app y utiliza este prompt:

Prompt Exposición Gamma App

Crea una presentación de 6 diapositivas titulada 'Guía de Transición al Jardín de Infantes'. El público son padres de familia, por lo que el tono debe ser educativo, claro y amigable. Estilo visual limpio, tonos pastel y acogedores.

🧠 Cuestionario de Repaso Final

1. ¿Ventaja principal de utilizar Meta AI?

a) Reemplaza los sistemas contables. b) Su integración directa en apps de uso diario como WhatsApp para generar, resumir y animar. c) Funciona sin internet.

2. ¿Cómo usar Meta AI si un cliente te envía un audio muy largo?

a) Pedir a Meta AI que responda automáticamente. b) Pedir a la IA que resuma los puntos principales para agilizar el trabajo. c) Bloquear al cliente.

3. ¿La herramienta Gamma App y los modelos Gemma de Google son lo mismo?

a) Sí, son exactamente lo mismo. b) No. Gemma son modelos de Inteligencia Artificial de Google, y Gamma es una app para crear presentaciones. c) Sí, ambas sirven exclusivamente para programar en HTML.

24. Taller 10: Nivel Maestro - Creando tu propia Gema Arquitecta Web

Automatiza el diseño creando tu propio asistente "Director de Proyecto". Ve a Gemini (desde cuentas gratuitas en el botón de Configuración ⚙️ > Gems > Gestor de Gems > Nuevo Gem, o en Gemini Advanced) y crea una Gema llamada Arquitecto Web Corporativo.

En las "Instrucciones" copia exactamente este bloque:

Prompt Gema: Arquitecto Web Corporativo y Educativo

Rol: Eres un Senior Web Developer y experto en Experiencia de Usuario (UX) para firmas contables y colegios.
Objetivo: Guiar a un estudiante paso a paso para crear la página web de su proyecto en Google Sites. Actúa como consultor, haciendo UNA pregunta a la vez y esperando la respuesta.

Flujo de la Entrevista:
- Pregunta 1: "¡Hola! Soy tu Arquitecto Web. Para empezar, ¿cuál es el nombre de tu empresa/colegio y cuál es su enfoque principal?"
- Pregunta 2: (Tras su respuesta) "Excelente. ¿Qué emociones quieres transmitir y cuáles son tus 2 colores corporativos favoritos?"
- Pregunta 3: (Tras su respuesta) "Perfecto. ¿Cuál es la dirección física y el número de WhatsApp de contacto?"

Entrega del Proyecto Final: Al responder la Pregunta 3, entrégale su "Kit de Construcción" en 4 partes:
1. Paleta de Colores: 3 códigos Hexadecimales.
2. El Banner Panorámico: Un prompt visual optimizado (/imagina...).
3. El Código HTML/CSS del pie de página adaptado a sus colores.
4. El Prompt del Asistente Virtual para su web.

Tono: Profesional, motivador y tecnológico.

La Prueba de Fuego: Guarda tu Gema e inicia un chat diciendo: "Hola, quiero crear mi página". Observa cómo te entrevista y genera todo tu código a medida.

Guía Profunda: Dominando Gamma App

¿Qué es Gamma App?

Gamma App es una herramienta basada en inteligencia artificial diseñada para crear presentaciones, documentos interactivos y páginas web sencillas en cuestión de segundos. A diferencia de las diapositivas tradicionales, Gamma utiliza un formato modular de "tarjetas" fluidas que facilitan la lectura y el diseño visual sin requerir habilidades avanzadas de diseño.

Utilidades Clave

Creación acelerada por IA: Genera borradores completos con imágenes, texto y estructura a partir de un simple texto (prompt).
Diseño flexible e interactivo: Permite incrustar videos de YouTube, formularios, mapas, prototipos de Figma y gráficos sin romper el diseño.
Rediseño en un clic: Cambia estilos visuales, tipografías y paletas de color al instante sin desacomodar el contenido.
Colaboración en vivo: Permite a múltiples personas editar y comentar en tiempo real.

🔗 Enlace Oficial de Acceso: https://gamma.app (detecta automáticamente el idioma de tu navegador al español).

Paso a Paso para Comenzar a Trabajar

Registro: Ingresa a gamma.app y crea una cuenta gratuita usando tu correo de Google o email corporativo.
Iniciar nuevo proyecto: Haz clic en el botón "Nuevo con IA" (New with AI).
Seleccionar el método:
- Generar (Generate): Escribes una idea breve y la IA hace todo.
- Texto a Presentación (Paste in text): Pegas un borrador o esquema detallado previamente escrito.
- Importar (Import): Subes un archivo Word, PDF o PowerPoint previo para rediseñarlo.
Elegir formato: Selecciona entre Presentación, Documento o Página Web.
Revisar la estructura: La IA creará una tabla de contenidos/esquema. Puedes editar, borrar o añadir temas antes de generar.
Elegir plantilla visual: Selecciona el tema gráfico (colores y fuentes) que mejor se adapte al tono de tu presentación.
Generar y Editar: Haz clic en Generar. Una vez listo el contenido, usa el panel derecho para ajustar detalles, agregar imágenes o pedirle a la IA ajustes específicos.

¿Cómo Exportar tu Trabajo?

Descargar tu presentación o documento es muy fácil:

Ve a la parte superior derecha de la pantalla y haz clic en el botón Compartir (Share).
En el menú desplegable, selecciona la pestaña Exportar (Export).
Elige tu formato preferido:
- Exportar a PDF: Ideal para enviar por correo institucional o imprimir.
- Exportar a PowerPoint (.pptx): Excelente si necesitas realizar ajustes finales o exponer sin conexión a internet.
Presiona el botón de descarga.

Prompts Profesionales de Gamma App por Especialidad

🎨 Prompt Gamma - Educación Preescolar

1. Prompt para Jardín Infantil (Reunión de Padres)

Prompt Gamma - Jardín Infantil 'Mococitos Felices'

Crea una presentación cálida, alegre y profesional de 10 tarjetas para la reunión de inicio de año del Jardín Infantil 'Mococitos Felices'.
Audiencia: Padres de familia de niños entre 2 y 5 años.
Tono: Educativo, acogedor, seguro y claro.
Estructura requerida:
1. Bienvenida e introducción al equipo docente y directivo.
2. Nuestra filosofía pedagógica y valores educativos.
3. Rutina diaria, horarios y distribución de actividades.
4. Plan de alimentación, nutrición y loncheras saludables.
5. Protocolos de seguridad, higiene y manejo de emergencias.
6. Canales oficiales de comunicación entre padres y el jardín.
7. Calendario de fechas clave y eventos del primer trimestre.
8. Sección de preguntas frecuentes y mensaje de cierre.

🏢 Prompt Gamma - Auxiliares Contables y Administrativos

2. Prompt para Auxiliares Contables / Administrativos (Reporte Financiero)

Prompt Gamma - Informe Financiero y Administrativo

Genera una presentación ejecutiva y estructurada de 10 tarjetas para el Informe Financiero y Administrativo del Cierre Trimestral.
Audiencia: Gerencia General y Dirección Administrativa.
Tono: Corporativo, analítico, conciso y basado en datos.
Estructura requerida:
1. Resumen ejecutivo del rendimiento financiero del período.
2. Comparativo de Ingresos vs. Gastos Operativos (incluir tabla resumida).
3. Estado de Cuentas por Cobrar y antigüedad de la cartera.
4. Control de gastos administrativos, nómina y servicios.
5. Análisis de flujo de caja y disponibilidad de liquidez.
6. Desviaciones presupuestarias detectadas y alertas contables.
7. Conclusiones y 3 recomendaciones operativas para la optimización de costos en el próximo trimestre.

Exportación y Edición en PowerPoint (Sin Marca de Agua y a Video MP4)

1. Abrir y Habilitar Edición

Al descargar el archivo .pptx desde Gamma y abrirlo en Microsoft PowerPoint, la aplicación se ejecutará en modo de protección por seguridad.

Abre el archivo descargado.
En la barra superior amarilla que aparece con el mensaje de advertencia, haz clic en Habilitar edición.
Asegúrate de guardar el archivo en tu equipo en formato .pptx.

2. Eliminar la Marca de Agua usando el Patrón de Diapositivas

Gamma coloca automáticamente su sello o marca de agua ("Made with Gamma") en la matriz de diseño. No se puede borrar haciendo clic directo sobre la diapositiva común; debes ingresar al editor maestro.

Paso a paso:

Dirígete a la barra de menú superior y haz clic en la pestaña Vista.
En el grupo Vistas de patrón, selecciona Patrón de diapositivas.
En el panel lateral izquierdo, desplázate hasta la primera diapositiva (la diapositiva principal o "Madre", ubicada arriba del todo).
Localiza el texto o logotipo de Gamma (habitualmente en la esquina inferior izquierda o derecha).
Haz clic sobre el borde de la marca de agua y presiona la tecla Suprimir (Delete).
En la barra superior, haz clic en el botón rojo Cerrar vista Patrón.

💡 Al borrarlo de la diapositiva principal del patrón, la marca desaparecerá automáticamente de todas las diapositivas de la presentación.

3. Animación de Objetos (Efectos y Secuencia)

Para que el contenido aparezca de forma dinámica durante la conversión a video, debes aplicar animaciones a cada elemento (títulos, listas, imágenes, gráficos).

Paso a paso:

Ve a la pestaña Animaciones.
Activa el Panel de animación (es fundamental para controlar la secuencia y el orden de aparición).
Selecciona el primer objeto que deseas animar (por ejemplo, el título de la diapositiva).
Elige un efecto de la galería de Entrada (los de color verde, como Aparecer, Desvanecer o Desplazar hacia arriba).
En la barra superior derecha, configura el campo Inicio:
- Con la anterior: El objeto se anima al mismo tiempo que el elemento previo.
- Después de la anterior: El objeto aparece automáticamente una vez termine la animación anterior (ideal para videos continuos).
Ajusta la Duración (ej. 0.50 segundos) y el Retraso si deseas pausas entre elementos.
Repite el proceso con el texto secundario, tablas o imágenes en el orden en que quieras que el espectador los lea.

4. Configurar Intervalos (Tiempos de Diapositiva)

Los intervalos definen cuánto tiempo se mostrará cada diapositiva antes de pasar a la siguiente sin necesidad de hacer clic.

Opción A: Configuración Manual por Transición

Selecciona una o todas las diapositivas (Ctrl + E).
Ve a la pestaña Transiciones.
En la esquina superior derecha, en la sección Avanzar a la diapositiva:
- Desmarca la casilla "Al hacer clic con el mouse".
- Marca la casilla "Después de:" e ingresa el tiempo en segundos (ejemplo: 00:08.00 para 8 segundos por lámina).

Opción B: Ensayar Intervalos (Grabar tiempos reales)

Ve a la pestaña Presentación con diapositivas.
Haz clic en Ensayar intervalos.
La presentación se pondrá en pantalla completa con un cronómetro. Lee el contenido a un ritmo normal y presiona la flecha derecha para avanzar cuando consideres que el tiempo es suficiente.
Al finalizar, PowerPoint te preguntará si deseas guardar los nuevos tiempos grabados. Selecciona Sí.

5. Exportar a Video en Formato MP4

Una vez que las marcas de agua estén fuera, las animaciones configuradas en "Después de la anterior" y los tiempos asignados, procede a la conversión de video.

Paso a paso:

Haz clic en el menú Archivo en la esquina superior izquierda.
Selecciona Exportar y luego Crear un vídeo.
Ajusta los parámetros de exportación:
- Calidad de video: Selecciona Full HD (1080p) o Ultra HD (4K).
- Uso de tiempos: Selecciona "Usar tiempos y narraciones grabadas" (para que respete los intervalos que configuraste en el paso anterior).
Haz clic en el botón Crear vídeo.
Se abrirá la ventana de guardado:
- En Tipo de archivo, asegúrate de que esté seleccionado Video MPEG-4 (*.mp4).
Haz clic en Guardar.

⚠️ Nota: El proceso de renderizado puede tardar unos minutos. Podrás ver la barra de progreso de la creación del video en la parte inferior de la ventana de PowerPoint.

25. Reflexión Final: El Corazón de la Labor Humana

Hemos navegado por algoritmos, automatizaciones financieras, análisis predictivo y diseño de aulas virtuales. Pero al cerrar este documento, es vital recordar por qué existe nuestra vocación técnica y profesional.

La Inteligencia Artificial es asombrosamente rápida y erudita. Puede conciliar mil facturas en un minuto, organizar la agenda anual de la gerencia en segundos, o diseñar el plan de estudios más innovador. Sin embargo, la IA no tiene el tacto para manejar la frustración de un cliente al borde de la quiebra, no tiene la empatía para calmar los nervios de un jefe antes de una junta importante, ni tiene el corazón para secar las lágrimas de un niño en su primer día de clases.

Para ustedes, la nueva generación de profesionales en secretariado, contabilidad y educación preescolar, el desafío es usar estas herramientas como un amplificador de su humanidad.

Utilicen la tecnología para ser los profesionales más eficientes y precisos del mundo, libérense de las tareas mecánicas, pero nunca, bajo ninguna circunstancia, dejen que la máquina apague su compasión, su ética y el toque humano que da verdadero valor a su trabajo.