bildirgec.org - kara - beğendikleri

5 Adet İşe Yarar Jquery Eklentisi!

kara — Tue, 03 Aug 2010 07:00:00 GMT

web-delicious tarafından geliştirilmiş olan ve Web projelerinde sıklıkla ihtiyaç duyulabilecek bu 5 Jquery eklentisini, ücretsiz olarak indirdip denedikten sonra, sunduğu kolay kullanım imkanı ve oldukça fazla sayıdaki işlevsel özellikleri beğeninizi kazanacaktır.

1- JQuery Event Calendar Plugin (Demo | Belge | İndirin):
Bir Google takvim klonu olan wdCalendar, Google takvim'de bulunan birçok özelliği kullanıcılarına sunmakta.

2- JQuery Scroll Tab Plugin (Demo | Belge | İndirin):
wdScrollTab eklentisi, web sayfalarınıza sekme ile içerik eklemenizi sağlamakta.

3- JQuery Checkbox Tree Plugin (Demo | Belge | İndirin):
Checkbox kutucuklarını ağaç görünümlü bir şekilde sunmanızı sağlamakta.

4- JQuery Date Picker Plugin (Demo + Belge | İndirin):
Kullanışlı bir tarih seçici eklentisi.Ayrıca aşağı açılır menüsü ile ay ve yıl seçimlerinin de yapılabilmesini sağlamakta.

5- JQuery Context Menu Plugin (Demo + Belge | İndirin):
Web sayfanıza, bilgisayarınızın masaüstünde sağ tıkladığınızda açılan menünün (Context menu) bir benzerini eklemenizi sağlamakta.

Bu 5 eklenti için hazırlanmış "toplu demo" sayfasına buradan ulaşabilirsiniz.

[Bonus+++++]
+Beslemesi Olmayan Web Sitelerini Google Reader İle Takip Edin!
+Sosyal Ağlarda En Fazla Vakit Geçirenler
+Web Sayfanıza Google Analytics Sayacı Ekleyin!
+OKyoutube İle Youtube'tan Video İndirmek Çocuk Oyuncağı!
+Web'teki En Seçkin Webmaster Kaynakları Burada!
[Kaynak] web-delicious
[Paylaş] Sosyal Medya paylaşım sayfası burada.
[algoz Takip Noktaları] Bildirgeç Profil
Blog FF Twitter Facebook + Buzz E-posta RSS Mobil iPhone

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

Türkçe WordPress Kaynakları

kara — Thu, 17 Jun 2010 14:08:00 GMT

wordpress, çoğumuzun bildiği gibi 2003 yılından beri geliştirilen açık kaynaklı, ücretsiz dağıtılan bir blog sistemi ve hatta son zamanlardaki hali ile bir içerik yönetim sistemi. açık kaynak kodlu olması ve kolayca geliştirilebilmesi sebebiyle wordpress hakkında internette yüzlerce siteye rastlayabiliriz, hemen hemen her dilde içerik bulabiliriz. genel olarak yalnızca i̇ngilizce gibi yaygın bir dili bilen ve programlama ile uğraşan insanlar kategorisinin dışında kalanlara da hitap ettiği için ben burada zaman zaman başvurduğum türkçe wordpress kaynaklarını derlemeye çalıştım, umarım faydalı olur.

1) WordPress Türkiye

wordpress’in resmi türkçe web sitesi. bu işe gönül vermiş ve epey zaman harcayan insanlar tarafından sürekli olarak güncel tutulan bu web sitesinin özellikle forum bölümünden yararlanabilir, sürekli ve hızlı olarak güncellenen türkçe dil dosyalı son wordpress sürümlerini buradan edinebilir ayrıca wordpress hakkında düzenlenmiş olan türkçe dokümanlara buradan ulaşabilirsiniz. Türkçe tema mı arıyorsunuz? Temalar kısmı da hizmetinizde! ayrıca, eklentiler de burada.

2) wordpress destek sitesi
eğer yanlış hatırlamıyorsam ilk kurulduğunda çok daha etkin ve efektif bir ara birime sahipti ama şimdi de türkçeleştirilmiş birçok dosyaya, eklentiye ve temaya bu site üzerinden ulaşabilirsiniz.

3) yakuter

