bildirgec.org - tga - beğendikleri

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ı tga 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

Broşür tasarım örnekleri

tga — Thu, 26 Mar 2009 14:32:00 GMT

broşür deyince son zamanlarda aklıma gelen tek şey alışveriş merkezlerinin, evlerin posta kutularına bıraktırdıkları fiyat listelerini ve kampanyalarını gösteren kuşe kağıtlar oluyor. ancak iş yalnızca bundan ibaret değil elbette. broşürlerin de tasarım harikası olan çeşitleri var. bunların güzel örneklerinden bir derleme ve tasarımcıları şurada yapılmış mesela.

Bu yazı tga 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'te Anahtar Kelimeleri Sayfa İçi Linkleme

tga — Sat, 28 Feb 2009 10:36:00 GMT

Bildiğiniz üzere Wordpress, Webmaster camiasının sürekli kullanmakta olduğu bir scripttir. Nedenleri bolca olmasına karşın, kullanımının kolay olması ve basit Seo yönetilebilirliği bunların başlıca sebeplerindendir.

Sayfa içinde linkleme abartılmadığı sürece Google tarafında hoş karşılanan ve yükselmeye adım adım ilerlenen bir Seo yöntemidir.

Bu tam olarak ne işe yarar ?
Anahtar kelimelerde dış link alımının iyi olduğu kadar, iç linklemelerle google örümceklerinin belirlediğimiz içeriklerde sayfayı daha iyi taramasına ve buna bağlı olarak, anahtar kelime aramalarında google'da üst sıralarda çıkmasına neden olmaktadır.

Wordpress'imizde bunu basitçe yapmak için hoş bir eklenti sunacağım : Automatic Tag to Link

Automatic Tag to Link, yeni sürümlerde entegre olarak çalışan bir plugindir.

Kurulum :
1- Plugini download edin.
2- Sıkıştırmadan çıkartın.
3- FTP'ye bağlanarak wp-content/plugin klasörüne dosyayı yollayın.
4- Wordpress'te plugin sayfasına girerek, eklentiyi aktif edin.
5- Ayarlar -> Tag to Link sekmesine girerek istediğiniz takdirde default ayarları değiştirin.

Ayar bölümünde şu şekilde bir ekranla karşılaşmanız muhtemeldir.

"The times of convert a tag to link:" bölümü yazı içine girdiğiniz tagların, linklenmesinin rakam olarak belirtilmesidir.

örneğin bir yazı yazdığınızı düşünelim, içinde 4 kere bildirgec kelimesi geçsin ve Tag bölümüne bildirgec etiketini girdiğinizi varsayalım.

"The times of convert a tag to link:" bölümüne 3 yazıp ayarlarınızı kaydettiyseniz, yazı içinde geçen 4 tane bildirgec kelimesinin 3 tanesi sayfa içi linklemeye maruz kalmaktadır.

Bu yazı tga 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'i Kurduktan Sonra Yapılması Gereken 10 Şey

tga — Sat, 28 Feb 2009 13:09:00 GMT

5 dakikada WordPress kurulumu mükemmeldir ve çoğu zaman bir blog oluşturmak oldukça kolaydır. Karmaşık hiçbir şey yoktur. Ancak WordPress'in kurulumunu tamamladıktan sonra blogunuzdan tam verim alabilmek için yapılması gereken bazı şeyler vardır.

Aşağıdaki listeyi bir kontrol listesi olarak kullanın ve her bir yeni WordPress kurulumunda bu listedekileri uygulamaya çalışın.

1. Admin (Yönetici) Şifresini Değiştirin ve Yazarlarınızı Yönetin
WordPress her kurulduğunuda yönetici hesabı için otomatik olarak bir şifre atar ve bu şifreyi hatırlamanız neredeyse mümkün değildir. Bu sebeple ilk olarak yönetici hesabının şifresini hatırlaması daha kolay bir şifre ile değiştirin.

Kullanıcı ayarlarını Kullanıcılar (Users) paneli üzerinden ayarlayın. Yine aynı sayfa üzerinden blogunuza yeni yazarları ekleyebilirsiniz.

