Dersin Katalog Tanımı:
Dersin temel amacı, öğrencilerin bir web sitesi tasarlayabilmeleri için gerekli donanıma sahip olmalarının sağlanmasıdır. Bu amaçla web sitesi tasarımında temel ilkeler, web sitesi tasarım süreci, stil sayfalarının ve şablonların kullanımı, dinamik web sayfaları oluşturma, web sayfalarında renk kullanımı, web ortamında içerik yönetimi, web kaynaklarının değerlendirilmesi, web sitelerinin dizinlenmesi ve üst veri, bilgi merkezi web siteleri, web sitelerinin kullanılabilirliği, web ortamında veri güvenliği konuları ders kapsamında ele alınmaktadır.
Değerlendirme Kriterleri
- Çevrim İçi Kitlesel Açık Ders (MOOC) Sertifikası (%20)
- Açıklama: Bu çalışmada ücretsiz olarak 100 farklı açık ders içeren Bilgeİş platformuna kayıt olarak Web Tasarımının Temelleri (HTML & CSS) dersini bitirip, sertifika almaya hak kazanılması gerekmektedir.
- Sertifika Teslim Şekli: GitHub hesabınızda açacağınız bby262sertifika adlı kod deposunun içine sertifika.pdf olarak yükleyiniz.
- Ara Sınav Projesi (%40)
- Açıklama: İstediğiniz herhangi bir CSS framework’ü (Bootstrap) kullanarak bir web sitesi geliştiriniz. Web sitesi güncel “Bilgi Bilim” konularından birini içerecek bir nitelikte olmalıdır. En az 6-7 sayfadan oluşan bir site olmalıdır. Tüm sayfalarda ortak bir harici dosyadan okunabilen navigasyon sistemi yer almalıdır.
- Teslim Şekli: Web sitenizi tüm dosya ve klasörleri ile GitHub hesabınızda açacağınız bby262arasinav adlı kod deposunun içine yükleyiniz.
- Final Projesi (%40)
- Konu: Bilgi Bilim alanı ile ilgili herhangi bir kavram Web sitesinin konusunu oluşturacaktır.
- Teslim Şekli: Web sitesi yunus sunucusundaki kendi alanınızda “webfinal” isimli klasörün altında yayınlanacaktır. Web sitesini oluşturan dosyaların bir kopyası elden teslim edilecektir ve teslim esnasında imza atılacaktır.
- Web sitesi masaüstü, tablet PC ve cep telefonlarından düzgün bir şekilde görüntülecek yapıda olmalıdır.
- Web sitesi Bootstrap ya da arzu ettiğiniz herhangi bir CSS Framework üzerine inşa edilecektir.
- Sitede navigasyonu sağlayan bölüm harici bir JS dosyasından okunacaktır.
- Facebook, Twitter, Instagram, Strava gibi sosyal medya portallarından bileşenler (Widget’lar) yerleştirilmelidir.
- Sitede bir iletişim formu oluşturulacaktır. Bu formda Google Form altyapısı kullanılacaktır.
- Site Google Custom Search Engine ile aranabilir olmalıdır (ör: www.bby.hacettepe.edu.tr).
- Google Translate butonu sitede yer almalı ve sitenin farklı dillere otomatik olarak çevrilmesi sağlanmalıdır.
- Web sitenizde bir Foto Albüm uygulaması olmalıdır.
- Web sitenizde Video portallarından eklenen bir video yer almadır.
- Opsiyonel: Web sitesinin istatistikleri Google Analytics ile toplanmalıdır. Google Analytics’den elde edilen rapor “analytics.pdf” adlı dosya ile sitenin ana klasöründe yer almalıdır ve teslim edilecek kopyanın içerisinde bulunmalıdır.
- Opsiyonel: Site Google Webmaster Tools portalı içinde tanımlanmış olmalıdır. Bu işlemin sorunsuz yapıldığına dair elde edilecek rapor “webmaster.pdf” adlı dosya ile sitenin ana klasöründe yer almalıdır ve teslim edilecek kopyanın içerisinde bulunmalıdır.
Ders Araçları
- Web Editörü Brackets: brackets.io/
- Google Web Designer: www.google.com/webdesigner/
- FileZilla: filezilla-project.org
- Hacettepe Üniversitesi Kişisel Web Sayfası Yayınlama Hizmeti
Ders Malzemeleri:
- w3schools.com
- HTML
- CSS
- JavaScript
- Bootstrap
- Foto Albüm Uygulamaları
- Video Eğitim Serileri (Youtube)
- Adobe Fireworks (Vektörel ve Bitmap tabanlı görsel editöri)
- Adobe Dreamweaver (Web editörü)
- Adobe Flash (Animasyon editörü)
- Adobe Photoshop (Fotoğraf editörü)
- Adobe Illustrator (Vektörel tabanlı çizim editörü)
- Adobe InDesign (Masaüstü yayıncılık editörü)
- Web Tasarımı Örnek Uygulama – Uygulama Dosyaları (Web001)
- Bootstrap Örnek Uygulama –
- Elektronik Kaynaklar
- Hacettepe Üniversitesi Kütüphane Kataloğunda yapılacak arama sonucunda birçok e-Kitap listelenmekte. Listeye erişmek için tıklayınız.
- Göz atılabilecek kaynaklar