bildirgec.org - Gobius - beğendikleri

Django 1.2 Çıktı

Gobius — Wed, 19 May 2010 10:33:00 GMT

İki aydır çıkış tarihi yedi sefer ertelenen Django 1.2 nihayet çıktı. Eş zamanlı olarak 1.1.2 sürüm numaralı bir güncelleme de indirilmeye sunuldu.
Python programlama dili için hazırlanmış yüksek seviyeli bir web frameworkü olan Django aynı zamanda hem Google App Engine tarafından kısmen desteklenmekte, hem de Google Summer of Code'a bu yıl ikinci sefer katılma fırsatı bulmaktadır.

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

5 kullanışlı faturalandırma servisi

Gobius — Wed, 05 May 2010 09:21:00 GMT

Her geçen gün işlerimizi kolaylaştırmak adına yeni projelerin, programların sunulduğu internet ortamında yaptığımız işler için faturaları düzenlemek, bir arada görebilmek ve aynı yerden rahat bir şekilde takip etmek için hazırlanmış 5 internet projesini tanıtacağım sizlere.

1) Ballpark

MooTools ile desteklenmiş kullanışlı, basit bir arayüze sahip 'Ballpark', faturalandırmak istediğiniz proje üzerinde çalışmış olan birden fazla kişiyle aynı anda fatura tutarı veya detayları hakkında yorumlar yapmanızı sağlayan pratik bir servistir. Paypal desteği ile müşterinin hızlı bir şekilde ödeme yapmasını sağlayan 'Ballpark' ilk 30 gün için ayrıca ücretsiz bir deneme süresi de sunmakta.

2) The invoice machine

Minimalist bir tasarıma sahip olan 'invoice machine', sunduğu API ile yeni fatura eklemeyi çok daha kullanışlı ve kolay bir hale getiriyor. Başlangıç planı ücretsiz olan bu servis denemeye değer.

3) CurdBee

Ücretsiz sürümünde bile sunduğu sınırsız fatura olanığı ile para ödemek istemeyenler için birebir olan bu servis PayPal dışında ayrıca Google Checkout'u da desteklemekte. Ücretli sürümü ise diğer servislerle karşılaştırıldığında çok daha ucuz. Aynı zamanda satın alabileceğiniz modüller sayesinde ödeme metodlarınızı genişletebilir yada periyodik faturalar oluşturabilirsiniz.

4) Blinksale

2005'ten beri sunduğu hizmetinin her ne kadar ücretsiz bir sürümü olmasada denemek için kayıt olabileceğiniz 30 günlük bir deneme süresi bulunan 'Blinksale' diğer servislere göre yüksek fiyatlarına rağmen 'Basecamp' kullanıcılarınızı aktarmak, css ile düzenlenebilir şablonlar oluşturmak, API desteği vb. özellikler ile dikkat çeken bir faturalandırma servisi. E-mail dışında aynı zamanda telefon desteği de veren firma denemeye değer.

5) Pipeline

Ücretsiz bir sürümü bulunan ve bunun dışında kullanışlı bir takvim de sunan 'Pipeline'ın aynı zamanda paralı olan sürümleri için 2 ay boyunca ücretsiz bir deneme süreci de bulunmakta. Bu servis ayrıca gelişmiş kontrol paneli ile kazancınızı istatistikler halinde gösterir onun dışında üzerinde çalışmakta olduğunuz projeniz hakkında detaylı bilgiler girmenizi sağlar.

Umarım yardımcı olabilmişimdir.

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

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

BannerSnack: Hemen kendine bir "banner" tasarla

Gobius — Fri, 02 Jan 2009 17:32:00 GMT

Sitelerimiz için bir banner hazırlamak bazı arkadaşlarımız için gerçekten büyük sorun oluşturmuştur. Piyasada bu amaca yönelik birçok program olmasına rağmen hepsi de ücretlidir ve kısıtlı versiyonları da gerçekten "kısıtlıdır". İstediğiniz şekilde bir banner hazırlamak için ya Macromedia Flash programını temin edip çok iyi bilmesiniz ya da belirteceğim siteden girip yapmalısınız :) Belirteceğim sitenin ismi BannerSnack. Kullanım açısından gerçekten çok başarılı. kendilerinin belirttiği örnek boyutlarda isterseniz de kendi belirlediğiniz boyutlarda flash bannerlar yapabilirsiniz. Bannerlara resim ekleyebilme, yazı ekleyebilme ve bu eklenenen resim ve yazıları çeşitli efektlerle süsleme imkanı sunuyor. Efektleri giriş ve çıkış olarak düzenleyebiliyorsunuz. Ayrıca geçişler arasına da efektler ekleyebiliyorsunuz. Birbirinden güzel efektler gerçekten çok işinize yarayacak. Efektlerin dışında yazılarınıza ve resimlerinize filtreler ekleyerek hoş görünmesini sağlayabilirsiniz. Yaptığınız bannerları BannerSnack sunucularından direk yayınlayabiliriyorsunuz.