yakuter birçok alanda olduğu gibi özellikle wordpress alanında da birçok işe yarar bilginin, dosyanın bulunabileceği güncel bir web sitesi. wordpress ile ilgili birçok hack, kod, eklentiyi bu web sitesinden bulabilirsiniz.

4) wptema

wptema.com benzerleri gibi içerisinde birçok türkçeleştirilmiş tema bulunabilecek bir web sitesi. eğer yeni bir kurulum yapıyorsanız muhakkak bakmakta fayda var.

5) wp tr

bu web sitesinde gene Türkçeleştirilmiş temalara ulaşabilir, birçok Türkçe eklenti bulabilir ve hatta kendi temalarınızı bu site üzerinde yayınlayabilirsiniz.

6) eklenti.net

eklenti.net isminden de anlaşılacağı gibi wordpress eklentileri üzerine yoğunlaşmış bir web sitesi. her ne kadar türkçeleştirilmiş eklentiler çok fazla olmasa da en azından hangi eklenti hangi amaçla kullanılıyor bu konu hakkında bu site üzerinden bilgi almak mümkün.

7) wp-eklenti

wp eklenti.com aynı eklenti.net gibi birçok eklenti hakkında kurulum detaylarını bulabileceğimiz bir web sitesi. i̇çerik olarak birbirlerinden pek ayrılmasalar da arada bir göz atmakta fayda var.

8) karuser

bu web sitesinde tasarımla ilgili birçok bilgiye ve araca ulaşmak mümkün. aynı zamanda buradan da wordpress ile ilgili türkçe döküman bulabilir ve aynı zamanda eklentilere, temalara ulaşabilirsiniz.

9) karalamalar

karalamalar.net de gene wordpress ile ilgili birçok döküman bulabileceğiniz bir web sitesi. her ne kadar wordpress kısmı pek sık güncellenmese de buradan 16 adet Türkçeleştirilmiş eklentiye ulaşmak mümkün.

10) hasan yılmaz

hasan yılmaz’ın blogunun wordpress kısmından da eklentilere ve bazı sorunlara yanıtlara ulaşmak mümkün.

11) hakkı ceylan

wordpress türkiye ekibindan hakkı ceylan’ın kişisel web sitesinde de wordpress ile ilgili birçok bilgiye ulaşmak mümkün. özellikle « wordpress’i daha verimli kullanmanın yolları » yazısı mutlaka okunmalı.

12) turk tema

birçok eklentinin ve temanın derlendiği bir web sitesi. bunların dışında bir de istediğinizi sorabileceğiniz destek alabileceğiniz bir de forumu mevcut.

13) zoque forum wordpress

zoque forum’un i̇çerik yönetim sistemleri bölümünde de konu ile ilgili birçok yazı bulabilir aynı zamanda bu konu ile ilgilenen başka kullanıcılarla iletişime geçebilirsiniz.

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

2008'in En İyi Flash Oyunları Seçildi

kara — Tue, 27 Jan 2009 07:02:00 GMT

Mochi Media networkünde yer alan flash oyunlar arasında 2008 yılında en çok beğenilen ve oynanan oyunları açıkladı. Bu oyunlar binlerce oyun sitesinde milyonlarca kez ziyaretçiler tarafından oynanmış ve 2008 En İyi 10 Flash Oyun listesinde yer almaya hak kazanmıştır.
Bu listede yer alan oyunları sizler için topladım.
İyi eğlenceler dilerim....

Bloons
Ninja Kiwi tarafından yapılmıştır. Bu firma balon patlatma oyunlarının en güzellerine imza atmıştır.
Bir maymun ve bir miktar dart ile hedeflenen sayıda balonu patlatmaya çalışıyorsunuz. Hem beceri hem de strateji gerektiren çok eğlenceli bir oyun.

Jane’s Hotel
Realore Studios firması tarafından yapılmıştır. Ticaret oyunlarından hoşlananlar için çok güzel bir oyun. Otel işletiyorsunuz ancak müşterilerin tüm ihtiyaçlarına bizzat koşturmak zorunda olduğunuzu belirtmeliyiz.

Bubble Struggle 2
Oyunun yapımcısı Krešimir Cvitanović. 2 kişilik de oynanabilen bu oyunda amaç zıplayan topları vurarak yok etmek ancak her vurulduklarında küçülüp ikiye ayrılan bu toplar ile belirli bir stratejide mücadele etmezseniz onları yok etmeniz neredeyse imkansız.

