bildirgec.org - genaro flores - beğendikleri

Yeni bir blog network: andlog.com

genaro flores — Fri, 04 Dec 2009 11:50:00 GMT

İnceleyebildiğimiz kadarı ile andlog.com genel anlamda bir blog servisi. Yani üye olan kişilere kendilerine ait blog oluşturma imkanı veren bir sistem. Fakat Üye olan kişi blog açmak zorunda değil, sadece bir üyelik de alabiliyor ve diğer kullanıcılarla etkileşime girebilip, mesajlaşabiliyorlar. Blog açmak isteyenler de üç adet blog açma hakkında sahip. Kullanıcılar tek bir üyelik ile üç adet blogu kontrol edip yönetebiliyorlar.

andlog.com

andlog.com, dünyada en çok kullanılan blog yazılımı wordpress'i kullanıyor. Ayrıca wordpress üzerinde geliştirilmiş bir yazılım olan buddypress ile entegre ve bu iki sistem sosyal etkileşimi tamamlayarak, hem kişisel yazılarınızı yayımlayabilmeyi, hem de başkalarını ve yazdıklarını takip etmenizi kolaylaştırıyor.

andlog.com, wordpress için geliştirilmiş tüm temaları kullanabilecek durumda gözüküyor. Blogcu.com'a rakip gibi duran andlog.com yeni temalar ve eklentilerle sosyal medyanın gücünü bolca hissetirdiği bugünlerde bloggerlar için yeni bir kullanım sahası olabilir gibi gözükmekte.

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

BadVista.org

genaro flores — Wed, 20 Dec 2006 12:03:00 GMT

badvista.org

Boston, USA da merkezi bulunan The Free Software Foundation (FSF) isimli Özgür Yazılım Vakfı "yeter kullanıcıları bu kadar sömürdüğün!" diyor, Vista'ya karşı bu siteyi kurarak, Microsoft'un ticari amaçlarını eleştiriyor ve Vista'yla savaşıyor. Ne kadar başarılı olur bilinmez..

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

WordPress 2.1 Duyuruldu: Ella

genaro flores — Wed, 24 Jan 2007 06:04:00 GMT

Wordpress.org ye Matt 'in gönderdiği bu yazıya göre neler getiriyor kısaca bakarsak:

Herhangi bir şekilde yazdıklarınızın kaybolmaması için otomatik kayıt.
Editör de görsel ve html kodları arasında geçiş yapabilme.
Yazım denetleyici.
Arama motorları için güvenlik önlemleri, bu sayede Google gibi ara motorların sizi pinglememesi veya indexlenmemesini sağlayabilme. (kim ister?)
Oluşturduğunuz herhangi bir sayfayı anasayfa olarak atayabilme.
Database iyileştirmesi sayesinde hızda ve efektiflikte artış.
Bağlantılar kısmına alt kategori desteği ve kolay kategori ekleme.
Giriş ekranı yeniden tasarlandı.
Daha fazla AJAX sayesinde moderasyon sisteminde, silme işlemlerinde hız artışı, yorumlar kısmında anında onaylama.
Sayfaları taslak olarak kayıt edebilme.
Admin panelinde yapılan iyileştirme ile daha hızlı ve görsel bir arayüz.
Admin panelindeki giriş kısmındaki RSS beslemelerinin arkaplanda çalışarak daha hızlı gelmesi.
Yorumlar RSS beslemesinin tüm yorumları kapsaması, eskisi gibi sadece son 10 yorumu değil.
Sağdan sola yazılan dilleri desteklemesi, bu sayede daha da uluslararası bir yapıya kavuşması.
Yükleme yöneticisi ile yüklediğiniz resimleri, vidyoları ve sesleri daha kolay yönetebilme.
Yeni bir Akismet eklentisi.
Vatana millete hayırlı olsun, sabırsızlıkla bekliyoruz artık..

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Wordpress 2.1 Uyumlu Eklentiler

genaro flores — Sun, 28 Jan 2007 08:33:00 GMT

Eğer wordpress blogunuzu 2.1 sürüme yükseltmek istiyorsanız, öncelikle database yedeğini almanız ve kullandığınız eklentilerinizin bu liste 'de olup olmadığını kontrol etmeniz gerekir, yapabiliyorsanız uyumlu hale getirmelisiniz.

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Onlarsız Yapamayacağınız 20 Tipografi Uygulaması

genaro flores — Sat, 21 Feb 2009 08:13:00 GMT

Typechart

Typechart uygulaması ile CSS kodunu incelerken aynı zamanda çeşitli web tipografi örnekleri arasında gezinebilirsiniz. Tüm tipografi stilleri arasında gezinebilir ve ilgilendiğiniz tipografinin CSS kodunu indirebilirsiniz. Eğer siz de farklı tipografi örnekleri ile ilgileniyor ancak çapraz tarayıcı uyumlu kod yazmak için saatler harcamak istemiyorsanız, bu araç oldukça işinize yarayacaktır.

CSS Type Set

Bu mükemmel araç üzerinden ilgilendiğiniz metni girebilir ve ardından yüzlerce farklı CSS tercihleri üzerinde değişiklikler ypabilirsiniz. İstediğiniz sonuca ulaştığınızda ise tek yapmanız gereken şey, sunulan CSS kodunu kopyalayıp siteniz üzerinde kullanmak.

Typetester

Typetester çevrimiçi bir uygulama olup üç adede kadar yazı tipini karşılaştırmanıza ve beğendiğiniz yazı tipine daha kolay karar verebilmenizi sağlıyor. Uygulamanın ana amacı web tasarımcılarının hayatlarını daha da kolaylaştırmak.

STC font BROWSER

Bu uygulama aracılığı ile farklı yazıtiplerini kullanarak dilediğiniz metnin ilgili yazı tipi üzerinde nasıl görüneceğini inceleyebilirsiniz.

Font Tester

Font Tester, ücretsiz bir yazı tipi karşılaştırma aracıdır. Uygulama üzerinden farklı yaztiplerini yan yana getirip karşılaştırabilir ve sonuç üzerine CSS kodları uygulayarak sonucu eş zamanlı olarak görebilirsiniz.

CSSTXT

CSSTXT, CSS ile metin blokları oluşturup onların stillerini yönetebilmenizi sağlıyor. letter-spacing, word-spacing, font-size, line-height, border, font-family, align ve color özelliklerinden birini seçmeniz mümkün.

WhatTheFont

Daha önce hiç herhangi bir basılı ya da görsel malzeme üzerinde gördüğünüz bir metinde kullanılan yazı tipinin ne olduğunu merak ettiğiniz mi? Artık bu uygulama ile bu sorun olmaktan çıkıyor. Yazı tipini öğrenmek istediğiniz metnin görselini siteye gönderin ve çok kısa bir süre içerisinde kullanılan yazı tipinin ne olduğunu öğrenin. Mükemmel!

