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

Öğrenci Portfolyo Sitesi

Projeleri, becerileri ve öğrenme hedeflerini güvenli bilgilerle sunan responsive portfolyo.

Hedef Kitle
Temel bilgisi olan orta seviye lise öğrencileri
Tahmini Süre
Uzun proje (4–6 ders)
Seviye
Orta
Uygulama
Bireysel veya 2–3 kişilik grup

Proje Özeti

Ne geliştirilecek?

Projeleri, becerileri ve öğrenme hedeflerini güvenli bilgilerle sunan responsive portfolyo.

Amaç

Neden uygulanmalı?

Semantik yapı, kart düzeni ve mobil öncelikli tasarımı gerçek bir içerik hiyerarşisinde uygulamak.

Problem / İhtiyaç

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

Çalışmalar farklı ekranlarda okunabilir ve kişisel veri paylaşmadan sunulmalıdır

Öğrenme Kazanımları

  • Semantik bölümler kurar.
  • Responsive kart düzeni yapar.
  • Odak stilleri ekler.

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ığı
Öğrenci Portfolyo Sitesi için örnek girdileri, güvenlik sınırlarını ve test ölçütlerini dersten önce kontrol etmek.

Derse Giriş Etkinliği

Öğrencilere “Çalışmalar farklı ekranlarda okunabilir ve kişisel veri paylaşmadan 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 Grid
  • Responsive Tasarım
  • Erişilebilirlik

Gerekli Malzemeler

  • Kod editörü
  • Tarayıcı
  • Anonim proje metinleri

Uygulama Aşamaları

  1. İçerik planı yap.
  2. HTML iskeletini kur.
  3. Proje kartlarını ekle.
  4. Mobil CSS yaz.
  5. Klavye ile test et.

Örnek Kod veya Teknik İçerik

Erişilebilir web iskeleti

Başlık ve içerik proje bağlamına göre değiştirilir.

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>

/* style.css */
* { box-sizing: border-box; } body { margin: 0; font: 1rem/1.6 system-ui; color: #172033; }
header, main, footer { width: min(100% - 2rem, 70rem); margin-inline: auto; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; padding-block: 1rem; }
section { padding-block: clamp(2rem, 7vw, 5rem); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; }
@media (min-width: 48rem) { main { display: grid; gap: 2rem; } }

Öğrenci Görevi

Uygula ve geliştir

Üç örnek proje kartı ve öğrenme hedefi ekle; telefon/adres/konum paylaşma.

Beklenen Sonuç

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

Öğrenci, “Üç örnek proje kartı ve öğrenme hedefi ekle; telefon/adres/konum paylaşma.” 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
Öğrenci Portfolyo Sitesi 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

  • Filtreli proje listesi
  • Koyu tema
  • Yazdırma stili

Test Senaryoları

  1. 375 px
  2. 768 px
  3. 1440 px
  4. Yalnız klavye

Sık Karşılaşılan Hatalar

  • Başlık sırası bozuk
  • Sabit genişlik
  • Odak görünmüyor

Hata Ayıklama Önerileri

  • Başlık sırası bozuk: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
  • Sabit genişlik: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.
  • Odak görünmüyor: Girdiyi veya bağlantıyı tek tek doğrula; değişiklikten sonra aynı testi yeniden çalıştır.

Güvenlik Notları

  • Telefon, adres, okul ve konum paylaşmayın.
  • Görsel telifini kontrol edin.

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

CSS Grid ve erişilebilir form tasarımını incele.

Ders Paketi

Materyaller

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

  • Öğretmen Kılavuzu

    Öğrenci Portfolyo 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ı

    Öğrenci Portfolyo Sitesi için tahmin, uygulama, test, gözlem, sonuç ve öz değerlendirme alanları.

    PDF İndir Word İndir

  • Değerlendirme Rubriği

    Öğrenci Portfolyo 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ş