2. Permalinkleri Düzenleyin
Öntanımlı olarak yazılarınızın URLleri http://www.bildirgec.org/?p=123 gibi görünecektir. Bu URL yapısı hem arama motoru optimizasyonu hem de kullanılabilirlik açısından zayıftır (son kullanıcıya hiçbir şey ifade etmez).

URL yapınızı http://www.bildirgec.org/wordpressi-kurduktan-sonra-yapilmasi-gereken-10-sey/ olarak görünecektir. Bu sayede yazınızın anahtar kelimelerini URL'ye dahil etmeniz mümkün olacaktır. Blogunuzun URL altyapısını düzenlemek için yapmanız gereken şeyler şunlar:

Settings » Permalinks sayfasına gidin.
'Common Settings' altından 'Custom Structure''ı seçin.
%postname%/ yazın.
Ya da URL üzerinde kategorinizin yer almasını istiyorsanız %category%/%postname%/ girebilirsiniz.

3. Temanızı Yükleyin ve Etkinleştirin

Tema indirin ya da kendi temanızı tasarlayın.
Zip dosyasını açın ve wp-content\themes klasörüne yükleyin.
Appearance » Themes altından temanızı aktive edin.

4. Kategorilerinizi Ekleyin ve Varsayılan Kategoriyi Değiştirin
WordPress'i kurduğunuzda öntanımlı kategorinin adı Uncategorized idir ki bunun da pek güzel göründüğünü söyleyemem. Günün birinde bir yazı yazdığınızda kategoriyi seçmeyi unuttuğunuzu düşünün. Bu durumda yazınızın hangi kategori altında yer almasını istersiniz? Ben genelde Haberler ya da bunun gibi bir şey kullanmayı tercih ediyorum.

Posts » Categories kısmına gidin.
'Uncategorized' üzerine tıklayın ve kategorinin adını değiştirin.
Diğer blog kategorilerinizi ekleyin.

5. Akismet'i Etkinleştirin
Akismet WordPress eklentisi sayesinde blogunuzu sahte (spam) yorumlardan ve girdilerden korumuş olursunuz ve inanın bana, eklentiyi kurduktan sonra spam içerikli yorum alma ihtimaliniz neredeyse yok denecek kadar azdır. WordPress geliştiricileri de eklentinin gücünü anlamış olacaklar ki Akismet eklentisini WordPress'in içine dahil etmişler. Burada tek yapmanız gereken onu etkinleştirmek.

Plugins sayfasına gidin ve Akismet'i etkinleştirin.
Akismet etkinleştirmesini tamamlamak için WordPress'in bir API anahtarına ihtiyacı var. Bu anahtarı almak için WordPress.com üzerinde ücretsiz bir hesap açabilir ve ardından profiliniz üzerine tıklayabilirsiniz. Profil sayfanızın üst kısmında API anahtarını göreceksiniz. Anahtar dizisini kopyalayın.
Şimdi Plugins » Akismet Configuration kısmına gidin ve anahtarınızı ilgili alana yapıştırın.

6. Google XML Sitemaps eklentisini girin
Google XML Sitemaps standartlarla uyumlu XML sitemap oluşturarak Google, Yahoo!, Ask ve MSN gibi arama motorlarının sitenizi kolayca veritabanlarına eklemelerine yardımcı olur. Eklenti arkaplanda sessizce çalışacak ve siz ne zaman bir yazıyı düzenlediğinizde ya da blogunuza yeni bir yazı girdiğinizde sitemap kendisini güncelleyecektir.

Eklentiyi indirip sitenize kurduktan sonra Google Webmaster Araçlarını ziyaret edin ve Google hesabınızla servise giriş yapın. İlk sayfada sitenizi doğrulayabileceğiniz bir bağlantı göreceksiniz. Oradaki yönergeleri izleyin. Bu işlem tamamlandıktan sonra "Add Sitemap" bağlantısına tıklayarak sitemap'inizin URL'sini ilgili alana yapıştırmanız yeterli.

