From a00e025c0288a81ed82962292671e82212e8d098 Mon Sep 17 00:00:00 2001 From: Martin Hustoles <martin.hustoles@student.reutlingen-university.de> Date: Mon, 30 May 2022 16:54:38 +0000 Subject: [PATCH] Upload New File --- index.html | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..7f34287 --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html lang="de"> + <head> + <meta charset="UTF-8"> <!--utf-8 fuer Umlaute--> + <link rel="stylesheet" href="style.css"> + <link rel="icon" href="medien/icon.svg"> + <title>SpeculativeAI</title> + </head> + <body> + + <!-- + Jede <section> ist Eine Seite. Dadurch kann man den Blog einfacher + navgieren und unteranderem auch ein "scroll-snap" implementieren. + Das heisst, beim scrollen snapt sich das Fenster an jede Sektion perfekt an. + Platziert wurden die Texte, Bilder und Videos via Flex-Box. + --> + + <main id="scroll_main"> + <section id="page1" class="scroll_snap_item"> + <div class="zentriert"> + + <div class="header"> <!--Navigation--> + <a href="#page2">Dokumentation</a> + <a href="#page3">Funktion</a> + <a href="#page4">Künstler</a> + </div> + + <div> + <h1>SpeculativeAI</h1> <!--Ueberschrift--> + <p>Kommunikation zwischen 2 KI-Sytemen mit hilfe von Licht- und Schallsignalen</p> + </div> + + <div> + <img class="Bild1" src="Medien/BLS1.jpg" alt="Titlelbid"> + <!-- Quelle: https://www.birkschmithuesen.com/_speculativeAI --> + </div> + </div> + </section> + + <section id="page2" class="scroll_snap_item"> + <div class="container"> + + <div class="item1"> + <img class="Bild2" src="Medien/BL2.jpg" alt="Light-Object"> <!--Selbst erstellte Bilder--> + <p> + Kugelförmiges Lichtobjekt mit 95m Led-Schlauch, + Mikrofon und Mikroprozessor der die Schallsignale verarbeitet. + </p> + </div> + + <div id="video1"> <!--eingebettetes Video vom Kuenstler seiner Website--> + <iframe title="vimeo-player" src="https://player.vimeo.com/video/366300020?h=d61127ab15" width="640" height="360" frameborder="0" alt="Dokumentation-Video" allowfullscreen></iframe> + <!-- Quelle: https://www.birkschmithuesen.com/_speculativeAI --> + </div> + + <div class="item2"> + <img class="Bild2" src="Medien/BS1.jpg" alt="sound-Object"> <!--Selbst erstellte Bilder--> + <p> + Objekt dass mit einer Kamera die Lichtsignale auffängt + und in aukustische Signale verarbeitet und über die Lautsprecher abspielt + </p> + </div> + </div> + </section> + + <section id="page3" class="scroll_snap_item"> + <div class="container2"> + + <div class="video2"> + <video controls alt="Lichtobjekt"> + <source src="Medien/BL5.mp4" type="video/mp4"> <!--Selbst erstellte Videos--> + </video> + </div> + + <div class="video2"> + <video controls alt="Empfaenger"> + <source src="Medien/VS1.mp4" type="video/mp4"> <!--Selbst erstellte Videos--> + </video> + </div> + + <div> + <p> <!--Beschreibung des Kunstwerkes--> + Die SpeculativeAI Serie ist ein von Birk Schmithüsen erschaffenes Kunstwerk, + worin 2 verschiedene Kugeln mithilfe von Licht- und Schallsignalen untereinander + kommunizieren. Dies wird durch ein Neuronales Netzwerk ermöglicht, das über eine + Kamera "visuelle Botschaften" von seinem Gegenüber empfängt. Diese werden daraufhin + zu einem "multideminsionalen Sound" umgewandelt, woraufhin diese wieder von der ersten + Kugel von einem Mikrofon wahrgenommen werden.<br> + Die zwei Systeme verstehen sich also gegenseitig, interpretieren die Signale des anderen + und geben gezielte, empathische Antworten. + </p> + </div> + </div> + </section> + + <section id="page4" class="scroll_snap_item"> + <div class="container3"> + + <div> + <h1>Birk Schmithüsen</h1> + <p id="title2">Andere Werke:</p> + <p>ClimateSculptures</p> + <p>SystemFailed</p> + <p>KlangNetz</p> + <p>Persoenlichkeitsmonitor</p> + <a href="https://www.birkschmithuesen.com/_works">https://www.birkschmithuesen.com/_works</a> + </div> + <div> + <img class="Bild3" src="Medien/Birk_Schmithuesen.jpg" alt="Creator"> + <!--Quelle: https://www.birkschmithuesen.com/--> + </div> + </div> + </section> + </main> + + <div id="back_to_top"> + <a href="#page1"> + <img src="Medien/Pfeil.svg" alt="Seitenanfang" width="75" height="75"> + </a> + </div> + </body> +</html> -- GitLab