Pizzeria
Flipline Studios tarafından yapılmıştır.
Bir gün ustanız sizi terkeder ve pizza dükkanını olduğu gibi size bırakır ise ne yapardınız? İşte bu oyun ile bunları yapmanız gerekiyor. Siparişi almak, pizzayı yapmak, servis etmek, hepsi sizin göreviniz.

Fancy Pants
Borne Games tarafından yapılmıştır. Bu oyuna yeni nesil Süper Mario desek pek yanılmış olmayız. Görsel efektleri çok hoş olan bir platform oyunu. Kahramanı çizgilerden oluşuyor ancak hareketleri ve kabiliyetleri müthiş.

Tower Bloxx
Digital Chocolate tarafından yapılmıştır. Gökdelenler inşa ederek şehir oluşturmaya çalışacaksınız ancak göktelenleri hazır katları üst üste koyarak oluşturmak göründüğü kadar kolay değil. Gökdelenleri oluşturup şehrinizin büyüdüğünü görmek size haz verecektir.

Cube Crash
Ocean Breeze firması tarafınan yapılmıştır. Yan yana gelen aynı kutuları yok etmek üzerine olan bu bulmaca oyunu aynı zamanda kutuları yok ederken oluşan güzel görüntü efektleriyle oynayan kişiye ayrı bir mutluluk veriyor.

Bricks Breaking
Novel Games tarafından yapılmıştır. Cube Crash oyunu ile aynı katagoride bir oyun ancak bölümleri temizleyip bir üst bölüme geçmek mümkün. Sadece kutuları tek bırakmamak gerekiyor, tek kalan kutuları temizlemek belirli bir sayıda mümkün.

Paris Hilton
Shaun’s Flights tarafından yapılmıştır. Paris Hilton'u sevmeyenlerin tercih edeceği bir oyun bu. Amaç Paris'i abur cubur ile besleyip şişmanlatmak. Eğlenceli vakit geçirebilirsiniz ancak çok fazla birşey beklememeniz gereken bir oyun.

Stunt Dirt Bike
YouGame.com tarafından yapılmıştır. 2 boyutlu ortamda engellerin ve arabaların üzerinden 4 tekerlekli motorsikletiniz ile geçmelisiniz. Sürücünün pozisyonuna göre motoru dengelemeniz gerekecektir.

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

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

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

50 YTL ile internette ne kadar tanıtım yapabilirsiniz?

kara — Wed, 23 Jul 2008 10:00:00 GMT

Küçük firmalar, kobiler, yeni bir ürün sunan işletmelerin en büyük derdi tanıtım. Tanıtım yapmadan yeni müşteriler bulmak çok zor. İnternet üzerinden alçak gönüllü bütçeler ile ve metin bazlı reklamlarla tanıtım yapmanın bir avuç yolu var: Google Adwords, Facebook, Doğan Grubu’nun ADNet’i, Mynet’in Adklik’i ve aramıza yeni katılan Pilli İlan. Nokta’nın Virgül’ü de düşük bütçeler ile tanıtım yapabileceğiniz bir alan, ancak metin bazlı reklam alanlarından daha çok banner alanı pazarladıkları için bu deneyin dışında kalıyor.

Bu yazıyı, bütün bu servisleri 50,00 YTL’lik bir bütçe ile denemeye çalıştıktan sonra yazıyoruz. Servisler birbirinden olabildiğine farklı olduğu için, kampanyaların başarısına etki eden birçok farklı faktör olduğunun da farkındayız. Biz testimizi yaparken ortalama bir kullanıcının yapacağı seçimleri tahmin etmeye çalıştık. Hiçbir servisin uzmanı değiliz. Daha başarılı kampanyalar yaratabilmek için yapılması gerekenleri (büyük ihtimalle herkes gibi) bilmiyoruz.

Google Adwords

Google Adwords ile yapılabilecek harika şeyleri sitelerimizde görüyoruz. Ama bunları hayata geçirmek anlaşılan ayrı bir konu. Sanırız “Adwords Professional” şeklindeki mertebeler, sertifikalar boşuna değilmiş.

