Tengo un sueño Libro ilustrado con audio

# Crear e implementar un HTML interactivo: estilo de fotografía realista en blanco y negro + narración con voz masculina Audiolibro interactivo "Tengo un sueño" (página en inglés)  


## 1. Objetivo general  
Transformar el discurso completo de Martin Luther King Jr. del 28 de agosto de 1963 (texto de "Tengo un sueño") en un audiolibro horizontal a pantalla completa:  
1. 16 ilustraciones fotográficas ultrarrealistas en blanco y negro (1920×1080, alto contraste, grano de película, perspectiva de lente fija de 50 mm)  
2. 16 clips de narración de audio (barítono masculino original, 15-25 segundos por clip, 44.1 kHz, MP3, reverberación de auditorio)  
3. Página web en inglés: desplazamiento horizontal, cambio de página automático/manual, resaltado sincronizado de subtítulos, adaptable a PC y móvil  
4. Paquete de implementación con un clic (index.html / assets / README.md)  

---

## 2. Guion gráfico y línea de tiempo del texto completo (16 páginas en total)  
| Página | Oración inicial (inglés original) | Evento visual | Composición e iluminación | Sonido clave |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Vista distante del Monumento a Lincoln, multitud reuniéndose, siluetas a contraluz | Toma en contrapicado, reflejos del cielo, figuras en silueta | Inicio de "I am happy to join with you...", eco de auditorio |
| 2 | ...will go down as the greatest demonstration... | Vista aérea de una multitud densa, pancarta "WE DEMAND EQUAL RIGHTS" | Toma aérea en blanco y negro, alto contraste | Aumento sostenido, aplausos lejanos de fondo |
| 3 | But one hundred years later... | Primer plano del monumento a la Proclamación de Emancipación, envuelto en cadenas oxidadas | Distancia focal media, fondo oscuro que destaca el monumento | Ritmo de discurso más lento, énfasis en "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Hombre negro aislado sentado sobre ruinas, mirando una ciudad distante | Gran angular, primer plano negro profundo, rascacielos distantes iluminados | Ruido ambiental solitario |
| 5 | ...the manacles of segregation... | Primer plano de manos con grilletes, cadena parcialmente rota | Macro, luz intensa sobre las manos, eslabones muy resaltados | Tintineo de grilletes + murmullo de voz masculina |
| 6 | ...chains of discrimination. | Joven negro rechazado en una puerta, letrero "SOLO BLANCOS" | Perspectiva desde la abertura de la puerta, letrero sobreexpuesto | Sonido de puerta cerrándose de golpe |
| 7 | We have come to cash this check... | Mostrador bancario, persona negra entregando un cheque en blanco | Composición simétrica, luz del mostrador iluminando | Sonido de papel deslizándose |
| 8 | It would be fatal for the nation... | Mazo de juez suspendido en el aire, multitud desenfocada al fondo | Contrapicado, silueta del mazo | Eco retardado del sonido del mazo |
| 9 | We cannot walk alone. | Manos negras y blancas superpuestas, distintos tonos de piel | Luz superior de softbox, textura clara de las manos | Latido de baja frecuencia |
|10| We cannot turn back. | Multitud marchando a contraluz, portal de luz adelante | Iluminación a contraluz, halos en los bordes de las figuras | Pasos sincronizados, golpes de tambor de baja frecuencia |
|11| I have a dream today! (1st) | Niño mirando hacia la luz, reflejos en los ojos | Primer plano de ojos, brillo en forma de aguja | Primer grito de "I have a dream!" con eco |
|12| I have a dream that one day... | Adolescentes blancos y negros corriendo hombro a hombro | Toma dinámica de seguimiento, grano de película | Respiración + viento |
|13| ...sons of former slaves... sit together... | Banca universitaria, dos estudiantes leyendo juntos | Simetría horizontal, fondo desenfocado | Susurro de páginas de libro |
|14| I have a dream today! (2nd) | Perfil lateral del orador, boca abierta, fondo con punto de luz | Lente de 35 mm, partículas de polvo flotando a contraluz | Segundo grito, multitud respondiendo al unísono |
|15| Let freedom ring... | Primer plano de la Campana de la Libertad, grieta clara | Luz superior, cuerpo de la campana muy iluminado, fondo negro | Repique prolongado de campana |
|16| Free at last! Free at last! | Aves elevándose, multitud levantando las manos | Obturador de alta velocidad, movimiento de alas congelado | "Free at last!" tres veces, aplausos atronadores |

