Bu dersin sonunda öğrenciler; 1) Temel web teknolojileri tanımlar. 2) HTML sayfaları oluşturmak için beceri gösterir. 3) Arayüz tasarımında arayüzün ne olduğunu ve hangi kriterlerin önemli olduğunu tanımlayabilir. 4) Bir web sitesi için kavramsal model oluşturma sürecini kavrar. 5) Sayfa düzeni, renk kullanımı ve tipografi konularındaki mevcut bilgilerini web mecrasına taşır. 6) Bir web sayfasının yaratım sürecini planlayıp ve yürütebilir. 7) İnteraktif tasarımlar oluşturabilir. 8) Web standartlarına dayalı web sitelerine uygulamak için beceri gösterir. 9) Uyarlanabilir, erişilebilir ve optimize edilmiş web siteleri tasarlar.
DERSİN VERİLİŞ BİÇİMİ
Yüz Yüze
DERSİN ÖNKOŞULLARI
Yok
ÖNERİLEN DERSLER
DERS TANIMI
Bu ders; kullanıcı arayüz tasarımı kavramı, bilgisayar, cep telefonu gibi farklı cihaz ve uygulamalara ilişkin yaratıcı, yenilikçi, sanatsal arayüz tasarımları, arayüz tasarımının bileşenleri, etkileşim, kullanırlık, okunurluk, erişilebilirlik konularını kapsamaktadır.
Derste amaç, öğrencilerin insan-bilgisayar etkileşimi ilkelerini yararlı, kullanışlı ve etkin kullanıcı arayüzlerine uygulayarak bir tasarım yaratmalarını sağlamak ve yüksek kaliteli, güncel tasarım yöntemlerine uygun interaktif, zengin içerikli web yayınları oluşturabilmek için temel bilgileri vermektir.
DERS İÇERİĞİ
HAFTA
KONULAR
1. Hafta
İnternet tarihi, Temel Protokoller, Dosya Formatları, Temel Kavramlar.
2. Hafta
HTML Kodlarına Giriş, HTML Kod Uygulamalarına Giriş.
3. Hafta
HTML Head Komutları, HTML Body Komutları, HTML Body Kodları ile yazılara tip, boyut, renk vermek, HTML Body Kodları ile metinleri ve resimleri düzenleme.
4. Hafta
HTML Body Kodları ile tablolar oluşturmak. HTML Form Elemanları, HTML kodları ile form oluşturma ve gönderme asp ya da php kodlarını ekleme.
5. Hafta
Web sitesinde CSS çeşitleri: tipografi, tutarlılık, renk ayarları, özgün Proje, uygulama.
6. Hafta
Dreamweaver HTML editörüne giriş, Adobe Dreamweaver CS6 programı arayüzü tanıtımı.
7. Hafta
Ara Sınav
8. Hafta
Properties Panelinde HTML ve CSS özellikleri kullanımı, Doküman içi bağlantı oluşturma, resim ekleme, resimde farklı yerlere bağlantı verme.
9. Hafta
Adobe Photoshop programında web için template hazırlama.
10. Hafta
Dreamweaver'da Tablo oluşturmak: Satır ve kolonlara içerik vermek, Hücrelere link vermek, Tablo menü hücrelerini buton olarak tasarlamak. Dreamweaver'da form oluşturma, form elemanları ekleme, spry kodları.
11. Hafta
Dreamweaver?da flash video ekleme, Iframe kodu ile sayfa içinde sayfa açarak farklı video paylaşım sitelerinden video çağırma.
12. Hafta
CSS uygulamaları ve div kodlarıi Lightbox uygulaması: portfolio çalışmalarını düzenleme.
13. Hafta
Hazır Java script ve CSS kodlarını head komutları alanına yerleştirme.
14. Hafta
Final Projesi Uygulaması
ZORUNLU YA DA ÖNERİLEN KAYNAKLAR
Sam Quayle, 2010, An Introduction to HTML Prototyping Jennifer Tidwell, A Pattern Language for HCI Design, http://www.mit.edu/~jtidwell/ Handcraft ? Online prototyping tool. Alternative to Codeanywhere TextMate ? Recommended code editor for Mac OS X E - TextEditor ? Recommended code editor for Windows When can I use? ? A good resource for checking browser compatibility of HTML and CSS features Code Academy ? Online course for learning programming basics with JavaScript Grover, C. ; Flash CS6: The Missing Manual, O?Reilly Media, 2012 Gümüştepe, Y.; Dreamweaver CS6; Kodlab Yayın Dağıtım, 2013
ÖĞRETİM YÖNTEM VE TEKNİKLERİ
Anlatım,Tartışma,Eğitim-Uygulama,Proje,Sunum
DEĞERLENDİRME YÖNTEMİ VE GEÇME KRİTERLERİ
Sayısı
Toplam Katkısı(%)
Ara Sınav
1
20
Uygulama/Pratik
1
20
Proje
1
40
Toplam(%)
80
Yıl İçinin Başarıya Oranı(%)
80
Finalin Başarıya Oranı(%)
20
Toplam(%)
100
AKTS İŞ YÜKÜ
Aktivite
Sayı
Süresi(Saat)
İş Yükü
Ara Sınav
1
1
1
Kısa Sınavlara hazırlık
Sınıf Dışı Ders Çalışma Süresi
14
3
42
Final Sınavına Hazırlık
1
5
5
Ders Saati
14
6
84
Ara Sınava Hazırlık
1
5
5
Laboratuvar
14
4
56
Final Sınavı
1
1
1
Ödevler
1
6
6
Proje
1
10
10
Toplam İş Yükü
210
Toplam İş Yükü / 30
7
Dersin AKTS Kredisi
6
DİL
Türkçe
STAJ / UYGULAMA
Yok
PROGRAM YETERLİLİKLERİ (P) / DERSİN ÖĞRENME KAZANIMLARI (Ö) MATRİSİ
