VCD3112 Introduction to User Interface DesignBahçeşehir ÜniversitesiAkademik Programlar YAZILIM MÜHENDİSLİĞİÖğrenciler için Genel BilgiDiploma EkiErasmus BeyanıUlusal YeterliliklerBologna Komisyonu
YAZILIM MÜHENDİSLİĞİ
Lisans TYYÇ: 6. Düzey QF-EHEA: 1. Düzey EQF-LLL: 6. Düzey

Ders Tanıtım Bilgileri

Ders Kodu Ders Adı Yarıyıl Teorik Pratik Kredi AKTS
VCD3112 Kullanıcı Arayüzü Tasarımına Giriş Bahar 2 2 3 5
Bu katalog bilgi amaçlıdır, dersin açılma durumu, ilgili bölüm tarafından yarıyıl başında belirlenir.

Temel Bilgiler

Öğretim Dili: English
Dersin Türü: Non-Departmental Elective
Dersin Seviyesi: LİSANS
Dersin Veriliş Şekli: Yüz yüze
Dersin Koordinatörü: Dr. Öğr. Üyesi İPEK TORUN
Opsiyonel Program Bileşenleri: Yok
Dersin Amacı: Bu ders, öğrencileri etkin Web sayfası grafikleri tasarlama konusunda eğitmeyi amaçlamaktadır. Web geliştirme sürecinin analiz ve tasarım fazları, verilen projeler dahilinde uygulanacaktır.
Buna ek olarak, öğrenciler içerik üretme ve bu içeriğin grafik tasarımının hazırlanması gibi işler için yeni teknik bilgiler de alacaklardır.
Grup tartışması yolu ile yeni konspetler üretilmesi teşvik edilecektir.

Öğrenme Kazanımları

Bu dersi başarıyla tamamlayabilen öğrenciler;
1) Temel web teknolojileri tanımlamak
2) World Wide Web sağlayan internet teknolojileri tanımlamak
3) Web standartlarına dayalı web sitelerine uygulamak için beceri göstermek
4) Uyarlanabilir, erişilebilir ve optimize edilmiş web siteleri tasarlamak
5) HTML sayfaları oluşturmak için beceri göstermek
6) CSS kullanarak stili HTML sayfalarına becerileri göstermek
7) JavaScript'in olanakları ve sınırlarının tanımlamak
8) Web için multimedya içerik oluşturmak ve optimize etmek için beceri göstermek
9) Web sitesi tasarımlarında stardart tasarım şablonları kullanmak
10) Web tasarımında estetik ve kullanılabilirlik sorunları dengelemek için beceri göstermek

Dersin İçeriği

İlk bölüm öğrencilerin, görsel bir Web tasarımı yapmanın öncesinde, “Üst düzey tasarım kararları ve tasarım stratejisi” kavramını anlamaları, paydaş gereksinimlerini analiz ederek bir web sitesi için kavramsal model oluşturma sürecini kavramalarını hedeflemektedir.
İkinci bölümde web arayüzlerinin görsel tasarımına odaklanarak kavramsal modelde ortaya konan fikirlerin görselleştirilmesi ve paydaş gereksinimleri doğrultusunda açık dolaşım araçlarının tasarlanmasına ağırlık verilecektir. Öğrencilerin sayfa düzeni, renk kullanımı ve tipografi konularındaki mevcut bilgilerini web mecrasına taşımaları sağlanacaktır.
Üçüncü bölüm, web sitelerinin üretimi için gerekli olan teknik bilgilerin verilmesini amaçlar. Bu bilgiler içerisinde, animasyon araçları, hypertext dili ve grafiklerin optimizasyonu yer almaktadır.



Haftalık Ayrıntılı Ders İçeriği

Hafta Konu Ön Hazırlık
1) İlk toplantı: Derse giriş, ders ve öğrenci hedefleri üzerinde tartışma
2) Web'in kısa tarihi. Web teknolojileri ve internet altyapısının giriş. Ödev 1: Web sitesi analizi
3) HTML öğeleri, öznitelikleri ve belge yapısı. Egzersiz 1: Temel bir HTML sayfası oluşturma. Atama 1 sunumu. Ödev 2: Basit CV
4) CSS Giriş: Seçiciler, tablolar ve kaskad. Egzersiz 2: Atama 2 Styling. Ödev 3: Şekillendirici Egzersiz 1
5) Semantik HTML ve erişilebilirlik. CSS kutu modeli ve konumlandırma, niteliği ve sözde seçiciler. Kaynaklar: Bir web sayfasında görüntüleri kullanma. Proje 1: Tasarım şablonları
6) Kaynaklar: statik kaynaklara ve görüntü optimizasyonu. Proje 1 araştırma sunumları ve eleştirisi.
7) Graceful degradation ve duyarlı tasarım. CSS @ kuralları ve medya türleri. Proje 2: Portföy sitesi
8) JavaScript: programlama temelleri. Değişkenler, tipleri, diziler, karma ve işlevleri. 2. proje eleştirisi.
9) JavaScript: Document Object Model (DOM). 2 proje eleştirisi.
10) Javascript çerçeveler ve graceful degradation. Tarayıcı uyumluluğu. Proje 2 Tanıtım
11) HTML Formları. CSS ipuçları ve hileler. Final projesi
12) Metin kodlama. Dil özellikleri. Arama Motoru Optimizasyonu (SEO). Final proje eleştirisi.
13) EMbed edili Multimedya. Final proje eleştirisi.
14) Recap. Final proje eleştirisi.

Kaynaklar

