1497 lines
64 KiB
HTML
1497 lines
64 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Propuesta Corporativa 2026 — Plataforma de Intranet</title>
|
||
|
||
<!-- Reveal.js CDN -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css" />
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/black.css" />
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=Outfit:wght@300;400;600;700;900&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet" />
|
||
|
||
<style>
|
||
/* ─── Base Overrides ──────────────────────────────── */
|
||
:root {
|
||
--gold: #C9973C;
|
||
--gold-light: #F0C060;
|
||
--ivory: #F5F4F1;
|
||
--navy: #0D1B2A;
|
||
--plum: #1A0E2E;
|
||
--viridian: #0A2520;
|
||
--espresso: #1C0E08;
|
||
--ink: #0F0D0A;
|
||
--muted: rgba(255,255,255,0.45);
|
||
--border: rgba(255,255,255,0.09);
|
||
}
|
||
|
||
.reveal-viewport { background: #080608; }
|
||
|
||
.reveal {
|
||
font-family: 'Inter', sans-serif;
|
||
color: #fff;
|
||
}
|
||
|
||
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
|
||
font-family: 'Inter', sans-serif;
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
text-transform: none;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.reveal p, .reveal li { font-family: 'Outfit', sans-serif; font-weight: 300; }
|
||
|
||
/* ─── Slide base ──────────────────────────────────── */
|
||
.reveal .slides section {
|
||
padding: 0;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
top: 0 !important;
|
||
}
|
||
.reveal .slides section.present {
|
||
display: flex !important;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* ─── Utility ─────────────────────────────────────── */
|
||
.gold { color: var(--gold); }
|
||
.muted { color: var(--muted); }
|
||
.mono { font-family: 'Fira Code', monospace; font-size: 0.82em; }
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 3px 12px;
|
||
border-radius: 9999px;
|
||
border: 1px solid rgba(201,151,60,0.35);
|
||
color: var(--gold);
|
||
font-size: 0.55em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
.dot-pulse {
|
||
display: inline-block;
|
||
width: 8px; height: 8px;
|
||
border-radius: 50%;
|
||
background: #34D399;
|
||
margin-right: 8px;
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
||
|
||
.reveal .slides section.cover-slide {
|
||
background: linear-gradient(135deg, var(--navy) 0%, var(--plum) 55%, var(--viridian) 100%);
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ─── Slide: cover ────────────────────────────────── */
|
||
.cover-slide::before {
|
||
content:'';
|
||
position: absolute;
|
||
top:-120px; right:-120px;
|
||
width: 500px; height: 500px;
|
||
background: radial-gradient(circle, rgba(201,151,60,0.14) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.cover-slide::after {
|
||
content:'';
|
||
position: absolute;
|
||
bottom:-80px; left:-80px;
|
||
width: 400px; height: 400px;
|
||
background: radial-gradient(circle, rgba(10,37,32,0.8) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.cover-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cover-brand-icon {
|
||
width: 56px; height: 56px;
|
||
background: rgba(201,151,60,0.15);
|
||
border-radius: 16px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.cover-brand-icon svg { width: 32px; height: 32px; }
|
||
.cover-title {
|
||
font-size: 3.4em !important;
|
||
margin: 0 !important;
|
||
background: linear-gradient(90deg, #fff 60%, var(--gold-light));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cover-sub {
|
||
font-size: 1.05em;
|
||
color: rgba(255,255,255,0.50);
|
||
font-weight: 300;
|
||
margin: 12px 0 40px !important;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cover-meta {
|
||
font-size: 0.6em;
|
||
color: rgba(255,255,255,0.30);
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cover-divider {
|
||
width: 60px; height: 2px;
|
||
background: var(--gold);
|
||
border-radius: 9999px;
|
||
margin: 18px auto;
|
||
}
|
||
|
||
/* ─── Slide: content ──────────────────────────────── */
|
||
.content-slide {
|
||
padding: 52px 64px !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
.content-slide h2 {
|
||
font-size: 1.7em !important;
|
||
margin: 8px 0 28px !important;
|
||
color: #fff;
|
||
}
|
||
.content-slide h3 {
|
||
font-size: 1.1em !important;
|
||
color: var(--gold) !important;
|
||
margin: 0 0 10px !important;
|
||
}
|
||
|
||
/* ─── Cards ───────────────────────────────────────── */
|
||
.cards-row {
|
||
display: grid;
|
||
gap: 16px;
|
||
width: 100%;
|
||
}
|
||
.cards-row.cols-2 { grid-template-columns: 1fr 1fr; }
|
||
.cards-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.cards-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
||
.cards-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
|
||
|
||
.jewel-card {
|
||
border-radius: 16px;
|
||
padding: 24px 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.jewel-card::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:-40px;right:-40px;
|
||
width:160px;height:160px;
|
||
background:radial-gradient(circle,var(--glow,rgba(201,151,60,0.12)) 0%,transparent 70%);
|
||
pointer-events:none;
|
||
}
|
||
.jewel-card--navy { background: var(--navy); --glow: rgba(201,151,60,0.14); }
|
||
.jewel-card--plum { background: var(--plum); --glow: rgba(124,58,237,0.18); }
|
||
.jewel-card--viridian{ background: var(--viridian);--glow: rgba(16,185,129,0.15); }
|
||
.jewel-card--espresso{ background: var(--espresso);--glow: rgba(251,146,60,0.15); }
|
||
.jewel-card--slate { background: #111827; --glow: rgba(99,102,241,0.14); }
|
||
|
||
.jewel-card .card-icon {
|
||
font-size: 1.8em;
|
||
margin-bottom: 12px;
|
||
display: block;
|
||
}
|
||
.jewel-card h3 {
|
||
font-size: 0.75em !important;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: #fff !important;
|
||
margin: 0 0 6px !important;
|
||
}
|
||
.jewel-card p {
|
||
font-size: 0.62em;
|
||
color: rgba(255,255,255,0.42);
|
||
line-height: 1.65;
|
||
margin: 0 !important;
|
||
}
|
||
.jewel-card:hover {
|
||
transform: translateY(-5px);
|
||
border-color: rgba(201,151,60,0.4);
|
||
}
|
||
|
||
/* ─── Light cards ─────────────────────────────────── */
|
||
.light-card {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-radius: 14px;
|
||
padding: 20px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.light-card h3 { font-size: 0.78em !important; color: #fff !important; margin: 0 0 8px !important; }
|
||
.light-card p { font-size: 0.62em; color: var(--muted); line-height: 1.65; margin: 0 !important; }
|
||
.light-card:hover {
|
||
background: rgba(255,255,255,0.07);
|
||
border-color: rgba(255,255,255,0.15);
|
||
}
|
||
|
||
/* ─── Table ───────────────────────────────────────── */
|
||
.prop-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.58em;
|
||
}
|
||
.prop-table th {
|
||
text-align: left;
|
||
padding: 10px 14px;
|
||
font-size: 0.9em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
border-bottom: 1px solid rgba(201,151,60,0.3);
|
||
}
|
||
.prop-table td {
|
||
padding: 10px 14px;
|
||
color: rgba(255,255,255,0.75);
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
line-height: 1.5;
|
||
vertical-align: top;
|
||
}
|
||
.prop-table tr:hover td { background: rgba(255,255,255,0.03); }
|
||
.check { color: #34D399; font-weight: 900; }
|
||
.warn { color: #FBBF24; }
|
||
.cross { color: #F87171; }
|
||
.highlight-td {
|
||
background: rgba(201,151,60,0.08);
|
||
border-left: 2px solid var(--gold);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* ─── Timeline ────────────────────────────────────── */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
.timeline::before {
|
||
content:'';
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 0; bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, var(--gold), rgba(201,151,60,0.1));
|
||
}
|
||
.tl-item {
|
||
display: flex;
|
||
gap: 24px;
|
||
padding: 0 0 15px 0;
|
||
position: relative;
|
||
}
|
||
.tl-dot {
|
||
width: 38px; height: 38px;
|
||
border-radius: 50%;
|
||
background: var(--navy);
|
||
border: 2px solid var(--gold);
|
||
flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.85em;
|
||
font-weight: 900;
|
||
color: var(--gold);
|
||
z-index: 1;
|
||
}
|
||
.tl-content { flex: 1; padding-top: 4px; }
|
||
.tl-phase {
|
||
font-size: 0.55em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
margin-bottom: 2px;
|
||
}
|
||
.tl-title {
|
||
font-size: 0.75em !important;
|
||
color: #fff !important;
|
||
margin: 0 0 4px !important;
|
||
font-weight: 700;
|
||
}
|
||
.tl-desc { font-size: 0.6em; color: var(--muted); line-height: 1.5; }
|
||
|
||
/* ─── Stack pills ─────────────────────────────────── */
|
||
.stack-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(255,255,255,0.06);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 10px;
|
||
padding: 10px 16px;
|
||
font-size: 0.62em;
|
||
color: #fff;
|
||
font-family: 'Fira Code', monospace;
|
||
}
|
||
.stack-pill .version {
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
.stack-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ─── Status badge ────────────────────────────────── */
|
||
.status-done { color: #34D399; font-weight: 700; }
|
||
.status-wip { color: #FBBF24; font-weight: 700; }
|
||
.status-planned { color: #94A3B8; font-weight: 700; }
|
||
|
||
/* ─── Big number KPI ──────────────────────────────── */
|
||
.kpi-row { display: flex; gap: 24px; width: 100%; }
|
||
.kpi-box {
|
||
flex: 1;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-top: 3px solid var(--accent, var(--gold));
|
||
border-radius: 14px;
|
||
padding: 22px 18px;
|
||
}
|
||
.kpi-box .kpi-num {
|
||
font-size: 2em;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
.kpi-box .kpi-label {
|
||
font-size: 0.55em;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
.kpi-box .kpi-sub {
|
||
font-size: 0.58em;
|
||
color: var(--accent, var(--gold));
|
||
font-weight: 600;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ─── SSO Flow Diagram ────────────────────────────── */
|
||
.sso-flow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
font-size: 0.55em;
|
||
}
|
||
.sso-node {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-radius: 12px;
|
||
padding: 15px 12px;
|
||
width: 18%;
|
||
text-align: center;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
.sso-node.active-directory {
|
||
border-color: #34D399;
|
||
background: rgba(52,211,153,0.04);
|
||
}
|
||
.sso-node.nest-api {
|
||
border-color: #F43F5E;
|
||
background: rgba(244,63,94,0.04);
|
||
}
|
||
.sso-arrow {
|
||
color: var(--gold);
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
}
|
||
.sso-node h4 {
|
||
font-size: 0.9em !important;
|
||
color: #fff !important;
|
||
margin: 0 0 6px 0 !important;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.sso-node p {
|
||
color: var(--muted);
|
||
font-size: 0.85em;
|
||
line-height: 1.4;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* ─── Folder Tree Diagram ─────────────────────────── */
|
||
.tree-structure {
|
||
font-family: 'Fira Code', monospace;
|
||
font-size: 0.52em;
|
||
color: rgba(255,255,255,0.8);
|
||
background: rgba(0,0,0,0.2);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 16px 24px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
line-height: 1.5;
|
||
}
|
||
.tree-dir { color: var(--gold-light); font-weight: bold; }
|
||
.tree-file { color: #fff; }
|
||
.tree-comment { color: var(--muted); font-size: 0.9em; margin-left: 10px; }
|
||
|
||
/* ─── Gantt Chart Diagram ─────────────────────────── */
|
||
.gantt-chart {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
.gantt-row {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.55em;
|
||
}
|
||
.gantt-label {
|
||
width: 220px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
text-align: right;
|
||
padding-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
.gantt-timeline-container {
|
||
flex: 1;
|
||
position: relative;
|
||
height: 24px;
|
||
background: rgba(255,255,255,0.03);
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
}
|
||
.gantt-bar {
|
||
position: absolute;
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
font-size: 0.85em;
|
||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||
}
|
||
.gantt-axis {
|
||
display: flex;
|
||
margin-left: 220px;
|
||
border-top: 1px dashed rgba(255,255,255,0.1);
|
||
padding-top: 6px;
|
||
font-family: 'Fira Code', monospace;
|
||
font-size: 0.52em;
|
||
color: var(--muted);
|
||
}
|
||
.gantt-axis span {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ─── Color Swatch UI ─────────────────────────────── */
|
||
.color-swatch-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
}
|
||
.color-swatch-card {
|
||
flex: 1;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
font-size: 0.55em;
|
||
}
|
||
.color-box {
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.color-swatch-card h4 {
|
||
font-size: 1.1em !important;
|
||
color: #fff !important;
|
||
margin: 0 0 4px 0 !important;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.color-swatch-card p {
|
||
color: var(--muted);
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* ─── Closing slide ───────────────────────────────── */
|
||
.closing-slide {
|
||
background: linear-gradient(135deg, var(--ink) 0%, #0d0a18 100%) !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
text-align: center !important;
|
||
}
|
||
.closing-contact {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.closing-contact span {
|
||
font-size: 0.65em;
|
||
color: rgba(255,255,255,0.40);
|
||
}
|
||
.closing-contact strong { color: rgba(255,255,255,0.75); font-weight: 600; }
|
||
|
||
/* ─── Progress bar ────────────────────────────────── */
|
||
.reveal .progress { background: rgba(201,151,60,0.15); }
|
||
.reveal .progress span { background: var(--gold); }
|
||
|
||
/* ─── Navigation ──────────────────────────────────── */
|
||
.reveal .controls { color: var(--gold); }
|
||
.reveal .slide-number { color: var(--gold); font-family: 'Fira Code', monospace; font-size: 0.7em; }
|
||
|
||
/* ─── Slide number box ────────────────────────────── */
|
||
.slide-label {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 36px;
|
||
font-family: 'Fira Code', monospace;
|
||
font-size: 0.52em;
|
||
color: rgba(255,255,255,0.20);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
/* ─── Print / PDF ─────────────────────────────────── */
|
||
@media print {
|
||
.reveal .slides { zoom: 0.7; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="reveal">
|
||
<div class="slides">
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 1 — COVER
|
||
Fiel a la propuesta /doc/propuesta_kinetix.md
|
||
SIN NOMBRE DE APP
|
||
══════════════════════════════════════════════ -->
|
||
<section class="cover-slide">
|
||
<div class="cover-brand">
|
||
<div class="cover-brand-icon">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L22 7L12 12L2 7L12 2Z" stroke="#C9973C" stroke-width="1.8" stroke-linejoin="round"/>
|
||
<path d="M2 12L12 17L22 12" stroke="#C9973C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M2 17L12 22L22 17" stroke="#C9973C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h1 class="cover-title" style="font-size: 2.8em !important;">Intranet Corporativa</h1>
|
||
<p class="cover-sub">Plataforma de Nueva Generación · Propuesta Técnica y Comercial</p>
|
||
<div class="cover-divider"></div>
|
||
<p class="cover-meta">
|
||
<span class="dot-pulse"></span>
|
||
Preparado por: Jess Miller · Arquitecta de Software Senior · Junio 2026
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 2 — RESUMEN EJECUTIVO
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0a0810;">
|
||
<div class="slide-label">01 / 19</div>
|
||
<div class="tag">Resumen Ejecutivo</div>
|
||
<h2>Una plataforma integrada y <span class="gold">lista para producción</span></h2>
|
||
<div class="kpi-row" style="margin-top: 8px;">
|
||
<div class="kpi-box" style="--accent:#C9973C;">
|
||
<div class="kpi-num">5</div>
|
||
<div class="kpi-label">Módulos core</div>
|
||
<div class="kpi-sub">Directorio · Espacios · Workflow · CMS · Tickets</div>
|
||
</div>
|
||
<div class="kpi-box" style="--accent:#34D399;">
|
||
<div class="kpi-num">SSO</div>
|
||
<div class="kpi-label">Azure Entra ID</div>
|
||
<div class="kpi-sub">Autenticación nativa de nivel empresarial</div>
|
||
</div>
|
||
<div class="kpi-box" style="--accent:#A78BFA;">
|
||
<div class="kpi-num">100%</div>
|
||
<div class="kpi-label">Código Abierto</div>
|
||
<div class="kpi-sub">Angular 18 · NestJS 10 · PostgreSQL 15</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:22px; padding:16px 20px; background:rgba(201,151,60,0.07); border-left:3px solid var(--gold); border-radius:0 10px 10px 0; width: 100%; box-sizing: border-box;">
|
||
<p style="font-size:0.65em; color:rgba(255,255,255,0.75); line-height:1.75; margin:0;">
|
||
<strong>LA PLATAFORMA NO ES UN PROTOTIPO.</strong> Se presenta como una solución central de intranet corporativa completamente funcional en desarrollo activo, con frontends y backends estables. Consolida procesos dispersos, garantiza seguridad empresarial y otorga propiedad total del código al cliente sin dependencias ni vendor lock-in.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 3 — EL PROBLEMA
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">02 / 19</div>
|
||
<div class="tag">El Diagnóstico</div>
|
||
<h2>El impacto de la <span class="gold">fragmentación de herramientas</span></h2>
|
||
<table class="prop-table" style="margin-top: 12px;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40%;">Síntoma Operativo</th>
|
||
<th style="width: 60%;">Impacto en el Negocio</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Fragmentación de herramientas</strong></td>
|
||
<td>Pérdida de tiempo, ineficiencia operativa y errores de coordinación interdepartamental.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Sin integración con Active Directory</strong></td>
|
||
<td>Onboarding y offboarding lentos, gestión manual de accesos y serios riesgos de seguridad.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Reservas de salas sin control centralizado</strong></td>
|
||
<td>Conflictos de disponibilidad, overbooking y salas de reuniones subutilizadas.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Aprobaciones de contenidos por correo/chats</strong></td>
|
||
<td>Falta absoluta de trazabilidad, cuellos de botella operativos y pérdida de historial.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Directorio de personal desactualizado</strong></td>
|
||
<td>Dificultad para localizar habilidades internas, baja colaboración y silos de información.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 4 — LA SOLUCIÓN
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#08060e;">
|
||
<div class="slide-label">03 / 19</div>
|
||
<div class="tag">La Propuesta</div>
|
||
<h2>Un ecosistema. <span class="gold">Todos los procesos internos en uno.</span></h2>
|
||
|
||
<div style="background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: 100%; box-sizing: border-box; margin-top: 10px;">
|
||
<div style="display: flex; justify-content: space-around; align-items: center; text-align: center; margin-bottom: 20px;">
|
||
<div style="background: var(--navy); border: 1px solid rgba(201,151,60,0.3); border-radius: 12px; padding: 12px; width: 18%;">
|
||
<span style="font-size: 1.2em;">🏢</span>
|
||
<h4 style="font-size: 0.6em !important; margin: 4px 0 0 0 !important; color: #fff !important;">Directorio (IAM)</h4>
|
||
</div>
|
||
<div style="background: var(--plum); border: 1px solid rgba(201,151,60,0.3); border-radius: 12px; padding: 12px; width: 18%;">
|
||
<span style="font-size: 1.2em;">📅</span>
|
||
<h4 style="font-size: 0.6em !important; margin: 4px 0 0 0 !important; color: #fff !important;">Espacios & IA</h4>
|
||
</div>
|
||
<div style="background: var(--viridian); border: 1px solid rgba(201,151,60,0.3); border-radius: 12px; padding: 12px; width: 18%;">
|
||
<span style="font-size: 1.2em;">⚙️</span>
|
||
<h4 style="font-size: 0.6em !important; margin: 4px 0 0 0 !important; color: #fff !important;">Aprobaciones BPM</h4>
|
||
</div>
|
||
<div style="background: var(--espresso); border: 1px solid rgba(201,151,60,0.3); border-radius: 12px; padding: 12px; width: 18%;">
|
||
<span style="font-size: 1.2em;">📰</span>
|
||
<h4 style="font-size: 0.6em !important; margin: 4px 0 0 0 !important; color: #fff !important;">Info Hub CMS</h4>
|
||
</div>
|
||
<div style="background: #111827; border: 1px solid rgba(201,151,60,0.3); border-radius: 12px; padding: 12px; width: 18%;">
|
||
<span style="font-size: 1.2em;">🎫</span>
|
||
<h4 style="font-size: 0.6em !important; margin: 4px 0 0 0 !important; color: #fff !important;">Ticketing SLA</h4>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 16px; font-size: 0.6em;">
|
||
<div style="text-align: left;"><span class="gold">🔑 Autenticación SSO:</span> Microsoft Azure Entra ID / Tokens JWT</div>
|
||
<div style="text-align: center;"><span class="gold">🐘 Persistencia:</span> PostgreSQL (ACID) & Prisma ORM</div>
|
||
<div style="text-align: right;"><span class="gold">🐳 Infraestructura:</span> Docker / Cloud Ready</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size: 0.65em; color: var(--muted); margin-top: 20px; text-align: center; width: 100%;">
|
||
La solución consolida la seguridad y la experiencia del usuario bajo un mismo diseño unificado y coherente.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 5 — MÓDULO 1: DIRECTORIO CORPORATIVO
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0b0510;">
|
||
<div class="slide-label">04 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2>Módulo 1: Directorio Corporativo <span class="gold">(IAM / HR)</span></h2>
|
||
<div class="cards-row cols-2" style="margin-top: 10px;">
|
||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||
<div class="light-card">
|
||
<h3>👥 Sincronización Azure Entra ID</h3>
|
||
<p>Lectura directa de usuarios, departamentos y jerarquías sin replicar datos sensibles de manera local.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🔍 Búsqueda Reactiva en Tiempo Real</h3>
|
||
<p>Búsqueda instantánea integrada con Angular Signals. Filtros por rol, departamento o habilidades específicas de manera fluida.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||
<div class="light-card">
|
||
<h3>🆔 Perfiles de Colaborador Detallados</h3>
|
||
<p>Muestra ID del directorio (AD-XXXX), tarifa por hora, badge de calificación y datos de contacto integrados.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>⚡ Interfaz Ergónomica e Inmersiva</h3>
|
||
<p>Tarjetas de personal dinámicas con micro-interacciones de hover y navegación rápida a información de contacto.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 6 — MÓDULO 2: GESTIÓN DE ESPACIOS
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">05 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2>Módulo 2: Autogestión de Espacios y Reservas <span class="gold">(PMS)</span></h2>
|
||
<div class="cards-row cols-2" style="margin-top: 5px;">
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div class="light-card" style="padding: 15px;">
|
||
<h3>📅 Calendario Interactivo</h3>
|
||
<p>Vistas completas de Mes, Semana y Día. Clic en cualquier bloque de tiempo disponible redirige al formulario con parámetros precargados.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 15px;">
|
||
<h3>🛡️ Anti-Overbooking Garantizado</h3>
|
||
<p>Control transaccional estricto en base de datos PostgreSQL, asegurando consistencia absoluta sin duplicidad de reservas.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 15px;">
|
||
<h3>⚙️ Filtros por Tipo de Activo</h3>
|
||
<p>Filtrado de recursos en tiempo real: salas de reuniones, equipos tecnológicos, vehículos y áreas comunes.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: var(--plum); border-radius: 16px; padding: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 12px;">
|
||
<div style="font-size: 0.55em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,151,60,0.8);">🤖 ASISTENTE DE IA INTEGRADO (NLP)</div>
|
||
<p style="font-size: 0.6em; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0 !important;">
|
||
El usuario puede agendar recursos usando lenguaje natural de forma intuitiva:
|
||
</p>
|
||
<div style="background: rgba(0,0,0,0.3); border-radius: 10px; padding: 14px; font-family: 'Fira Code', monospace; font-size: 0.58em; color: rgba(255,255,255,0.75); line-height: 1.8;">
|
||
<span style="color: var(--gold);">Entrada libre:</span><br/>
|
||
"Reservar la sala Londres para mañana a las 10 am para 8 personas"<br/>
|
||
<br/>
|
||
<span style="color: #34D399;">Variables detectadas por IA:</span><br/>
|
||
• Espacio: London Hall (ID: SALA-02)<br/>
|
||
• Fecha: 2026-06-17 (Calculado)<br/>
|
||
• Hora: 10:00 AM - 11:00 AM<br/>
|
||
• Participantes: 8 colaboradores
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 7 — MÓDULO 3: WORKFLOW DE APROBACIÓN
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0a0510;">
|
||
<div class="slide-label">06 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2>Módulo 3: Workflow de Aprobación y Publicación <span class="gold">(BPM)</span></h2>
|
||
<div class="cards-row cols-2" style="margin-top: 10px;">
|
||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||
<div class="light-card">
|
||
<h3>⚙️ Motor de Reglas Jerárquicas</h3>
|
||
<p>Flujo estructurado multinivel basado en roles de Active Directory. Asigna aprobadores de manera automática según el departamento.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>📈 Trazabilidad de Estados</h3>
|
||
<p>Control exacto del estado de cada solicitud (Borrador → En Aprobación → Aprobado → Publicado) con auditoría histórica detallada.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||
<div class="light-card">
|
||
<h3>🔔 Notificaciones y Alertas Reactivas</h3>
|
||
<p>Integración directa con el sistema de mensajería para avisos de solicitudes pendientes, garantizando flujos de trabajo sin demoras.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>📰 Integración con Canales CMS</h3>
|
||
<p>Una vez aprobado el contenido corporativo, el motor realiza la publicación automática en los tableros del Info Hub de la empresa.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 8 — MÓDULOS 4 & 5: CMS & TICKETING
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#050508;">
|
||
<div class="slide-label">07 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2>Módulos 4 & 5: Info Hub CMS y Ticketing</h2>
|
||
<div class="cards-row cols-2" style="margin-top: 10px;">
|
||
<div class="jewel-card jewel-card--espresso">
|
||
<span class="card-icon">📰</span>
|
||
<h3>Módulo 4: Info Hub / CMS Corporativo</h3>
|
||
<p style="margin-bottom: 12px !important;">Gestión y publicación de información interna en un portal centralizado de noticias corporativas.</p>
|
||
<ul style="font-size: 0.58em; color: rgba(255,255,255,0.6); padding-left: 18px; margin: 0; line-height: 1.7;">
|
||
<li>Editor WYSIWYG de contenidos enriquecidos</li>
|
||
<li>Categorías y taxonomías customizables</li>
|
||
<li>Programación de comunicados a futuro</li>
|
||
<li>Publicación segmentada por departamento o rol</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="jewel-card jewel-card--slate">
|
||
<span class="card-icon">🎫</span>
|
||
<h3>Módulo 5: Soporte Técnico e Incidencias</h3>
|
||
<p style="margin-bottom: 12px !important;">Mesa de ayuda integrada para gestionar requerimientos de soporte interno técnico, operacional y de RR.HH.</p>
|
||
<ul style="font-size: 0.58em; color: rgba(255,255,255,0.6); padding-left: 18px; margin: 0; line-height: 1.7;">
|
||
<li>Creación de solicitudes con prioridades claras</li>
|
||
<li>Asignación automatizada según especialidad del agente</li>
|
||
<li>Control de Tiempos de Respuesta y SLAs por ticket</li>
|
||
<li>Dashboard de resolución para coordinadores de mesa</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 9 — STACK TECNOLÓGICO
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">08 / 19</div>
|
||
<div class="tag">Arquitectura de Software</div>
|
||
<h2>Stack Tecnológico Moderno y <span class="gold">Open Source</span></h2>
|
||
|
||
<table class="prop-table" style="margin-top: 8px;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 20%;">Capa</th>
|
||
<th style="width: 30%;">Tecnología Utilizada</th>
|
||
<th style="width: 15%;">Versión</th>
|
||
<th style="width: 35%;">Justificación y Beneficio</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Frontend</strong></td>
|
||
<td>Angular (Standalone Components & Signals)</td>
|
||
<td>18.0</td>
|
||
<td>Framework enterprise mantenido por Google, alta reactividad y orden.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Backend</strong></td>
|
||
<td>NestJS (REST API)</td>
|
||
<td>10.0</td>
|
||
<td>Arquitectura modular sólida basada en TypeScript, fácil mantenimiento.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Autenticación</strong></td>
|
||
<td>Azure Entra ID + JWT (SSO)</td>
|
||
<td>Estándar</td>
|
||
<td>Integración corporativa directa con el Active Directory de la empresa.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Base de Datos</strong></td>
|
||
<td>PostgreSQL + Prisma ORM</td>
|
||
<td>15 / v5</td>
|
||
<td>Garantiza transacciones ACID indispensables para evitar overbooking de salas.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Infraestructura</strong></td>
|
||
<td>Docker + Docker Compose</td>
|
||
<td>v3.8</td>
|
||
<td>Asegura portabilidad absoluta y despliegue rápido en local o cloud.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 10 — SEGURIDAD SSO / AD FLUX
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#060a06;">
|
||
<div class="slide-label">09 / 19</div>
|
||
<div class="tag">Seguridad Corporativa</div>
|
||
<h2>Arquitectura SSO: <span class="gold">Cero almacenamiento de credenciales</span></h2>
|
||
|
||
<div class="sso-flow">
|
||
<div class="sso-node">
|
||
<h4>1. Usuario</h4>
|
||
<p>Accede a la plataforma web desde el navegador.</p>
|
||
</div>
|
||
<div class="sso-arrow">➔</div>
|
||
<div class="sso-node active-directory">
|
||
<h4>2. Azure Entra ID</h4>
|
||
<p>Autenticación delegada (OAuth2) con credenciales corporativas.</p>
|
||
</div>
|
||
<div class="sso-arrow">➔</div>
|
||
<div class="sso-node">
|
||
<h4>3. Token JWT</h4>
|
||
<p>Retorna token con identidad y pertenencia a grupos de AD.</p>
|
||
</div>
|
||
<div class="sso-arrow">➔</div>
|
||
<div class="sso-node nest-api">
|
||
<h4>4. NestJS API</h4>
|
||
<p>Decodifica y valida firma del JWT por cada petición HTTP.</p>
|
||
</div>
|
||
<div class="sso-arrow">➔</div>
|
||
<div class="sso-node">
|
||
<h4>5. Autorización</h4>
|
||
<p>Acceso concedido según rol: employee, manager o admin.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; display: flex; gap: 16px; width: 100%;">
|
||
<div style="flex: 1; padding: 14px 18px; background: rgba(52,211,153,0.07); border-left: 3px solid #34D399; border-radius: 0 10px 10px 0;">
|
||
<p style="font-size: 0.6em; color: rgba(255,255,255,0.75); margin: 0;">
|
||
<strong style="color: #34D399;">OWASP Top 10 Compliance:</strong> Toda la transmisión de datos corre sobre HTTPS y los permisos expiran automáticamente mediante tokens JWT firmados.
|
||
</p>
|
||
</div>
|
||
<div style="flex: 1; padding: 14px 18px; background: rgba(167,139,250,0.07); border-left: 3px solid #A78BFA; border-radius: 0 10px 10px 0;">
|
||
<p style="font-size: 0.6em; color: rgba(255,255,255,0.75); margin: 0;">
|
||
<strong style="color: #A78BFA;">Control Centralizado:</strong> Si se da de baja un colaborador en el AD corporativo de la empresa, pierde acceso de forma inmediata y automática a la intranet.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 11 — ESTRUCTURA DEL PROYECTO
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">10 / 19</div>
|
||
<div class="tag">Ingeniería de Software</div>
|
||
<h2>Arquitectura de Repositorio Estructurado</h2>
|
||
|
||
<div class="tree-structure" style="margin-top: 10px;">
|
||
<span class="tree-dir">proyecto-intranet/</span><br/>
|
||
├── <span class="tree-dir">frontend/</span><span class="tree-comment">← Aplicación Angular 18 (Standalone Components + Signals)</span><br/>
|
||
│ └── src/app/<br/>
|
||
│ ├── <span class="tree-dir">core/</span><span class="tree-comment">← Guard SSO, interceptores HTTP, auth services y manejo de tokens</span><br/>
|
||
│ ├── <span class="tree-dir">shared/</span><span class="tree-comment">← Componentes del Design System y pipes comunes</span><br/>
|
||
│ └── <span class="tree-dir">features/</span><span class="tree-comment">← Módulos funcionales (directorio, calendar-booking, etc.)</span><br/>
|
||
├── <span class="tree-dir">backend/</span><span class="tree-comment">← REST API en NestJS (TypeScript modular estructurado)</span><br/>
|
||
│ └── src/<br/>
|
||
│ ├── <span class="tree-dir">auth/</span><span class="tree-comment">← Módulo Passport con validación JWT de Azure Entra ID</span><br/>
|
||
│ ├── <span class="tree-dir">directory/</span> / <span class="tree-dir">spaces/</span> / <span class="tree-dir">workflow/</span><span class="tree-comment">← Módulos con lógica empresarial</span><br/>
|
||
├── <span class="tree-dir">standards/</span><span class="tree-comment">← Documentación de calidad de código y especificaciones de diseño</span><br/>
|
||
├── <span class="tree-file">docker-compose.yml</span><span class="tree-comment">← Orquestación local: base de datos PostgreSQL + administradores</span><br/>
|
||
└── <span class="tree-file">setup.ps1</span> / <span class="tree-file">.sh</span><span class="tree-comment">← Scripts de automatización y despliegue rápido para desarrollo</span>
|
||
</div>
|
||
|
||
<p style="font-size: 0.6em; color: var(--gold); margin-top: 15px; font-weight: bold;">
|
||
→ Código limpio, modular y documentado que permite la adición de nuevos desarrolladores de forma ágil.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 12 — DISEÑO E INTERFAZ UI
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0d0d0d;">
|
||
<div class="slide-label">11 / 19</div>
|
||
<div class="tag">Experiencia de Usuario</div>
|
||
<h2>Executive Suite Design System</h2>
|
||
<p style="font-size: 0.65em; color: rgba(255,255,255,0.7); margin: 0 0 10px 0 !important;">
|
||
Diseñado bajo directrices premium que mezclan sobriedad corporativa y tecnología de vanguardia.
|
||
</p>
|
||
|
||
<div class="cards-row cols-3">
|
||
<div class="light-card" style="padding: 16px;">
|
||
<h3>✨ Tipografía Limpia</h3>
|
||
<p>Inter para titulares de gran peso, brindando jerarquía y firmeza, complementada con Outfit para lecturas extensas fluidas.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 16px;">
|
||
<h3>🖼️ Card System Joya</h3>
|
||
<p>Glows de fondo en colores oscuros pero ricos (Navy, Plum, Viridian, Espresso). Estructura elegante sin bordes cargados.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 16px;">
|
||
<h3>🔮 Micro-animaciones</h3>
|
||
<p>Efectos de hover sutiles en tarjetas y botones, feedback inmediato al clickear y transiciones fluidas de página.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch-row">
|
||
<div class="color-swatch-card">
|
||
<div class="color-box" style="background: #F5F4F1;"></div>
|
||
<h4>Ivory (#F5F4F1)</h4>
|
||
<p>Color primario para contraste de textos limpios y de alta legibilidad.</p>
|
||
</div>
|
||
<div class="color-swatch-card">
|
||
<div class="color-box" style="background: #C9973C;"></div>
|
||
<h4>Gold (#C9973C)</h4>
|
||
<p>Dorado corporativo para estados activos, botones primarios y tags.</p>
|
||
</div>
|
||
<div class="color-swatch-card">
|
||
<div class="color-box" style="background: #0D1B2A;"></div>
|
||
<h4>Navy (#0D1B2A)</h4>
|
||
<p>Color de fondo para el Directorio IAM y elementos de seguridad.</p>
|
||
</div>
|
||
<div class="color-swatch-card">
|
||
<div class="color-box" style="background: #1A0E2E;"></div>
|
||
<h4>Plum (#1A0E2E)</h4>
|
||
<p>Fondo sofisticado reservado para calendario, reservas e IA.</p>
|
||
</div>
|
||
<div class="color-swatch-card">
|
||
<div class="color-box" style="background: #0A2520;"></div>
|
||
<h4>Viridian (#0A2520)</h4>
|
||
<p>Tonalidad verde para el motor de reglas y aprobaciones BPM.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 13 — ESTADO ACTUAL
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">12 / 19</div>
|
||
<div class="tag">Estado del Proyecto</div>
|
||
<h2>Módulos desarrollados y <span class="gold">nivel de avance</span></h2>
|
||
|
||
<table class="prop-table" style="margin-top: 10px;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 30%;">Módulo o Componente</th>
|
||
<th style="width: 20%;">Avance</th>
|
||
<th style="width: 50%;">Detalles Técnicos Implementados</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Autenticación SSO corporativo</strong></td>
|
||
<td class="status-done">✅ Implementado</td>
|
||
<td>Módulo Auth JWT en NestJS, interceptores en Angular y Guards SSO.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Dashboard & Shell</strong></td>
|
||
<td class="status-done">✅ Implementado</td>
|
||
<td>Sidebar interactivo colapsable, métricas globales, navegación.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Directorio de Personal</strong></td>
|
||
<td class="status-done">✅ Implementado</td>
|
||
<td>Búsqueda reactiva con Signals, filtros por departamento, tarjetas de AD.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Calendario de Reservas</strong></td>
|
||
<td class="status-done">✅ Implementado</td>
|
||
<td>Calendario reactivo en frontend con vistas de Mes, Semana y Día.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Formulario de Reservas + IA</strong></td>
|
||
<td class="status-done">✅ Implementado</td>
|
||
<td>Parser NLP configurado con mock local y listado de consumo HTTP.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Workflow de Aprobación BPM</strong></td>
|
||
<td class="status-wip">🔄 En Desarrollo</td>
|
||
<td>Estructuración del motor de jerarquías y vistas de historial de cambios.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Info Hub CMS / Ticketing SLA</strong></td>
|
||
<td class="status-planned">📋 Planificado</td>
|
||
<td>Diseño de tablas de base de datos definidos en esquemas de Prisma.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 14 — PLAN DE ACCIÓN FASES 0 & 1
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#07050e;">
|
||
<div class="slide-label">13 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2>Fase 0: Diagnóstico & Fase 1: Setup e Integración</h2>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%; margin-top: 15px;">
|
||
<!-- Fase 0 -->
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
|
||
<div style="font-size: 0.65em; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase;">
|
||
Fase 0 — Diagnóstico y NDA (Semanas 1–2)
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>📋 Kickoff e Inventario Técnico</h3>
|
||
<p>Alineación de objetivos con el departamento de IT y negocio. Definición de ambientes de desarrollo y sandbox.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🔍 Auditoría de Active Directory</h3>
|
||
<p>Revisión de grupos, jerarquías de aprobadores y políticas de acceso a la tenant del cliente.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fase 1 -->
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
|
||
<div style="font-size: 0.65em; font-weight: 700; color: #34D399; letter-spacing: 0.1em; text-transform: uppercase;">
|
||
Fase 1 — Setup y Conexión SSO (Semanas 3–4)
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🛡️ Integración Microsoft Entra ID</h3>
|
||
<p>Conexión directa de SSO vía OAuth2 en entorno de Staging. Traspaso de token JWT con claims asignados.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🐘 Despliegue de DB de Producción</h3>
|
||
<p>Instalación de base de datos PostgreSQL, ejecución de esquemas Prisma y pruebas de concurrencia base.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 18px; font-size: 0.6em; background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.2); padding: 10px 15px; border-radius: 8px; width: 100%; box-sizing: border-box;">
|
||
<span style="font-weight: bold; color: #34D399;">🔑 HITO CLAVE FASE 1:</span> Inicio de sesión exitoso de usuarios del cliente en ambiente de Staging usando sus credenciales corporativas reales.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 15 — PLAN DE ACCIÓN FASES 2, 3 & 4
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#08060c;">
|
||
<div class="slide-label">14 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2>Fases 2, 3 & 4: Módulos Core, Secundarios y Go-Live</h2>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; width: 100%; margin-top: 15px;">
|
||
<!-- Fase 2 -->
|
||
<div class="light-card" style="border-top: 3px solid #60A5FA;">
|
||
<span style="font-size: 0.55em; color: #60A5FA; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em;">Fase 2 (Sem 5–10)</span>
|
||
<h3 style="margin-top: 6px !important;">Módulos Core</h3>
|
||
<p style="font-size: 0.58em; line-height: 1.5;">Desarrollo final de los módulos esenciales:</p>
|
||
<ul style="font-size: 0.55em; color: var(--muted); padding-left: 14px; margin-top: 6px; line-height: 1.6;">
|
||
<li>Directorio IAM en Staging</li>
|
||
<li>Reservas e IA integradas</li>
|
||
<li>Motor de Workflow BPM</li>
|
||
<li><strong>Piloto con 50 usuarios</strong></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Fase 3 -->
|
||
<div class="light-card" style="border-top: 3px solid #A78BFA;">
|
||
<span style="font-size: 0.55em; color: #A78BFA; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em;">Fase 3 (Sem 11–14)</span>
|
||
<h3 style="margin-top: 6px !important;">Módulos Secundarios</h3>
|
||
<p style="font-size: 0.58em; line-height: 1.5;">Construcción de soporte e información:</p>
|
||
<ul style="font-size: 0.55em; color: var(--muted); padding-left: 14px; margin-top: 6px; line-height: 1.6;">
|
||
<li>Info Hub CMS con editor</li>
|
||
<li>Ticketing y asignación SLA</li>
|
||
<li>Pruebas de aceptación globales (UAT)</li>
|
||
<li>Congelamiento de código</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Fase 4 -->
|
||
<div class="light-card" style="border-top: 3px solid #F43F5E;">
|
||
<span style="font-size: 0.55em; color: #F43F5E; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em;">Fase 4 (Sem 15–16)</span>
|
||
<h3 style="margin-top: 6px !important;">Go-Live & Traspaso</h3>
|
||
<p style="font-size: 0.58em; line-height: 1.5;">Despliegue y estabilización:</p>
|
||
<ul style="font-size: 0.55em; color: var(--muted); padding-left: 14px; margin-top: 6px; line-height: 1.6;">
|
||
<li>Paso a Producción Cloud</li>
|
||
<li>Capacitación de usuarios</li>
|
||
<li>Traspaso de Runbooks y código</li>
|
||
<li><strong>30 días de garantía incluidos</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 20px; font-size: 0.6em; background: rgba(244,63,94,0.06); border: 1px solid rgba(244,63,94,0.2); padding: 10px 15px; border-radius: 8px; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;">
|
||
<div><span style="font-weight: bold; color: #F43F5E;">🚀 HITO CLAVE FASE 4:</span> Plataforma 100% en vivo para todos los colaboradores de la empresa.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 16 — ROADMAP GANTT VISUAL
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">15 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2>Cronograma General de Trabajo <span class="gold">(16 Semanas)</span></h2>
|
||
|
||
<div class="gantt-chart">
|
||
<!-- Row 0 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-label">Fase 0: Diagnóstico</div>
|
||
<div class="gantt-timeline-container">
|
||
<div class="gantt-bar" style="width: 12.5%; left: 0%; background: #C9973C;">Diagnóstico & AD Audit</div>
|
||
</div>
|
||
</div>
|
||
<!-- Row 1 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-label">Fase 1: Setup & SSO</div>
|
||
<div class="gantt-timeline-container">
|
||
<div class="gantt-bar" style="width: 12.5%; left: 12.5%; background: #34D399;">SSO Azure Staging</div>
|
||
</div>
|
||
</div>
|
||
<!-- Row 2 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-label">Fase 2: Módulos Core</div>
|
||
<div class="gantt-timeline-container">
|
||
<div class="gantt-bar" style="width: 37.5%; left: 25%; background: #60A5FA;">Dir + Espacios IA + BPM + Piloto</div>
|
||
</div>
|
||
</div>
|
||
<!-- Row 3 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-label">Fase 3: Módulos Secundarios</div>
|
||
<div class="gantt-timeline-container">
|
||
<div class="gantt-bar" style="width: 25%; left: 62.5%; background: #A78BFA;">CMS + Tickets + UAT General</div>
|
||
</div>
|
||
</div>
|
||
<!-- Row 4 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-label">Fase 4: Lanzamiento</div>
|
||
<div class="gantt-timeline-container">
|
||
<div class="gantt-bar" style="width: 12.5%; left: 87.5%; background: #F43F5E;">Go-Live & Traspaso</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timeline Axis -->
|
||
<div class="gantt-axis">
|
||
<span>Mes 1 (Sem 1-4)</span>
|
||
<span>Mes 2 (Sem 5-8)</span>
|
||
<span>Mes 3 (Sem 9-12)</span>
|
||
<span>Mes 4 (Sem 13-16)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size: 0.58em; color: var(--muted); margin-top: 15px; text-align: center; width: 100%;">
|
||
Cada hito requiere aprobación y pruebas UAT de cara al cliente antes del paso a la siguiente fase del proyecto.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 17 — PROPUESTA ECONÓMICA
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0a0810;">
|
||
<div class="slide-label">16 / 19</div>
|
||
<div class="tag">Presupuesto y Adquisición</div>
|
||
<h2>Esquema de Presupuesto y Modalidades de Contratación</h2>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%; margin-top: 10px;">
|
||
<!-- Column 1 -->
|
||
<div style="flex: 1.2;">
|
||
<table class="prop-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Concepto de Trabajo</th>
|
||
<th>Descripción del Entregable</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Licenciamiento base</strong></td>
|
||
<td>Entrega de la plataforma e infraestructura base preconfigurada.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Integración SSO e Infra</strong></td>
|
||
<td>Fases 0 y 1: Configuración de Azure Entra ID, base de datos PostgreSQL.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Desarrollo Core & BPM</strong></td>
|
||
<td>Fase 2: Conexión de Directorio, Calendario + IA, workflow BPM.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Desarrollo CMS & Tickets</strong></td>
|
||
<td>Fase 3: Info Hub, Ticketing y SLA. Pruebas UAT.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Go-Live & Garantía</strong></td>
|
||
<td>Despliegue, manuales, capacitación y 30 días de garantía inicial.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Column 2 -->
|
||
<div style="flex: 0.8; display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="font-size: 0.6em; font-weight: bold; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase;">
|
||
Modalidades de Adquisición
|
||
</div>
|
||
<div class="light-card" style="padding: 12px;">
|
||
<h3 style="font-size: 0.7em !important;">🔑 Proyecto Llave en Mano</h3>
|
||
<p style="font-size: 0.55em;">Precio y plazos fijos por la entrega del alcance completo de las 16 semanas. Ideal para presupuestos definidos.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 12px;">
|
||
<h3 style="font-size: 0.7em !important;">⏳ Tiempo y Materiales (T&M)</h3>
|
||
<p style="font-size: 0.55em;">Facturación mensual por sprints según requerimientos variables y flexibilidad de prioridades.</p>
|
||
</div>
|
||
<div class="light-card" style="padding: 12px;">
|
||
<h3 style="font-size: 0.7em !important;">☁️ SaaS Mensual (OpEx)</h3>
|
||
<p style="font-size: 0.55em;">Suscripción mensual recurrente con hosting, soporte continuo y actualizaciones evolutivas incluidas.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 18 — COMPARATIVA DE ALTERNATIVAS
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#080608;">
|
||
<div class="slide-label">17 / 19</div>
|
||
<div class="tag">Análisis del Mercado</div>
|
||
<h2>Por qué nuestra solución frente a las alternativas</h2>
|
||
|
||
<table class="prop-table" style="margin-top: 10px;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 28%;">Criterio</th>
|
||
<th style="width: 22%;" class="highlight-td">Nuestra Plataforma</th>
|
||
<th style="width: 16%;">SharePoint</th>
|
||
<th style="width: 16%;">Confluence</th>
|
||
<th style="width: 18%;">Desarrollo desde 0</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Integración AD Nativa</strong></td>
|
||
<td class="check highlight-td">✅ Sí (SSO)</td>
|
||
<td class="check">✅ Sí</td>
|
||
<td class="warn">⚠️ Vía Plugin</td>
|
||
<td class="check">✅ Sí</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Personalización UI/UX</strong></td>
|
||
<td class="check highlight-td">✅ 100% Libre</td>
|
||
<td class="warn">⚠️ Limitada</td>
|
||
<td class="warn">⚠️ Limitada</td>
|
||
<td class="check">✅ 100% Libre</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Asistente IA NLP</strong></td>
|
||
<td class="check highlight-td">✅ Integrado</td>
|
||
<td class="cross">❌ No</td>
|
||
<td class="cross">❌ No</td>
|
||
<td class="warn">⚠️ Costo Extra</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Plazos de Entrega</strong></td>
|
||
<td class="check highlight-td">✅ 16 Semanas</td>
|
||
<td class="warn">3 - 12 meses</td>
|
||
<td class="warn">2 - 6 meses</td>
|
||
<td class="cross">12 - 18 meses</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Propiedad de Código</strong></td>
|
||
<td class="check highlight-td">✅ Del Cliente</td>
|
||
<td class="cross">❌ Microsoft</td>
|
||
<td class="cross">❌ Atlassian</td>
|
||
<td class="check">✅ Del Cliente</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Vendor Lock-in</strong></td>
|
||
<td class="check highlight-td">✅ Cero (Open Source)</td>
|
||
<td class="cross">❌ Alto</td>
|
||
<td class="cross">❌ Alto</td>
|
||
<td class="check">✅ Cero</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 19 — GARANTÍAS Y COMPROMISOS
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide" style="background:#0a0510;">
|
||
<div class="slide-label">18 / 19</div>
|
||
<div class="tag">Transparencia</div>
|
||
<h2>Garantías y Respaldos del Proyecto</h2>
|
||
|
||
<div class="cards-row cols-3" style="margin-top: 15px;">
|
||
<div class="light-card">
|
||
<h3>📦 Propiedad Intelectual Total</h3>
|
||
<p>El cliente es dueño absoluto del código fuente, base de datos y documentación técnica al cierre del proyecto. Sin regalías.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🔓 Cero Dependencias</h3>
|
||
<p>Uso de stack open source estándar (Angular, NestJS, PostgreSQL). Cualquier equipo de desarrollo puede asumir y escalar el sistema en el futuro.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>📈 Escalabilidad Enterprise</h3>
|
||
<p>Arquitectura desacoplada en backend y frontend, preparada para soportar 10,000+ usuarios concurrentes sin degradar velocidad.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>🛡️ Seguridad by Design</h3>
|
||
<p>Cumplimiento estricto de lineamientos OWASP Top 10, cifrado SSL/TLS obligatorio y validación de sesiones delegadas en el SSO.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>📄 Soporte y Operatividad</h3>
|
||
<p>30 días de soporte técnico reactivo de primer nivel tras el Go-Live, garantizando una transición operativa suave.</p>
|
||
</div>
|
||
<div class="light-card">
|
||
<h3>⚙️ Documentación Exhaustiva</h3>
|
||
<p>Traspaso completo de guías de desarrollo, runbooks de DevOps, esquemas de bases de datos y manuales de usuario.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 20 — PRÓXIMOS PASOS & CIERRE
|
||
══════════════════════════════════════════════ -->
|
||
<section class="closing-slide">
|
||
<div class="tag">Propuesta de Intranet · 2026</div>
|
||
<h2 style="font-size:2.3em !important; margin:10px 0 20px !important; background:linear-gradient(90deg,#fff 50%,var(--gold-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;">
|
||
Unificando procesos para<br/>potenciar tu organización.
|
||
</h2>
|
||
|
||
<div style="display:flex; justify-content:center; gap:20px; text-align:left; width: 80%; margin: 0 auto 15px auto;">
|
||
<div style="background:rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); padding: 14px 18px; border-radius:10px; flex:1; font-size:0.55em; line-height:1.55;">
|
||
<strong style="color: var(--gold); display:block; margin-bottom:4px;">PRÓXIMOS PASOS</strong>
|
||
1. Demo en vivo de la plataforma actual (30 min)<br/>
|
||
2. Workshop técnico sobre Active Directory (2h)<br/>
|
||
3. Propuesta comercial formal ajustada a usuarios<br/>
|
||
4. Firma de acuerdo NDA y Contrato de Desarrollo<br/>
|
||
5. Kick-off de Fase 0
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cover-divider"></div>
|
||
|
||
<div class="closing-contact" style="margin-top: 15px;">
|
||
<span>Jess Miller — Arquitecta de Software Senior & Full-Stack Engineer</span>
|
||
<span>📧 <strong>jess@intranet.dev</strong> | 🔗 <strong>github.com/intranet-platform</strong></span>
|
||
<span style="margin-top:8px; font-size:0.52em; color:rgba(255,255,255,0.2);">
|
||
Para descargar o imprimir a PDF: Ctrl+P (Chrome) → Guardar como PDF → Habilitar "Gráficos de fondo" e imprimir horizontal.
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
</div><!-- /slides -->
|
||
</div><!-- /reveal -->
|
||
|
||
<!-- Reveal.js Scripts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
|
||
<script>
|
||
Reveal.initialize({
|
||
hash: true,
|
||
slideNumber: false,
|
||
controls: true,
|
||
progress: true,
|
||
center: false,
|
||
transition: 'fade',
|
||
transitionSpeed: 'fast',
|
||
backgroundTransition: 'fade',
|
||
width: 1280,
|
||
height: 720,
|
||
margin: 0.025,
|
||
minScale: 0.2,
|
||
maxScale: 2.0,
|
||
pdfSeparateFragments: false,
|
||
plugins: []
|
||
});
|
||
|
||
// PDF export hint
|
||
if (window.location.search.includes('print-pdf')) {
|
||
document.querySelector('.reveal').classList.add('print-pdf');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|