bildirgec.org - flayzeraynx - beğendikleri

10 Adet Klas JQuery Eklentisi

flayzeraynx — Thu, 16 Jul 2009 06:46:00 GMT

Web sitenize veya blogunuza, sadece birkaç satırlık kod ile kolayca ekleyerek, ziyaretçilerinizde hayranlık uyandıracak, klas tasarımlar yapabileceğiniz 10 adet JQuery eklentisini bu listede bulabilirsiniz.

1 - jQTouch | Demo

2 - Fullsize | Demo

3 - Airport - Information Board Text Effect | Demo

4 - jScrollPane | Demo

5 - jTip | Demo

6 - TabSorter | Demo

7 - FCBKcomplete | Demo

8 - MopTip | Demo

9 - MopBox | Demo

10 - MopSlider | Demo

Daha önce yayınlanmış JQuery ile ilgili yazılarımdan bazıları:
JQuery ile iPhone-Style Checkboxes
En iyi 10 jquery slider eklentisi
jQuery ve CSS ile Page Peel Effect'i
jQuery Impromptu ile Şık Tasarımlı Mesaj Kutuları
Layouts için 6 Adet jQuery eklentisi
JQuery ile Hoş Bir Menü
Html formları için 25 harika jquery eklentisi

Kaynak: queness
Takip: Blog FriendFeed Twitter Facebook Email RSS

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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

flayzeraynx — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

CSS İle İlgili Yazdığım Diğer Yazılar

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

Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar)

flayzeraynx — Thu, 08 Jan 2009 17:17:00 GMT

Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.

demo | indir

Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.

Biçimlendirme

Kodu mümkün olduğu kadar anlamlı tutabilmek için bazı değerlerde tanımlama listesi (Definition List - DL) kullandım. Tek bir ilerleme çubuğu için istediğiniz elementi kullanabilrsiniz. Ben paragrafları sevdiğim için örneğimde P kullandım.

<dd>
    <span><em style="left:100px">50%</em></span>
</dd>

Sol EM konumlandırması için satıriçi stil kullandım. Her iki değeri de aynı yere bir kerede yazmak daha elverişli.

Animasyon
Peki bu nasıl oluyor? Elbette animasyonlu gif imajı kullanarak. Onları hatırlıyorsunuz değil mi? SPAN elementinin 200px genişliğinde arkaplan imajı var ve bu imaj "sıfır"dan 200px'e kadar animasyon içeriyor. Hangi yüzdeyi kullanırsak kullanalım, imaj 200px'in sonuna kadar gidiyor ve sonra duruyor. Durma efekti ise daha önce bahsettiğim EM ile yapılıyor.

EM Konumlandırması

Örneğimde 200px genişliğinde ilerleme çubuğu kullandım. EM elementinin genişliği de 200px. Buradan her bir yüzdenin 2px genişliğinde olduğu anlamını çıkarmışsınızdır. Eğer EM'i doğru olarak itelemek istiyorsanız o zaman yüzde değerinizi 2 ile çarpmanız gerek. Örneğin %50'nin anlamı 100px genişliğinde, %24'ün anlamı 48px genişliğinde, %75'in anlamı 150px genişliğinde olacak... Buradan ne demek istediğimi anlamışsınızdır.

demo | indir

Kaynak: CSS Globe

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

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

Gmail'den Twitter Kullanmak İçin: TwitterGadget

flayzeraynx — Mon, 15 Dec 2008 16:04:00 GMT

Sahip olduğu birçok özellik sebebiyle yoğun olarak tercih sebebi olan gmail'in gadgets bölümünü kullanarak twitter hesabınıza erişmeniz mümkün. Bu sayede eğer gmaili yoğun olarak kullanıyorsanız twitter için ayrı bir pencere ya da eklenti ile uğraşmanıza gerek yok. Şimdi bu özelliği nasıl aktif hale getireceğinizi göstermeye çalışacağım.

İlk önce yapmanız gereken eğer gmaili Türkçe kullanıyorsanız sağ üstte yer alan ayarlar sekmesine tıklayarak ingilizce olarak seçerek kaydetmenizdir. Bundan sonra ingilizce olan gmail hesabınızın sağ üstteki settings(ayarlar) sekmesine tıklamanız ve labs sekmesinde en altta bulunan seçenek olan Add any gadget by URL'yi "enable" olarak seçip save changes yaparak kaydetmenizdir.