örnek bir tasarım

Sitenin ücretsiz ve premium olarak iki tür kayıt şekli var. Premium bildiğiniz gibi ücretli ancak paralı diye gözünüz korkmasın bazı fonksiyonlar devre dışı ve bannerlarda logoları bulunmuyor ücretsiz versiyonunda fonksiyonlar güzel bir tasarım çıkarmak için yeterli tek kötü yanı ufak bir şekilde logosunun bulunması. (bildirgeç için örnek bir tasarım çıkardım) Siteye kayıt olup giriş yaptıktan sonra banner yapımına başlıyorsunuz. Yani siteniz için yorulmadan çekici bir banner tasarımı yapmak istiyorsanız işte bu site tam sizin için.
Giriş için sizi buradan alalım : BannerSnack

[kaynak]

Bu yazı Gobius 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 10 Kullanılırlık İpucu

Gobius — Mon, 05 Jan 2009 12:13:00 GMT

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.

2. Site İçi Arama Motoru Kullanın
Tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. Kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

Jacob Nielsen'in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için 27 karakter genişliğinde olmalı. Arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri F yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

3. Çok Fazla Grafik Kullanmayın
Tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. Web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. Kullanılırlık açısından daha az her zaman daha verimlidir.

4. Site Haritaları (Sitemap) Kullanın
Site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (SEO) iyileştirir. Site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. Herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

Son zamanlarda Google, Yahoo! ve MSN gibi arama motorları Sitemap protokolleri sunmaya başladılar. Bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler XML biçiminde depolanır. Internet üzerinde bu belgeleri sizin vereceğiniz adres için XML biçiminde oluşturabilecek bazı araçlar bulunuyor.

5. İş Akışını Kesmeyin
İş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruz.Örneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. Bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. Kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

Bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). Javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

Bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. Kolayca Taranabilir Sayfalar Oluşturun
Kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. Kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

Jakob Nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği F yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

Nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

Kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. Sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
İlk iki paragraf web sayfasında önemli yer tutar. Bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar.
Alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. Bu elementleri önemli bilgileri vurgulamak için kullanın.

Gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. Bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. İçeriği ters dönmüş piramit şeklinde organize ederler. Ters dönmüş bir piramiti hayal edin. Üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

En önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? Haber değerlerinin yardımı ile.

7. Yanlış Yönlendiren Kullanıcı Arabirimi Kontrolleri Tasarlamayın
Kullanıcı arabirimi (UI) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayınGenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

Kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. UI kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: UI kontrollerinin tutarlı olduğuna emin olun.

Yukarıdaki resimden de görebileceğiniz üzere Yahoo!, tutarlı UI kontrol tasarımına güzel bir örnektir. Sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. Anlamlı Geribildirimler Verin
Anlamlı geribildirim bir web sitesi için önem arz eder. Bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. Diyelim web sitenizde bir hata var. Doğrudan Hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

Geribildirimler her iki yönde işler. Bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. Kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. Örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. Bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. Çok fazla Javascript Kullanmayın

Javascript ve AJAX tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. Bizim durumumuzda bu tarayıcı tutarsızlığı. Her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak Javascript aktif edilmemiş olabilir.

Bir websitesinde çok fazla JavaScript kullanarak bu kullanıcıları engellemiş oluruz. Bunun yerine daha mütevazı ve yalın Javascript kullanın.

CAPTCHAlardan Kaçının

Türkçe'si "İnsanlarla Bilgisayarları ayırt edebilmek için Tümüyle Otomatikleştirilmiş Yerel Turing Testi" (Completely Automated Public Turing Test to tell Computers and Humans Apart) olan CAPTCHA'nın adı bile karmaşık. CAPTCHA'nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir.

