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, paso de página automático/manual, resaltado sincronizado de subtítulos, adaptable a PC y dispositivos móviles  
4. Paquete de implementación con un clic (index.html / assets / README.md)  

---

## 2. Guion gráfico y cronología 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 | Me alegra reunirme hoy con ustedes... | Vista lejana del Monumento a Lincoln, multitud congregándose, siluetas a contraluz | Toma en contrapicado, luces en el cielo, figuras en silueta | Inicio de "Me alegra reunirme con ustedes...", eco de auditorio |
| 2 | ...pasará a la historia como la mayor manifestación... | Vista cenital de multitud densa, pancarta "Exigimos igualdad de derechos" | Toma aérea en blanco y negro, alto contraste | Intensificación sostenida, aplausos lejanos de fondo |
| 3 | Pero cien años después... | Primer plano del monumento a la Proclamación de Emancipación, cadenas oxidadas enrolladas | Distancia focal media, fondo oscuro que resalta el monumento | Ritmo de discurso más lento, énfasis en "cien años después" |
| 4 | el negro vive en una isla solitaria... | Hombre negro aislado sentado sobre ruinas, mirando una ciudad distante | Gran angular, primer plano negro profundo, rascacielos lejanos iluminados | Ruido ambiental solitario |
| 5 | ...los grilletes de la segregación... | 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 | ...cadenas de discriminación. | Joven negro rechazado en una puerta, letrero "SOLO BLANCOS" | Perspectiva de la rendija de la puerta, letrero sobreexpuesto | Sonido de puerta cerrándose de golpe |
| 7 | Hemos venido a cobrar este cheque... | Mostrador de banco, persona negra entregando un cheque en blanco | Composición simétrica, luz del mostrador iluminando | Sonido de papel deslizándose |
| 8 | Sería fatal para la nación... | Mazo de juez suspendido en el aire, multitud desenfocada al fondo | Contrapicado, silueta del mazo | Eco retardado del golpe del mazo |
| 9 | No podemos caminar solos. | Manos negras y blancas superpuestas, distintos tonos de piel | Luz cenital de softbox, textura clara de las manos | Latido de baja frecuencia |
|10| No podemos volver atrás. | Multitud marchando a contraluz, portal de luz adelante | Contraluz, halos en los bordes de las figuras | Pasos sincronizados, golpes de tambor de baja frecuencia |
|11| ¡Hoy tengo un sueño! (1.ª) | Niño mirando hacia la luz, reflejos en los ojos | Primer plano de ojos, brillo fino como aguja | Primer grito de "¡Tengo un sueño!" con eco |
|12| Tengo el sueño de que un día... | Adolescentes blancos y negros corriendo hombro con hombro | Toma dinámica de seguimiento, grano de película | Respiración + viento |
|13| ...hijos de antiguos esclavos... se sienten juntos... | Banca universitaria, dos estudiantes leyendo juntos | Simetría horizontal, fondo desenfocado | Susurro de páginas de libro |
|14| ¡Hoy tengo un sueño! (2.ª) | 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| Que suene la libertad... | Primer plano de la Campana de la Libertad, grieta visible | Luz cenital, cuerpo de la campana muy iluminado, fondo negro | Repique prolongado de campana |
|16| ¡Libres al fin! ¡Libres al fin! | Aves volando hacia arriba, multitud levantando las manos | Obturador de alta velocidad, movimiento de alas congelado | "¡Libres al fin!" tres veces, aplausos atronadores |

---

## 3. Prompt unificado para generar 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 consistentes de grano y contraste.  

---

## 4. Prompt unificado para generar 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 "Tengo un sueño", pico de -3 dB  

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

---

## 5. Tecnologías 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. 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  
[ ] El aviso de orientación horizontal en móviles aparece automáticamente

# Crea e implementa un HTML interactivo: audiolibro interactivo en inglés de "Tengo un sueño" con estilo de fotografía realista en blanco y negro y narración con voz masculina  


## 1. Objetivo general  
Transforma 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óviles  
4. Paquete de implementación con un clic (index.html / assets / README.md)  

---

## 2. Guion gráfico completo y cronograma (16 páginas en total)  
| Página | Oración inicial (inglés original) | Evento visual | Composición e iluminación | Sonido clave |
|---|---|---|---|---|
| 1 | Me alegra reunirme hoy con ustedes... | Vista distante del Lincoln Memorial, multitud reunida, siluetas a contraluz | Toma en contrapicado, reflejos en el cielo, figuras en silueta | Inicio de "Me alegra reunirme con ustedes...", eco de auditorio |
| 2 | ...pasará a la historia como la mayor manifestación... | Vista aérea de una multitud densa, pancarta "Exigimos igualdad de derechos" | Vista aérea en blanco y negro, alto contraste | Aumento sostenido, aplausos lejanos de fondo |
| 3 | Pero cien años después... | Primer plano del monumento a la Proclamación de Emancipación, envuelto en cadenas oxidadas | Distancia focal media, fondo oscuro que resalta el monumento | Ritmo de habla más lento, énfasis en "cien años después" |
| 4 | el negro vive en una isla solitaria... | Hombre negro aislado sentado entre ruinas, mirando una ciudad distante | Gran angular, primer plano negro profundo, rascacielos distantes iluminados | Ruido ambiental solitario |
| 5 | ...los grilletes de la segregación... | 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 | ...cadenas de discriminación. | Joven negro rechazado en una puerta, letrero "SOLO BLANCOS" | Perspectiva desde la abertura de la puerta, letrero sobreexpuesto | Sonido de puerta que se cierra de golpe |
| 7 | Hemos venido a cobrar este cheque... | 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 | Sería fatal para la nación... | Mazo de juez suspendido en el aire, multitud desenfocada al fondo | Contrapicado, silueta del mazo | Eco retardado del sonido del mazo |
| 9 | No podemos caminar solos. | Manos negras y blancas superpuestas, distintos tonos de piel | Luz cenital de caja de luz, textura nítida de las manos | Latido de baja frecuencia |
|10| No podemos retroceder. | Multitud marchando a contraluz, portal de luz al frente | Contraluz, halos en los bordes de las figuras | Pasos sincronizados, golpes de tambor de baja frecuencia |
|11| ¡Hoy tengo un sueño! (1.ª) | Niño mirando hacia la luz, reflejos en los ojos | Primer plano de ojos, brillo fino como una aguja | Primer grito de "¡Tengo un sueño!" con eco |
|12| Tengo el sueño de que algún día... | Adolescentes blancos y negros corriendo hombro con hombro | Toma dinámica de seguimiento, grano de película | Respiración + viento |
|13| ...hijos de antiguos esclavos... se sienten juntos... | Banco universitario, dos estudiantes leyendo juntos | Simetría horizontal, fondo desenfocado | Susurro de páginas al pasar |
|14| ¡Hoy tengo un sueño! (2.ª) | 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| Que suene la libertad... | Primer plano de la Campana de la Libertad, grieta nítida | Luz cenital, cuerpo de la campana muy iluminado, fondo negro | Repique prolongado de campana |
|16| ¡Libres al fin! ¡Libres al fin! | Aves elevándose, multitud levantando las manos | Obturador de alta velocidad, movimiento de alas congelado | "¡Libres al fin!" 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 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 `Page-X Scene` 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 "Tengo un sueño", pico de -3 dB  

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

---

## 5. Tecnologías 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 al ritmo del audio  
[ ] El aviso de orientación horizontal en móviles aparece automáticamente