Font Picker

Bu basit uygulama sisteminizde kurulu olan tüm yazıtiplerini gösteriyor ve üzerinde çalıştığınız proje için en uygun yazı tipini belirlemenize yardımcı oluyor.

Wordle - Güzel Kelime Bulutları

Wordle, uygulamaya sunduğunuz metin üzerinden kelime bulutları oluşturabilmenizi sağlıyor. Metin üzerinde daha sık kullanılan kelimeler, kelime bulutu üzerinde daha belirgin hale geliyorlar. Bulutunuz üzerinde farklı yazıtipleri, anahatlar ve renk şemaları kullanarak özelleştirme yapmanız da mümkün.

Typotheque - Yüksek Çözünürlüklü Yazı tipi Testçisi

Sadece site üzerinden satın alabileceğiniz yazıtipleri ile sınırlı olan bu uygulama aracılığı ile yazıtiplerinize farklı stiller uygulayabilir ve çıktısını PDF biçiminde alabilirsiniz.

Linotype Yazı tipi Bulucusu

WhatTheFont uygulamasının aksine bu uygulama bulmaya çalıştığınız ya da kullanmak istediğiniz yazı tipi ile ilgili size bir dizi soru yöneltiyor ve ardından size bazı yazıtiplerini öneriyor.

Font Burner

Font Burner web sitelerine yönelik bir iyileştirmeleri olup web sitenize kolayca yeni yazıtipleri dahil edebilmenizi sağlıyor. Web siteleri genellikle tüm bilgisayarlar üzerinde gelen yazıtipleri ile sınırlıdırlar. Font Burner işte bu sorunu ortadan kaldırarak, sitenize ekleyeceğiniz birkaç satırlık bir kodun ardından dilediğiniz yazı tipini kullanabilmenizi sağlıyor.

sIFR

sIFR uygulamasının kullandığı yöntem Font Burner ile benzerlik taşıyor. Bu kod yardımı ile siteniz üzerinde hem dilediğiniz yazı tipini kullanabilme özgürlüğüne sahip olacaksınız, hem de arama motoru optimizasyonundan, erişilebilirlikten ya da kodunuzun kalitesinden ödün vermeyeceksiniz.

Identifont

Typotheques benzeri bir uygulama olan Identifont ile birkaç soruyu yanıtlayarak çeşitli yazı tipi önerilerine ulaşabilirsiniz. Uygulama ayrıca ilgili yazı tipinin kullanıldığı örnek bir metni de gösteriyor.

TypeNavigator

İnteraktif görsel yazı tipi arama motoru TypeNavigator, özellikle kullanmak istediğiniz yazı tipi stilinin aşağı yukarı nasıl olduğunu bilen tasarımcılara ilgili stile en yakın yazı tipi örneğini sunarak yardımcı olmayı hedefliyor. Açıklama size karmaşık gelmiş olabilir ancak siteyi kullanması oldukça kolay ve anlaşılır. Girin ve kendiniz test edin.

PXtoEM Conversion

Her ne kadar uygulamanın adı pixel'den em'e dönüştürücü olsa da uygulamanın kendisi bundan çok daha fazlasını sunuyor. Sayfanın üzerinde yer alan Convert (dönüştür) düğmesine tıklayın ve ardından body yazı tipi boyutunu seçin. Site verdiğiniz bu bilgiler ışığında size tüm dönüştürme verilerini sunuyor. Ardından sayfanın en üst kısmında yer alan CSS düğmesine tıklayarak ilgili örneğin CSS kodunu alabilirsiniz.

EM Hesaplayıcı

Em Calculator küçük bir JavaScript aracı olup özellikle genişletilebilir ve erişilebilir CSS tasarımları oluşturabilmenizi sağlıyor.

Baseline Rhythm Calculator

Temel yazı tipi boyutunu pixel değerinde girin ve adından temel satır yüksekliğinizi yine pixel değerinde girin. İlgili uygulama üzerindeki metin girdiğiniz veriler ışığında otomatik olarak değişecek ve sizin için bir CSS kodunu da otomatik olarak oluşturacaktır. Sırf eğlenmek için yazı tipi boyutu kısmına 99999999 girin ve ardından font-size kutusunu bulmaya çalışın.

Fontifier

Fontifier, bilgisayarda yazdığınız yazılarda kendi el yazınızı kullanabilmenizi sağlıyor. Site, el yazınızla yazılmış bir metnin taranmış bir örneği üzerinden kullanılabilir bir yazı tipi dosyası oluşturuyor, ve siz tıpkı Helvetica ya da Arial gibi sitenin oluşturduğu yazı tipini de projelerinizde kullanabiliyorsunuz.

Font Editor Bitfont Maker

BitfontMaker uygulaması üzerinden kendi yazı tipinizi oluşturabilirsiniz. Eğer siz de bu tip benzeri yazı tipi oluşturma araçları ile haşır neşir değilseniz, kullanımı oldukça kolay olan bu uygulamayı seveceksinizdir.

Kaynak: Speckyboy Design Magazine

Web Araçları Üzerine Yazdığım Diğer Yazılar

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

flash gallery

genaro flores — Wed, 28 Nov 2007 16:33:00 GMT

flashgallery fotoğraf galerileri kulvarında kullanabileceğiniz güzel bir flash tabanlı galeri. boyutu sadece 11 kb olan flash galerinin sitesinde nasıl kullanılması gerektiğini anlatan sayfası, demo sayfası bir de blog sayfası bulunuyor.

tamamen ücretsiz olan flash galeriyi download sayfasından edinebilirsiniz.

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Online CSS Sözlüğü

genaro flores — Sun, 01 Feb 2009 08:09:00 GMT

css-Özellikler indexi

Web Tasarımda tablosuz kodlamaya geçildiğinden beri yani şu bizim css teknolojimizin yaygınlaşmasından bu yana bildirgeçte o kadar büyük yol katettik kl bildirilerimizin çoğu neredeyse css siz olmaz oldu ... sağolsun yazar arkadaşlar bizlere css hakkında haberdar olmamamız gereken konuları teker teker belirttiler fakat hala yeni şeyler bulabilmeleri çok güzel :)
bende bugün sizlere css'te takıldığınız noktaları anında sorgulayabileceğiniz ve css kitaplarına göz atmanıza gerek kalmadan aradığınız css kodunun ne işe yaradığını ve kullanım şeklini kolayca bakabileceğiniz bir sözlük paylaşmak istiyorum , daha doğrusu bir tür online css indexi bu sayfaya buradan ulaşabilirsiniz... All CSS properties index Brian Wilson tarafından bizlere sunulmuş...

