TÜRKÇE
ENGLISH
Genel Bilgi
| Birim | FEN-EDEBİYAT FAKÜLTESİ |
| BİLGİSAYAR BİLİMLERİ PR. | |
| Kod | BBZ301 |
| Ad | Web Tasarımı ve Programlama I |
| Dönem | 2025-2026 Eğitim-Öğretim Yılı |
| Yarıyıl | 5. Yarıyıl |
| Süre (T+U) | 2-2 (T-U) (17 Hafta) |
| AKTS | 5 AKTS |
| Yerel Kredi | 3 Yerel Kredi |
| Eğitim Dil | Türkçe |
| Seviye | Belirsiz |
| Tür | Normal |
| Etiket | Z Zorunlu |
| Öğretim Şekli | Yüz Yüze Öğretim |
| Bilgi Paketi Koordinatörü | Dr. Öğr. Üyesi Cevher ÖZDEN |
| Dersin Öğretim Elemanı |
Güncel dönem ders programı henüz yapılmamıştır.
|
Dersin Amacı / Hedefi
Bu dersin amacı öğrencilere web sayfası tasarımı ve programlamanın temel prensiplerini öğretmek, HTML, CSS ve temel JavaScript konularında uygulamalı bilgi kazandırmak, dinamik ve erişilebilir web arayüzleri geliştirme yetkinliği kazandırmak.
Dersin İçeriği
Bu ders, öğrencilerin temel web teknolojileri hakkında bilgi sahibi olmalarını ve HTML, CSS ve temel JavaScript kullanarak dinamik ve kullanıcı dostu web sayfaları geliştirme becerilerini kazanmalarını amaçlamaktadır. Web sayfası tasarımı, temel kullanıcı deneyimi ilkeleri, responsive tasarım ve temel istemci taraflı programlama konuları ders kapsamında ele alınır.
Dersin Ön Koşulu
Yok
Kaynaklar
Jon Duckett, HTML and CSS: Design and Build Websites, Wiley, 2011. Jon Duckett, JavaScript and jQuery: Interactive Front-End Web Development, Wiley, 2014.
Notlar
Mozilla Developer Network (MDN) Web Docs W3Schools Online Tutorials Bootstrap Resmi Dokümantasyon
Dersin Öğrenme Çıktıları
| Sıra | Dersin Öğrenme Çıktıları |
|---|---|
| ÖÇ01 | HTML etiketlerini kullanarak yapısal bir web sayfası tasarlar |
| ÖÇ02 | Web teknolojilerinin temel bileşenlerini tanımlar |
| ÖÇ03 | CSS ile sayfa biçimlendirmesi yaparak farklı görsel tasarım şablonları oluşturur |
| ÖÇ04 | JavaScript dilini kullanarak kullanıcı etkileşimlerine yönelik temel dinamik özellikler geliştirir |
| ÖÇ05 | Responsive tasarım ilkelerine uygun olarak çoklu cihazlarla uyumlu web arayüzleri geliştirir |
Program Öğrenme Çıktıları ile İlişkisi
| Sıra | Tür | Program Öğrenme Çıktıları | Duzey |
|---|---|---|---|
| PÖÇ01 | Bilgi - Kuramsal, Olgusal | Bilgisayar Bilimleri temel kavramları, algoritmalar ve veri yapıları hakkında geniş bir bilgi yelpazesi kazandırır. | |
| PÖÇ02 | Bilgi - Kuramsal, Olgusal | Yazılım geliştirme, programlama dilleri ve veritabanı yönetimi gibi temel bilgisayar konularını öğrenir. | |
| PÖÇ03 | Bilgi - Kuramsal, Olgusal | Veri bilimi, yapay zeka ve makine öğrenimi gibi ileri düzey bilgisayar alanlarını anlar. | |
| PÖÇ04 | Bilgi - Kuramsal, Olgusal | Bilgisayar ağları, siber güvenlik ve veritabanı tasarımı gibi konularda bilgi edinir. | |
| PÖÇ05 | Beceriler - Bilişsel, Uygulamalı | Algoritmaları tasarlama, uygulama ve analiz etme becerilerini geliştirir. | 5 |
| PÖÇ06 | Beceriler - Bilişsel, Uygulamalı | Farklı programlama dillerini etkili bir şekilde kullanabilme yeteneği kazanır | 5 |
| PÖÇ07 | Beceriler - Bilişsel, Uygulamalı | Veri analizi, veritabanı yönetimi ve büyük veri işleme becerilerini öğrenir. | |
| PÖÇ08 | Beceriler - Bilişsel, Uygulamalı | Yazılım geliştirme projelerinde çalışarak pratik deneyim kazanır. | 4 |
| PÖÇ09 | Yetkinlikler - Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği | Ekip içinde işbirliği yapma ve iletişim becerilerini güçlendirir. | 5 |
| PÖÇ10 | Yetkinlikler - Alana Özgü Yetkinlik | Teknolojik yeniliklere açık bir zihniyet kazandırır. | |
| PÖÇ11 | Yetkinlikler - Öğrenme Yetkinliği | Sürekli öğrenme ve kendini geliştirme yetkinliğini teşvik eder. | |
| PÖÇ12 | Yetkinlikler - İletişim ve Sosyal Yetkinlik | Karmaşık sorunları çözme yeteneği geliştirir. |
Haftalık Akış
| Hafta | Konu | Ön Hazırlık | Yöntemler |
|---|---|---|---|
| 1 | Web Teknolojilerine Giriş: İnternet, Web, Tarayıcılar ve Protokoller | İnternet ve web hakkında genel kavram araştırması | Öğretim Yöntemleri: Gösterip Yaptırma, Anlatım, Tartışma, Soru-Cevap |
| 2 | HTML Temelleri I – Temel Etiketler, Sayfa Yapısı, Metin Formatlama | HTML yapısı ve örnek belgeler | Öğretim Yöntemleri: Anlatım, Soru-Cevap, Gösterip Yaptırma, Tartışma |
| 3 | HTML Temelleri II – Listeler, Bağlantılar, Tablolar, Görseller | HTML örnekleriyle uygulama | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 4 | Formlar ve Giriş Alanları: Form Etiketleri ve Giriş Tipleri | Form kullanımı örnekleri | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 5 | CSS Temelleri: Seçiciler, Kurallar, Renk, Yazı Tipi, Arka Planlar | CSS yapısı ve temel stiller | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 6 | Sayfa Yerleşimi: Box Model, Margin-Padding, Flexbox, Grid Sistemi | Sayfa düzeni egzersizleri | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 7 | Responsive Tasarım ve Medya Sorguları | Mobil uyumlu tasarım örnekleri | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 8 | Ara Sınavlar | Konu tekrarı | Ölçme Yöntemleri: Yazılı Sınav |
| 9 | JavaScript’e Giriş: Değişkenler, Veri Türleri, Operatörler | JS başlangıç dökümanları | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 10 | Koşullar, Döngüler, Fonksiyonlar ve Olaylar | JS fonksiyon ve kontrol yapıları uygulamaları | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 11 | DOM (Document Object Model) İşlemleri | JS ile DOM erişimi örnekleri | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 12 | Form Doğrulama ve Temel AJAX Uygulamaları | JS ile validasyon örnekleri | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 13 | Web Projesi Geliştirme I: Tasarım Gözden Geçirme ve İyileştirme | Önceki projelerin incelenmesi | Öğretim Yöntemleri: Anlatım, Tartışma, Gösterip Yaptırma |
| 14 | Web Projesi Geliştirme II: JavaScript Entegrasyonu ve Test Süreci | JS entegrasyonu ve işlevsellik testleri | Öğretim Yöntemleri: Anlatım, Tartışma, Alıştırma ve Uygulama |
| 15 | Genel Tekrar, Sık Yapılan Hataların İncelenmesi ve Final Hazırlığı | Final sunumu öncesi bireysel rehberlik | Yöntem Seçilmemiş |
| 16 | Yarıyıl Sonu Sınavları | Final Projesi Sunumları ve Genel Değerlendirme | Ölçme Yöntemleri: Proje / Tasarım |
| 17 | Yarıyıl Sonu Sınavları | Final Projesi Sunumları ve Genel Değerlendirme | Ölçme Yöntemleri: Proje / Tasarım |
Öğrenci İş Yükü - AKTS
| Çalışmalar | Sayısı | Süresi (Saat) | İş Yükü (Saat) |
|---|---|---|---|
| Ders ile İlgili Çalışmalar | |||
| Ders (Sınav haftaları dahil değildir) | 14 | 4 | 56 |
| Sınıf Dışı Ders Çalışma (Ön çalışma, pekiştirme) | 14 | 4 | 56 |
| Değerlendirmeler ile İlgili Çalışmalar | |||
| Ödev, Proje, Diğer | 5 | 1 | 5 |
| Ara Sınavlar (Yazılı, Sözlü, vs.) | 1 | 1 | 1 |
| Yarıyıl/Yıl Sonu/Final Sınavı | 1 | 1 | 1 |
| Toplam İş Yükü (Saat) | 119 | ||
| Toplam İş Yükü / 25 (s) | 4,76 | ||
| AKTS | 5 AKTS | ||