Bir Hayalim Var Sesli Resimli Kitap

# Etkileşimli Bir HTML Oluşturun ve Yayımlayın: Gerçekçi Siyah-Beyaz Fotoğrafçılık Tarzı + Erkek Sesli Anlatım "Bir Hayalim Var" Etkileşimli Sesli Kitap (İngilizce Sayfa)  


## 1. Genel Hedef  
Martin Luther King Jr.'ın 28 Ağustos 1963 tarihli konuşmasının tamamını ("Bir Hayalim Var" metni) yatay, tam ekran bir sesli kitaba dönüştürün:  
1. 16 ultra gerçekçi siyah-beyaz fotoğraf illüstrasyonu (1920×1080, yüksek kontrast, film grenleri, 50 mm prime lens perspektifi)  
2. 16 sesli anlatım klibi (özgün erkek bariton, klip başına 15-25 saniye, 44.1 kHz, MP3, oditoryum yankısı)  
3. İngilizce web sayfası: yatay kaydırma, otomatik/manuel sayfa çevirme, eşzamanlı altyazı vurgulama, PC ve mobil uyumlu  
4. Tek tıkla yayımlama paketi (index.html / assets / README.md)  

---

## 2. Tam Metin Storyboard'u ve Zaman Çizelgesi (Toplam 16 Sayfa)  
| Sayfa | Başlangıç Cümlesi (Özgün İngilizce) | Görsel Olay | Kompozisyon ve Işık | Temel Ses |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Lincoln Anıtı'nın uzaktan görünümü, toplanan kalabalık, arkadan aydınlatılmış silüetler | Alçak açı çekim, gökyüzü vurguları, silüet hâlinde figürler | "I am happy to join with you..." açılışı, oditoryum yankısı |
| 2 | ...will go down as the greatest demonstration... | Sıkışık kalabalığın kuş bakışı görünümü, "We Demand Equal Rights" pankartı | Havadan siyah-beyaz, yüksek kontrast | Süren yükseliş, arka planda uzaktan alkış |
| 3 | But one hundred years later... | Özgürlük Bildirgesi anıtının yakın planı, çevresine sarılmış paslı zincirler | Orta odak uzaklığı, anıtı vurgulayan koyu arka plan | Daha yavaş konuşma temposu, "one hundred years later" vurgusu |
| 4 | the Negro lives on a lonely island... | Harabelerde oturup uzaktaki şehre bakan yalnız Siyah adam | Geniş açı, koyu siyah ön plan, uzaktaki gökdelenler aydınlık | Yalnız ortam sesi |
| 5 | ...the manacles of segregation... | Kelepçeli ellerin yakın planı, zincir kısmen kırılmış | Makro, ellerde güçlü ışık, zincir halkaları belirgin biçimde vurgulanmış | Kelepçe şıngırtısı + mırıldanan erkek sesi |
| 6 | ...chains of discrimination. | Kapıda geri çevrilen Siyah genç, "WHITES ONLY" tabelası | Kapı aralığı perspektifi, tabela aşırı pozlanmış | Kapının "çarparak" kapanma sesi |
| 7 | We have come to cash this check... | Banko, boş çeki uzatan Siyah kişi | Simetrik kompozisyon, banko ışığı aydınlatıyor | Kâğıdın kayma sesi |
| 8 | It would be fatal for the nation... | Havada asılı duran hâkim tokmağı, arka planda bulanık kalabalık | Alçak açı, tokmak silüeti | Tokmak sesinin gecikmeli yankısı |
| 9 | We cannot walk alone. | Üst üste gelen Siyah ve beyaz eller, farklı ten tonları | Softbox üst ışığı, net el dokusu | Düşük frekanslı kalp atışı |
|10| We cannot turn back. | Arkadan aydınlatılmış yürüyüş kalabalığı, ileride ışık geçidi | Arka ışık, figür kenarlarında hareler | Eşzamanlı ayak sesleri, düşük frekanslı davul vuruşları |
|11| I have a dream today! (1st) | Işığa bakan çocuk, göz yansımaları | Gözlerin yakın planı, iğne gibi ışık vurgusu | Yankılı ilk "I have a dream!" haykırışı |
|12| I have a dream that one day... | Omuz omuza koşan beyaz ve Siyah gençler | Dinamik takip çekimi, film grenleri | Nefes + rüzgâr |
|13| ...sons of former slaves... sit together... | Üniversite bankı, birlikte okuyan iki öğrenci | Yatay simetri, bulanık arka plan | Kitap sayfalarının hışırtısı |
|14| I have a dream today! (2nd) | Konuşmacının yandan profili, açık ağız, ışık lekeli arka plan | 35 mm lens, arkadan aydınlatılmış havada süzülen toz parçacıkları | İkinci haykırış, kalabalığın hep bir ağızdan karşılık vermesi |
|15| Let freedom ring... | Özgürlük Çanı'nın yakın planı, belirgin çatlak | Üst ışık, çan gövdesi güçlü biçimde aydınlatılmış, siyah arka plan | Uzun süren çan sesi |
|16| Free at last! Free at last! | Yukarı uçan kuşlar, ellerini kaldıran kalabalık | Yüksek hızlı enstantane, donmuş kanat hareketi | Üç kez "Free at last!", gök gürültüsünü andıran alkış |

