Arayüz Geliştirme Dokümantasyonu

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "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ü: 1280px 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 -

Giriş Sayfası (index) Reklamı

Giriş Sayfası (index) Reklamı Giriş Sayfası (index) Reklamı Herhangi bir web tarayıcısında (İnternet Explorer, Chrome, Safari, Firefox, Yandex veya Opera) www.besiktasyasam.com URL si yazıldığında ilk açılan sayfadır. Siteye bu sayfa

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

Kurulum 14 FTP ye Bağlanmak ve Dosyaları Atmak 14 Veritabanı Oluşturulması ve Bağlanıp Kurulumun Tamamlanması 15

Kurulum 14 FTP ye Bağlanmak ve Dosyaları Atmak 14 Veritabanı Oluşturulması ve Bağlanıp Kurulumun Tamamlanması 15 vii 1 İçerik Yönetim Sistemi Nedir? 2 WordPress Nedir? 2 WordPress Kısa Tarihi 3 WordPress Gücünü Nereden Alıyor? 3 WordPress ile Neler Yapabiliriz? 4 Kişisel Blog 4 Kurumsal Blog 4 Kurumsal Site 4 Tanıtım

Detaylı

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 İÇİNDEKİLER VII İÇİNDEKİLER 1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 2 BOOTSTRAP CSS DOSYASININ İNCELENMESİ 5 Bootstrap

Detaylı

DIV KAVRAMI