HTML Editor

Edita código
		
<html><head><base href="https://websim.io/iiot-presentacion-ampliada-30/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Revolución IIoT: Transformando la Industria - Presentación Extendida</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@700&display=swap');

  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }

  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #ffffff;
    background-color: rgba(0,0,0,0.6);
  }

  .slide.active {
    opacity: 1;
    z-index: 1;
  }

  h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }

  p, li {
    font-size: 1.3em;
    max-width: 80%;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  ul {
    text-align: left;
    margin-left: 0;
    padding-left: 20px;
  }

  .nav-buttons {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
  }

  .nav-button {
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .nav-button:hover {
    background-color: rgba(255,255,255,0.4);
    transform: scale(1.05);
  }

  #progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #4CAF50;
    transition: width 0.3s ease;
    z-index: 20;
  }

  .highlight {
    color: #FFD700;
    font-weight: bold;
  }

  .icon {
    font-size: 3em;
    margin-bottom: 20px;
  }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>

<div id="progress-bar"></div>

<div id="slide1" class="slide active">
  <i class="fas fa-industry icon"></i>
  <h1>La Revolución IIoT</h1>
  <p>Bienvenidos a la era del <span class="highlight">Internet Industrial de las Cosas (IIoT)</span>: Transformando la industria, redefiniendo la eficiencia</p>
</div>

<div id="slide2" class="slide">
  <i class="fas fa-network-wired icon"></i>
  <h1>¿Qué es el IIoT?</h1>
  <p>Una <span class="highlight">red inteligente de dispositivos interconectados</span> que recopila, analiza y actúa sobre datos en tiempo real, llevando la automatización y la eficiencia industrial a nuevos horizontes</p>
</div>

<div id="slide3" class="slide">
  <i class="fas fa-cogs icon"></i>
  <h1>Componentes Clave del IIoT</h1>
  <ul>
    <li><span class="highlight">Sensores Inteligentes:</span> Los ojos y oídos de la fábrica</li>
    <li><span class="highlight">Conectividad:</span> El sistema nervioso digital</li>
    <li><span class="highlight">Computación en la Nube:</span> El cerebro omnipresente</li>
    <li><span class="highlight">Big Data:</span> El combustible de la innovación</li>
    <li><span class="highlight">IA y Machine Learning:</span> La mente que nunca deja de aprender</li>
  </ul>
</div>

<div id="slide4" class="slide">
  <i class="fas fa-chart-line icon"></i>
  <h1>Ventajas del IIoT</h1>
  <ul>
    <li><span class="highlight">Eficiencia Operativa:</span> Optimización de procesos en tiempo real</li>
    <li><span class="highlight">Mantenimiento Predictivo:</span> Anticipando fallos antes de que ocurran</li>
    <li><span class="highlight">Reducción de Costos:</span> Minimizando desperdicios y tiempos de inactividad</li>
    <li><span class="highlight">Mejora de la Calidad:</span> Control preciso de la producción</li>
    <li><span class="highlight">Toma de Decisiones Informada:</span> Basada en datos en tiempo real</li>
  </ul>
</div>

<div id="slide5" class="slide">
  <i class="fas fa-robot icon"></i>
  <h1>Fábricas Inteligentes</h1>
  <p>El IIoT está creando <span class="highlight">súper fábricas</span> que piensan, aprenden y se adaptan. La producción inteligente ya no es ciencia ficción, es nuestra realidad industrial.</p>
</div>

<div id="slide6" class="slide">
  <i class="fas fa-bolt icon"></i>
  <h1>Energía Inteligente</h1>
  <p>Redes eléctricas inteligentes que <span class="highlight">optimizan la distribución de energía</span>, reducen pérdidas y facilitan la integración de fuentes renovables.</p>
</div>

<div id="slide7" class="slide">
  <i class="fas fa-truck icon"></i>
  <h1>Logística y Cadena de Suministro</h1>
  <p>El IIoT está <span class="highlight">revolucionando la gestión de inventarios</span> y el seguimiento de activos, creando cadenas de suministro más eficientes y transparentes.</p>
</div>

<div id="slide8" class="slide">
  <i class="fas fa-user-shield icon"></i>
  <h1>Seguridad y Salud Laboral</h1>
  <p>Sensores y wearables conectados están <span class="highlight">mejorando la seguridad en el trabajo</span>, monitoreando condiciones peligrosas y previniendo accidentes.</p>
</div>

<div id="slide9" class="slide">
  <i class="fas fa-recycle icon"></i>
  <h1>Sostenibilidad Industrial</h1>
  <p>El IIoT está impulsando la <span class="highlight">eficiencia energética y la reducción de residuos</span>, contribuyendo a una producción más limpia y sostenible.</p>
</div>

<div id="slide10" class="slide">
  <i class="fas fa-project-diagram icon"></i>
  <h1>Gemelos Digitales</h1>
  <p>Réplicas virtuales de máquinas y procesos que permiten <span class="highlight">simulaciones y optimizaciones</span> en tiempo real, llevando la eficiencia a otro nivel.</p>
</div>

<div id="slide11" class="slide">
  <i class="fas fa-vr-cardboard icon"></i>
  <h1>Realidad Aumentada en la Industria</h1>
  <p>Tecnologías de RA que <span class="highlight">mejoran el mantenimiento y la capacitación</span>, proporcionando información crucial en tiempo real a los trabajadores.</p>
</div>

<div id="slide12" class="slide">
  <i class="fas fa-robot icon"></i>
  <h1>Robótica Avanzada y Colaborativa</h1>
  <p>Robots inteligentes que <span class="highlight">trabajan en armonía con los humanos</span>, aumentando la productividad y la seguridad en entornos industriales.</p>
</div>

<div id="slide13" class="slide">
  <i class="fas fa-brain icon"></i>
  <h1>Inteligencia Artificial en la Industria</h1>
  <p>IA que <span class="highlight">optimiza procesos, predice fallos y toma decisiones autónomas</span>, llevando la automatización a nuevos niveles.</p>
</div>

<div id="slide14" class="slide">
  <i class="fas fa-lock icon"></i>
  <h1>Ciberseguridad Industrial</h1>
  <p>Protegiendo la infraestructura crítica con <span class="highlight">sistemas de seguridad robustos</span>, esenciales en un mundo cada vez más conectado.</p>
</div>

<div id="slide15" class="slide">
  <i class="fas fa-cloud icon"></i>
  <h1>Computación en el Borde</h1>
  <p>Procesamiento de datos cerca de la fuente, permitiendo <span class="highlight">respuestas más rápidas y reducción del tráfico de red</span>.</p>
</div>

<div id="slide16" class="slide">
  <i class="fas fa-industry icon"></i>
  <h1>Casos de Éxito</h1>
  <ul>
    <li><span class="highlight">General Electric:</span> Aumento del 20% en la productividad</li>
    <li><span class="highlight">Siemens:</span> Reducción del 30% en el consumo energético</li>
    <li><span class="highlight">Bosch:</span> Mejora del 25% en la calidad del producto</li>
  </ul>
</div>

<div id="slide17" class="slide">
  <i class="fas fa-exclamation-triangle icon"></i>
  <h1>Desafíos del IIoT</h1>
  <ul>
    <li><span class="highlight">Seguridad Cibernética:</span> Protección contra amenazas digitales</li>
    <li><span class="highlight">Integración:</span> Compatibilidad con sistemas heredados</li>
    <li><span class="highlight">Inversión Inicial:</span> Costos de implementación</li>
    <li><span class="highlight">Habilidades:</span> Necesidad de personal capacitado</li>
  </ul>
</div>

<div id="slide18" class="slide">
  <i class="fas fa-globe icon"></i>
  <h1>El Futuro del IIoT</h1>
  <p>Un mundo de <span class="highlight">fábricas completamente autónomas</span>, ciudades inteligentes interconectadas y una <span class="highlight">economía circular impulsada por datos</span>.</p>
</div>

<div id="slide19" class="slide">
  <i class="fas fa-graduation-cap icon"></i>
  <h1>Preparándose para el Futuro</h1>
  <ul>
    <li><span class="highlight">Educación Continua:</span> Actualización constante de habilidades</li>
    <li><span class="highlight">Inversión en I+D:</span> Mantenerse a la vanguardia de la innovación</li>
    <li><span class="highlight">Colaboración:</span> Asociaciones entre industria y academia</li>
    <li><span class="highlight">Adaptabilidad:</span> Flexibilidad ante el cambio tecnológico</li>
  </ul>
</div>

<div id="slide20" class="slide">
  <i class="fas fa-microchip icon"></i>
  <h1>Tecnologías Emergentes en IIoT</h1>
  <ul>
    <li><span class="highlight">5G y 6G:</span> Conectividad ultrarrápida y baja latencia</li>
    <li><span class="highlight">Blockchain:</span> Trazabilidad y seguridad mejoradas</li>
    <li><span class="highlight">Computación Cuántica:</span> Resolución de problemas complejos</li>
    <li><span class="highlight">Nanotecnología:</span> Sensores microscópicos y materiales avanzados</li>
  </ul>
</div>

<div id="slide21" class="slide">
  <i class="fas fa-city icon"></i>
  <h1>IIoT y Ciudades Inteligentes</h1>
  <p>La convergencia entre IIoT y ciudades inteligentes está creando <span class="highlight">ecosistemas urbanos más eficientes y sostenibles</span>, mejorando la calidad de vida de los ciudadanos.</p>
</div>

<div id="slide22" class="slide">
  <i class="fas fa-heartbeat icon"></i>
  <h1>IIoT en el Sector Salud</h1>
  <p>Aplicaciones del IIoT en hospitales y clínicas para <span class="highlight">mejorar la atención al paciente</span>, optimizar la gestión de recursos y acelerar la investigación médica.</p>
</div>

<div id="slide23" class="slide">
  <i class="fas fa-tractor icon"></i>
  <h1>Agricultura Inteligente</h1>
  <p>El IIoT está transformando la agricultura con <span class="highlight">sistemas de riego inteligentes, monitoreo de cultivos y maquinaria autónoma</span>, aumentando la producción y la sostenibilidad.</p>
</div>

<div id="slide24" class="slide">
  <i class="fas fa-hard-hat icon"></i>
  <h1>IIoT en la Construcción</h1>
  <p>Mejorando la seguridad en obra, optimizando el uso de materiales y <span class="highlight">facilitando la gestión de proyectos complejos</span> con tecnologías IIoT.</p>
</div>

<div id="slide25" class="slide">
  <i class="fas fa-oil-can icon"></i>
  <h1>IIoT en la Industria Petrolera</h1>
  <p>Monitoreo en tiempo real de pozos, <span class="highlight">optimización de la producción y mantenimiento predictivo</span> de equipos críticos en plataformas offshore.</p>
</div>

<div id="slide26" class="slide">
  <i class="fas fa-car icon"></i>
  <h1>IIoT en la Industria Automotriz</h1>
  <p>Revolucionando la producción de vehículos con <span class="highlight">líneas de montaje inteligentes</span> y facilitando el desarrollo de vehículos autónomos y conectados.</p>
</div>

<div id="slide27" class="slide">
  <i class="fas fa-lightbulb icon"></i>
  <h1>Innovación Impulsada por IIoT</h1>
  <p>El IIoT está <span class="highlight">catalizando la innovación en productos y servicios</span>, permitiendo nuevos modelos de negocio basados en datos y conectividad.</p>
</div>

<div id="slide28" class="slide">
  <i class="fas fa-users icon"></i>
  <h1>El Factor Humano en el IIoT</h1>
  <p>A pesar de la automatización, el <span class="highlight">talento humano sigue siendo crucial</span>. El IIoT está creando nuevos roles y oportunidades para profesionales cualificados.</p>
</div>

<div id="slide29" class="slide">
  <i class="fas fa-balance-scale icon"></i>
  <h1>Aspectos Éticos y Legales del IIoT</h1>
  <p>Abordando cuestiones de <span class="highlight">privacidad, responsabilidad y propiedad de datos</span> en el ecosistema IIoT para garantizar un desarrollo responsable y justo.</p>
</div>

<div id="slide30" class="slide">
  <i class="fas fa-rocket icon"></i>
  <h1>Conclusión: El IIoT es el Presente y el Futuro</h1>
  <p>El Internet Industrial de las Cosas está redefiniendo la industria hoy y moldeando el mañana. Las organizaciones que abrazan el IIoT no solo <span class="highlight">sobrevivirán, sino que liderarán la cuarta revolución industrial</span>. ¿Estás listo para ser parte de esta transformación?</p>
</div>

<div class="nav-buttons">
  <button id="prevBtn" class="nav-button">Anterior</button>
  <button id="nextBtn" class="nav-button">Siguiente</button>
</div>

<script>
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const progressBar = document.getElementById('progress-bar');
let currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].classList.remove('active');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
  updateProgressBar();
}

