237. SaaS de facturas, programar con IA y truquitos CSS
✏️ Suscribirse
https://youtu.be/oa0QgTiK7Lw
En este episodio 237 de Negocios y WordPress repasamos las novedades más importantes del ecosistema digital: las actualizaciones de Bricks con componentes convertibles a bloques de Gutenberg, las nuevas funcionalidades de ChatGPT (agentes, conectores, compras directas), la comparativa entre Billing y Factura Directa para facturación online, cómo crear un mini CRM con Gravity Forms usando IA, y algunos trucos de CSS para mejorar tus diseños web.
También hablamos del nuevo curso de WordPress desde cero, próximas WordCamps y el flujo de trabajo para crear shorts de forma eficiente.
Nuevo curso de WordPress desde cero para profesionales
Yannick está en plena producción de un curso de WordPress desde cero orientado a profesionales, que será el más completo de YouTube. El curso incluye:
Fundamentos de HTML y CSS
Diseño de temas a medida
Funciones PHP y código personalizado
Inteligencia artificial aplicada a WordPress
Gutenberg, Elementor, Bricks y otros page builders
Sistemas de diseño con Tailwind
Plantillas de WooCommerce
Roles, formularios, automatizaciones, SEO, seguridad y optimización
El curso tendrá unas 50 lecciones (no son cortas) y estará disponible primero en La Máquina de Brandy para miembros de la comunidad. Cuando lleve unas 30 lecciones publicadas, comenzará a subirse semanalmente a YouTube.
Novedades en Bricks: La beta que trae funcionalidades potentes
Componentes de Bricks convertibles a bloques de Gutenberg
Una de las novedades más destacadas es la posibilidad de convertir componentes de Bricks en bloques de Gutenberg con un simple clic derecho. Esto permite que los clientes puedan usar elementos avanzados directamente desde el editor de bloques sin tocar Bricks.
Biblioteca de templates
Bricks incluye ahora una colección de templates predefinidos muy espartanos, en grises y con lo básico. No son tan elaborados como los de otras bibliotecas, pero sirven como punto de partida.
Gestión de queries personalizadas
Ahora puedes crear, nombrar y categorizar queries para reutilizarlas en diferentes partes del proyecto. Además, incluye un editor visual para queries de APIs donde puedes ver una vista previa de los objetos JSON, desplegarlos y configurar parámetros de filtrado.
Formularios con creación de posts desde frontend
Los formularios nativos de Bricks ahora permiten crear y editar posts desde el frontend, reduciendo la necesidad de plugins adicionales.
Generador de tipografía fluida
Bricks incluye un generador de tipografía fluida que permite definir rápidamente variables CSS para diferentes tamaños de texto, con vista previa en tiempo real. Falta un generador similar para espaciado, pero es un gran avance.
ChatGPT: Nuevas funcionalidades y actualizaciones
Compras directas en ChatGPT
OpenAI ha lanzado la API Instant Checkout, que permite realizar compras directamente desde el chat. Está integrada con Shopify y desarrollada junto a Stripe, y ambas plataformas se llevan comisión por las ventas.
Agentes y nuevas capacidades
ChatGPT Plus ahora incluye un botón de "Agentes" que permite realizar tareas más autónomas, como navegar por webs, leer archivos o ejecutar acciones complejas.
Conectores con Google Calendar y Gmail
Se han añadido conectores con Google Calendar y Gmail, facilitando la automatización de tareas cotidianas.
Grabación de reuniones
Nueva funcionalidad para grabar reuniones y obtener resúmenes ejecutivos automáticos, aunque todavía está en fase inicial.
Modo voz y pantalla compartida en móvil
Ahora puedes mostrar la cámara y la pantalla en tiempo real desde el móvil, ideal para soporte técnico remoto.
Proyectos en ChatGPT
La función de proyectos permite subir documentación común y mantener conversaciones organizadas por temas, evitando mezclar contextos.
Programar en Cursor con la extensión Codex (OpenAI)
Últimamente Elías está usando bastante Cursor para programar, y alguna que otra vez se le termina el uso gratuito. Así que se decidió a probar la extensión de OpenAI, que tiene una funcionalidad similar. La ha estado probando con la clave de API, pero ahora que tiene cuenta de ChatGPT Plus ha podido conectarse con su cuenta y así ahorrar consumo a través de la API.
La extensión funciona de forma bastante similar al chat integrado de Cursor, pero no te habilita el autocompletado como hace nativamente. No obstante, tiene una funcionalidad de "autocontexto" que permite enviar los ficheros abiertos y cualquier otro del proyecto si el agente lo necesita. Y por cierto, también te permite elegir el modelo, el modo de uso (chat o full access) y consultar el uso de tokens.
Puede ser una buena alternativa si dispones de cuenta de pago de ChatGPT (o no te importa usar la API key) y quieres evitar pagar por un plan de suscripción de Cursor.
Facturación online: De Billing a Factura Directa
Por qué el cambio de Billing a Factura Directa
Elías se cambió de Billing a Factura Directa principalmente por:
Falta de integración con Make: Billing prometía compatibilidad con Make desde hace más de un año, pero nunca se implementó.
Problemas de usabilidad: Filtros que no funcionaban correctamente (filtrar por "no cobrada" mostraba también facturas anuladas).
Proceso de baja complicado: Requiere confirmación por email y elimina todo el acceso histórico inmediatamente.
Ventajas de Factura Directa
Integración con Zapier (y próximamente Make)
Interfaz rápida basada en Material Design
Plan gratuito hasta 5 clientes distintos
Más opciones de gestión: Apartado de bancos, métodos de pago y configuraciones avanzadas
Inconvenientes de Factura Directa
Para cobrar una factura hay que seleccionarla primero en la lista y luego ir a un menú desplegable, en lugar de tener un botón directo dentro de la factura.
Mini CRM con Gravity Forms y ChatGPT
Elías creó un mini plugin con ayuda de ChatGPT que unifica todos los envíos de Gravity Forms en una lista de contactos tipo CRM. El plugin:
Muestra una lista de contactos con nombre y email
Al hacer clic en un contacto, muestra su historial de envíos
Unifica envíos de diferentes formularios por email
Se creó en menos de una hora con ayuda de IA (Cursor o Codex)
Incluye buscador, paginación y usa las tablas nativas de WordPress
Es un ejemplo perfecto de cómo la IA reduce el esfuerzo para crear funcionalidades personalizadas que antes no haríamos por falta de tiempo.
Flujo de trabajo para crear shorts de forma eficiente
Elías comparte su flujo optimizado para crear shorts del podcast:
Descript genera capítulos automáticamente al editar el podcast
Revisa los capítulos y selecciona los que tienen potencial para shorts
Crea una escena privada con los fragmentos seleccionados
Los ordena por interés y los copia a composiciones separadas
Edita cada short manualmente (recortes, transcripción corregida)
Crea plantillas de CTA (una para WordPress, otra para automatización)
Publica en Metricool (2-3 shorts por semana)
Sobre Opus Clips: Probó esta herramienta de IA para generar shorts automáticamente, pero los resultados son "una basura comparado con hacértelo tú mismo". Incluso grabando clips perfectos con inicio y final claros, no los corta bien.
Sobre Metricool: Permite elegir el frame de portada y hacer clic derecho para guardar la imagen. Está presente en eventos como DSM y Raiola, y publica estudios anuales muy interesantes sobre redes sociales en su blog.
Próximas WordCamps y eventos
WordCamp Galicia (Pontevedra)
Yannick asistirá este fin de semana a la WordCamp Galicia en Pontevedra, donde impartirá un taller práctico sobre cómo montar un proyecto formativo con WordPress:
Contenidos restringidos por compra
Sistema de cursos sin plugins de pago
Opción con código + IA o con plugins como ACF
El taller se adaptará a las preferencias de los asistentes (todo con código, híbrido o con plugins).
WordCamp San José (Costa Rica)
El 1 de noviembre, Yannick estará en la WordCamp San José con una ponencia titulada "Cómo ser arquitecto de páginas web", donde hablará de los diferentes roles en el desarrollo web usando el símil de construir una tienda física:
El empleado (usa lo que tiene)
El albañil/obrero (usa builders sin guía previa)
El arquitecto (planifica estructura y diseño)
WordCamp Valencia - WordPress Tech Congress
Esa misma semana, Yannick moderará las Lightning Talks en Valencia, charlas de 10 minutos sobre SEO, marketing y WordPress. También presentará "El Semáforo WordPress", una dinámica interactiva donde el público responde con tarjetas (roja, amarilla, verde) a dilemas del día a día con WordPress y clientes.
Trucos de CSS y buenas prácticas para diseño web
Clases para CTAs principales, secundarios y terciarios
Es recomendable tener diferentes niveles de CTAs (principal, secundario, terciario) para jerarquizar la importancia visual de los botones en tus diseños.
Clase de lectura con max-width
Usar una clase de lectura con max-width: 80ch mejora la legibilidad de los textos largos, evitando líneas demasiado anchas que dificultan la lectura.
Padding en ems para coherencia visual
Usar padding en em en lugar de píxeles hace que el espaciado interno se adapte automáticamente al tamaño de fuente, manteniendo proporciones coherentes en todos los tamaños.
Grids automáticos con tamaños mínimos
Tener 2-3 grids predefinidos con auto-fit y tamaños mínimos (300px, 230px) cubre la mayoría de necesidades de layout sin complicaciones.
Contenedores con versiones normales y anchas
Definir un contenedor normal (900px) y una versión wide facilita la consistencia visual en toda la web.
Clase full-height con fallback
Usar 100dvh para altura completa es moderno, pero conviene añadir un fallback con 100vh para navegadores antiguos (especialmente Firefox).
JetFormBuilder: Pagos recurrentes con Stripe
JetFormBuilder ha añadido finalmente la posibilidad de pagos recurrentes con Stripe (ya los tenía con PayPal). Esto facilita crear sistemas de membresía o suscripciones sin necesidad de WooCommerce, solo con el plugin de formularios y algunas configuraciones estructurales.
Conclusión: Herramientas que evolucionan, flujos que mejoran
Como ves, el ecosistema digital no para de evolucionar. Desde las novedades en Bricks y ChatGPT, pasando por la gestión de facturación online, la automatización con IA y los trucos de diseño web, estar al día marca la diferencia. ¿Qué herramienta te ha sorprendido más? ¿Usas alguna de estas en tu día a día? Nos encantaría conocer tu experiencia.
España