7. WordPress Veritabanı Yedeklemesini Kurun
Düzenli olarak yedek almak her zaman iyidir. Sunucunuzda birşeyler yanlış gidebilir ya da kendiniz hiç beklemediğiniz bir anda bir hataya neden olup sitenizin göçmesine neden olabilirsiniz.

WordPress Veritabanı Yedekleme WordPress blogunuzu yedekleyebilen bir araç. Dilerseniz eklentinin ayarlarından eklenti sitenizin yedeğini aldığında ilgili yedeği otomatik olarak elektronik posta adresinize gönderilebilmesini sağlayabilirsiniz.

8. Blogunuzu Test Edin
Blogunuzu farklı biçimlere sahip yazılar ve yorumlar eklemeden tam anlamıyla test etmeniz pek mümkün değildir. WP Candy üzerindeki örnek yazı kolleksiyonundan faydalanarak blogunuza farklı biçimlere sahip yazılar girebilirsiniz.

Örnek yazı kolleksiyonunu sitenize girebilmek için Tools » Import & raquo; WordPress altından siteden indireceğiniz dosyayı blogunuza dahil edebilirsiniz.

9. RSS beslemenizi Feedburner'a Dahil Edin

İlk önce RSS ayarlarınızı değiştirin. Settings » Reading altından RSS beslemenizde kaç adet yazı görüntülemek istediğinizi ve yazılarınızın tamamını görüntülemek isteyip istemediğinizi değiştirebilirsiniz.

Şimdi de beslemenizi Feedburner'a kaydetmek isteyeceksinizdir. Feedburner beslemeniz hakkında size bir dizi kullanışlı bilgi verebilen ve sitenizdeki güncel haberleri diğer blog servislerine otomatik olarak bildiren kullanışlı bir servistir.

Feedburner'a kayıt olduktan sonra beslemenize ait bağlantıyı temanız üzerinde güncellemeniz gereklidir. Aşağıdaki kodu head etiketleri arasına yerleştirin.

<link rel="alternate" type="application/rss+xml" title="Feed Title" href="FEEDBURNER URLniz" />

10. Analytics Servisi Kullanın

Kullanıcılarınızın ve trafiğinizin izini sürün. Ben her ne kadar Google Analytics'i önersem de website trafiğinizi takip etmenin 50 yolunun daha olduğunu unutmayın.

Kaynak: Pro Blog Design

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

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

17 Kullanışlı Wordpress Eklentisi

tga — Fri, 27 Feb 2009 11:09:00 GMT

internet üzerinde binlerce wordpress eklentisi bulunmaktadır. bunlardan bazıları kullanışlı iken, diğerleri sadece olmuş olmak için oradalar. ancak blog okurlarınıza büyüleyici ve mükemmel bir deneyim yaşatmak ve wordpress blogunuzu daha güçlü bir hale getirmek için eklenti kullanıp kullanmamanız tamamen sizin elinizde.

bu yazıda, herhangi bir blog için kullanışlı ve muhtemelen olmazsa olmaz 17 wordpress eklentisini listelemeye çalıştım.

eğer sizin de kullandığınız ve bu yazıda yer almayan wordpress eklentileri varsa, yorumlarınızda ilgili eklentileri paylaşmayı unutmayın.

wordpress popüler yazılar

wp-gravatarwordpress popüler yazıları bir yan bar widget'i olup blogunuzdaki en popüler yazıları listeleyebilmenizi sağlıyor. eklentiye dahil edilmiş olan pek çok özelleştirme seçeneği sayesinde eklentinin görünümünü dilediğiniz gibi özelleştirebilirsiniz.

ultimate google analytics

wordpress temanızda herhangi bir değişiklik yapmadan google analytics javascript kodunu blogunuzdaki her sayfaya ekleyebilmenizi sağlayan bir eklenti. eklenti ayrıca sitenizdeki dışa yönelik bağlantıları, sitenizden indirilen içerikleri ve mailto: bağlantılarını da izleyebilir.

wp-postratings

wordpress blogunuzdaki yazılara ve sayfalara ajax oylama sistemi ekleyen bir eklenti.

wp-recaptcha

