Çiğdem Gül Aslan
Web TasarımÖrnek uygulama projesi

Ders Tanıtım Sayfası

Bir dersin amaç, içerik, öğrenme yolu ve kaynaklarını semantik HTML ile tanıtan tek sayfa.

Hedef Kitle
Başlangıç seviye lise öğrencileri
Tahmini Süre
2–3 ders saati
Seviye
Başlangıç
Uygulama
Bireysel veya 2–3 kişilik grup

Proje Özeti

Ne geliştirilecek?

Bir dersin amaç, içerik, öğrenme yolu ve kaynaklarını semantik HTML ile tanıtan tek sayfa.

Amaç

Neden uygulanmalı?

Bilgiyi hedef kitleye göre sıralama ve CTA hiyerarşisini öğrenmek.

Problem / İhtiyaç

Çözüm hangi ihtiyaçtan doğuyor?

Ders hakkında temel bilgiler kısa, okunabilir ve doğru sırada sunulmalıdır

Öğrenme Kazanımları

  • İçerik hiyerarşisi kurar.
  • Doğru heading kullanır.
  • Liste ve bağlantıları erişilebilir yapar.

Sınıfta Uygulama

Hedef Kitle
Başlangıç seviye lise öğrencileri
Önerilen Süre
2–3 ders saati
Çalışma Biçimi
Bireysel veya 2–3 kişilik grup
Öğretmen Hazırlığı
Ders Tanıtım Sayfası için örnek girdileri, güvenlik sınırlarını ve test ölçütlerini dersten önce kontrol etmek.

Derse Giriş Etkinliği

Öğrencilere “Ders hakkında temel bilgiler kısa, okunabilir ve doğru sırada sunulmalıdır” durumu verilir; kod veya araç göstermeden önce olası çözüm adımlarını tahmin etmeleri istenir.

  1. 10 dk: Merak uyandıran problem ve tahmin
  2. 20 dk: Temel kavram ve örnek
  3. 35 dk: Uygulama
  4. 20 dk: Test ve hata ayıklama
  5. 15 dk: Geliştirme ve öğrenci açıklaması

Ön Koşullar

  • Dosya/klasör yönetimi
  • Temel HTML etiketi bilgisi

Kullanılacak Araçlar ve Teknolojiler

  • HTML
  • CSS
  • Semantik Yapı

Gerekli Malzemeler

  • Kod editörü
  • Öğretmenin sağladığı örnek ders içeriği

Uygulama Aşamaları

  1. Hedef kitleyi belirle.
  2. Bölüm sırasını çiz.
  3. HTML yaz.
  4. CSS ile okunabilirlik ekle.
  5. Bağlantıları test et.

Örnek Kod veya Teknik İçerik

Tanıtım sayfası iskeleti

Ana içerik tek h1 ve sıralı h2 bölümleri kullanır.

html
<!doctype html><html lang="tr"><head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Proje Sayfası</title>
<style>
* { box-sizing: border-box; } body { margin: 0; font: 1rem/1.6 system-ui; }
header, main, footer { width: min(100% - 2rem, 70rem); margin-inline: auto; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; }
@media (min-width: 48rem) { section { padding-block: 4rem; } }
</style></head>
<body><a class="skip" href="#icerik">İçeriğe geç</a>
<header><nav aria-label="Ana menü"><a href="#hakkinda">Hakkında</a></nav></header>
<main id="icerik"><section id="hakkinda"><h1>Proje Başlığı</h1><p>Tanıtım metni.</p></section></main>
<footer><p>Örnek eğitim projesi</p></footer></body></html>

Öğrenci Görevi

Uygula ve geliştir

Bir bilişim konusu için amaç, üç kazanım, öğrenme adımları ve güvenli kaynak bölümü hazırla.

Beklenen Sonuç

Başarı nasıl görünecek?

Öğrenci, “Bir bilişim konusu için amaç, üç kazanım, öğrenme adımları ve güvenli kaynak bölümü hazırla.” görevini tamamlayan çalışan bir ürün sunar; sonucunu test senaryoları, gözlemler ve teknik kararlarını açıklayan kısa bir değerlendirmeyle kanıtlar.

Değerlendirme Ölçütleri

Toplam: 100 puan
ÖlçütPuan
Ders Tanıtım Sayfası gereksinimlerini karşılama25
Teknik doğruluk ve kavram kullanımı20
Test etme ve kanıt sunma20
Problem çözme ve iyileştirme20
Düzen, etik ve açıklama15

Geliştirme Fikirleri

  • Sık sorulan sorular
  • İlerleme yolu
  • Yazdırma görünümü

Test Senaryoları

  1. Başlık ağacı
  2. Bağlantılar
  3. 375 px görünüm

Sık Karşılaşılan Hatalar

  • Birden fazla h1
  • Yetersiz kontrast
  • Belirsiz bağlantı metni

Hata Ayıklama Önerileri

  • Birden fazla h1: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
  • Yetersiz kontrast: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
  • Belirsiz bağlantı metni: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.

Güvenlik Notları

  • Yalnız doğrulanmış ve yaşa uygun kaynaklara bağlantı verin.

Öğretmen Notları

  • Hazır çözümü vermeden önce öğrenciden tahminini ve denediği adımı açıklamasını isteyin.
  • Sonucu yalnız çalışıyor/çalışmıyor olarak değil; test kanıtı ve açıklamayla değerlendirin.

Öğrenci Öz Değerlendirme Soruları

  • Çözümüm hangi problemi gideriyor ve bunu nasıl test ettim?
  • En zorlandığım hata neydi; hangi ipucu çözmeme yardım etti?
  • Bir sonraki sürümde neyi değiştirir ve neden değiştirirdim?

Sonraki Öğrenme Önerisi

Buradan sonra ne öğrenilebilir?

İçerik tasarımı ve temel SEO metadata öğren.

Ders Paketi

Materyaller

Projeyi sınıfta uygulamak için hazırlanan materyalleri PDF veya düzenlenebilir Word biçiminde indirebilirsin.

  • Öğretmen Kılavuzu

    Ders Tanıtım Sayfası için amaç, hazırlık, ders akışı, uygulama, güvenlik, hata ayıklama ve geliştirme önerileri.

    PDF İndir Word İndir

  • Öğrenci Çalışma Kâğıdı

    Ders Tanıtım Sayfası için tahmin, uygulama, test, gözlem, sonuç ve öz değerlendirme alanları.

    PDF İndir Word İndir

  • Değerlendirme Rubriği

    Ders Tanıtım Sayfası için projeye özel, gözlenebilir ölçütlerden oluşan 100 puanlık değerlendirme rubriği.

    PDF İndir Word İndir

Öğrenmeye Devam Et

Benzer Projeler

Tüm Projelere Dönİçerik Önerisi Paylaş