CAPTCHAların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür (yamutulmuş metni anlamak, iki rakam eklemek vs).

CAPTCHAlarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. Örneğin Çince semboller, numaralar pek çok batı dilinden ve Arapça'dan farklıdır. Çinliler CAPTCHA kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

Özet

Daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
Çok fazla grafik ve tasarım elementleri kullanmayın.
Site haritası sayfası hazırlayın ve site haritası XML verisini arama motorlarına kaydedin.
Kullanıcının iş akışının önünü tıkamayın. Gerektiğinde her işlemin iptal edilebilmesini sağlayın.
Kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
Anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
Daha mütevazı Javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
CAPTCHAlardan kaçının ve daha kullanışlı yöntemler kullanın.

Siz de bu yöntemlerden bir veya daha fazlasını kullanıyor musunuz? Kendi ipuçlarınızı ve görüşlerinizi yorumunuzda belirtmeyi unutmayın

Bu yazı Gobius 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 Eklentisi Oluşturma Rehberi

Gobius — Tue, 06 Jan 2009 07:46:00 GMT

WordPres blogunuza yeni özellik eklemek istediğinizde WordPress kullanıcıları genellikle ihtiyaçları olan özelliğe ulaşmak için diğer eklentiler üzerinde arama yaparlar ve platformun popülerliği nedeniyle genellikle ihtiyaçları olan eklentiyi de bulurlar. Peki ya ihtiyacınız olan özelliği sağlayan bir eklentiyi bulamazsanız? Bu durumda eklentiyi kendiniz oluşturmanız daha kolay olabilir.

WordPress'in ana özelliklerini geliştirmek için muhteşem bir eklenti çatısı (framework) bulunuyor. Aslında basit eklentiler oluşturmak, WordPress rehberi'nin detaylı ve zengin içeriği ile web'deki diğer makaleler sayesinde beklenmediği kadar kolay.

Eğer siz de WordPress eklentileri dünyasına girmek istiyorsanız, bu yazımda sizlerle bazı kullanışlı ipuçlarını ve kaynakları paylaşacağım. Bu makale size eklenti hazırlamanın ilk aşamalarından eklentinizi tanıtmaya kadar geçen süreçte olan adımlarda rehberlik edecektir.

Oluşturmadan Önce Planlayın
Eğer ana motivasyonunuz bir eklentiye özel bir gereksinimi gidermek değilse, o zaman yeni fikirler oluşturmak ve WordPress eklentileri hazırlamak için pek çok sebebiniz vardır. Elbette, her zaman, WordPress kurulumu ile birlikte gelen bir "merhaba dünya" eklentisi oluşturabilirsiniz, ancak biz biraz daha detaylı bir eklenti istiyoruz, öyle değil mi?

Eğer eklenti fikriniz baştan oluşturabileceğiniz kadar basitse, sadece pratik olsun diye oluşturup daha sonra hiç kullanmayacağınız bir eklenti hazırlamaktansa o zaman kendi eklenti fikrinizi basit bir uygulama olarak kullanmaya çalışmayı deneyin.

Eklenti oluşturmak için kendinize fikir arıyorsanız, DevLounge sitesinin WordPress eklentisi oluşturmak için öneriler makalesinde bir liste yer alıyor.

Güçlü Araçlar Edinin
WordPress eklentinizi, düzgün bir test ortamı oluşturmadan geliştirmeye başlayamazsınız. WordPress eklentisi oluşturmak için ihtiyacınız olacak olmazsa olmaz araçlar aşağıda:

Firefox - Yoksa siz hala annenizin tarayıcısını mı kullanıyorsunuz? Yapmayın, etmeyin, hemen gidin ve Firefox tarayıcısını edinin. Bu tarayıcı Web geliştiricileri için inanılmaz kullanışlı bir araçtır.
Firefox Eklentileri - Eklenizdeki hataları ayıklamak ve eklentinizi tasarlamak için her web tasarımcısının ve geliştiricisinin edinmesi gereken iki eklenti bulunuyor: Firebug ve Web Developer eklentileri.
WordPress - Yerel bilgisayarınıza kuracağınız temiz bir WordPress kurulumu sayesinde eklentilerinizi bilgisayarınızda test edebilirsiniz.

İşe Yarar Bilgileri Edinin
Bu makalenin dışında WordPress Eklenti API kaynaklarına ihtiyacınız olacaktır. İşinize yarayacak birkaç kaynak aşağıda:

