Comunidad IA de Código Abierto

Comunidad IA de Código Abierto

La secretaría de Estado de Digitalización e Inteligencia Artificial ha anunciado la creación de la comunidad IA de Código Abierto.

Esta comunidad aspira a democratizar el acceso a la Inteligencia Artificial, fomentar la innovación colectiva y evitar que el futuro digital quede en manos de unos pocos. Con esta iniciativa se logra una IA mas accesible para todos, y su puesta a disposición al servicio del interés público.

Su propósito es actuar como punto de encuentro del ecosistema de la IA en España, donde se reúnen desarrolladores, investigadores, empresas y Administración Pública

Objetivos de la Comunidad IA de Código Abierto:

  • Canalizar el liderazgo español en la adaptación e integración de soluciones de IA.
  • Crear un grupo de talento (talent pool) en IA

El punto de entrada será la página del Ministerio para la Transformación Digital y de la Función Pública.

Para fomentar el carácter participativo de la iniciativa se han abierto tres procesos de consulta:

Retos económicos y sociales que podrían solventarse con la IA, y las herramientas tecnológicas que podrían ser útiles para esta comunidad. Visita Comunidad de IA open-source de España.

Se propone crear una red de embajadores de la Comunidad IA de Código Abierto de manera que ayuden a organizar encuentros y retos y avanzar en objetivos. Visita Registro Público embajador comunidad.

El tercero se centra en los compromisos de entidades publico-privadas, dispuestas a realizar apoyar el despliegue efectivo de la comunidad. Visita Consulta Empresas

Puntos fuertes de la Comunidad IA

  • Modelos de IA de código abierto.
  • Modelos de traducción automática y multilingües.
  • Conjunto de datos (datasets). Corpus de texto, voz y traducción automática.
  • Recursos para evaluación y entrenamiento.
  • Computación pública, basadas en redes existentes de código abierto.
  • Hackáthones, programa de formación aplicada y roadshows universitarios.

Actividades participativas

La primera actividad de la Comunidad será el prompt-a-thon Desafío ALIA: Creando una comunidad de IA en España’, en el marco del Programa Nacional de Algoritmos Verdes.

El desafío propone a los participantes experimentar, aprender y contribuir al desarrollo de ‘prompts’ para una IA más eficiente gracias al modelo ALIA-40B.

ALIA es la nueva infraestructura pública de inteligencia artificial en español y lenguas cooficiales, y un prompt-a-thon es una competición colaborativa inspirada en los hackathons donde se crean y optimizan instrucciones (prompts) para modelos de IA generativa.

🌐 ¿Qué es ALIA?

  • Infraestructura pública de IA: ALIA es un proyecto pionero impulsado por el Gobierno de España y la Unión Europea para ofrecer modelos de lenguaje abiertos y transparentes.
  • Lenguas soportadas: Está diseñado para funcionar en español y lenguas cooficiales (catalán/valenciano, euskera y gallego).
  • Objetivo principal:
    • Reducir la dependencia de grandes tecnológicas extranjeras.
    • Potenciar el uso de datos locales y el patrimonio lingüístico.
    • Garantizar soberanía tecnológica y fomentar la innovación en IA.
  • Ejemplo práctico: ALIA ya se está utilizando en organismos públicos y está disponible para investigadores, empresas y ciudadanos, como un recurso abierto para crear aplicaciones y servicios.

💡 ¿Qué es un Prompt-a-thon?

  • Definición: Un prompt-a-thon es un evento colaborativo, similar a un hackathon, pero centrado en la creación y optimización de prompts (instrucciones que guían a los modelos de IA generativa).
  • Dinámica:
    • Los participantes trabajan en equipos multidisciplinares (técnicos, creativos, de negocio).
    • Se diseñan prompts para que la IA genere textos, imágenes u otros contenidos.
    • Se fomenta la creatividad, el aprendizaje práctico y la experimentación.
  • Ejemplo en España: La Secretaría de Estado de Digitalización lanzó el Prompt-a-thon ALIA, un reto abierto para experimentar con ALIA 40B, la última versión del modelo público español.
    • No requiere conocimientos técnicos avanzados.
    • Busca descubrir cómo los ciudadanos pueden contribuir a mejorar la IA con creatividad y diversidad cultural.

