Conceptos Básicos en React

 Conceptos básicos en React:

1. Elementos Fundamentales

• Componente: Bloque de construcción de la UI (una función de JavaScript) que retorna HTML/JSX. Puede ser reutilizable.

• JSX: Sintaxis que permite escribir HTML directamente dentro de JavaScript. Luego se compila a código JS nativo.

• Props (Propiedades): Datos que se le pasan a un componente desde su padre (como los argumentos de una función). Son de solo lectura (inmutables).

2. Estado y Reactividad

• Estado (State): La memoria interna de un componente. Datos que pueden cambiar con el tiempo y que, al actualizarse, hacen que el componente se vuelva a renderizar.

• Hooks: Funciones especiales (empiezan con use) que te permiten "enganchar" el estado y el ciclo de vida de React en componentes funcionales.

3. Hooks Principales (Los que debes saber sí o sí)

• useState: El hook para crear y actualizar el estado interno de un componente. Retorna el valor actual y una función para modificarlo.

• useEffect: El hook para manejar "efectos secundarios" (peticiones a APIs, suscripciones, modificar el DOM manualmente). Se ejecuta después del renderizado.

• Array de Dependencias (en useEffect): El segundo argumento del useEffect. Si está vacío [], el efecto se ejecuta solo una vez (al montar el componente). Si tiene variables [data], se ejecuta cada vez que esas variables cambien.

4. Manejo de Listas y Renderizado

• Virtual DOM: Una copia ligera del DOM real en memoria. React la usa para calcular los cambios mínimos necesarios antes de actualizar la pantalla real, mejorando el rendimiento.

• Keys (Llaves): Un atributo único obligatorio al renderizar listas (map). Ayuda a React a identificar qué elementos han cambiado, se han agregado o se han eliminado.

Diferencia entre Props y State:

"Las Props vienen de afuera y no se pueden modificar, el State se maneja por dentro y sí cambia para actualizar la pantalla"

Ecosistemas SaaS/PaaS: Guía de Desarrollo para ServiceNow & Creatio

 

1. ServiceNow: El "sistema operativo" de las empresas

ServiceNow nació para gestionar el soporte técnico de las empresas (ITSM - IT Service Management), pero hoy en día sirve para digitalizar casi cualquier flujo de trabajo empresarial (Recursos Humanos, Servicio al Cliente, Seguridad, etc.).

• ¿Para qué sirve? Imagina que a un empleado se le daña la laptop. Entra a ServiceNow, reporta el problema, la plataforma le asigna automáticamente la tarea al técnico disponible, gestiona el inventario de laptops y, si se necesita comprar una nueva, envía una solicitud de aprobación al jefe. Todo ese flujo ocurre dentro de ServiceNow.

• ¿Qué hace un desarrollador allí? * No vas a picar código desde cero para hacer una interfaz. Vas a extender lo que ya existe.

• Usarás mucho JavaScript (tanto en el servidor como en el cliente) para crear reglas de negocio, automatizaciones y flujos de trabajo (Workflows).

• Crearás integraciones mediante APIs (REST/SOAP) para conectar ServiceNow con otros sistemas de la empresa.

2. Creatio: El rey de la automatización "No-Code/Low-Code" y CRM

Creatio se enfoca fuertemente en tres pilares: Ventas, Marketing y Servicio al Cliente (lo que se conoce como CRM), combinado con un motor de gestión de procesos de negocio (BPM - Business Process Management).

• ¿Para qué sirve? Sirve para que las empresas diseñen sus procesos visualmente, como si fuera un diagrama de flujo, y que ese diagrama se convierta automáticamente en una aplicación funcional. Por ejemplo, automatizar todo el proceso desde que un cliente ve un anuncio, pasa por los asesores de ventas, hasta que se le factura el producto.

• ¿Qué hace un desarrollador allí?

• Aunque es una plataforma Low-Code (donde los usuarios arrastran y sueltan elementos), cuando el cliente pide una funcionalidad muy compleja o una interfaz muy específica, entra el desarrollador.

• Creatio está construido sobre tecnologías de Microsoft, por lo que los desarrolladores suelen usar C# (.NET) para la lógica del backend y JavaScript para personalizar el frontend.

• También diseñarás arquitecturas de datos e integraciones complejas.

Cuadro Comparativo (Para lucirte en la entrevista)