Bu işlem sizi tekrar gmail ana sayfasına yönlendirecektir. Bundan sonra tekrar settings sekmesinden gadgets seçeneğine tıklayarak karşımıza çıkan "Add a gadget by its URL" kutusuna http://www.twittergadget.com/gadget_gmail.xml yazarak add dedikten sonra artık TwitterGadget aktif hale gelerek sol tarafta yerini alacaktır. Gmaili tekrar Türkçe yaparak bu özelliği aktif olarak kullanmaya devam edebilirsiniz.

Bu şekilde başka gadgetlar da ekleyebilirsiniz. Bu konuyla ilgili ayrıntılı bilgi için "How to Add Gadgets to your Gmail Account" yazısına bakabilirsiniz.

Kaynaklar: lifehacker, venturebeat

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

Adobe Flash kullanmadan sIFR yapımı

flayzeraynx — Mon, 03 Nov 2008 12:22:00 GMT

Son zamanlarda web tasarımcılarının alet çantasında en önemli bölmede bulunan sIFR uygulaması ile tasarladığımız siteler artık göze daha güzel görünüyor. İsterseniz demosuna bir göz atın!

CoffeeCup - sIFR Font Maker

sIFR nedir?
Eğer bir web tasarımcısı olarak bu uygulamayı henüz duymamışsanız siteleriniz biraz eski moda görünüyor olabilir. sIFR, ziyaretçilerde bulunmayan yazı tiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim'in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike Davidson'ın konu hakkındaki makalelerini de buradan inceleyebilirsiniz.

Flash Neden gerekli?
Bu tasarımcının hayatını kurtaran uygulama basit bir swf dosyası içeriyor ve bu dosya tüm karakterleri tanıyarak sitenizin yazıtiplerini değiştiriyor. Bu swf dosyasını açıp içine kullanmak istediğiniz yazıtipiyle 3 harf yazıyorsunuz ve kaydediyorsunuz. Tabi Bu dosyayı açabilmek ve kaydedebilmek için Adobe'nin paralı Flash programı gerekiyor. Eğer Flash programına sahip değilseniz sizi ücretsiz bir sIFR yaratıcı programıyla tanıştırayım:
CoffeeCup - sIFR Font Maker!

sIFR kullanılan bir sayfa

Ücretsiz bir çözüm
CoffeeCup'ın sIFR Font Maker programı tüm tasarımcılar için ücretsiz indirmeye sunulmuş. Resmi siteden programı indirdikten sonra ufak bir kurulum yapıyorsunuz ardından kullanmak istediğiniz yazı tipinin normal, kalın ve italik tarzlarının dosya yolunu programa göstererek Save As butonuna basıyor ve sIFR'de kullanacağımız swf dosyasına sahip oluyoruz.

Web tasarımcıların alet çantasında kesinlikle bulunması gereken sIFR Font Maker'a şu an için tek alternatif online hizmet sunan sifrgenerator sitesi. Fakat bu sitede sadece TrueType yazıtiplerini kullanmak zorunda kalıyoruz. Oysa CoffeeCup bize Opentype ve diğer yazıtiplerini de kullanma imkanı sunuyor.

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

Design Tutkunlarına

flayzeraynx — Fri, 24 Oct 2008 17:16:00 GMT

Konumuzun adındanda anlaşılabileceği gibi webmasterların ve tasarım yapmayı seven arkadaşların kullanacağı kaynak bulabileceği bir çok siteyi sizlerle paylaşacağım. Bu sitelerden bir kısmı icon, psd, skin, themes, wallpaper içerirken bir kısmıda nasıl yapılabileceklerini anlatacak.
Vereceğim siteler Türkçe, İngilizce ve Rusça ağırlıklı olacak. İngilizce-Türkçe sözlük arayanlar için burayı önerebilirim.

customize.ru

En ünlü sitemize gelelim. Neden en ünlü diyorum çünkü ben çok kullanıyorum :) Bu site rusça olup içeriğinde birçok kaynak barındırıyor. Örneğin wallpaper, Pc Tema, icon, Cursor yani mause imleci gibi bir çok şey var.
Burada bazı programlara ihtiyaç duyulabileceğini düşünlmüş ve o programların linkleri verilmiş. Yani siteden birşey indirdiğiniz zaman size yardımcı olacak programı arama derdiniz ortadan kalkıyor. Bence bu çok güzel bir uygulama. Sırf bu yüzden bu siteyi çok kullanıyorum.

win-design.ws

Daha çok blog tarzı olan bu sitemizde rusça olup Vista, Xp ve Photoshop üzerine ağırlık veriyor. Tabi sadece bununla sabit kalmıyor. İçeriği geniş bir site webmasterler için değişik fontlarda sunuyor.
Sitenin ayrıca icon, png, Winamp Skin gibi kısımlarındanda istediklerini bulabilirsiniz.