Google yarattığınız ilanları konunuz ile ilgili arama sonuçları sayfasında ya da konunuz ile ilgili web sitelerinde yayınlayabiliyor. Bunu yapabilmek için öncelikle konunuzla ilgili bir terimler listesi üretmeniz gerekiyor. Bu listedeki terimler arandığında reklamınızın görünmesini istiyorsanız, her terim için ayrı bir minimum teklif girmeniz gerekiyor. Bu teklifler bir tıklama için gözden çıkarabileceğiniz ücretler olmalı.

Ancak reklamlarınızın yayınlanabilmesi ya da iyi sıralarda çıkabilmesi için rakiplerinizin verdiği ilanlardan daha yüksek tıklama ücretleri verebiliyor olmalısınız. Rekabetin yüksek olduğu terimlerde tıklama ücretleri 10 dolarları bulabiliyor.

Google, ayrıca reklamınıza tıklanınca gidilen web sayfasının da konu ile gerçekten ilgili olmasını istiyor. Eğer ulaştığınız sayfa konunuz ile ilgili anahtar kelimeler içermiyorsa minimum tıklama ücretlerini sizin ilanınız için çok pahalı yapabiliyor.

Ayrıca direkt site hedefleyerek gösterim de yapabiliyorsunuz. Böyle yaptığınızda tık başına değil gösterim başına ücret ödüyorsunuz. Biz genel yayıncı ağında ve aramalarda gözükmeyi ve tıklama başına ödemeyi seçtik.

Deneme için 37 terim ve günde 10$’lık bütçe ile verdiğimiz reklam 15 dakika içinde yayına girdi, ancak 1 saat sonra 37 terimimizden 25’i haddinden az tıklama ücreti teklifi yüzünden pasif konuma getirilmişti. Bazılarını tekrar aktif konuma getirmek için Adsense bizden tıklama başına 5.00$ istedi, vermedik. Geriye kalanlar için 0.20 – 0.50 arasında fiyatlar istedi, ne yapalım deyip, kabul ettik.

Sonuç
Kaç gün sürdü: 4,1 gün
Kaç gösterim yaptık? (impression): 125.900
Kaç kez tıklandı? (clicks): 93
Tıklanma oranı neydi? (CTR): %0,07
Bir tık ne kadara maloldu? (CPC): 0,53 YTL
1000 gösterim ne kadara maloldu? (CPM): 0,39 YTL

Adwords uzmanı olmadığımızı tekrarlayalım. Eminiz bilmediğimiz numaralar ile çok daha verimli bir tanıtım yapmak mümkündür. Ama Adwords o kadar karmaşık ki, becerebildiğimizin en iyisi bu oldu.

Artılar:

Terim seçmeye yeterince emek harcarsanız nokta vuruş yapabiliyorsunuz.
Lokal gösterim mümkün. Yani haritadan seçerek, reklamım sadece Bursa’nın Nilüfer ilçesinde görünsün diyebiliyorsunuz.

Eksiler:

Terim seçmeye çok emek harcamak gerekiyor.
Reklamınız hangi sitelerde ne kadar görünecek pek bilemiyorsunuz
Belli siteleri hedeflemiş olsanız bile, ilanınızın bu sitelerde ne kadar gösterildiğini bilemiyorsunuz.
Başta her şey çok ucuz olacak sanıyorsunuz, ancak seçtiğiniz terimlerdeki rekabet ya da Google’ın iniş sayfanızı ya da reklam metninizi beğenmemesi yüzünden birçok teriminiz minimum teklif 5.00$ gibi rakamlara yükseltilmeden gösterilmiyor.
Bunun bir doğru yolu varsa da bunca yıldır bilgisayarcı olmamıza rağmen çözemedik

Facebook

Facebook da önemli bir kanal. 3.5 milyon Türk’e ulaştığını iddia ediyor. Reklamınızın gösterileceği kitleyi detayları ile hedefleyebiliyorsunuz. Örneğin reklamım Türkler arasında 18-25 yaş arası bekar kadınlara gözüksün diyebiliyorsunuz. Ancak Facebook hedefleme sistemine ilgi alanlarını koymuş dahi olsa, Türk kullanıcılar ilgi alanlarını özenle bildirmediklerinden konuya göre hedefleme yapamıyorsunuz.