Ders Notları / Kitaplar: Will be distributed weekly
Diğer Kaynaklar: 1) ISO-9241-151 Ergonomics of human-system interaction — Part 151: Guidance on World Wide Web user interfaces
2) Sam Quayle, 2010, An Introduction to HTML Prototyping
3) Jennifer Tidwell, A Pattern Language for HCI Design, http://www.mit.edu/~jtidwell/
4) Handcraft — Online prototyping tool. Alternative to Codeanywhere
5) TextMate — Recommended code editor for Mac OS X
E - TextEditor — Recommended code editor for Windows
Mozilla Developer Network — HTML, CSS and JavaScript reference
6) When can I use… — A good resource for checking browser compatibility of HTML and CSS features
7) A List Apart — Recommended reading on web technologies
Course slides — The presentation I use in class
FontSquirrel — Good resource for web-ready fonts and home of the @font-face generator
8) Google Web Fonts — Web fonts served by Google for free
Code Academy — Online course for learning programming basics with JavaScript
9) InVision — Web bsed tool for building image-based mock-ups

Değerlendirme Sistemi

Yarıyıl İçi Çalışmaları Aktivite Sayısı Katkı Payı
Uygulama 8 % 15
Küçük Sınavlar 1 % 5
Ödev 2 % 40
Final 1 % 40
Toplam % 100
YARIYIL İÇİ ÇALIŞMALARININ BAŞARI NOTU KATKISI % 60
YARIYIL SONU ÇALIŞMALARININ BAŞARI NOTUNA KATKISI % 40
Toplam % 100

AKTS / İş Yükü Tablosu

Aktiviteler Aktivite Sayısı İş Yükü
Ders Saati 14 56
Sınıf Dışı Ders Çalışması 13 44
Ödevler 8 16
Küçük Sınavlar 1 4
Final 1 4
Toplam İş Yükü 124

Program ve Öğrenme Kazanımları İlişkisi

Etkisi Yok 1 En Düşük 2 Düşük 3 Orta 4 Yüksek 5 En Yüksek
           
Dersin Program Kazanımlarına Etkisi Katkı Payı
1) Karmaşık mühendislik problemlerine yönelik yazılım proje, süreç ve ürünlerine ait fonksiyonel ve fonksiyonel olmayan özellikleri tanımlayabilmek.
2) Karmaşık mühendislik problemlerinde yazılım mimarisi, bileşenleri, ara yüzleri ve sisteme ait diğer alt bileşenleri tasarlayabilmek.
3) Kodlama, doğrulama, sınama ve hata ayıklama konularını da içerecek şekilde karmaşık yazılım sistemleri geliştirebilmek.
4) Karmaşık mühendislik problemlerinde yazılımı, programın davranışlarını beklenen sonuçlara göre sınayarak doğrulayabilmek.
5) Karmaşık yazılım sistemlerinin çalışması sırasında, çalışma ortamının değişmesi, yeni kullanıcı istekleri ve yazılım hatalarının ortaya çıkması ile meydana gelen bakım faaliyetlerine yönelik işlemleri yapabilmek.
6) Karmaşık yazılım sistemlerinde yapılan değişiklikleri izleyebilmek ve kontrol edebilmek, entegrasyonunu sağlayabilmek, yeni sürümlerini sistematik olarak planlayabilmek ve riskleri yönetebilmek.
7) Disiplin içi ve disiplinler arası takımlarda görev alarak karmaşık yazılım sistemleri yaşam süreçlerini tanımlayabilmek, değerlendirebilmek, ölçebilmek, yönetebilmek ve uygulayabilmek.
8) Karmaşık mühendislik problemlerinde gerçekçi kısıtlar ve koşullar altında yazılım gereksinimlerini toplama, yazılımı tasarlama, geliştirme, sınama, bakımını yapma konularındaki çeşitli araçları ve yöntemleri kullanabilmek.
9) Temel kalite metrikler tanımlayabilmek, yazılım yaşam döngüsü süreçlerini uygulayabilmek, yazılım kalitesini ölçebilmek, kalite model karakteristiklerini tanımlayabilmek, standartları uygulayabilmek ve bunları karmaşık yazılım sistemlerini analiz etmekte, tasarlamakta, geliştirmekte, doğrulamakta ve sınamakta kullanabilmek.
10) Yazılım mühendisliği ile ortak sınırlara sahip olan matematik, fen bilimleri, bilgisayar mühendisliği, endüstri mühendisliği, sistem mühendisliği, ekonomi, yönetim ve sürdürülebilir kalkınma gibi diğer disiplinler hakkında teknik bilgi kazanabilmek ve bunlar aracılığıyla yenilikçi fikirleri karmaşık mühendislik problemlerinde ve girişimcilik faaliyetlerinde kullanabilmek.
11) Yazılım mühendisliği kültürü ve etik anlayışını kavrayabilmek ve bunları yazılım mühendisliğinde uygulayabilecek temel bilgilere sahip olmak, meslek hayatı boyunca gerekli teknik becerileri öğrenip başarıyla uygulayabilmek.
12) Yabancı dil ve Türkçe kullanarak etkin rapor yazabilmek ve yazılı raporları anlayabilmek, tasarım ve üretim raporları hazırlayabilmek, etkin sunum yapabilmek, açık ve anlaşılır talimat verebilmek ve alabilmek.
13) Mühendislik uygulamalarının evrensel ve toplumsal boyutlarda sağlık, çevre ve güvenlik üzerindeki etkileri ve çağın mühendislik alanına yansıyan sorunları ile mühendislik çözümlerinin hukuksal sonuçları hakkında bilgi sahibi olmak.