İNTERNET VE ARAYÜZ TASARIMI I

GİT326

Ders Kodu: GİT326
Yarıyıl: Altıncı Yarıyıl (Bahar)
Teori+Uygulama: 2 + 2
AKTS: 6

Dersin Türü

Zorunlu

Dersin Düzeyi

Lisans

Dersin Yılı

Dersin Yarıyılı

Altıncı Yarıyıl (Bahar)

AKTS

Öğretim Eleman(lar)ı

Öğretim Görevlisi Utku Gökcan

Öğrenme Kazanımları

Bu dersin sonunda öğrenciler;

Temel web teknolojileri tanımlar.
HTML sayfaları oluşturmak için beceri gösterir.
Arayüz tasarımında arayüzün ne olduğunu ve hangi kriterlerin önemli olduğunu tanımlayabilir.
Bir web sitesi için kavramsal model oluşturma sürecini kavrar.
Sayfa düzeni, renk kullanımı ve tipografi konularındaki mevcut bilgilerini web mecrasına taşır.
Bir web sayfasının yaratım sürecini planlayıp ve yürütebilir.
İnteraktif tasarımlar oluşturabilir.
Web standartlarına dayalı web sitelerine uygulamak için beceri gösterir.
Uyarlanabilir, erişilebilir ve optimize edilmiş web siteleri tasarlar.

Veriliş Biçimi

Yüz Yüze

Önkoşullar

Yok

Önerilen Dersler

Ders Tanımı

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 İçeriği

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ı

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

Öğretim Yöntemleri

Anlatım
Tartışma
Eğitim-Uygulama
Proje
Sunum

Değerlendirme

	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üre (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	2	28
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	3	42
Final Sınavı	1	1	1
Ödevler	1	4	4
Proje	1	10	10
Toplam İş Yükü			180
Toplam İş Yükü / 30			6
Dersin AKTS Kredisi			6

Dil

Türkçe

Staj / Uygulama

Yok

Program Yeterlilikleri / Öğrenme Kazanımları

	Ö1	Ö2	Ö3	Ö4	Ö5	Ö6	Ö7	Ö8	Ö9
P1	X
P2	X
P3	X
P4			X
P5				X
P6				X	X
P7	X
P8						X	X	X	X
P9			X	X
P10				X					X
P11		X							X
P12	X
P13	X			X
P14	X
P15									X
P16				X
P17						X
P18					X
P19		X

	Ö1	Ö2	Ö3	Ö4	Ö5	Ö6	Ö7	Ö8	Ö9
P1	X
P2	X
P3	X
P4			X
P5				X
P6				X	X
P7	X
P8						X	X	X	X
P9			X	X
P10				X					X
P11		X							X
P12	X
P13	X			X
P14	X
P15									X
P16				X
P17						X
P18					X
P19		X

	Ö1	Ö2	Ö3	Ö4	Ö5	Ö6	Ö7	Ö8	Ö9
P1	X
P2	X
P3	X
P4			X
P5				X
P6				X	X
P7	X
P8						X	X	X	X
P9			X	X
P10				X					X
P11		X							X
P12	X
P13	X			X
P14	X
P15									X
P16				X
P17						X
P18					X
P19		X

	Ö1	Ö2	Ö3	Ö4	Ö5	Ö6	Ö7	Ö8	Ö9
P1	X
P2	X
P3	X
P4			X
P5				X
P6				X	X
P7	X
P8						X	X	X	X
P9			X	X
P10				X					X
P11		X							X
P12	X
P13	X			X
P14	X
P15									X
P16				X
P17						X
P18					X
P19		X