---

## 3. Birleşik Görsel Oluşturma İstemi  
ultra-realistic black-and-white photograph, 50 mm lens, high contrast, film grain, shallow DOF, [Page-X Scene], 1960'lar sivil haklar mitingi, Lincoln Anıtı arka planı, belirleyici an, --ar 16:9 --v 5 --q 2  

`Page-X Scene` ifadesini her sayfaya karşılık gelen olayla değiştirin; gren ve kontrast düzeylerini tutarlı tutun.  

---

## 4. Birleşik Ses Oluşturma İstemi  
Erkek bariton, MLK tarzı hitabet, yavaş tempo, Capitol Hall yankısı, 44.1 kHz, 128 kbps MP3, 15-25 s, [Başlangıç Cümlesi] "I have a dream" vurgusuyla, -3 dB peak  

Her klip, sayfanın başlangıç cümlesini anlatım içeriği olarak kullanır ve sonunda 1 saniyelik alkışla azalarak biter.  

---

## 5. Web Teknoloji Yığını ve Dizin  
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  

- Sıfır bağımlılık, sade JS  
- Yatay kaydırma şeridi, sayfa başına 100 vw/vh  
- Sesle eşzamanlı altyazı vurgulama  
- Denetimler: Oynat / Duraklat / Sonraki / Önceki / Sesi Kapat  

---

