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>