Característica	ServiceNow	Creatio
Foco Principal	Operaciones de TI, flujos de trabajo empresariales y soporte (ITSM / ESM).	Ventas, Marketing, Servicio al Cliente (CRM) y procesos visuales (BPM).
Filosofía	Muy robusta, orientada a grandes corporaciones y gobernanza de TI.	Enfocada en la agilidad extrema mediante Low-Code/No-Code.
Tecnologías clave (Dev)	JavaScript, React, TypeScript (con ServiceNow IDE), Angular (portales antiguos), HTML/CSS.	C# (.NET), Angular, JavaScript, SQL. (Nota: Aquí React no aplica).

 

"ServiceNow como Creatio son plataformas líderes para evitar que las empresas reinventen la rueda, permitiendo automatizar procesos a gran escala. Permite aplicar lógica de negocio, diseñar buenas arquitecturas de datos e integrar sistemas mediante APIs. Mis bases en desarrollo backend y frontend me permitirán adaptarme rápido a sus entornos y lenguajes (como JavaScript o C#)".

Similitudes con Hubspot, Bitrix, Holded

Lógica de Workflows (Disparadores y Acciones): Todas funcionan bajo el esquema de "Si pasa X evento, ejecuta Y acción". Ya sea automatizar un correo al ganar un cliente en HubSpot/Creatio, descontar stock al pagar una factura en Holded, o asignar un técnico al fallar un servidor en ServiceNow, la lógica mental y el flujo son exactamente iguales.

Modelado de Datos Relacionales: Todas operan sobre bases de datos estructuradas y conectadas entre sí (ej. Cliente ➔ Empresa ➔ Facturas/Tickets/Tareas). Tu habilidad para entender y manipular cómo se relacionan estas tablas te servirá en cualquiera de las plataformas.

Integración vía APIs y Webhooks: Ninguna trabaja aislada. El día a día en todas ellas (especialmente en ServiceNow, Creatio y Holded) consiste en leer documentación técnica, mapear objetos JSON y conectar sistemas externos consumiendo o creando APIs REST.

Gestión de Estados: Todas controlan el ciclo de vida de un proceso mediante estados (Pendiente, En Proceso, Aprobado, Cerrado). Tu rol como Dev es programar las validaciones y reglas de negocio necesarias para que los datos no se rompan al cambiar de estado.

Claude Code conceptos esenciales

Conceptos generales:

1. Claude

¿Qué es? Es un modelo de lenguaje de gran tamaño (LLM) desarrollado por Anthropic. Piensa en él como un colega programador extremadamente inteligente con el que puedes hablar en lenguaje natural.

Ejemplo práctico: Le pegas un bloque de código PHP que está arrojando un error 500 en Laravel, y Claude te explica la línea exacta donde falta el punto y coma o dónde falló la inyección de dependencias.

 

2. MCP (Model Context Protocol)

¿Qué es? Es un estándar abierto que actúa como un "puente seguro" para que la IA se conecte con herramientas, bases de datos o archivos locales. En lugar de que cada aplicación cree su propia forma de hablar con la IA, MCP define un canal único y seguro.

Ejemplo práctico: Instalas un servidor MCP local en tu máquina. Ahora Claude puede leer de forma segura la estructura de una base de datos PostgreSQL local para responderte consultas sobre tus tablas sin que tú tengas que exportar el esquema a mano.

3. Skills (Habilidades)

¿Qué es? Son las capacidades específicas que se le otorgan a un modelo para realizar tareas concretas más allá de solo generar texto.

Ejemplo práctico: Una "Skill de SEO" integrada en tu flujo de trabajo. Cuando le pasas un borrador de un artículo, esta habilidad le permite analizar palabras clave, verificar la densidad y generar los meta-tags estructurados automáticamente.

4. Spec-Driven Development (Desarrollo Guiado por Especificaciones)

¿Qué es? Es una metodología de trabajo donde primero describes detalladamente cómo debe funcionar el software (en un archivo de especificación o prompt maestro) y dejas que la IA o las herramientas de automatización generen el código basándose estrictamente en ese documento.

Ejemplo práctico: Escribes una especificación clara en Markdown: "Necesito un endpoint POST /orders que reciba un JSON, valide el stock y cree un registro". Le pasas esto a la IA, y ella te genera el controlador, las validaciones y los tests unitarios sin salirse de las reglas del documento.

5. Agente (Agent)

¿Qué es? Un agente es un sistema de IA autónomo. No solo responde preguntas, sino que puede planificar pasos, usar herramientas externas, evaluar el resultado de sus acciones y corregir el rumbo hasta cumplir un objetivo.