function nextSlide() {
  showSlide(currentSlide + 1);
  applyTransition();
}

function prevSlide() {
  showSlide(currentSlide - 1);
  applyTransition();
}

function updateProgressBar() {
  const progress = ((currentSlide + 1) / slides.length) * 100;
  progressBar.style.width = `${progress}%`;
}

function applyTransition() {
  const transitions = [
    'fade',
    'slideLeft',
    'slideRight',
    'slideUp',
    'slideDown',
    'rotate',
    'scale',
    'flip'
  ];
  const randomTransition = transitions[Math.floor(Math.random() * transitions.length)];
  
  slides.forEach(slide => {
    slide.style.transition = 'none';
    void slide.offsetWidth; // Trigger reflow
    slide.style.transition = '';
  });

  const activeSlide = document.querySelector('.slide.active');
  activeSlide.style.animation = `${randomTransition} 0.5s ease-in-out`;
}

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') nextSlide();
  if (e.key === 'ArrowLeft') prevSlide();
});

updateProgressBar();

</script>

<style>
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideRight {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes rotate {
  from { transform: rotate(90deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

@keyframes scale {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes flip {
  from { transform: perspective(400px) rotateY(90deg); }
  to { transform: perspective(400px) rotateY(0deg); }
}
</style>

</body></html>