wp-recaptcha, carnegie mellon üniversitesi tarafınca geliştirilen ve captchaları zeki bir şekilde kullanan bir yöntem. standart captcha eklentilerinin aksine bu eklenti, captcha'ya bir başka yaklaşım sunuyor.

bir diğer benzer yazılar eklentisi daha

yet another related posts plugin, geçerli olan sayfanın içeriğine benzer bir içeriğe sahip yazıları ya da sayfaları listeleyerek, okurlarınızın sitenizde daha fazla zaman geçirmesine yardımcı oluyor.

ajaxlanmış wordpress

ajaxlanmış wordprewss (awp), ajax'ın ve wordpress'in gücünü bir araya getirerek kullanıcı deneyimini, yönetim seçeneklerini ve wordpress tabanlı herhangi bir blogun tasarım potansiyelini iyileştirmeyi amaçlıyor.

commentluv

yorum yazanların kendilerine ait en son bloguna bir bağlantı vererek onlara sevginizi gösterin. bu eklenti, sitenize üye olup yorum yazan kişilerin yorum yazdıkları sırada onların blogunu ziyaret edip en son yazdıkları blogun başlığını ve bağlantısını alıyor ve yorumun altına yerleştiriyor.

cforms

cforms yüksek derecede özelleştirilebilir, geliştirilebilir ve güçlü bir form oluşturma eklentisi olup pek çok alanda kullanım olanağı sunuyıor. eklenti aracılığı ile oluşturacağınız formlarda eklenti desteği yer alırken, birden fazla formu yönetebilir ve yine birden fazla formun aynı sayfada yer almasını sağlayabilirsiniz.

all in one seo pack

wordpress blogunuz için otomatik arama motoru optimizasyonu.

flexible upload

flexible upload wordpress eklentisi sayesinde wordpress'in temel seviyedeki gönderme (upload) seçeneklerini özelleştirebilirsiniz. eklenti, gönderilen resimleri sizin belirlediğiniz seviyede yeniden boyutlandırabilir ve dilerseniz gönderilen resimlere dilediğiniz yazıyı otomatik olarak ekleyebilir (watermark).

add to any subscribe button

aralarında google reader, my yahoo!, netvibes, windows live ve diğer tüm popüler besleme okuyucularını kullanarak okurlarınızın blogunuza kolay yoldan abone olabilmelerini sağlıyor. eklentinin akıllı menüsü, ziyaretçinin tarayıcı geçmişini otomatik olarak kontrol ediyor ve en sık ziyaret ettikleri siteleri otomatik olarak en üst sırada görüntülüyor.

wp super cache

wp super cache wordpress için bir statik sayfa oluşturma eklentisidir. blogunuzdaki tüm sayfaların otomatik olarak html sürümlerini oluşturarak sunucunuzun her bir ziyaretçi için php betiklerini çalıştırmasının önüne geçiyor ve bu sayede blogunuzun hızında önemli bir artış gözleniyor. özellikle çok sayıda ziyaretçisi olup sunucusunun hızından memnun olmayan wordpress blogcuları için kullanışlı.

wp gravatar

bu eklenti gravatar, mybloglog, openavatar, wavatar, identicon, monsterid ya da diğer favico.ico simgelerini yorumlarınızda kullanmanızı sağlıyor. eklentinin yapabildikleri bu kadarla da sınırlı değil. daha fazlası için eklentinin sayfasını ziyaret edin.

google xml sitemaps

bu eklenti google sitemaps uyumlu xml-sitemap oluşturabilmenizi sağlıyor. tüm wordpress tarafından oluşturulmuş sayfaların yanısıra özel sayfaları da destekliyor. siz herhangi bir yazıyı düzenlediğiniz ya da blogunuza yeni bir yazı yazdığınız zaman, ilgili eklenti sitemap dosyanızı güncelliyor ve sitemap protokolünü destekleyen ask.com, google, msn search ve yahoo! gibi sitemap protokolünü destekleyen tüm arama motorlarını sitenizdeki güncellemeler hakkında uyarıyor.

get recent comments