Ejemplo práctico: Le dices a un agente de desarrollo: "Migra este módulo de Node.js a NestJS". El agente lee el código antiguo, crea la estructura de carpetas de NestJS, escribe los módulos, ejecuta los tests, ve qué falló, corrige el código y te entrega el módulo funcionando.

6. Subagentes (Sub-agents)

¿Qué es? Cuando un Agente principal tiene una tarea muy grande, delega misiones específicas a "trabajadores especializados" más pequeños llamados subagentes.

Ejemplo práctico: El Agente principal encargado de crear una tienda online despierta a tres subagentes: uno experto en base de datos para crear las migraciones, otro especializado en frontend para armar los componentes en React, y un tercero enfocado en seguridad para auditar el flujo de checkout.

7. Plugin

¿Qué es? Una extensión de software tradicional que añade una funcionalidad extra a una plataforma existente.

Ejemplo práctico: Instalas un plugin en tu tienda de WooCommerce o Shopify para conectarla directamente con una pasarela de pagos local como Wompi o Stripe. El núcleo de la tienda sigue siendo el mismo, pero ahora tiene una nueva opción de pago.

8. Hooks (Ganchos)

¿Qué es? Son puntos de anclaje en el código que permiten "interceptar" un proceso en un momento exacto para ejecutar una acción personalizada antes de que continúe.

Ejemplo práctico: Configuras un hook en tu plataforma de automatización (como Make). Justo en el momento en que un usuario completa una compra, el hook se activa (dispara), detiene un segundo el flujo, envía los datos del cliente a tu CRM y luego permite que el sistema continúe con el envío del correo de confirmación.

9. Marketplace

¿Qué es? Una tienda o catálogo digital centralizado donde desarrolladores externos suben herramientas, plugins, agentes o servidores MCP listos para que otros los instalen con un par de clics.

Ejemplo práctico: Entras al marketplace de extensiones de VS Code o de una plataforma de automatización para buscar un conector ya programado que envíe alertas a un canal de Slack cada vez que un despliegue falle. No lo programas tú, solo lo descargas del catálogo.

Guía Definitiva de Supervivencia: Vue 3, Quasar y Gestores de Estado

Consolidar los conceptos técnicos con analogías del mundo real es la mejor forma de recordarlos para siempre. Para este repaso general, vamos a imaginar que estamos construyendo y administrando un gran hotel de cinco estrellas.

Parte 1: Bases Sólidas de Vue 3 (El Motor del Hotel)

Si tu aplicación fuera un hotel, Vue 3 es la infraestructura, las paredes inteligentes y el sistema de automatización que hace que todo cambie en tiempo real sin que el usuario tenga que parpadear.

• La Reactividad (ref y reactive — El Termostato Inteligente): Olvídate de cambiar el DOM a mano de forma manual. Piensa en ref() como un termostato digital: si cambias el número de la temperatura en la pantalla (el estado), el ambiente (la interfaz) se ajusta automáticamente.

• Composition API (Cajas de Herramientas Temáticas): En lugar de tener la lógica dispersa por "tipos" (datos en un lado, métodos en otro), la Composition API te permite agrupar todo lo relacionado con una sola función (por ejemplo, "Gestión de Habitaciones") en un solo lugar. Es como tener una caja de herramientas específica para el plomero y otra para el electricista.

• Props y Events (El Teléfono de Recepción):

  • Props (De padres a hijos): La gerencia (Componente Padre) le envía instrucciones detalladas a los botones de los pisos (Componentes Hijos). Las props siempre bajan.

  • Events / Emit (De hijos a padres): Un huésped presiona el botón de "limpieza" en su habitación (Hijo), lo que dispara un emit hacia la recepción (Padre) para que actúe. Los eventos siempre suben.

Parte 2: Bases Sólidas de Quasar Framework (El Diseñador de Interiores)

Ya tienes la estructura del hotel, pero no vas a fabricar los sofás, las lámparas y las puertas desde cero. Quasar es tu proveedor de muebles de lujo prefabricados y tu sistema de transporte global.

• Componentes Material Design (Muebles Listos para Usar): ¿Necesitas una tabla de datos interactiva, un menú lateral o un botón animado? Usas q-table, q-drawer o q-btn. No pierdes tiempo escribiendo CSS complejo; arrastras el componente de Quasar, le pasas unas cuantas props de estilo y luce impecable.

• El Sistema de Grid (Flexbox sobre Esteroides): Quasar utiliza un sistema de filas (row) y columnas (col) extremadamente intuitivo. Es el plano arquitectónico que decide cómo se redistribuyen los muebles si la habitación se encoge (un móvil) o se agranda (una pantalla de escritorio).