css-seciciler

Sitede ayrıca CSS seçicilerin özellikleri , css hataları ve css'in geçmişindeki Explorer uyumlarına da yer verilmiş , tasarımı biraz sade olsa da css için bizlere güzel bir derleme diyebilirim elimizin altında bulunması gereken linklerden biri ;)

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcıları İçin Kullanışlı 12 CSS Framework'ü, Şablonu ve Kod Sitesi

genaro flores — Fri, 23 Jan 2009 09:33:00 GMT

"Eğer düzenli olarak web siteleri oluşturan ve geliştiren kişilerden biriyseniz, o zaman şablon (template) oluşturma, kullanışlı kodları arşivleme ve bunun gibi diğer şeyler hakkında düşünmeye başlamalısınız. Özellikle bu gibi şeyleri geliştirme işlemi süresini kısaltmak için yapmalısınız, bu sayede her yeni bir proje başlangıcında bu şablon üzerinde gerekli değişiklikleri yaparak aynı şeyleri tekrar tekrar yazmak zorunda kalmazsınız. Ancak bu tip kod parçacıklarını ya da başkaları tarafından hazırlanmış eserleri projenizde kullanmaya başlamadan önce mutlaka ama mutlaka indirdiğiniz ürünün lisans sözleşmelerini okuyun... Pek çok geliştirici ve tasarımcı, Internet üzerinden ücretsiz olarak dağıttıkları içeriği çoğunlukla bireysel kullanımlar için ücretsiz, kurumsal kullanımlar için ücretli olarak yayımlarlar.

Yazımın devamında kendimce en iyilerin en iyilerini derlediğim ve web tasarımcıları için gerçekten kullanışlı 12 css framework'ünü, şablonunu ve kod sitesini bulacaksınız.

1. CSSTidy

"CSSTidy açık kaynaklı bir CSS bölümleyicisi ve optimize edicisidir. Komut satırı üzerinden kontrol edilebilen ve Windows, Linux ve Mac için ayrı ayrı sürümleri bulunan bu uygulamanın ayrıca bir PHP betiği de bulunuyor. Gerek masaüstü yazılımı gerekse de PHP betiği aşağı yukarı aynı özelliklere sahip.

Pek çok diğer CSS bölümleyicisinin aksine herhangi bir kurallı ifadenin kullanılmamış olması, tam CSS2 desteği ve yüksek kararlılığı ile CSSTidy, benzerlerinden ayrılıyor."

Bu bilgiyi kendi siteleri üzerinden çevirdim, zira her şeyi benim açıklayabileceğimden çok daha iyi özetlemiş.

Bazı insanlar derhal şu soruyu sorabilirler: Neden CSS kodumu optimize etmeliyim? Sadece kodunuzun daha temiz olmasının yanısıra ilgili kodları yüklediğiniz sayfaların daha hızlı açılması gibi nedenler hem ziyaretçilerinizi hem de sizi memnun edeceğinden, kodunuzu optimize etmemeniz için herhangi bir sebep bulunmamaktadır.

2. Clean CSS

Bu da CSS Tidy ile benzer işi yapmasına rağmen daha güzel görünüyor. Benim iyi tasarımlara olan ilgim ağır bastığı için ben bu aracı tercih ediyorum. Ancak seçim sizin! Kendi favorinizi seçin, ve dilerseniz nedenleri ile birlikte yorumlarınızı yazın.

3. BluePrint CSS

Daha önce BluePrint CSS Framework'ü hakkında yazdığım detaylı makaleyi eğer hala okumadıysanız hemen şimdi bir göz atmanızı şiddetle öneririm. BluePrint bir CSS Framework'ü olup CSS geliştirmek için harcadığınız zamanı kısaltmayı hedeflemektedir. BluePrint CSS Framework'ü, kullanımı kolay ızgara sistemi, işlevsel tipografisi ve hatta yazıcı çıktısı için ayrı bir stil şablonu ile projelerinizi üzerine inşa etmeniz için mükemmel bir temel sunar."

Çok kullanışlı şablon dosyaları sayesinde aynı şeyi tekrar tekrar kodlamanın önüne geçerek, zamanınızı tasarıma ve projenizin işlevselliğine odaklamanız, BluePrint CSS Framework'ü sayesinde artık mümkün.

Eğer siz de popülerliği gittikçe artan bu Framework hakkında ayrıntılı bilgi sahibi olmak ve nasıl kullanılacağını öğrenmek istiyorsanız, o zaman BluePrint CSS Framework'ü Nasıl Kullanılır başlıklı yazımı mutlaka okuyun.

4. Code-Sucks

Pek çok farklı CSS anahattı (CSS layout), kod parçacıkları (CSS, JavaScript, PHP) ve web site şablonlarını (template) içeren bu site özellikle web geliştirme aşaması sırasında oldukça kullanışlı hale geliyor.

5. Snipplr

Snipplr özellikle pek çok kod parçacığını (JavaScript, HTML, PHP, CSS, Ruby) depolamak ve organize etmek için çok kullanışlı bir araç. Özellikle bu kod parçacıkları, sizin de tahmin edeceğiniz üzere web geliştirme aşaması sırasında oldukça kullanışlı hale geliyor. Ayrıca site üzerinden dilediğiniz kod parçacıklarını da paylaşmak mümkün olduğundan arkadaşlarınızla paylaşmak istediğiniz kod parçacıklarını site üzerinde depolayabiliyorsunuz. Sitenin "popüler kod parçacıkları" bölümü herkes tarafından en çok kullanılan kod parçacıklarını listeliyor. Gerçekten muhteşem. Son olarak eğer TextMate kullanıyorsanız bu kod parçacıklarının TextMate ile çalıştığını da hatırlatalım.

6. MaxDesign

Bu siteyi belki de biliyorsunuzdur, sanırım bu siteden daha önce bahsetmiştim, ancak durum öyle olsa bile bu site tekrar tekrar bahsedilebilecek kadar güzel ve gerçekten kullanışlı bir site.

Site üzerinde listamatic1 adı verilen ve tek bir listeyi farklı şekillerden nasıl stilleyebileceğinizi gösteren bir uygulamanın yanısıra içiçe geçmiş listelere yönelik stilleme örnekleri de listamatic2 adı altında toplanmış. Özellikle CSS tabanlı listeler, yaslanmış CSS elementleri ve CSS seçicilerini kullanmak isteyenler için birebir!

7. MeyerWeb CSS Reset

Eric Meyer'in CSS Sıfırlaması çok popüler. Tarayıcınızın öntanımlı stilleme elementlerini sıfırlamak ve ardından kendi elementlerinizi üzerine inşa etmek için birebir olan bu CSS sıfırlama tekniği gerçekten pek çok tarayıcı kaynaklı sorunu gidermenizi kolaylaştırıyor.

8. YUI Library

"Her bir YUI kütüphane bileşeni, 300'ün üzerinde örneği de içeriyor ve siz bu sayede ilgili bileşenin projelerinize nasıl entegre edilebileceğini anlıyorsunuz. Bu örnekler YUI'yi öğrenebilmeniz için bir başlangıç noktası özelliğini taşıyor ve sunulan kod parçacıkları kendi programlamanızı üzerine inşa edebilmenizi kolaylaştırıyor. Dilerseniz çeşitli etkileşim öğelerinin web tarayıcısı üzerinden YUI aracılığı ile nasıl etkinleştirildiğini de örnek kodlara bakarak görebilirsiniz."

Başlangıç aşamasında çok kullanışlı şablon dosyalarının yanısıra neredeyse her web tasarımcısını tatmin edecek güzel bir kolleksiyona da sahip olacaksınız.

9. 960 Grid System

Bu ızgara sistemi gerçekten oldukça popüler hale geliyor. Geliştiricileri sık olarak kullanılan ölçülerden biri olan 960px genişliğinde web sayfaları hazırlayıp onu 12lik ve 16lık ızgaralar halinde bölümlendirerek içeriğinizi yerleştirebilmenizi sağlıyor. Tasarımcılar sitelerin harmonisini bozmamak ve kullanılırlığı arttırmak için ızgara sistemlerini kullanırlar. 960 Izgara Sistemi'ni indirdiğinizde bir dizi şablon ve taslağa da kavuşacaksınız. Bu örnekler özellikle doğru eller tarafından işlendiğinde harikalar yaratabiliyor.

10. SenCSS - Sensible Standards CSS Framework

Bu framework, Eric Meyer'in sıfırlama sistemini kullanıyor, ancak bunun dışında temel stilleme, yeniden sıfırlamaya gerek bırakmayacak şekilde optimize edilmiş kod ve çok daha fazlasını sunuyor. Kendisini layout dışındaki her şey için CSS framework'ü olarak tanıtmış olan ve site anahatları standart dışı olduğu için ya da herhangi bir sebeple ızgara sistemlerini kullanmak istemeyenlerin isteklerine cevap verecek nitelikte.

11. Yuvarlatılmış CSS Köşeler

Eminim bugüne kadar yarısı bildirgec üzerinde olmak üzere pek çok platformda CSS ile nasıl yuvarlatılmış köşeler hazırlanabileceğine dair pek çok rehber okumuşsunuzdur. Bu çevrimiçi araç sayesinde yuvarlatılmış köşeleri kolayca oluşturabilecek ve ihtiyacınız olan kodu derhal alabileceksiniz.

12. Content With Style

Yeni web sitelerini kolayca geliştirip tasarımınız üzerine odaklanabileceğiniz güzel bir framework kolleksiyonu daha.

Umarım bu siteleri hem yeteneklerinizi geliştirmek hem de projelerinizin geliştirme sürecini kısaltmak adına düzenli olarak kullanırsınız. Eminim yukarıdakilerin dışında daha pek çok site bulunuyor. Eğer sizin de tavsiye ettiğiniz siteler var ise, yorumlarınızla paylaşabilirsiniz.

Kaynak: 1st Web Designer

CSS İle İlgili Daha Önce Yazdığım Yazılar

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımında Boşlukları Verimli Olarak Kullanmak

genaro flores — Thu, 22 Jan 2009 08:07:00 GMT

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur - metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz boşlukların bu şekilde kullanımı sayesinde site daha organize ve bölümlenmiş bir yapıya kavuşurken, site ziyaretçilerinin de içeriği okuyabilmesi ve site içeriğini hızlı ve verimli bir şekilde taraması (tabir-i caizse şöyle bir göz atması) kolaylaştırılmış.

2. Information Architects

Information Architects web sitesi de beyaz alanları kullanarak logo, metin, paragraflar ve başlıklar gibi bazı site elementlerini birbirlerinden ayırmış ve site tasarımının temiz ve sade olmasının önünü açmış. Aşağıdaki imaj, ilgili sitenin tasarımının yakından bir görünümü.

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz Boşlukları Nasıl Verimli Bir Şekilde Kullanabilirsiniz?

Beyaz alanları verimli bir şekilde kullanabilmek bazen zorlu bir iş olabilir. Yazının devamında size bu alanda yardımcı olabilecek bazı ipuçlarını listelemeye çalıştım:

1. Satır Aralığı (Line Spacing)
Bir paragraf içerisindeki satırların aralığı, konu sitenin okunabilirliği ve taranabilirliğine geldiğinde en büyük farkı oluşturan en önemli unsurlardan birisidir. Eğer satırlar birbirlerine çok yaklaştırılırsa, o sayfanın içeriğini taramak neredeyse imkansız hale gelir. Eğer satırlar birbirinden çok uzaklaştırılırsa, o zaman ziyaretçileriniz satırların birbirlerinden bağımsız olduğu hissine kapılacaklar ve konuyu bütünleştiremeyeceklerdir.

Siz de satır aralıklarınızın yukarıda iki örneğin arasında bir yerlerde (ne çok az ne de çok fazla) olmasını isteyeceksinizdir. CSS'de satır aralıkları hakkında teknik bir makale arıyorsanız, o zaman CSS line-height değeri makalesi size yardımcı olacaktır.

2. Marjlar (Margin)
Marj, bir tasarımdaki elementleri çevreleyen boşluklara verilen addır. CSS Marjları bu boşluğu kendi avantajınıza kullanabilmeniz için mükemmel bir yoldur. Marjlarla çalışırken hatırlamanız gereken birkaç unsur bulunmaktadır.

Tutarlılık
Anahattınız üzerindeki marjlarınızın geneli birbirleri ile tutarlı olsun. Boşuklarınızda ne kadar tutarlı olabilirsiniz, siteniz o kadar profesyonel ve organize görünecektir. Marjları düşünürken hem dikey hem de yatay marjları göz önünde bulundurun, zira bunların her ikisinin de tasarımın geneline önemli etkileri bulunmaktadır.
Çok fazla olmasın
Marjlarınızı çok yüksek tutmayın. Birbirlerinden olması gerektiğinden fazla ayrılmış site elementleri, yukarıdaki satır aralığı örneğimizde de görebileceğiniz üzere içeriğin birbirleri ile olan ilişkisini kaybetmesine yol açabilir. Ayrıca bir sayfaya sadece sınırlı sayıda pikselin sığabileceğini de unutmayın, bu sebeple ekranın büyük kısmını boşluklarla da doldurmayın (tabi eğer sitenizin içeriği bu tip marjların kullanılmasını gerektirmiyorsa).
Çok az da olmasın
Unutmayın, burada beyaz alanları öğrenmeye çalışıyoruz, bu sebeple tasarımlarınızda en azından biraz beyaz boşluğun olmasına özen gösterin. Bir metnin resme, yan çubuğua, başlığa, navigasyon çubuğuna ya da sitenin diğer herhangi bir elementine çok yakın olması durumunda tasarımınız biraz sıkışık görünecektir ki bu da ziyaretçilerinizi rahatsız eder. Ziyaretçilerinizin biraz nefes alabilmesi için bu boşluklara özen gösterin.

3. Minimalist Tasarım Beyaz Boşluğa Eşit Değildir

Modern tasarım dünyasının problemlerinden biri de pek çok insanın beyaz boşlukları minimalist tasarımlarla bütünleştiriyor oluşu. Bu kesinlikle yanlıştır. Bir sitede çok miktarda metin bulunuyor olabilir ancak bu o sitenin kolayca okunabilir ve taranabilir bir web sitesi ol(a)mayacağı anlamına gelmez. Beyaz boşlukların doğru kullanımı ile bu pek tabi mümkündür.

Örnek olarak Smashing Magazine'yi ele alalım. Bu sitenin tabir-i caizse kulaklarından içerik fışkırıyor, bununla birlikte site yöneticileri sitenin taranılabilirliğini ve okunabilirliğini en yüksek seviyede tutmayı başarabilmişler. Site yönetimi bunu renklerin ve metin boyutlarının doğru seçimi ile beyaz boşlukların doğru kullanımı ile başarmışlar.

Yine aşağıda site tasarımına yakından bir bakış atalım:

Site tasarımında metinlerle resimlerin, navigasyon elementleri ile içerik ve yan barın arasındaki görsel ayrımı fark edebildiniz mi? İşte bu tümüyle beyaz boşlukların doğru kullanımı ile sağlanmış durumda.

4. Başlıklar (Headings)
Bşlıklar site içeriğinizi yönetilebilir parçalara ayırabilmek için mükemmel bir yoldur. Bu makaleyi okurken 4 farklı başlığın kullanıldığını görmüşsünüzdür: H1, H2, H3, H4. Bu başlıklar büyük, koyu, altı çizili "bölüm başlıkları"ndan oluşuyor ve siz bu makale süresince bunu görebiliyorsunuz.

Çevirmenin notu: Makalenin orjinal yazarı kendi site tasarımında başlıkları kullanım şekline göre makalenin bu kısmını yazmış. Bildirgec üzerinde, üzülerek söylüyorum, başlık yönetimi beni pek tatmin etmiyor. Makalenin bu kısmında adı geçen kullanım örneğini görmek için yazının sonunda göreceğiniz kaynak bağlantısına tıklayınız.

Burada yapmanız gereken başlıkların alt ve üst kısımlarındaki boşluğa ve bu boşlukların makalenin taranabilirliğini nasıl etkilediklerine dikkat etmektir. Örneğin, sitenin H2 etiketlerinde (ikinci en büyük başlık) metin ile alt çizgi arasında 5 piksel boşluk bulunuyor. Ayrıca yine aynı etiketin üst ve alt kısmında 15'er piksellik marj yer alıyor. Bu beyaz boşluklar makalenin bölümlerini sizin görsel olarak ayırabilmenizi ve içeriği tararken onları kolayca seçebilmenizi sağlıyor.

Bu boşlukları oluşturarak içeriğin taranması büyük ölçüde kolaylaştırılırken, ziyaretçinin hangi imi ya da hangi başlığı okumak istediğine karar vermesi kolaylaşıyor. Eğer başlıklar doğru kullanılmamış olsaydı, okur tüm makaleyi okumak zorunda bırakılırdı ki bu da bu tip uzun makaleler için okuyucu açısından tam bir işkencedir.

Eğer siz de benim H2 etiketini nasıl stillendirdiğimi merak ediyorsanız, o zaman aşağıdaki kodu style.css dosyanıza kopyalamanız yeterli.


h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}

5. İmajlar

İmajlarla metnin arasında kullanacağınız boşluk, bir tasarımın güzel ya da çirkin olup olmayacağını belirleyebilecek kadar önemlidir. Eğer kelimeler imaja çok yakın olursa, o zaman içerik çok karmaşık görünecek ve okunması da bir o kadar zorlaşacaktır. Eğer kelimeler imajdan çok uzak olurlarsa, o zaman birbirleri ile olan bağlantısı kopacaktır.

Web Design Tuts websitesinde imajlarımı organize etmek ve onların görsel olarak mümkün olduğu kadar çekici olabilmesini sağlayabilmek için bazı özel imaj sınıfları kullanırım. Ne zaman bunun gibi bir makale yazsam, bir imaj için aşağıdaki kodu kullanırım.

<img class="imagelist" src=# />

Bu imajı da CSS ile stillemek için aşağıdaki yöntemi kullanırım:


.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}

Kullandığım imajlar ile başlıkların üst ve alt kısımlarında 15'er piksellik boşluklar bırakarak tutarlılığı nasıl koruduğumu fark edebildiniz mi?

Modern Web Tasarımında Beyaz Alanlar
Eğer makaleyi buraya kadar okuduysanız, o zaman beyaz boşluğun neden önemli olduğunu artık anlamışsınızdır: Siteyi temiz göstermek, okuyucular için okunmasını kolaylaştırmak ve sitenin daha profesyonel görünmesini sağlamak bunlardan sadece birkaçı. Yine makale süresince beyaz alanların birbirleri ile tutarlı marj, metin ayrımı ve imajlarla başlıkların görsel ayrımı için kullanıldığından da bahsetmiştim. Ancak halen beyaz alanların "iyi" kullanımının ne olduğunu merak ediyor olabilirsiniz.

Aşağıda listelediğim web siteleri, beyaz alanların doğru kullanılarak ziyaretçileri ile iletişimi güçlendiren web sitelerine iyi birer örnektir.

1. Surfstation

Kullanılan beyaz alanın nasıl site içeriği ile yan çubuğu birbirinden ayırdığına dikkat edin. Site ziyaretçilerinin siteyi taramasını kolaylaştıran ve ihtiyaçları olan içeriği kolayca bulabilmelerini sağlayan yegane unsur işte budur.

2. Jason Santa Maria

Jason'un web sitesi çizgilerin ve beyaz boşlukların zekice kullanılmış kombinasyonu ile içeriğini temiz ve verimli bir şekilde ziyaretçilerine aktarabiliyor.

3. Digital Mash

Avustralyalı Tasarımcı Rob Morris'ın web sitesi Digital Mash, navigasyon, ana resim ve sayfanın alt kısmında bulunan dört adet içerik alanını içeren çok sade bir tasarımı kullanıyor. Marjların nasıl birbirleri ile uyumlu ve içeriğin nasıl kolayca okunabilir olduğuna ve metinler arasındaki boşluklar ile başlıkların ve simgelerin nasıl güzel kullanılmış olduğuna bir bakın.

4. Odd Web Things

Metin tabanlı bir web sitesi olan Odd Web Things, beyaz boşlukları kendi logolarını yan çubuktan, yan çubuğu kendi portfolyalarından ve portfolyalarından da kendi bloglarını ayırmak için kullanmış.

5. Vitor Lourenco

Vitor'un sitesi tümüyle beyaz bir arkaplan üzerinde oraya buraya yerleştirilmiş tipografi kullanmış. Koyu navigasyon, güçlü bağlantılar ve kullandığı sade renk şeması bu websitesini işler kılmış.

Beyaz Alanlar'a Dair @Twitter Görüşü

Bu makaleyi yazarken beni Twitter üzerinden takip eden bazı kişilerin görüşlerini aldım. Onlara şu soruyu sordum: "Bir web tasarımında beyaz alanlar sizce neden önemlidir?" İşte onların cevapları:

@Brendan: - Beyaz alanlar! Bence beyaz alanların doğru kullanılması, odağın içeriğin kendisine çekilebilmesi ve profesyonel görünüm için önemlidir.

@Brandon: - Önemlidir çünkü bilgi ve tasarım elementleri, büyük bir karmaşa yaratmaktansa birbirleri ile ilişkilendirilebilir.

@sthursby: - Bir ziyaretçiyi web sitenize bağlayabilmek için sadece birkaç saniyeniz varken, o süreyi ziyaretçinin aradığı içeriğe kolayca ulaşabilmesi için doğru kullanmak gerek.

@Hyermish - Beyaz alanlar, sadeliğin bir illüsyonu olmakla birlikte bazen karmaşıklığı da giderebilir.

@Drew_Douglass - Benim beyaz alanları kullanmaktaki ana sebebim, odağı sayfanın bir elementine çekmek ve bakışları o içeriğe yönlendirmektir.

Kaynak: Web Design Tuts

CSS ve Kullanılabilirlik Üzerine Yazdığım Diğer Yazılar

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

BluePrint CSS Framework'ünü Kullanmak

genaro flores — Tue, 30 Dec 2008 06:46:00 GMT

Türkçe'ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE'yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm...

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

Bu slogan blueprintcss.org websitesinde yer alıyor ve Blueprint CSS iskeletini net bir şekilde özetliyor aslında. Blueprint, projelerinizi üzerine inşa edebileceğiniz muhteşem bir temel sunuyor ve bunu herkesin beğeneceği bazı standart stil şablonlarını, tipografi elementlerini, ızgara iskeletini, güzel görünümlü formları ve yazdırma stil şablonunu tüm popüler tarayıcılara uyguluyor. Gelin hep birlikte BluePrint'in bunu nasıl başardığına bakalım.

BluePrint Kaynak Dosyaları

reset.css Bu dosya tüm tarayıcıların varsayılan HTML element tanımlamalarını sıfırlar. Eminim hepiniz bir projeye başlamadan önce <body> elementine 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;' ya da bunun gibi stil elementlerini dahil ediyorsunuzdur. İşte reset.css'nin da yaptığı iş bu ve çok daha fazlası: Boşluklar, tablolar, yazıtipleri vb elementlerin css değerlerini sıfırlıyor ve size projenize başlamanız için temiz bir ortam sunuyor.
typography.css Bu dosya bazı varsayılan tipografi değerlerini tanımlıyor. Tüm stilleri burada açıklamayacağım ancak bu dosyanın BluePrint CSS iskeletinin en sevdiğim parçası olduğunu belirtmek isterim. Tahmin edersiniz ki projenizi bitirdikten sonra sayfanın bir köşesinden fırlayan 'Times New Roman' stilinde bir yazıya rastlamak hiç hoş olmayacaktır. BluePrint'in typography.css dosyası işte bunun önüne geçiyor ve yazıtipi boyutları, tablolar, satır aralıkları gibi elementler için stil kurallarını belirliyor.
grid.css bu dosya blueprint'in ızgara (grid) şablon kurallarından sorumlu. Bunu kullanan sınıflara (class) birazdan değineceğim. Izgara ile ilgill değinmem gereken önemli bir nokta blueprint'in varsayılan olarak 950px genişliğe sahip, her biri 30px genişliğinde ve aralarında 10px boşluk bulunan 24 sütun kullanıyor oluşu. Bu size biraz fazla katı gelebilir ancak BluePrint Izgara CSS Oluşturucusu'nu kullanarak her zaman kendi ızgara modellerinizi oluşturabilirsiniz. Eğer bu paragraf kafanızı karıştırdıysa panik yapmayın, yazımın devamında ızgara şablonu kullanarak site taslağımızı oluşturacağız. Ancak eğer CSS ızgara modellerine aşina değilseniz, Raj'ın Web Tasarımı İçin Hangi CSS Izgara İskeleti'ni Kullanmalıyım? makalesi sizin için iyi bir başlangıç olabilir.
ie.css BluePrint IE'yi destekliyor, işte bu sebeple IE'yi özel kılan o küçük detayları adresleyen kendi özel CSS dosyasına sahip :) İşin güzel yanı, BluePrint bunu sizler için hallediyor ve bu sebeple, iskeletin tüm ana elementleri tüm ana tarayıcılarda (IE 5 bile dahil) kullanılabiliyor.
print.css Bu dosya bazı varsayılan yazdırma stillerini tanımlıyor. Bu sayede ziyaretçileriniz web sitenizin yazıcıdan çıktısını aldığında normalden daha iyi görünmesini sağlıyor. print.css dosyasının bir diğer güzel özelliği de web sitenizin alan adını girebileceğiniz özel bir bölümü içeriyor olması. Bu sayede site içeriğinizde eğer herhangi bir bağlantı bulunuyorsa, yazıcı çıktısı alındığında o adres, bağlantı metninin hemen yanında parantez içerisinde görüntülenecektir. Bu alanı doldurmazsanız sadece harici sitelere olan bağlantılarınız doğru şekilde görüntülenecektir. daha detaylı bilgi için print.css dosyasının son kısmını inceleyin.
forms.css Bu dosya ise güzel görünümlü formlar ile uyarı mesajlarının kullanılabilmesini sağlıyor. Eğer Rails kullanıyorsanız flash uyarılarını bile görüntüleyebilirsiniz. Bu dosya, yazımın devamında değinmeyeceğim tek dosya olduğundan, aşağıdaki resim size bazı varsayılan form stilleri kullanılarak oluşturulmuş bir form örneğini gösteriyor.

BluePrint CSS form

bu altı farklı stilşablonunu eklemek zorunda mıyım?
Hayır. BluePrint CSS, HTML sayfalarınız için sıkıştırılmış üç adet CSS stilşablonunu içeriyor. screen.css yukarıdaki 1., 2., 3. ve 6. stil şablonlarını içeriyor. Bunun yanısıra print.css ve ie.css bulunuyor. İşin güzel yanı, blueprint css iskeletinin modüler yapısı sayesinde her bir css dosyasının birbirinden bağımsız işleyebiliyor oluşu. Bu sayede BluePrint'in sunduğu şablonlardan sadece istediğiniz şablonu kullanabilirsiniz. Örneğin BluePrint CSS Izgara modelini kullanmak istemiyor olabilir, ancak typography.css ve reset.css'nin nimetlerinden faydalanmak istiyor olabilirsiniz. Diğer bir deyişle diğer CSS elementlerinin işlemesi için BluePrint ızgara modelini kullanmak zorunda değilsiniz.

BluePrint kullanarak şablon oluşturalım

BluePrint CSS Şablonu

Yazımızın devamında, hobi amaçlı hikaye yazan kullanıcıların hikayelerini paylaşabileceği ve diğer kullanıcıların da hikayelere yorumlarını ekleyebileceği bir site oluşturcağız.

Aranızda eminim sıkı tasarımcılar bulunuyordur ve yukarıdaki resme baktığınızda bu ne biçim tasarım diyenleriniz olacaktır. Ancak burada ilginç olan şey, benim yukarıdaki tasarımı oluşturmak için tek satır CSS kodu yazmamış oluşum. Yukarıdaki tasarım varsayılan BluPrint CSS stil tanımlamalarını kullanıyor ve tasarım açısından türünün en iyi örneği değil elbette. Ancak yukarıda da bahsettiğim gibi yukarıdaki görünüme ulaşmak için tek bir satır kod yazmadım ve ayrıca hazırladığım bu şablon benim projem için güzel görünümlü ve kolayca değiştirilebilir olması açısından önemli. Tasarımım muhtemelen ilerleyen dönemlerde değişeceğinden, BluePrint benim bu değişiklikleri kolayca uygulayabilmemi sağlıyor.

Parçalara Ayıralım
Belgenin başlık (<head>) kısmı
Bildirgec kod örneklerini görüntülemede verimli bir ortam sunmadığından makalede yer alan kodları harici bir txt dosyası olarak yayımlamayı uygun gördüm. Yukarıdaki bağlantıya tıklayarak koda ulaşabilirsiniz.