bu eklenti sitenizden en son yorumları ya da geri izlemeleri yan çubuk (sidebar) üzerinde görüntülüyor. i̇lgili bağlantıların nasıl görüneceğine dair ileri seviyede özelleştirme seçenekleri sunulmuş. bu seçeneklerin arasında yorum sayısı ve yorumların genişliği gibi seçenekler yer alıyor. ayrıca yorumları dilerseniz tarihe ya da yazı sırasına göre dizebilirsiniz.

twitme

bu eklenti sayesinde blog yazdığınız zaman yazdığınız blog otomatik olarak twitter hesabınıza durum mesajı olarak ekleniyor.

easy adsenser

easy adsenser eklentisi google adsense reklam kodunu wordpress blogunuza kolayca entegre edebilmenizi sağlıyor. eklentinin sunduğu widget aracılığı ile reklamları yan çubuk üzerine ekleyebilir ya da bir diğer widget ile google arama kutusu'nu blogunuz üzerinde görüntüleyebilirsiniz. easyadsenser, adsense ile alakalı her şeyi yönetmenize ve blogunuza entegre edebilmenize yardımcı olan belki de ilk wordpress eklentisi.

kaynak:: smashing apps

wordpress i̇le i̇lgili yazdığım diğer yazılar

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

tga — 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ı tga 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 meta kısmını silmek

tga — Fri, 27 Feb 2009 17:47:00 GMT

hızlı bir wordpress ipucundan bahsetmek istiyorum. eğer blogunuzdaki wordpress meta kısmını kaldırmak istiyorsanız, o zaman bu ipucu işinize yarayacaktır. genellikle tüm wordpress temalarında "tüm rssler, yorum rssleri" gibi bazı bağlantılar bulunur ve bu bağlantılar "meta" etiketi altında yer alır. bu adımı kaldırmak için yapmanız gerekenler:

1. wordpress includes klasörüne gidin ve widgets.php dosyasını bulun.

2. dosyayı not defteri, notepad ++ ya da smultron benzeri bir metin editöründe açın ve meta kod bloğunu bulun. 847. satırda başlıyor.

3. kod aşağıdaki şekilde görünecektir.

aşağıdaki iki satırı bırakın ve geriye kalan rss, yorumlar ve wordpress gibi ihtiyacınız olmayan alanları silin.

<?php wp_register(); ?>
<?php wp_loginout(); ?>

umarım bu size yardımcı olmuştur.

Kaynak: desizn tech

wordpress i̇le i̇lgili yazdığım diğer yazılar

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

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

Hiçbir Zaman Ölmeyecek 28 Photoshop Dersi

tga — Sun, 04 Jan 2009 11:01:00 GMT

Rehberlerle ilgili garip olan şey, sayılarının çok fazla olması. Hstta o kadar fazla ki bazen nereden başlayacağınızı bile kestiremiyorsanız. 1000'in üzerinde rehberin bulunduğu bir adres dizinim olduğunu ve onların yarısını bile hiçbir zaman bitiremeyeceğimi düşündüğümü hatırlıyorum. Bunun üzerine ben de elimdeki arşivi filtrelemeye başladım ve hiçbir zaman üzerinde çalışmayacağım rehberleri eledim ve saatler süren çalışmanın sonucunda elimdeki rehber sayısnı 100'e indirgedim. Bu 100 rehberin arasından kolleksiyonumdaki en iyiler olarak nitelendireceğim 28 tanesi üzerinde çalıştım.

Bu muhteşem rehberleri size farklı teknikleri ve stilleri nasıl kolayca uygulayabileceğinizi gösterenler arasından seçtim. Bu rehberler sayesinde photoshop deneyimimi arttırdım.

Bu rehberleri favori siteler listenize "nasılsa bir gün çalışırım" diye ekleyip unutmaktansa gerçekten zaman ayırıp rehberleri uygulamanızı öneririm. Şimdi ya da hiçbir zaman.

Reklamcılık ve Ürün Tasarımı
İlginç ve güzel bir telefon reklamı duvar kağıdı. Bu rehber ilginç ve güzel görünümlü bir telefon reklamı duvar kağıdı hazırlamanın detaylı aşamalarını açıklıyor.

