Debian 12 “Bookworm” es una distribución GNU/Linux reconocida por su estabilidad, seguridad y versatilidad. Requiere entre 1 y 2 GB de RAM y entre 4 y 10 GB de espacio en disco según la instalación, con un sistema base que ocupa alrededor de 1,2 GB. Sus prestaciones incluyen compatibilidad con múltiples arquitecturas, gran variedad de entornos de escritorio, mejoras en seguridad y soporte ampliado de hardware reciente.
📦 Tamaño del software y requisitos
Instalación mínima (sin utilidades estándar): ~1,0 GB en disco
Instalación estándar (amd64 con utilidades): ~1,2 GB en disco
Requisitos mínimos de hardware:
RAM: 512 MB (mínimo), 1 GB recomendado
Espacio en disco: 4 GB sin escritorio, 10 GB con escritorio
Requisitos recomendados:
Procesador: Pentium 4 a 1 GHz o superior
RAM: 2 GB para un entorno gráfico fluido
Características principales
Nombre en clave:Bookworm
Entornos de escritorio disponibles: GNOME, KDE Plasma, Xfce, LXQt, Cinnamon, MATE, entre otros
Gestión de paquetes: Más de 59.000 paquetes disponibles en repositorios oficiales
Soporte de idiomas: Extenso, con traducciones para la mayoría de lenguas
Firmware no libre incluido: Mejora la compatibilidad con hardware moderno (tarjetas Wi-Fi, gráficas, etc.)
Seguridad: Actualizaciones constantes y sistema de parches rápido
Compatibilidad: Funciona en múltiples arquitecturas (amd64, arm64, s390x, etc.)
Opciones de instalación: Instalador gráfico y en modo texto, imágenes para nube y contenedores
Prestaciones destacadas
Estabilidad y fiabilidad: Debian es referencia en servidores y entornos críticos
Rendimiento optimizado: Mejoras en velocidad de ejecución y gestión de recursos en Debian 12.10
Compatibilidad ampliada: Drivers actualizados para hardware reciente
Soporte a largo plazo (LTS): Garantiza actualizaciones de seguridad durante años
Versatilidad de uso:
Servidores web, bases de datos y entornos corporativos.
Escritorios personales con múltiples interfaces gráficas.
Imágenes para nube y virtualización.
Debian 12 combina ligereza en instalación (1–1,2 GB base) con robustez y seguridad, ofreciendo un sistema adaptable tanto para usuarios domésticos como para infraestructuras profesionales. Su soporte de hardware moderno, amplia gama de escritorios y miles de paquetes lo convierten en una de las distribuciones más completas y confiables del ecosistema Linux.
Puedes descargar Debian 12 “Bookworm” directamente desde la página oficial de Debian en este enlace: 👉 Descarga oficial de Debian 12
📥 Opciones de descarga
En la página oficial encontrarás distintas imágenes de instalación:
Netinst (instalador mínimo): Ideal para instalaciones ligeras, descarga solo lo esencial y el resto desde internet.
Imágenes completas (CD/DVD): Incluyen todos los paquetes, útiles para sistemas sin conexión.
Si trabajas con servidores VPS y proyectos web, lo más práctico es usar la imagen netinst amd64, ya que ocupa poco espacio (~300 MB) y te permite personalizar la instalación con solo los paquetes que necesitas.
Perfecto, Francisco 🌑🔥. Aquí tienes el enlace directo al ISO netinst amd64 de Debian 12 “Bookworm” (la opción más ligera y práctica para servidores y proyectos web):
Uso recomendado: Instalación mínima con descarga de paquetes desde internet
Arquitectura: amd64 (64 bits, la más común en servidores y PCs modernos)
Versión: 12.6.0 (última actualización estable de Bookworm)
Si prefieres imágenes completas (DVD con todos los paquetes incluidos), también están disponibles en la misma carpeta oficial: 👉Imágenes completas de Debian 12
Comandos SSH para instalar Debian 12 en un VPS
Aquí tienes una guía práctica con los comandos SSH para instalar Debian 12 en un VPS desde cero, suponiendo que estás accediendo a un servidor con consola KVM o instalación remota (como en Proxmox, Hetzner, OVH, etc.).
Supuestos previos
Tienes acceso SSH o consola al VPS (modo rescate o instalación manual).
El VPS está vacío o en modo de instalación.
Usarás el instalador oficial de Debian 12 (netinst).
Al crear el VPS, selecciona Debian 12 como imagen base.
En el campo “cloud-init” o “custom script”, pega el YAML anterior.
Asegúrate de incluir tu clave SSH pública en el campo correspondiente.
Resultado:
VPS con Debian 12, usuario francisco, acceso SSH, firewall activo, Nginx instalado y Fail2Ban protegiendo.
SCRIPT Cloud-Init
Script cloud-init para LAMP + WordPress en Debian 12
yaml
#cloud-config
hostname: debian-vps
timezone: Europe/Madrid
locale: es_ES.UTF-8
users:
- name: francisco
groups: sudo
shell: /bin/bash
sudo: ['ALL=(ALL) NOPASSWD:ALL']
ssh-authorized-keys:
- ssh-rsa AAAA...tu_clave_ssh...
package_update: true
package_upgrade: true
packages:
- apache2
- mariadb-server
- php
- php-mysql
- libapache2-mod-php
- curl
- wget
- unzip
- ufw
- fail2ban
runcmd:
# Configuración básica de firewall
- ufw allow OpenSSH
- ufw allow 'Apache Full'
- ufw enable
# Configuración de MariaDB segura
- mysql -e "ALTER USER 'root'@'localhost' IDENTIFIED BY 'TuPasswordSeguro';"
- mysql -e "DELETE FROM mysql.user WHERE User='';"
- mysql -e "DROP DATABASE IF EXISTS test;"
- mysql -e "FLUSH PRIVILEGES;"
# Crear base de datos para WordPress
- mysql -uroot -pTuPasswordSeguro -e "CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
- mysql -uroot -pTuPasswordSeguro -e "CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'WpPasswordSeguro';"
- mysql -uroot -pTuPasswordSeguro -e "GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser'@'localhost';"
- mysql -uroot -pTuPasswordSeguro -e "FLUSH PRIVILEGES;"
# Descargar e instalar WordPress
- wget https://wordpress.org/latest.tar.gz -O /tmp/wordpress.tar.gz
- tar -xzf /tmp/wordpress.tar.gz -C /var/www/html/
- chown -R www-data:www-data /var/www/html/wordpress
- chmod -R 755 /var/www/html/wordpress
# Configuración de Apache
- echo "<VirtualHost *:80>
ServerAdmin admin@localhost
DocumentRoot /var/www/html/wordpress
<Directory /var/www/html/wordpress>
AllowOverride All
</Directory>
ErrorLog \${APACHE_LOG_DIR}/error.log
CustomLog \${APACHE_LOG_DIR}/access.log combined
</VirtualHost>" > /etc/apache2/sites-available/wordpress.conf
- a2ensite wordpress.conf
- a2enmod rewrite
- systemctl reload apache2
Resultado
VPS con Debian 12
Apache + PHP + MariaDB configurados
WordPress descargado y listo en /var/www/html/wordpress
Firewall activo y Fail2Ban protegiendo
👉 Este script lo pegas en el campo cloud-init al crear tu VPS en Hetzner, Contabo o cualquier proveedor que lo soporte.
script cloud-init optimizado para un VPS con Debian 12 + Nginx + PHP-FPM + MariaDB + WordPress, pensado para rendimiento y estabilidad:
Script cloud-init (Nginx + PHP-FPM + WordPress)
yaml
#cloud-config
hostname: debian-vps
timezone: Europe/Madrid
locale: es_ES.UTF-8
users:
- name: francisco
groups: sudo
shell: /bin/bash
sudo: ['ALL=(ALL) NOPASSWD:ALL']
ssh-authorized-keys:
- ssh-rsa AAAA...tu_clave_ssh...
package_update: true
package_upgrade: true
packages:
- nginx
- mariadb-server
- php-fpm
- php-mysql
- php-cli
- php-curl
- php-xml
- php-zip
- php-gd
- php-mbstring
- curl
- wget
- unzip
- ufw
- fail2ban
runcmd:
# Configuración de firewall
- ufw allow OpenSSH
- ufw allow 'Nginx Full'
- ufw enable
# Configuración segura de MariaDB
- mysql -e "ALTER USER 'root'@'localhost' IDENTIFIED BY 'TuPasswordSeguro';"
- mysql -e "DELETE FROM mysql.user WHERE User='';"
- mysql -e "DROP DATABASE IF EXISTS test;"
- mysql -e "FLUSH PRIVILEGES;"
# Crear base de datos para WordPress
- mysql -uroot -pTuPasswordSeguro -e "CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
- mysql -uroot -pTuPasswordSeguro -e "CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'WpPasswordSeguro';"
- mysql -uroot -pTuPasswordSeguro -e "GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser'@'localhost';"
- mysql -uroot -pTuPasswordSeguro -e "FLUSH PRIVILEGES;"
# Descargar e instalar WordPress
- wget https://wordpress.org/latest.tar.gz -O /tmp/wordpress.tar.gz
- tar -xzf /tmp/wordpress.tar.gz -C /var/www/html/
- chown -R www-data:www-data /var/www/html/wordpress
- chmod -R 755 /var/www/html/wordpress
# Configuración de Nginx para WordPress
- echo "server {
listen 80;
server_name _;
root /var/www/html/wordpress;
index index.php index.html index.htm;
location / {
try_files \$uri \$uri/ /index.php?\$args;
}
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 ~ /\.ht {
deny all;
}
}" > /etc/nginx/sites-available/wordpress
- ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
- nginx -t
- systemctl reload nginx
Resultado
VPS con Debian 12
Nginx + PHP-FPM (más rápido que Apache para WordPress)
MariaDB configurado con base de datos y usuario para WordPress
WordPress instalado en /var/www/html/wordpress
Firewall activo y Fail2Ban protegiendo
Este script lo pegas en el campo cloud-init al crear tu VPS en Hetzner, Contabo o cualquier proveedor que lo soporte.
script cloud-init avanzado para tu VPS con Debian 12 + Nginx + PHP-FPM + MariaDB + WordPress, incluyendo optimización de rendimiento con Redis cache, PHP-FPM tunning y HTTPS con Let’s Encrypt.
Script cloud-init optimizado
yaml
#cloud-config
hostname: debian-vps
timezone: Europe/Madrid
locale: es_ES.UTF-8
users:
- name: francisco
groups: sudo
shell: /bin/bash
sudo: ['ALL=(ALL) NOPASSWD:ALL']
ssh-authorized-keys:
- ssh-rsa AAAA...tu_clave_ssh...
package_update: true
package_upgrade: true
packages:
- nginx
- mariadb-server
- php-fpm
- php-mysql
- php-cli
- php-curl
- php-xml
- php-zip
- php-gd
- php-mbstring
- redis-server
- php-redis
- certbot
- python3-certbot-nginx
- curl
- wget
- unzip
- ufw
- fail2ban
runcmd:
# Firewall
- ufw allow OpenSSH
- ufw allow 'Nginx Full'
- ufw enable
# Configuración segura de MariaDB
- mysql -e "ALTER USER 'root'@'localhost' IDENTIFIED BY 'TuPasswordSeguro';"
- mysql -e "DELETE FROM mysql.user WHERE User='';"
- mysql -e "DROP DATABASE IF EXISTS test;"
- mysql -e "FLUSH PRIVILEGES;"
# Crear base de datos para WordPress
- mysql -uroot -pTuPasswordSeguro -e "CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
- mysql -uroot -pTuPasswordSeguro -e "CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'WpPasswordSeguro';"
- mysql -uroot -pTuPasswordSeguro -e "GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser'@'localhost';"
- mysql -uroot -pTuPasswordSeguro -e "FLUSH PRIVILEGES;"
# Descargar e instalar WordPress
- wget https://wordpress.org/latest.tar.gz -O /tmp/wordpress.tar.gz
- tar -xzf /tmp/wordpress.tar.gz -C /var/www/html/
- chown -R www-data:www-data /var/www/html/wordpress
- chmod -R 755 /var/www/html/wordpress
# Configuración Nginx optimizada
- echo "server {
listen 80;
server_name _;
root /var/www/html/wordpress;
index index.php index.html index.htm;
location / {
try_files \$uri \$uri/ /index.php?\$args;
}
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 ~ /\.ht {
deny all;
}
}" > /etc/nginx/sites-available/wordpress
- ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
- nginx -t
- systemctl reload nginx
# Optimización PHP-FPM
- sed -i 's/pm = .*/pm = dynamic/' /etc/php/8.2/fpm/pool.d/www.conf
- sed -i 's/pm.max_children = .*/pm.max_children = 20/' /etc/php/8.2/fpm/pool.d/www.conf
- sed -i 's/pm.start_servers = .*/pm.start_servers = 5/' /etc/php/8.2/fpm/pool.d/www.conf
- sed -i 's/pm.min_spare_servers = .*/pm.min_spare_servers = 3/' /etc/php/8.2/fpm/pool.d/www.conf
- sed -i 's/pm.max_spare_servers = .*/pm.max_spare_servers = 10/' /etc/php/8.2/fpm/pool.d/www.conf
- systemctl restart php8.2-fpm
# Configuración HTTPS con Let's Encrypt
- certbot --nginx -d tu-dominio.com --non-interactive --agree-tos -m admin@tu-dominio.com
Resultado
VPS con Debian 12
Nginx + PHP-FPM optimizado para WordPress
MariaDB configurado con base de datos y usuario
Redis cache instalado y listo para usar con plugins de WordPress
Mantén a la vista el Reloj Analógico en tu sitio de WordPress, fácil de insertar, y con un potente efecto visual. El Reloj Analógico se adapta a todos los dispositivos.
⏰ Añade un reloj analógico en tu WordPress
¿Quieres mostrar la hora en tu sitio web con un reloj analógico elegante? Aquí tienes un código completo que puedes insertar en el widget de barra lateral de tu WordPress.
RELOJ WEB
Pasos:
Entra en tu panel de administración de WordPress.
Ve a Apariencia > Widgets.
Añade un widget de tipo HTML personalizado en la barra lateral.
Copia y pega el siguiente código completo en el widget:
html
<html>
<head>
<title>RELOJ WEB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.reloj-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 420px; /* tamaño máximo */
margin: 0 auto; /* centra horizontalmente */
padding: 10px;
box-sizing: border-box;
}
canvas {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="reloj-container">
<canvas id="my_canvas" width="420" height="420"></canvas>
</div>
<script>
var angle_jump=6;
var dt= new Date();
sec = dt.getSeconds()*angle_jump;
var min=dt.getMinutes();
min=min*angle_jump;
min=min + (sec/360)
var hour=dt.getHours();
hour=hour*30;
hour=hour + (min/12);
var ang_second=90-sec;
var ang_minute=90-min;
var ang_hour=90-hour;
var r=100;
var my_canvas=document.getElementById("my_canvas");
var gctx = my_canvas.getContext("2d");
var x=my_canvas.width/2;
var y=my_canvas.height/2;
speed=1000;
arc_angle=10;
my_function=function my_function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
// círculo exterior con sombra
gctx.beginPath();
gctx.strokeStyle= '#0B033B';
gctx.lineWidth=10;
gctx.shadowColor = 'rgba(0,0,0,0.5)';
gctx.shadowBlur = 15;
gctx.shadowOffsetX = 5;
gctx.shadowOffsetY = 5;
gctx.arc(x,y,r*1.4,0,2*Math.PI);
gctx.stroke();
// reset sombra
gctx.shadowColor = 'transparent';
gctx.shadowBlur = 0;
gctx.shadowOffsetX = 0;
gctx.shadowOffsetY = 0;
gctx.lineWidth=1;
// números y marcas
var h=2;
gctx.textAlign = "center";
gctx.textBaseline = "middle";
gctx.font = '36px serif';
for(j=0;j<360;j += angle_jump){
j_radian=j*(Math.PI/180);
gctx.beginPath();
gctx.strokeStyle= '#464623';
if((j % (5*angle_jump))==0){
var y1_text=y+ 0.85*r*Math.sin(j_radian);
var x1_text=x+ 0.85*r*Math.cos(j_radian);
if(h<12){ h=h+1; } else { h=1; }
// sombra en números
gctx.shadowColor = 'rgba(0,0,0,0.4)';
gctx.shadowBlur = 6;
gctx.shadowOffsetX = 2;
gctx.shadowOffsetY = 2;
gctx.fillText(h,x1_text,y1_text);
// reset sombra
gctx.shadowColor = 'transparent';
gctx.shadowBlur = 0;
gctx.shadowOffsetX = 0;
gctx.shadowOffsetY = 0;
// rayas largas en todos los números
var y1_out = y + 1.05*r*Math.sin(j_radian);
var x1_out = x + 1.05*r*Math.cos(j_radian);
var y2_out = y + 1.3*r*Math.sin(j_radian);
var x2_out = x + 1.3*r*Math.cos(j_radian);
gctx.moveTo(x1_out,y1_out);
gctx.lineTo(x2_out,y2_out);
gctx.stroke();
} else {
// rayas normales
var y1_out = y + 1.1*r*Math.sin(j_radian);
var x1_out = x + 1.1*r*Math.cos(j_radian);
var y2_out = y + 1.2*r*Math.sin(j_radian);
var x2_out = x + 1.2*r*Math.cos(j_radian);
gctx.moveTo(x1_out,y1_out);
gctx.lineTo(x2_out,y2_out);
gctx.stroke();
}
}
// segundero
gctx.beginPath();
gctx.strokeStyle= '#7CC0F5';
var startAngle=(1/180) * (360-ang_second);
var a_end_ang=(1/180) * (360-(ang_second + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_second + 180 + arc_angle));
var y1=y+ r*Math.sin(startAngle*Math.PI);
var x1=x+ r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#7CC0F5';
gctx.fill();
gctx.stroke();
// minutero
gctx.beginPath();
gctx.strokeStyle= '#181500';
var startAngle=(1/180) * (360-ang_minute);
var a_end_ang=(1/180) * (360-(ang_minute + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_minute + 180 + arc_angle));
var y1=y+ 0.9*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.9*r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#181500';
gctx.fill();
gctx.stroke();
// horario
gctx.beginPath();
gctx.strokeStyle= '#181500';
var startAngle=(1/180) * (360-ang_hour);
var a_end_ang=(1/180) * (360-(ang_hour + 180 -(arc_angle*2)));
var a_start_ang=(1/180) *(360-(ang_hour + 180 + (arc_angle*2)));
var y1=y+ 0.8*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.8*r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.15*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#181500';
gctx.fill();
gctx.stroke();
// círculo central
gctx.beginPath();
gctx.strokeStyle= '#000000';
gctx.arc(x,y,3,0,2*Math.PI);
gctx.fillStyle = '#282746';
gctx.fill();
gctx.stroke();
my_function2();
}
my_function2=function my_function2(){
if(ang_second > -264){
ang_second=ang_second-angle_jump;
setTimeout('my_function()',speed);
}else{
ang_second=90;
if(ang_minute > -264){
ang_minute=ang_minute - angle_jump;
}else{
ang_minute=90;
ang_hour=ang_hour-angle_jump;
}
setTimeout('my_function()',speed);
}
}
my_function();
</script>
</body>
</html>
3. Guardar y comprobar
Guarda el widget.
Ve a tu sitio y verás el reloj analógico funcionando en la barra lateral.
Resumen de la creación del reloj analógico
Canvas de HTML5
El reloj se dibuja dentro de un elemento <canvas> de HTML.
Este canvas es un área gráfica donde se pueden trazar líneas, círculos y texto con JavaScript.
Contexto gráfico (getContext("2d"))
Se obtiene el contexto 2D del canvas, que permite dibujar formas y aplicar estilos.
Con este contexto (gctx) se trazan los círculos, rayas y números.
Cálculo de ángulos
Cada segundo equivale a 6° (360° / 60).
Cada minuto también equivale a 6°.
Cada hora equivale a 30° (360° / 12).
Se calculan los ángulos de las agujas en función de la hora actual (Date()).
Dibujo de la esfera
Se dibuja un círculo exterior con borde azul oscuro y sombra para dar volumen.
Se añaden las rayas de los minutos y las rayas más largas en las posiciones de las horas.
Los números (1–12) se colocan alrededor del círculo, centrados y con sombra.
Agujas del reloj
Segundero: delgado y de color azul claro.
Minutero: más grueso y oscuro.
Horario: más corto y ancho.
Cada aguja se dibuja como una línea con un pequeño arco en la base para dar efecto.
Centro del reloj
Se dibuja un pequeño círculo en el centro para cubrir las uniones de las agujas.
Animación
Una función (my_function) redibuja el reloj cada segundo.
Se usa setTimeout para actualizar los ángulos y mover las agujas en tiempo real.
Estilos y centrado
El reloj se coloca dentro de un contenedor .reloj-container con CSS flexbox para que quede centrado en ordenador y móvil.
El canvas es responsivo (width:100%) para adaptarse al ancho del widget.
En resumen
El reloj se construye con:
HTML → para definir el canvas.
CSS → para centrarlo y hacerlo responsivo.
JavaScript → para calcular la hora, dibujar la esfera, los números, las rayas y las agujas, y actualizarlo cada segundo.
Esquema visual (imaginado)
Círculo exterior → esfera del reloj.
Rayas cortas → minutos.
Rayas largas + números → horas.
Agujas → hora, minuto y segundo.
Centro → círculo pequeño que une las agujas.
Animación → función que actualiza cada segundo.
En conclusión: el reloj se construye combinando HTML (canvas), CSS (centrado y responsivo) y JavaScript (cálculo de ángulos y animación).
Esquema visual del reloj analógico
1. Esfera del reloj
Un círculo exterior con borde azul oscuro y sombra.
Representa la base del reloj.
Código
●───────────────●
/ \
● ●
\ /
●───────────────●
2. Marcas de minutos y horas
60 rayas alrededor de la esfera.
Las rayas de las horas (1–12) son más largas.
Sirven de guía para colocar los números.
Código
| | | | | | | | | |
3. Números (1–12)
Colocados en posiciones radiales usando trigonometría.
Separados del borde para que no se peguen a las rayas.
Con sombra para dar volumen.
Código
12
11 1
10 2
9 3
6
4. Agujas
Segundero: delgado y azul claro.
Minutero: más largo y oscuro.
Horario: más corto y ancho.
Cada aguja se dibuja según el ángulo calculado con la hora actual.
Código
|
|
----●----
|
5. Centro del reloj
Un pequeño círculo que cubre la unión de las agujas.
Da un acabado limpio y elegante.
6. Animación
Una función en JavaScript (my_function) redibuja el reloj cada segundo.
Se actualizan los ángulos de las agujas con la hora real (Date()).
Se usa setTimeout para que el reloj se mueva en tiempo real.
Gráfico de Visitas (antes Visitas Tracker Simple) es un plugin ligero para WordPress que permite registrar y visualizar las visitas que recibe tu sitio día a día. Su objetivo es ofrecer una referencia clara y sencilla del tráfico sin necesidad de herramientas externas complejas.
🔧 Qué hace
Registra automáticamente cada visita al cargar una página del sitio.
Almacena los datos por fecha en una tabla propia dentro de la base de datos de WordPress.
Muestra métricas agregadas: total general, últimos 7 días y últimos 30 días.
Despliega una tabla diaria con el número de visitas por fecha.
Incluye un gráfico de barras en el área de administración para visualizar la evolución de las visitas de forma clara y rápida.
Para qué sirve
Este plugin es ideal si quieres:
Tener un control básico del tráfico sin depender de servicios externos como Google Analytics.
Visualizar de manera sencilla la tendencia de visitas en tu sitio.
Consultar estadísticas directamente desde el panel de administración de WordPress.
Obtener una referencia general del comportamiento de tus usuarios en periodos cortos (semanales o mensuales).
En resumen: es una herramienta práctica, ligera y fácil de usar para medir y visualizar las visitas de tu webdirectamente en WordPress.
El RSS es un formato basado en XML que permite suscribirse a sitios web para recibir automáticamente sus actualizaciones sin necesidad de visitarlos manualmente.
Definición
RSS significa Really Simple Syndication (Sindicación Realmente Simple).
Es un formato abierto de redifusión web que organiza y distribuye contenido actualizado de manera automática.
También se conoce como Rich Site Summary en algunos contextos.
⚙️ Cómo funciona
Los sitios web generan un feed RSS (archivo .xml) que contiene sus últimas publicaciones.
Los usuarios se suscriben a ese feed mediante un lector o agregador RSS.
Cada vez que el sitio publica algo nuevo, el lector lo muestra automáticamente en la lista de actualizaciones.
Ventajas principales
Centralización de información: puedes seguir varios blogs, periódicos o podcasts desde un único lugar.
Ahorro de tiempo: no necesitas entrar en cada página para comprobar si hay novedades.
Compatibilidad: funciona con noticias, blogs, podcasts y más.
📖 Ejemplo práctico
Imagina que sigues 10 blogs de tecnología. En lugar de abrirlos uno por uno, te suscribes a sus feeds RSS. Tu lector RSS te mostrará en una sola pantalla todas las nuevas publicaciones, ordenadas cronológicamente.
Contexto actual
El RSS fue muy popular en los años 2000 como herramienta para organizar el “caos” de información en internet.
Aunque perdió protagonismo frente a redes sociales y notificaciones push, sigue siendo usado por periodistas, investigadores y usuarios que quieren controlar su flujo de información sin depender de algoritmos.
👉 En resumen: el RSS es como un canal directo entre un sitio web y tu lector de noticias, que te mantiene informado de manera automática y organizada.
Crear un plugin RSS en WordPress
1. Crear la carpeta del plugin
En tu servidor, dentro de la instalación de WordPress:
bash
cd /var/www/tusitio.com/wordpress/wp-content/plugins/
sudo mkdir rss-tusitio
cd rss-tusitio
2. Crear el archivo principal
bash
sudo nano rss-tusitio.php
3. Pegar el código del plugin
php
<?php
/*
Plugin Name: RSS Tusitio
Description: Muestra el feed RSS de tusitio.com en tu web mediante shortcode.
Version: 1.0
Author: Francisco
*/
function rss_tusitio_shortcode() {
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://tusitio.com/feed');
if (is_wp_error($rss)) {
$msg = esc_html($rss->get_error_message());
return '<p>No se pudo cargar el feed: ' . $msg . '</p>';
}
$maxitems = $rss->get_item_quantity(5);
$rss_items = $rss->get_items(0, $maxitems);
if ($maxitems === 0) {
return '<p>No hay elementos en el feed.</p>';
}
$output = '<ul class="rss-tusitio-list">';
foreach ($rss_items as $item) {
$title = esc_html($item->get_title());
$link = esc_url($item->get_permalink());
$date = $item->get_date('d/m/Y');
$output .= '<li class="rss-tusitio-item">';
$output .= '<a href="' . $link . '" target="_blank" rel="noopener">' . $title . '</a>';
if ($date) {
$output .= ' <span class="rss-tusitio-date">(' . esc_html($date) . ')</span>';
}
$output .= '</li>';
}
$output .= '</ul>';
return $output;
}
add_shortcode('rss_tusitio', 'rss_tusitio_shortcode');
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ística
HTML (estático)
PHP (dinámico)
🧱 Tipo de lenguaje
De marcado
De programación del lado del servidor
🔄 Interactividad
No puede procesar formularios ni datos
Puede manejar formularios, sesiones, bases de datos
📦 Generación de contenido
El contenido es fijo
El contenido puede cambiar según el usuario o la base de datos
🗃️ Acceso a base de datos
No tiene capacidad
Puede conectarse a MySQL, PostgreSQL, etc.
🔐 Seguridad
No puede proteger páginas ni gestionar usuarios
Puede validar usuarios, proteger rutas, cifrar datos
<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:
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
<?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'); ?>
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">×</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">×</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.