Ejemplos de Prompts en Prompt-a-thon ALIA

  • Creatividad literaria  “Escribe un poema en gallego sobre la importancia de cuidar los bosques, con un tono esperanzador.”
  • Aplicaciones educativas  “Explica la fotosíntesis en euskera como si fueras un profesor de primaria, usando ejemplos sencillos.”
  • Cultura y diversidad  “Genera una historia corta en catalán ambientada en una fiesta popular, destacando valores de cooperación.”
  • Innovación práctica  “Redacta un manual breve en español para enseñar a personas mayores cómo usar una aplicación de mensajería.”
  • Humor y entretenimiento  “Inventa chistes en castellano que jueguen con palabras relacionadas con la tecnología y la vida cotidiana.”

¿Qué se busca en un Prompt-a-thon?

  • Creatividad: que el prompt saque lo mejor del modelo.
  • Diversidad lingüística: aprovechar las lenguas cooficiales.
  • Aplicabilidad: que las respuestas puedan servir en educación, cultura, administración o entretenimiento.
  • Colaboración: los equipos comparten ideas y mejoran los prompts entre todos.

En resumen

  • ALIA: la primera IA pública española, abierta y multilingüe, que refuerza la soberanía tecnológica.
  • Prompt-a-thon: un evento participativo para aprender y divertirse creando instrucciones que hacen que la IA genere respuestas útiles y creativas.

Visita: https://www.ee3.es/que-es-un-prompt/ para más información.

Fuente original: Ministerio para la Transformación Digital y de la Función Pública.

🐧 Cómo crear un subdominio en Linux (Apache)

🐧 Cómo crear un subdominio en Linux (Apache)

Crear un subdominio en Linux requiere acceso al servidor web (como Apache o Nginx) y al sistema de archivos del servidor. Aquí te explico cómo hacerlo paso a paso 🧑‍💻:

1. Crear el directorio del subdominio

bash

sudo mkdir -p /var/www/subdominio.midominio.com/public_html

2. Asignar permisos

bash

sudo chown -R $USER:$USER /var/www/subdominio.midominio.com/public_html

3. Crear el archivo de configuración del subdominio

bash

sudo nano /etc/apache2/sites-available/subdominio.midominio.com.conf

4. Agregar contenido al archivo

apache

<VirtualHost *:80>
    ServerAdmin admin@midominio.com
    ServerName subdominio.midominio.com
    DocumentRoot /var/www/subdominio.midominio.com/public_html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

5. Activar el sitio

bash

sudo a2ensite subdominio.midominio.com.conf

6. Reiniciar Apache

bash

sudo systemctl restart apache2

7. Configurar DNS

En tu proveedor de dominio, crea un registro tipo A o CNAME apuntando subdominio.midominio.com a la IP de tu servidor.

Crear un subdominio en Linux usando Nginx 🐧:

1. Crear el directorio del subdominio

bash

sudo mkdir -p /var/www/subdominio.midominio.com/html

2. Asignar permisos

bash

sudo chown -R $USER:$USER /var/www/subdominio.midominio.com/html

3. Crear el archivo de configuración

bash

sudo nano /etc/nginx/sites-available/subdominio.midominio.com

4. Agregar contenido al archivo

nginx

