BBY 262 Web Tasarımı

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.

Ders Hakkında Genel Bilgiler:

  • Dersin Dönemi: 2016-2017 Bahar
  • Dersin Kodu: BBY 262
  • Dersin Günü ve Saati: Cuma, 13:30 – 16:30
  • Dersin Yeri: A Blok – 102
  • Dersin Sosyal Medya Etiketi: #BBY262
  • Devam: Derse devam zorunludur.

Değerlendirme Kriterleri

  • Haftalık Ödev ve dönem içi projeler: %40
    • Proje 1: Özgeçmiş sayfası
      Son Teslim Tarihi: 10 Mart 2017

      Teslim Şekli: yunus.hacettepe.edu.tr sunucusunda bulunan Web alanınıza FTP ile projenizi “proje01” olarak adlandırarak yükleyiniz. Yükleme işleminden sonra projenize erişim adresi örnekteki gibi olmalıdır.
      Ör: http://yunus.hacettepe.edu.tr/~omadran/proje01
      Açıklama:
      Bu çalışmada tek bir Web sayfası oluşturularak özgeçmiş yayınlanacaktır. Oluşturulacak Web sayfası içinde HEAD ve BODY bölümleri HTML içinde düzgün bir şekilde yer almalıdır. HEAD içerisindeki TITLE ve META (UTF8) etiketleri uygun şekilde kullanılmalıdır. Web sayfası resminizin de yer aldığı özgeçmişinizi içermelidir. Örnek sayfa için tıklayınız.
    • Proje 2: Özgeçmiş sayfasına CSS ekleme
      Son Teslim Tarihi: 
      17 Mart 2017
      Teslim Şekli: yunus.hacettepe.edu.tr sunucusunda bulunan Web alanınıza FTP ile projenizi “proje02” olarak adlandırarak yükleyiniz.
      Açıklama: Proje 1’e harici CSS ekleyiniz.
    • Proje 3: Bootstrap Tabanlı Web Sitesi
      Son Teslim Tarihi: 24 Mart 2017
      Teslim Şekli: yunus.hacettepe.edu.tr sunucusunda bulunan Web alanınıza FTP ile projenizi “proje03” olarak adlandırarak yükleyiniz. Yükleme işleminden sonra projenize erişim adresinizi bu dokümanda size ait olan satırdan paylaşınız.
      Ör: http://yunus.hacettepe.edu.tr/~omadran/proje03
      Açıklama: Bootstrap’in ilgili (http://getbootstrap.com/examples/sticky-footer-navbar/) temasını kullanarak 6-7 sayfadan oluşan bir Web sitesi tasarlayınız. Yardım videosu için tıklayınız.
  • Proje 4: CSS Framework (Bootstrap) & JS Menu
    • Son Teslim Tarihi: 7 Nisan 2017
    • Teslim Şekli: yunus.hacettepe.edu.tr sunucusunda bulunan Web alanınıza FTP ile projenizi “proje04” olarak adlandırarak yükleyiniz.
      Ör: http://yunus.hacettepe.edu.tr/~omadran/proje04
      Açıklama: Proje 3’de yer alan yapıya harici bir JS dosyasından navigasyonun çekilmesi ile oluşturulacak Web sitesinde içerik açısından da tatmin edici bir yapı beklenmektedir. Site en az 7-8 sayfadan oluşmalıdır.
  • Final Projesi: %40
    • Son Teslim Tarihi: Final projesi 12 Mayıs 2017 tarihinde teslim edilecektir.
    • 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 üzerinde yayınlanmayan, kopyası teslim edilmeyen ve imza atılmayan projeler değerlendirmeye alınmayacaktı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.
    • Web sitesi içerik olarak istenilen herhangi bir konuda olabilir. İçeriklerin orjinal olması gerekmektedir.
    • 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.
    • Google Translate butonu sitede yer almalı ve sitenin farklı dillere otomatik olarak çevrilmesi sağlanmalıdır.
    • 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.
    • 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ı

Ders Malzemeleri:

Örnek Çalışmalar: