I Have a Dream Libro illustrato audio

# Crea e distribuisci 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 l'intero discorso 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 audio narrate (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 di distribuzione con un clic (index.html / assets / README.md)  

---

## 2. Storyboard completo e cronologia (16 pagine in totale)  
| Pagina | Frase iniziale (inglese originale) | Evento visivo | Composizione e illuminazione | Suono chiave |
|---|---|---|---|---|
| 1 | Sono felice di unirmi a voi oggi... | Veduta lontana del Lincoln Memorial, folla in raduno, sagome controluce | Ripresa dal basso, luci del cielo, figure in silhouette | Apertura di "Sono felice di unirmi a voi...", eco dell'auditorium |
| 2 | ...passerà alla storia come la più grande manifestazione... | Veduta dall'alto di una folla fitta, striscione "Chiediamo pari diritti" | Ripresa aerea in bianco e nero, alto contrasto | Crescendo continuo, applausi lontani sullo sfondo |
| 3 | Ma cent'anni dopo... | Primo piano del monumento alla Proclamazione di emancipazione, avvolto da catene arrugginite | Lunghezza focale media, sfondo scuro che mette in risalto il monumento | Ritmo del discorso più lento, enfasi su "cent'anni dopo" |
| 4 | il nero vive su un'isola solitaria... | Uomo nero isolato seduto tra le rovine, con lo sguardo rivolto a una città lontana | Grandangolo, primo piano nero profondo, grattacieli lontani illuminati | Rumore ambientale solitario |
| 5 | ...le manette della segregazione... | Primo piano di mani ammanettate, catena parzialmente spezzata | Macro, forte luce sulle mani, maglie della catena in forte evidenza | Tintinnio delle manette + mormorio di voce maschile |
| 6 | ...catene della discriminazione. | Giovane nero respinto a una porta, cartello "SOLO BIANCHI" | Prospettiva dalla fessura della porta, cartello sovraesposto | Rumore della porta che si chiude di colpo |
| 7 | Siamo venuti a riscuotere questo assegno... | Sportello di banca, persona nera che consegna un assegno in bianco | Composizione simmetrica, luce del bancone illuminante | Suono della carta che scivola |
| 8 | Sarebbe fatale per la nazione... | Martelletto di un giudice sospeso a mezz'aria, folla sfocata sullo sfondo | Angolazione dal basso, silhouette del martelletto | Eco ritardata del colpo di martelletto |
| 9 | Non possiamo camminare da soli. | Mani nere e bianche sovrapposte, diverse tonalità di pelle | Luce superiore da softbox, texture delle mani nitida | Battito cardiaco a bassa frequenza |
|10| Non possiamo tornare indietro. | Folla in marcia controluce, portale di luce davanti | Controluce, aloni sui contorni delle figure | Passi sincronizzati, battiti di tamburo a bassa frequenza |
|11| Oggi ho un sogno! (1ª) | Bambino che guarda verso la luce, riflessi negli occhi | Primo piano degli occhi, luce puntiforme simile a un ago | Primo grido di "Ho un sogno!" con eco |
|12| Ho un sogno che un giorno... | Adolescenti bianchi e neri che corrono fianco a fianco | Ripresa dinamica in movimento, grana della pellicola | Respiro + vento |
|13| ...i figli degli ex schiavi... siedano insieme... | Panchina universitaria, due studenti che leggono insieme | Simmetria orizzontale, sfondo sfocato | Fruscio delle pagine di un libro |
|14| Oggi ho un sogno! (2ª) | Profilo laterale dell'oratore, bocca aperta, sfondo a macchie di luce | Obiettivo da 35 mm, particelle di polvere fluttuanti in controluce | Secondo grido, folla che risponde all'unisono |
|15| Che risuoni la libertà... | Primo piano della Liberty Bell, crepa ben visibile | Luce dall'alto, corpo della campana fortemente illuminato, sfondo nero | Rintocco prolungato della campana |
|16| Liberi finalmente! Liberi finalmente! | Uccelli in volo verso l'alto, folla che alza le mani | Otturatore ad alta velocità, movimento delle ali congelato | "Liberi finalmente!" 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, profondità di campo ridotta, [Scena pagina-X], 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 a ogni pagina; mantieni livelli di grana e contrasto coerenti.  

---

## 4. Prompt unificato per la generazione dell'audio  
Baritono maschile, interpretazione nello stile di MLK, cadenza lenta, riverbero della Capitol Hall, 44,1 kHz, MP3 a 128 kbps, 15-25 s, [Frase iniziale] enfasi su "ho un sogno", picco a -3 dB  

Ogni clip usa come contenuto narrativo 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  
- Fascia 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 istruzioni sui link e sull'attivazione/disattivazione degli 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 messaggio per l'orientamento orizzontale sui dispositivi mobili compare automaticamente

