En esta segunda parte vamos a dar el salto a un entorno m\u00e1s profesional<\/strong>, mejorando:<\/p>\n\n\n\n
- \n
- Experiencia de usuario (UX)<\/li>\n\n\n\n
- Dise\u00f1o visual<\/li>\n\n\n\n
- Organizaci\u00f3n del panel<\/li>\n\n\n\n
- Escalabilidad futura<\/li>\n\n\n\n
- Preparaci\u00f3n para nuevas herramientas<\/li>\n<\/ul>\n\n\n\n
Todo ello sin romper lo ya configurado<\/strong>.<\/p>\n\n\n\n
\n\n\n\n🎯 Objetivo de esta mejora<\/h2>\n\n\n\n
Transformar el panel b\u00e1sico en un dashboard limpio, moderno y usable<\/strong>, similar a un cPanel ligero o Portainer, manteniendo:<\/p>\n\n\n\n
- \n
- Ligereza (Raspberry Pi 3B)<\/li>\n\n\n\n
- Seguridad (solo LAN, sin root en PHP)<\/li>\n\n\n\n
- Simplicidad de mantenimiento<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n🧱 Nueva estructura del panel (frontend)<\/h2>\n\n\n\n
A partir de ahora, el frontend del panel quedar\u00e1 as\u00ed:<\/p>\n\n\n\n
\/var\/www\/html\/
\n\u251c\u2500\u2500 admin.php
\n\u251c\u2500\u2500 assets\/
\n\u2502 \u251c\u2500\u2500 css\/
\n\u2502 \u2502 \u2514\u2500\u2500 panel.css
\n\u2502 \u2514\u2500\u2500 img\/
\n\u2502 \u2514\u2500\u2500 logo.png
\n<\/code><\/pre>\n\n\n\n📌 Recordatorio importante<\/strong><\/p>\n\n\n\n
- \n
\/var\/www\/html<\/code> \u2192 solo frontend<\/li>\n\n\n\n\/var\/www\/apps<\/code> \u2192 apps, datos y scripts<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n1️⃣ Crear estructura de directorios del panel<\/h2>\n\n\n\n
Este paso es obligatorio<\/strong> y evita errores como \u201cNo such file or directory\u201d<\/em>.<\/p>\n\n\n\n
sudo mkdir -p \/var\/www\/html\/assets\/css\n
\nsudo mkdir -p \/var\/www\/html\/assets\/img<\/code><\/pre>\n\n\n\nAsignamos permisos correctos:<\/p>\n\n\n\n
sudo chown -R www-data:www-data \/var\/www\/html\/assets
\nsudo chmod -R 755 \/var\/www\/html\/assets<\/code><\/pre>\n\n\n\n
\n\n\n\n2️⃣ A\u00f1adir el logo del panel (adaptativo)<\/h2>\n\n\n\n
Para hacerlo c\u00f3modo, tendremos que dar permisos a FileBrowser para que acceda a la carpeta, he estado tocando varias cosas… pero al final ser\u00eda<\/p>\n\n\n\n
sudo systemctl stop filebrowser #Paramos el servicio
\nsudo nano \/etc\/systemd\/system\/filebrowser.service
\n
\n#Editamos y el \"Service queda tal que as\u00ed:<\/code><\/pre>\n\n\n\n[Service]
\nType=simple
\nUser=www-data
\nGroup=www-data
\nExecStart=\/usr\/local\/bin\/filebrowser \\
\n -d \/etc\/filebrowser.db \\
\n -r \/var\/www\/<\/strong> \\
\n -a 0.0.0.0 \\
\n -p 8080
\nRestart=on-failure
\nRestartSec=5
\nNoNewPrivileges=true
\nPrivateTmp=true<\/code><\/pre>\n\n\n\n
\n\n\n\nCreamos rutas y damos permisos:<\/p>\n\n\n\n
sudo mkdir -p \/var\/www\/html\/assets\/img
\nsudo chown -R www-data:www-data \/var\/www\/html\/assets
\nsudo chmod -R 755 \/var\/www\/html\/asset<\/code><\/pre>\n\n\n\nRecargamos…<\/p>\n\n\n\n
sudo systemctl daemon-reload
\nsudo systemctl start filebrowser
\nsudo systemctl status filebrowser<\/code><\/pre>\n\n\n\nCopiamos el logo (por ejemplo de 460\u00d7460px) a:<\/p>\n\n\n\n
\/var\/www\/html\/assets\/img\/logo.png<\/code><\/pre>\n\n\n\n🔹 El tama\u00f1o se adapta autom\u00e1ticamente<\/strong> por CSS
🔹 No ser\u00e1 intrusivo
🔹 Mantiene proporci\u00f3n<\/p>\n\n\n\n
\n\n\n\n3️⃣ Estilo profesional del Mini cPanel (UX + tipograf\u00eda)<\/h2>\n\n\n\n
Creamos el archivo CSS:<\/p>\n\n\n\n
sudo nano \/var\/www\/html\/assets\/css\/panel.css<\/code><\/pre>\n\n\n\nContenido:<\/p>\n\n\n\n
body {
\n background: #0f172a;
\n color: #e5e7eb;
\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;
\n margin: 0;
\n}
\n
\n.logo {
\n max-width: 120px; \/* El logo 460x460 se adapta aqu\u00ed *\/
\n height: auto;
\n margin-bottom: 20px;
\n opacity: 0.9;
\n}
\n
\n.login, .panel {
\n max-width: 420px;
\n margin: 120px auto;
\n text-align: center;
\n}
\n
\ninput, button {
\n width: 100%;
\n padding: 12px;
\n margin-top: 10px;
\n border-radius: 8px;
\n border: none;
\n font-size: 14px;
\n}
\n
\nbutton {
\n background: #3b82f6;
\n color: white;
\n cursor: pointer;
\n}
\n
\nbutton:hover {
\n background: #2563eb;
\n}
\n
\n.panel a {
\n display: block;
\n margin: 10px 0;
\n padding: 12px;
\n background: #1e293b;
\n color: #e5e7eb;
\n text-decoration: none;
\n border-radius: 8px;
\n}
\n
\n.panel a:hover {
\n background: #334155;
\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n4️⃣ Actualizar admin.php con dise\u00f1o moderno<\/h2>\n\n\n\n
Editamos el archivo existente:<\/p>\n\n\n\n
sudo nano \/var\/www\/html\/admin.php<\/code><\/pre>\n\n\n\nVersi\u00f3n mejorada (login + panel)<\/h3>\n\n\n\n
<?php
session_start();
$secret_pass = \u00abCAMBIA_ESTA_PASSWORD\u00bb;
if (isset($_POST[‘password’])) {
if (hash_equals($secret_pass, $_POST[‘password’])) {
$_SESSION[‘auth’] = true;<
} else {
$error = \u00abContrase\u00f1a incorrecta\u00bb;
}
}
if (!isset($_SESSION[‘auth’])) {
?>
<!DOCTYPE html>
<html>
<head>
<title>Mini cPanel<\/title>
<link rel=\u00bbstylesheet\u00bb href=\u00bbassets\/css\/panel.css\u00bb>
<\/head>
<body>
<div class=\u00bblogin\u00bb>
<img src=\u00bbassets\/img\/logo.png\u00bb class=\u00bblogo\u00bb>
<form method=\u00bbpost\u00bb>
<input type=\u00bbpassword\u00bb name=\u00bbpassword\u00bb placeholder=\u00bbContrase\u00f1a\u00bb>
<button>Entrar<\/button>
<?php if(isset($error)) echo \u00ab<p>$error<\/p>\u00bb; ?>
<\/form>
<\/div>
<\/body>
<\/html>
<?php exit; }
function run($script){
echo \u00ab<pre>\u00bb;
echo shell_exec(\u00absudo \/var\/www\/apps\/admin-scripts\/$script 2>&1\u00bb);
echo \u00ab<\/pre>\u00bb;
}
?>
<!DOCTYPE html><\/p>\n\n\n\n<html>
<head>
<title>Mini cPanel<\/title>
<link rel=\u00bbstylesheet\u00bb href=\u00bbassets\/css\/panel.css\u00bb>
<\/head>
<body>
<div class=\u00bbpanel\u00bb>
<img src=\u00bbassets\/img\/logo.png\u00bb class=\u00bblogo\u00bb>
<h2>Panel de Control<\/h2>
<a href=\u00bb?do=php\u00bb>🔁 Reiniciar PHP-FPM<\/a>
<a href=\u00bb?do=perms\u00bb>🔐 Ajustar permisos<\/a>
<a href=\u00bb?do=backup\u00bb>📦 Backup de apps<\/a>
<?php<
if(isset($_GET[‘do’])){
if($_GET[‘do’]==’php’) run(‘reiniciar-php.sh’);
if($_GET[‘do’]==’perms’) run(‘ajustar-permisos.sh’);
if($_GET[‘do’]==’backup’) run(‘backup.sh’);
}
?>
<\/div>
<\/body>
<\/html><\/p>\n\n\n\n
\n\n\n\n5️⃣ Resultado visual<\/h2>\n\n\n\n
Ahora el mini cPanel tiene:<\/p>\n\n\n\n
✅ Tipograf\u00eda moderna
✅ Botones claros
✅ Logo adaptativo
✅ Mejor jerarqu\u00eda visual
✅ UX tipo dashboard
✅ Preparado para crecer<\/p>\n\n\n\nAcceso:<\/p>\n\n\n\n
http://IP_DE_LA_RASPI\/admin.php<\/code><\/pre>\n\n\n\n
\n\n\n\n🔐 Buenas pr\u00e1cticas mantenidas<\/h2>\n\n\n\n
- \n
- ❌ No root en PHP<\/li>\n\n\n\n
- ❌ No MariaDB expuesta<\/li>\n\n\n\n
- ✅ Scripts controlados con sudo<\/li>\n\n\n\n
- ✅ Acceso solo LAN<\/li>\n\n\n\n
- ✅ Separaci\u00f3n frontend \/ backend<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n😁Resultado<\/strong><\/p>\n\n\n
\n![\"\"](\"https:\/\/www.sinetiqueta.com\/wp-content\/uploads\/2026\/02\/image-4.png\")
<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"Continuaci\u00f3n del Mini cPanel para Raspberry Pi 3B En la entrada anterior dejamos operativo un mini cPanel funcional, con gesti\u00f3n de archivos, backups y control b\u00e1sico de PHP-FPM.En esta segunda parte vamos a dar el salto a un entorno m\u00e1s… Leer m\u00e1s🟢 Mini cPanel \u2013 Mejora Profesional de UX, Dise\u00f1o y Funcionalidades<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[274,236,498],"tags":[],"class_list":["post-3347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cpanel","category-raspberry-pi","category-servidor","content-layout-excerpt-thumb"],"jetpack_featured_media_url":"https:\/\/www.sinetiqueta.com\/wp-content\/uploads\/2026\/02\/logo.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/posts\/3347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3347"}],"version-history":[{"count":17,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/posts\/3347\/revisions"}],"predecessor-version":[{"id":3371,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/posts\/3347\/revisions\/3371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=\/wp\/v2\/media\/3349"}],"wp:attachment":[{"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sinetiqueta.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}