Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POE - Programación Orientada a Eventos</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=Urbanist:wght@400;500;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* 1. CONFIGURACIÓN GENERAL (Setup) */
* { box-sizing: border-box; }
body {
background-color: #020617; /* Fondo ultra oscuro para contraste */
display: grid;
gap: 20px;
grid-template-columns: 1fr;
margin: 0;
min-height: 100vh;
padding: 20px 0;
place-items: center;
font-family: 'Urbanist', sans-serif;
}
.slide-container {
align-items: flex-start;
background-color: #0f172a; /* Navy profundo */
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
height: 720px;
justify-content: center;
overflow: hidden;
padding: 60px;
position: relative;
width: 1280px;
}
/* Efectos de fondo decorativos (Abstract Shapes) */
.slide-container::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
top: -100px;
right: -100px;
z-index: 0;
}
.slide-container::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(132, 204, 22, 0.05) 0%, transparent 70%);
bottom: -50px;
left: -50px;
z-index: 0;
}
.slide-container > * { position: relative; z-index: 1; }
/* 2. TIPOGRAFÍA (Typography) */
h1, h2, h3 { color: #f8fafc; font-weight: 700; margin: 0; }
p, li, td, th { color: #cbd5e1; font-size: 20px; line-height: 1.5; }
.slide-title {
font-size: 48px;
margin-bottom: 40px;
text-align: left;
width: 100%;
border-left: 6px solid #22d3ee;
padding-left: 20px;
}
/* 3. LAYOUTS ESPECÍFICOS */
.content-area {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
width: 100%;
}
.title-layout { text-align: center; width: 100%; }
.title-layout h1 { font-size: 90px; color: #22d3ee; margin-bottom: 20px; }
.title-layout .subtitle { font-size: 32px; color: #94a3b8; font-weight: 400; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; width: 100%; align-items: center; }
.image-wrapper {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(34, 211, 238, 0.3);
height: 400px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.tile {
background: rgba(30, 41, 59, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
text-align: center;
}
.tile .icon { font-size: 48px; color: #22d3ee; margin-bottom: 20px; }
.bullet-list ul { list-style: none; padding: 0; }
.bullet-list li { position: relative; padding-left: 40px; margin-bottom: 20px; }
.bullet-list i { position: absolute; left: 0; top: 5px; color: #84cc16; font-size: 24px; }
.table-layout table { width: 100%; border-collapse: collapse; background: rgba(15, 23, 42, 0.8); border-radius: 12px; overflow: hidden; }
.table-layout th, .table-layout td { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; }
.table-layout th { background: #1e293b; color: #22d3ee; text-transform: uppercase; letter-spacing: 1px; }
/* Bleed Image Right */
.slide-container.bleed-image-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: 0; }
.bleed-image-layout .content-container { padding: 60px; }
.bleed-image-layout img { height: 720px; width: 100%; object-fit: cover; }
/* Timeline */
.timeline-layout { display: flex; justify-content: space-between; position: relative; width: 100%; margin-top: 50px; }
.timeline-line { position: absolute; top: 50%; width: 100%; height: 4px; background: #334155; z-index: 0; }
.timeline-item { width: 45%; position: relative; z-index: 1; background: #1e293b; padding: 20px; border-radius: 12px; border: 1px solid #22d3ee; }
/* Custom Quote/Meme */
.meme-text { font-family: 'JetBrains Mono', monospace; color: #84cc16; font-size: 24px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; }
</style>
</head>
<body>
<div class="slide-container" id="slide1">
<div class="title-layout">
<h1>POE</h1>
<p class="subtitle">Programación Orientada a Eventos</p>
<div style="margin-top: 40px; height: 4px; width: 200px; background: #22d3ee; margin-left: auto; margin-right: auto;"></div>
</div>
</div>
<div class="slide-container" id="slide2">
<h2 class="slide-title">¿Qué es un Evento?</h2>
<div class="content-area">
<div class="two-column">
<div>
<p>Un evento es cualquier <strong>acción o cambio</strong> detectado por el sistema que puede generar una reacción.</p>
<div class="bullet-list" style="margin-top: 20px;">
<ul>
<li><i class="fas fa-keyboard"></i> Alguien escribe en un documento.</li>
<li><i class="fas fa-mouse-pointer"></i> Un clic en un botón "Comprar".</li>
<li><i class="fas fa-clock"></i> Una notificación de estado de pedido.</li>
</ul>
</div>
</div>
<div class="image-wrapper">
<img src="http://googleusercontent.com/image_collection/image_retrieval/9828878923920273685" alt="Typing on keyboard">
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide3">
<h2 class="slide-title">Definición Técnica</h2>
<div class="content-area">
<div class="bullet-list">
<ul>
<li><i class="fas fa-cube"></i> <strong>Objeto de Sistema:</strong> Es un objeto que recibe el sistema el cual puede generar algún cambio de estado.</li>
<li><i class="fas fa-random"></i> <strong>Impredecibilidad:</strong> A priori no conocemos cuándo van a llegar, pero sabemos cuáles pueden llegar.</li>
<li><i class="fas fa-code-branch"></i> <strong>Origen:</strong> Pueden ser definidos por el usuario, por hardware o por el propio sistema interno.</li>
</ul>
</div>
</div>
</div>
<div class="slide-container" id="slide4">
<h2 class="slide-title">Propiedades de los Eventos</h2>
<div class="content-area">
<div class="two-column">
<div class="image-wrapper">
<img src="http://googleusercontent.com/image_collection/image_retrieval/7434262556739455815" alt="Order status persistent timeline">
</div>
<div>
<div class="tile" style="margin-bottom: 20px;">
<div class="icon"><i class="fas fa-lock"></i></div>
<h3>Inmutables</h3>
<p>Una vez que el evento ocurre, no puede ser modificado. Es un hecho histórico.</p>
</div>
<div class="tile">
<div class="icon"><i class="fas fa-database"></i></div>
<h3>Persistentes</h3>
<p>Pueden ser almacenados indefinidamente para auditoría o procesamiento posterior.</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide-container bleed-image-layout" id="slide5">
<div class="content-container">
<h2 class="slide-title" style="border:none; padding:0;">Hechos Históricos</h2>
<p>En POE, el evento representa el <strong>pasado</strong>. </p>
<div class="meme-text">"Changing the past doesn't change the future."</div>
<p style="margin-top: 20px;">Si un pedido fue "Cancelado", ese evento queda registrado para siempre. No borramos el evento, emitimos uno nuevo de "Corrección".</p>
</div>
<div class="image-container">
<img src="http://googleusercontent.com/image_collection/image_retrieval/1709114196799408028" alt="Avengers Endgame Hulk Meme">
</div>
</div>
<div class="slide-container" id="slide6">
<h2 class="slide-title">Secuencial vs. Orientada a Eventos</h2>
<div class="content-area">
<div class="two-column" style="align-items: stretch;">
<div class="tile">
<h3 style="color: #94a3b8;">Programación Secuencial (PS)</h3>
<hr style="border: 1px solid #334155; margin: 20px 0;">
<p><strong>El Programador</strong> maneja el flujo del sistema.</p>
<p style="font-size: 16px; font-style: italic;">"Haz A, luego B, si pasa X haz C."</p>
</div>
<div class="tile" style="border-color: #22d3ee;">
<h3 style="color: #22d3ee;">Prog. Orientada a Eventos (POE)</h3>
<hr style="border: 1px solid #22d3ee; margin: 20px 0;">
<p><strong>El Usuario o Sistema</strong> maneja el flujo.</p>
<p style="font-size: 16px; font-style: italic;">"Estoy esperando... cuando pase X, reacciono con Y."</p>
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide7">
<h2 class="slide-title">¿Por qué usar POE?</h2>
<div class="content-area">
<div class="two-column">
<div>
<h3>El Problema del Acoplamiento</h3>
<p>En sistemas tradicionales, si el componente A llama al B y B falla, A también falla.</p>
<p><strong>Analogía Samsa:</strong> Las dependencias rígidas hacen que el sistema sea frágil. Si un receptor se "transforma" o desaparece, el emisor queda bloqueado.</p>
</div>
<div class="image-wrapper">
<img src="http://googleusercontent.com/image_collection/image_retrieval/14896519459818081480" alt="Tangled wires coupling">
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide8" style="background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('http://googleusercontent.com/image_collection/image_retrieval/1117826485362343358'); background-size: cover;">
<h2 class="slide-title">Arquitectura POE</h2>
<div class="content-area">
<div class="tiled-content" style="align-items: center;">
<div class="tile" style="background: #1e293b;"><h3>Emisor</h3><p>Detecta el cambio y emite el evento.</p></div>
<div class="icon"><i class="fas fa-arrow-right"></i></div>
<div class="tile" style="background: #0ea5e9; border: 2px solid #fff;"><h3>Broker</h3><p>Controlador que distribuye el evento.</p></div>
<div class="icon"><i class="fas fa-arrow-right"></i></div>
<div class="tile" style="background: #1e293b;"><h3>Suscriptores</h3><p>Reaccionan al evento de forma independiente.</p></div>
</div>
</div>
</div>
<div class="slide-container" id="slide9">
<h2 class="slide-title">Balance de la Arquitectura</h2>
<div class="content-area">
<div class="table-layout">
<table>
<thead>
<tr>
<th><i class="fas fa-plus-circle"></i> Ventajas</th>
<th><i class="fas fa-minus-circle"></i> Desventajas</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Desacoplamiento:</strong> Las entidades no necesitan conocerse entre sí.</td>
<td><strong>Performance:</strong> El intermediario (Broker) puede añadir latencia.</td>
</tr>
<tr>
<td><strong>Contexto:</strong> Evita entidades "Dios" que manejan todo.</td>
<td><strong>Consistencia Eventual:</strong> El cambio no es inmediato en todo el sistema.</td>
</tr>
<tr>
<td><strong>Escalabilidad:</strong> Es fácil añadir nuevos suscriptores sin tocar el código existente.</td>
<td><strong>Complejidad:</strong> Es más difícil seguir el flujo lógico del código.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="slide-container" id="slide10">
<h2 class="slide-title">POE en la práctica: JavaFX</h2>
<div class="content-area">
<div class="tiled-content">
<div class="tile">
<div class="icon"><i class="fas fa-bullseye"></i></div>
<h3>Source</h3>
<p>El objeto donde se originó el evento (ej: un Button).</p>
</div>
<div class="tile">
<div class="icon"><i class="fas fa-fingerprint"></i></div>
<h3>TargetType</h3>
<p>Define la naturaleza del cambio (Mouse, Key, Action).</p>
</div>
<div class="tile">
<div class="icon"><i class="fas fa-check-double"></i></div>
<h3>Consumed</h3>
<p>Flag que indica si el evento ya fue procesado. Si es <code>true</code>, se detiene.</p>
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide11">
<h2 class="slide-title">Jerarquía de Clases</h2>
<div class="content-area">
<div class="two-column">
<div class="bullet-list">
<ul>
<li><i class="fas fa-sitemap"></i> <strong>EventObject:</strong> La base de Java Core.</li>
<li><i class="fas fa-long-arrow-alt-down"></i> <strong>Event:</strong> La clase base de JavaFX.</li>
<li><i class="fas fa-share-alt"></i> <strong>Subtipos:</strong> InputEvent, WindowEvent, ActionEvent.</li>
<li><i class="fas fa-mouse"></i> <strong>Hojas:</strong> MouseEvent, KeyEvent, ScrollEvent...</li>
</ul>
</div>
<div class="image-wrapper">
<img src="http://googleusercontent.com/image_collection/image_retrieval/10427885148820325841" alt="JavaFX Event Hierarchy">
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide12">
<h2 class="slide-title">¿Cómo se disparan?</h2>
<div class="content-area">
<div class="two-column">
<div class="image-wrapper">
<img src="http://googleusercontent.com/image_collection/image_retrieval/2317686888604813405" alt="Event Dispatch Chain">
</div>
<div>
<h3>Fases del Despacho</h3>
<div class="timeline-layout" style="flex-direction: column; gap: 20px; margin:0;">
<div class="timeline-item" style="width: 100%;">
<strong style="color: #22d3ee;">1. Capturing (Discovery):</strong> El evento viaja desde la Escena hacia abajo hasta el nodo objetivo.
</div>
<div class="timeline-item" style="width: 100%;">
<strong style="color: #84cc16;">2. Bubbling:</strong> El evento "rebota" y viaja desde el nodo objetivo hacia arriba por la jerarquía.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-container" id="slide13">
<div class="title-layout">
<h1>¿Preguntas?</h1>
<p class="subtitle">Lectura recomendada: "Metamorfosis Asincrónica" de Federico Brasburg.</p>
<p style="margin-top: 50px; color: #94a3b8;">Programación Orientada a Eventos - Conceptos Básicos</p>
</div>
</div>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
13
Requests
5
Domains
238KB
Transfer Size
322KB
Content Size
249.0ms
Dom Content Loaded
312.0ms
First Paint
429.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...