2097 lines
101 KiB
HTML
2097 lines
101 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_App.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>
|
||
Pranical · 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</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> Directorio Activo</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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 20px;">
|
||
<div class="slide-label">04 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2 style="margin-bottom: 15px;">Módulo 1: Directorio Corporativo <span class="gold">(IAM / HR)</span></h2>
|
||
|
||
<div class="w-50 h-100 cards-row cols-2"
|
||
style="display: flex; gap: 20px; height: calc(100% - 120px); overflow-y: auto;">
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 14px; flex: 1;">
|
||
<div class="light-card" style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
|
||
<h3 style="margin: 0 0 8px 0; font-size: 1.1rem;">👥 Sincronización Directorio Activo</h3>
|
||
<p style="margin: 0; font-size: 0.9rem; color: #ccc;">Lectura directa de usuarios, departamentos y
|
||
jerarquías sin replicar datos sensibles de manera local.</p>
|
||
</div>
|
||
<div class="light-card" style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
|
||
<h3 style="margin: 0 0 8px 0; font-size: 1.1rem;">🔍 Búsqueda Reactiva en Tiempo Real</h3>
|
||
<p style="margin: 0; font-size: 0.9rem; color: #ccc;">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; flex: 1;">
|
||
<div class="light-card" style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
|
||
<h3 style="margin: 0 0 8px 0; font-size: 1.1rem;">🆔 Perfiles de Colaborador Detallados</h3>
|
||
<p style="margin: 0; font-size: 0.9rem; color: #ccc;">Muestra ID del directorio (AD-XXXX), tarifa por
|
||
hora, badge de calificación y datos de contacto integrados.</p>
|
||
</div>
|
||
<div class="light-card" style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
|
||
<h3 style="margin: 0 0 8px 0; font-size: 1.1rem;">⚡ Interfaz Ergónomica e Inmersiva</h3>
|
||
<p style="margin: 0; font-size: 0.9rem; color: #ccc;">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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">05 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2 style="margin-bottom: 12px; flex-shrink: 0;">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; display: flex; gap: 20px; flex-grow: 1; min-height: 0; width: 100%;">
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0;">
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 3px 0; font-size: 1.05rem;">📅 Calendario Interactivo</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.3;">Vistas completas de Mes, Semana y
|
||
Día. Clic en bloques disponibles redirige al formulario con parámetros precargados.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 3px 0; font-size: 1.05rem;">🛡️ Anti-Overbooking Garantizado</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.3;">Control transaccional estricto en
|
||
PostgreSQL, asegurando consistencia absoluta sin duplicidad de reservas.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 3px 0; font-size: 1.05rem;">⚙️ Filtros por Tipo de Activo</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.3;">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, #1f142e); border-radius: 16px; padding: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; justify-content: space-between;">
|
||
<div style="flex-shrink: 0;">
|
||
<div
|
||
style="font-size: 0.65em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,151,60,0.8); margin-bottom: 4px;">
|
||
🤖 ASISTENTE DE IA INTEGRADO (NLP)
|
||
</div>
|
||
<p style="font-size: 0.8em; color: rgba(255,255,255,0.7); line-height: 1.4; margin: 0 !important;">
|
||
El usuario puede agendar recursos usando lenguaje natural de forma intuitiva:
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
style="background: rgba(0,0,0,0.3); border-radius: 10px; font-family: 'Fira Code', monospace; font-size: 10px; color: rgba(255,255,255,0.75); line-height: 1.6; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<span style="color: var(--gold, #c9973c);">Entrada libre:</span>
|
||
<span style="color: #fff; font-style: italic;">"Reservar la sala Londres para mañana a las 10 am para 8
|
||
personas"</span>
|
||
<br />
|
||
<span style="color: #34D399; margin-top: 4px; display: inline-block;">Variables detectadas por IA:</span>
|
||
<div style="margin-left: 6px; color: rgba(255,255,255,0.85);">
|
||
• 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>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 7 — MÓDULO 3: WORKFLOW DE APROBACIÓN
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide"
|
||
style="background:#0a0510; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">06 / 19</div>
|
||
<div class="tag">Módulos de la Solución</div>
|
||
<h2 style="margin-bottom: 12px; flex-shrink: 0;">Módulo 3: Workflow de Aprobación y Publicación </h2>
|
||
|
||
<div class="cards-row cols-2"
|
||
style="margin-top: 5px; display: flex; gap: 20px; flex-grow: 1; min-height: 0; width: 100%;">
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0;">
|
||
<div class="light-card"
|
||
style="padding: 15px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1.05rem;">⚙️ Motor de Reglas Jerárquicas</h3>
|
||
<p style="margin: 0; font-size: 0.82rem; color: #ccc; line-height: 1.35;">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"
|
||
style="padding: 15px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1.05rem;">📈 Trazabilidad de Estados</h3>
|
||
<p style="margin: 0; font-size: 0.82rem; color: #ccc; line-height: 1.35;">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: 12px; flex: 1; min-height: 0;">
|
||
<div class="light-card"
|
||
style="padding: 15px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1.05rem;">🔔 Notificaciones y Alertas Reactivas</h3>
|
||
<p style="margin: 0; font-size: 0.82rem; color: #ccc; line-height: 1.35;">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"
|
||
style="padding: 15px; background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1.05rem;">📰 Integración con Canales CMS</h3>
|
||
<p style="margin: 0; font-size: 0.82rem; color: #ccc; line-height: 1.35;">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: 5px; display: flex; gap: 20px; flex-grow: 1; min-height: 0; width: 100%;">
|
||
|
||
<div class="jewel-card jewel-card--espresso"
|
||
style="padding: 20px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0;">
|
||
<span class="card-icon" style="font-size: 1.3rem;">📰</span>
|
||
<h3 style="margin: 0; font-size: 1.1rem; font-weight: 600;">Módulo 4: Info Hub / CMS Corporativo</h3>
|
||
</div>
|
||
<p
|
||
style="margin: 0 0 10px 0 !important; font-size: 1rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; flex-shrink: 0;">
|
||
Gestión y publicación de información interna en un portal centralizado de noticias corporativas.
|
||
</p>
|
||
<ul
|
||
style="font-size: 1rem; color: rgba(255, 255, 255, 0.55); padding-left: 18px; margin: 0; line-height: 1.5; list-style-type: disc;">
|
||
<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"
|
||
style="padding: 20px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0;">
|
||
<span class="card-icon" style="font-size: 1.3rem;">🎫</span>
|
||
<h3 style="margin: 0; font-size: 1.1rem; font-weight: 600;">Módulo 5: Soporte Técnico e Incidencias</h3>
|
||
</div>
|
||
<p
|
||
style="margin: 0 0 10px 0 !important; font-size: 1rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; flex-shrink: 0;">
|
||
Mesa de ayuda integrada para gestionar requerimientos de soporte interno técnico, operacional y de RR.HH.
|
||
</p>
|
||
<ul
|
||
style="font-size: 1rem; color: rgba(255, 255, 255, 0.55); padding-left: 18px; margin: 0; line-height: 1.5; list-style-type: disc;">
|
||
<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>
|
||
|
||
<div
|
||
style="flex-grow: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;">
|
||
|
||
<table class="prop-table"
|
||
style="margin-top: 5px; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1.5rem; line-height: 1.35;">
|
||
<thead>
|
||
<tr style="background: rgba(255, 255, 255, 0.05); text-align: left;">
|
||
<th style="width: 18%; padding: 8px 10px; color: #fff; font-weight: 600;">Capa</th>
|
||
<th style="width: 28%; padding: 8px 10px; color: #fff; font-weight: 600;">Tecnología Utilizada</th>
|
||
<th style="width: 14%; padding: 8px 10px; color: #fff; font-weight: 600;">Versión</th>
|
||
<th style="width: 40%; padding: 8px 10px; color: #fff; font-weight: 600;">Justificación y Beneficio</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
|
||
<td style="padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
<strong>Frontend</strong>
|
||
</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.85);">Angular (Standalone & Signals)</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.6);">18.0</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.7);">Framework enterprise por Google, alta
|
||
reactividad.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
|
||
<td style="padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
<strong>Backend</strong>
|
||
</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.85);">NestJS (REST API)</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.6);">10.0</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.7);">Arquitectura modular sólida en TS, fácil
|
||
mantenimiento.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
|
||
<td style="padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
<strong>Autenticación</strong>
|
||
</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.85);">Directorio Activo (SSO)</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.6);">Estándar</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.7);">Integración corporativa directa con Active
|
||
Directory.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
|
||
<td style="padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
<strong>Base de Datos</strong>
|
||
</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.85);">PostgreSQL + Prisma ORM</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.6);">15 / v5</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.7);">Transacciones ACID para evitar overbooking
|
||
de salas.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
|
||
<td style="padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
<strong>Infraestructura</strong>
|
||
</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.85);">Docker + Docker Compose</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.6);">v3.8</td>
|
||
<td style="padding: 8px 10px; color: rgba(255,255,255,0.7);">Portabilidad absoluta y despliegue rápido
|
||
local/cloud.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
</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. Directorio Activo</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
|
||
style="flex-grow: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;">
|
||
|
||
<div class="tree-structure"
|
||
style="margin-top: 5px; font-family: 'Fira Code', Consolas, Monaco, monospace; font-size: 1rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); width: 100%;">
|
||
|
||
<span class="tree-dir" style="font-weight: 600; color: #fff;">proyecto-intranet/</span><br />
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: var(--gold, #c9973c); flex-shrink: 0;">frontend/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Aplicación Angular
|
||
18 (Standalone & Signals)</span>
|
||
</div>
|
||
|
||
<span style="color: rgba(255,255,255,0.3);">│ └── </span>src/app/<br />
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%; padding-left: 24px;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">core/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Guard SSO,
|
||
interceptores HTTP, auth y tokens</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%; padding-left: 24px;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">shared/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Componentes del
|
||
Design System y pipes comunes</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%; padding-left: 24px;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">└── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">features/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Módulos funcionales
|
||
(directorio, booking, etc.)</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: var(--gold, #c9973c); flex-shrink: 0;">backend/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← REST API en NestJS
|
||
(TypeScript modular)</span>
|
||
</div>
|
||
|
||
<span style="color: rgba(255,255,255,0.3);">│ └── </span>src/<br />
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%; padding-left: 24px;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">auth/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Módulo Passport con
|
||
validación JWT de Azure ID</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%; padding-left: 24px;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">└── </span>
|
||
<span class="tree-dir" style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">directory/
|
||
/ spaces/ / workflow/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Módulos de lógica
|
||
empresarial</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-dir"
|
||
style="font-weight: 600; color: rgba(255,255,255,0.9); flex-shrink: 0;">standards/</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Documentación de
|
||
calidad y especificaciones</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">├── </span>
|
||
<span class="tree-file" style="color: #34D399; flex-shrink: 0;">docker-compose.yml</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Orquestación local:
|
||
DB PostgreSQL</span>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; width: 100%;">
|
||
<span style="flex-shrink: 0; color: rgba(255,255,255,0.3);">└── </span>
|
||
<span class="tree-file" style="color: #34D399; flex-shrink: 0;">setup.ps1 / .sh</span>
|
||
<span class="tree-comment" style="color: rgba(255,255,255,0.45); margin-left: 8px;">← Scripts de
|
||
automatización para desarrollo</span>
|
||
</div>
|
||
|
||
</div>
|
||
</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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">11 / 19</div>
|
||
<div class="tag">Experiencia de Usuario</div>
|
||
<h2 style="margin-bottom: 4px; flex-shrink: 0;">Executive Suite Design System</h2>
|
||
<p style="font-size: 1.5rem; color: rgba(255,255,255,0.7); margin: 0 0 12px 0 !important; flex-shrink: 0;">
|
||
Diseñado bajo directrices premium que mezclan sobriedad corporativa y tecnología de vanguardia.
|
||
</p>
|
||
|
||
<div
|
||
style="flex-grow: 1; display: flex; flex-direction: column; gap: 15px; min-height: 0; justify-content: space-between;">
|
||
|
||
<div class="cards-row cols-3" style="display: flex; gap: 15px; flex: 1; min-height: 0;">
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">✨ Tipografía Limpia</h3>
|
||
<p style="margin: 0; font-size: 1rem; color: #ccc; line-height: 1.35;">Inter para titulares de gran
|
||
peso, brindando jerarquía y firmeza, complementada con Outfit para lecturas.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">🖼️ Card System Joya</h3>
|
||
<p style="margin: 0; font-size: 1rem; color: #ccc; line-height: 1.35;">Glows de fondo en colores
|
||
oscuros pero ricos (Navy, Plum, Viridian). Estructura elegante sin bordes cargados.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">🔮 Micro-animaciones</h3>
|
||
<p style="margin: 0; font-size: 1rem; color: #ccc; line-height: 1.35;">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" style="display: flex; gap: 12px; flex: 1; min-height: 0; width: 100%;">
|
||
|
||
<div class="color-swatch-card"
|
||
style="flex: 1; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: space-between; min-height: 0;">
|
||
<div class="color-box"
|
||
style="background: #F5F4F1; height: 35px; width: 100%; border-radius: 4px; flex-shrink: 0;"></div>
|
||
<div style="margin-top: 6px;">
|
||
<h4 style="margin: 0; font-size: 0.85rem; color: #fff;">Ivory</h4>
|
||
<p style="margin: 2px 0 0 0; font-size: 1rem; color: #aaa; line-height: 1.2;">Contraste de textos
|
||
limpios y legibilidad.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch-card"
|
||
style="flex: 1; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: space-between; min-height: 0;">
|
||
<div class="color-box"
|
||
style="background: #C9973C; height: 35px; width: 100%; border-radius: 4px; flex-shrink: 0;"></div>
|
||
<div style="margin-top: 6px;">
|
||
<h4 style="margin: 0; font-size: 0.85rem; color: #fff;">Gold</h4>
|
||
<p style="margin: 2px 0 0 0; font-size: 1rem; color: #aaa; line-height: 1.2;">Dorado corporativo para
|
||
estados activos.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch-card"
|
||
style="flex: 1; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: space-between; min-height: 0;">
|
||
<div class="color-box"
|
||
style="background: #0D1B2A; height: 35px; width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;">
|
||
</div>
|
||
<div style="margin-top: 6px;">
|
||
<h4 style="margin: 0; font-size: 0.85rem; color: #fff;">Navy</h4>
|
||
<p style="margin: 2px 0 0 0; font-size: 1rem; color: #aaa; line-height: 1.2;">Fondo para Directorio
|
||
IAM y seguridad.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch-card"
|
||
style="flex: 1; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: space-between; min-height: 0;">
|
||
<div class="color-box"
|
||
style="background: #1A0E2E; height: 35px; width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;">
|
||
</div>
|
||
<div style="margin-top: 6px;">
|
||
<h4 style="margin: 0; font-size: 0.85rem; color: #fff;">Plum</h4>
|
||
<p style="margin: 2px 0 0 0; font-size: 1rem; color: #aaa; line-height: 1.2;">Reservado para
|
||
calendario e IA.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch-card"
|
||
style="flex: 1; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: space-between; min-height: 0;">
|
||
<div class="color-box"
|
||
style="background: #0A2520; height: 35px; width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;">
|
||
</div>
|
||
<div style="margin-top: 6px;">
|
||
<h4 style="margin: 0; font-size: 0.85rem; color: #fff;">Viridian</h4>
|
||
<p style="margin: 2px 0 0 0; font-size: 1rem; color: #aaa; line-height: 1.2;">Verde para motor de
|
||
aprobaciones.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 13 — ESTADO ACTUAL
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide"
|
||
style="background:#080608; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">12 / 19</div>
|
||
<div class="tag">Estado del Proyecto</div>
|
||
<h2 style="margin-bottom: 12px; flex-shrink: 0;">Módulos desarrollados y <span class="gold">nivel de
|
||
avance</span></h2>
|
||
|
||
<div
|
||
style="flex-grow: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;">
|
||
|
||
<table class="prop-table"
|
||
style="margin-top: 0px; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1rem; line-height: 1.35;">
|
||
<thead>
|
||
<tr style="background: rgba(255, 255, 255, 0.04); text-align: left; font-size: 1rem;">
|
||
<th style="width: 28%; padding: 8px 10px; color: #fff; font-weight: 600;"><span class="gold">Módulo o
|
||
Componente</span></th>
|
||
<th style="width: 18%; padding: 8px 10px; color: #fff; font-weight: 600;"><span
|
||
class="gold">Avance</span></th>
|
||
<th style="width: 54%; padding: 8px 10px; color: #fff; font-weight: 600;"><span class="gold">Detalles
|
||
Técnicos
|
||
Implementados</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Autenticación SSO corporativo</strong></td>
|
||
<td class="status-done" style="padding: 6px 10px; color: #34D399; font-weight: 500;">✅ Implementado</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Módulo Auth JWT en NestJS, interceptores en Angular y Guards SSO.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Dashboard & Shell</strong></td>
|
||
<td class="status-done" style="padding: 6px 10px; color: #34D399; font-weight: 500;">✅ Implementado</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Sidebar interactivo colapsable, métricas globales, navegación.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Directorio de Personal</strong></td>
|
||
<td class="status-done" style="padding: 6px 10px; color: #34D399; font-weight: 500;">✅ Implementado</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Búsqueda reactiva con Signals, filtros por departamento, tarjetas de AD.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Calendario de Reservas</strong></td>
|
||
<td class="status-done" style="padding: 6px 10px; color: #34D399; font-weight: 500;">✅ Implementado</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Calendario reactivo en frontend con vistas de Mes, Semana y Día.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Formulario de Reservas + IA</strong></td>
|
||
<td class="status-done" style="padding: 6px 10px; color: #34D399; font-weight: 500;">✅ Implementado</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Parser NLP configurado con mock local y listado de consumo HTTP.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Workflow de Aprobación BPM</strong></td>
|
||
<td class="status-wip" style="padding: 6px 10px; color: #F59E0B; font-weight: 500;">🔄 En Desarrollo
|
||
</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Estructuración del motor de jerarquías y vistas de historial de cambios.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 6px 10px; color: #fff;"><strong>Info Hub CMS / Ticketing SLA</strong></td>
|
||
<td class="status-planned" style="padding: 6px 10px; color: #60A5FA; font-weight: 500;">📋 Planificado
|
||
</td>
|
||
<td
|
||
style="padding: 6px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Diseño de tablas de base de datos definidos en esquemas de Prisma.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 14 — PLAN DE ACCIÓN FASES 0 & 1
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide"
|
||
style="background:#07050e; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">13 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2 style="margin-bottom: 4px; flex-shrink: 0;">Fase 0: Diagnóstico & Fase 1: Setup e Integración</h2>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%; flex-grow: 1; min-height: 0; margin-top: 10px;">
|
||
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0;">
|
||
<div
|
||
style="font-size: 0.72rem; font-weight: 700; color: var(--gold, #c9973c); letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;">
|
||
Fase 0 — Diagnóstico y NDA (Semanas 1–2)
|
||
</div>
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">📋 Kickoff e Inventario Técnico</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.35;">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"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">🔍 Auditoría de Active Directory</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.35;">Revisión de grupos, jerarquías de
|
||
aprobadores y políticas de acceso a la tenant del cliente.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0;">
|
||
<div
|
||
style="font-size: 0.72rem; font-weight: 700; color: #34D399; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;">
|
||
Fase 1 — Setup y Conexión SSO (Semanas 3–4)
|
||
</div>
|
||
<div class="light-card"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">🛡️ Integración Microsoft Entra ID</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.35;">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"
|
||
style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="margin: 0 0 4px 0; font-size: 1rem;">🐘 Despliegue de DB de Producción</h3>
|
||
<p style="margin: 0; font-size: 0.8rem; color: #ccc; line-height: 1.35;">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: 15px; font-size: 0.78rem; background: rgba(52,211,153,0.05); border: 1px solid rgba(52,211,153,0.18); padding: 10px 15px; border-radius: 8px; width: 100%; box-sizing: border-box; flex-shrink: 0; line-height: 1.4;">
|
||
<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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">14 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2 style="margin-bottom: 4px; flex-shrink: 0;">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%; flex-grow: 1; min-height: 0; margin-top: 10px;">
|
||
|
||
<div class="light-card"
|
||
style="border-top: 3px solid #60A5FA; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<span
|
||
style="font-size: 0.72rem; color: #60A5FA; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; flex-shrink: 0;">Fase
|
||
2 (Sem 5–10)</span>
|
||
<h3 style="margin: 6px 0 4px 0 !important; font-size: 1.1rem;">Módulos Core</h3>
|
||
<p style="font-size: 0.8rem; line-height: 1.4; margin: 0 0 6px 0; color: #ccc;">Desarrollo final de los
|
||
módulos esenciales:</p>
|
||
<ul
|
||
style="font-size: 0.78rem; color: rgba(255,255,255,0.6); padding-left: 16px; margin: 0; line-height: 1.5; list-style-type: disc;">
|
||
<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>
|
||
|
||
<div class="light-card"
|
||
style="border-top: 3px solid #A78BFA; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<span
|
||
style="font-size: 0.72rem; color: #A78BFA; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; flex-shrink: 0;">Fase
|
||
3 (Sem 11–14)</span>
|
||
<h3 style="margin: 6px 0 4px 0 !important; font-size: 1.1rem;">Módulos Secundarios</h3>
|
||
<p style="font-size: 0.8rem; line-height: 1.4; margin: 0 0 6px 0; color: #ccc;">Construcción de soporte e
|
||
información:</p>
|
||
<ul
|
||
style="font-size: 0.78rem; color: rgba(255,255,255,0.6); padding-left: 16px; margin: 0; line-height: 1.5; list-style-type: disc;">
|
||
<li>Info Hub CMS con editor</li>
|
||
<li>Ticketing y asignación SLA</li>
|
||
<li>Pruebas de aceptación (UAT)</li>
|
||
<li>Congelamiento de código</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="border-top: 3px solid #F43F5E; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<span
|
||
style="font-size: 0.72rem; color: #F43F5E; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; flex-shrink: 0;">Fase
|
||
4 (Sem 15–16)</span>
|
||
<h3 style="margin: 6px 0 4px 0 !important; font-size: 1.1rem;">Go-Live & Traspaso</h3>
|
||
<p style="font-size: 0.8rem; line-height: 1.4; margin: 0 0 6px 0; color: #ccc;">Despliegue y estabilización:
|
||
</p>
|
||
<ul
|
||
style="font-size: 0.78rem; color: rgba(255,255,255,0.6); padding-left: 16px; margin: 0; line-height: 1.5; list-style-type: disc;">
|
||
<li>Paso a Producción Cloud</li>
|
||
<li>Capacitación de usuarios</li>
|
||
<li>Traspaso de Runbooks</li>
|
||
<li><strong>30 días de garantía incluidos</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style="margin-top: 15px; font-size: 0.78rem; background: rgba(244,63,94,0.05); border: 1px solid rgba(244,63,94,0.18); padding: 10px 15px; border-radius: 8px; width: 100%; box-sizing: border-box; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; line-height: 1.4;">
|
||
<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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">15 / 19</div>
|
||
<div class="tag">Roadmap de Entrega</div>
|
||
<h2 style="margin-bottom: 12px; flex-shrink: 0;">Cronograma General de Trabajo <span class="gold">(16
|
||
Semanas)</span></h2>
|
||
|
||
<div class="gantt-chart"
|
||
style="flex-grow: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;">
|
||
|
||
<div class="gantt-row" style="display: flex; align-items: center; width: 100%; min-height: 0; flex: 1;">
|
||
<div class="gantt-label"
|
||
style="width: 22%; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 500; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 0: Diagnóstico</div>
|
||
<div class="gantt-timeline-container"
|
||
style="width: 78%; background: rgba(255,255,255,0.02); height: 26px; border-radius: 4px; position: relative;">
|
||
<div class="gantt-bar"
|
||
style="position: absolute; width: 12.5%; left: 0%; background: #C9973C; height: 100%; border-radius: 4px; font-size: 0.72rem; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Diag. & AD</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gantt-row" style="display: flex; align-items: center; width: 100%; min-height: 0; flex: 1;">
|
||
<div class="gantt-label"
|
||
style="width: 22%; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 500; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 1: Setup & SSO</div>
|
||
<div class="gantt-timeline-container"
|
||
style="width: 78%; background: rgba(255,255,255,0.02); height: 26px; border-radius: 4px; position: relative;">
|
||
<div class="gantt-bar"
|
||
style="position: absolute; width: 12.5%; left: 12.5%; background: #34D399; height: 100%; border-radius: 4px; font-size: 0.72rem; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
SSO Azure</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gantt-row" style="display: flex; align-items: center; width: 100%; min-height: 0; flex: 1;">
|
||
<div class="gantt-label"
|
||
style="width: 22%; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 500; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 2: Módulos Core</div>
|
||
<div class="gantt-timeline-container"
|
||
style="width: 78%; background: rgba(255,255,255,0.02); height: 26px; border-radius: 4px; position: relative;">
|
||
<div class="gantt-bar"
|
||
style="position: absolute; width: 37.5%; left: 25%; background: #60A5FA; height: 100%; border-radius: 4px; font-size: 0.72rem; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Dir + Espacios IA + BPM + Piloto</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gantt-row" style="display: flex; align-items: center; width: 100%; min-height: 0; flex: 1;">
|
||
<div class="gantt-label"
|
||
style="width: 22%; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 500; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 3: Módulos Sec.</div>
|
||
<div class="gantt-timeline-container"
|
||
style="width: 78%; background: rgba(255,255,255,0.02); height: 26px; border-radius: 4px; position: relative;">
|
||
<div class="gantt-bar"
|
||
style="position: absolute; width: 25%; left: 62.5%; background: #A78BFA; height: 100%; border-radius: 4px; font-size: 0.72rem; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
CMS + Tickets + UAT General</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gantt-row" style="display: flex; align-items: center; width: 100%; min-height: 0; flex: 1;">
|
||
<div class="gantt-label"
|
||
style="width: 22%; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 500; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 4: Lanzamiento</div>
|
||
<div class="gantt-timeline-container"
|
||
style="width: 78%; background: rgba(255,255,255,0.02); height: 26px; border-radius: 4px; position: relative;">
|
||
<div class="gantt-bar"
|
||
style="position: absolute; width: 12.5%; left: 87.5%; background: #F43F5E; height: 100%; border-radius: 4px; font-size: 0.72rem; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Go-Live & Traspaso</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gantt-axis"
|
||
style="display: flex; width: 78%; margin-left: 22%; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 4px; font-size: 0.7rem; color: rgba(255,255,255,0.4); flex-shrink: 0;">
|
||
<span style="flex: 1; text-align: left;">Mes 1 (Sem 1-4)</span>
|
||
<span style="flex: 1; text-align: left; padding-left: 5%;">Mes 2 (Sem 5-8)</span>
|
||
<span style="flex: 1; text-align: left; padding-left: 5%;">Mes 3 (Sem 9-12)</span>
|
||
<span style="flex: 1; text-align: right;">Mes 4 (Sem 13-16)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p
|
||
style="font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 12px 0 0 0; text-align: center; width: 100%; flex-shrink: 0; line-height: 1.3;">
|
||
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; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">16 / 19</div>
|
||
<div class="tag">Presupuesto y Adquisición</div>
|
||
<h2 style="margin-bottom: 4px; flex-shrink: 0;">Esquema de Presupuesto y Modalidades de Contratación</h2>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%; flex-grow: 1; min-height: 0; margin-top: 12px;">
|
||
|
||
<div
|
||
style="flex: 1.2; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;">
|
||
<table class="prop-table"
|
||
style="width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1rem; line-height: 1.35;">
|
||
<thead>
|
||
<tr style="background: rgba(255, 255, 255, 0.04); text-align: left;">
|
||
<th style="width: 38%; padding: 8px 10px; color: #fff; font-weight: 600;">Concepto de Trabajo</th>
|
||
<th style="width: 62%; padding: 8px 10px; color: #fff; font-weight: 600;">Descripción del Entregable
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 7px 10px; color: #fff;"><strong>Licenciamiento base</strong></td>
|
||
<td
|
||
style="padding: 7px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Entrega de la plataforma e infraestructura base preconfigurada.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 7px 10px; color: #fff;"><strong>Integración SSO e Infra</strong></td>
|
||
<td
|
||
style="padding: 7px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fases 0 y 1: Configuración de Azure Entra ID, base PostgreSQL.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 7px 10px; color: #fff;"><strong>Desarrollo Core & BPM</strong></td>
|
||
<td
|
||
style="padding: 7px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 2: Conexión de Directorio, Calendario + IA, workflow BPM.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 7px 10px; color: #fff;"><strong>Desarrollo CMS & Tickets</strong></td>
|
||
<td
|
||
style="padding: 7px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Fase 3: Info Hub, Ticketing y SLA. Pruebas UAT.</td>
|
||
</tr>
|
||
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
|
||
<td style="padding: 7px 10px; color: #fff;"><strong>Go-Live & Garantía</strong></td>
|
||
<td
|
||
style="padding: 7px 10px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
Despliegue, manuales, capacitación y 30 días de garantía.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div
|
||
style="flex: 0.8; display: flex; flex-direction: column; gap: 10px; min-height: 0; justify-content: center;">
|
||
<div
|
||
style="font-size: 0.72rem; font-weight: bold; color: var(--gold, #c9973c); letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; margin-bottom: 2px;">
|
||
Modalidades de Adquisición
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="font-size: 0.95rem; margin: 0 0 4px 0;">🔑 Proyecto Llave en Mano</h3>
|
||
<p style="font-size: 1rem; margin: 0; color: #ccc; line-height: 1.3;">Precio y plazos fijos por la
|
||
entrega del alcance completo. Ideal para presupuestos definidos.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="font-size: 0.95rem; margin: 0 0 4px 0;">⏳ Tiempo y Materiales (T&M)</h3>
|
||
<p style="font-size: 1rem; margin: 0; color: #ccc; line-height: 1.3;">Facturación mensual por sprints
|
||
según requerimientos variables y flexibilidad de prioridades.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;">
|
||
<h3 style="font-size: 0.95rem; margin: 0 0 4px 0;">☁️ SaaS Mensual (OpEx)</h3>
|
||
<p style="font-size: 1rem; margin: 0; color: #ccc; line-height: 1.3;">Suscripción recurrente con
|
||
hosting, soporte continuo y actualizaciones evolutivas incluidas.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 18 — COMPARATIVA DE ALTERNATIVAS
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide">
|
||
<div style="width: 100%; flex-shrink: 0;">
|
||
<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>
|
||
</div>
|
||
|
||
<div
|
||
style="flex: 1.2; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;">
|
||
<table class="prop-table"
|
||
style="width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1rem; line-height: 1.35;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 24%;">Criterio</th>
|
||
<th style="width: 21%;" class="highlight-td">Nuestra Plataforma</th>
|
||
<th style="width: 19%;">Liferay CMS</th>
|
||
<th style="width: 18%;">WordPress</th>
|
||
<th style="width: 18%;">Joomla</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Integración AD Nativa</strong></td>
|
||
<td class="highlight-td">✅ Sí (SSO)</td>
|
||
<td>✅ Sí (Nativo Java)</td>
|
||
<td>⚠️ Vía Plugins (Pago)</td>
|
||
<td>⚠️ Vía Extensiones</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Personalización UI/UX</strong></td>
|
||
<td class="highlight-td">✅ 100% Libre</td>
|
||
<td>⚠️ Complejo (Portlets)</td>
|
||
<td>⚠️ Basado en Plantillas</td>
|
||
<td>⚠️ Curva compleja</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Asistente IA NLP</strong></td>
|
||
<td class="highlight-td">✅ Integrado</td>
|
||
<td>⚠️ Requiere Desarrollo</td>
|
||
<td>❌ No (Requiere Plugins)</td>
|
||
<td>❌ No (Requiere Extensiones)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Plazos de Entrega</strong></td>
|
||
<td class="highlight-td">✅ 16 Semanas</td>
|
||
<td>❌ 6 - 12 Meses</td>
|
||
<td>✅ 4 - 8 Semanas</td>
|
||
<td>⚠️ 8 - 12 Semanas</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Propiedad de Código</strong></td>
|
||
<td class="highlight-td">✅ Del Cliente</td>
|
||
<td>⚠️ Suscripción Enterprise</td>
|
||
<td>⚠️ Licencia GPL v2</td>
|
||
<td>⚠️ Licencia GPL v2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Vendor Lock-in</strong></td>
|
||
<td class="highlight-td">✅ Cero (Open Source)</td>
|
||
<td>❌ Alto (Ecosistema)</td>
|
||
<td>⚠️ Dependencia de Plugins</td>
|
||
<td>⚠️ Dependencia de Plugins</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════
|
||
SLIDE 19 — GARANTÍAS Y COMPROMISOS
|
||
══════════════════════════════════════════════ -->
|
||
<section class="content-slide"
|
||
style="background:#0a0510; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column;">
|
||
<div class="slide-label">18 / 19</div>
|
||
<div class="tag">Transparencia</div>
|
||
<h2 style="margin-bottom: 4px; flex-shrink: 0;">Garantías y Respaldos del Proyecto</h2>
|
||
|
||
<div class="cards-row"
|
||
style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; flex-grow: 1; min-height: 0; margin-top: 10px;">
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
📦 Propiedad Intelectual Total</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">El cliente es dueño absoluto del
|
||
código fuente, base de datos y documentación al cierre del proyecto. Sin regalías.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
🔓 Cero Dependencias</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">Uso de stack open source estándar
|
||
(Angular, NestJS, Postgres). Cualquier equipo puede asumir y escalar el sistema.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
📈 Escalabilidad Enterprise</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">Arquitectura desacoplada, preparada
|
||
para soportar más de 10,000 usuarios concurrentes sin degradar la velocidad.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
🛡️ Seguridad by Design</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">Cumplimiento estricto de OWASP Top
|
||
10, cifrado SSL/TLS obligatorio y validación de sesiones delegadas en el SSO.</p>
|
||
</div>
|
||
|
||
<div class="light-card"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
📄 Soporte y Operatividad</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">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"
|
||
style="padding: 10px 15px; background: rgba(255,255,255,0.03); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box;">
|
||
<h3
|
||
style="margin: 0 0 2px 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
⚙️ Documentación Exhaustiva</h3>
|
||
<p style="margin: 0; font-size: 0.95rem; color: #ccc; line-height: 1.3;">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 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> |