I Have a Dream Audiolibro illustrato

# Crea e pubblica un HTML interattivo: stile fotografico realistico in bianco e nero + narrazione con voce maschile, audiolibro interattivo "I Have a Dream" (pagina in inglese)  


## 1. Obiettivo generale  
Trasforma il discorso completo di Martin Luther King Jr. del 28 agosto 1963 (testo di "I Have a Dream") in un audiolibro orizzontale a schermo intero:  
1. 16 illustrazioni fotografiche in bianco e nero ultrarealistiche (1920×1080, alto contrasto, grana della pellicola, prospettiva da obiettivo fisso da 50 mm)  
2. 16 clip di narrazione audio (baritono maschile originale, 15-25 secondi per clip, 44,1 kHz, MP3, riverbero da auditorium)  
3. Pagina web in inglese: scorrimento orizzontale, cambio pagina automatico/manuale, evidenziazione sincronizzata dei sottotitoli, adattiva per PC e dispositivi mobili  
4. Pacchetto per la pubblicazione con un clic (index.html / assets / README.md)  

---

## 2. Storyboard e timeline del testo completo (16 pagine in totale)  
| Pagina | Frase iniziale (inglese originale) | Evento visivo | Composizione e illuminazione | Suono principale |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Veduta lontana del Lincoln Memorial, folla in raduno, sagome controluce | Ripresa dal basso, luci nel cielo, figure in silhouette | Apertura "I am happy to join with you...", eco da auditorium |
| 2 | ...will go down as the greatest demonstration... | Veduta dall'alto di una folla fitta, striscione "We Demand Equal Rights" | Ripresa aerea in bianco e nero, alto contrasto | Crescendo sostenuto, applausi lontani sullo sfondo |
| 3 | But one hundred years later... | Primo piano del monumento all'Emancipation Proclamation, avvolto da catene arrugginite | Lunghezza focale media, sfondo scuro che mette in risalto il monumento | Ritmo del discorso più lento, enfasi su "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Uomo nero isolato seduto tra le rovine, lo sguardo rivolto verso una città lontana | Grandangolo, primo piano nero profondo, grattacieli lontani illuminati | Rumore d'ambiente solitario |
| 5 | ...the manacles of segregation... | Primo piano di mani in manette, catena parzialmente spezzata | Macro, luce intensa sulle mani, maglie della catena fortemente illuminate | Tintinnio delle manette + mormorio di voce maschile |
| 6 | ...chains of discrimination. | Giovane nero respinto a una porta, cartello "WHITES ONLY" | Prospettiva attraverso la fessura della porta, cartello sovraesposto | Suono di porta che si chiude sbattendo |
| 7 | We have come to cash this check... | Sportello bancario, persona nera che consegna un assegno in bianco | Composizione simmetrica, luce del bancone illuminante | Suono della carta che scivola |
| 8 | It would be fatal for the nation... | Martelletto di un giudice sospeso a mezz'aria, folla sfocata sullo sfondo | Ripresa dal basso, silhouette del martelletto | Eco ritardata del colpo di martelletto |
| 9 | We cannot walk alone. | Mani nere e bianche sovrapposte, tonalità della pelle diverse | Luce superiore da softbox, texture delle mani nitida | Battito cardiaco a bassa frequenza |
|10| We cannot turn back. | Folla in marcia controluce, varco di luce davanti | Controluce, aloni sui contorni delle figure | Passi sincronizzati, colpi di tamburo a bassa frequenza |
|11| I have a dream today! (1st) | Bambino che guarda verso la luce, riflessi negli occhi | Primo piano degli occhi, luce puntiforme come un ago | Primo grido di "I have a dream!" con eco |
|12| I have a dream that one day... | Adolescenti bianchi e neri che corrono fianco a fianco | Ripresa dinamica in tracking, grana della pellicola | Respiro + vento |
|13| ...sons of former slaves... sit together... | Panchina universitaria, due studenti leggono insieme | Simmetria orizzontale, sfondo sfocato | Fruscio delle pagine di un libro |
|14| I have a dream today! (2nd) | Profilo laterale dell'oratore, bocca aperta, sfondo a macchia di luce | Obiettivo da 35 mm, particelle di polvere fluttuanti in controluce | Secondo grido, folla che risponde all'unisono |
|15| Let freedom ring... | Primo piano della Liberty Bell, crepa ben visibile | Luce dall'alto, corpo della campana fortemente illuminato, sfondo nero | Rintocco prolungato della campana |
|16| Free at last! Free at last! | Uccelli che volano verso l'alto, folla con le mani alzate | Otturatore ad alta velocità, movimento delle ali congelato | "Free at last!" ripetuto tre volte, applausi fragorosi |