alxa.ru

Gelgelelim alxa'ya. Bu site rus sitesi olmasına rağmen içerik ingilizce. Yani dünyaya yayın yapıyor :). Sitenin görünümüne bakıp aldanmayın. Bu kadar basit bir tasarıma sahip olan siteden ne bulunabilirki diye sakın düşünmeyin. Çünkü içeriği emin olunki sizi yanıltacaktır.
icon, wallpapers, Graphics, Font konusunda gelişmiştir. Ayrıca buradan Rss abonesi olabilirsiniz.

designwar.net

Bu siteyi bir çok webmaster arkadaş biliyordur. En sağlam içeriğe sahip sitelerden birisidir kendileri. Öyleki aradığınızdan daha fazla şeyler bulabilirsiniz.
Örneğin Komik Resimler, Dergiler, Graffiti, Buradan vectorler brushlar photoshop styleleri, Fontlar vs vs...
Aradığınız herneyse size yardımcı olabilecek en önemli kaynaklardan birisi.

designika.net

alxa benzeri bir site hatta neredeyse tıpkısının aynısı daha çok icon ve wallpaper ağırlıklı.

grafamania.net

Bir arkadaşımın aracılığı ile müdavini olduğum tek site. 185 sayfalık bir arşivi var. Hem rusça hemde ingilizce dil kullanıyor. Vector, Wallpaper, Brushes, Font, Templates, Flash, icons, ebooks, konularının hepsinde geniş bir içeriğe sahip. Siteye buradan üye olabilirsiniz. Rusça ve ingilizce olduğu için üye olmanız kolay olacak.

iconarchive.com

Bu siteden bahsetmeden yapamayacağım. Benim bildiğim en büyük icon sitesi. İçeriği tahmin edemeyeceğiz kadar geniş. Tabi sadece icon konusunda

Şimdilik bu kadar. Kendi kullandıklarımı sizlerle paylaşmak istedim umarım beğenirsiniz ve umarım size birazcıkda olsa faydası olur. Web tasarımcı arkadaşların işine yarayacağına inanıyorum.

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

içeriği xml'den al, flash siten hafif olsun.

flayzeraynx — Thu, 29 May 2008 09:42:00 GMT

google'ın içeriğimi indekslemesi falan önemli değil, ben tasarımıma bakarım arkadaş" diyen kişiler ve kurumsal firmalar büyük çoğunlukla modacılar, fotoğraf sanatçıları, mimarlık şirketleri ve reklam-tasarım firmaları olmakta. içerikten çok tasarımdaki zekanın, inceliğin, ve görsel zarafetin ağırlık kazandığı bu sitelerin oluşturulması açısından flash en uygun teknolojik olanakları içinde barındırıyor. icat olunduğu günden beri animasyon türü atraksiyonların şaşırtıcılığı, web uygulamaları ve tasarımı ile birleşerek butik diye adlandırabileceğimiz sitelerin ihtiyaçlarına yanıt verir oldu, ama bir sorunu da beraberinde getirdi; site yüklenme hızı.

özellikle ülkemizin internette adsl altyapısı sayesinde bu sorun da ortadan kısmen kalkmış olmasına rağmen, full flash ile oluşturulmuş bir sitenin açılma hızı hala ziyaretçinin sıkılmasına hatta sayfaya girmekten vazgeçmesine yolaçabiliyor. bu konuda flash programının bize sunduğu en sağlıklı çözüm; xml teknolojisi ile entegrasyon. flashın arka planında çalışan actionscript isimli kodlama sistemi, uygulamanın ulaşabileceği yerde bulunan xml dosyası ile iletişim kurarak, gerekli verileri gerektiği zaman alıp işleme sokuyor. bu sayede resim dosyası linkleri, yazılar, hatta kendi bünyesine ait kod parçacıkları bile flash dosyası içinde yer tutmayıp xml dosyasında bulunuyor ve bu da flash ile tasarlanmış sitenin olabildiğince hafif olmasını ve buna rağmen içeriğinin sınırsız boyutta olabilmesini mümkün kılıyor.

peki bu teknoloji yeteri kadar ve yaygın olarak kullanılabiliyor mu? kullanılıyor ama elbette yeteri kadar değil. işin bizi üzmeyecek tarafı sadece ülkemizde değil tüm dünyada bunun böyle olması.

