Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análisis de Patrones y Marcos de Trabajo en Arquitectura de Software</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Google Fonts: Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #2563eb; | |
| --secondary: #1e40af; | |
| --accent: #0ea5e9; | |
| --light: #f0f9ff; | |
| --dark: #1e293b; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f2f5 0%, #e2e8f0 100%); | |
| color: var(--dark); | |
| } | |
| .slide { | |
| display: none; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| .slide.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .pattern-card { | |
| border-top: 4px solid var(--primary); | |
| } | |
| .problem-card { | |
| border-top: 4px solid #ef4444; | |
| } | |
| .solution-card { | |
| border-top: 4px solid #10b981; | |
| } | |
| .indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #cbd5e1; | |
| transition: all 0.3s ease; | |
| } | |
| .indicator.active { | |
| background-color: var(--primary); | |
| transform: scale(1.2); | |
| } | |
| .nav-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-btn:hover { | |
| background-color: var(--secondary); | |
| transform: translateY(-2px); | |
| } | |
| .nav-btn:disabled { | |
| background-color: #cbd5e1; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .pattern-icon { | |
| background-color: var(--light); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 60px; | |
| height: 60px; | |
| margin-right: 16px; | |
| } | |
| .pattern-icon svg { | |
| width: 32px; | |
| height: 32px; | |
| color: var(--primary); | |
| } | |
| .architecture-diagram { | |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); | |
| border-radius: 12px; | |
| padding: 20px; | |
| } | |
| .pattern-tag { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .creacional { | |
| background-color: #dbeafe; | |
| color: var(--secondary); | |
| } | |
| .estructural { | |
| background-color: #f0fdf4; | |
| color: #047857; | |
| } | |
| .comportamiento { | |
| background-color: #fffbeb; | |
| color: #b45309; | |
| } | |
| .framework-step { | |
| counter-increment: step-counter; | |
| position: relative; | |
| padding-left: 70px; | |
| margin-bottom: 30px; | |
| } | |
| .framework-step::before { | |
| content: counter(step-counter); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 50px; | |
| height: 50px; | |
| background-color: var(--primary); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .pattern-highlight { | |
| background-color: var(--light); | |
| border-left: 4px solid var(--primary); | |
| padding: 16px; | |
| border-radius: 0 8px 8px 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center min-h-screen p-4 md:p-6 py-12"> | |
| <div class="w-full max-w-6xl mb-8 text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Análisis de Patrones y Marcos de Trabajo</h1> | |
| <p class="text-lg text-gray-600">Basado en el artículo "Marco de Trabajo para Seleccionar un Patrón | |
| Arquitectónico"</p> | |
| </div> | |
| <div id="presentation-container" class="w-full max-w-6xl card shadow-xl"> | |
| <!-- Contenedor de Diapositivas --> | |
| <div id="slides-wrapper" class="relative p-6 md:p-10 min-h-[65vh] flex items-center"> | |
| <!-- Diapositiva 1: Portada --> | |
| <div id="slide-1" class="slide active w-full"> | |
| <div class="text-center"> | |
| <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-8 rounded-2xl mb-8"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Patrones Arquitectónicos y Marcos | |
| de Trabajo</h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-8">Análisis basado en el artículo:<br>"Marco de | |
| Trabajo para Seleccionar un Patrón Arquitectónico"</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Autores</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-center"> | |
| <span>Jairo Daniel Mendoza Torres</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <span>Bryam Guillen Ayala</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Información del Curso</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-0.5" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /> | |
| <path fill-rule="evenodd" | |
| d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| <span>Patrones de Diseño de Software</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-0.5" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| <span>Junio 2025</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diapositiva 2: Problema y Objetivo --> | |
| <div id="slide-2" class="slide w-full"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">El Desafío de la Arquitectura | |
| de Software</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="problem-card card p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="pattern-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor" stroke-width="2"> | |
| <path stroke-linecap="round" stroke-linejoin="round" | |
| d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Problemas Clave</h3> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Selección incorrecta de arquitectura</li> | |
| <li>Alto acoplamiento entre componentes</li> | |
| <li>Baja cohesión y mantenibilidad</li> | |
| <li>Pobre respuesta a atributos de calidad</li> | |
| <li>Dificultad para escalar sistemas</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-red-50 rounded-lg"> | |
| <p class="text-red-800 font-medium">"La falta de una arquitectura adecuada genera sistemas | |
| frágiles y costosos de mantener"</p> | |
| </div> | |
| </div> | |
| <div class="solution-card card p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="pattern-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor" stroke-width="2"> | |
| <path stroke-linecap="round" stroke-linejoin="round" | |
| d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Objetivo del Artículo</h3> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Proponer un marco de trabajo para selección de patrones</li> | |
| <li>Guía basada en contexto y atributos de calidad</li> | |
| <li>Reducción de ambigüedad en decisiones arquitectónicas</li> | |
| <li>Mejora de mantenibilidad y escalabilidad</li> | |
| <li>Reducción de costos a largo plazo</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-green-50 rounded-lg"> | |
| <p class="text-green-800 font-medium">"La selección adecuada de arquitectura es fundamental | |
| para la calidad del software"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diapositiva 3: Patrones Arquitectónicos --> | |
| <div id="slide-3" class="slide w-full"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">Patrones Arquitectónicos Clave | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="pattern-card card p-5"> | |
| <div class="flex items-start"> | |
| <div class="mr-4"> | |
| <span class="pattern-tag creacional">MVC</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Model-View-Controller</h3> | |
| <p class="text-gray-700 mb-3">Separa datos (Model), interfaz (View) y lógica de control | |
| (Controller). Ideal para aplicaciones web y de escritorio.</p> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">Atributos clave:</span> Mantenibilidad, Separación de | |
| preocupaciones | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pattern-card card p-5"> | |
| <div class="flex items-start"> | |
| <div class="mr-4"> | |
| <span class="pattern-tag estructural">MVP</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Model-View-Presenter</h3> | |
| <p class="text-gray-700 mb-3">El Presenter media entre Vista y Modelo. Popular en | |
| desarrollo móvil (Android).</p> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">Atributos clave:</span> Testeabilidad, Desacoplamiento | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pattern-card card p-5"> | |
| <div class="flex items-start"> | |
| <div class="mr-4"> | |
| <span class="pattern-tag comportamiento">MVVM</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Model-View-ViewModel</h3> | |
| <p class="text-gray-700 mb-3">Especializado en enlace de datos (data binding). Usado en | |
| Angular y React.</p> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">Atributos clave:</span> Reactividad, Separación de lógica | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pattern-card card p-5"> | |
| <div class="flex items-start"> | |
| <div class="mr-4"> | |
| <span class="pattern-tag estructural">Microservicios</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Arquitectura de Microservicios</h3> | |
| <p class="text-gray-700 mb-3">Descompone la aplicación en servicios pequeños, autónomos | |
| y comunicados vía API.</p> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">Atributos clave:</span> Escalabilidad, Resiliencia | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diapositiva 4: Relación con Patrones de Diseño --> | |
| <div id="slide-4" class="slide w-full"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 text-center">Simbiosis: Arquitectura y | |
| Patrones de Diseño</h2> | |
| <p class="text-lg text-gray-600 mb-8 text-center max-w-3xl mx-auto">Los patrones arquitectónicos se | |
| construyen sobre patrones de diseño fundamentales que resuelven problemas específicos de | |
| implementación.</p> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full text-left text-sm"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-4 py-3 font-semibold text-gray-700">Tipo</th> | |
| <th class="px-4 py-3 font-semibold text-gray-700">Patrón</th> | |
| <th class="px-4 py-3 font-semibold text-gray-700">Uso en Arquitectura</th> | |
| <th class="px-4 py-3 font-semibold text-gray-700">Ejemplo</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3"><span class="pattern-tag creacional">Creacional</span></td> | |
| <td class="px-4 py-3 font-medium">Singleton</td> | |
| <td class="px-4 py-3">Instancias únicas (BD en MVC)</td> | |
| <td class="px-4 py-3">Conexión a base de datos</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-4 py-3"><span class="pattern-tag creacional">Creacional</span></td> | |
| <td class="px-4 py-3 font-medium">Factory Method</td> | |
| <td class="px-4 py-3">Creación de objetos en el Modelo</td> | |
| <td class="px-4 py-3">Creación de entidades de negocio</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3"><span class="pattern-tag estructural">Estructural</span></td> | |
| <td class="px-4 py-3 font-medium">Facade</td> | |
| <td class="px-4 py-3">API Gateway en Microservicios</td> | |
| <td class="px-4 py-3">Simplificación de interfaces complejas</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-4 py-3"><span class="pattern-tag estructural">Estructural</span></td> | |
| <td class="px-4 py-3 font-medium">Proxy</td> | |
| <td class="px-4 py-3">Acceso a recursos en la nube</td> | |
| <td class="px-4 py-3">Control de acceso a servicios remotos</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3"><span class="pattern-tag comportamiento">Comportamiento</span> | |
| </td> | |
| <td class="px-4 py-3 font-medium">Observer</td> | |
| <td class="px-4 py-3">Data binding en MVVM</td> | |
| <td class="px-4 py-3">Actualización automática de vistas</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-4 py-3"><span class="pattern-tag comportamiento">Comportamiento</span> | |
| </td> | |
| <td class="px-4 py-3 font-medium">Strategy</td> | |
| <td class="px-4 py-3">Intercambio de algoritmos de negocio</td> | |
| <td class="px-4 py-3">Diferentes métodos de pago</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3"><span class="pattern-tag comportamiento">Comportamiento</span> | |
| </td> | |
| <td class="px-4 py-3 font-medium">Command</td> | |
| <td class="px-4 py-3">Acciones en controladores MVC</td> | |
| <td class="px-4 py-3">Encapsulación de operaciones de usuario</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8 p-6 bg-blue-50 rounded-xl"> | |
| <h3 class="text-lg font-semibold text-blue-800 mb-3">Conclusión Clave</h3> | |
| <p class="text-gray-700">Los patrones de diseño (GoF) y los patrones arquitectónicos son | |
| complementarios. Mientras los patrones arquitectónicos definen la estructura global, los | |
| patrones de diseño resuelven problemas específicos dentro de esa estructura.</p> | |
| </div> | |
| </div> | |
| <!-- Diapositiva 5: Framework de Selección --> | |
| <div id="slide-5" class="slide w-full"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 text-center">Marco de Trabajo para | |
| Selección de Patrones</h2> | |
| <p class="text-lg text-gray-600 mb-8 text-center max-w-3xl mx-auto">El artículo propone un método | |
| sistemático para seleccionar el patrón arquitectónico óptimo basado en el contexto del proyecto.</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="framework-step"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Identificar el Tipo de Desarrollo</h3> | |
| <p class="text-gray-700 mb-4">Determinar la naturaleza de la aplicación: web, móvil, escritorio | |
| o servicios.</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 text-center"> | |
| <div class="text-blue-500 mb-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> | |
| </svg> | |
| </div> | |
| <span class="font-medium">Web</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 text-center"> | |
| <div class="text-blue-500 mb-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <span class="font-medium">Móvil</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 text-center"> | |
| <div class="text-blue-500 mb-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <span class="font-medium">Escritorio</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 text-center"> | |
| <div class="text-blue-500 mb-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> | |
| </svg> | |
| </div> | |
| <span class="font-medium">Servicios</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="framework-step"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Definir Atributos de Calidad</h3> | |
| <p class="text-gray-700 mb-4">Seleccionar los atributos críticos para el proyecto: rendimiento, | |
| seguridad, mantenibilidad, etc.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="pattern-tag creacional">Rendimiento</span> | |
| <span class="pattern-tag estructural">Seguridad</span> | |
| <span class="pattern-tag comportamiento">Mantenibilidad</span> | |
| <span class="pattern-tag creacional">Escalabilidad</span> | |
| <span class="pattern-tag estructural">Testeabilidad</span> | |
| <span class="pattern-tag comportamiento">Flexibilidad</span> | |
| </div> | |
| </div> | |
| <div class="framework-step"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Seleccionar Patrón Recomendado</h3> | |
| <p class="text-gray-700 mb-4">El framework mapea las selecciones anteriores a un patrón | |
| arquitectónico óptimo.</p> | |
| <div class="pattern-highlight mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="pattern-tag creacional">Ejemplo:</span> | |
| </div> | |
| <p class="font-medium text-gray-800">Aplicación Web + Mantenibilidad + Rendimiento → <span | |
| class="text-blue-600">MVC</span></p> | |
| <p class="text-sm text-gray-600 mt-1">Servicios Web + Seguridad + Escalabilidad → <span | |
| class="text-blue-600">Microservicios</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diapositiva 6: Conclusiones --> | |
| <div id="slide-6" class="slide w-full"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">Conclusiones y Aprendizajes | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> | |
| <div class="card p-6 bg-gradient-to-br from-blue-50 to-indigo-50"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Hallazgos Clave</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <span>La selección de arquitectura impacta todo el ciclo de vida del software</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <span>Patrones arquitectónicos y de diseño son complementarios</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <span>DDD y Hexagonal comparten objetivos de desacoplamiento</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" | |
| viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <span>El marco propuesto reduce ambigüedad en decisiones arquitectónicas</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card p-6 bg-gradient-to-br from-green-50 to-teal-50"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Beneficios del Framework</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">Reducción de Costos</h4> | |
| <p class="text-gray-700 text-sm">Menos reprocesos y mantenimiento a largo plazo</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">Mejora de Calidad</h4> | |
| <p class="text-gray-700 text-sm">Sistemas más robustos y mantenibles</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">Toma de Decisiones</h4> | |
| <p class="text-gray-700 text-sm">Proceso sistemático basado en contexto</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">Conocimiento Compartido</h4> | |
| <p class="text-gray-700 text-sm">Guía para desarrolladores y arquitectos</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-white rounded-lg border border-green-200"> | |
| <p class="text-green-700 font-medium text-center">"La arquitectura adecuada es la base para | |
| software de calidad"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controles de Navegación --> | |
| <div class="flex items-center justify-between bg-gray-50 p-4 border-t"> | |
| <!-- Botón Anterior --> | |
| <button id="prevBtn" class="nav-btn px-6 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"> | |
| ← Anterior | |
| </button> | |
| <!-- Indicadores de Diapositiva --> | |
| <div id="slide-indicators" class="flex space-x-2"> | |
| <!-- Los indicadores se generarán con JS --> | |
| </div> | |
| <!-- Botón Siguiente --> | |
| <button id="nextBtn" class="nav-btn px-6 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"> | |
| Siguiente → | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const indicatorsContainer = document.getElementById('slide-indicators'); | |
| let currentSlide = 0; | |
| const totalSlides = slides.length; | |
| // Crear indicadores | |
| for (let i = 0; i < totalSlides; i++) { | |
| const indicator = document.createElement('div'); | |
| indicator.classList.add('indicator'); | |
| indicator.dataset.slideTo = i; | |
| indicatorsContainer.appendChild(indicator); | |
| } | |
| const indicators = document.querySelectorAll('#slide-indicators .indicator'); | |
| // Función para mostrar diapositiva | |
| function showSlide(slideIndex) { | |
| // Validar índice | |
| if (slideIndex < 0 || slideIndex >= totalSlides) return; | |
| // Ocultar todas las diapositivas | |
| slides.forEach(slide => slide.classList.remove('active')); | |
| // Mostrar diapositiva actual | |
| slides[slideIndex].classList.add('active'); | |
| // Actualizar indicadores | |
| indicators.forEach((indicator, index) => { | |
| if (index === slideIndex) { | |
| indicator.classList.add('active'); | |
| } else { | |
| indicator.classList.remove('active'); | |
| } | |
| }); | |
| // Actualizar estado de botones | |
| prevBtn.disabled = slideIndex === 0; | |
| nextBtn.disabled = slideIndex === totalSlides - 1; | |
| currentSlide = slideIndex; | |
| } | |
| // Event listeners | |
| nextBtn.addEventListener('click', () => { | |
| if (currentSlide < totalSlides - 1) { | |
| showSlide(currentSlide + 1); | |
| } | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| if (currentSlide > 0) { | |
| showSlide(currentSlide - 1); | |
| } | |
| }); | |
| // Navegación por indicadores | |
| indicatorsContainer.addEventListener('click', (e) => { | |
| if (e.target.classList.contains('indicator')) { | |
| const slideIndex = parseInt(e.target.dataset.slideTo, 10); | |
| showSlide(slideIndex); | |
| } | |
| }); | |
| // Navegación por teclado | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight') nextBtn.click(); | |
| if (e.key === 'ArrowLeft') prevBtn.click(); | |
| }); | |
| // Inicializar | |
| showSlide(0); | |
| }); | |
| </script> | |
| </body> | |
| </html> |