server {
    listen 80;
    server_name subdominio.midominio.com;

    root /var/www/subdominio.midominio.com/html;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

5. Activar el subdominio

bash

sudo ln -s /etc/nginx/sites-available/subdominio.midominio.com /etc/nginx/sites-enabled/

6. Probar la configuración

bash

sudo nginx -t

7. Reiniciar Nginx

bash

sudo systemctl restart nginx

8. Configurar el DNS

En el panel de tu proveedor de dominio, crea un registro tipo A apuntando subdominio.midominio.com a la IP de tu servidor.

script automatizado en Bash para crear subdominios en Nginx fácilmente. Solo necesitas ejecutar este script en tu servidor Linux y seguir las instrucciones:

Script: crear_subdominio_nginx.sh

bash

#!/bin/bash

echo "🔧 Creación automática de subdominio en Nginx"

read -p "Introduce el nombre del subdominio (ej. blog): " SUBDOMINIO
read -p "Introduce el dominio principal (ej. midominio.com): " DOMINIO

FULL_DOMAIN="$SUBDOMINIO.$DOMINIO"
ROOT_DIR="/var/www/$FULL_DOMAIN/html"

# Crear directorio
sudo mkdir -p $ROOT_DIR
sudo chown -R $USER:$USER $ROOT_DIR

# Crear archivo de configuración
CONFIG_FILE="/etc/nginx/sites-available/$FULL_DOMAIN"
sudo tee $CONFIG_FILE > /dev/null <<EOF
server {
    listen 80;
    server_name $FULL_DOMAIN;

    root $ROOT_DIR;
    index index.html index.htm;

    location / {
        try_files \$uri \$uri/ =404;
    }
}
EOF

# Activar sitio
sudo ln -s $CONFIG_FILE /etc/nginx/sites-enabled/

# Probar y reiniciar
sudo nginx -t && sudo systemctl restart nginx

echo "✅ Subdominio $FULL_DOMAIN creado y activado."
echo "📁 Puedes subir contenido a: $ROOT_DIR"

¿Qué hace este script?

  • Te pide el nombre del subdominio y el dominio principal.
  • Crea el directorio raíz del subdominio.
  • Genera el archivo de configuración de Nginx.
  • Lo activa y reinicia Nginx.

Versión automatizada para Apache, similar a la que hicimos para Nginx. Con este script podrás crear subdominios en tu servidor Linux con Apache de forma rápida:

Script: crear_subdominio_apache.sh

bash

#!/bin/bash

echo "🔧 Creación automática de subdominio en Apache"

read -p "Introduce el nombre del subdominio (ej. blog): " SUBDOMINIO
read -p "Introduce el dominio principal (ej. midominio.com): " DOMINIO

FULL_DOMAIN="$SUBDOMINIO.$DOMINIO"
ROOT_DIR="/var/www/$FULL_DOMAIN/public_html"

# Crear directorio
sudo mkdir -p $ROOT_DIR
sudo chown -R $USER:$USER $ROOT_DIR

# Crear archivo de configuración
CONFIG_FILE="/etc/apache2/sites-available/$FULL_DOMAIN.conf"
sudo tee $CONFIG_FILE > /dev/null <<EOF
<VirtualHost *:80>
    ServerAdmin admin@$DOMINIO
    ServerName $FULL_DOMAIN
    DocumentRoot $ROOT_DIR
    ErrorLog \${APACHE_LOG_DIR}/$FULL_DOMAIN-error.log
    CustomLog \${APACHE_LOG_DIR}/$FULL_DOMAIN-access.log combined
</VirtualHost>
EOF

# Activar sitio
sudo a2ensite $FULL_DOMAIN.conf

# Probar y reiniciar
sudo apache2ctl configtest && sudo systemctl reload apache2

echo "✅ Subdominio $FULL_DOMAIN creado y activado."
echo "📁 Puedes subir contenido a: $ROOT_DIR"

¿Qué hace este script?

  • Te pide el nombre del subdominio y el dominio principal.
  • Crea el directorio raíz del subdominio.
  • Genera el archivo de configuración de Apache.
  • Lo activa y reinicia Apache.
Instalar Roundcube en un VPS con Debian 12

Instalar Roundcube en un VPS con Debian 12

Para instalar Roundcube en un VPS con Debian 12 sin afectar tus sitios WordPress, debes usar una configuración separada dentro de tu servidor web (Apache o Nginx), asegurarte de no sobrescribir archivos de configuración existentes y mantener cada sitio en su propio VirtualHost o bloque de servidor.

🛠️ Pasos para instalar Roundcube en Debian 12 sin romper WordPress

1. Requisitos previos

  • VPS con Debian 12 actualizado.
  • Servidor web funcionando (Apache o Nginx).
  • PHP (preferiblemente PHP 8.2), MySQL/MariaDB, y IMAP server (como Dovecot).
  • Sitios WordPress ya configurados en sus propios VirtualHosts.

2. Instalar Roundcube desde repositorio

bash

sudo apt update
sudo apt install roundcube roundcube-core roundcube-mysql roundcube-plugins roundcube-plugins-extra

Esto instalará Roundcube y sus dependencias sin tocar tus sitios WordPress.

3. Configurar VirtualHost separado para Roundcube (Apache)

Crea un archivo como /etc/apache2/sites-available/roundcube.conf:

apache

<VirtualHost *:80>
    ServerName webmail.tudominio.com
    DocumentRoot /var/lib/roundcube

    <Directory /var/lib/roundcube>
        Options +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/roundcube_error.log
    CustomLog ${APACHE_LOG_DIR}/roundcube_access.log combined
</VirtualHost>

Activa el sitio:

bash

sudo a2ensite roundcube.conf
sudo systemctl reload apache2

⚠️ No modifiques los VirtualHosts de tus sitios WordPress. Mantén cada dominio en su propio archivo de configuración.

4. Configurar base de datos

Roundcube necesita una base de datos MySQL/MariaDB:

bash

sudo mysql -u root -p
CREATE DATABASE roundcube CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
GRANT ALL PRIVILEGES ON roundcube.* TO 'roundcubeuser'@'localhost' IDENTIFIED BY 'tu_contraseña_segura';
FLUSH PRIVILEGES;
EXIT;

5. Finalizar instalación desde navegador

Accede a http://webmail.tudominio.com/installer y sigue el asistente. Una vez terminado, elimina el instalador:

bash

sudo rm -rf /var/lib/roundcube/installer

6. Seguridad y compatibilidad

  • Asegúrate de que PHP y Apache/Nginx estén configurados correctamente para coexistir con WordPress.
  • Usa HTTPS con Let’s Encrypt para proteger el acceso a Roundcube.
  • Configura fail2ban y firewall para proteger tu servidor.

✅ Consejos para no romper WordPress

  • Nunca edites archivos como /etc/apache2/sites-enabled/000-default.conf si WordPress ya está funcionando.
  • Usa VirtualHosts separados para cada dominio y subdominio.
  • Verifica que no haya conflictos de puertos o rutas (DocumentRoot).
  • Haz una copia de seguridad antes de instalar Roundcube.

Configurar el subdominio webmail.tudominio.com

🌐 Crear subdominio para Roundcube

  1. Añade el subdominio en tu DNS:
    • En tu panel de control DNS, crea un registro tipo A o CNAME para webmail.tudominio.com apuntando a tu VPS.
  2. Configura VirtualHost para Apache (si usas Apache): Crea /etc/apache2/sites-available/webmail.conf:apache<VirtualHost *:80> ServerName webmail.tudominio.com DocumentRoot /var/lib/roundcube <Directory /var/lib/roundcube> Options +FollowSymLinks AllowOverride All Require all granted </Directory> ErrorLog ${APACHE_LOG_DIR}/webmail_error.log CustomLog ${APACHE_LOG_DIR}/webmail_access.log combined </VirtualHost> Luego activa el sitio:bashsudo a2ensite webmail.conf sudo systemctl reload apache2

🔐 Instalar certificado SSL con Let’s Encrypt

  1. Instala Certbot:bashsudo apt install certbot python3-certbot-apache
  2. Ejecuta Certbot para el subdominio:bashsudo certbot --apache -d webmail.tudominio.com
  3. Verifica que el acceso a https://webmail.tudominio.com funcione correctamente.

🧪 Verifica que WordPress no se vea afectado

  • Asegúrate de que cada dominio WordPress tenga su propio VirtualHost y no compartan rutas ni puertos con Roundcube.
  • No edites 000-default.conf si tus sitios WordPress ya están funcionando.
  • Usa apache2ctl -S para ver el mapa de VirtualHosts activos y confirmar que no hay conflictos.

Configuración completa para usar Nginx

1. Crear bloque de servidor para Roundcube

Edita o crea el archivo /etc/nginx/sites-available/webmail.tudominio.com:

nginx

server {
    listen 80;
    server_name webmail.tudominio.com;

    root /var/lib/roundcube;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* ^/(README|INSTALL|LICENSE|CHANGELOG|UPGRADING)$ {
        deny all;
    }

    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    error_log /var/log/nginx/roundcube_error.log;
    access_log /var/log/nginx/roundcube_access.log;
}

2. Activar el sitio

bash

sudo ln -s /etc/nginx/sites-available/webmail.tudominio.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

🔐 Instalar SSL con Let’s Encrypt

  1. Instala Certbot para Nginx:

bash

sudo apt install certbot python3-certbot-nginx
  1. Ejecuta Certbot:

bash

sudo certbot --nginx -d webmail.tudominio.com
  1. Verifica acceso a https://webmail.tudominio.com

✅ Verifica que WordPress no se vea afectado

  • Tus sitios WordPress deben tener sus propios bloques server en Nginx, como tudominio.com o blog.tudominio.com.
  • No uses default_server en el bloque de Roundcube.
  • Usa nginx -T para ver toda la configuración activa y confirmar que no hay conflictos.
Diferencia entre una web HTML y una web PHP

Diferencia entre una web HTML y una web PHP

Una página web hecha solo con HTML es estática, mientras que una página web en PHP puede ser dinámica e interactiva. Aquí te explico las diferencias clave:

Diferencias entre HTML y PHP

CaracterísticaHTML (estático)PHP (dinámico)
🧱 Tipo de lenguajeDe marcadoDe programación del lado del servidor
🔄 InteractividadNo puede procesar formularios ni datosPuede manejar formularios, sesiones, bases de datos
📦 Generación de contenidoEl contenido es fijoEl contenido puede cambiar según el usuario o la base de datos
🗃️ Acceso a base de datosNo tiene capacidadPuede conectarse a MySQL, PostgreSQL, etc.
🔐 SeguridadNo puede proteger páginas ni gestionar usuariosPuede validar usuarios, proteger rutas, cifrar datos
🧠 Lógica de negocioNo permite lógicaPermite condicionales, bucles, funciones
📄 Extensión de archivo.html.php
🧰 Uso típicoLanding pages, portafolios simplesWebs profesionales, tiendas online, blogs, sistemas

🧪 Ejemplo comparativo

HTML simple:

html

<h1>Bienvenido</h1>
<p>Hoy es martes.</p>

PHP dinámico:

php

<h1>Bienvenido</h1>
<p>Hoy es <?php echo date("l"); ?>.</p>

➡️ El HTML siempre mostrará “Hoy es martes”, mientras que el PHP mostrará el día real según el servidor.

🧠 ¿Cuándo usar cada uno?

  • HTML: Ideal para sitios informativos simples, sin interacción.
  • PHP: Recomendado para sitios que requieren lógica, autenticación, formularios, paneles de control, etc.

Aquí tienes el código completo de una página web profesional en PHP con el estilo CSS integrado directamente en el archivo index.php. Esto facilita la visualización sin depender de archivos externos:

✅ index.php con CSS embebido

php

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Web Profesional</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      background-color: #f9f9f9;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 1em;
      text-align: center;
    }

    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 2em;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    main {
      padding: 2em;
      text-align: center;
    }

    .boton {
      display: inline-block;
      padding: 0.5em 1em;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 1em;
    }

    footer {
      background-color: #ecf0f1;
      text-align: center;
      padding: 1em;
      margin-top: 2em;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Web Profesional</h1>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Acceso</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Soluciones digitales para tu negocio</h2>
      <p>Desarrollamos sitios web modernos, seguros y optimizados para buscadores.</p>
      <a href="#" class="boton">Solicita presupuesto</a>
    </section>
  </main>

  <footer>
    <p>&copy; <?php echo date("Y"); ?> Mi Web Profesional. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Este archivo PHP ya incluye todo lo necesario para verse como una página profesional. Puedes guardarlo como index.php y abrirlo en tu servidor local (XAMPP, WAMP, etc.).

ara crear una página web profesional en PHP, necesitas una arquitectura modular, conexión a base de datos, seguridad, y diseño responsivo. Un buen ejemplo es una tienda online o sistema de gestión con PHP, MySQL, HTML, CSS y JavaScript.

Aquí tienes una estructura profesional básica con componentes clave:

🧱 Estructura de proyecto profesional

Código

/miweb-profesional
│
├── config/
│   └── db.php              # Conexión a base de datos
│
├── includes/
│   ├── header.php          # Encabezado común
│   ├── footer.php          # Pie de página común
│   └── functions.php       # Funciones reutilizables
│
├── public/
│   ├── index.php           # Página principal
│   ├── contacto.php        # Formulario de contacto
│   └── login.php           # Autenticación
│
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── main.js
│
└── README.md

🔐 config/db.php – Conexión segura a MySQL

php

<?php
$host = 'localhost';
$db = 'miweb';
$user = 'usuario';
$pass = 'contraseña';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Error de conexión: " . $e->getMessage());
}

