I Have a Dream Livro ilustrado com áudio

# Criar e publicar um HTML interativo: estilo fotográfico realista em preto e branco + narração com voz masculina Audiolivro interativo "I Have a Dream" (página em inglês)  


## 1. Objetivo geral  
Transformar o discurso completo de Martin Luther King Jr., de 28 de agosto de 1963 (texto de "I Have a Dream") em um audiolivro horizontal em tela cheia:  
1. 16 ilustrações fotográficas ultrarrealistas em preto e branco (1920×1080, alto contraste, granulação de filme, perspectiva de lente fixa de 50 mm)  
2. 16 clipes de narração em áudio (barítono masculino original, 15 a 25 segundos por clipe, 44,1 kHz, MP3, reverberação de auditório)  
3. Página em inglês: rolagem horizontal, virada de página automática/manual, destaque sincronizado das legendas, adaptável para PC e dispositivos móveis  
4. Pacote de publicação com um clique (index.html / assets / README.md)  

---

## 2. Storyboard e cronograma do texto completo (16 páginas no total)  
| Página | Frase inicial (inglês original) | Evento visual | Composição e iluminação | Som principal |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Vista distante do Lincoln Memorial, multidão se reunindo, silhuetas contra a luz | Plano em contra-plongée, realces no céu, figuras em silhueta | Abertura de "I am happy to join with you...", eco de auditório |
| 2 | ...will go down as the greatest demonstration... | Vista aérea de uma multidão densa, faixa "We Demand Equal Rights" | Preto e branco aéreo, alto contraste | Crescente contínuo, aplausos distantes ao fundo |
| 3 | But one hundred years later... | Close do monumento da Proclamação de Emancipação, envolto em correntes enferrujadas | Distância focal média, fundo escuro destacando o monumento | Ritmo de fala mais lento, "one hundred years later" em destaque |
| 4 | the Negro lives on a lonely island... | Homem negro isolado sentado sobre ruínas, olhando para uma cidade distante | Grande-angular, primeiro plano em preto profundo, arranha-céus distantes iluminados | Ruído ambiente solitário |
| 5 | ...the manacles of segregation... | Close de mãos algemadas, corrente parcialmente rompida | Macro, luz forte nas mãos, elos da corrente bem destacados | Tilintar de algemas + voz masculina murmurando |
| 6 | ...chains of discrimination. | Jovem negro barrado em uma porta, placa "WHITES ONLY" | Perspectiva pela fresta da porta, placa superexposta | Som de porta batendo |
| 7 | We have come to cash this check... | Balcão de banco, pessoa negra entregando cheque em branco | Composição simétrica, luz do balcão iluminando a cena | Som de papel deslizando |
| 8 | It would be fatal for the nation... | Martelo de juiz suspenso no ar, multidão desfocada ao fundo | Ângulo baixo, silhueta do martelo | Eco retardado do som do martelo |
| 9 | We cannot walk alone. | Mãos negras e brancas sobrepostas, diferentes tons de pele | Luz superior de softbox, textura nítida das mãos | Batimentos cardíacos em baixa frequência |
|10| We cannot turn back. | Multidão em marcha contra a luz, portal de luz à frente | Contraluz, halos nas bordas das figuras | Passos sincronizados, batidas de tambor em baixa frequência |
|11| I have a dream today! (1ª) | Criança olhando para a luz, reflexos nos olhos | Close dos olhos, realce fino como agulha | Primeiro grito de "I have a dream!" com eco |
|12| I have a dream that one day... | Adolescentes brancos e negros correndo lado a lado | Plano de acompanhamento dinâmico, granulação de filme | Respiração + vento |
|13| ...sons of former slaves... sit together... | Banco universitário, dois estudantes lendo juntos | Simetria horizontal, fundo desfocado | Ruído de páginas de livro |
|14| I have a dream today! (2ª) | Perfil lateral do orador, boca aberta, fundo com ponto de luz | Lente de 35 mm, partículas de poeira flutuando contra a luz | Segundo grito, multidão respondendo em uníssono |
|15| Let freedom ring... | Close do Sino da Liberdade, rachadura nítida | Luz superior, corpo do sino bem iluminado, fundo preto | Toque prolongado do sino |
|16| Free at last! Free at last! | Pássaros voando para cima, multidão erguendo as mãos | Obturador de alta velocidade, movimento das asas congelado | "Free at last!" três vezes, aplausos estrondosos |