WordPress'in Eklenti Kaynakları - WordPress eklentilerine yönelik her şeye dair kaynak rehber. Eğitimler ve nasıl yapılır makaleleri.
WordPress Eklenti API'si - Hayatınızın bağlı olduğu şey, kopya kağıdınız ve WordPress eklentisinin ete kemiğe bürünmesini sağlayacak her şey. Eğer eklenti oluştururken takılırsanız, bu rehber size geriye dönüp hata ayıklamanıza yardımcı olacaktır.
Eklenti API'si Eylem Referansı - WordPress eklentilerinde kullanabileceğiniz eylemlerin bir listesi.
Eklenti API'si Filtre Referansı - WordPress eklentilerinde kullanabileceğiniz filtrelerin bir listesi.
WordPress IRC Kanalı - Sık kullandığınız IRC kanalını çalıştırın ve size yardım etmek için yanıp tutuşan WordPress eklenti geliştiricilerinin buluştuğu bu ortamda siz de yerinizi alın.

Atanmış Bir Test Ortamı Oluşturun
Şimdi ihtiyacınız olan kaynaklara ve araçlara sahip olduğunuza göre test ortamınızı oluşturmanın vakti geldi. Eklenti test ortamı oluşturmak için iki adet yöntem bulunuyor. Eklenti geliştirme sürecini hızlandırmak için en iyi yöntem Apache ve MySQL kullanarak WordPress kurulumu yapmak olacaktır. Her ne kadar bu işlem, sunucu ayarları ve PHP kurulumuna yabancı kullanıcılar için biraz zor olsa da, her iki tekniği kullanarak test ortamı oluşturmak için size rehberlik edecek pek çok makale mevcut.