Büyüleyici Nike Reklamı. Nike gibi bir şirket için reklam tasarlamak pek çok tasarımcının rüyalarını süsler. En azından bir gün sizi işe alma ihtimaline karşın hazırlıklı olun.

Taslak bir araba çizimi nasıl işlenir?Emre Hüsmen bize bir taslak çizimin Photoshop üzerinde nasıl işlenebileceğini gösteriyor. Bu rehbere başlamadan önce biraz Photoshop deneyiminizin olması gerekiyor, bu yüzden bu rehbere başlamadan önce diğerlerine bir göz atın.

HTC Touch Diamond tarzında bir cep telefonu oluşturun. Kendi gizli ürününüzü tasarlamayı ve bir gün o ürünün gerçek bir ürün olarak pazarlanacağı günleri düşünerek iç geçirdiğinizi biliyoruz. Peki neden şimdi başlamayın? Bu rehber ile konsept tasarımlar ve gerçekçi ürün şablonları tasarlamayı öğreneceksiniz.

Ürün tasarlamak Eğer en sevdiğiniz gizli hobiniz Internet'e Apple dedikoduları sızdırmaksa, o zaman bu rehber sayesinde gerçekçi ürün tasarımları oluşturabileceksiniz.

Profesyonel Laptop Reklamı Tasarlayın. Bu rehber size kendi birleşme noktalarınızı nasıl tasarlayabileceğinizi ve bu teknikleri kullanarak nasıl ekran patlama efekti oluşturabileceğinizi öğreneceksiniz.

Azıcık kirli, eski ve vektör

Bir fotoğraftan vektör kompozit efekti oluşturun. Bu rehber size bir resmi alıp (rehberde bir kadın resmi kullanılmış) onu nasıl tümüyle vektör şekillerden olluşmuşçasına tasarlayabileceğiniz öğretiliyor. Rehber süresince kırpma maskeleri ve zemin değiştirme gibi bazı basit teknikler kullanılarak bu özel efekte adım adım ulaşacağız.

Fotoğraflarınıza çekici retro kıvrımları dahil edin. Retro geometrik şekilleri fotoğraflara dahil etmek bazen muhteşem sonuçlar doğuruyor. işte bu rehber size bunu nasıl yapacağınızı öğretiyor.

Sarmallarla tasarlamak Eğer sarmallar size yetmiyorsa ve kendi sarmal tasarımlarınızı oluşturmak istiyorsanız o zaman bu sarmallı yolculuğa hazırsınız.

nasıl mükemmel bir yeşil elma illüstrasyonu oluşturulur? bu rehberde size nasıl parlak yeşil bir elme çizeceğinizi göstereceğim. Rehber süresince çeşitli boyama tekniklerine değineceğiz. Eğlenceli bir rehber ve yeni birşey öğreneceksiniz.

ahşapa gömülü woofer oluşturmak. bu rehberde size bir woofer tasarlamayı ve arkaplanı için basit bir ahşap yüzey oluşturmayı öğreteceğim. Rehberde ayrıca woofer'ı olduğu yerde tutacak bazı vidalar oluşturacağız. Sağlam bir müzik açın ve çalışmaya başlayın.

kirli kutu tasarımı Nasıl büyüleyici şablon tasarımları oluşturacağınızı öğrenin. Bu rehber süresince nasıl dağılma noktası filtresini kullanabileceğinizi öğrenecek ve bu filtre ile nasıl profesyonel sonuçlara ulaşabileceğinizi kavrayacaksınız. Rehberin sonunda gerçek görünümlü ve bolca kullanılmış bir kutu görünümüne kavuşacaksınız, sanki dünya çapında seyahata çıkmış gibi. Bu teknikleri kullanarak kendi tasarımınızı da geliştirebilirsiniz.

Detaylı pusula simgesi Bu rehberde gölge ve yansıma efektlerini kullanarak illüstrasyona nasıl gerçeklik katabileceğimizi göstereceğiz. Tıpkı her simge tasarımında olduğu gibi genel tasarım ve detaylardaki incelik sizi kaliteli sonuçlara ulaştıracaktır.

