fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inicial

Browse Source
This commit is contained in:
fanfuso
2026-08-31 15:27:17 -03:00
commit 3663318076
23 changed files with 4140 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ecosistema.html
+234
View File
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El Ecosistema IDE | Cuatro Capacidades Conectadas - IDE Consultores</title>
<meta name="description" content="Conocé cómo se articulan IDE Excellence, IDE Project, IDE Academy e IDE Digital para generar valor integral y sostenible en las organizaciones.">
<meta property="og:title" content="El Ecosistema IDE | Cuatro Capacidades Conectadas">
<meta property="og:description" content="No se trata de sumar soluciones. Se trata de conectar las capacidades necesarias para una transformación real.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="site-header"></header>
<main>
<!-- Header Ecosistema -->
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<span class="eyebrow">LA PROPUESTA DE VALOR</span>
<h1 style="margin-bottom: 1.25rem;">Una mirada. <br> Múltiples capacidades. <br> Un mismo propósito.</h1>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
No se trata de sumar soluciones aisladas. Se trata de conectar las capacidades necesarias para generar una transformación real que perdure en el conjunto de la organización.
</p>
<!-- Principio Destacado en Caja -->
<div style="background-color: var(--ide-accent-soft); border-left: 4px solid var(--ide-accent); padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--radius-sm); max-width: 760px; margin: 0 auto;">
<p style="font-size: 0.98rem; color: var(--text-main); font-weight: 600; margin: 0;">
<em>“No todos los desafíos necesitan todo el Ecosistema. Pero todos pueden beneficiarse de una mirada capaz de comprender el conjunto.”</em>
</p>
</div>
</div>
</section>
<!-- Gráfico Visual de Conectividad del Ecosistema -->
<section class="section-padding-sm bg-subtle-section">
<div class="container text-center">
<div style="max-width: 860px; margin: 0 auto; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem;">
<span class="eyebrow">ARQUITECTURA DE INTEGRACIÓN</span>
<h2 style="font-size: 1.8rem; margin-bottom: 1.5rem;">El Modelo de Red Sistémica</h2>
<div class="grid-4" style="margin-top: 2rem; text-align: center;">
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: var(--ide-primary); margin-bottom: 0.25rem;">📊</div> -->
<strong style="color: var(--ide-primary);">EXCELLENCE</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Procesos & Calidad</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: var(--ide-accent); margin-bottom: 0.25rem;">🎯</div> -->
<strong style="color: var(--ide-accent);">PROJECT</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Dirección & PMO</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: #D97706; margin-bottom: 0.25rem;">🎓</div> -->
<strong style="color: #ed8d01;">ACADEMY</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Capacidades & Personas</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: #6366F1; margin-bottom: 0.25rem;">⚡</div> -->
<strong style="color: #2c69ab;">DIGITAL</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">IA & Automatización</p>
</div>
</div>
</div>
</div>
</section>
<!-- Profundización de las 4 Capacidades -->
<section class="section-padding">
<div class="container">
<!-- 1. IDE Excellence -->
<div id="excellence" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<span class="ecosystem-badge badge-excellence">GESTIÓN Y PROCESOS</span>
<h2 style="color: var(--ide-primary); font-size: 2rem; margin-bottom: 1rem;">IDE Excellence</h2>
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
<strong>Para fortalecer la gestión:</strong> Diseñamos y optimizamos la arquitectura de procesos organizacionales, sistemas de gestión de calidad y cumplimiento normativo internacional.
</p>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
<li>• Normas ISO 9001, 14001, 45001, 21001, 27001.</li>
<li>• Mapeo, rediseño y optimización de cadenas de valor.</li>
<li>• Indicadores de desempeño (KPIs) y tableros de control de gestión.</li>
<li>• Auditorías internas con enfoque de riesgo y madurez.</li>
</ul>
</div>
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">📋</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Excellence</div>
</div>
</div>
</div>
</div>
<!-- 2. IDE Project -->
<div id="project" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">🎯</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Project</div>
</div>
</div>
<div>
<span class="ecosystem-badge badge-project">DIRECCIÓN Y RESULTADOS</span>
<h2 style="color: var(--ide-accent); font-size: 2rem; margin-bottom: 1rem;">IDE Project</h2>
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
<strong>Para convertir desafíos en proyectos y proyectos en resultados:</strong> Estructuramos la metodología y el control para que las iniciativas estratégicas se cumplan en tiempo, costo y alcance.
</p>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
<li>• Oficinas de Gestión de Proyectos (PMO) estratégicas y operativas.</li>
<li>• Gestión de portafolios, priorización e inversiones.</li>
<li>• Metodologías híbridas: PMBOK® + marcos ágiles (Scrum, Kanban).</li>
<li>• Rescate y reestructuración de proyectos con desvíos críticos.</li>
</ul>
</div>
</div>
</div>
<!-- 3. IDE Academy -->
<div id="academy" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<span class="ecosystem-badge badge-academy">DESARROLLO HUMANO</span>
<h2 style="color: #ed8d01; font-size: 2rem; margin-bottom: 1rem;">IDE Academy</h2>
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
<strong>Para desarrollar las capacidades que hacen posible la transformación:</strong> Formación ejecutiva e In-Company diseñada para que los equipos comprendan, apliquen y sostengan los cambios.
</p>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.25rem;">
<li>• Capacitación In-Company sobre casos y procesos reales.</li>
<li>• Programas de liderazgo de equipos y gestión del cambio.</li>
<li>• Formación de auditores internos y dueños de procesos.</li>
</ul>
<a href="ide-academy.html" class="btn btn-outline btn-sm">Ver Catálogo de Cursos →</a>
</div>
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">🎓</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Academy</div>
</div>
</div>
</div>
</div>
<!-- 4. IDE Digital -->
<div id="digital" class="card" style="padding: 2.5rem;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">⚡</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Digital</div>
</div>
</div>
<div>
<span class="ecosystem-badge badge-digital">TECNOLOGÍA CON SENTIDO</span>
<h2 style="color: #2c69ab; font-size: 2rem; margin-bottom: 1rem;">IDE Digital</h2>
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
<strong>Para integrar tecnología, datos e IA con propósito:</strong> No sumamos herramientas por moda; automatizamos procesos clave y potenciamos la toma de decisiones con analítica de datos.
</p>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
<li>• Implementación práctica de Inteligencia Artificial en flujos operativos.</li>
<li>• Automatización No-Code / Low-Code de tareas repetitivas.</li>
<li>• Tableros de Business Intelligence (BI) y visualización de KPIs.</li>
<li>• Diagnósticos de madurez digital y ciberseguridad básica.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Ejemplos Concretos de Integración -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div style="text-align: center; margin-bottom: 3rem;">
<span class="eyebrow">CASOS DE INTEGRACIÓN</span>
<h2>Cómo se conectan las capacidades en la práctica</h2>
</div>
<div class="grid-3">
<div class="card">
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-academy">Academy</span>
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Certificación ISO con Adopción Real</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
IDE Excellence diseña el Sistema de Gestión de Calidad, mientras que IDE Academy capacita a los líderes de proceso para que el sistema viva en la cultura diaria.
</p>
</div>
<div class="card">
<span class="ecosystem-badge badge-project">Project</span> + <span class="ecosystem-badge badge-digital">Digital</span>
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">PMO con Tableros Inteligentes</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
IDE Project estructura la gobernanza del portafolio, e IDE Digital implementa asistentes automáticos de seguimiento y tableros en tiempo real para el directorio.
</p>
</div>
<div class="card">
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-digital">Digital</span>
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Reingeniería de Procesos con IA</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
IDE Excellence mapea y simplifica los flujos de trabajo, e IDE Digital automatiza la ingesta y clasificación de documentación con agentes de IA.
</p>
</div>
</div>
</div>
</section>
<!-- CTA Final -->
<section class="section-padding">
<div class="container text-center">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">¿Qué combinación de capacidades necesita tu organización?</h2>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
Conversemos para diseñar una propuesta a medida de tu realidad.
</p>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<a href="contacto.html" class="btn btn-primary btn-lg">HABLEMOS</a>
<a href="desafios.html" class="btn btn-outline btn-lg">Explorar por Desafíos</a>
</div>
</div>
</section>
</main>
<footer id="site-footer"></footer>
<script src="js/main.js"></script>
</body>
</html>