Windows makineler üzerinde geliştirme yapmak isteyenler XAMPP kullanarak WordPress Kurulumu yapabilirler. Bilmeyenler için XAMPP, Apache ve MySQL platformları kolayca sisteminize kurmanızı sağlayacak bir yazılım. (Not: XAMPP her platformda çalışabilen bir yazılım olup Linux ve Mac kullanıcıları da bu yazılımı kullanabilirler, ancak bir Mac kullanıcısı olarak ben XAMPP'ın kullanımı önermiyorum).

Mac kullanıcıları için önerebileceğim bir diğer seçenek ise MAMP kullanarak WordPress oluşturmak. MAMP yazılımı da tıpkı XAMPP gibi MySQL ve Apache'nin Mac üzerine sorunsuz kurulmasını sağlayan bir yazılım.

Test ortamı oluşturmak için kullanabileceğiniz bir diğer yöntem de doğrudan sunucu üzerinde ayrı bir klasör oluşturarak o klasör içerisine temiz bir WordPress kurulumu yapmaktır. Her değişikliği FTP üzerinden göndermeniz gerekeceğinden yerel makinenize kurulmuş bir WordPress üzerinde test yapmaktan daha yavaş bir çözüm ancak herhangi bir yazılım kurmanız gerekmiyor.

Temelleri Öğrenin
Ne şans ki benim gibi deneyimsiz programcılar için WordPress eklentisi oluşturmak görece basit bir yöntemdir. Elbette oldukça gelişmiş eklentiler de hazırlayabilirsiniz, ancak WordPress'in üzerine inşa edildiği framework'e bağlı kalarak basit bir WordPress eklentisi oluşturmak oldukça kolaydır.

Jarkko'nun 2008 yılının başlarında yazdığı WordPress Eklentileri'nin Anatomisi eklentilerinizi oluşturmak için kullanabileceğiniz mükemmel bir kaynaktır. Makalede WordPress üzerinde gelecekte yayımlanması için önceden yazdığınız eklentileri gösteren bir widget oluşturmanın adımları anlatılıyor.

Veritabanı Verisine Erişmek ve Onu Yönetmek
Veritabanı etkileşimi neredeyse her eklenti için kaçınılmazdır, bu sebeple WordPress veritabanına bağlanmanın ve içerisindeki verilere erişmenin temellerini bilmeniz gerekir. WordPress belgeleri veritabanları ile nasıl etkileşim kurulur sorusunun yanıtına detaylıca açıklıyor.

JavaScript ve CSS KullanınZ
Her ne kadar bazı eklentilerin fazladan bir tasarıma ihtiyacı olmasa da eklentinizin görünümünü biraz iyileştirmenin kimseye zararı olmaz. DevLounge sitesinin bu konuda JavaScript ve CSS gibi elementler WordPress eklentilerine nasıl dahil edilir makalesi sizin için muhteşem bir referans olacaktır.

WordPress eklentilerini iyileştirecek bir diğer element ise şüphesiz AJAX'tır. Bir sayfanın yeniden yüklenmesine gerek kalmadan veri göndermek, eklentiniz üzerinde kullanabileceğiniz kullanışlı bir özelliktir. Aşağıda WordPress eklentilerinde AJAX kullanabilmeniz için bir dizi kullanışlı kaynak yer alıyor:

Çok Yönlü Seçenekler Sayfası Ekleyin
Eklentiniz, WordPress Yönetici Paneli üzerinde kullanılabilecek ve kullanıcısının bazı ayarları değiştirebilmesine olanak sağlayacak bir seçenekler sayfası içerebilir. WordPress Codex üzerinde yönetici panelleri eklemek konulu muhteşem bir makale bulunuyor. Eğer ekran görüntüleri ile zenginleştirilmiş bir rehber arıyorsanız, o zaman WordPress Bits'in WordPress'e Seçenekler Eklemek rehberi işinizi görecektir.

Uluslararasılaştırın
WordPress Eklentinizin geniş kitlelere ulaşabilmesini sağlamanın bir yolu da onu farklı dillere çevirmektir. WordPress eklenti çatıs, geliştiricilerin eklentilerinin farklı dillere çevrilebilmesine olanak sağlar.

Kitlelere Ulaştırın
Yeni hazırladığınız eklentinin geniş kitleler tarafından ulaşılabilmesini sağlamak için birkaç kullanışlı kaynak:

WordPress.org Eklenti Dizini - Resmi WordPress sitesi eklentinizin duyurulması için kullanabileceğiniz en iyi kaynaktır. Gelişmiş bir eklenti dizini bulunan bu kaynakta pek çok WordPress kullanıcısı ihtiyaçları olan eklentileri bu kaynak üzerinde ararlar. Tek yapmanız gereken bir hesap açmak ve eklentinizi göndermek. Eklenti daha sonra WordPress.org tarafından onaylanacak ve ekip, eklentinin eklenti rehberine uygunluğunu kontrol edecek.
Weblog Araçları Kolleksiyonu - Weblog Tools Collection websitesi geniş kesimler tarafından okunan, bloglama araçları ve eklentilerine yönelik geliştirilmiş bir web sitesidir. Eklentinizi bu site üzerine de kayıt ettirebilirsiniz.
WordPress Forumları - WordPress Forumlarını kullanarak eklentiniz için beta testçileri bulabilir, eklentinizin herkes tarafından indirilmeden önce hatalardan arınmış olduğuna emin olabilirsiniz.
Eklenti Gönderimi ve Promosyonu - WordPress Codex üzerinde, eklentinizin diğer WordPress kullanıcılarının erişimine açılması için atılması gereken adımlara yönelik güzel bir makale.

Kaynak: nettuts

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

Tasarımcılar İçin Renk Planlama (Color Scheming)

Gobius — Wed, 07 Jan 2009 07:50:00 GMT

Bir web sitesinde çalışmaya başlamadan önce daima üzerinde çalışacağım bir renk şemasına sahip olmak isterim. Bu sadece estetik sebepler yüzünden değil, ayrıca tutarlılık ve websitesine alışılabilirlik gibi sebepler yüzünden önemlidir. Bazen müşterileriniz iki yta da üç renk şeması ile size geleceklerdir (diyelim iki ya da üç renk), ya da en azından web sitesinin üzerine inşa edileceği bir rengi size bildireceklerdir. Eğer emin değillerse o zaman bana sundukları grafik içeriğe (logo, resimler, simgeler vs.) bakar ve onlar ışığında kendi renk şemamı oluşturmaya çalışırım.

Internet üzerinde, tasarımlarınızın piksel mükemmeliğinde olmasına yardımcı olacak renk kaynakları bulunuyor.

İster aklınızda bir renk şeması olsun, ya da size ilham verecek ve rehber olacak kaynaklar arıyor olun, bu yazımda sizlerle bir dizi renk şeması oluşturmanıza yardımcı olacak kaynakları listelemeye çalıştım.

Color Blender
Renk kaydırma çubuğunu kullanarak ya da doğrudan renginizin RGB değerini girerek site size renk şemasını sunacaktır. Bu sitenin sunduğu bir güzel özellik, oluşturduğunuz renk şemasını photoshop ya da illustrator için indirebilmeniz, ya da kendinize elektronik posta olarak gönderebilmeniz.

Color Schemer Online V2
Şema doğrudan girilen RGB veyea HEX değerine göre oluşturuluyor. Sitenin ayrıca Windows ve Mac üzerinde çalışan yazılım sürümü de bulunuyor.

Color Scheme Genarator V2
Önerilen renk şeması görüntülendikten sonra tek bir değr girn. Şemalar Pastel, Karanlık/Aydınlık, Kontrast ve Solgun olabilir. Sitenin sunduğu bir diğer güzellik de (her ne kadar kaç kişinin işine yarayacağını tam olarak kestiremesem de) görüntülene renk şemasının çeşitli bakış açılarında nasıl görüntüleneceğini de size sunabilmesi (örneğin renk körleri için).

Internet üzerinde ayrıca kullanıcılar tarafından daha önce oluşturulmuş renk şemalarının listelendiği web siteleri de bulunuyor, tıpkı galeri web siteleri gibi.

COLOUR LOVERS
Bu site gerçekten muhteşem!!! Her ne kadar size bu makalede belirttiğim tüm siteleri ziyaret etmenizi önersem de, eğer bunlardan sadece birini seçmek istiyorsanız tercihiniz bu siteden yana olmalı. Site üzerinde, içinizdeki sosyal ateşi söndürebileceğiniz forumlar ve grupların yanısıra paletler, motifler, bireysel renk sayfaları da bulunuyor ve tüm bunların hepsi üzerinde arama yapabilir, içeriği filtreleyebilirsiniz. Paylaşılan içerikler pek çok biçimde indirilebilir (ASE, PS, AI, GIMP, HTML ve ZIP biçimlerinde). Sitede ayrıca pek çok yararlı bilgiye ulaşabileceğiniz bir blogun yanısıra TRENDLER bölümünde hem magazin hem de web dünyasının son renk trendlerine ulaşmanız mümkün. Kesinlikle takip etmeye değer.

Kuler
Adobe Air tabanlı bir websitesi olan Kuler'in yaklaşımı ve konsepti biraz ilginç. Color Lovers'a oranla biraz sönük kaldığını söylemek zorundayım. Burada kendi tercihlerimi ön plana çıkarmak istemiyorum, ama gerçekten, Colour Lovers muhteşem bir site.

Verlee's Daily Color Scheme
Bir süredir beta formunda yayın yapan ve 2006'dan beri güncellemeyen güzel görünümlü bir site. Sitenin ana alan adı halin "Yakında..." ibaresini içeriyor. Site bir renk şeması galeri sitesi ve bir süredir aktif olmamasına rağmen site bünyesinde güzel ve size ilham kaynağı olabilecek içerik bulunuyor.

Color Combos
Renk şeması / palet galeri web sitesi. Bir imaj üzerindeki renkleri çıkarabilmek için birkaç yolunuz var. Ya Photoshop ya da GIMP gibi masaüstü yazılımlarını kullanır, ya da referans imajınıza bağlantı kurabilecek çevrimiçi kaynakları kullanırsınız.

Color Palette Generator
Bir imajın tam URL'sini girin ve site, o imajı temel alarak sizin için renk paleti oluştursun.

Eğer üzerinde çalışacağınız bir imaj yoksa ama müşteriniz beğendiği siteleri sizlerle paylaştıysa, ya da size ilham kaynağı olabilecek bir websitesini biliyorsanız, o kaynaklarda kullanılan renklere ulaşmak için birkaç yöntem bulunuyor.

Eğer Firefox kullanıyorsanız Web Developer eklentisini kullanabilirsiniz. Eklentini seçtiğiniz websitesinin renk bilgisini gösterebilme özelliği bulunuyor.

Internet üzerinde bir dizi website galerisi de bulunuyor. Bu siteler websitelerini renklerine göre kategorilendiriliyor.

Renk Bilgisi Sunabilen Web Site Galerileri

Seçili Websiteleri İçin Özel Renk Bilgileri Sunan Website Galerileri

Birkaç Tane Daha İşe Yarar Kaynak:

CSS Color Chart
Her rengin HEX değerleri ile birlikte doğal ve genel kullanım için uygun renkleri gösteriyor.

Colors on the Web
Bu websitesi, geniş renk bilgisi, renk teorilerine yönelik araçları ve Color Contrast Analyzer for Accessibility (Erişilebilirlik İçin Renk Kontrast Analizatörü) ile çok değişik bir site. İlgili araç web sitesinin arkaplan rengi ile metin rengine bakıyor. Bunun yanısıra sitenin üç renk şema oluşturucusu da bulunuyor. Sitenin ayrıca iki sütunlu arabirimi üzerinde seçilen renk şeması ve metnin o şemada nasıl görüntüleneceği de gösteriliyor.

Renk Sihirbazı - renk uyumu uygulaması üzerinden kendi tekil renk değerinizi girebilir, ya da bunu sizin için yapacak uygulamayı kullanabilirsiniz. Veri girildiğinde ona ait olan renk varyasyonları, doyum varyasyonları, ton ve gölge varyasyonlarının yanısıra önerilen renk şemaları, bileşik renkler hakkında bilgiler, renk kontrastı ve kullanılan renklere ait bilgiler veriyor.

Renk Şemacısı - CSS website galerilerine benzer bir site, ancak CSS yerine kullanıcılar tarafından gönderilen renk paletlerini içeriyor.

Bana göre renk, güzel bir web sitesinin en önemli yönüdür. Beni yanlış anlamayın, şablon, navigasyon ve tipografi de önemlidir, ancak bir web sitesinin renk seçimi kötü ve insan gözüne rahatsızlık verici ise, o zaman ziyaretçiniz GERİ düğmesine mümkün olan en kısa sürede basacaklardır.

Umarım yukarıdaki kaynakların size bir faydası dokunur.

Hepinize 2009 için iyi dileklerimle.

Kaynak: styl.eti.me

Bu yazı Gobius 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 İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri

Gobius — Thu, 08 Jan 2009 07:45:00 GMT

jQuery'i ve onun geliştiricilerin hayatını kolaylaştırma yöntemlerini seviyorum. Her ne kadar jQuery'i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery'nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir bağlantı üzerine getirdiğimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani şu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu gelişmiş kütüphane ile neler yapılabileceğini araştırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiği kullanarak oluşturulmuş 3 örneği göstereceğim.

3 ipucunu bir arada indirin

Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.

Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:

Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)

Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.