• Escribe una vez, despliega donde sea (Multiplataforma): Con el mismo código base, Quasar compila tu aplicación para la Web (SPA/PWA), para el escritorio (Electron) o para tiendas móviles (Capacitor/Cordova). Es como si el mismo plano de tu hotel funcionara para construir un edificio físico, un barco flotante o una maqueta virtual.

Parte 3: Los Gestores de Estado (La Central de Suministros del Hotel)

Cuando tu hotel crece y tiene cientos de habitaciones, pasar información de la recepción al piso más alto mediante props y emits se vuelve una pesadilla (el famoso Prop Drilling). Para evitarlo, usamos un Gestor de Estados, que actúa como la central de suministros del hotel.

Dependiendo de la arquitectura de tu hotel, puedes elegir entre tres administradores diferentes:

Opción A: Pinia (El Almacén Moderno y Ágil)

Es el estándar oficial recomendado para Vue 3.

• La analogía: Es un almacén automatizado y modular. Cada departamento del hotel (Restaurante, Habitaciones, Spa) tiene su propia sección independiente (stores separados). Es ligero, directo y se sostiene sobre tres pilares fáciles de recordar:

  1. State (El Inventario): La base de datos reactiva en memoria. Ejemplo: habitacionesOcupadas: 42.

  2. Getters (Los Filtros / Contadores): No modifican nada, solo calculan al vuelo (como las propiedades computadas). Ejemplo: calcular las habitacionesDisponibles.

  3. Actions (Los Empleados): Funciones que modifican el State o hacen peticiones al exterior (APIs). Las actions hacen el trabajo sucio.

Opción B: Vuex (El Almacén Clásico y Burocrático)

Fue el rey indiscutible en Vue 2 y sigue muy presente en proyectos grandes o heredados.

• La analogía: Es el sistema de la "vieja escuela". Un solo almacén gigantesco para todo el hotel donde, para cambiar una sola bombilla, hay que llenar un formulario estricto. Pasas por una Action (logística), que obligatoriamente llama a una Mutation (el único empleado autorizado con llave para tocar el inventario físico), para recién alterar el State. Es ultra seguro, pero requiere mucho más código repetitivo (boilerplate).

Opción C: Estado Global con reactive() o Composables (La Bodega Informal)

La opción nativa de Vue 3 sin instalar librerías externas.

• La analogía: Es como poner una pizarra con notas en el pasillo de empleados. Cualquier persona que pase puede leer el estado de un vistazo o borrar algo con un marcador. Es súper rápido de implementar para proyectos pequeños, pero si el hotel crece mucho, es fácil que alguien altere una nota importante por accidente al no haber un control estricto de flujo.

💡 Resumen de Bolsillo

• Vue 3: El motor del hotel. Controlas la lógica con termostatos (ref), cajas ordenadas (Composition API) y comunicación vertical (Props/Emits).

• Quasar: El diseño y transporte. Muebles listos (q-components) y la capacidad de exportar a Web, Android, iOS o Escritorio con un solo comando.

• Gestores de Estado: El almacén central. Pinia es el joven eficiente y directo; Vuex es el abuelo estricto y burocrático; Reactive Global es la pizarra práctica hecha en casa.

Tema clave en Vuejs

🚀 Parte 1: Temas Clave Vue 3

• Composition API: La forma moderna de escribir Vue usando <script setup>. Todo el código de una misma función va junto.

• Lifecycle Hooks: Funciones que se ejecutan en momentos clave. El más usado: onMounted (cuando el componente aparece en pantalla, ideal para cargar datos).

• Pinia: El almacén central. Guarda los datos que toda la aplicación necesita ver (ej. el usuario logueado).

• Props: Datos que el padre le manda al hijo (hacia abajo).

• Emit: Eventos que el hijo le manda al padre para avisarle algo (hacia arriba).

• v-if: Oculta un elemento borrándolo del mapa.

• v-show: Oculta un elemento pero solo con CSS (display: none).

• v-for: Para hacer listas (como un forEach). Siempre lleva :key.

• v-model: Conecta un input con una variable. Si uno cambia, el otro también.

❓ Parte 2: Preguntas de Entrevista (Respuestas Cortas)

1. ¿Diferencia entre ref y reactive?

• ref() sirve para cualquier dato (usa .value).

• reactive() solo para objetos y arrays (no usa .value).

• Respuesta rápida: Usa siempre ref por seguridad.

2. ¿Cuándo usar computed y watch?

