Ders Adı Web Tasarımı
Ders Kodu BPR-3123
Dersin Türü Zorunlu
Ders Biriminin Seviyesi Ön Lisans
Yıl 1
Dönem 1.Yarıyıl
AKTS 4
Dersi Veren(ler) Öğr. Gör. Ziya DİRLİK
Dersin Yardımcıları
Ders İşleme Biçimi Yüz Yüze
Önkoşul Dersleri
Dersin İçeriği 1. Giriş ve Web Geliştirme Temelleri: Web geliştirme nedir? Web teknolojilerinin evrimi Frontend ve backend geliştirme kavramları 2. HTML'in Önemi ve Temel Yapıları: HTML nedir ve ne işe yarar? Temel HTML etiketleri ve yapıları HTML belgesi oluşturma ve yapılandırma 3. CSS Temelleri ve Stil Şablonları: CSS nedir ve neden önemlidir? Temel CSS özellikleri ve sözdizimi CSS ile HTML belgesini stilize etme 4. Responsive Tasarım ve Bootstrap: Responsive tasarımın önemi Bootstrap framework'ünün kullanımı Mobil uyumlu web tasarımı 5. HTML ve JavaScript Etkileşimi: HTML form elemanları ve formlar JavaScript'in HTML ile etkileşimi Form doğrulama ve işleme 6. İleri Düzey HTML ve Web Geliştirme Araçları: HTML5'in yeni özellikleri Web geliştirme araçları ve kaynaklar Daha karmaşık web sayfaları oluşturma teknikleri 7. Proje Çalışması ve Uygulama: Öğrencilerin öğrendiklerini uygulama fırsatı Gruplar halinde bir web projesi oluşturma Proje sunumu ve değerlendirme
Dersin Verildiği Diller Türkçe
Dersin Amacı Bu ders, öğrencilere web geliştirme temellerini anlatmayı ve HTML'in önemini vurgulamayı amaçlar. Öğrenciler, web teknolojilerinin evrimi hakkında bilgi edinecekler ve HTML'in web sayfalarının oluşturulmasındaki temel rolünü anlayacaklar. Ayrıca, dersin sonunda öğrencilerin basit bir HTML belgesi oluşturabilecek ve yapılandırabilecek yetenekleri olması beklenir.
Ders Yapısı
Temel/Alana Özgü Mesleki Dersler 60
Uzmanlık/Program Dersi 0
Destek Dersi 0
Beceri,İletişim ve Yönetim Becerileri Dersi 20
Aktarılabilir Beceri Dersi 20
Matematik ve Temel Bilimler 0
Temel Eğitim 0
Ders İşleme Şekli
Sınıf Dersi 0
Sınıf Dersi açıklama 0
Problem Saati 0
Problem Saati Açıklama 0
Laboratuvar 100
Laboratuvar Açıklama 1
Diğer 0
Diğer Açıklama 0
No Dersin Kazanımları  
1 Web tasarımının temel kavramlarını anlamak.
2 HTML ve CSS gibi temel web teknolojilerini kullanarak web sayfaları oluşturabilmek.
3 Responsive web tasarım prensiplerini anlamak ve uygulamak.
4 Kullanıcı arayüzü tasarımı ve kullanılabilirlik prensiplerini öğrenmek.
5 Grafik tasarım ve renk teorisi prensiplerini uygulamak.
6 Web tasarımında tipografi ve font seçimi konularında bilgi edinmek.
7 İnteraktif web öğeleri ve kullanıcı etkileşimi konularında temel bilgi sahibi olmak.
8 Web sitesi performansını artırmak için optimizasyon tekniklerini öğrenmek.
DERSİN KAZANIMLARI / PROGRAM YETERLİKLERİ İLİŞKİ MATRİSİ
DKPÇ1PÇ2PÇ3PÇ4PÇ5PÇ6PÇ7PÇ8PÇ9PÇ10PÇ11PÇ12PÇ13PÇ14PÇ15PÇ16
1
2
3
4
5
6
7
8
9
10
5-Çok Yüksek İlişkili 4- Yüksek İlişkili 3-Orta İlişkili 2- Zayıf İlişkili 1-İlişkisiz
Hafta Konular  
1 Web geliştirme temelleri, HTML'in önemi ve temel yapıları
2 CSS'in temel kavramları ve kullanımı
3 HTML ve CSS'in birlikte kullanımıyla basit web sayfaları oluşturma
4 Responsive tasarım kavramı, Bootstrap framework'ünün kullanımı
5 JavaScript'in temel yapısı, değişkenler, koşullar ve döngüler
6 JavaScript'in temel yapısı, değişkenler, koşullar ve döngüler
7 JavaScript'in temel yapısı, değişkenler, koşullar ve döngüler
8 JavaScript kullanarak Document Object Model (DOM) üzerinde işlemler yapma
9 JavaScript kullanarak Document Object Model (DOM) üzerinde işlemler yapma
10 JavaScript kullanarak Document Object Model (DOM) üzerinde işlemler yapma
11 JavaScript'te ileri seviye konular: fonksiyonlar, nesne yönelimli programlama, AJAX
12 JavaScript'te ileri seviye konular: fonksiyonlar, nesne yönelimli programlama, AJAX
13 JavaScript'te ileri seviye konular: fonksiyonlar, nesne yönelimli programlama, AJAX
14 Öğrencilerin öğrendikleri bilgileri kullanarak bir web projesi oluşturma ve sunumu
No Program Çıktısı Katkı Düzeyi
1 Mesleği ile ilgili temel, güncel ve uygulamalı bilgilere sahip olur. 4
2 İş sağlığı ve güvenliği, çevre bilinci ve kalite süreçleri hakkında bilgi sahibi olur. 3
3 Mesleği için güncel gelişmeleri ve uygulamaları takip eder, etkin şekilde kullanır. 5
4 Mesleği ile ilgili bilişim teknolojilerini (yazılım, program, animasyon vb.) etkin kullanır. 4
5 Mesleki problemleri ve konuları bağımsız olarak analitik ve eleştirel bir yaklaşımla değerlendirme ve çözüm önerisini sunabilme becerisine sahiptir. 3
6 Bilgi ve beceriler düzeyinde düşüncelerini yazılı ve sözlü iletişim yolu ile etkin biçimde sunabilir, anlaşılır biçimde ifade eder. 3
7 Alanı ile ilgili uygulamalarda karşılaşılan ve öngörülemeyen karmaşık sorunları çözmek için ekip üyesi olarak sorumluluk alır. 3
8 Kariyer yönetimi ve yaşam boyu öğrenme konularında farkındalığa sahiptir. 4
9 Alanı ile ilgili verilerin toplanması, uygulanması ve sonuçlarının duyurulması aşamalarında toplumsal, bilimsel, kültürel ve etik değerlere sahiptir. 4
10 Bir yabancı dili kullanarak alanındaki bilgileri takip eder ve meslektaşları ile iletişim kurar. 4
11 Algoritma ve veri yapılarını oluşturur ve matematiksel hesapları yapar. 3
12 Web programlama teknolojilerini açıklar ve uygular. 4
13 Veri tabanı tasarımı ve yönetimini gerçekleştirir. 3
14 Yazılımları test eder ve hataları giderir. 3
15 İş yeri ortamında teorik bilgilerini pratiğe aktarma, iş hayatının dinamiklerini anlama ve mesleki sorumluluklarını geliştirme becerilerine sahip olur 3
16 Atatürk İlkeleri ve İnkılap Tarihi, Türk Dili ve İngilizce gibi zorunlu dersler aracılığıyla, tarihi, kültürel, dilsel ve evrensel değerlere dair farkındalık kazanır, eleştirel düşünme ve küresel ölçekte etkileşim becerilerine sahip olur. 4
Yarıyıl İçi Çalışmaları Sayısı Katkı Payı
Ara Sınav 1 100
Kısa Sınav 0 0
Ödev 0 0
Devam 0 0
Uygulama 0 0
Labaratuvar 0 0
Proje 0 0
Atölye 0 0
Seminer 0 0
Arazi Çalışması 0 0
Sözlü sınav 0 0
Portfolyo 0 0
Doküman İncelemesi 0 0
Performans değerlendirme 0 0
Sunum 0 0
Alan Çalışması 0 0
Vaka Çalışması 0 0
Video Kaydı 0 0
Öz değerlendirme 0 0
Akran Değerlendirme 0 0
Eşleştirme Testleri 0 0
Çoktan seçmeli test 0 0
Kısa Cevaplı test 0 0
Kontrol listeleri 0 0
Dereceleme Ölçekleri 0 0
Zihin Haritalama 0 0
Araştırma yazısı 0 0
Çevrimiçi anket 0 0
Çevrimiçi Kısa sınav 0 0
TOPLAM 100
Yıliçinin Başarıya Oranı 40
Finalin Başarıya Oranı 60
TOPLAM 100
AKTS kredilerinin belirlenmesinde öğrenci işyükü anketlerinden faydalanılmaktadır.
Etkinlik Sayısı Süresi Toplam
Ders Süresi (Sınav Haftaları Hariç) 14 4 56
Sınıf Dışı Ders Çalışma Süresi 14 2 28
Ödevler 14 2 28
Sunum/Seminer 0 0 0
Proje 1 15 15
Laboratuar Çalışması 0 0 0
Arazi ya da Alan Çalışması 0 0 0
Kısa Sınav 0 0 0
Araştırma 0 0 0
Rapor Yazma/Rapor sunumu 0 0 0
Vaka İncelemesi 0 0 0
Staj 0 0 0
Uygulama/Materyal Hazırlama 0 0 0
Tez Çalışması 0 0 0
Ara Sınavlar 0 0 0
Yarıyıl Sonu Sınavı 0 0 0
İşyükü Saati (30) 30
Toplam İşyükü / Saat 127    
Dersin Akts Kredisi 4    
Ders Notu "HTML ve CSS: Tasarım ve Yapı" - Jon Duckett "HTML & CSS: Design and Build Websites" - Jon Duckett "Web Tasarımı ve HTML" - Serdar Başeğmez "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" - Jennifer Robbins Mozilla Developer Network (MDN) - HTML Dökümantasyonu W3Schools - HTML Tutorial
Diğer Kaynaklar "HTML ve CSS: Tasarım ve Yapı" - Jon Duckett "HTML & CSS: Design and Build Websites" - Jon Duckett "Web Tasarımı ve HTML" - Serdar Başeğmez "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" - Jennifer Robbins Mozilla Developer Network (MDN) - HTML Dökümantasyonu W3Schools - HTML Tutorial
Materyal
Dökümanlar "HTML ve CSS: Tasarım ve Yapı" - Jon Duckett "HTML & CSS: Design and Build Websites" - Jon Duckett "Web Tasarımı ve HTML" - Serdar Başeğmez "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" - Jennifer Robbins Mozilla Developer Network (MDN) - HTML Dökümantasyonu W3Schools - HTML Tutorial
Ödevler HTML Temel Etiketlerin Kullanımı: Öğrencilerden, temel HTML etiketlerini kullanarak basit bir web sayfası oluşturmaları istenir. Bu sayfa, başlık, paragraf, liste ve resim gibi en az beş farklı HTML etiketini içermelidir. HTML ve CSS Entegrasyonu: Öğrencilerden, HTML ve CSS kullanarak birlikte çalışan bir web sayfası tasarlamaları istenir. CSS dosyasını kullanarak HTML belgesinin stilini özelleştirmeleri beklenir. Responsive Tasarım Uygulaması: Öğrencilerden, Bootstrap veya kendi CSS becerilerini kullanarak responsive (duyarlı) bir web sayfası tasarlamaları istenir. Sayfanın farklı cihazlarda (bilgisayar, tablet, mobil) uyumlu görünmesi beklenir. HTML ve JavaScript Etkileşimi: Öğrencilerden, HTML form elemanlarını kullanarak bir kullanıcı girişi formu oluşturmaları ve JavaScript'i kullanarak bu formu işlemeleri istenir. Örneğin, bir formun gönderildiğinde bir uyarı penceresi görüntülemek gibi basit bir işlev eklemeleri beklenir.
Sınavlar
Materyal Diğer
Planlanmış Öğrenme Faaliyetleri ve Öğretim Yöntemleri











