Okul Tanıtım Web Sitesi Projesi

Proje Özeti

Ne geliştirilecek?

Gerçek kurum adı kullanmadan bölümler, navigasyon ve erişilebilir içerik yapısını öğreten örnek site.

Amaç

Neden uygulanmalı?

Çok bölümlü bilgi mimarisi ve erişilebilir navigasyonu uygulamak.

Problem / İhtiyaç

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

Bir eğitim kurumu örneğinin bilgileri açık gezinme ve doğru başlıklarla sunulmalıdır

Öğrenme Kazanımları

Navigasyon yapar.
Bölümleri semantik düzenler.
Kurgusal içeriği açıkça işaretler.

Sınıfta Uygulama

Hedef Kitle: Temel bilgisi olan orta seviye lise öğrencileri
Önerilen Süre: Uzun proje (4–6 ders)
Çalışma Biçimi: Bireysel veya 2–3 kişilik grup
Öğretmen Hazırlığı: Okul Tanıtım Web Sitesi için örnek girdileri, güvenlik sınırlarını ve test ölçütlerini dersten önce kontrol etmek.

Derse Giriş Etkinliği

Öğrencilere “Bir eğitim kurumu örneğinin bilgileri açık gezinme ve doğru başlıklarla sunulmalıdır” durumu verilir; kod veya araç göstermeden önce olası çözüm adımlarını tahmin etmeleri istenir.

10 dk: Merak uyandıran problem ve tahmin
20 dk: Temel kavram ve örnek
35 dk: Uygulama
20 dk: Test ve hata ayıklama
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
Navigasyon
Erişilebilirlik

Gerekli Malzemeler

Kod editörü
Tamamen kurgusal kurum içeriği

Uygulama Aşamaları

Kurgusal içerik belirle.
Site haritası çiz.
Navigasyonu kur.
Bölümleri ekle.
Responsive test et.

Örnek Kod veya Teknik İçerik

Semantik sayfa başlangıcı

Metinlerde gerçek okul, kişi, adres veya iletişim bilgisi yer almaz.

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

Kurgusal okul için hakkımızda, alanlar ve iletişim yerine genel bilgi bölümü hazırla; gerçek kurum verisi kullanma.

Beklenen Sonuç

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

Öğrenci, “Kurgusal okul için hakkımızda, alanlar ve iletişim yerine genel bilgi bölümü hazırla; gerçek kurum verisi kullanma.” 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çüt	Puan
Okul Tanıtım Web Sitesi gereksinimlerini karşılama	25
Teknik doğruluk ve kavram kullanımı	20
Test etme ve kanıt sunma	20
Problem çözme ve iyileştirme	20
Düzen, etik ve açıklama	15

Geliştirme Fikirleri

Duyuru kartları
Erişilebilir galeri
Çok sayfalı yapı

Test Senaryoları

Tüm menü bağlantıları
Klavye odağı
Mobil menü sarılması

Sık Karşılaşılan Hatalar

Gerçek kurum adı kullanmak
Boş href
Heading atlamak

Hata Ayıklama Önerileri

Gerçek kurum adı kullanmak: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
Boş href: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
Heading atlamak: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.

Güvenlik Notları

Gerçek öğrenci/öğretmen fotoğrafı veya kurum bilgisi kullanmayın.

Öğ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?

Çok sayfalı navigasyon ve içerik denetimi yap.

Ders Paketi

Materyaller

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

Öğretmen Kılavuzu
Okul Tanıtım Web Sitesi 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ı
Okul Tanıtım Web Sitesi için tahmin, uygulama, test, gözlem, sonuç ve öz değerlendirme alanları.
PDF İndir Word İndir
Değerlendirme Rubriği
Okul Tanıtım Web Sitesi 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ş

Okul Tanıtım Web Sitesi