• computed: Para calcular un dato nuevo basado en otro (tiene memoria/caché).

• watch: Para ejecutar una acción (como llamar a una API) cuando un dato cambia.

3. ¿Ventaja de Composition API?

• Permite ordenar el código por funciones y reutilizarlo mucho más fácil que antes.

4. ¿Cómo funciona v-model por detrás?

• Es la unión automática de una prop (el valor) y un evento (cuando cambia).

5. ¿Cómo compartir datos entre componentes?

• Cerca: Props (hacia abajo) y Emits (hacia arriba).

• Lejos / Toda la app: Pinia.

6. ¿Qué es Pinia?

• Una caja central para guardar datos globales de la app y evitar pasar props de componente en componente.

🚀 Parte 3: Nuevos Temas Clave

• Vuex: El antecesor de Pinia. Es el sistema antiguo de manejo de estado global para Vue 2. Si te toca mantener un proyecto viejo, usarás Vuex; si el proyecto es moderno, usarás Pinia.

• Interfaces Modernas (UI): Se refiere a crear componentes visuales que sean limpios, minimalistas, interactivos y adaptables a móviles (responsive), priorizando siempre la experiencia de usuario (UX).

• Optimizar Rendimiento: Hacer que la app cargue y funcione más rápido. En Vue se logra con Lazy Loading (cargar componentes o rutas solo cuando se necesitan) y usando bien v-if / v-show.

• Quasar Framework: Es un framework basado en Vue que te permite escribir el código una sola vez y exportarlo como web (SPA/SSR), app móvil (Android/iOS) o app de escritorio, usando un catálogo gigante de componentes visuales ya listos.

❓ Parte 4: Nuevas Preguntas de Entrevista

1. ¿Qué diferencia hay entre Vuex y Pinia?

• Vuex es más complejo, usa mutaciones y requiere más código (boilerplate).

• Pinia es más simple, no usa mutaciones (cambias el estado directamente) y tiene soporte nativo para TypeScript.

2. ¿Cómo optimizas el rendimiento de una app en Vue?

• Cargando las rutas con Lazy Loading (importación dinámica).

• Usando :key obligatoriamente en todos los v-for.

• Usando v-show en lugar de v-if si el componente aparece y desaparece constantemente.

3. ¿Qué ventajas tiene usar Quasar?

• Multiplataforma: Creas web, móvil y escritorio desde el mismo código.

• Velocidad: Viene con componentes UI modernos listos para usar, lo que ahorra meses de desarrollo.

4. ¿A qué te refieres con crear una Interfaz Moderna en Vue?

• A diseñar componentes modulares, con carga visual ligera, animaciones fluidas y un diseño adaptable (responsive) que responda al instante a las acciones del usuario.

Configurar SMTP gmail en moodle

En config.php:

$CFG->smtphosts = 'smtp.gmail.com:587';

$CFG->smtpuser = 'mai@mail.es';

$CFG->smtppass = ''; // tu app password  https://myaccount.google.com/apppasswords (es necesario tener la cuenta con 2fa https://myaccount.google.com/security )

$CFG->smtpsecure = 'tls';

$CFG->smtpauthtype = 'LOGIN'; 

Configuración Google Meet en Moodle

Para implementar la integración de Google Meet con Moodle mediante OAuth 2, sigue estos pasos:

1. Creación del proyecto en Google Cloud
   • Se crea un proyecto en Google Cloud Console.
2. Configuración de credenciales OAuth 2
   • Se genera:
     • Client ID
     • Client Secret
3. Configuración en Moodle
   • Se accedió a:
     👉 Administración del sitio → Servidor → Servicios OAuth 2
   • Se creó el servicio de Google utilizando:
     • Client ID
     • Client Secret
4. Configuración de URI de redirección

   • Se configura correctamente en Google Cloud:

     https://tudominio.com/admin/oauth2callback.php
     

   • Esto resuelve el error redirect_uri_mismatch
5. Activación de APIs necesarias
   • Se habilita:
     • Google Drive API (necesaria para sincronizar grabaciones)
6. Validación de conexión
   • Se logra conectar la cuenta de Google con Moodle
   • Se habilita la opción de sincronización de grabaciones

 Resultado

• Moodle puede:
  • Crear sesiones de Google Meet
  • Conectar con Google Drive
  • Sincronizar grabaciones (tras ejecutar la sincronización)

Subir archivos grandes en Moodle

 Servidor web (NGINX o Apache)

En NGINX

Parámetro clave:

client_max_body_size 512M;