Tıklama başına ya da her 1000 gösterim için fiyat teklifi yapabiliyorsunuz. Her tık’a ne kadar vereceğiniz sitenize gelen müşterilerin sizin için değerine bağlı. Örneğin bir şey satıyorsanız, kaç tıktan ne kadar gelir elde ettiğinizi biliyor olmalısınız. Bundan daha düşük bir teklifte bulunduğunuzda zarar etmiyorsunuz.

Facebook’daki denememizde de günde 10$’lık bir bütçe belirledik. Her tık’a en fazla 0,17$ veririz dedik.

Sonuç
Kaç gün sürdü?: 4 gün
Kaç gösterim yaptık? (impression): 818.902
Kaç kez tıklandı? (clicks): 251
Tıklanma oranı neydi? (CTR): %0,03
Bir tık ne kadara maloldu? (CPC): 0,19 YTL
1000 gösterim ne kadara maloldu? (CPM): 0,06 YTL

Facebook’da insanlar reklamlara pek tıklamıyorlarmış. Ortaya bu çıkıyor. Sistem karmaşık değil ama performansı biraz düşük.

Artılar:

Demografi hedefleyebiliyorsunuz. İlanımı belli yaş aralığındaki kadınlara göster diyebiliyorsunuz.
Sosyal aksiyonlar ekleyebiliyorsunuz. Arkadaşınız bu ilan ile ilgili bir facebookpage’in fan’ı ise ilan ile birlikte arkadaşınızın avatarı da gözüküyor. Bu da daha çok tıklatıyor.

Eksiler:

İlgi alanına göre hedefleyemiyorsunuz. Zira Türk kullanıcılar ilgi alanlarını pek doldurmuyorlar
Tıklanma oranları pek düşük.

Mynet Adklik

Mynet Adklik’i kullanmayı beceremedik. O kadar fena. Bizden daha üyelik yaratmadan anahtar kelimeler seçmemizi istedi. Anahtar kelimeleri istediğiniz gibi giremiyorsunuz. Bir kelime giriyorsunuz, sistem size benzer başka kelimeler tavsiye ediyor, aralarından seçiyorsunuz. Adwords’de kullandığımız terimleri girdik, ilanımızı yarattık, 50YTL ödedik, ama ilanımızı nasıl yayına sokacağımızı bulamadık. Bir gün geçti, hala herhangi bir gösterim yapmış değildi. Üstelik arayüzde #keyword_exists# #cc_amount# #montant_1# 18.00% #montant_2# böyle başlıklar var. Gerçekten hiçbir şey anlaşılmıyor.

İki gün sonra Mynet’ten, ilanımızı bu haliyle yayınlayamayacaklarına dair bir mail geldi. Mailde "aşağıdaki sebepten yayınlayamıyoruz" yazıyordu. Ancak aşağıda bir sebep yoktu. Pilli İlan reklamı verdiğimiz için, rekabet yüzünden yayınlamadıklarına kanaat getirdik (doğal bir şey). İlanı sosyomat ilanına çevirdik. Bir gün sonra aradılar. Kredi kartı bilgilerimizi ilk sorduklarında para çekmediklerini, eğer ilanımızın yayınlanmasını istiyorsak tekrar sisteme girip para yüklememiz gerektiğini anlattılar. Ayrıca sosyomat ilanımızın da Türkçe imla kurallarına uygun hale getirmemiz gerektiğini anlattılar (küçük harfle başlamamalıymış). Tekrar sisteme girip 50 YTL yatırdık. Anahtar kelimelerimizi düzenledik. Adklik 100 kelimeye izin veriyor, 76 adet arkadaşlık konusu ile ilgili Adklik’in tavsiye ettiği terim ekledik.

Sonuç:
Kaç gün sürdü?: 4 gün ve hala sürüyor şu anda sadece 0,64 ytl harcamış durumda.
Kaç gösterim yaptık? (impression): 44.372
Kaç kez tıklandı? (clicks): 16
Tıklanma oranı neydi? (CTR):%0,04
Bir tık ne kadara maloldu? (CPC): 0,04 YTL
1000 gösterim ne kadara maloldu? (CPM): 0,015 YTL

