📌Kazanım:
BTY.5.6.4. Blok tabanlı ortamda yazılım geliştirme sürecini yönetebilme
b) Blok tabanlı ortamda Yazılımı tasarlar.
⏱Süre: 2 Ders Saati
🎯 Bu Konuda Neler Öğreneceğiz?
- Yazılım tasarımının ne olduğunu ve neden önemli olduğunu anlayacağız.
- Scratch’te sahne, karakter (sprite) ve arkaplanın ne işe yaradığını öğreneceğiz.
- Kullanıcı etkileşiminin ne olduğunu ve nasıl tasarlandığını göreceğiz.
- “Eğer … ise … yap” mantığıyla algoritma tasarımını öğreneceğiz.
- Projemizin taslağını kağıda çizerek wireframe kavramını tanıyacağız.
🎨 Yazılım Tasarımı Nedir?
Yazılım tasarımı; bir programın kullanıcıya nasıl görüneceğini (arayüz) ve arka planda nasıl çalışacağını (algoritma) önceden belirleme sürecidir.
Bunu bir ev inşaatına benzetebiliriz:
| Ev İnşaatı | Yazılım Tasarımı |
|---|---|
| Mimarın çizdiği plan | Programın taslak çizimi (wireframe) |
| Odaların yerleşimi | Sahne, karakterler ve arkaplan düzeni |
| Elektrik ve su tesisatı planı | Algoritma (hangi olayda ne olacak?) |
| İnşaat başlamadan önce yapılır | Kodlamadan önce yapılır |
💡 Kısaca: Tasarım = Arayüz (nasıl görünecek?) + Algoritma (nasıl çalışacak?)
🖼️ Scratch’te Arayüz Tasarımı
Scratch’te bir programın arayüzü üç temel parçadan oluşur:
1. Sahne (Stage)
Sahne, programının oynadığı ekran alanıdır. Tüm karakterler ve arkaplan burada görünür. Scratch’te sahne 480 x 360 piksel boyutundadır.
📌 Tasarım sorusu: Sahnemde neler olacak? Kaç karakter göründüğünü istiyorum? Nerede duruyorlar?
2. Karakter — Sprite
Sprite, sahnedeki hareketli karakterlerdir. Bir kukla, bir araba, bir top, bir düğme — hepsi sprite olabilir. Her sprite’ın kendi kod alanı vardır; yani her karakter kendi bloklarıyla hareket eder.
📌 Tasarım sorusu: Kaç tane sprite’a ihtiyacım var? Her biri ne yapacak?
3. Arkaplan (Backdrop)
Arkaplan, sahnenin arka yüzeyidir. Orman, uzay, sınıf, şehir… Arkaplan değiştirilerek programın farklı sahnelere geçişi sağlanabilir.
📌 Tasarım sorusu: Arkaplanım nasıl olacak? Tek bir arkaplan mı, birden fazla mı?
✏️ Wireframe: Taslak Çizimi
Profesyonel tasarımcılar, bir uygulamayı yapmadan önce kağıt üzerinde kabataslak bir çizim yaparlar. Buna wireframe (tel çerçeve) denir. Wireframe; renk, süsleme veya detay içermez — sadece neyin nerede olacağını gösterir.
📄 Örnek Wireframe — “Selam Veren Program”
Karakter
💬 Merhaba, [ad]!
▶ Başlat
⏹ Durdur
↑ Bu kadar basit! Renk yok, detay yok. Sadece yerleşim.
✏️ Sen de yap: Kendi projen için bir wireframe çiz. A4 kağıdını al, dikdörtgenle sahneyi çiz, içine karakterlerin ve arkaplanın kabaca yerini belirt. 5 dakika yeter!
🖱️ Kullanıcı Etkileşimi Tasarımı
Kullanıcı etkileşimi; kullanıcının programla nasıl iletişim kurduğudur. Scratch’te kullanıcı üç şekilde programa müdahale edebilir:
| Etkileşim Türü | Scratch’teki Karşılığı | Örnek Kullanım |
|---|---|---|
| ⌨️ Tuşa basma | [boşluk] tuşuna basıldığında | Karakteri zıplatmak, oyunu başlatmak |
| 🖱️ Tıklama | bu sprite tıklandığında | Butona basmak, karakteri seçmek |
| 📨 Mesaj alma | [mesaj1] alındığında | Bir sprite’ın diğerini tetiklemesi |
🧐 Tasarım sorusu: Kullanıcı programla nasıl etkileşime geçecek? Bir tuşa mı basacak? Bir karaktere mi tıklayacak? Yoksa program otomatik mi çalışacak?
⚙️ Algoritma Tasarımı: “Eğer … ise … yap”
Arayüzü tasarladıktan sonra sıra algoritma tasarımına gelir. Algoritma tasarımında her olayın ne tetikleyeceğini önceden belirliyoruz.
Bunu Olaylar Tablosu ile yapabiliriz. Bu tablo; “hangi olayda, hangi sprite, ne yapacak?” sorularını yanıtlar.
📋 Olaylar Tablosu
| Eğer (Olay) | Kim (Sprite) | Yap (Eylem) |
|---|---|---|
| 🟡 Yeşil bayrak tıklandığında | Kukla | “Merhaba!” de, sahnenin ortasına git |
| 🖱️ Kukla tıklandığında | Kukla | Renk değiştir, dön |
| ⌨️ Sağ ok tuşuna basıldığında | Kukla | 10 adım sağa git |
| ⌨️ Sol ok tuşuna basıldığında | Kukla | 10 adım sola git |
| 📨 “oyunBitti” mesajı alındığında | Kukla | “Oyun bitti!” de, dur |
💡 İpucu: Olaylar tablosundaki her satır, Scratch’te bir blok yığınına dönüşecek. Kaç satır varsa o kadar blok yığını olacak demektir!
🗺️ Tasarım Süreci: Adım Adım
Bir Scratch projesi için tasarım aşamasını şu sırayla tamamlıyoruz:
- Wireframe çiz
Kağıda sahneyi, karakterlerin yerini ve arkaplanı kabataslak çiz. - Sprite listesi oluştur
Kaç tane sprite olacak? Her birinin adı ve görevi ne? - Arkaplan kararını ver
Tek arkaplan mı, birden fazla mı? Scratch kütüphanesinden mi, kendin mi çizeceksin? - Etkileşimleri belirle
Kullanıcı programla nasıl etkileşime geçecek? Tuş mu, tıklama mı? - Olaylar tablosunu doldur
“Eğer … ise … yap” formatında her olayı ve eylemini yaz.
🎯 Unutma: Bu 5 adımı tamamladıktan sonra Scratch’i açabilirsin. Tasarımı olmayan program, rotası olmayan gemi gibidir!
📝 Gerçek Bir Örnek: “Renkli Balonlar” Projesi
Aşağıda basit bir Scratch projesi için hazırlanmış tam tasarım belgesi yer alıyor. İncele ve kendi projen için örnek al.
| Proje Adı | Renkli Balonlar |
| Proje Amacı | Tıklandığında renk değiştiren ve ses çıkaran balonlar |
| Sprite’lar | 3 adet balon (kırmızı, mavi, sarı) |
| Arkaplan | Açık mavi gökyüzü (Scratch kütüphanesinden) |
| Kullanıcı Etkileşimi | Balona tıklama |
| Olaylar Tablosu | • Yeşil bayrak → Balonlar sahnede belirir • Balona tıklandığında → Renk değiştir + “Pop!” sesi çal • Yeşil bayrak → puan değişkeni 0’a sıfırlanır • Balona tıklandığında → puan 1 artar |
⚠️ Tasarım Yaparken Dikkat Edilecekler
- ✅ Her sprite’ın tek bir görevi olsun — bir sprite her şeyi yapmaya çalışmasın.
- ✅ Olaylar tablosunu eksiksiz doldur — atladığın her olay ileride hata olarak karşına çıkar.
- ✅ Wireframe’i basit tut — sanat eseri değil, plan çiziyorsun.
- ✅ Tasarımını bir arkadaşına anlat — anlatamazsan tasarım henüz tamamlanmamış demektir.
- ❌ Tasarım yapmadan doğrudan Scratch’i açma — zamanını verimli kullanamazsın.
- ❌ Çok karmaşık başlama — önce basit bir proje tasarla, sonra geliştir.
🔁 Özet
Bu derste yazılım tasarımının ne olduğunu ve nasıl yapıldığını öğrendik:
- Yazılım tasarımı iki parçadan oluşur: Arayüz (nasıl görünecek) + Algoritma (nasıl çalışacak).
- Scratch arayüzünün üç temel parçası vardır: Sahne, Sprite ve Arkaplan.
- Tasarımı kağıda kabataslak çizmek için wireframe kullanılır.
- Kullanıcı etkileşimi; tuşa basma, tıklama veya mesaj alma yoluyla gerçekleşir.
- Olaylar Tablosu ile “Eğer … ise … yap” formatında algoritma tasarlanır.
🌟 Unutma! İyi bir tasarım, kodlamanın yarısını zaten tamamlar. Tasarımını ne kadar iyi yaparsan, Scratch’te o kadar az hata yaparsın!