I Have a Dream Livro ilustrado com áudio

# Criar e publicar um HTML interativo: estilo de fotografia realista em preto e branco + narração em 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 prime de 50 mm)  
2. 16 clipes de narração em áudio (voz masculina original de barítono, 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, adaptação para PC e dispositivos móveis  
4. Pacote de publicação com um clique (index.html / assets / README.md)  

---

## 2. Storyboard completo do texto e linha do tempo (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 contra-plongée, 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 superior de uma multidão densa, faixa "We Demand Equal Rights" | Vista aérea em preto e branco, alto contraste | Crescente sustentado, aplausos distantes ao fundo |
| 3 | But one hundred years later... | Close do monumento à Proclamação de Emancipação, envolto por 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 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 quebrada | Macro, luz forte sobre as mãos, elos da corrente bem destacados | Tilintar de algemas + murmúrio de voz masculina |
| 6 | ...chains of discrimination. | Jovem negro rejeitado em uma porta, placa "WHITES ONLY" | Perspectiva pela fresta da porta, placa superexposta | Som de porta se fechando com força |
| 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 | Batimento cardíaco em baixa frequência |
|10| We cannot turn back. | Multidão em marcha em contraluz, portal de luz adiante | 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, destaque em forma de 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 de universidade, dois estudantes lendo juntos | Simetria horizontal, fundo desfocado | Som de páginas de livro sendo folheadas |
|14| I have a dream today! (2nd) | Perfil lateral do orador, boca aberta, fundo com ponto de luz | 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 o alto, multidão erguendo as mãos | Obturador HighSpeed, movimento das asas congelado | "Free at last!" repetido 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 rasa, [Page-X Scene], manifestação pelos direitos civis dos anos 1960, cenário do Lincoln Memorial, 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  
Voz masculina de barítono, 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, [Starting Sentence] 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 fade-out de aplausos ao final.  

---

## 5. Stack de tecnologias 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  

- Zero dependências, JS puro  
- Faixa de rolagem horizontal, 100 vw/vh por página  
- Destaque de 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 os efeitos de áudio.  

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

# Criar e publicar um HTML interativo: estilo de fotografia realista preto e branco Fotografia + narração em 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 ilustrações fotográficas (1920×1080, alto contraste, granulação de filme, perspectiva de lente prime de 50 mm)  
2. 16 clipes de narração em áudio (voz masculina original de barítono, 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, adaptação para PC e dispositivos móveis  
4. Pacote de publicação com um clique (index.html / assets / README.md)  

---

## 2. Storyboard completo do texto e linha do tempo (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 contra-plongée, 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 superior de uma multidão densa, faixa "We Demand Equal Rights" | Vista aérea em preto e branco, alto contraste | Crescente sustentado, aplausos distantes ao fundo |
| 3 | But one hundred years later... | Close do monumento à Proclamação de Emancipação, envolto por 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 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 quebrada | Macro, luz forte sobre as mãos, elos da corrente bem destacados | Tilintar de algemas + murmúrio de voz masculina |
| 6 | ...chains of discrimination. | Jovem negro rejeitado em uma porta, placa "WHITES ONLY" | Perspectiva pela fresta da porta, placa superexposta | Som de porta se fechando com força |
| 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 | Batimento cardíaco em baixa frequência |
|10| We cannot turn back. | Multidão em marcha em contraluz, portal de luz adiante | 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, destaque em forma de 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 de universidade, dois estudantes lendo juntos | Simetria horizontal, fundo desfocado | Som de páginas de livro sendo folheadas |
|14| I have a dream today! (2nd) | Perfil lateral do orador, boca aberta, fundo com ponto de luz | 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 o alto, multidão erguendo as mãos | Obturador HighSpeed, movimento das asas congelado | "Free at last!" repetido três vezes, aplausos estrondosos |

---

## 3. Prompt unificado para geração de imagens  
fotografia ultrarrealista em preto e branco fotografia, 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 `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 diminuindo gradualmente ao 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  

- 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 links e instruções para alternar efeitos de áudio.  

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