## 6. Temel Kod (Zorunlu)  
```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. Tek Tıkla Yayımlama  

README; bağlantıları ve ses efekti açma/kapatma yönergelerini içerir.  

## 8. Teslimat Öz Kontrolü  
[ ] page-01 ~ page-16 adlı, 16 siyah-beyaz JPG, ≤ 600 KB  
[ ] 01.mp3 ~ 16.mp3 adlı, 16 MP3, ≤ 400 KB  
[ ] Boş ekran olmadan yatay kaydırılabilen web sayfası, sesle vurgulanan altyazılar  
[ ] Mobil yatay yönlendirme bildirimi otomatik açılır

# Etkileşimli HTML Oluşturun ve Dağıtın: Gerçekçi Siyah-Beyaz Fotoğrafçılık Stili + Erkek Seslendirmeli "I Have a Dream" Etkileşimli Sesli Kitap (İngilizce Sayfa)  


## 1. Genel Amaç  
Martin Luther King Jr.'ın 28 Ağustos 1963 tarihli konuşmasının tamamını ("I Have a Dream" metni) bir tam ekran yatay sesli kitaba:  
1. 16 ultra gerçekçi siyah-beyaz fotoğrafçılık illüstrasyonu (1920×1080, yüksek kontrast, film grenleri, 50 mm prime lens perspektifi)  
2. 16 sesli anlatım klibi (özgün erkek bariton, klip başına 15-25 saniye, 44.1 kHz, MP3, oditoryum yankısı)  
3. İngilizce web sayfası: yatay kaydırma, otomatik/manuel sayfa geçişi, altyazı eşzamanlı vurgulaması, PC ve mobil uyumlu  
4. Tek tıkla dağıtım paketi (index.html / assets / README.md)  

---

## 2. Tam Metin Storyboard ve Zaman Çizelgesi (Toplam 16 Sayfa)  
| Sayfa | Başlangıç Cümlesi (Özgün İngilizce) | Görsel Olay | Kompozisyon ve Işıklandırma | Temel Ses |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Lincoln Anıtı'nın uzaktan görünümü, toplanan kalabalık, arkadan aydınlatılmış silüetler | Alçak açı, gökyüzü vurguları, silüet hâlindeki figürler | "I am happy to join with you..." açılışı, oditoryum yankısı |
| 2 | ...will go down as the greatest demonstration... | Yoğun kalabalığın üstten görünümü, "We Demand Equal Rights" pankartı | Havadan siyah-beyaz çekim, yüksek kontrast | Süregelen yükseliş, arka planda uzaktan alkış |
| 3 | But one hundred years later... | Kurtuluş Bildirgesi anıtının yakın planı, etrafına sarılmış paslı zincirler | Orta odak uzaklığı, anıtı öne çıkaran koyu arka plan | Daha yavaş konuşma temposu, "one hundred years later" vurgusu |
| 4 | the Negro lives on a lonely island... | Harabelerde oturan, uzaktaki şehre bakan yalnız Siyah adam | Geniş açı, koyu siyah ön plan, uzakta aydınlatılmış gökdelenler | Yalnızlık hissi veren ortam sesi |
| 5 | ...the manacles of segregation... | Kelepçeli ellerin yakın planı, zincir kısmen kırılmış | Makro çekim, eller üzerinde güçlü ışık, belirgin biçimde vurgulanmış zincir halkaları | Kelepçe şıngırtısı + mırıldanan erkek sesi |
| 6 | ...chains of discrimination. | Kapıda reddedilen Siyah genç, "WHITES ONLY" tabelası | Kapı aralığından perspektif, aşırı pozlanmış tabela | Kapının "çarparak" kapanma sesi |
| 7 | We have come to cash this check... | Banko, boş çeki uzatan Siyah kişi | Simetrik kompozisyon, bankoyu aydınlatan ışık | Kâğıdın kayma sesi |
| 8 | It would be fatal for the nation... | Havada asılı duran yargıç tokmağı, arka planda bulanık kalabalık | Alçak açı, tokmak silüeti | Tokmak sesinin gecikmeli yankısı |
| 9 | We cannot walk alone. | Farklı ten tonlarındaki Siyah ve beyaz ellerin üst üste gelmesi | Softbox üst ışığı, net el dokusu | Düşük frekanslı kalp atışı |
|10| We cannot turn back. | Arkadan aydınlatılmış yürüyüş kalabalığı, ileride ışık geçidi | Arkadan aydınlatma, figür kenarlarında hale etkisi | Eşzamanlı ayak sesleri, düşük frekanslı davul vuruşları |
|11| I have a dream today! (1st) | Işığa bakan çocuk, gözlerde ışık yansımaları | Gözlerin yakın planı, iğne gibi ışık vurgusu | Yankılı ilk "I have a dream!" haykırışı |
|12| I have a dream that one day... | Omuz omuza koşan beyaz ve Siyah gençler | Dinamik takip çekimi, film grenleri | Nefes + rüzgâr |
|13| ...sons of former slaves... sit together... | Üniversite bankında birlikte okuyan iki öğrenci | Yatay simetri, bulanık arka plan | Kitap sayfalarının hışırtısı |
|14| I have a dream today! (2nd) | Konuşmacının yandan profili, açık ağız, ışık noktalı arka plan | 35 mm lens, arkadan aydınlatılmış havada süzülen toz parçacıkları | İkinci haykırış, kalabalığın hep bir ağızdan karşılık vermesi |
|15| Let freedom ring... | Liberty Bell'in yakın planı, belirgin çatlak | Üstten ışık, yoğun biçimde aydınlatılmış çan gövdesi, siyah arka plan | Uzun süren çan sesi |
|16| Free at last! Free at last! | Yukarı uçan kuşlar, ellerini kaldıran kalabalık | Yüksek hızlı deklanşör, dondurulmuş kanat hareketi | Üç kez "Free at last!", gürleyen alkış |

---

## 3. Birleşik Görsel Oluşturma İstemi  
ultra gerçekçi siyah-beyaz fotoğraf, 50 mm lens, yüksek kontrast, film grenleri, sığ alan derinliği, [Page-X Scene], 1960'lar sivil haklar mitingi, Lincoln Anıtı arka planı, belirleyici an, --ar 16:9 --v 5 --q 2  

Her sayfa için `Page-X Scene` yerine karşılık gelen olayı yazın; gren ve kontrast düzeylerini tutarlı tutun.  

---

## 4. Birleşik Ses Oluşturma İstemi  
Erkek bariton, MLK tarzı seslendirme, yavaş ritim, Capitol Hall yankısı, 44.1 kHz, 128 kbps MP3, 15-25 sn., [Başlangıç Cümlesi], "I have a dream" vurgusu, -3 dB tepe  

Her klip, sayfanın başlangıç cümlesini anlatım metni olarak kullanır ve sonunda 1 saniyelik alkışla sönümlenir.  

---

## 5. Web Teknoloji Yığını ve Dizin  
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  

- Bağımlılık yok, saf JS  
- Yatay kaydırma şeridi, sayfa başına 100 vw/vh  
- Sesle eşzamanlı altyazı vurgulaması  
- Denetimler: Oynat / Duraklat / Sonraki / Önceki / Sesi Kapat  

---

## 6. Temel Kod (Zorunlu)  
```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. Tek Tıkla Dağıtım  

README, bağlantıları ve ses efekti açma/kapatma talimatlarını içerir.  

## 8. Teslimat Öz Kontrolü  
[ ] page-01 ~ page-16 olarak adlandırılmış 16 siyah-beyaz JPG, ≤ 600 KB  
[ ] 01.mp3 ~ 16.mp3 olarak adlandırılmış 16 MP3, ≤ 400 KB  
[ ] Web sayfasında boş ekran olmadan yatay kaydırma, sesle eşzamanlı altyazı vurgulaması  
[ ] Mobil yatay yönlendirme istemi otomatik olarak açılır