Haftalık Ders İzlencesi
Hafta 1 .Hafta
Konu
Haftalık Kapsam ve Hedefler Web geliştirme kavramlarını öğrenmek, HTML yapısını anlamak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Tanıtıcı videolar, HTML dokümanları
Haftalık Öğrenme Etkinlikleri Açıklama Web geliştirme kavramlarına giriş ve HTML'in temel yapısı.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 2 .Hafta
Konu
Haftalık Kapsam ve Hedefler CSS'in temel özelliklerini öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar CSS ile ilgili uygulama örnekleri
Haftalık Öğrenme Etkinlikleri Açıklama CSS kullanımı ve stillendirme.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 3 .Hafta
Konu
Haftalık Kapsam ve Hedefler HTML ve CSS’i kullanarak basit bir web sayfası tasarlamak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar HTML ve CSS alıştırmaları
Haftalık Öğrenme Etkinlikleri Açıklama HTML ve CSS ile sayfa oluşturma uygulaması.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 4 .Hafta
Konu
Haftalık Kapsam ve Hedefler Responsive tasarım kavramını ve Bootstrap’i öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Bootstrap rehberleri ve örnek projeler
Haftalık Öğrenme Etkinlikleri Açıklama Bootstrap ile responsive sayfa tasarımı.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 5 .Hafta
Konu
Haftalık Kapsam ve Hedefler JavaScript'te değişkenler, koşullar ve döngüler hakkında bilgi edinmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar JavaScript örnekleri ve uygulamalar
Haftalık Öğrenme Etkinlikleri Açıklama JavaScript temel yapısı.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 6 .Hafta
Konu
Haftalık Kapsam ve Hedefler JavaScript dilinde döngü ve koşulları derinlemesine öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar İleri döngü ve koşul örnekleri
Haftalık Öğrenme Etkinlikleri Açıklama JavaScript döngü ve koşulları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 7 .Hafta
Konu
Haftalık Kapsam ve Hedefler JavaScript’in temel programlama mantığını öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Değişken, koşul ve döngü alıştırmaları
Haftalık Öğrenme Etkinlikleri Açıklama JavaScript temel yapı uygulamaları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 8 .Hafta
Konu
Haftalık Kapsam ve Hedefler DOM yapısını JavaScript ile manipüle etmeyi öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar DOM manipülasyonu uygulamaları
Haftalık Öğrenme Etkinlikleri Açıklama JavaScript ile DOM işlemleri.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 9 .Hafta
Konu
Haftalık Kapsam ve Hedefler DOM manipülasyonuna dair daha ileri teknikleri öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar İleri DOM manipülasyonu örnekleri
Haftalık Öğrenme Etkinlikleri Açıklama DOM üzerinde ileri seviye işlemler.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 10 .Hafta
Konu
Haftalık Kapsam ve Hedefler DOM işlemleri üzerinde uygulamalı deneyim kazanmak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Proje bazlı DOM çalışmaları
Haftalık Öğrenme Etkinlikleri Açıklama DOM işlemlerine dair proje uygulamaları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 11 .Hafta
Konu
Haftalık Kapsam ve Hedefler Fonksiyonlar, nesne yönelimli programlama ve AJAX kullanımı öğrenmek.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Fonksiyonlar ve AJAX örnekleri
Haftalık Öğrenme Etkinlikleri Açıklama Fonksiyonlar, OOP ve AJAX ile JavaScript uygulamaları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 12 .Hafta
Konu
Haftalık Kapsam ve Hedefler AJAX ve nesne yönelimli programlama tekniklerini uygulamak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar OOP ve AJAX çalışmaları
Haftalık Öğrenme Etkinlikleri Açıklama İleri seviye JavaScript uygulamaları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 13 .Hafta
Konu
Haftalık Kapsam ve Hedefler JavaScript’te ileri tekniklerle çalışma deneyimi kazanmak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Uygulamalı ileri seviye örnekler
Haftalık Öğrenme Etkinlikleri Açıklama İleri JavaScript proje çalışmaları.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri
Hafta 14 .Hafta
Konu
Haftalık Kapsam ve Hedefler Öğrendikleri bilgileri bir projede kullanmak ve sunmak.
Haftalık Öğrenme Etkinlikleri/Kaynakları/Videolar Öğrenci sunumları ve değerlendirme
Haftalık Öğrenme Etkinlikleri Açıklama Proje sunumu ve değerlendirme.
Haftalık Ölçme-Değerlendirme Etkinlikleri
Haftalık Ölçme-Değerlendirme Notlandırması/Ödev Teslim Süreleri