# Crea e distribuisci un audiolibro interattivo in HTML: stile fotografico realistico in bianco e nero + narrazione maschile di "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 a schermo intero con scorrimento orizzontale:  
1. 16 illustrazioni fotografiche ultrarealistiche in bianco e nero (1920×1080, alto contrasto, grana della pellicola, prospettiva da obiettivo fisso 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, adattabile a PC e dispositivi mobili  
4. Pacchetto di distribuzione con un clic (index.html / assets / README.md)  

---

## 2. Storyboard completo e cronologia (16 pagine in totale)  
| Pagina | Frase iniziale (inglese originale) | Evento visivo | Composizione e illuminazione | Suono chiave |
|---|---|---|---|---|
| 1 | Sono felice di unirmi a voi oggi... | Veduta lontana del Lincoln Memorial, folla in arrivo, sagome in controluce | Ripresa dal basso, luci alte del cielo, figure in silhouette | Apertura: "Sono felice di unirmi a voi...", eco da auditorium |
| 2 | ...passerà alla storia come la più grande manifestazione... | Veduta dall'alto di una folla fitta, striscione "Chiediamo pari diritti" | Ripresa aerea in bianco e nero, alto contrasto | Crescendo prolungato, applausi lontani in sottofondo |
| 3 | Ma cento anni dopo... | Primo piano del monumento alla Proclamazione di emancipazione, avvolto da catene arrugginite | Lunghezza focale media, sfondo scuro che mette in risalto il monumento | Ritmo di parola più lento, enfasi su "cento anni dopo" |
| 4 | i neri vivono su un'isola solitaria... | Uomo nero isolato seduto sulle rovine, guarda una città lontana | Grandangolo, primo piano nero intenso, grattacieli lontani illuminati | Rumore ambientale solitario |
| 5 | ...le manette della segregazione... | Primo piano di mani ammanettate, catena parzialmente spezzata | Macro, luce intensa sulle mani, maglie della catena molto evidenziate | Tintinnio delle manette + voce maschile sommessa |
| 6 | ...catene della discriminazione. | Giovane nero respinto alla porta, cartello "SOLO BIANCHI" | Prospettiva dalla fessura della porta, cartello sovraesposto | Suono di porta che si chiude di colpo |
| 7 | Siamo venuti a riscuotere questo assegno... | Sportello bancario, persona nera che consegna un assegno in bianco | Composizione simmetrica, luce del bancone illuminante | Suono della carta che scorre |
| 8 | Sarebbe fatale per la nazione... | 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 | Non possiamo camminare da soli. | Mani nere e bianche sovrapposte, diverse tonalità di pelle | Luce dall'alto con softbox, texture delle mani nitida | Battito cardiaco a bassa frequenza |
|10| Non possiamo tornare indietro. | Folla in marcia in controluce, portale di luce davanti | Controluce, aloni sui contorni delle figure | Passi sincronizzati, battiti di tamburo a bassa frequenza |
|11| Oggi ho un sogno! (1ª) | Bambino che guarda verso la luce, riflessi negli occhi | Primo piano degli occhi, punto luce sottile come un ago | Primo grido di "Ho un sogno!" con eco |
|12| Ho un sogno che un giorno... | Adolescenti bianchi e neri corrono fianco a fianco | Ripresa dinamica in movimento, grana della pellicola | Respiro + vento |
|13| ...figli di ex schiavi... si siedono insieme... | Panchina universitaria, due studenti leggono insieme | Simmetria orizzontale, sfondo sfocato | Fruscio delle pagine di un libro |
|14| Oggi ho un sogno! (2ª) | Profilo laterale dell'oratore, bocca aperta, sfondo con punto luce | Obiettivo da 35 mm, particelle di polvere in controluce sospese nell'aria | Secondo grido, folla che risponde all'unisono |
|15| Risuoni la libertà... | Primo piano della Liberty Bell, crepa ben visibile | Luce dall'alto, corpo della campana molto illuminato, sfondo nero | Rintocco prolungato della campana |
|16| Finalmente liberi! Finalmente liberi! | Uccelli che volano verso l'alto, folla con le mani alzate | Otturatore ad alta velocità, movimento delle ali congelato | "Finalmente liberi!" 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, profondità di campo ridotta, [Scena Pagina-X], 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 per ogni pagina; mantieni coerenti i livelli di grana e contrasto.  

---

## 4. Prompt unificato per la generazione dell'audio  
Baritono maschile, interpretazione nello stile di MLK, ritmo lento, riverbero della Capitol Hall, 44,1 kHz, MP3 a 128 kbps, 15-25 s, [Frase iniziale] con enfasi su "I have a dream", picco a -3 dB  

Ogni clip usa come contenuto narrativo la frase iniziale della pagina, con una dissolvenza finale di 1 secondo di 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 puro  
- 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 principale (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  

Il 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, evidenziazione dei sottotitoli sincronizzata con l'audio  
[ ] Il suggerimento per l'orientamento orizzontale su mobile compare automaticamente