<a href="http://www.hafif.org" class="tooltip" title="meraklı ol!">ipucu için farenizi buraya sürükleyin</a>

Betiği uygulama üzerinde görün

Örnek 2: Resim Önizleme Galerisi

Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.

<a href="1.jpg" class="preview"><img src='http://www.bildirgec.org/1s.jpg' alt="gallery thumbnail" /></a>

Betiği uygulama üzerinde görün

Örnek 3: URL Önizlemesi İçeren Bağlantılar

Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Betiği uygulama üzerinde görün

3 ipucunu bir arada indirin

Kaynak: CSS Globe

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

dahice hazırlanmış 20 sıradışı logo

Gobius — Thu, 08 Jan 2009 10:02:00 GMT

Logolar her yerde. Bu sebepten başarılı bir logo ilk olarak diğer milyonlarca logo arasından sıyrılmalı, tasarımıyla dikkat çekebilmelidir.

bison logo

Başarılı bir logo, hem akıl dolu hem benzersiz bir uyum içinde hem de biraz sıradışı olmalıdır. Bunu başarabilen logolar çok azdır. Ve bu bildiride mutlaka görmeniz gerektiğini düşündüğüm, onların, aşağıdaki örneklerine yer vereceğiz.
Benim favorim, Seamus Leonard tarafından tasarlanamış olan yukarıdaki bison logosu.