---

## 3. Prompt unificato per la generazione delle immagini  
fotografia ultrarealistica in bianco e nero, obiettivo da 50 mm, alto contrasto, grana della pellicola, DOF ridotta, [Page-X Scene], manifestazione per i diritti civili degli anni Sessanta, Lincoln Memorial sullo sfondo, momento decisivo, --ar 16:9 --v 5 --q 2  

Sostituisci `Page-X Scene` con l'evento corrispondente a ogni pagina; mantieni costanti i livelli di grana e contrasto.  

---

## 4. Prompt unificato per la generazione audio  
Baritono maschile, interpretazione in stile MLK, cadenza lenta, riverbero della Capitol Hall, 44,1 kHz, MP3 a 128 kbps, 15-25 s, [Starting Sentence] enfasi su "I have a dream", picco a -3 dB  

Ogni clip usa come contenuto della narrazione la frase iniziale della pagina, con 1 secondo di dissolvenza degli applausi alla fine.  

---

## 5. Stack tecnologico web e directory  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Nessuna dipendenza, JS puro  
- Barra di scorrimento orizzontale, 100 vw/vh per pagina  
- Evidenziazione dei sottotitoli sincronizzata con l'audio  
- Controlli: Riproduci / Pausa / Successivo / Precedente / Disattiva audio  

---

## 6. Codice chiave (obbligatorio)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Pubblicazione con un clic  

README include i link e le istruzioni per attivare/disattivare gli effetti audio.  

## 8. Verifica finale della consegna  
[ ] 16 JPG in bianco e nero, denominati page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, denominati 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Scorrimento orizzontale della pagina web senza schermate vuote, sottotitoli evidenziati con l'audio  
[ ] Il suggerimento per l'orientamento orizzontale su dispositivi mobili compare automaticamente

# Crea e pubblica un HTML interattivo: stile fotografico realistico In bianco e nero stile fotografico + narrazione con voce maschile, audiolibro interattivo "I Have a Dream" (pagina in inglese)  


## 1. Obiettivo generale  
Trasforma il discorso completo di Martin Luther King Jr. del 28 agosto 1963 (testo di "I Have a Dream") in un audiolibro orizzontale a schermo intero:  
1. 16 illustrazioni fotografiche ultrarealistiche in bianco e nero (1920×1080, alto contrasto, grana della pellicola, prospettiva da obiettivo fisso da 50 mm)  
2. 16 clip di narrazione audio (baritono maschile originale, 15-25 secondi per clip, 44,1 kHz, MP3, riverbero da auditorium)  
3. Pagina web in inglese: scorrimento orizzontale, cambio pagina automatico/manuale, evidenziazione sincronizzata dei sottotitoli, adattiva per PC e dispositivi mobili  
4. Pacchetto per la pubblicazione con un clic (index.html / assets / README.md)  

---