---

## 3. Prompt unificado para geração de imagens  
fotografia ultrarrealista em preto e branco, lente de 50 mm, alto contraste, granulação de filme, DOF raso, [Cena da página X], manifestação pelos direitos civis dos anos 1960, Lincoln Memorial ao fundo, momento decisivo, --ar 16:9 --v 5 --q 2  

Substitua `Page-X Scene` pelo evento correspondente de cada página; mantenha níveis consistentes de granulação e contraste.  

---

## 4. Prompt unificado para geração de áudio  
Barítono masculino, interpretação no estilo de MLK, cadência lenta, reverberação do Capitol Hall, 44,1 kHz, MP3 de 128 kbps, 15 a 25 s, [Frase inicial] com ênfase em "I have a dream", pico de -3 dB  

Cada clipe usa a frase inicial da página como conteúdo da narração, com 1 segundo de aplausos em fade-out no final.  

---

## 5. Stack de tecnologia web e diretório  
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  

- Sem dependências, JS puro  
- Faixa de rolagem horizontal, 100 vw/vh por página  
- Destaque das legendas sincronizado com o áudio  
- Controles: Reproduzir / Pausar / Próxima / Anterior / Silenciar  

---

## 6. Código principal (obrigatório)  
```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. Publicação com um clique  

O README inclui links e instruções para alternar efeitos de áudio.  

## 8. Autoverificação da entrega  
[ ] 16 JPGs em preto e branco, nomeados page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3s, nomeados 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Deslize horizontal na página sem telas em branco, legendas destacadas com o áudio  
[ ] Aviso automático de orientação horizontal em dispositivos móveis

# Criar e implantar um HTML interativo: estilo de fotografia realista em preto e branco + audiolivro interativo "I Have a Dream" com narração masculina (página em inglês)  


## 1. Objetivo geral  
Transforme o discurso completo de Martin Luther King Jr., de 28 de agosto de 1963 (texto de "I Have a Dream"), em um audiolivro horizontal em tela cheia:  
1. 16 ilustrações fotográficas ultrarrealistas em preto e branco (1920×1080, alto contraste, granulação de filme, perspectiva de lente prime de 50 mm)  
2. 16 clipes de narração em áudio (barítono masculino original, 15 a 25 segundos por clipe, 44,1 kHz, MP3, reverberação de auditório)  
3. Página em inglês: rolagem horizontal, virada de página automática/manual, destaque das legendas sincronizado, adaptação para PC e dispositivos móveis  
4. Pacote de implantação com um clique (index.html / assets / README.md)  

---

## 2. Storyboard e cronograma completos (16 páginas no total)  
| Página | Frase inicial (original em inglês) | Evento visual | Composição e iluminação | Som principal |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Vista distante do Lincoln Memorial, multidão se reunindo, silhuetas em contraluz | Plano em ângulo baixo, destaques no céu, figuras em silhueta | Abertura de "I am happy to join with you...", eco de auditório |
| 2 | ...will go down as the greatest demonstration... | Vista aérea de uma multidão densa, faixa "We Demand Equal Rights" | Foto aérea em preto e branco, alto contraste | Crescendo contínuo, aplausos distantes ao fundo |
| 3 | But one hundred years later... | Close do monumento da Proclamação de Emancipação, envolto em correntes enferrujadas | Distância focal média, fundo escuro destacando o monumento | Ritmo de fala mais lento, ênfase em "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Homem negro isolado sentado sobre ruínas, olhando uma cidade distante | Grande-angular, primeiro plano em preto profundo, arranha-céus distantes iluminados | Ruído ambiente solitário |
| 5 | ...the manacles of segregation... | Close de mãos algemadas, corrente parcialmente rompida | Macro, luz forte sobre as mãos, elos da corrente bem destacados | Tilintar de algemas + voz masculina murmurada |
| 6 | ...chains of discrimination. | Jovem negro recusado em uma porta, placa "WHITES ONLY" | Perspectiva pela fresta da porta, placa superexposta | Som de porta "batendo" ao fechar |
| 7 | We have come to cash this check... | Balcão de banco, pessoa negra entregando cheque em branco | Composição simétrica, luz do balcão iluminando a cena | Som de papel deslizando |
| 8 | It would be fatal for the nation... | Martelo de juiz suspenso no ar, multidão desfocada ao fundo | Ângulo baixo, silhueta do martelo | Eco retardado do som do martelo |
| 9 | We cannot walk alone. | Mãos negras e brancas sobrepostas, com diferentes tons de pele | Luz superior de softbox, textura nítida das mãos | Batimento cardíaco em baixa frequência |
|10| We cannot turn back. | Multidão marchando em contraluz, portal de luz à frente | Contraluz, halos nas bordas das figuras | Passos sincronizados, batidas de tambor em baixa frequência |
|11| I have a dream today! (1st) | Criança olhando para a luz, reflexos nos olhos | Close dos olhos, brilho pontual fino como agulha | Primeiro grito de "I have a dream!" com eco |
|12| I have a dream that one day... | Adolescentes brancos e negros correndo lado a lado | Plano de acompanhamento dinâmico, granulação de filme | Respiração + vento |
|13| ...sons of former slaves... sit together... | Banco universitário, dois estudantes lendo juntos | Simetria horizontal, fundo desfocado | Som de páginas sendo folheadas |
|14| I have a dream today! (2nd) | Perfil lateral do orador, boca aberta, fundo iluminado por um foco | Lente de 35 mm, partículas de poeira flutuando em contraluz | Segundo grito, multidão respondendo em uníssono |
|15| Let freedom ring... | Close do Sino da Liberdade, rachadura nítida | Luz superior, corpo do sino bem iluminado, fundo preto | Toque prolongado de sino |
|16| Free at last! Free at last! | Pássaros voando para cima, multidão erguendo as mãos | Obturador de alta velocidade, movimento das asas congelado | "Free at last!" três vezes, aplausos estrondosos |

---

## 3. Prompt unificado para geração de imagens  
fotografia ultrarrealista em preto e branco, lente de 50 mm, alto contraste, granulação de filme, profundidade de campo rasa, [Cena da página X], manifestação pelos direitos civis dos anos 1960, Lincoln Memorial ao fundo, momento decisivo, --ar 16:9 --v 5 --q 2  

Substitua `Cena da página X` pelo evento correspondente de cada página; mantenha níveis consistentes de granulação e contraste.  

---

## 4. Prompt unificado para geração de áudio  
Barítono masculino, locução no estilo de MLK, cadência lenta, reverberação no salão do Capitólio, 44,1 kHz, MP3 de 128 kbps, 15 a 25 s, [Frase inicial], ênfase em "I have a dream", pico de -3 dB  

Cada clipe usa a frase inicial da página como conteúdo da narração, com 1 segundo de aplausos em fade-out ao final.  

---

## 5. Stack tecnológica e diretório da web  
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  

- Zero dependências, JS puro  
- Faixa de rolagem horizontal, 100 vw/vh por página  
- Destaque das legendas sincronizado com o áudio  
- Controles: Reproduzir / Pausar / Próxima / Anterior / Silenciar  

---

## 6. Código principal (obrigatório)  
```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. Implantação com um clique  

O README inclui instruções sobre links e ativação/desativação de efeitos de áudio.  

## 8. Autoverificação da entrega  
[ ] 16 JPGs em preto e branco, nomeados page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3s, nomeados 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Deslize horizontal da página sem telas em branco, destaque das legendas sincronizado com o áudio  
[ ] O aviso para girar o celular para o modo paisagem aparece automaticamente