---

## 3. Prompt unificado para generación de imágenes  
fotografía ultrarrealista en blanco y negro, lente de 50 mm, alto contraste, grano de película, profundidad de campo reducida, [Escena de la página X], manifestación por los derechos civiles de la década de 1960, Monumento a Lincoln de fondo, momento decisivo, --ar 16:9 --v 5 --q 2  

Reemplaza `Page-X Scene` por el evento correspondiente de cada página; mantén niveles uniformes de grano y contraste.  

---

## 4. Prompt unificado para generación de audio  
Barítono masculino, interpretación al estilo de MLK, cadencia lenta, reverberación de Capitol Hall, 44.1 kHz, MP3 de 128 kbps, 15-25 s, [Oración inicial] énfasis en "I have a dream", pico de -3 dB  

Cada clip usa la oración inicial de la página como contenido de narración, con 1 segundo de fundido de salida de aplausos al final.  

---

## 5. Stack tecnológico web y directorio  
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  

- Sin dependencias, JS puro  
- Franja de desplazamiento horizontal, 100 vw/vh por página  
- Resaltado de subtítulos sincronizado con el audio  
- Controles: Reproducir / Pausar / Siguiente / Anterior / Silenciar  

---

## 6. Código clave (obligatorio)  
```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. Implementación con un clic  

README incluye enlaces e instrucciones para activar o desactivar los efectos de audio.  

## 8. Lista de verificación de entrega  
[ ] 16 JPG en blanco y negro, llamados page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, llamados 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Deslizamiento horizontal de la página web sin pantallas en blanco, subtítulos resaltados con el audio  
[ ] El aviso de orientación horizontal en móvil aparece automáticamente

# Crear e implementar un libro ilustrado de audio interactivo en HTML: estilo de fotografía realista en blanco y negro + narración con voz masculina de "I Have a Dream" (página en inglés)  


## 1. Objetivo general  
Transformar el discurso completo de Martin Luther King Jr. del 28 de agosto de 1963 (texto de "I Have a Dream") en un libro ilustrado de audio horizontal a pantalla completa:  
1. 16 ilustraciones fotográficas ultrarrealistas en blanco y negro (1920×1080, alto contraste, grano de película, perspectiva de lente fija de 50 mm)  
2. 16 clips de narración de audio (barítono masculino original, 15-25 segundos por clip, 44.1 kHz, MP3, reverberación de auditorio)  
3. Página web en inglés: desplazamiento horizontal, cambio de página automático/manual, resaltado sincronizado de subtítulos, adaptación para PC y dispositivos móviles  
4. Paquete de implementación con un clic (index.html / assets / README.md)  

---

## 2. Guion gráfico completo y cronología (16 páginas en total)  
| Página | Oración inicial (inglés original) | Evento visual | Composición e iluminación | Sonido clave |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Vista distante del Lincoln Memorial, multitud reuniéndose, siluetas a contraluz | Toma en contrapicado, luces altas en el cielo, figuras en silueta | Apertura de "I am happy to join with you...", eco de auditorio |
| 2 | ...will go down as the greatest demonstration... | Vista cenital de una multitud densa, pancarta "We Demand Equal Rights" | Toma aérea en blanco y negro, alto contraste | Intensificación sostenida, aplausos distantes de fondo |
| 3 | But one hundred years later... | Primer plano del monumento a la Proclamación de Emancipación, envuelto en cadenas oxidadas | Distancia focal media, fondo oscuro que enfatiza el monumento | Ritmo de habla más lento, énfasis en "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Hombre negro aislado sentado entre ruinas, contemplando una ciudad distante | Gran angular, primer plano negro profundo, rascacielos distantes iluminados | Ruido ambiental de soledad |
| 5 | ...the manacles of segregation... | Primer plano de manos con grilletes, cadena parcialmente rota | Macro, luz intensa sobre las manos, eslabones de la cadena muy resaltados | Tintineo de grilletes + murmullo de voz masculina |
| 6 | ...chains of discrimination. | Joven negro rechazado en una puerta, letrero "WHITES ONLY" | Perspectiva desde la abertura de la puerta, letrero sobreexpuesto | Sonido de puerta que se "cierra de golpe" |
| 7 | We have come to cash this check... | Mostrador bancario, una persona negra entrega un cheque en blanco | Composición simétrica, luz del mostrador iluminando la escena | Sonido de papel deslizándose |
| 8 | It would be fatal for the nation... | Mazo de juez suspendido en el aire, multitud desenfocada al fondo | Contrapicado, silueta del mazo | Eco retardado del golpe del mazo |
| 9 | We cannot walk alone. | Manos negras y blancas superpuestas, distintos tonos de piel | Luz superior de softbox, textura nítida de las manos | Latido de baja frecuencia |
|10| We cannot turn back. | Multitud en marcha a contraluz, portal de luz al frente | Contraluz, halos en los contornos de las figuras | Pasos sincronizados, golpes de tambor de baja frecuencia |
|11| I have a dream today! (1st) | Niño mirando hacia la luz, reflejos en los ojos | Primer plano de ojos, brillo fino como una aguja | Primer grito de "I have a dream!" con eco |
|12| I have a dream that one day... | Adolescentes blancos y negros corriendo hombro a hombro | Toma dinámica de seguimiento, grano de película | Respiración + viento |
|13| ...sons of former slaves... sit together... | Banco universitario, dos estudiantes leyendo juntos | Simetría horizontal, fondo desenfocado | Susurro de páginas de libro |
|14| I have a dream today! (2nd) | Perfil lateral del orador, boca abierta, fondo con punto de luz | Lente de 35 mm, partículas de polvo flotando a contraluz | Segundo grito, multitud respondiendo al unísono |
|15| Let freedom ring... | Primer plano de la Campana de la Libertad, grieta nítida | Luz superior, cuerpo de la campana muy iluminado, fondo negro | Repique prolongado de campana |
|16| Free at last! Free at last! | Aves volando hacia arriba, multitud levantando las manos | Obturador de alta velocidad, movimiento de las alas congelado | "Free at last!" tres veces, aplausos atronadores |

---

## 3. Prompt unificado para la generación de imágenes  
fotografía ultrarrealista en blanco y negro, lente de 50 mm, alto contraste, grano de película, profundidad de campo reducida, [Escena de la página X], manifestación por los derechos civiles de la década de 1960, Lincoln Memorial de fondo, momento decisivo, --ar 16:9 --v 5 --q 2  

Reemplaza `Escena de la página X` con el evento correspondiente de cada página; mantén niveles uniformes de grano y contraste.  

---

## 4. Prompt unificado para la generación de audio  
Barítono masculino, interpretación al estilo de MLK, cadencia lenta, reverberación de Capitol Hall, 44.1 kHz, MP3 de 128 kbps, 15-25 s, [Oración inicial], énfasis en "I have a dream", pico de -3 dB  

Cada clip usa la oración inicial de la página como contenido de narración, con 1 segundo de aplausos que se desvanecen al final.  

---

## 5. Stack tecnológico web y directorio  
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  

- Sin dependencias, JS puro  
- Franja de desplazamiento horizontal, 100 vw/vh por página  
- Resaltado de subtítulos sincronizado con el audio  
- Controles: Reproducir / Pausar / Siguiente / Anterior / Silenciar  

---

## 6. Código clave (obligatorio)  
```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. Implementación con un clic  

README incluye enlaces e instrucciones para activar o desactivar los efectos de audio.  

## 8. Lista de verificación de entrega  
[ ] 16 JPG en blanco y negro, llamados page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, llamados 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Deslizamiento horizontal en la página web sin pantallas en blanco, subtítulos resaltados con el audio  
[ ] Aparece automáticamente un aviso para usar el teléfono en orientación horizontal