Adklik maceramız tam bir hüsran idi. Birçok bürokratik engeli aştıktan sonra da kendi tavsiye ettiği terimlerde fazla gösterim yapamadığı ortaya çıktı.

Artılar:

Maalesef.

Eksiler:

Karmaşık ve hatta bozuk arayüz.
Bürokrasi (minimum 2 telefon görüşmesi gerekti.)
Gösterim sayısının kelime seçimine bağlı olduğunun farkındayız, ama bu kadar az gösterim de ayıp oluyor.

ADNet

ADNet Adklik’e göre epey daha derli toplu. İlanımızı yarattık, gösterilmesini istediğimiz alanları seçtik. Tık başına ödeyeceğimiz rakamları bildirdik (minimumdan bir kuruş yukarısı), toplam bütçe (50 YTL) ve günlük bütçe (10 YTL) bildirdik, onaya bıraktık. Ancak ertesi gün ilanın onaylanmadığını gördük. Biraz sonra da neden onaylanmadığını açıklayan bir telefon aldık. Yine rekabet filtresine takılmışız (Pilli İlan reklamı hazırlamıştık).

Olabilir, bu bir iş kararıdır deyip ADNet ile rekabet içinde olmayan bir ürüne, sosyomat’a bir reklam hazırladık. Kabul edildi ve yayına girdi.

Sonuç:
Kaç gün sürdü?: 5 gün
Kaç gösterim yaptık? (impression): 1.952.509
Kaç kez tıklandı? (clicks): 373
Tıklanma oranı neydi? (CTR): %0,019
Bir tık ne kadara maloldu? (CPC): 0,13 YTL
1000 gösterim ne kadara maloldu? (CPM): 0,03 YTL

Adnet’in en önemli özelliği reklamınızı Hürriyet, Milliyet gibi sonsuz sayfa gösterimi yapan popüler sitelerde göstermesi. Bu kadar çok impression varsa tabii tıklanma oranı düşük oluyor.

Artılar:

Hedeflemenizi reklamınızın gösterileceği site bölümü üzerinden yapabiliyorsunuz. Örneğin Hürriyet Kelebek = Kadın diyebiliyorsunuz. Kelimelere göre hedefleme de galiba var ama karşımıza çıkmadı. Emin değiliz.
Çok yüksek sayfa gösterimli popüler siteler (görünürlüğünüzü arttırıyor)

Eksiler:

Bürokrasi (3 telefon görüşmesi gerekti, ancak Adklik’ten daha hızlı ve yardımseverler.)
Çok yüksek sayfa gösterimli popüler siteler (tıklanma oranını düşürüyor.)
İlanınız Meme büyütme ürünleri arasında görünüyor.

pilli ilan

Gelelim kendi ürünümüze. Pilli İlan sabit ve gün boyu gösterim sattığı için hedeflemenizi ancak sitelerin konularına göre yapabiliyorsunuz. İlanınız o sitenin bütün kullanıcılarına gün boyu gözüküyor. Kendi konunuzu sitenin konusu ile bağdaştırdığınızda başarılı tıklanma oranları elde edilebiliyor. Denemek için en çok gösterim yapan iki site olan bildirgec.org’u ve sosyomat.com’un ana sayfasını seçtik. Bu iki sitede de en ucuz alanda ikişer gün gösterim yapmanın bedeli tam 50 YTL tutuyor (bildirgec 15 YTL/gün, sosyomat 10 YTL/gün).

Sonuç:
Kaç gün sürdü?: 2 gün
Kaç gösterim yaptık? (impression): 440.523
Kaç kez tıklandı? (clicks): 688
Tıklanma oranı neydi? (CTR): %0,15
Bir tık ne kadara maloldu? (CPC): 0,07 YTL
1000 gösterim ne kadara maloldu? (CPM): 0,11 YTL

Görüldüğü üzere daha aktif kullanıcılarımız var. Reklamlara diğer servislerin kullanıcılarından daha fazla tıklıyorlar. Meraklılar.

Artılar:

Daha aktif ve meraklı kullanıcılar.
Sıfır bürokrasi. Telefon etmenize gerek yok.
En basit arayüz.
Pillinetwork kazançlarınızı kullanabiliyorsunuz.
Pillinetwork sitelerine ilan vererek o sitenin yazarlarını desteklemiş oluyorsunuz. Zira gelirin %70’i onlara dağılıyor.
Eksiler:
Hedefleme için henüz bir sistem yok. Reklamınızın gösterileceği sitenin konusu ile yapılabiliyor.