🧠 includes/functions.php – Funciones reutilizables

php

<?php
function limpiarEntrada($data) {
    return htmlspecialchars(strip_tags(trim($data)));
}

📄 public/index.php – Página principal

php

<?php include('../includes/header.php'); ?>
<main>
  <h1>Bienvenido a Mi Web Profesional</h1>
  <p>Soluciones digitales con PHP y MySQL.</p>
</main>
<?php include('../includes/footer.php'); ?>

📄 public/contacto.php – Formulario con validación

php

<?php
include('../includes/header.php');
include('../config/db.php');

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = limpiarEntrada($_POST["nombre"]);
    $email = limpiarEntrada($_POST["email"]);
    $mensaje = limpiarEntrada($_POST["mensaje"]);

    $stmt = $pdo->prepare("INSERT INTO mensajes (nombre, email, mensaje) VALUES (?, ?, ?)");
    $stmt->execute([$nombre, $email, $mensaje]);

    echo "<p>Mensaje enviado correctamente.</p>";
}
?>

<form method="post">
  <input type="text" name="nombre" placeholder="Tu nombre" required>
  <input type="email" name="email" placeholder="Tu email" required>
  <textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
  <button type="submit">Enviar</button>
</form>

<?php include('../includes/footer.php'); ?>

🎨 assets/css/style.css – Diseño responsivo