London Symphony Orchestra

Schizophrenic logo

Rehabilitation Hospital Corporation of America

diğerlerine buradan ulaşabilirsiniz.

son olarak, logolar ile ilgili yayınlanmış şu yazılar da ilginizi çekebilir:
ünlü logo denklemleri: eğlence ve matematik
logoları bir de böyle düşünün!
dünyaca ünlü logolar krizden nasıl etkilenir
tasarımı yenilenen 33 adet logo
kardeş olan logolar
ünlü logoların yeni anlamlı yaşamları
50 Olimpiyat Logosu: 1924 - 2016
120 adet göz kamaştıran logo tasarımı

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

internet çağında iş bulma rehberi

Gobius — Thu, 08 Jan 2009 12:26:00 GMT

Kriz ülkemizi teğet geçiyor ama bazılarımızı teğet geçmedi, kalanlardan da önümüzdeki günlerde onikiden vurulacaklarımız olduğu kesin. bilinen yöntemler değil internetin sosyal ortamlarını kullanarak neler yapılabiliri dan schawbel mashable'da incelemiş. dan schawbel bu konuda kitap yazmış biri, dolayısı ile söylediklerini es geçmemek yerinde olabilir. doğal olarak bazı ip uçları ülkemize uymuyor, ben uyabilenleri aktarmaya çalışacağım.

