Arayüz Geliştirme Dokümantasyonu

Transkript

1 Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme 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

2 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)

3 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 Renk: Yeşil, ana başlıklarda ve arkaplan olarak kullanılmakta Renk: Sarı, hover ya da active rengi olarak kullanılmakta Renk: Gri, metin rengi ya da border rengi olarak kullanılmakta Renk: Beyaz, daha çok koyu arkaplan rengi kullanıldığında, metin rengi olarak kullanılmakta. Renk kodları CSS dosyasında yorum alanında bulunabilir.

4 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.

5 - 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; 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.

6 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)

7 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.

8 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.

9 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.

10 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ü: px Genişlik Görünümü:

11 768px Genişlik Görünümü:

12 600px Genişlik Görünümü:

13 320px Genişlik Görünümü:

14 Tablet Görünümü: Ana menü açık/kapalı senaryosu

15 8. Cross-Browser Chrome - Firefox - Internet Explorer - Safari - Opera -