Bir bardak biraBu rehberde içinde bira olan bir bardak çizeceğiz. Önce kıvrımlı ve yansımalı bir bardak oluşturacak, ardından içine biraz bira koyacak, biraya baloncuklar ekleyecek ve son olarak gölge ve yansımaları uygulayacağız. Aynı zamanda umarım birkaç kullanışlı tekniği de öğrenmiş olursunuz.

Eski mektup. Görünüşe göre herkes birşeyleri eski ya da kirli yapmakla uğraşıyor. Bu rehberde 50'ler tarzında bir aşk mektubu nasıl oluşturulur onu göstereceğim. Rehber süresince köşeleri kıvıracak, posta pulu oluşturacak ve fırça motoru, dikdörtgen aracı, katman stilleri, dolgu modelleri ve sizi bir sonraki seviyete yükseltecek bazı gelişmiş teknikleri kullanarak eski tarz sınırlar oluşturacağız.

İmaj Hileleri

Mükemmel yalan. Bu rehber 2 çok sık kullanılan tekniği kullanarak nasıl kusursuz cilt oluşturabileceğinizi anlatacak.

Uç Makyaj. Bu rehber cilt tonları, gölge işlemeleri ve ışık modelleri kullanarak etkiyi arttırmayı, gözler ve saçlarda iyileştirme yaparak muhteşem bir portre fotoğrafı oluşturmayı hedefliyor.

Ayar katmanları ile karma resim oluşturmak Photoshop ile karma resimler oluşturmanın üçte biri tekniğe, üçte ikisi ise hayal gücüne dayanır. Aşağıdaki örnekte tasarımcı, bir fırtına öncesi sessizlik sırasında bir kızın fotoğrafını işlemiş.

torbadan kamuflaj dijital kolaj çalışması. Bu rehber motiflerin yerleşimini nasıl kontrol edebileceğinizi ve bir imaja nasıl kamuflaj gibi arkaplan öğesi olarak atayabileceğinizi gösteriyor. Rehber ayrıca aynı motifin nasıl öne çıkarılabileceğini ve tasarımın diğer bölümlerinde nasıl gerçek bir motifmişçesine görünülenebileceğini de gösteriyor.

Sıradan bir atı robo-at'a dönüştürün Robo-at sizi kurtarmaya geliyor. Çok başarılı olan bu rehberde kendi robot görünümlü nesnenizi nasıl oluşturabileceğinizi gösteriyor. Muhtemelen zamanınızı en çok alacak olan ancak bir o kadar da çalışması eğlenceli bir rehber.

Tipografi

Yanan metin. Alevler Photoshop'ta işlemesi genelde zor öğelerdir, ancak bu rehberde size bir alev resmini kullanarak metni nasıl üzerine işleyebileceğinizi göstereceğim. Eseri karanlık arkaplan üzerinde güzel bir metin efekti ile tamamlayacağız.

Çim metin efekti Bu rehberde bir yeşillik resmini, kalem aracını ve biraz da sabrımızı kullanarak güzel görünümlü bir efekt oluşturacağız.

Uzay ve Ötesi

Uzay ve gezegen. Aşağıdaki teknikler size aşağıda son halini gördüğünüz fotoğrafa ulaşmak için kullandığım teknikleri içeriyor. Her ne kadar aşağıdaki imaj üç saatlik bir çalışmanın ve pek çok ayrıntının eseri olsa da, siz bu işin nasıl yapıldığını kavrayacaksınız.

Ay tutulması efekti Muhteşem sonuçları olan görece basit bir rehber.

Sadece doku kullanarak gezegen oluşturmak. Photoshop'ta sadece bir doku kullanarak, neredeyse gerçekçi görünen bir gezegen oluşturn.

Boyama

Deri boyama. Bu güzel rehber size nasıl deri boyayabileceğinizi öğretiyor.

Doğadan esinlenen boyalı arkaplan resmi oluşturun. Eğer websiteniz ya da blogunuz için boyalı arkaplan istediyseniz, bu rehber tam istediğinizi veriyor.

Efektler

Bay Su Adam. Normal bir insanı sudan oluşmuş bir insana nasıl dönüştürebileceğinizi öğrenin.

Kaynak: Kumail.H.T's Blog

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