508 lines
No EOL
19 KiB
HTML
508 lines
No EOL
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inicio de SO: Modo Kiosco y Administrador</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap"
|
|
rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--sidebar-color: #111827;
|
|
--card-color: #1f2937;
|
|
--accent-color: #8b5cf6;
|
|
--accent-hover: #a78bfa;
|
|
--text-color: #f3f4f6;
|
|
--text-muted: #9ca3af;
|
|
--border-color: #374151;
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--danger-color: #ef4444;
|
|
--code-bg: #1e1e2e;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Sidebar Navigation */
|
|
aside {
|
|
width: 300px;
|
|
background-color: var(--sidebar-color);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 2.5rem 1.5rem;
|
|
position: fixed;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.logo-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, var(--accent-color), #3b82f6);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to right, #ffffff, #d1d5db);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.nav-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--text-color);
|
|
background-color: rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
.nav-link.active {
|
|
color: #white;
|
|
background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), transparent);
|
|
border-left: 3px solid var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Main Content */
|
|
main {
|
|
margin-left: 300px;
|
|
flex-grow: 1;
|
|
padding: 3rem 4rem;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 4rem;
|
|
position: relative;
|
|
}
|
|
|
|
header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--accent-color), #3b82f6);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.8rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, #ffffff 30%, #a78bfa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 4.5rem;
|
|
scroll-margin-top: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
h2 span {
|
|
color: var(--accent-color);
|
|
font-weight: 300;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-muted);
|
|
margin-bottom: 1.2rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
/* Diagram Container (Mermaid) */
|
|
.mermaid {
|
|
background-color: var(--card-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Code Blocks */
|
|
pre {
|
|
background-color: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
overflow-x: auto;
|
|
margin-bottom: 1.5rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.95rem;
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: #e5c07b;
|
|
}
|
|
|
|
.comment {
|
|
color: #5c6370;
|
|
font-style: italic;
|
|
}
|
|
|
|
.keyword {
|
|
color: #c678dd;
|
|
}
|
|
|
|
.string {
|
|
color: #98c379;
|
|
}
|
|
|
|
.command {
|
|
color: #61afef;
|
|
}
|
|
|
|
/* Custom Alert Boxes */
|
|
.alert {
|
|
padding: 1.25rem 1.5rem;
|
|
border-left: 4px solid;
|
|
border-radius: 0 12px 12px 0;
|
|
margin-bottom: 1.5rem;
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.alert-info {
|
|
border-left-color: var(--accent-color);
|
|
background-color: rgba(139, 92, 246, 0.03);
|
|
}
|
|
|
|
.alert-warning {
|
|
border-left-color: var(--warning-color);
|
|
background-color: rgba(245, 158, 11, 0.03);
|
|
}
|
|
|
|
.alert-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Steps */
|
|
.step-list {
|
|
margin-left: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.step-list li {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 900px) {
|
|
body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
aside {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
main {
|
|
margin-left: 0;
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<aside>
|
|
<div class="logo-area">
|
|
<div class="logo-icon">S</div>
|
|
<div class="logo-text">Inicio de SO</div>
|
|
</div>
|
|
<ul class="nav-list">
|
|
<li class="nav-item"><a href="#arquitectura" class="nav-link active">1. Arquitectura de Usuarios</a></li>
|
|
<li class="nav-item"><a href="#usuarios" class="nav-link">2. Configurar Usuarios y Login</a></li>
|
|
<li class="nav-item"><a href="#silentboot" class="nav-link">3. Silent Boot y Plymouth</a></li>
|
|
<li class="nav-item"><a href="#openbox" class="nav-link">4. Modo Kiosco (Openbox)</a></li>
|
|
<li class="nav-item"><a href="#integracion" class="nav-link">5. Control desde la App</a></li>
|
|
<li class="nav-item"><a href="#mantenimiento" class="nav-link">6. Modo Administrador</a></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<header>
|
|
<h1>Inicio de Sistema Operativo</h1>
|
|
<p class="subtitle">Guía de configuración para el arranque de Debian 13 (Kiosco / Admin con Login)</p>
|
|
</header>
|
|
|
|
<!-- Sección 1 -->
|
|
<section id="arquitectura">
|
|
<h2><span>01 /</span> Arquitectura de la Solución</h2>
|
|
<p>Para lograr un sistema seguro y profesional, no utilizaremos auto-login. El sistema arrancará en una
|
|
pantalla gráfica de inicio de sesión de LightDM, donde el operador podrá elegir el modo de trabajo
|
|
ingresando la credencial correspondiente.</p>
|
|
|
|
<div class="diagram-container" style="text-align: center; margin: 2rem 0;">
|
|
<img src="Diagrama.drawio.png" alt="Diagrama de Flujo de Inicio de SO" style="max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);">
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<div class="alert-title">💡 Ventaja de este Enfoque</div>
|
|
Al requerir contraseña para ambos usuarios, eliminas la necesidad de programar complejos scripts de
|
|
interrupción durante el arranque (como GRUB o Systemd). El sistema es 100% estándar, seguro y fácil de
|
|
mantener.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección 2 -->
|
|
<section id="usuarios">
|
|
<h2><span>02 /</span> Configuración de Usuarios y Pantalla de Login</h2>
|
|
<p>Crearemos los dos usuarios independientes y configuraremos el gestor gráfico LightDM para que muestre una
|
|
lista visual de los usuarios disponibles.</p>
|
|
|
|
<h3>Paso 1: Crear los usuarios Kiosk y Admin</h3>
|
|
<p>Crearemos ambos usuarios y estableceremos sus respectivas contraseñas:</p>
|
|
<pre><code><span class="comment"># Crear usuario kiosk con contraseña</span>
|
|
<span class="keyword">sudo</span> adduser kiosk
|
|
|
|
<span class="comment"># Crear usuario admin (si no existe ya en tu instalación)</span>
|
|
<span class="keyword">sudo</span> adduser admin
|
|
|
|
<span class="comment"># Añadir kiosk a grupos para reproducción de video y audio</span>
|
|
<span class="keyword">sudo</span> usermod -aG video,audio,input kiosk</code></pre>
|
|
|
|
<h3>Paso 2: Configurar la Pantalla de Login (LightDM)</h3>
|
|
<p>Debemos asegurarnos de que el inicio automático (auto-login) esté desactivado y que la pantalla de
|
|
bienvenida muestre la lista de usuarios para facilitar la selección con el ratón.</p>
|
|
<p>Edita el archivo <code>/etc/lightdm/lightdm.conf</code> y verifica que las siguientes directivas estén
|
|
así bajo la sección <code>[Seat:*]</code>:</p>
|
|
<pre><code><span class="comment"># Editar con: sudo nano /etc/lightdm/lightdm.conf</span>
|
|
|
|
[Seat:*]
|
|
<span class="comment"># Asegurarse de que no haya ningún autologin configurado (dejar comentado o vacío)</span>
|
|
<span class="comment"># autologin-user=</span>
|
|
|
|
<span class="comment"># Habilitar que se muestre la lista de usuarios visual</span>
|
|
greeter-hide-users=<span class="keyword">false</span>
|
|
greeter-show-manual-login=<span class="keyword">false</span></code></pre>
|
|
|
|
<p>Reinicia el gestor gráfico para aplicar los cambios:</p>
|
|
<pre><code><span class="keyword">sudo systemctl restart</span> lightdm</code></pre>
|
|
</section>
|
|
|
|
<!-- Sección 3 -->
|
|
<section id="silentboot">
|
|
<h2><span>03 /</span> Silent Boot y Plymouth (Animación de Carga)</h2>
|
|
<p>Configuraremos Debian para ocultar los mensajes de texto del sistema operativo durante el encendido,
|
|
reemplazándolos por una animación gráfica limpia.</p>
|
|
|
|
<h3>Paso 1: Parámetros silenciosos en GRUB</h3>
|
|
<p>Modifica el archivo <code>/etc/default/grub</code> para ocultar los logs del Kernel:</p>
|
|
<pre><code><span class="comment"># Abrir el archivo: sudo nano /etc/default/grub</span>
|
|
|
|
GRUB_CMDLINE_LINUX_DEFAULT=<span class="string">"quiet splash loglevel=3 systemd.show_status=false rd.udev.log_level=3 vt.global_cursor_default=0"</span></code></pre>
|
|
<p>Aplica los cambios en el cargador de arranque:</p>
|
|
<pre><code><span class="keyword">sudo</span> update-grub</code></pre>
|
|
|
|
<h3>Paso 2: Configurar Plymouth</h3>
|
|
<p>Instala Plymouth y activa la animación circular por defecto (spinner):</p>
|
|
<pre><code><span class="keyword">sudo apt update</span>
|
|
<span class="keyword">sudo apt install</span> plymouth plymouth-themes
|
|
<span class="keyword">sudo</span> plymouth-set-default-theme -R spinner</code></pre>
|
|
</section>
|
|
|
|
<!-- Sección 4 -->
|
|
<section id="openbox">
|
|
<h2><span>04 /</span> Configuración del Modo Kiosco (Openbox)</h2>
|
|
<p>Openbox será el entorno gráfico minimalista que cargará exclusivamente cuando inicies sesión como el
|
|
usuario <code>kiosk</code>.</p>
|
|
|
|
<h3>Paso 1: Crear el script de autoinicio</h3>
|
|
<p>Crea el directorio de configuración para el usuario kiosk:</p>
|
|
<pre><code><span class="keyword">sudo -u</span> kiosk mkdir -p /home/kiosk/.config/openbox</code></pre>
|
|
|
|
<p>Crea el archivo de arranque <code>/home/kiosk/.config/openbox/autostart</code>:</p>
|
|
<pre><code><span class="comment"># Editar archivo: sudo nano /home/kiosk/.config/openbox/autostart</span>
|
|
|
|
<span class="comment"># Desactivar suspensión y protector de pantalla</span>
|
|
xset s off
|
|
xset -dpms
|
|
xset s noblank
|
|
|
|
<span class="comment"># Iniciar tu aplicación en un bucle infinito</span>
|
|
<span class="keyword">while</span> <span class="command">true</span>; <span class="keyword">do</span>
|
|
/ruta/completa/a/tu/aplicacion-grafica
|
|
<span class="keyword">sleep</span> 1
|
|
<span class="keyword">done</span> &</code></pre>
|
|
<p>Otorga los permisos correctos al archivo:</p>
|
|
<pre><code><span class="keyword">sudo chown</span> -R kiosk:kiosk /home/kiosk/.config
|
|
<span class="keyword">sudo chmod</span> +x /home/kiosk/.config/openbox/autostart</code></pre>
|
|
|
|
<h3>Paso 2: Bloquear combinaciones de teclado</h3>
|
|
<p>Para evitar que los usuarios utilicen atajos del sistema para cerrar la aplicación, puedes modificar el
|
|
archivo <code>/etc/xdg/openbox/rc.xml</code> y eliminar las combinaciones asociadas a
|
|
<code>Alt+F4</code>, <code>Alt+Space</code> y cambio de ventanas.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Sección 5 -->
|
|
<section id="integracion">
|
|
<h2><span>05 /</span> Control desde la Aplicación</h2>
|
|
<p>Dado que en la sesión de Kiosco no hay menús del sistema operativo, tu aplicación debe proveer la
|
|
funcionalidad para Cerrar Sesión y Apagar el hardware directamente mediante botones integrados.</p>
|
|
|
|
<h3>Paso 1: Configurar permisos especiales sin contraseña (Sudoers)</h3>
|
|
<p>Permitiremos al usuario común <code>kiosk</code> ejecutar los comandos de apagado y cierre de sesión de
|
|
forma privilegiada y sin pedir clave. Crea el archivo <code>/etc/sudoers.d/kiosk-power</code>:</p>
|
|
<pre><code><span class="comment"># Crear y editar el archivo: sudo visudo -f /etc/sudoers.d/kiosk-power</span>
|
|
|
|
<span class="comment"># Permitir al kiosk apagar la PC y terminar su propia sesión gráfica</span>
|
|
kiosk ALL=(ALL) NOPASSWD: /usr/bin/systemctl poweroff, /usr/bin/loginctl terminate-user kiosk</code></pre>
|
|
|
|
<h3>Paso 2: Programar las acciones en los botones de tu App</h3>
|
|
<p>Desde el código de tu aplicación gráfica, programa los eventos de los botones:</p>
|
|
|
|
<h4>Botón "Apagar Sistema"</h4>
|
|
<p>Ejecuta el comando para apagar la computadora de forma segura:</p>
|
|
<pre><code><span class="keyword">sudo</span> systemctl poweroff</code></pre>
|
|
|
|
<h4>Botón "Cerrar Sesión"</h4>
|
|
<p>Ejecuta el comando para cerrar la sesión de Kiosco y regresar a la pantalla de LightDM:</p>
|
|
<pre><code><span class="keyword">sudo</span> loginctl terminate-user kiosk</code></pre>
|
|
</section>
|
|
|
|
<!-- Sección 6 -->
|
|
<section id="mantenimiento">
|
|
<h2><span>06 /</span> El "Modo Administrador" (Acceso a XFCE)</h2>
|
|
<p>El modo administrador te permite realizar mantenimiento técnico y desarrollo sobre tu escritorio XFCE
|
|
completo sin reiniciar el equipo.</p>
|
|
|
|
<h3>Pasos para ingresar al Modo Administrador:</h3>
|
|
<ol class="step-list">
|
|
<li>Desde el modo Kiosco, haz clic en el botón <strong>"Cerrar Sesión"</strong> de tu aplicación.</li>
|
|
<li>El sistema cerrará Openbox y volverá inmediatamente a la pantalla de inicio de LightDM.</li>
|
|
<li>Haz clic en el usuario <strong>admin</strong> en la lista gráfica.</li>
|
|
<li>Ingresa su contraseña.</li>
|
|
<li>Asegúrate de que en el selector de entornos esté marcado <strong>XFCE</strong> (solo la primera vez)
|
|
e inicia sesión.</li>
|
|
<li>Una vez finalizado el mantenimiento, cierra sesión en XFCE para volver a LightDM y dejar el equipo
|
|
listo para el usuario de Kiosco.</li>
|
|
</ol>
|
|
|
|
<div class="alert alert-warning">
|
|
<div class="alert-title">⚠️ Recuperación ante bloqueos de la App</div>
|
|
Si tu aplicación se congela y no puedes hacer clic en el botón de Cerrar Sesión, presiona
|
|
<code>Ctrl + Alt + F2</code> en el teclado para iniciar sesión como administrador en una terminal de
|
|
comandos limpia, y ejecuta <code>sudo systemctl restart lightdm</code> para forzar el retorno a la
|
|
pantalla de login.
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
// Simple navigation active state controller
|
|
const links = document.querySelectorAll('.nav-link');
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
if (pageYOffset >= (sectionTop - 150)) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
links.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href').slice(1) === current) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |