bildirgec.org - cylon - beğendikleri

Debian GNU/linux 6.0 squeeze çıktı

cylon — Tue, 08 Feb 2011 08:58:00 GMT

24 aylık geliştirmeden sonra nihayet Debian 6'nın kararlı sürümü çıktı. Debian diğer dağıtımlara göre daha temkinli ve yavaş ilerleyen bir dağıtım. Tabi bu da kullanıcılara onun daha kararalı olduğu yönünde bir algıya neden olmuyor değil. Distrowatch sitesinin ilk 5 listesinin üçünün Debian dağıtımı olması da kullanıcıların ona olan ilgisini gösteriyor.

Debian, squeeze adını verdiği yeni sürümünde daha önceden duyurmuş olduğu FreeBSD desteğini daha da ilerletmiş durumda. Debian'ın FreeBSD çekirdeği seçeneği sunması Linux&BSD kullanıcıları için hayli ilginç bir durum sergiliyor. Bu konuda kim kimi döver sorularını Debian wiki sayfalarında cevaplamış görünüyor.

Debian 6 sürüm notlarına baktığınızda debian gnu/kfreebsd çekirdeğinin de indirilebilir olduğunu görebilirsiniz.
Debian 6 squeeze sürüm özelliklerini görmek için şu linke göz atabilirsiniz. Indirme linklerine ulaşmak için de buraya.

Bu yazı cylon 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

google apps ile e-mail'lerinizi yönetin

cylon — Mon, 08 Nov 2010 10:29:00 GMT

Sizlere google'ın yeni sayılabilecek çok fazla da bilinmeyen bir hizmeti olan google e-mail app ile ilgili tecrübelerimi aktarmaya çalışacağım.

Öncelikle Google e-mail app'ın ne olduğundan biraz bahsedilim. Bu hizmet amaç olarak ticari olarak geliştirilmiş kuruluşların mailleri ile ilgili problemlerini azalatmayı amaçlayan bir hizmettir. Ancak her google hizmeti gibi normal kullanıcılar ve kuruluşlara ait olmayan domainler için de Standart Sürüm adı altında hizmetini ücretsiz olarak vermektedir. Gerçek bir domaine mail özelliğini kazandırabilmemiz için hostinge ihtiyacımız olduğunu hepimiz biliyoruz. Google e-mail app'te ise buna ihtiyaç duyulmamaktadır. Kısaca faydalarından bahsedelim.

Hosting şirketlerinde yaşanabilecek herhangi bir bakımda maillere ulaşamama derdine son vermesi.
Herhangi bir fiziksel alana ihtiyaç duymadan mail hesaplarınızı ücretsiz olarak kullanmanıza imkan tanıması.
Bilinen gmail hızını kendi domaininiz altındada yakalayabilme imkanı.
Mailleriniz için alışılmış gmail arayüzüne sahip olabilme.

Peki nasıl google email app'i kullanmaya başlayabiliriz?

İlk Ayarlar

Öncelikle etki alanınızı (domain) google'a tanıtmanız gerekiyor. Bunu yapmak için google apps'a domainizi kaydetmeniz gerekiyor. Burada ilk kurulumda Yönetici seçeneğini seçmeyi unutmayın. Bu aşamadan sonra önünüze gelen formda dikkat etmeniz gereken hizmet sözleşmesini onaylamak ve kuruluşunuz mail hizmeti sağlıyor mu seçeneğine hayır demek (Benim tercihim) olacaktır.

Formu onayladığınızda önünüze 2. bir form daha gelecektir. Burada yöneticiye ait olacak olan kendi domainize bağlı ilk mail hesabınızı tanımlayacaksınız. Formu onayladığınızda önünüze gelen sayfa mail sonucunuza ait tanımları yapacağınız yönetim sayfasıdır. Burada sizden domaininizi doğrulamanız istenecektir bu işlemi gerçekleştirmek için uyarıyı tıklayın. Gelen sayfada size doğrulama için 2 seçenek sunar 1. html onayı 2. CNAME onayıdır. HTML onayı, alana bağlı çalışan domainler için geçerli bir yöntemdir, CNAME onayı ise bir alana (hosting) sahip olmayan domainlerin CNAME'nde yapılan bir değişiklikle google'ın onaylamasını sağlamaktır. Burada şu soru aklınıza takılır; "Bir domain hostinge sahip değilse CNAME ayarı nasıl yapılabilir?" Bunun için benim vereceğim cevap FREEDNS AFRAID olacaktır ki bu yöntemi alanınız olsun olmasın domaninizin NS yönetimi için her zaman kullanabilirsiniz. Ana konumuza dönersek html onayı için size verdiği isimde bir html dosyası yaratmanızı ve bunun içine verilen kodu yazmanızı ister. bu işlemden sonra alanınızın kök dizinine bu dosyayı atmalısınız daha sonra da onaylama işlemini gerçekleştirebilirsiniz. CNAME içinde size verilen CNAME kaydını hosting panelinizin DNS kayıtlarından ya da kullandığınız herhangi bir NS yöntemiyle domaininize tanımlamalısınız. bunu yaptıktan sonra onaylama işleminizi gerçekleştirebilirsiniz. Onaylama işlemini yapınca size "48 saat sürebilir" şeklinde bir uyarı verir ancak bu CNAME için daha geçerli bir durumdur. Bu işlem genellikle HTML ile yapıldığı için birkaç dakika içinde tamamlanır. Bu aşamadan sonra hesabınız aktiftir. Ancak MX kayıtları düzenlenmelidir.

MX Kayıtlarını Düzenleme
Bunu yapabilmek için yine biraz önce CNAME için bahsettiğimiz yollardan birini kullanabilirsiniz. Burada dikket etmeniz gereken konu varolan MX kaydının silinmesi gerekliliğidir. Artık kendi hosting firmanızdan mail hizmeti almayacağınız için kayıtlı olan MX kaydının silinmesi gerekir. Bu silme işleminden sonra aşağıdaki yeni MX kayıtlarını tanımlamalısınız.

MX Sunucu adresi Öncelik
ASPMX.L.GOOGLE.COM. 10
ALT1.ASPMX.L.GOOGLE.COM. 20
ALT2.ASPMX.L.GOOGLE.COM. 20
ASPMX2.GOOGLEMAIL.COM. 30
ASPMX3.GOOGLEMAIL.COM. 30
ASPMX4.GOOGLEMAIL.COM. 30
ASPMX5.GOOGLEMAIL.COM. 30

burda com'dan sonra "." olduğuna dikkat edin önemlidir.

Mail Hesaplarını Tanımlama

Bu işlem için google apps panelindeki "kuruluş ve kullanıcılar linkini tıklayın. Buradan maksimum 50 adete kadar mail tanımı yapmanıza imkan tanınır.

Maillerinize Uygulama (Outlook Express v.s.) İle Bağlanma

Güvenli Şifre Doğrulaması'nı kullanarak giriş yap: devre dışı
Gelen posta sunucusu (POP3): pop.gmail.com
Giden posta sunucusu (SMTP): smtp.gmail.com
Giden sunucum (SMTP) kimlik doğrulaması gerektirir: etkin
Gelen posta sunucumla aynı ayarları kullan: etkin
Gelen sunucusu (POP3): 995
Bu sunucu güvenli bir bağlantı (SSL) gerektirir etkin
Giden sunucusu (SMTP): 465 veya 25
Bu sunucu güvenli bir bağlantı (SSL) gerektirir etkin

Ayarlarını mail yazılımınıza yapmanız gereklidir.

Bu yazı cylon 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

çin malı iphone'ların bilinmeyen özellikleri ve 8 temel program

cylon — Wed, 08 Sep 2010 16:15:00 GMT

Orijinal iphone fiyatlarını gören yurdum insanı Çin malı iphone'lara yoğun ilgi göstermeye başladı. Aslında kimse haksız da sayılmaz. Orijinal iphone fiyatları 1000 tl iken, çin malı iphone'ların 200 TL olması çoğu insanı çin malı iphone almaya yöneltiyor.

"Çin malı iphone'ları nerede bulabilirim?" diye bir sorununuz olmasın. Fatih'te, Karaköy'de ve Avrupa Yakası'ndaki telefoncularda rahatlıkla bulabilirsiniz. Tabii, bu telefonları satan satıcalara "Bu telefon Çin malı diye hemen bozulur mu?", "Bozuk çıkarsa ne yapacağız?", "Garanti belgesi gibi bir şey veriyor musunuz?" gibi sorular sorduğunuz zaman satıcıların size: "Garantisi biziz abi" demeleri de bizi şüphelendirmiyor değil. Ancak endişe edecek hiçbir şey yok. Bu iphone'lar Çin malı falan ama, çok da kaliteli makineler. Şimdi sizlere bu Çin malı iphone'ların beğendiğim özelliklerini anlatayım:

Şarj etmeden bir hafta boyunca dayanabiliyor.
Çok sağlamdırlar. Darbelere karşı dayanıklıdırlar ve çok çabuk çizilmezler.
Dokunmatik java uygulamaları kaldırabiliyorlar. (Bu yazıda sizlere kendi çakma iphone'uma yüklediğim ve test edip beğendiğim 10 temel programı paylaşacağım.)
Wi-fi (kablosuz internete bağlanabiliyor)
TV izlenebiliyor
Bilgisayardan şarj edilebiliyor
İçerisinde yüklü gelen Çince olmayan programlar bulunmaktadır. (Özellikle snaptu adındaki program. Bu uygulamanın içerisinde facebook ve twitter gibi uygulamalar da bulunmaktadır.)

Ön taraflarında küçük bir kamera bulunmaktadır. (3g kamerası da diyebiliriz ama ben henüz 3g'li konuşma yapmayı denemedim)
Arka tarafta bulunan kamerada flaş bulunmaktadır.
Dokunmatik algılayıcıları çok hızlıdır.

Aşağıdaki resimde iphone üzerine çizdiğim beyaz renkteki yuvarlak yer ön kameranın bulunduğu yeri göstermektedir.

ön kameralı çin malı iphone

Peki bu çin malı iphone'ların hiç mi kötü özellikleri yok? Tabii ki de var:

En önemlisi bu telefonlarla görüşme yaparken sesiniz karşıdaki kişiye yankı yaparak gider. Bunun çözümü ise bu telefonlarla görüşme yaparken bağırarak konuşmamak gerekir. Olabildiğince anlaşılır ve kısık bir sesle konuşursanız bu sorun ortadan kalkacaktır.
Çin malı iphone aldığınız zaman bu telefonu ilk siz kullanın. Dokunmatik algılayıcıları ilk olarak sizin elinizi algıladığı için ileriki zamanlarda sizin elinizi daha iyi algılayacaktır.
Bu telefonları kullanırken çok nazik olmanız gerekmektedir. (Gerçek iphone'ları kullanırken de nazik olmalısınız tabii. Gerçek olanları 1000 TL olduğu için nazik olmamız, çin malı olanları doğru düzgün çalışabilsin, verdiğimiz komutları rahatça algılayabilsin diye nazik olmamız lazım..)

Sizlere Çin malı iphone'un özelliklerini iyi ve kötü yönleriyle aktardım.Şimdi internet forumlarında yazan "Çin malı iphone'lara hiçbir program yüklenmiyor, zaten o kadar paraya anca televizyon izlersiniz." sözünün hiç de gerçeği yansıtmadığını göstereceğim. İşte Çin malı iphone'lar için gerekli olan ve kullanıp da beğendiğim 8 temel program. Hepsi tam ekrandır ve kendi "upload"ımdır. Programların hiçbiri dokunmatik algılayıcı sorunu yaşamamaktadır.
not:aşağıda paylaştığım programların hepsi çin malı iphone'lar ve java destekleyen tüm dokunmatik telefonlarda çalışmaktadır.

Bolt 1.7 (Hızlı İnternet Tarayıcısı)

bolt

Gelişmiş download manager özelliği bulunan, facebook, twitter gibi sitelere rahatça girebilmenizi sağlayan bana göre en iyi internet tarayıcısı programı. Bu programı bilgisayarınızdan rahatça öğrenebilmeniz için yapılmış bir demo da bulunmaktadır. Demoya buradan ulaşabilirsiniz. Programı indirmek için de
buraya tıklamanız yeterli.

Opera Mini 5.0 (Türkçe İnternet Tarayıcısı)

opera mini 5.1

Bu da Türkçe internet tarayıcısı. Bolt daha hızlı olabilir ama opera mini hem türkçe hem de görsel içerik açısından bolt programından çok daha iyi. Kullanımı daha basit. Resimdeki telefonda ingilizce ancak yüklediğinizde siz de göreceksiniz program türkçe. Opera mini 5.0 programını buradan indirebilirsiniz.

Winrar Dosyalarını Açma Programı(.rar)

Telefonumuza program veya oyun yükleriz. Belki de siz bu yazıyı çin malı iphone'unuzdan okuyorsunuzdur. Buradan indirdiğiniz programlardan biri winrar yardımıyla sıkıştırılmış olabilir. Sorun değil. Bu program sayesinde .rar uzantılı dosyaları açabileceksiniz. Programı indirmek için buraya tıklayın.

Not Defteri (Not Pad)

Bilgisayarınızı unuttunuz.. Yanınızda kalem, kağıt da yok. Ama acilen not almanız gerekli. Hemen çin malı iphone'unuzu elinize alın ve not pad programını açın. Bu program sayesinde istediğiniz kadar not alabileceksiniz ve aldığınız notları kaydedebileceksiniz. Notpad programını indirmek için buraya tıklayın.

Snaptu 1.3 (Facebook, twitter vb.)

Snaptu uygulaması, dokunmatik telefonlar için yapılmış çok güzel bir java uygulamasıdır.
İçerisinde yukarıda da yazdığım üzere; facebook ve twitter uygulamaları, bu uygulamaların yanı sıra hava durumu, sinema, spor, haberler ve gazete uygulamaları mevcut.

snaptu uygulaması

Snaptu programı, benim aldığım çin malı iphone içerisinde yüklü olarak geldi. Ancak hepsinin içerisinde de yüklü olarak gelmiyor malesef. Siz de bu programı çin malı iphone'unuza yüklemek istiyorsanız, programı buradan indirebilirsiniz.

KD MÜZİK PLAYER

kd player türkçe

Programı açıklamaya gerek yok. Adı üzerine müzik player. Telefonunuzun içerisinde yüklü olarak gelen müzik playerı beğenmez iseniz kd müzik player sizin için iyi bir seçenek. Yükleyip denemenizde fayda var derim. KD Müzik player programını indirmek için buraya tıklayın.

Blue FTP (telefonunuza hükmedin)

blue ftp

Bu program telefonunuzun her şeyi. Hafıza kartınızı ve telefonunuzun hafızasını seçerek içerilerindeki klasörleri, dosyaları görebilir, müzik dinleyebilir, dosyaları sıkıştırabilir (zip leyebilir), .bin uzantılı dosyaları açabilir, resimleri görüntüleyebilir ve resimlerin boyutunu büyültüp küçültebilirsiniz. Bu programı indirmek için buraya tıklayın.

Foliant 0.6.3(kitap okuma programı)

İçerisinde İngilizce-Rusça sözlük de bulunduran kitap okuma programı. Görsel açıdan göze çok hoş gelen bir program. Resimde program ingilizce gözükmüyor ama merak etmeyin program ingilizce. Kendi çektiğim resimler çok kaliteli olmadığı için bu resmi koydum. Porgramı kendi telefonunuza yüklediğinizde siz de göreceksiniz ki program ingilizce. Eminim ki bu program çok işinize yarayacaktır. Programı indirmek için buraya tıklayın.

Şimdilik bu kadar. Bir dahaki yazılarımda çin malı iphone'lar ve java destekleyen tüm dokunmatik telefonlar için çok güzel oyunlar paylaşacağım.

Bu yazı cylon 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

Virtual Private Server, VPS'ler Hakkında Birçok Şey

cylon — Thu, 07 Jan 2010 14:56:00 GMT

Vps, Virtual Private Server, bir sunucunun sanallaştırma yazılımı yardımıyla birçok parçaya bölünüp, bu parçaların her birinin kullanıcının dilediği işletim sistemiyle kullanabildiği sanal sunuculardır.

Shared hosting denilen klasik hosting paketlerine göre siteleri ağır olan ancak dedicated server'a da ihtiyacı olmayan siteler için biçilmiş kaftandır. Kullanıcı VPS'ine sunulan işletim sistemlerinden birini kurup, istediği yazılımları yükleyip istediğini çıkartarak kendi sunucusunu oluşturabilir. Hatta kimi virtualization yazılımları kernel üzerinde dahi modifikasyon yapılmasına izin vermektedir.

Virtualization yazılımlarından şöyle bir bahsetmek gerekirse:

Virtualization olarak dört farklı tür var. Virtuozzo, OpenVZ, `Xen` ve `XenServer`. Bir de Hyper-V var ancak ondan pek bahsetmeyeceğim bu yazıda. (unuttuğum varsa lütfen yorumlara ekleyin)

Virtuozzo Parallels (Plesk'in üreticisi) tarafından üretilen lisanslı bir yazılım. Overselling (kapasite üzeri satış) mümkün, makine üzerindeki vps sayısına göre lisans satılıyor. Memory management yöntemi olarak SLM'yi kullanmakta.

OpenVZ Virtuozzo'nun açık kaynak hali. OpenVZ'de de overselling yapmak mümkün. Bu yüzden low end vpslerde daha çok OpenVZ kullanılmakta. Burstable Ram denilen olay sayesinde garanti edilen ram'den daha fazlasını kullanabiliyorsunuz. Aslında pek de öyle olmuyor ama. Memory management yöntemi olarak UBC'yi kullanıyor. Çalışan programların ram kullanımı yerine allocate ettikleri ram miktarını hesaplayıp kullanılan ram miktarı olarak size gösteriyor. (top komutu) Node'da, yani birçok vps'i barındıran makinede, ağır çalışan ya da o anda makineyi zorlayan başka bir vps varsa bu durum size de yansıyor. izolasyon sağlam değil.

Xen de yine açık kaynak kodlu bir virtualization yazılımı. Overselling yapmak -yanlış hatırlamıyorsam- v4.0'dan sonra mümkün oldu ama pek de yapıldığı söylenemez. Zira OpenVZ'ye oranladığımızda çok sağlam bir izolasyon var. Bir vps başına 1-4 kadar cpu verilebiliyor. Burstable imkanı olmasa da swap ile bir derece durumu kurtarmak mümkün. Bilenlerin tercihi.

XenServer da Xen sistemi üzerine kurulmuş Citrix isimli bir şirket tarafından üretilen bir virtualization yazılımı. Şu anda gigenet bu yazılımla vpshive'in test sürüşlerini yapıyor. Hiç fenaya benzemiyor açıkçası. XenServer yazılımının kendisi ücretsiz olsa da yönetimi için oluşturulan yazılımlar lisans ücretlerine tabii.

Vps almayı düşünenler için tavsiyeler:

- Türkiye'deki firmalar hakkında pek bilgim yok zira herkes gibi benim de ağzım çok yandı vaktinde. İngilizce konusunda sıkıntınız yoksa Amerika ya da İngiltere kaynaklı bir şirketten alın.

- Managed düşünürseniz ve bütçeniz varsa servint.com, wiredtree.com, knownhost.com ve futurehosting. bu işte gerçekten ustalar. "Bunlara fiyatım yetmez" diyenler de servercomplete.com'a bakabilirler, semi-managed diyorlar ancak monitoring dışında bir sorun olursa çözmek için ellerinden geleni yapıyorlar.

- Unmanaged düşünenler için linode.com ve slicehost.com biçilmiş kaftan. Kendi yazdıkları çok sağlam panelleri mevcut. İkisi de Xen kullanıyorlar, ancak slicehost'da sadece 64 bit OS kullanılabiliyor.

- Bunun dışında low end box denilen, pahada hafif olduğu gibi özellikler konusunda da hafif olan vps paketleri mevcut. Lowendbox.com'dan sürüsüyle şirket bulabilirsiniz.

- Öğrenmek adına bir VPS alıp çok da masrafa girmemek isteyenler için vpslink.com'un en küçük paketi pek uygundur. Dökümantasyonları da hiç fena değildir. (Rahatsızlık uyandırabileceği için önerilen şirketlere link vermedim)

Şimdilik bu kadar.

Bu yazı cylon 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

Jquery için Veri tablosu Eklentileri (Datagrid Plugins)

cylon — Mon, 28 Sep 2009 14:58:00 GMT

JQuery - DataGrid Eklentileri

Hızlı ve tutarlı yapısıyla diğer javascript kütüphaneleri arasından hızlıca sıyrılıp kendine özel bir yer edinen JQuery kütüphanesinin zengin özelliklerinden yararlanılarak yapılan zengin tablo uygulamaları sayesinde liste halindeki verilerinizi (Tables for Tabular Data) daha fazla kullanıcı dostu ve daha fazla etkileşimli olarak sunabilirsiniz.

İşte sizler için derlediğim Zengin JQuery Veri tablo Eklentileri (Datagrid Plugins)

1. jqGrid

jqGrid Görünümü

Favori veri tablosu eklentilerimden. Sayfalama (paging), XML, JSON, yapılarına yatkınlığı, alan başlıklarını sıralama (sortable), yeni veri ekleme, silme ve tüm bunların üzerine veri arama özelliği. Daha ne olsun değil mi? :) Ayrıca css entegrasyonu da başarılı. Bazı durumlarda hantal kalabiliyor, dikkat etmek lazım. İndirip denemek için buraya tıklayabilirsiniz.

2. Flexigrid

Flexigrid Görünümü

Bu eklenti, jqGrid'in yapabildiği herşeyi yapabiliyor üstüne bir de sütunları gizleme/gösterme ve sütunların genişliğini tekrar ölçeklendirebiliyorsunuz. (Resizable) Tek kusuru jquery'nin son versiyonu ile çalışırken başınızı ağrıtabilir. İndirmek için buraya tıklayın.

3. Ingrid

Ingrid Görünümü

İlk iki eklenti kadar tutmasamda alternatif tasarımı ile yine sayfalama ve sütunları sıralama özelliklerini barındıran bir eklenti. Yanlız bu eklenti kullanırken iyice bir araştırırsanız iyi olur çünkü okuduğum bir yazıya göre geliştirmesi durdu.
4. jTPS

jTPS Görünümü

Diğer eklentilerden farklı olarak sayfalama özelliği efektlerle zenginleştirmiş. Henüz veri arama özelliği yok. Ama alternatif arayüzü ile dikkat çeken bir eklenti.
5. FireScope Grid

FireScope Görünümü

Arabirimi çok basitmiş gibi görünebilir fakat son sürümü ile kazandığı Ajax özellikleriyle hem PHP ile hem de ASP ile sorunsuz çalışmakta. Bir göz atmanızda fayda var.
6. tgrid

tgrid Görünümü

Çok yeni bir eklenti o nedenle kullanırken dikkat etmekte fayda var. Yine diğer eklentilerde olan tüm özellikler bu eklentide de mevcut.
7. DataTables

DataTables Görünümü

İlk bakışta arabirimi çok basit hatta çirkin gelebilir fakat aldanmayın özelleştirme ve dilediğiniz gibi projenize adapte edebilme çok kolay. Çünkü jquery ThemeRoller'la uyumlu. Ayrıca çok tutarlı ve kararlı çalışan bir eklenti. Diğer eklentilerden farklı olarak belli satırlara öntanımlı renkler de verebiliyorsunuz.

Bu yazı cylon 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

inkscape tasarım dersleri

cylon — Mon, 20 Jul 2009 13:16:00 GMT

henüz kullanımı yeterince yaygınlaşmasa da inkscape tasarımda yararlandığım yegane program. çalışırken biraz ağır olması, illustrator kadar kaynağı olmaması ve bu programın da dosya türlerini desteklememesi en zayıf yönleri ama yine de basit kullanımı ve kolay öğrenilebilirliği bence onu ileride iyi bir yere getirecek. eğer bu programı kullanıyor ya da ilgi duyuyorsanız onunla neler yapılabileceğinize dair işe yarar dersler:

Bu yazı cylon 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

SharePoint'te Sakla, Zoho'da Düzenle!

cylon — Thu, 25 Jun 2009 06:41:00 GMT

Günümüzde birçok masaüstü uygulaması artık web sunucularından, yani web tabanlı olarak hizmet vermekte (Cloud computing *, IaaS *, SaaS *, PaaS *).
Bir web tabanlı yazılım paketi olan zoho, içeriğinde; proje ve fatura yönetimi araçları, ofis paketi, e-mail hosting, CRM ve belge yönetimi gibi farklı amaçlara yönelik birçok uygulamayı barındırmakta.

Zoho, Zoho ofis ile Microsoft SharePoint entegrasyonu için bir eklenti (add-on) yayınladı.Zoho kullanıcıları bundan böyle SharePoint'te MS Ofis formatında belgeler oluşturup kayıt edebilecekler ve bu belgeler üzerinde Zoho uygulamaları ile düzenlemeler yapabilecekler.

Zoho'nun bu eklentisini kullanabilmek için; yıllık üyeliklerde herbir kullanıcı için aylık 2$, aylık üyeliklerde her bir kullanıcı için 3$ ödemek gerekiyor.Ayrıca eklentiyi 30 gün süreyle ücretsiz deneyebiliyorsunuz.

Kaynak: zoho, techcrunch.
Takip Et: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı cylon 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

Fontlar Nasıl Türkçeleştirilir ?

cylon — Thu, 05 Feb 2009 10:12:00 GMT

Yabancı fontlarda türkçe karakterler bulunmuyor. Ancak bu fontlara türkçe karakterler ekleyebiliriz.
Öncelikle bir font editörüne ihtiyacımız var. Ücretsiz windows ve linux alternatifleri var ancak ben bu konuyu yeteneklerini yeterli bulduğum FontCreator v5.6 programı üzerinden anlatacağım.

1.Adım

high-logic.com adresinden FontCreator programını yüklüyoruz.
Programda düzenlemek istediğimiz fontu açıyoruz.

düzenlenmesi istenen fontu açıyoruz

2.adım

Şimdi türkçe karakterler daha önceden tanımlanmamışsa yeni karakterler oluşturmamız gerekiyor. Her hangi bir karaktere sağ tıklıyoruz buradan "Add" seçeneğine tıklıyoruz. Eklemek istediğimiz yeni karakter için boş bir kutucuk açılıyor. Bu kutucuğa karakterimizi eklemeden önce kutucuğu tanımlamalıyız. Yani klavyedeki hangi tuşa basında bu kutucuğun bir harf olarak ekranda belireceğini ayarlamalıyız. Bunun için oluşturduğumuz bu boş kutucuğa sağ tıklayarak Properties seçeneğine giriyoruz.

yeni harfimizi tanımlıyoruz

Açılan bu pencerede General sekmesi altında Postscript başlığı içerisindeki Name'e eklemek istediğimiz harfin ismini veriyoruz. Sonra Mappings sekmesine geçerek, mappings alanına yeni bir özellik eklemeliyiz. bunun için mappings penceresinin sağ tarafında bulunan Select butonuna tıklıyoruz.

Örneğin eklemek istediğimiz harf yumuşak g (ğ) olsun. Bu harf Latin Extended-A kategorisinde latin small letter g with breve olarak geçiyor. (Eğer harflerin isimlerini bilmiyorsak windowstaki sistem araçları arasında yer alan karakter eşlem aracından isimlerini öğrenebiliriz.)

ğ harfinin mappings sekmesinde tanımlanması

Harf tanımlama işlemleri bu kadar. Sonra Ok butonlarıyla işlemi tamamlıyoruz . Oluşturduğumuz boş kutucuğun üzerinde harfimize ait genel bir görüntü oluşmuş olacaktır. Ancak harfimiz henüz tasarlanmadı.

Adım 3

Fontu türkçeleştirme işleminin püf noktası burada yatıyor. Anlatım için Amaze isimli fontu kullandım. Bu font standart fontlara benzemiyor. Peki ben ğ harfini nasıl tasarlayabilirim? En küçük bir bozukluk diğer karakterler arasında uyumsuzluk yaratacaktır ve göze hoş gelmeyecektir.

Türkçe karakterlerin tasarımı

Ekleyeceğimiz karakterleri diğer karakterlerden kopyalayabiliriz. Örneğin yine (ğ) harfini fonta ekliyor olalım. Bunun için fontta hali hazırda var olan g harfini kopyalayıp eklemek istediğimiz (ğ) harfine yapıştırıyoruz. şimdi üzerinde bir çizgi eksik bunu da varsa diğer karakterlerden yine kopyala yapıştır yöntemiyle elde edip üzerine ekleyebiliriz. ya da kendimiz bir çizgi çizerek kopya g harfini ğ harfine dönüştürebiliriz. Temel mantık bu. Ben diğer karakterlerden aldığım bir çizgiyi biraz değiştirerek g harfine uygun hale getirdim ve fontta hiç bir bozukluk olmadı.

ğ nin üzerindeki çizgiyi oluşturmak için fonttaki bu karakterden yararlanılabilir.

Aldığım çizgideki bir takım oynamalardan sonra ğ harfini elde etmiş oluyoruz.

ğ harfi oluşturuluyor.

Bu işlemi diğer türkçe karakterler için de uyguluyoruz. ç nin altındaki çengeli s yi ş yapmak için kullanabiliyoruz. Bu ve benzeri eklemeler sonucunda türkçe karaktlerin tamamanını oluşturmak mümkün.
FontCreator programında F5 tuşuyla her an fontu test etmek harfler arasında uyumsuzluk olup olmadığını görmek mümkün. Testlerde de olumlu sonuçlar aldıktan sonra fontu ilgili klasöre yükleyebiliriz. Program bunu bizim için "install font" seçeneğiyle yapabiliyor. Ancak bir hatayla karşılaşma ihtimalimiz var. Bunun sebebi orjinal font dosyasının fonts klasöründe bulunmasından kaynaklanıyor. Önce orjinal fontu sistemden tamamen kaldırmalıyız. İşlem burada bitmiyor . Dilersek fontun ismini de değiştirebiliriz.

Fontun görünen ismini veriyoruz

Programda fonta isim vermek için Tools menüsünden Autonaming... seçeneğine tıklamamız gerekiyor. İsim verdikten sonra diğer detayları olduğu gibi bırakabiliriz.

Detaylar

Adım 4

Fontu ister program aracılığıyla ister elle sisteme yükledikten sonra herhangi bir metin editöründe test edebiliriz. Ben bu makaleyi hazırlarken kullandığım Amaze fontunu bilindik ve türkçe karakter içeren birkaç kelimeyle test ettim.

Sonuç

Fontun sisteme dahil olmasıyla tüm işlemler bitiyor. Tasarımlarınızda başarılar...

Bu yazı cylon 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

iStylr - Online Css Template Generator

cylon — Mon, 29 Dec 2008 12:16:00 GMT

iStylr

iStyler ,css dosyalarını kolayca düzenleyebilme ve yeni tasarılar üretebilmek için Stephan Helbig tarafından oluşturulmuş. Gerçekten kullanım açısından çok başarılı olduğu ortada. Css dosyalarınızı düzenliyor, isterseniz sıfırdan bir web şablonu hazırlamanıza olanak sağlıyor.Css konusunda uzman olan ve yeni başlayan kişiler için büyük kolaylık sağlayacak bu sistemde benim gözüme çarpan wordpress ile de uyumlu olması. Yani sıfırdan bir wordpress teması oluşturmak çok basit. İsterseniz diğer üyelerin yüklediği tasarımları kendinize göre düzenleyebilir, isterseniz bir web sitesini ekleyerek düzenleme yapabilir, isterseniz sıfırdan bir şablon oluşturarak çalışmanızı başlatabilirsiniz.

Tasarım tipini , tasarım boyutunu ve tasarım elementlerini seçtikten sonra tasarımınızın detaylarını düzenliyorsunuz. WYSIWYG xHTML editor sayesinde büyük bir rahatlıkla tasarımınızı yapıp kaydediyorsunuz. Ardından bilgisayarınıza yükleyip bu rahatlığın keyfini çıkartıyorsunuz :)

Sistem yalnızca Firefox tarayıcıda çalışmaktadır. Üye olduktan sonra onay kodunun mailinize gelmesi biraz zaman alacaktır hatırlatmakta fayda var.

Hemen tasarlamaya başlayın.

Bu yazı cylon 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

cylon — 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ı cylon 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