css

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

header, footer {
  background: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

main {
  padding: 2em;
}

🛒 ¿Quieres algo más avanzado?

Puedes explorar este proyecto completo de tienda PHP avanzada en GitHub. Incluye gestión de productos, usuarios, carrito y panel de administración.

¿Te gustaría que te ayude a personalizar una plantilla profesional o integrar funciones como login, panel de control o pagos?

Popup en una entrada de WordPress

Popup en una entrada de WordPress

Como poner un Popup en una entrada de WordPress. Una forma directa y eficaz de crear un Popup (o Modal), en tu entrada de WordPress.

📄 Código paso a paso

1. Añadir el HTML del modal

Coloca este bloque en el archivo single.php de tu tema hijo, o bien mediante un hook en functions.php usando wp_footer. En este ejemplo, el modal solo se carga si la entrada tiene un ID concreto (ejemplo: 123).

php

<?php
// En functions.php o en single.php
function ee3_modal_single_entry() {
    if (is_single(123)) { // Cambia 123 por el ID de tu entrada
        ?>
        <!-- Modal HTML -->
        <div id="ee3Modal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Bienvenido a esta entrada</h2>
            <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
          </div>
        </div>

        <style>
          /* Estilos básicos del modal */
          .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
          }
          .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
          }
          .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
          }
          .close:hover {
            color: #000;
          }
        </style>

        <script>
          // Script para abrir y cerrar el modal
          document.addEventListener("DOMContentLoaded", function() {
            var modal = document.getElementById("ee3Modal");
            var span = document.getElementsByClassName("close")[0];

            // Mostrar modal al cargar la página
            modal.style.display = "block";

            // Cerrar modal al hacer clic en la X
            span.onclick = function() {
              modal.style.display = "none";
            }

            // Cerrar modal al hacer clic fuera del contenido
            window.onclick = function(event) {
              if (event.target == modal) {
                modal.style.display = "none";
              }
            }
          });
        </script>
        <?php
    }
}
add_action('wp_footer', 'ee3_modal_single_entry');