• Esto define el tamaño máximo de subida
• Valor típico por defecto: 1M o 2M (muy bajo)
• Tú puedes subirlo a:
  • 128M (normal)
  • 256M (recomendado)
  • 512M (archivos grandes como videos)

 Se coloca en:

• /etc/nginx/nginx.conf
• o en config del sitio

Luego:

sudo systemctl reload nginx

PHP (MUY IMPORTANTE)

En php.ini debes ajustar:

upload_max_filesize = 512M
post_max_size = 512M
max_execution_time = 300
max_input_time = 300
memory_limit = 512M

post_max_size debe ser ≥ upload_max_filesize

Luego reinicia:

sudo systemctl restart php-fpm

(o apache si usas Apache)

---

Moodle (dentro del sistema)

Ir a:

Administración del sitio → Seguridad → Políticas del sitio

Configurar:

• Tamaño máximo de archivo → 512MB (o el que quieras)

También en:

• Curso → Configuración → Tamaño máximo de subida

---

Resumen rápido

Para subir archivos grandes:

Nivel	Parámetro	Ejemplo
NGINX	client_max_body_size	512M
PHP	upload_max_filesize	512M
PHP	post_max_size	512M
Moodle	Tamaño máximo archivo	512MB

Error típico

Si uno de estos es menor → falla la subida
(Moodle muestra error aunque tengas todo lo demás bien)

Configurar SMTP en Moodle (no gmail)

Si Moodle no envía correos, puedes configurar el SMTP directamente en el archivo config.php. 

1. Editar archivo

Ubica y abre:

/config.php

2. Añadir configuración SMTP
Agrega al final del archivo:
$CFG->directorypermissions = 0777;
$CFG->smtphosts = 'ssl://smtp.serviciodecorreo.es:465';
$CFG->smtpuser = 'tu_correo@tudominio.com';
$CFG->smtppass = 'tu_contraseña';
$CFG->smtpsecure = 'ssl';
$CFG->smtpauthtype = 'LOGIN';


3. Datos necesarios
Servidor SMTP: smtp.serviciodecorreo.es
Puerto: 465 (SSL)
Usuario: correo completo
Contraseña: la del correo

Notas importantes
Asegúrate de que el servidor permita conexiones SMTP (puerto 465 o 587)
Si no funciona con SSL, prueba:
tls con puerto 587
Verifica que el correo existe y la contraseña es correcta

Resultado
Con esta configuración, Moodle podrá enviar correos correctamente .

Notas: Framework ACHIEVE para el uso de IA

No todos los problemas deben resolverse con IA. El framework ACHIEVE ayuda a identificar cuándo la Inteligencia Artificial es la herramienta correcta, con el fin de aumentar nuestra propia inteligencia y capacidad crítica, en lugar de solo depender de la tecnología.

Los 5 Pilares de ACHIEVE:

1. A – Aid Human Coordination (Coordinación Humana): La IA como facilitadora entre personas.

   • Ejemplo: Resúmenes de reuniones, agendas compartidas o alineación de equipos.

2. C – Cut Out Tedious Tasks (Eliminar lo Tedioso): Automatizar tareas repetitivas que no aportan valor creativo.

   • Ejemplo: Clasificar correos masivos o reformatear grandes bases de datos.

3. H – Help Provide a Safety Net (Red de Seguridad): Usar la IA para revisar, verificar y detectar riesgos.

   • Ejemplo: Auditoría de contratos, detección de errores en código o análisis de "qué podría salir mal".

4. I-E-V – Inspire bEtter problem solving and creatiVity (Inspiración y Creatividad): Salir de nuestra zona de confort mental.

   • Uso: Evitar resolver todo de la misma forma (sesgo) usando la IA para brainstorming, analogías y ángulos de resolución que no habíamos considerado.

5. E – Enable Great Ideas to Scale Faster (Escalabilidad): Llevar una buena idea a un impacto mayor rápidamente.

• Ejemplo: Traducir contenido a varios idiomas o adaptar un solo concepto a múltiples formatos (blog, redes sociales, video)

• Conclusión: Antes de lanzar un prompt, haz una pausa y pregunta: ¿Este problema encaja en ACHIEVE? El objetivo real de la IA no es reemplazarnos, sino servir de palanca para elevar nuestro pensamiento crítico y nuestra creatividad.

Consultas SQL valiosas para moodle

 SELECT 

    table_name,

    ROUND((data_length + index_length) / 1024 / 1024 / 1024, 2) AS size_gb