iş arama yerine bağlantı arayın. birçok iş arayan firma kariyer siteleri, ilan gibi mecralara gitmeden önce çevrelerini kullanıyorlar. birçok insan kaynakları yöneticisinin elinde bir yolla kendilerine ulaşmış geniş bir cv tabanı bulunuyor. istatistikler açık işlerin %80 oranında tavsiye ile dolduğunu söylüyor. bir kısmı ise web üzerinden yapılan araştırmalarda şirketleri için çalışmasından memnuniyet duyulacak kişilere götürülen teklifler ile bulunuyor. peki bağlantı / kişi nasıl bulacağız:

hangi şirketler için çalışmak istediğinizi belirleyin. yüzlerce cv'yi sağa sola göndermek yerine hem belirlediğiniz firma için iyi bir aday olduğunuzu hem de bu firma için çalışmaya çok istekli olduğunuzu gösterin.
bu firmalarda çalışan kişiler bulun, nasıl diye sormayın artık insanların yüzlerce blogu var, biraz "search" edin, gruplara girin ve hedeflerinizi tesbit edin.
bu kişiler ile doğrudan temas kurun, internet ortamında e-mail ile, mesajlaşma ile, yorum yazarak ahbap olmak daha kolay.

kendinizi pazarlayın, eski yöntemlerde siz iş arıyordunuz, yeni yaklaşım ise işi sizin ayağınıza getirebilmek. yani içerik üretin, bir blog kurmanız bunun en kolay yolu. bırakın firmalar size hayran olsun, bizle çalışır mı diye düşünsünler. beğenmeyen zaten size ulaşmaz, boşuna iş başvurusu yapıp reddedilmekten de kurtulursunuz.

twitter gibi ortamlarda aktif olun, ancak doğru bir profil oluşturmayı unutmayın. sizinle ilgili bilgi isteyen blog'unuza ulaşabilsin.
tabii ki LinkedIn'i de kullanın, birçok kafa avcısı buralarda aktif, siz de onların rahatlıkla ulaşabilecekleri uzaklıkta olun, birileri sizi 'recommend' etsin, outlook'unuzdaki tüm contaklarınızı yükleyin, her kişi size yeni linkler getirecektir, hatta premium için para ödeyin, böylece ikinci üçüncü linkler ile de bağlantı kurabilirsiniz.

reklam verin! facebook'da, google'da kişisel web sayfanızın reklamını verin, görünen başlık ne konuda guru veya uzman olduğunuzu, sonraki beş altı kelimede de etiketlerinizi öne çıkarın hemen altında da kişisel sayfanıza link verin.

iyi yapabilecekseniz kendinizi tanıtan bir video hazırlayıp youtube'a değil (erişim yasak) bir başka video sitesine koyun.

birkaç öneri de benden (25 yıla dayanan tecrübe ve yüzlerce elemanı işe alan biri olarak) yukarda sayılan ortamlarda kendinizin reklamını yapmaya çalışırken ingilizce deyimle 'polite' yani nazik olun, 'arkadaşlar', 'baba' gibi başlayan ifadeler kullanmayın. sitenize koyacağınız resimleri mutlaka dikkatle seçin, yani bir yerde kafa çekerken değil de örneğin balık tutarken bir resim daha etkin olur. kimse elinde silah ile veya askeri ünüforma ile ya da rambo kıyafeti olan bir kişiyi zorda kalmadıkca işe almak istemez.

özetle kendinizi tanıtın, hürriyet gazetesinin iş ilanlarına bakmak ile uğraşmayın boşuna...

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