internet aleminde bu ihtiyacı doyurucu seviyede karşılayacak bir siteden, myflashxml.com'dan bahsetmek yerinde olur, ki rakip olarak karşılarına dikilecek alternatiflerine rastlamak hemen hemen olası değil. vakt-i zamanında dynamicfactory ismiyle arenaya çıkıp, rakipleri arasında fazla da büyük farklılıkları olmayan hazır flash siteler şatışa sunarak, template-satar siteleri arasında yerlerini almışlardı. ta ki flash'ın mx versiyonu, xml dosyasından veriyi çekme, ve dahi bu veriyi işleyebilme mevzusunu ele alana dek. ilk olarak
"flash resim galerisi" hazır site tasarımı yaparak farklılıklarını koyan myflashxml yetkilileri, resimleri, yazıları hatta kodların kendisini kaynak dosyasına gömmek gibi bir problemin artık bulunmaması üzerine, kapasitelerini tasarımın görkemine kanalize edebildiler. tabi tasarımları kadar actionscript kod deryasının karmaşık sularında istedikleri gibi fora yelken gezebilme yeteneklerinin olduğu da açık.

Dinamik siteler, flash ile entegre edilmiş e-ticaret, içerik yönetim (CMS) , ve blog sistemleri diyerek adlandırdıkları kategoriler altında toplamışlar hazır tasarımlarını. hiçbir kategoriye uymadığını düşündüklerini de diğerleri adı altında toplamışlar ve her bir sitenin demosunu inceleme şansı tanımışlar.
flash ile entegre ettikleri blog sisteminin sade, yetersiz ve özelliksiz olduğunu belirtirken b2evolution tabanlı blog sistemini kullandıklarını görüyoruz. ayrıca e-ticaret sistemi olarak oscommerce yazılımını flash ile birleştirmeyi uygun görmüşler. içerik yönetim sisteminin ise nasıl entegre edildiği ve nasıl çalıştığı bilgilerine demolarından açıklık getirmek mümkün değil ancak teslim etmek için 15 gün süre istemeleri, üzerinde çalışıp tamamladıktan sonra mı vermeyi düşünüyorlar acaba sorusunu akıllara getiriyor.

ücreti mukabilinde indirmeye hak kazandığınız kaynak dosyasını istediğiniz gibi değiştirebilme seçeneğiniz var ama bu değişiklikleri sağlıklı bir şekilde gerçekleştirmek için konusunda uzman birinin desteğine ihtiyacınız olacak.
hiçbir program bilgisine sahip olmadan flash sitenizi oluşturun gibi bir sloganla hazır sitelerini satışa sunarken, müşterinin yapması gereken tek şey,
sitede görünmesini istediği yazıları, başlıkları, linkleri ve resimlerin bulunduğu konumun linklerini, xml dosyalarında gerekli yerlere yazmak. bu arada bizim için türkçe karakter problemi burada da yine baş ağrıtmaya devam ediyor ancak kaynak dosyasında actionscript kod bloğunun ilk satırına

System.useCodepage = true;

kod satırının eklenmesi bu derde deva oluyor. ayrıca xml dosyasının ilk satırında bulunan encoding bilgisini türkçe karakter seti olan iso-8859-9 olarak değiştirmekte fayda var.

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

photoshop photoshop

flayzeraynx — Tue, 11 Mar 2008 11:29:00 GMT

photoshop talent sayfasında photoshop ile yapılabilecek bazı işlemlerden bahsedilmiş. özellikle insan vücudu fotoğrafları üzerinde yapılabilecek önemli değişiklikler derlenmiş.

iris rengini düzenlemek, göz çevresi gölgelendirme ve makyaj çalışması, genel makyaj, kaş ve piercing ekleme, göz rengi değiştirme, saç rengi değiştirme ve düzenleme , saç dokusunu parlak hale getirme, dişler üzerinde yapılan işlemler , cilt üzerinde yapılan değişiklikler,

gövde bölgesi çalışmaları , parmak tırnak düzeltme rötuş atma örnekleri, burun

daraltma ve inceltme yapmak gibi otuzdan fazla örnek sıralanmış.

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

kwout

flayzeraynx — Tue, 08 Jan 2008 18:24:00 GMT

kwout gezindiğiniz bir sitenin beğendiğiniz bir bölümünü kişisel web sitenizde, flickr ya da Tumblr de bir resim dosyası halinde yayınlayabilmenize olana sağlıyor.

yapmanız gereken, kwout sayfasına giderek web sitesinin adresini girmek, istediğiniz alanı girmek ve ardından size vereceği kodu almak.

arka plan dekorasyonunda oynamalar da yapabiliyorsunuz.

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