Cuerpo y narración

<div class="img-container"> <img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/corazon.png" style="width:300px;height:auto;"> <img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/higado.png" style="width:300px;height:auto;"> <img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/pulmones.png" style="width:300px;height:auto;"> <img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/cerebro.png" style="width:300px;height:auto;"> </div> <h1 style="color:Tomato;">Esto es: (text-rotate-z:19)[Cuerpo] y <h2 style="border: 2px solid Tomato;">[[narración]]</h2> ¿Has intentado tener acceso privilegiado al interior de tu cuerpo? ¿Y al interior de tu mente? Estamos conformados de un [[cuerpo]] pero también somos una constante [[narración]]. <audio autoplay > <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/latido.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>

<!DOCTYPE html> <html> <head> <style> div { padding: 0px; } </style> </head> <h2>Para esta experiencia, necesitarás un [[estetoscopio]]</h2> <h3 style="color:Tomato";> Ten, póntelo</h3> [[Iniciar experiencia]] </html>

<div id="caja" > <h2 style="color:Orange;">pasa a la</h2> <h1 style="color:Blue;"> [[antesala del cuerpo]]</h1> </div> <video id="background-video" width="320" height="240" autoplay loop> <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/videohouse.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

<div style="height: 400px; position: relative; margin: 50px;">  <span style="position: absolute; left: 10%; top: 5%; transform: rotate(-10deg); font-size: 60px; font-weight: bold; color: #00FF00;">¿</span>  <span style="position: absolute; left: 20%; top: 10%; transform: rotate(20deg); font-size: 60px; font-weight: bold; color: #008080;">Conoces</span>  <span style="position: absolute; left: 70%; top: 30%; transform: rotate(25deg); font-size: 80px; color: #e74c3c;">a</span>  <span style="position: absolute; left: 85%; top: 52%; transform: rotate(50deg); font-size: 70px; font-family: 'Georgia', serif; color: #3498db;">Paul</span>  <span style=" position: absolute; left: 43%; top: 85%; transform: rotate(125deg); font-size: 75px; font-style: italic; color: #9b59b6; display: inline-block; animation: pulso 0.8s ease-in-out infinite; ">[[Ricœur|paul]]</span> <style> @keyframes pulso { 0% { transform: rotate(125deg) scale(1); } 50% { transform: rotate(125deg) scale(1.1); } 100% { transform: rotate(125deg) scale(1); } } </style>  <span style="position: absolute; left: 25%; top: 88%; transform: rotate(100deg); font-size: 100px; color: #f39c12;">?</span> </div> [[cuerpo]]--> <audio autoplay > <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/audio.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>

<h4>El cuerpo humano se compone de</h4> (text-size:2.5)+(text-colour:blue)+(text-style:"blink")[78] <h4>órganos que en conjunto llevan a cabo miles de funciones distintas.</h4> (text-size:1.5)+(text-colour:blue)+(text-style:"italic")[Ahora imagina] a tu cuerpo como un ente literario, un espacio donde convergen la (text-colour:yellow)[[narrativa]] la (text-colour:orange)[[lírica]] y el (text-colour:magenta)[[teatro]]... (link: "◄")[(goto: "narración")] <audio autoplay > <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/cuerpo.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>

<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/paul.jpg" style=" width: 300px; /* Ajusta el tamaño */ height: 300px; /* Mismo valor que width para perfecto círculo */ border-radius: 50%; /* Hace la imagen redonda */ object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsión */ display: block; /* Mejor control del flujo */ margin: 0 auto; /* Centra la imagen */ border: 3px solid #fff; /* Borde opcional (ajusta color/grosor) */ box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Sombra opcional */ " > (set: $frase to "La instancia enunciativa de Paul Ricœur (1913-2005), filósofo francés, propone una...") (set: $contador to 1) <div id="maquina-escribir" style=" font-family: 'Courier New'; background: #000; color: lime; padding: 10px; border-left: 3px solid lime; "> </div> <script> function escribir() { if ($contador <= $frase.length) { document.getElementById("maquina-escribir").innerHTML = $frase.substring(0, $contador) + '<span style="border-right: 2px solid lime;"> </span>'; $contador++; setTimeout(escribir, 200); // Velocidad en milisegundos } } escribir(); </script> [ teoría de la existencia como narración, en que nuestra identidad no es fija, sino que se forma a partir de los relatos que organizan y dan sentido a nuestras experiencias. A través de la narración es como impregnamos de coherencia nuestra experiencia ontológica.] <audio autoplay > <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/registro.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> (link: "Cuerpo")[(goto: "cuerpo")] (link: "Guía")[(goto: "Terminado")] (link: "Créditos")[(goto: "Créditos")]

La narrativa es un género literario que se centra en contar historias a través de un relato estructurado. Puede incluir cuentos, novelas, crónicas, [[fábulas]] o mitos. <audio autoplay > <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/bells.mp3" type="audio/mp3">

(align: "<==")[ (text-colour: "silver")[ (text-size: 1.1)+(font: "Georgia")[ (transition: "rumble")[La lírica es voz del alma cantora,] <br> (text-colour: "gold")+(transition: "rumble")[que en versos de amor y dolor se enamora.] <br> (text-rotate: -3)+(transition: "rumble")[Con rimas que besan el viento ligero,] <br> (transition: "rumble")+(text-style: "shadow")+(text-size: 1.3)[es eco del sueño, suspiro verdadero.] ] ] ] [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/corazon.png" style="width:200px;height:auto;" class="imagen-hover-roja">|corazon1]]

(transition: "fade") +(transition-time: 3s)[ (text-size: 2)+(font: "Georgia, serif")[ El arte dramático o teatral no tiene como principal objetivo entretener, o al menos no hoy en día. Una de sus principales motivaciones es (text-style: "mark")[(text-color: "yellow")[visibilizar]] lo que ha sido (text-style: "blur")[(text-color: "7F776A")[difuminado]] socialmente y relegado gradualmente hasta ser (text-style: "blink")[(text-color: "Crimson")[cultura de gueto]]. ] ] (transition: "fade") +(transition-time: 3s)[ (text-size: 2)+(font: "Georgia, serif")[ El teatro es para ser (text-style: "shadow")[(text-color: "LightCyan")[visto]]. ] ] [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/ojo.png" style="width:200px;height:auto;" class="imagen-hover-roja">|ojo1]]

<H1>Cierra los ojos y escucha</H1> <audio autoplay> <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/abreojos.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> <div class="img-container"> [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/ojo.png" style="width:200px;height:auto;" class="imagen-hover-roja">|ojo2]] [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/cerebro.png" style="width:200px;height:auto;" class="imagen-hover-roja">|cerebro2]] [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/corazon.png" style="width:200px;height:auto;" class="imagen-hover-roja">|corazon2]] </div>

<video id="background-video" width: "100%"; height: "100%"; object-fit: cover; autoplay style="display: block; margin: 0 auto;"> <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/eugene.mp4" type="video/mp4"> Your browser does not support the video tag. </video>  <div style="position: fixed; left: 15px; top: 50%; transform: translateY(-50%); z-index: 100; background: rgba(0,0,0,0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;"> (link: "◄")[(goto: "cuerpo")] </div>  <div style="position: fixed; right: 15px; top: 50%; transform: translateY(-50%); z-index: 100; background: rgba(0,0,0,0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;"> (link: "►")[(goto: "narración")] </div>

<div style="position: relative;">  <button style=" position: absolute; bottom: 50px; right: 5px; padding: 10px 20px; background-color: rgba(255, 255, 0, 0.9); /* Amarillo semitransparente */ color: black; border: 2px solid white; border-radius: 8px; z-index: 100; font-size: 16px; "> (link: "¡Terminé! →")[(goto: "da clic aquí")] </button> </div> <video id="background-video" width="320" height="240" autoplay> <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/tlacuache.mp4" type="video/mp4"> </video>

<div id="caja"> <H1>Noche madrugada </H1> <style> #contador { font-size: 48px; font-family: verdana; color: yellow; } </style> <div id="contador"> <script> // Fecha de inicio (2025-03-13) const fechaInicio = new Date('2025-03-13'); // Cambia esta fecha según lo necesites const display = document.getElementById("contador"); function calcularDias() { const fechaActual = new Date(); const diferenciaTiempo = fechaActual - fechaInicio; // Diferencia en milisegundos const diasTranscurridos = Math.floor(diferenciaTiempo / (1000 * 60 * 60 * 24)); // Convertir milisegundos a días display.textContent = `${diasTranscurridos} días sin aire`; } setInterval(calcularDias, 1000); calcularDias(); </script> </div> <span class="dancing-script"> La penumbra me abraza y me consuela Por la muerte de mi nívea rubia vela Esta noche se marcha sin despedida No llegó, nunca le di la bienvenida Espasmo, pinchazo, reflejos de vida Nada le sirve a mi luz acaecida No hay esperanza como no hay llanto En mi carne seca se respira un canto Fúnebre que en las sombras dilatadas El sol fantasmal las tiene amenazadas Con un sueño fatuo de promesas lánguidas Que de polvo y hueso frío están ávidas Gallo negro que das la misa matinal Ahoga mis gritos y clava el puñal Corta el hilo de aire, mi gris verdugo Que de mí no quede rastro ni mendrugo </span> [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/ojo.png" style="width:200px;height:auto;" class="imagen-hover-roja">|teatro]] Volver al [[cuerpo]] </div> <video id="background-video" width="320" height="240" autoplay loop> <source src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/vela.mp4" type="video/mp4"> </video>

<div id="caja" > <h1 style="color:Red;">La poesía nace del dolor</h1> <h2 style="color:Blue;"> La alegría es un fin en sí misma</h2> -Pablo Neruda </div> [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/corazon.png" style="width:200px;height:auto;" class="imagen-hover-roja">|corazon1]]

(set: $frase to "Este trabajo es un pequeño homenaje al filósofo Paul Ricœur y a la hermenéutica. Contiene imágenes sensibles sobre el cuerpo humano, así como videos y audios que se reproducen automáticamente. Te recomendamos regular el volumen de tu dispositivo.") (set: $contador to 1) <div id="maquina-escribir" style=" font-family: 'Courier New'; background: #000; color: lime; padding: 10px; border-left: 3px solid lime; "> </div> <script> function escribir() { if ($contador <= $frase.length) { document.getElementById("maquina-escribir").innerHTML = $frase.substring(0, $contador) + '<span style="border-right: 2px solid lime;"> </span>'; $contador++; setTimeout(escribir, 50); // Velocidad en milisegundos } } escribir(); </script> <button style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"> (link: "← Regresar al Origen")[(goto: "Origen")] </button>

<span style="color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em;"> Créditos y agradecimientos <style> .typewriter { color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em; position: relative; line-height: 1.5; } .typewriter::after { content: "|"; animation: blink 1s step-end infinite; color: ivory; } @keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } } .typewriter-text { display: inline-block; overflow: hidden; animation: typing 5s steps(100, end); white-space: pre-wrap; word-wrap: break-word; } @keyframes typing { from { width: 0 } to { width: 100% } } </style> <div class="typewriter"> <span class="typing-effect">Agradezco con todo mi cariño a mis queridos maestros: Dr. Rodolfo Mata Sandoval Mtro. Vinicius Marquet Colmenares Dr. Diego Bonilla También agradezco a toda la clase del seminario de Literatura Electrónica del semestre 2025-2, por su amistad y apoyo incondicionales. Alejandro Núñez Gutiérrez - voz del público en general (teatro) Libni Yashiro Vera Guevara - voz del burro ejecutivo (teatro) Andrea Michelle Jackson Calles - voz de la chica india (teatro) Abihu Javier Zarate Cruz - voz del chico indio (teatro) El poema "Noche madrugada, x días sin aire" es original de Mabelle Bat Mishehu Bellaire, © prohibida su reproducción total o parcial. Este trabajo fue creado por Mabelle Bat Mishehu Bellaire.</span> </span> <style> .imagen-hover-naranja:hover { filter: drop-shadow(0 0 8px orange); transition: filter 0.3s ease; } </style> <style> .imagen-hover-naranja:hover { filter: hue-rotate(20deg) saturate(1.5); transition: filter 0.3s ease; } </style> <style> .imagen-hover-naranja:hover { filter: hue-rotate(20deg) saturate(3.5); transition: filter 0.3s ease; } </style> [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/encendido.png" style="width:600px; height:auto; margin-top: -6cm;" class="imagen-hover-naranja">|Fin]]

<span style="color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em;"> Fin <style> .typewriter { color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em; position: relative; line-height: 1.5; } .typewriter::after { content: "|"; animation: blink 1s step-end infinite; color: ivory; } @keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } } .typewriter-text { display: inline-block; overflow: hidden; animation: typing 5s steps(100, end); white-space: pre-wrap; word-wrap: break-word; } @keyframes typing { from { width: 0 } to { width: 100% } } </style> <style> .imagen-hover-gris { width: 600px; height: auto; margin-top: -6cm; transition: filter 0.4s ease; /* Transición suave de 0.4 segundos */ } .imagen-hover-gris:hover { filter: grayscale(100%) brightness(0.4); /* Gris oscuro */ } </style> [[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/apagado.png" class="imagen-hover-gris">|disclaimer]]

<span style="color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em;"> Sobre la fábula <style> .typewriter { color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em; position: relative; line-height: 1.5; } .typewriter::after { content: "|"; animation: blink 1s step-end infinite; color: ivory; } @keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } } .typewriter-text { display: inline-block; overflow: hidden; animation: typing 5s steps(100, end); white-space: pre-wrap; word-wrap: break-word; } @keyframes typing { from { width: 0 } to { width: 100% } } </style> <div class="typewriter"> <span class="typing-effect">Desde el siglo V a. e. c., el pensador griego Gorgias de Leontino expone la importancia de la regulación de la mente y la imaginación bajo parámetros éticos. En “Encomio a Helena” analiza cómo el <i>logos</i> (lenguaje) puede llegar a dominar la mente. De aquí se desprende la idea de que el pensamiento puede ser regulado por parámetros éticos. Un hombre no puede caminar sobre el agua, pero podemos imaginarlo. De la misma forma, podemos imaginar animales sosteniendo una conversación racional y moralizante. No es de extrañar que la imaginación y la mente estén estrechamente ligadas a las funciones cerebrales. Es por ello que hemos elegido este órgano para sentir la fábula. Si estás familiarizado con alguna fábula, habrás notado que los animales que interactúan son endémicos del contexto geográfico de quien la creó, lo cual es muy razonable. Es por ello que en esta fábula hemos elegido a nuestro amado tlacuache y nuestro tierno axolote como maestros de la siguiente enseñanza… </span> </span> <button style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"> (link: "← Continuar")[(goto: "fábula")] </button>

<span style="color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em;"> Sobre el teatro <style> .typewriter { color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em; position: relative; line-height: 1.5; } .typewriter::after { content: "|"; animation: blink 1s step-end infinite; color: ivory; } @keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } } .typewriter-text { display: inline-block; overflow: hidden; animation: typing 5s steps(100, end); white-space: pre-wrap; word-wrap: break-word; } @keyframes typing { from { width: 0 } to { width: 100% } } </style> <div class="typewriter"> <span class="typing-effect">El arte dramático está pensado para ser visto, por ello se le llama <i>puesta en escena</i>. La palabra escena, por su etimología, evoca necesariamente la "parte del escenario <b>visible</b> al público". Dentro del teatro, hay subgéneros variopintos que retratan de forma directa e indirecta su contexto histórico, social y, por supuesto, político. La pieza que estás a punto de ver es una representación digital del <i>Teatro del absurdo</i> del escritor francés Eugène Ionesco, quien creó la obra <i>Rhinocéros</i>, “El rinoceronte”, en 1959. Es una obra en la que los personajes, dentro de un marco sumamente surrealista, se convierten paulatinamente en rinocerontes. Esta idea de animalización poética está inspirada en un hecho que sucedió ese mismo año en São Paulo, Brasil, cuando los habitantes decidieron votar por un rinoceronte llamado Cacareco como alcalde municipal, bajo el argumento de que preferían ser gobernados por un rinoceronte que por un “asno”, con lo cual hicieron mofa de sus políticos deficientes. A este hecho histórico lo llamaron “el voto de castigo”. La persona que verás al final de la siguiente pieza visual es Eugène Ionesco, quien inspiró este proyecto que conjunta la literatura, el teatro, la crítica y la sátira política. Esperamos que lo disfrutes.</span> </span> <button style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"> (link: "← Continuar")[(goto: "ojo2")] </button>

<span style="color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em;"> Sobre la poesía <style> .typewriter { color: ivory; font-family: 'Courier New', monospace; font-size: 1.1em; letter-spacing: 0.05em; position: relative; line-height: 1.5; } .typewriter::after { content: "|"; animation: blink 1s step-end infinite; color: ivory; } @keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } } .typewriter-text { display: inline-block; overflow: hidden; animation: typing 5s steps(100, end); white-space: pre-wrap; word-wrap: break-word; } @keyframes typing { from { width: 0 } to { width: 100% } } </style> <div class="typewriter"> <span class="typing-effect">Un dicho popular es que “la poesía nace del corazón”. Es por esta razón tan evidente que decidimos relacionar este órgano con la lírica. A continuación, te presentamos una pieza inédita, el nombre de la escritora se encuentra en los créditos, por ahí, en medio de este laberinto de sensaciones…</span> </span> <button style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"> (link: "← Continuar")[(goto: "corazon2")] </button>

<h2 style="color:yellow";>¿Te sientes perdido(a)?</h2> <span style="color: #FBFAC7; font-weight: bold;">Estas son las salas del recorrido</span> <div class="img-container"> <span style="color: #FBFAC7; font-weight: bold;">Teatro</span>[[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/ojo.png" style="width:200px;height:auto;" class="imagen-hover-roja">|ojo2]] <span style="color: #FBFAC7; font-weight: bold;">Narrativa</span>[[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/cerebro.png" style="width:200px;height:auto;" class="imagen-hover-roja">|cerebro2]] <span style="color: #FBFAC7; font-weight: bold;">Lírica</span>[[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/corazon.png" style="width:200px;height:auto;" class="imagen-hover-roja">|corazon2]] <span style="color: #FBFAC7; font-weight: bold;">Ricœur</span>[[<img src="https://www.iifl.unam.mx/semLitElec/2025-2/sld_mvillegas/paul2.png" style="width:200px;height:auto;" class="imagen-hover-roja">|paul]] </div> <span style="color: #FBFAC7; font-weight: bold;">Si ya has visitado todas, te invito a que compartas conmigo tu experiencia y me dejes saber tu opinión respondiendo un breve</span> (text-colour:#3ABD20) [[formulario]]