FROM information_schema.TABLES

WHERE table_schema = 'campus'

ORDER BY size_gb DESC;

SELECT

   ROUND(SUM(data_length + index_length) / 1024 / 1024 / 1024, 2) AS total_gb

FROM information_schema.TABLES

WHERE table_schema = 'campus';

SELECT table_name,

       ROUND((data_length + index_length) / 1024 / 1024, 2) AS size_mb

FROM information_schema.TABLES

WHERE table_schema = 'mdlsimb'

ORDER BY size_mb DESC

Borrar logs de antes del 2025

SELECT COUNT(*) AS registros_a_borrar

FROM mdl_logstore_standard_log

WHERE timecreated < UNIX_TIMESTAMP('2025-01-01');

DELETE FROM mdl_logstore_standard_log

WHERE timecreated < UNIX_TIMESTAMP('2025-01-01')

LIMIT 50000;

OPTIMIZE TABLE mdl_logstore_standard_log;

SHOW VARIABLES LIKE 'innodb_file_per_table';

ANALYZE TABLE mdl_logstore_standard_log;

Como bloquear dominio y apuntar a un subdominio con usuario y clave en Cloud Panel AWS

Pasos para  bloquear Dominio y apuntar a un subdominio con usuario y clave en Cloud Panel AWS

1️⃣ DNS (SiteGround)

• Crear subdominio nuevo (ej: subdominio.abc.com)

• Apuntarlo a la misma IP del servidor AWS

2️⃣ CloudPanel / Nginx

En security activar basic authentication y crear el usuario con contraseña encriptada

En el mismo site:

• server_name incluye:

  dominio.abc.com subdominio.abc.com
  

• Bloquear dominio viejo:

  if ($host = "dominio.abc.com") {
    return 403;
  }
  

• Proteger acceso (Basic Auth):

  auth_basic "Acceso restringido";
  auth_basic_user_file /etc/nginx/.htpasswd;
  

• Añadir noindex:

  add_header X-Robots-Tag "noindex, nofollow" always;

3️⃣ Dónde va la app

• Ambos dominios apuntan a la misma carpeta del proyecto

• No duplicar archivos

• No crear otra instancia

4️⃣ Probar

• Dominio viejo → 403

• Subdominio nuevo → pide usuario/clave

• Sin login → no se carga nada

• Google → no indexa

RECORDATORIO IMPORTANTE

• Esto protege el acceso, no el código del front

• Un usuario autorizado siempre puede ver el JS

• Para proteger el producto, es necesario crear backend

Flujo para Aceptar presupeusto en Holded

El flujo cuando el presupuesto pasa a aceptado: 

Presupuesto → Convertir a factura

 Factura aprobada dando a guardar

Restringir por IP aplicativos en Nginx (muy fácil y eficaz)

 

Restringir por IP (muy fácil y eficaz)

Si el cliente accede desde IPs concretas:

location / {
    allow 123.123.123.123;   # IP del cliente
    allow 111.111.111.111;   # otra IP
    deny all;
}

Restaurar página con archivo .wpress con all in onw migration

 

Ruta exacta para subir tu .wpress por FTP

1. Conéctate a tu hosting por FTP (ejemplo con FileZilla).

2. Ve a la carpeta donde está tu WordPress (normalmente /public_html/ o /www/).

3. Entra en:

/wp-content/ai1wm-backups/

👉 Si la carpeta no existe, créala manualmente con ese nombre exacto:
ai1wm-backups

4. Sube tu archivo .wpress completo dentro de esa carpeta.

---

🔄 Restaurar la copia desde el admin

1. Ve a tu WordPress admin → All-in-One WP Migration → Copias de seguridad.

2. Verás tu archivo .wpress en la lista automáticamente.

3. Haz clic en Restaurar.

4. El plugin reemplazará todo tu WordPress (archivos, base de datos, plugins, temas).

⚠️ Nota: la versión gratuita de All-in-One WP Migration a veces bloquea restauraciones grandes (>512 MB).

• Si tu archivo pesa más, necesitas el Unlimited Extension o que tu hosting tenga esa versión habilitada.

Mensaje para Linkedin

 ¡Hola (Nombre) Me encanta la tecnología y el impacto de (nombre empresa). Me gustaría formar parte de su equipo. ¿Podemos hablar sobre oportunidades? 😊🚀

Prompt para evaluar el código con IA en Chatgpyt

Prompt para evaluar el código con IA en Chatgpyt:

- Buenas prácticas de Moodle

- Seguridad

