Untitled

avatar
unknown
plain_text
21 days ago
11 kB
6
Indexable
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Energia, Progresso e Condizione Umana</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, sans-serif;
    background:#0f172a;
    color:white;
    overflow-x:hidden;
}

section{
    min-height:100vh;
    padding:80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

h1{
    font-size:70px;
    color:#38bdf8;
    margin-bottom:25px;
}

h2{
    font-size:50px;
    color:#a855f7;
    margin-bottom:25px;
}

h3{
    font-size:30px;
    color:#38bdf8;
    margin-bottom:20px;
}

p, li{
    font-size:24px;
    line-height:1.8;
    color:#e5e7eb;
}

ul{
    margin-left:30px;
    margin-top:15px;
}

.card{
    background:#111827;
    padding:40px;
    border-radius:25px;
    margin-top:30px;
    box-shadow:0 0 25px rgba(0,0,0,0.4);
}

.formula{
    font-size:45px;
    color:#38bdf8;
    margin-top:20px;
    font-weight:bold;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

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

.slider-box{
    margin-top:30px;
    background:#1e293b;
    padding:25px;
    border-radius:20px;
}

input[type=range]{
    width:100%;
    margin-top:15px;
}

.value{
    color:#38bdf8;
    font-size:30px;
    margin-top:10px;
}

svg{
    width:100%;
    height:400px;
}

.wire{
    stroke:white;
    stroke-width:6;
    fill:none;
}

.resistor{
    fill:#7f1d1d;
    stroke:#ef4444;
    stroke-width:5;
}

.current-dot{
    fill:#38bdf8;
    filter:drop-shadow(0 0 10px #38bdf8);
}

.heat{
    fill:orange;
    opacity:0.5;
}

.quote{
    font-size:32px;
    color:#c084fc;
    margin-top:30px;
    line-height:1.7;
}

</style>
</head>

<body>

<!-- SLIDE 1 -->

<section>

<h1>Energia, progresso e condizione umana</h1>

<h3>Corrente elettrica, effetto Joule, Leopardi e Schopenhauer</h3>

<div class="card">

<p>
La fisica e la filosofia sembrano discipline molto diverse,
ma entrambe cercano di comprendere la realtà e i limiti dell’uomo.
</p>

</div>

</section>

<!-- SLIDE 2 -->

<section>

<h2>La corrente elettrica ⚡</h2>

<div class="grid">

<div>

<div class="card">

<p>
La corrente elettrica è il movimento ordinato degli elettroni all’interno di un circuito.
</p>

<p>
Per far muovere gli elettroni è necessaria una tensione elettrica,
cioè una forza capace di spingerli lungo il circuito.
</p>

<p>
L’intensità di corrente indica quanta carica attraversa un punto del circuito
in un certo intervallo di tempo e si misura in ampere.
</p>

<div class="formula">
I = Q / t
</div>

<ul>
<li>movimento di elettroni</li>
<li>circuito chiuso</li>
<li>intensità di corrente</li>
</ul>

</div>

</div>

<div>

<svg viewBox="0 0 700 400">

<line x1="120" y1="120" x2="550" y2="120" class="wire"/>
<line x1="120" y1="120" x2="120" y2="300" class="wire"/>
<line x1="120" y1="300" x2="550" y2="300" class="wire"/>
<line x1="550" y1="120" x2="550" y2="300" class="wire"/>

<rect x="260" y="85" width="150" height="70" rx="12" class="resistor"/>

<circle cx="150" cy="120" r="8" class="current-dot">
<animate attributeName="cx"
values="150;550;150"
dur="2s"
repeatCount="indefinite"/>
</circle>

<circle cx="250" cy="120" r="8" class="current-dot">
<animate attributeName="cx"
values="250;650;250"
dur="2s"
repeatCount="indefinite"/>
</circle>

<circle cx="350" cy="120" r="8" class="current-dot">
<animate attributeName="cx"
values="350;750;350"
dur="2s"
repeatCount="indefinite"/>
</circle>

</svg>

</div>

</div>

</section>

<!-- SLIDE 3 -->

<section>

<h2>Tensione e resistenza 🔋</h2>

<div class="card">

<p>
La tensione elettrica è la forza che spinge gli elettroni nel circuito e si misura in volt.
</p>

<p>
La resistenza è invece l’opposizione al passaggio della corrente e si misura in ohm.
</p>

<p>
Maggiore è la resistenza, più difficile sarà il movimento degli elettroni.
</p>

<p>
La resistenza dipende:
</p>

<ul>
<li>dal materiale</li>
<li>dalla lunghezza del filo</li>
<li>dalla sezione del filo</li>
<li>dalla temperatura</li>
</ul>

</div>

</section>

<!-- SLIDE 4 -->

<section>

<h2>La prima legge di Ohm ⚡</h2>

<div class="grid">

<div>

<div class="card">

<p>
La prima legge di Ohm descrive il rapporto tra tensione,
corrente e resistenza.
</p>

<p>
La corrente è direttamente proporzionale alla tensione
e inversamente proporzionale alla resistenza.
</p>

<div class="formula">
I = V / R
</div>

<p style="margin-top:20px;">
Se:
</p>

<ul>
<li>V = 12V</li>
<li>R = 4Ω</li>
</ul>

<div class="formula">
I = 12 / 4 = 3A
</div>

</div>

</div>

<div>

<div class="slider-box">

<h3>Slider Interattivo</h3>

<label>Tensione (V)</label>
<input type="range" min="1" max="20" value="12" id="voltageSlider">

<div class="value" id="voltageValue">12 V</div>

<label style="margin-top:20px; display:block;">
Resistenza (Ω)
</label>

<input type="range" min="1" max="10" value="4" id="resistanceSlider">

<div class="value" id="resistanceValue">4 Ω</div>

<div class="formula" id="currentResult">
I = 3 A
</div>

</div>

</div>

</div>

</section>

<!-- SLIDE 5 -->

<section>

<h2>La seconda legge di Ohm 🔬</h2>

<div class="card">

<p>
La seconda legge di Ohm spiega da cosa dipende
la resistenza di un filo conduttore.
</p>

<p>
La resistenza aumenta:
</p>

<ul>
<li>se il filo è più lungo</li>
<li>se il materiale oppone maggiore resistenza</li>
</ul>

<p>
La resistenza diminuisce:
</p>

<ul>
<li>se il filo è più spesso</li>
</ul>

<div class="formula">
R = ρ l / S
</div>

<ul>
<li>ρ = resistività</li>
<li>l = lunghezza</li>
<li>S = sezione</li>
</ul>

<p>
Il rame ha una bassa resistività
e quindi è un ottimo conduttore elettrico.
</p>

</div>

</section>

<!-- SLIDE 6 -->

<section>

<h2>I circuiti elettrici 🔌</h2>

<div class="card">

<p>
Un circuito elettrico è un percorso chiuso
nel quale la corrente può circolare.
</p>

<ul>
<li>batteria</li>
<li>fili</li>
<li>resistenza</li>
<li>interruttore</li>
</ul>

<p>
Esistono:
</p>

<ul>
<li>circuiti in serie</li>
<li>circuiti in parallelo</li>
</ul>

<p>
Nei circuiti reali l’energia
non viene utilizzata in modo perfetto.
</p>

</div>

</section>

<!-- SLIDE 7 -->

<section>

<h2>L’effetto Joule 🔥</h2>

<div class="grid">

<div>

<div class="card">

<p>
Quando la corrente attraversa una resistenza,
una parte dell’energia elettrica si trasforma in calore.
</p>

<p>
Gli elettroni urtano gli atomi del materiale
producendo agitazione termica e dispersione energetica.
</p>

<p>
Maggiore sono:
</p>

<ul>
<li>corrente</li>
<li>resistenza</li>
<li>tempo</li>
</ul>

<p>
maggiore sarà il calore prodotto.
</p>

<div class="formula">
P = RI²
</div>

<p>
Applicazioni:
</p>

<ul>
<li>phon</li>
<li>tostapane</li>
<li>stufe elettriche</li>
</ul>

</div>

</div>

<div>

<div class="slider-box">

<h3>Effetto Joule Interattivo</h3>

<label>Corrente (A)</label>
<input type="range" min="1" max="10" value="3" id="currentSlider">

<div class="value" id="currentValue">3 A</div>

<label style="margin-top:20px; display:block;">
Resistenza (Ω)
</label>

<input type="range" min="1" max="10" value="4" id="jouleResistanceSlider">

<div class="value" id="jouleResistanceValue">4 Ω</div>

<div class="formula" id="powerResult">
P = 36 W
</div>

<svg viewBox="0 0 500 300">

<line x1="50" y1="150" x2="180" y2="150" class="wire"/>
<line x1="320" y1="150" x2="450" y2="150" class="wire"/>

<rect x="180" y="110" width="140" height="80"
rx="15"
id="hotResistor"
class="resistor"/>

</svg>

</div>

</div>

</div>

</section>

<!-- SLIDE 8 -->

<section>

<h2>Progresso e dispersione</h2>

<div class="card">

<p>
L’idea della dispersione non riguarda soltanto la fisica.
</p>

<p>
Anche il progresso umano produce sviluppo e conoscenza,
ma non elimina completamente il dolore e l’insoddisfazione.
</p>

<p class="quote">
“Come nell’effetto Joule una parte dell’energia si disperde in calore,
anche nella vita umana qualcosa si perde.”
</p>

</div>

</section>

<!-- SLIDE 9 -->

<section>

<h2>Giacomo Leopardi 📚</h2>

<div class="card">

<p>
Secondo Leopardi il progresso scientifico aumenta
la conoscenza dell’uomo,
ma non lo rende veramente felice.
</p>

<p>
La ragione distrugge molte illusioni
che aiutavano l’uomo a vivere meglio.
</p>

<p>
L’uomo comprende sempre di più la realtà
e prende coscienza dei limiti
e della sofferenza umana.
</p>

<p class="quote">
“Il progresso produce conoscenza,
ma non elimina il dolore.”
</p>

</div>

</section>

<!-- SLIDE 10 -->

<section>

<h2>Arthur Schopenhauer 🧠</h2>

<div class="card">

<p>
Per Schopenhauer la vita è dominata
da un desiderio continuo
che non può essere soddisfatto definitivamente.
</p>

<ul>
<li>quando non lo possiede soffre</li>
<li>quando lo ottiene prova solo felicità momentanea</li>
</ul>

<p>
Questa tensione continua può essere paragonata
alla corrente elettrica che continua a fluire nel circuito.
</p>

</div>

</section>

<!-- SLIDE 11 -->

<section>

<h1>Conclusione 💡</h1>

<div class="card">

<p>
La fisica mostra che nei sistemi reali
una parte dell’energia viene inevitabilmente dispersa.
</p>

<p>
Anche nella vita umana:
</p>

<ul>
<li>il progresso non elimina completamente la sofferenza</li>
<li>i desideri non trovano una soddisfazione definitiva</li>
</ul>

<p class="quote">
Corrente elettrica, resistenza ed effetto Joule
diventano immagini simboliche della condizione umana.
</p>

</div>

</section>

<script>

const voltageSlider = document.getElementById("voltageSlider");
const resistanceSlider = document.getElementById("resistanceSlider");

const voltageValue = document.getElementById("voltageValue");
const resistanceValue = document.getElementById("resistanceValue");
const currentResult = document.getElementById("currentResult");

function updateOhm(){

let V = parseFloat(voltageSlider.value);
let R = parseFloat(resistanceSlider.value);

let I = (V / R).toFixed(2);

voltageValue.innerHTML = V + " V";
resistanceValue.innerHTML = R + " Ω";

currentResult.innerHTML = "I = " + I + " A";

}

voltageSlider.addEventListener("input", updateOhm);
resistanceSlider.addEventListener("input", updateOhm);

updateOhm();

const currentSlider = document.getElementById("currentSlider");
const jouleResistanceSlider = document.getElementById("jouleResistanceSlider");

const currentValue = document.getElementById("currentValue");
const jouleResistanceValue = document.getElementById("jouleResistanceValue");
const powerResult = document.getElementById("powerResult");

const hotResistor = document.getElementById("hotResistor");

function updateJoule(){

let I = parseFloat(currentSlider.value);
let R = parseFloat(jouleResistanceSlider.value);

let P = (R * I * I).toFixed(2);

currentValue.innerHTML = I + " A";
jouleResistanceValue.innerHTML = R + " Ω";

powerResult.innerHTML = "P = " + P + " W";

let intensity = Math.min(P * 3, 255);

hotResistor.style.fill =
`rgb(${intensity},50,50)`;

}

currentSlider.addEventListener("input", updateJoule);
jouleResistanceSlider.addEventListener("input", updateJoule);

updateJoule();

</script>

</body>
</html>j
Editor is loading...
Leave a Comment