Arayüz Geliştirme Dokümantasyonu

Proje: Nosab Web Sitesi

İş: Arayüz Geliştirme
Müşteri: Aeronorm

Index
1. Sayfalar
2. Renk Paleti
3. Tipografi
4. Kutu Modeli
5. Bileşenler
6. Kod ve Sayfa Yapısı
7. Responsive
8. Cross-Browser
1. Sayfalar
NOSAB projesinde; sabit sayfaların dışında 5 tip içerik sayfası bulunmaktadır. Site
menüsünde bulunan birçok sayfa, içerik sayfalarından türemiştir.

Sabit Sayfalar

- Anasayfa -> Slayt, Haber Listesi

- Etkinlikler -> Haber Listesi
- Mevzuat Sayfası
- Firma Detay Sayfası
- Firma Harita Sayfası
- Video Sayfası
- E-Bülten Sayfası
- İletişim Formu

İçerik Sayfaları

- İçerik Sayfası
- İçerik Listesi
- Açılır Menü İçeriği
- Tek Resim Sayfası
- Resim Listesi (galeri)
2. Renk Paleti
Tasarımlardan (psd) çıkartırlan 3 renk bulunmaktadır. Aşağıda “hex renk kodları”
görüntülenen bu 3 rengin dışında renk kodu uygulanmamıştır.

- 1. Renk: Yeşil, ana başlıklarda ve arkaplan olarak kullanılmakta.

- 2. Renk: Sarı, ‘hover’ ya da ‘active’ rengi olarak kullanılmakta.
- 3. Renk: Gri, metin rengi ya da border rengi olarak kullanılmakta.
- 4. Renk: Beyaz, daha çok koyu arkaplan rengi kullanıldığında, metin rengi
olarak kullanılmakta.

Renk kodları CSS dosyasında yorum alanında bulunabilir.

3. Tipografi

UYARI: Tasarımlarda (psd) kullanılan font; Colaborate ‘in internette bulunan

webfont kitlerinde Türkçe karakter desteği yoktur.

2 farklı kaynaktan indirilen Colaborate webfont’unda da TR karakter desteği

mevcut değildi. Aşağıda örnek kullanımı görebilirsiniz. Mevcut fontları, webfont
kullanımına çeviren araçlar çok sağlıklı çalışmadığı için, farklı işletim sistemi ve
tarayıcılarda render edilirken fontlar kırılmaya uğruyor. Bu sebeple kullanılmasını
istediğiniz fontun, webfont kit’ini sizden talep etmekteyiz.

Font sorununu geçici olarak, Google web font’u olan (ve colaborate’ye benzeyen)
Roboto font ailesini kullanarak çözdük. Google’ın kendi sitelerinde de kullandığı
bu fontun ince, normal ve kalın kullanımları mevcuttur.
 - Font Kullanımı

Site genelinde Roboto font ailesi kullanılmıştır. İstenilen webfont kiti geldiğinde

- Font Boyutları

Ana başlıklar : 32px (h1 - tüm alt sayfalarda yer alan ana başlık.)
Alt başlıklar : 28px (h2 - ana başlık dışındaki kullanımlar, örn: anasayfa haber başlıkları)
Metinler : 14px (p – tüm metinler)

- Metin Aralığı

Tüm satır aralıkları sabit; 1.428 ‘dir. (line-height: 1.428)

- Beyaz Zeminde Font Kullanımı

Arkaplanı beyaz olan yazılarda, ana renk (yeşil) kullanılmıştır. (color: #00b295)

- Renkli Zemin Font Kullanımı

Arkaplanı yeşil yada gri olan yazılarda, yazı beyaz renk kullanılmıştır.
4. Kutu Modeli
Öğelerin birbirine olan uzaklığını konu alan (CSS) tipografi kuralı ‘box modeling’in
NOSAB projesindeki CSS kullanım bilgileri aşağıdaki gibidir.

- Yan yana öğeler arası mesafe : 20px (tüm margin’ler 20px)

- İç içe öğeler arası mesafe : 20px (tüm padding’ler 20px)
Aşağıda gördüğünüz üzere; gelen tasarımlarda (psd) birden fazla ve farklı mesafe
alanları kullanılmış (17, 24, 26 vs.). Diğer sayfalarda da sabit bir değer bulunmadı.
Bu tipografi hatasını göz ardı ederek, tüm mesafeler 20 piksel’e eşitlendi.
5. Bileşenler
Kullanılan CSS bileşenlerinin listesi ve kullanım amaçları aşağıdadır.

- Normalize.css tüm projelerde kullanılması gereken, browser’dan gelen stilleri

resetlemeye yarayan bileşendir.

- Bootstrap.css içinde birçok özellik ve grid/kolon yapısı bulunan framework’tür.

- Font-awesome.css 400’den fazla ikonu font olarak barındıran, ikon yükünü

hafifleten font yapısının css dökümüdür.

- Fancybox.css linklerin ya da resimlerin popup olarak açılmasını sağlayan js bileşeninin

stil dosyasıdır.

- Style.css NOSAB projesinin tasarım ihtiyaçlarına özel kodlanan stil dosyasıdır.

Kullanılan JAVASCRIPT bileşenlerinin (jquery, components vs.) listesi ve kullanım

amaçları aşağıdadır.

- jQuery.js Populer javascript kütüphanesidir. Beraberinde birçok fonksiyonu getirir.

- Bootstrap.js En yaygın kullanılan web özelliklerini barındıran js kütüphanesidir.

- Nicescroll.js Ekrana sığmayan içerikler için özel tasarımlı tarayıcı scroll bileşeni.

- Fancybox.js linklerin ya da resimlerin popup olarak açılmasını sağlayan js bileşeni.

- Selectric.js select açılır menü form öğeleri için özel tasarım imkanı sağlayan bileşen.
Firma haritası sayfasındaki özel select tasarımı için kullanılıyor.

- Isotope.js Farklı boyutlardaki içerik kutularını belirli bir düzende hizalatmayı sağlayan
js bileşeni. Haber ve etkinlikleri listelerken kullanılıyor.
6. Kod ve Sayfa Yapısı
Sayfa yapısı 3 bölümden oluşmaktadır.

HTML Sayfa Yapısı

- header sayfanın title, meta etiketlerini ve css bileşenlerini barındıran head bölümü ile
sitenin ana menüsü’nün yüklendiği bölümdür.

- section sayfa içeriğinin yüklendiği bölümdür.

- footer sitenin js bileşenlerinin yüklendiği bölümdür. Bu bölümün metin içeriği olmadığı

için gizli tutulmaktadır.

PHP Sayfa Yapısı

Tüm sayfalara index.php tarafından yönlendirilir. Index.php’ye gönderilen page

parametresinin karşılığına göre dosya çağırılır. Örn: galeri.php sayfasına erişmek için;
index.php?page=galeri adresine girilmelidir.
7. Responsive
Siteyi, tüm ekran boyutlarında görüntülenebilir ve kullanılabilir kodladık. Yukarda bahsettiğimiz
tüm özellikler (tipografi, kutu modeli vs.), tüm ekranlarda da geçerlidir.

Duyarlı Ekran Senaryosu: Ekran genişliği 910 px’in altına düştüğünde; ana menü gizlenir ve site
içeriği dikey yerleşir. Tüm site içeriği tüm ekranlarda %100 görüntülenebilmektedir.

1920px Genişlik Görünümü: http://i.imgur.com/FB6M9dd.jpg

1280px Genişlik Görünümü: http://i.imgur.com/JBO8Tvx.png

768px Genişlik Görünümü: http://i.imgur.com/jusospg.png
600px Genişlik Görünümü: http://i.imgur.com/aqLkNci.png
320px Genişlik Görünümü: http://i.imgur.com/TpCttZq.png
Tablet Görünümü: Ana menü açık/kapalı senaryosu
8. Cross-Browser

Chrome - http://prntscr.com/4dzs6k

Firefox - http://prntscr.com/4dzt6u

Internet Explorer - http://prntscr.com/4dzsme

Safari - http://prntscr.com/4dzste

Opera - http://prntscr.com/4dztnf