- Compatibilidad con auditoría (IA, estructura, claridad)

- Código robusto y mantenible

Comandos docker para subir cambios en git en servidor o en local

git pull 

docker ps -a

docker stop vue-app Detiene proceso

docker rm vue-app  Borrar

docker image

docker rmi <id imagen>

docker-compose build --no-cache Reconstruye desde cero SIN CACHÉ

docker-compose up -d lanzar contenedores

docker image prune -f   cache para limpiar  los build anteriores

Cómo instalar apps en Odoo

Para instalar una aplicación en Odoo en un servidor, 

primero debes ubicar la carpeta de addons de Odoo

luego colocar el módulo (descomprimido) en esa carpeta.

Reinicia el servicio de Odoo sudo systemctl restart odoo 

Activa el modo desarrollador, y finalmente, actualiza la lista de aplicaciones desde la interfaz de Odoo para que la nueva aplicación aparezca y puedas instalarla. (a veces no sale con el nombre exacto y hay que buscarlo en  todas las app sin filtro)

Pasos detallados:

1. Localizar la carpeta de addons:

La ubicación de la carpeta de addons puede variar dependiendo de tu configuración, pero generalmente se encuentra dentro del directorio de instalación de Odoo. 

2. Copiar el módulo:

Descarga el módulo que deseas instalar (generalmente en formato zip) y descomprímelo. Luego, copia la carpeta del módulo a la carpeta de addons de Odoo. 

3. Reiniciar el servicio Odoo:

Detén y reinicia el servicio Odoo para que detecte el nuevo módulo. La forma de hacerlo dependerá de tu sistema operativo y configuración. 

4. Activar el modo desarrollador:

En la interfaz de Odoo, ve a "Ajustes" (o "Configuración") y activa el "Modo Desarrollador". 

5. Actualizar la lista de aplicaciones:

En la sección "Aplicaciones", haz clic en "Actualizar lista de aplicaciones". 

6. Instalar el módulo:

Busca el módulo recién instalado en la lista de aplicaciones y haz clic en "Instalar".   en _manifest__.py se encuentra el nombre de la app

Como hacer un login de google en Shopify

📄 Paso 2: Editar el tema Dawn (login.liquid)

Ve a tu panel Shopify:

1. Online Store → Themes → “Dawn” → Actions → Edit Code

2. Abre el archivo: sections/main-login.liquid o templates/customers/login.liquid

3. Agrega este código justo debajo del formulario o donde prefieras mostrar el botón:

<div id="g_id_onload"
     data-client_id="TU_CLIENT_ID_DE_GOOGLE"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>

<div style="width: 100%; display: flex; justify-content: center; align-items: center; ">
  <div class="g_id_signin"
       data-type="standard"
       data-size="large"
       data-theme="outline"
       data-text="sign_in_with"
       data-shape="rectangular"
       data-logo_alignment="left"
       >
  </div>
</div>


<script src="https://accounts.google.com/gsi/client" async defer></script>

<script>
  function handleCredentialResponse(response) {
    // Decodificamos el token JWT
    const token = response.credential;
    const payload = JSON.parse(atob(token.split('.')[1]));
    
    const email = payload.email;
    const name = payload.name;

    // Guardar temporalmente en localStorage
    localStorage.setItem("google_email", email);
    localStorage.setItem("google_name", name);

    // Redirigir al registro
    window.location.href = "/account/register";
  }
</script>

---

🧩 Paso 3: Prefill en /account/register (opcional)

1. Edita el archivo customers/register.liquid

2. Agrega este script al final del archivo:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const email = localStorage.getItem("google_email");
    const name = localStorage.getItem("google_name");

    if (email) {
      const emailField = document.querySelector('input[name="customer[email]"]');
      if (emailField) emailField.value = email;
    }

    if (name) {
      const firstNameField = document.querySelector('input[name="customer[first_name]"]');
      if (firstNameField) firstNameField.value = name.split(" ")[0];

      const lastNameField = document.querySelector('input[name="customer[last_name]"]');
      if (lastNameField) lastNameField.value = name.split(" ").slice(1).join(" ");
    }
  });
</script>

Esto rellena automáticamente el formulario de registro con el nombre y correo que el usuario usó en su cuenta de Google.

---

✅ Resultado final

• El usuario ve el botón “Sign in with Google”

• Al hacer clic:

  • Se captura su nombre y correo electrónico

  • Se le redirige a /account/register

  • Se rellena el formulario automáticamente

• El usuario solo necesita poner una contraseña y hacer clic en "Crear cuenta"