🔎 Explicación

  • is_single(123) → asegura que el modal solo se muestre en la entrada con ID 123.
  • El modal se abre automáticamente al cargar la página.
  • Se puede cerrar con la X o haciendo clic fuera del contenido.
  • Todo el código se inyecta en el footer de WordPress para no romper la estructura del tema.

📌 Conclusión: Con este snippet, tu modal aparecerá únicamente en la entrada que definas en ee3.es.

Agregarle una Imagen al Popup

Ejemplo con imagen en el modal

Dentro del bloque modal-content añade la imagen:

html

<div id="ee3Modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Bienvenido a esta entrada</h2>
    <img src="https://tusitio.com/wp-content/uploads/imagen-modal.jpg" 
         alt="Imagen ilustrativa" 
         style="max-width:100%; height:auto; margin-bottom:1rem; border-radius:8px;">
    <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
  </div>
</div>

🔎 Detalles importantes

  • src → pon la URL de la imagen que quieras mostrar. Si la subes a la biblioteca de medios de WordPress, copia la URL completa.
  • style → con max-width:100% y height:auto aseguras que la imagen sea responsive y no se desborde.
  • margin-bottom → añade espacio debajo de la imagen.
  • border-radius → opcional, para esquinas redondeadas.

📌 En Divi

  • Si usas el módulo de código de Divi, pega el bloque completo del modal con la imagen incluida.
  • Si prefieres, puedes añadir la imagen desde la biblioteca de Divi y copiar su URL en el src.