Hepsi Bir Arada

Bu yazı kara 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 Pixel Belirginleştirme Tekniği

kara — Mon, 21 Jul 2008 13:52:00 GMT

Küçük bir kaç detayla tasarımlar daha belirgin ve daha canlı görünebilir. Pixel belirginleştirme bunun için kullanabileceğimiz tekniklerden birisi . tutorial9.net bizim için bu teknikle ilgili 5 farklı kullanma yöntemini şöyle açıklamış :

2 Pixelle bölme

Tasarımlarda iki farklı renk arasını daha belirginleştirmek ve tasarımı basitlikten kurtarıp üzerinde emek harcandığını göstermek için kullanılabilir.
Bunun için resim işleme yazılımında (illustrator , photoshop ve ya türevi ) düz çizgi aracıyla tek pixellik iki farklı renkte çizgi yeterli.

Detaylar tasarımı etkiliyor.

işlemden sonrası (solda) ve işlemden öncesi (sağda)

Pixel Gölgesi
Daha belirgin bir fark yaratan bu teknikle tasarım içindeki objeler gölgelendirilerek kabartılabilir. Genellikle kullanılan bir yöntem olmasına karşın bilinçsizce kullanıldığında çok çirkin sonuçlar doğurabiliyor. Örneğin gölgenin objeden çok uzakta ve çok daha belirgin olması dikkati tasarıma ve ya sergilenen objeye değil de sebepsiz yere gölgeye çekiyor. Bu örnekte çok sade ve belirsiz bir gölge kullanılıyor , sonuçtaysa oldukça fark yaratıyor.

Bulutun arkasına tek pixellik bir gölge eklenecek

Gölge eklemek için yazar kullandığı programda layer'ın blending options seçeneklerinden add a shadow u kullanmış büyüklük değerini 0 uzaklığı da 1 pixel olarak vermiş. Sonuç son derece başarılı

Bulutun arkasında çizgi şeklinde gölgeleme yapıldı

Gölge ve Parlaklık

Tasarımlarda özellikle metinlerin olduğu bölümlerde kullanıldığında göze çok hoş görünen bu teknik bu gün pek çok popüler adreste sıkça kullanılıyor.

Yazıların hemen üstünde hafif bir gölge tasarımı daha etkileyici kılıyor

Sadece yukarıdaki gibi bir gölgeyle de yetinmek istemeyenler biraz daha detaya girmeli.

metnin başladığı alanı ayıralım

1 pixellik beyaz bir çizgiyle metnin olduğu alanı ve başlık alanını daha belirgin biçimde birbirinden ayırdık. Beyaz çizgi iki alan arasında parlaklık hissi uyandırıyor.

Sonuç şöyle :

Sonuç

5 teknikten en kullanışlı üçünü okuduğunuz yazının orjinali ve tüm teknikleri için şurayı ziyaret etmeniz gerekiyor.

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

CSS Sprite'ların kullanış alanları

kara — Sun, 22 Jun 2008 11:33:00 GMT

Birçok resim tek bir resim dosyasında

CSS Sprite'ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite'ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim...

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request'lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request'i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request'i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite'lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.

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

kullanım kılavuzları arşivi

kara — Sun, 22 Jun 2008 09:19:00 GMT

satın aldığımız elektronik cihazların içinden bir kullanım kılavuzu çıkar. ancak bu kullanım klavuzu okunmadan bir kenara atalır. cihazımızda bir sorun ile karşılaştığımız zaman ise yana döne o klavuzu aranır. fakat nafile, kim bilir hangi dolabın, hangi kutunun içindedir! böyle durumlarda imdadınıza yetişecek safemanuals isimli bir site var. bu kaynakta otomobilden, cd çalara kadar 20.000'in üzerindeki ürünün kullanım klavuzu bulunuyor. malum "buruştup bir kenara atma" ihtimaline karşı kendi kullanım kılavuzunuzu da sisteme yükleyebilirsiniz.

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

After Effects'e Yer Açın

kara — Thu, 22 May 2008 10:01:00 GMT

Adobe After Effects Box

Bildirgeç'te sık sık photoshop, illustrator, web 2.0 vb. şeylerin eğitimleri ve derlemeleriyle ilgili sitelerin yayınlandığını görüyoruz. Hemen hemen herkes bu işlerle haşır neşir olacak ki sık kullanılanlarımız genelde aynı linklerle doldu taştı. Firefox kullanıcıları bu örnekteki gibi birden fazla bookmarkları, bir eklenti yardımıyla temizleme şansına sahip neyse ki.

Aslında bu bildirinin amacı da yukardaki söylediklerimden çok farklı değil. Ama farklı bir yazılım için derleme yapmayı düşündüm. Konumuz Adobe After Effects! Statik grafiklerde photoshop nasıl söz sahibi bir yazılımsa, video gibi dinamik alanda da After Effects yeterince söz sahibidir. Kimilerine göre compositing, kimilerine göre sadece efekt yazılımı. Asıl işi efektler olmak üzere compositing'in de altından kalkabilen yazılımın iki işe de itirazı yok. Filmlerde ve pek çok reklamda bu programa dair etkiler görmek mümkün. Rakiplerine göre nispeten kolay olan ve ücretli, ücretsiz efektleriyle pek çok hayali gerçeğe dönüştüren yapısıyla tercih ediliyor. Şahsen, kendisiyle çalışılmasından en çok zevk alınan programlardan biri olduğunu düşünüyorum. Evet sık kullanılanlarınızda yer açın. Lafı daha fazla uzatmadan linklerle başbaşa bırakayım sizleri:

Ayato: After Effects'in 5.5 versiyonuna göre olsa da, egzersiz dosyalarını son sürümlerde de açabilirsiniz. Size yapım aşamalarını tamamen anlatmaz. Ana hatları verir ve detaylara kişisel çabanızla ulaşmanızı ister. Öğrenirken maksimum fayda için iyi bir yöntem bana kalırsa.
Creative Cow: Bu programın tuorialları açısından en meşhur sitelerden birisidir. Hemen hepsi video derstir. Doyana kadar..
Maltaannon: Bu arkadaşlarımız da video derslerle bizde varız demişler. Alt alta sıralı derslerden istediğinizi seçip girişebilirsiniz.
VideoCoPilot: Andrew Kramer tek tabanca olarak gayet güzel işler çıkarıyor. Aslında ücretliydi dersleri (gerçi hala sitede purchase linki var). Nasıl oldu bilmiyorum ama artık ücretsiz bir şekilde tüm derslerine ulaşmak sanırım mümkün.
Xtreme: Yine tek tabanca üniversite öğrencisi bir arkadaşımız, görsel estetikten uzak sitesinde faydalı bir şeyler yapmaya çalışmış. Bağış da kabul ediyor.
Lynda: Tabii ki ücretsiz değil. Ancak bütün eğitim setlerinde uyguladığı politika yine devrede. Essential eğitim setinin ilk 12 bölümünü online olarak izleyebilirsiniz.
Adobe: Programın üretildiği şirkette developperlar da boş durmuyor. Bizlerin gelişimi ve eğitimi için çabalıyorlar. Faydalı dersler çıkıyor. Rss ile takibinize alabilirsiniz.
kkymn: Kadir Köymen adlı sempatik abimizi, ilk olarak Adobe Premiere için hazırladığı video eğitimlerle tanımıştım. Ancak bu program için harcadığı saatler yetersiz kalmış olacak ki After Effects'e de el atmış. Sitesinde de belirttiği üzre eğitimlerinin kişisel amaçlar dışında ticari olarak kullanılmasına şiddetle itirazı var. Dava bile açarım diyor.
Forumotion: Yine türkçe kaynak. Çeşitli kaynaklardan derlenen videolar ve üyelerin hazırlayıp siteye yolladıkları eğitimler sayesinde bilgi birikiminizi artırmak elinizde.
Son olarak tüm bu eğitimleri aşıp programı çözdüğünüzde yine de karşınıza arada bir çıkmış olan ama anlayamadığınız bir şey olacak. Expression'lar. Eğer bu linki gözleriniz faltaşı açılmış halde tıklıyorsanız zaten ne aradığınızı biliyorsunuzdur ve açıklama yapmama hiç gerek yok.

Güzel renderlar dilerim.

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