İlgili kod örneği, tipik bir <head> etiketinin Blueprint kullanıldığında nasıl görüneceğine iyi bir örnek teşkil ediyor. İskeletin CSS dosyalarını dahil ederek işe başlamanız gerekiyor (bu dosyalar screen.css, print.css ve ie.css'den oluşuyor).

BluePrint ile ilgili en iyi şeylerden biri de salt CSS'den oluşması, bu sayede de tıpkı diğer tüm CSSlerde olduğu gibi modifiye edilebilir. İşte BluePrint eklentileri de bu şekilde çalışıyor. Örneğimde BluePrint fancy-type eklentisini kullandım. İlgill eklenti bazı güzel görünümlü tipografi öğelerini barındırıyor. Kod örneğinde de göreceğiniz üzere ilgili eklenti dosyasını blueprint css iskelet dosyalarını dahil ettikten sonra sayfama dahil ettim, bu sayede ilgili eklenti, blueprint css değerlerinin üzerine yazarak kendi değerlerini aktif hale getirebiliyor. Buraya kadar bazı BP eklentileri mevcut. İlgili eklentiler basitçe bazı öntanımlı BluePrint elementlerinin üzerine yazarak kendi değerlerini CSS iskeletine entegre ediyor.

Sayfa Başlığı

BluePrint Sayfa Başlığı

Kod Örneği İçin Buraya Tıklayınız
Bu kod ile ilgili en önemli nokta, ızgaranın 'container' sınıfına (class) dahil bir <div> ile çevrelenmesi gerekiyor oluşu. Eğer bunu uygulamazsanız içeriğiniz ızgaraya dahilinde görüntülenmez. <hr /> etiketleri BluePrint tarafından sayfanın bölümlerini dikey olarak ayırmak için kullanılıyor. 'alt' sınıfı ise fancy-type eklentisi tarafından kullanılıyor ve herhangi bir metin elementinin daha farklı görüntülenmesi için kullanılıyor.

Ana İçerik

BluePrint Ana İçerik

Kod örneği için buraya tıklayınız.

Bu kod örneğinde pek çok önemli detay bulunuyor. Gelin en üstteki <div class="span-17 colborder"> ile başlayalım. Bu etiket sayfa üzerindeki en geniş <div>'i simgeliyor. Bu bölüm, kod örneğinde göreceğiniz 'Featured Book' bölümünün yanısıra hemen altındaki daha küçük iki kutucuğu çevreliyor. 'span-17' sınıfı Blueprint ızgara şablonuna ait ve ilgili sınıfın kullanıldığı <div> etiketinin, sayfanın tamamındaki 24 sütunun 17'sinin genişliğinde olduğunu belirtiyor (17/24). Diğer bir sınıf 'colborder' ise column border (sütun sınırı) teriminin kısaltılmışı ve BluePrint'e, ilgili sınıfın kullanıldığı <div>'in sağına bir sınır eklemesi gerektiğini belirtiyor.

Önemli: 'colberder' sınıfı bir sütunun tamamını kullanıyor. Ana içerik kısmında 17 sütun (span-17) kullandığımızı hatırlıyorsunuzdur. Bu durumda yan çubuğun (sidebar) 7 sütun genişliğinde olduğunu düşünüyorsunuzdur (17+7=24). Ancak 'colborder' elementi bir sütunu işgal ettiğinden yan çubuk kısmının genişliği için elimizde 6 adet sütun kalmış durumda (17+1+6=24).

Yan çubuğa geçmeden önce 17 sütunluk kısım dahilinde bulunan iki kutucuğa dikkatinizi çekmek istiyorum ('Upload a book' ve 'Write a review' yazan kutucuklar). Aslında bu alan bir diğer BluePrint ızgarası içerisinde konumlandırılmış durumda. Bu dahil <div> 17 sütunluk bir <div> içerisine dahil edildiğinden, bu <>div>'in genişliği de tahmin edeceğiniz üzere 24 değil 17 sütundan oluşuyor.

Bu durumda ilk <div> 'span-8' ve 'colborder' sınıflarına dahil edilmiş. Bunun anlamı, ilk kutucuğun genişliği 8 sütundan oluşuyor ve sağ kısmında bir sınır bulunuyor. İkinci <div> ise yine 'span-8' sınıfının yanısıra 'last' sınıfına dahil edilmiş. Burası Blueprint ızgara iskeletinin önemli bir noktasına işaret ediyor. En sağdaki sütun mutlaka 'last' sınıfına dahil edilmeli. Bu sınıf, BluePrint'e, o sütunun sayfanın en sağındaki son sütun olduğunu belirtiyor ve bu sebeple onun sağına herhangi bir boşluk dahil etmemesi gerektiğini söylüyor. Son olarak iki adet kutucuğu içeren <div> için en fazla genişliğin 17 sütun olduğunu belirtmiştim. Kutucukların her birinin genişliğini 8 sütun (span-8) olarak tanımladık ve soldaki kutucuğu 'colborder' sınıfına dahil ettik. Bu durumda 17 sütunun tamamını kullanmış olduk (8+1+8=17).

Tamamdır, şimdi yan çubuğa geri dönelim. Bu yan çubuğun 'span-6' ve 'last' sınıflarına dahil edildiğini göreceksiniz. Bu yan çubuk, soldaki 17+1 sütunluk ana içerik kısmını tamamlıyor. Eğer fark etmediyseniz, 'span-#' sınıflarında # yerine 1 ila 24 arasında herhangi bir sayıyı yerleştirebilirsiniz. Daha fazla sütuna sahip bir ızgarayi tercih etmediğiniz sürece 'span-#' sınıfı herhangi bir numarayı içerebilir, yeter ki onu kapsayan (container) <div> etiketinin toplam ızgara sütun sayısından küçük olsun.

Aşağıdaki kod örneği ızgarayı örneklendirebilmek için oldukça basit bir şablonu kullanıyor. Kodu incelerseniz ızgara sisteminin nasıl çalıştığına dair bir fikriniz olacaktır.

Kod örneğine ulaşmak için tıklayınız.

Gelin bu CSS şablonunda kullandığımız diğer CSS sınıflarını inceleyelim.

'caps': Bu sınıf yan çubuk başlıkları için kullanılıyor. fancy-type eklentisi tarafından sunulan bu sınıf, tamamı büyük harflerden oluşan başlıklar oluşturabilmenizi sağlıyor.
'box': Bu sınıf özellikle listelerin görüntülenmesi için oldukça kullanışlı. Bu sınıfa dahil olan <div> etiketleri dahilindeki listelerin çevresinde bir boşluk bulunuyor ve yine ilgili kısım çevresinde bir sınır (border) bulunuyor.
'quiet': Bu CSS sınıfı, dahilindeki metnin rengini açık griye dönüştürüyor.
'prepend-top': Bu sınıf, yan çubuk dahilindeki 'Recent Reviews' bölümünde kullanılıyor. Bu sınıfa dahil olan elementin üst kısmına 1.5em'lik bir marj (margin) uyguluyor. Benzer bir sınıf olan 'append-bottom' ise aynı işlemi alt kısmına uyguluyor.
'prepend-5': Ben bu sınıfı küçük kutucuklardaki başlıkları sağa doğru itelemek için kullandım. Blueprint üzerinde aralıklar bırakmak için bir dizi sınıf bulunuyor: 'prepend', 'append', 'pull', ve 'push'. Prepend ve Append sınfları sırasıyla sola ve sağa dolgu (padding) eklemek için kullanılıyor. Pull ve Push sınıfları ise sırasıyla sola ve sağa marj (margin) eklemek için kullanılıyor. Tüm bu etiketler de ızgara modelini kullanıyor, bu sebeple ilgili sınıfın kullanıldığı <div> üzerinde kullanılabilecek en fazla sütun sayısından daha fazla bir sütun kullanmamanız gerekiyor (24 sütunluk bir ızgara modelinde 'prepend-25' sınıfını kullanmamanız gerektiği gibi).

BluePrint Footer Breakdown

Eğer CSS kutu modeli ile haşır neşir değilseniz ve padding ile margin arasındaki farkı bilmiyorsanız, hemen o konuda kısa bir ders verelim. CSS'de padding uygulanması durumunda, padding'in uygulandığı elementin sınırları dahilinde boşluk eklenir ve bu durum, ilgili elementin boyutunu arttırır. Örneğin, sınırları (border) olan bir tablo üzerinde çalışıyorsunuz ve bu tabloya padding eklemek istediniz. Bunun sonucunda tablonun sınırları tablonun kendisinden uzaklaşacaktır, zira padding elementi, tablonun sınırları dahilindeki içeriği etkiler. Öte yandan margin ise bunun tam tersidir ve boşluğu sınırların dışına etkiler ve uygulandığı elementin boyutlarını etkilemez. Bunun sonucunda margin uygulanan elementler, çevresindeki elementleri ya da elementin kendisini iteler. Aşağıdaki resim CSS kutu modelini çok net bir şekilde özetliyor.

CSS Box Model

BluePrint CSS ile hazırladığımız site

Özet
Bu rehber Blueprint CSS iskeleti sayesinde bir sonraki projenizinin ana şablonunu kolayca oluşturabilmenize nasıl katkı sağlayabileceğini ve CSS sıfırlamaları ve tipografi tanımlamaları ile sizin sırtınızdaki yükü nasıl hafifletebileceğini özetlemeye yönelik olarak hazırlandı. Ayrıca Blueprint'i Rails ile birlikte kullanıyorsanız Github üzerindeki şu kaynağı incelemenizi öneririm. İlgili kaynakta Blueprint'in Rails ile nasıl uyumlu çalışabileceğine dair pek çok örnek bulunuyor.

Blueprint'in en sevdiğim yanı sadece CSS'den oluşması. Tümüyle CSS. Eğer bu makalenin ardından Blueprint ile ilgileniyorsanız, gidin ve kaynak kodlarını inceleyin. Eğer biraz CSS bilginiz var ise sistemin nasıl çalıştığını kolayca kavrayacaksınızdır. Blueprint'in çok büyük bir kod tabanı yok, hatta pek çoğumuzun ortalama bir projede kullanacağından çok daha az CSS içeriyor. Eğer kaynak kodu okumak istiyorsanız Github üzerindeki Blueprint kaynağını inceleyebilirsinz.

Blueprint ile ilgili bilmeniz gereken birkaç kaynak:

BluePrint'in web sitesi blueprintcss.org. İskeleti indirmek için en iyi kaynak.
Varsayılan olarak Blueprint sabit şablonu kullanır. Eğer likit şablonlar ile ilgileniyorsanız, bu eklenti işinizi görecektir.
Burada da bir dizi işe yarar Blueprint eklentisi bulunuyor.

Bu yazı genaro flores tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage