SAYI 12 Nisan - Haziran 2013

Arayüz Geliştirme Dokümantasyonu
Proje:
İş:
Müşteri:
Nosab Web Sitesi
Arayüz Geliştirme
Aeronorm
Index
1.
2.
3.
4.
5.
6.
7.
8.
Sayfalar
Renk Paleti
Tipografi
Kutu Modeli
Bileşenler
Kod ve Sayfa Yapısı
Responsive
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
Etkinlikler
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)
-> Slayt, Haber Listesi
-> Haber Listesi
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