Instalar un certificado SSL gratuito de Let’s Encrypt en un VPS

Instalar un certificado SSL gratuito de Let’s Encrypt en un VPS

Para instalar un certificado SSL gratuito de Let’s Encrypt en un VPS, puedes usar herramientas como Certbot o paneles como CloudPanel o cPanel, dependiendo de tu configuración.

Aquí tienes una guía general paso a paso para hacerlo manualmente con Certbot, que es la herramienta oficial recomendada por Let’s Encrypt:

Requisitos previos

  • Un VPS con acceso root (por SSH)
  • Un nombre de dominio apuntando a la IP del VPS
  • Un servidor web instalado (como Apache o Nginx)

🔐 Instalación con Certbot (método manual)

  1. Accede a tu VPS por SSH: ssh root@tu_dominio.com
  2. Instala Certbot:

En Debian/Ubuntu: 

sudo apt update sudo apt install certbot python3-certbot-nginx

En CentOS/RHEL:

sudo yum install epel-release sudo yum install certbot python3-certbot-nginx

SOLICITA EL CERTIFICADO

Para Nginx:

sudo certbot --nginx

Para Apache:

sudo certbot --apache
  1. Sigue las instrucciones:
    • Certbot detectará tus dominios configurados y te preguntará si deseas redirigir todo el tráfico a HTTPS.
  2. Verifica la renovación automática:
    • Let’s Encrypt emite certificados válidos por 90 días.
    • Certbot instala automáticamente un cron job para renovarlos.

Puedes probarlo con:

sudo certbot renew --dry-run

Cuando hay que renovar el Certificado SSL

Los certificados de Let’s Encrypt deben renovarse cada 90 días.

Esto es una política estándar de Let’s Encrypt para mejorar la seguridad. Aquí tienes los detalles clave:

📅 Frecuencia de renovación

  • Validez: 90 días desde la emisión
  • Recomendación: Renovar alrededor del día 60 para evitar expiraciones accidentales

Renovación automática con Certbot

Si usaste Certbot para instalar el certificado, probablemente ya esté configurado para renovarse automáticamente mediante un cron job o un timer de systemd.

Puedes verificarlo ejecutando:

sudo certbot renew --dry-run

Este comando simula la renovación para confirmar que todo funciona correctamente.

⚠️ ¿Qué pasa si no se renueva?

  • El sitio web mostrará advertencias de seguridad a los visitantes
  • Los navegadores bloquearán el acceso por HTTPS
  • Podrías perder posicionamiento SEO y confianza de los usuarios