## 2. Storyboard e timeline del testo completo (16 pagine in totale)  
| Pagina | Frase iniziale (inglese originale) | Evento visivo | Composizione e illuminazione | Suono principale |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Veduta lontana del Lincoln Memorial, folla in raduno, sagome controluce | Ripresa dal basso, luci nel cielo, figure in silhouette | Apertura "I am happy to join with you...", eco da auditorium |
| 2 | ...will go down as the greatest demonstration... | Veduta dall'alto di una folla fitta, striscione "We Demand Equal Rights" | Ripresa aerea in bianco e nero, alto contrasto | Crescendo sostenuto, applausi lontani sullo sfondo |
| 3 | But one hundred years later... | Primo piano del monumento all'Emancipation Proclamation, avvolto da catene arrugginite | Lunghezza focale media, sfondo scuro che mette in risalto il monumento | Ritmo del discorso più lento, enfasi su "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Uomo nero isolato seduto tra le rovine, lo sguardo rivolto verso una città lontana | Grandangolo, primo piano nero profondo, grattacieli lontani illuminati | Rumore d'ambiente solitario |
| 5 | ...the manacles of segregation... | Primo piano di mani in manette, catena parzialmente spezzata | Macro, luce intensa sulle mani, maglie della catena fortemente illuminate | Tintinnio delle manette + mormorio di voce maschile |
| 6 | ...chains of discrimination. | Giovane nero respinto a una porta, cartello "WHITES ONLY" | Prospettiva attraverso la fessura della porta, cartello sovraesposto | Suono di porta che si chiude sbattendo |
| 7 | We have come to cash this check... | Sportello bancario, persona nera che consegna un assegno in bianco | Composizione simmetrica, luce del bancone illuminante | Suono della carta che scivola |
| 8 | It would be fatal for the nation... | Martelletto di un giudice sospeso a mezz'aria, folla sfocata sullo sfondo | Ripresa dal basso, silhouette del martelletto | Eco ritardata del colpo di martelletto |
| 9 | We cannot walk alone. | Mani nere e bianche sovrapposte, tonalità della pelle diverse | Luce superiore da softbox, texture delle mani nitida | Battito cardiaco a bassa frequenza |
|10| We cannot turn back. | Folla in marcia controluce, varco di luce davanti | Controluce, aloni sui contorni delle figure | Passi sincronizzati, colpi di tamburo a bassa frequenza |
|11| I have a dream today! (1st) | Bambino che guarda verso la luce, riflessi negli occhi | Primo piano degli occhi, luce puntiforme come un ago | Primo grido di "I have a dream!" con eco |
|12| I have a dream that one day... | Adolescenti bianchi e neri che corrono fianco a fianco | Ripresa dinamica in tracking, grana della pellicola | Respiro + vento |
|13| ...sons of former slaves... sit together... | Panchina universitaria, due studenti leggono insieme | Simmetria orizzontale, sfondo sfocato | Fruscio delle pagine di un libro |
|14| I have a dream today! (2nd) | Profilo laterale dell'oratore, bocca aperta, sfondo a macchia di luce | Obiettivo da 35 mm, particelle di polvere fluttuanti in controluce | Secondo grido, folla che risponde all'unisono |
|15| Let freedom ring... | Primo piano della Liberty Bell, crepa ben visibile | Luce dall'alto, corpo della campana fortemente illuminato, sfondo nero | Rintocco prolungato della campana |
|16| Free at last! Free at last! | Uccelli che volano verso l'alto, folla con le mani alzate | Otturatore ad alta velocità, movimento delle ali congelato | "Free at last!" ripetuto tre volte, applausi fragorosi |

---

## 3. Prompt unificato per la generazione delle immagini  
fotografia ultrarealistica in bianco e nero fotografia, obiettivo da 50 mm, alto contrasto, grana della pellicola, profondità di campo ridotta, [Page-X Scene], manifestazione per i diritti civili degli anni ’60, sfondo del Lincoln Memorial, momento decisivo, --ar 16:9 --v 5 --q 2  

Sostituisci `Page-X Scene` con l’evento corrispondente per ogni pagina; mantieni livelli di grana e contrasto uniformi.  

---

## 4. Prompt unificato per la generazione dell’audio  
Baritono maschile, interpretazione in stile MLK, cadenza lenta, riverbero della Capitol Hall, 44,1 kHz, MP3 a 128 kbps, 15-25 s, enfasi su [Starting Sentence] e su "I have a dream", picco a -3 dB  

Ogni clip usa la frase iniziale della pagina come contenuto narrato, con 1 secondo di dissolvenza finale degli applausi.  

---

## 5. Stack tecnologico web e directory  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Nessuna dipendenza, JS vanilla  
- Striscia a scorrimento orizzontale, 100 vw/vh per pagina  
- Evidenziazione dei sottotitoli sincronizzata con l’audio  
- Controlli: Riproduci / Pausa / Successivo / Precedente / Disattiva audio  

---

## 6. Codice chiave (obbligatorio)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Distribuzione con un clic  

README include i link e le istruzioni per attivare/disattivare gli effetti audio.  

## 8. Autoverifica della consegna  
[ ] 16 in bianco e nero JPG, denominati page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, denominati 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Scorrimento orizzontale della pagina web senza schermate vuote, sottotitoli evidenziati con l'audio  
[ ] Il suggerimento per l'orientamento orizzontale su dispositivi mobili compare automaticamente