Apptha

Gridnik

FolioGrid

iPhoto

AutoFocus

Exhibit

Imbalance 2

ecoStrips

Reflex

Gridler

Aperio

GridLocked

Evolutive2

NoteBook

Pronto

Shaken and Stirred

Balio Web UI Seti

DesignModo&Pixeden Web UI Seti (PSD – Html)

PSDChest Clean Web UI Seti

Glossy 3D Web UI Seti

Clean Web UI Seti

Futurico Web UI Seti

Web UI Seti

Butterscotch Web UI Seti

Google Plus kullanıcı sayısının artışını sağlayan birden fazla etken var. Öncelikle istatistikler gösteriyor ki, Google’ın yaş sınırlamasında yaptığı değişiklik kullanıcı sayısının hızla artmasını sağlamış. Sanırım bunda Google+ bünyesinde bulunan oyunların payı çok büyük. Özellikle genç – yaşlı demeden oyuncu kitlesini genişletmeyi sürdüren Angry Birds ve 18+’nın çok sevdiği Zynga Poker Google+ sayfasından tarayıcı üzerinde oynanabiliyor. Özellikle yakında çok ses getirecek Google Maps destekli oyunun fragmanını buradan izleyebilirsiniz.

Google’dan kişiye odaklı sosyal arama

Diğer yandan Google’ın arama sonuçlarında yeni bir döneme geçmesi, gerçek zamanlı ve kişiye odaklı sosyal arama yapmamızı sağlıyor. Yani bu, Google+’da paylaşılmış içeriklerin de arama sonuçlarında karşınıza çıkacak olması anlamına geliyor.  Bu özellik sayesinde Google+ çok daha hızlı büyüme potansiyeline sahip oldu. Çünkü arama sonuçlarını kişisel ve kurumsal reklam pazarında avantaja çevirmek isteyen büyük bir kitle var. Bu sayede Google Plus hedeflediği kullanıcı sayısına çok yakında ulaşarak birçok rakibini geride bırakacak (Tabii yine de Facebook ve Twitter ‘a rakip olması için henüz erken).

Google güncellediği kullanıcı sözleşmesi ile tartışıladursun; Google Plus birer birer devreye aldığı yeni özellikleriyle kullanıcı sayısını artırmaya devam ediyor. Siz de daha fazla zaman geçirmeden Google+ profilinizi güncelleyin ve çevrenizi genişletmeye başlayın.

Önce Ftp ile wp-config.php dosyasını indirin ve bir editör ile açın (Ben Php üzerinde çalışırken Dreamweaver kullanıyorum).

Gelelim yapacağımız değişikliğe…

wp-config dosyasında aşağıdaki satırı bulun,

define ('WPLANG', '');

ve aşağıdaki gibi değiştirin.

define ('WPLANG', 'tr_TR');

Dosyayı Ftp’den tekrar attıktan sonra WordPress Admin panelinizi açın. Güncellemer bölümünde yukarıdaki güncelleme uyarısını göreceksiniz. Tedbir için veritabanı yedeğini aldıktan sonra, Update Automatically (yeni versiyonda Reinstall Now) butonuna tıkladığınızda, WordPress artık Türkçe olacaktır.

DISQUS nedir ve avantajları neler?

Disqus, özellikle bloglarda gerçek zamanlı tartışma ortamı sağlayan bir yorum platformu. İlk bakışta blog okuyucularına Facebook, Twitter gibi sosyal medya hesaplarıyla ya da Disqus hesabıyla giriş yaparak yazılara yorum yapma imkanı veren bir sistem gibi görünüyor. Ama kullandıkça çok daha fazlası olduğunu keşfedip çabuk ısınıyorsunuz.  Disqus’ı kullanan site sayısı 1 milyonu, kullanıcı sayısı ise 66 milyonu çoktan açmış durumda. Ve bu kadar büyük bir işin arkasında küçücük bir ekip var.

Yorumları beğenme, gerçek zamanlı takip etme, farklı bloglara yazdığınız tüm yorumları aynı anda yönetme, sosyal medyada paylaşma, yoruma medya dosyası ekleme gibi özellikler Blog okuyucuları açısından fazlasıyla ilgi çekici.

Blog sahipleri için ise yorum yönetimini kolaylaştıran bir çok avantajı var. Bence bunlardan en önemlisi, herhangi bir Captcha eklentisi kullanmadan spam yorumların önüne geçebilme özelliği. Yapısı dolayısıyla, spam yorumların otomatik olarak gönderilmesi neredeyse imkansız. Bu özelliğinin haricinde, gelişmiş moderatör araçları, kara liste, blog tasarımınıza uygun alternatif tema seçenekleri ve SEO uyumluluğu ile dikkat çekiyor. Öyle ki CNN, Fox News gibi haber portallarının bile dikkati çekmiş ve Disqus’ı sitelerine eklemişler.

Disqus nasıl eklenir?

Siz de birkaç adımda sitenize eklemek isterseniz önce http://disqus.com adresinden kendinize bir üyelik oluşturun. Daha sonra WordPress için admin panelinizin eklentiler bölümünden Disqus’ı aratın ve kurduktan sonra etkinleştirin. Yorumlar bölümüne Disqus için özel bir bölüm gelecektir. Disqus, sitenizdeki tüm yorumları tek tıkla kendi veritabanına taşımanıza da imkan veriyor. Böylece sitenize daha önce yazılan yorumları kaybetmeyeceksiniz.

Disqus’ın tüm özelliklerini bu sayfadan görebilirsiniz.

Google’ın yaptığı bu radikal yenilik tam olarak; Youtube, Google Docs, Analytics, Google+ gibi bütün hizmetlerini Google hesabınızla ve GMail adresinizle bağlamaya yönelik bir hamle. Böylece artık Google hesabınızla bütün Google hizmetlerini kullanmanız mümkün oluyor. Bu yenilik için yeni üyelik formuna da yeni bölümler eklendi. Yeni bir Google hesabı açarken artık Google+ üyeliğinizde kullanılmak üzere Cinsiyet, Ad Soyad ve Telefon gibi bilgileriniz de isteniyor.

Yeni üyelik sayfasını açtığınızda sizi “Google Hesabınız yalnızca bir Arama hizmetinden fazlasıdır” başlıklı bir yazı karşılıyor ve tüm Google hizmetlerine tek bir kullanıcı adı ve şifre ile erişebileceğinizi söylüyor.

Tabii bu yenilikle gelen zorunluluklar (özellikle zorunlu olarak Google+’a katılmak) herkes tarafından hoş karşılanmayabilir. Bir çoğumuzun Google+ hesabı olsa da hala aktif olarak kullanmaya başlamadık. Belki henüz alışamadık ama dünya çapında büyümesini sürdürüyor. Sonuçta, Google+ şu ana kadar Google’ın yaptığı en başarılı sosyal medya işi. Dikkat ettiğim diğer bir husus ise, öncelikli ziyaretçi profilinin bilişim sektörü ağırlıklı olmasıydı. Bu, biz web tasarımcılar için de heyecan verici bir başlangıç olmuştu. Hemen sonrasında üye sayısındaki artış devam etti. Ancak bir gerçek vardı ki, bir çoğumuz Google Plus’a sadece katılmakla kaldı; ilk birkaç günden sonra neredeyse hiç uğramamaya başladık. Ama sanırım Google’ın bu yeniliğinden sonra Google+’yı artık daha fazla kullanmaya alışacağız.

Kullanıcı sayısı 90 Milyon‘a yaklaştığı söylenen Google Plus, henüz Facebook‘la yarışacak kadar büyümese de; Google’ın bu yeniliği ile büyüme hızına ivme kazandıracağı kesin. Google Plus’ın aktif kullanıcı sayısı ile ilgili  verilere kısa bir süre önce Webrazzi‘de Fırat Demirel’in kaleminden yayınlanan bu yazı ile ulaşabilirsiniz.

GMail için de durum aynı. Bilindiği üzere Google Docs, Google Sites ve Google Groups gibi hizmetleri kullanmak için GMail hesabınızın olması gerekiyor. Bu daha önce GMail harici bir e-mail adresiyle açılan Google hesaplarından bu hizmetleri kullanamayacağınız anlamına geliyordu. Ama artık yeni kullanıcılar için bu engel de ortadan kalkmış oldu.

Google’ın en büyük rakibi olan Facebook’a bir adım daha yaklaşmak için bir sonraki hamlesi ne olacak çok merak ediyorum. Hep birlikte göreceğiz.

Freelance web tasarım pazarında sıkça karşılaşılan bu duruma karşı, işin en başından önlem almanın bir yolu var: Projelendirme. Henüz çalışmaya başlamadan müşterinin karşısına web sitesinin kapsamı, özellikleri, alt yapı ve teknik detayları,  ödeme ve iş takvimini içeren bir proje teklifi ile çıkmak; hem harcayağınız emek ve zamanın karşılığında güvenceniz olacak, hem de müşterinize karşı profesyonel ve güven veren bir başlangıç olacaktır.

Projelendirme nasıl yapılır ve nelere dikkat edilmelidir?

Ben projelendirme yaparken genelde 3 bölüme ayırıyorum:

1. Projenin tanımı

2. Proje kapsamı ve özellikleri

3. İş ve ödeme takvimi

“Genelde” diyorum çünkü farklı projelere göre farklı ana başlıklar dahil olabiliyor. Ama genel olarak bu 3 ana başlık, hem müşteri hem sizin açınızdan yeterli olacaktır.

1. Projenin tanımı

Projelendirmenin ilk adımı mutlaka projenin tanımı olmalı. Projeyi teknik detaya girmeden ana hatları ile tanımlayın, bunu yaparken müşterinin sizden ne istediğinden tam olarak emin olun. Daha ilk adımda müşterinin aklında soru işareti oluşturmamaya özen gösterin. Kendisinin sizden ne istediğini anladığınızı ona kanıtlayın. Daha sonra projenin özelliklerini ve teknik detaylarını belirlemek için 2. bölüme geçebilirsiniz.

2. Proje kapsamı ve özellikleri

Projelendirmeyi yaparken, müşteriye sunacağınız en önemli bölüm projenin içeriği ve özellikleridir. Projeyi iyi analiz ettikten sonra, kapsamını belirleyerek müşterinizin ileride sizden isteyeceği fazladan iş yüküne karşı kendinizi garanti altına almış olursunuz. Müşteri açısından baktığımızda ise; web sitesinin sahip olacağı bütün özellikleri tüm hatlarıyla sunarak, ‘ne yaptığını bilen, işinin uzmanı’ imajını müşterinize göstermiş olursunuz. Bu, daha teklif aşamasındayken müşterinize karşı güven verici bir hareket olur.

Bu bölümde, arayüz tasarımından başlamak üzere web sitesinin hazırlık aşamaları, sitenin tamamlandıktan sonra sahip olacağı tüm özellikler, hangi alt yapı ve programlama dillerinin kullanılacağı, ortalama sayfa sayısı, dil seçenekleri, tarayıcı uyumluluğu gibi detayları listeyebilirsiniz. Tabii bunu yaparken, müşterinin anlamayacağı çok fazla teknik detaya girmemeye, özellikle de yapacağınız işi fazla göstermek için abartıya kaçmamaya özen gösterin. Müşterinin aklını çok karıştırmak işi kaçırmanıza neden olabilir.

3. İş ve ödeme takvimi

İş takvimi hazırlamak bence projelendirmenin en zor bölümü. Proje aşamalarının her biri için bir süre belirlemek, hangi aşamanın ne kadar zamanınızı alacağını kestirebilmek başlarda gerçekten zor oluyor. Ama işinizde deneyim kazandıkça bu konuda kendinize güveniniz artacak, karar vermekte eskisi kadar zorlanmayacaksınız. Daha önce fiyatlandırma ile ilgili Freelance web tasarımda fiyatlandırma stratejisi başlıklı bir makale yazmıştım. Okumanızı tavsiye ediyorum. Çünkü bu bölümde nasıl fiyatlandırılması gerektiğinden bahsetmeyeceğim. İş takviminde proje süresine odaklanmak istiyorum.

Diğer önemli bir husus ise; işi almak için siteyi yapabileceğinizden daha kısa sürede bitirebileceğinizi iddia etmeyin. Tam tersine, eğer bu işte yeniyseniz; toplam süre için tahmin ettiğinizin birkaç gün fazlasını yazın. Çünkü projenin herhangi bir anında hiç hesapta olmayan aksaklıklar ve gecikmeler yaşanabiliyor.

Standart kurumsal tanıtım siteleri için, iş takvimini genel olarak 3 ana sürece ayırmak benim işime geliyor şahsen. Ve ödeme planını 1/4, 1/4, 1/2 şeklinde 3 bölüme ayırarak her sürecin öncesinde talep ediyorum.   Böylece, projenin tüm aşamalarında kendimi ve projeyi garanti altına alıyorum.

Arayüz tasarımı: Sitenin ana sayfasını tasarlayacağınız bu zaman dilimi zorlu bir süreçtir. Bu süre sonunda müşteriyi memnun etmek için; kurumsal kimlik ve tipografi bilginiz ile tasarım deneyiminizi ve uzmanlığınızı konuşturmanız gerekecektir. Bu nedenle iş takviminin ilk zaman dilimini doğru belirleyin (Ben genelde sadece ana sayfa tasarımı için en az 3 gün süre istiyorum). Ana sayfayı bitirdikten ve müşteriyi memnun ettikten sonra alt sayfa tasarımları için ayrıca süre belirleyebilirsiniz. Bu sürecin başında toplam fiyatın 1/4′ünü talep edebilirsiniz. Miktar küçük olduğu için, müşteri büyük ihtimalle işe başlarken ödeme yapmayı kabul edecektir.

Html kodlama (ve arayüz giydirme):  Html kodlama daha çok zamanınızı alacak olsa da, tasarım aşamasından alnınızın akıyla çıktıktan sonra, daha stressiz ve daha özgür bir süreç sizi bekliyor. Kurumsal tanıtım sitelerinde Html & CSS kodlama için ortalama 2 hafta yeterli oluyor bana. Eğer sitenin PHP, ASP ya da ASP.NET gibi bir alt yapısı olacak ise, arayüzü ve Html kodlamayı bu yapıya giydirmek için ihtiyacınız olan zaman da bu sürece dahil olacaktır. Bu nedenle, bu aşama için belirleyeceğiniz sürenin size yeteceğinden emin olun.  Toplam fiyatın 1/4′ünü, bu aşamaya başlamadan önce talep etmeyi unutmayın.

Projenin test yayını ve teslimatı: Web sitesini bitirdikten sonra müşteri ile birlikte gerçekleştireceğiniz test yayın süreci için 3 gün yeterlidir. Tüm siteyi müşteriye çalışır halde gösterdikten ve test ettikten sonra, teslim etmeden önce ödemenin geri kalan kısmının tamamını talep edin. Bu aşamada önemli bir hatırlatma ise; test yayınını mümkünse kendinize ait bir web alanında (sunucuda) gerçekleştirin.

Sonuç olarak;

Bütün bu anlattıklarımı dikkate alarak hazırlayacağınız bir proje teklifi, yasal ve hukuki kapsamı çok net olmayan bir çalışma şeklinde harcadığınız emeğin ve zamanın karşılığında size daha yolun başından itibaren bir çeşit teminat olacaktır.

Sleek UI Arabirim Elementleri (PSD)

Simplito – Sosyal Medya İkon Seti

Transparan Vektörel İkon Seti

40+ Yeşil Renk Pattern

50 Seamless Pattern seti

Paisley Photoshop Pattern

Balita – Ücretsiz WordPress E-Ticaret Teması

Mavi renkli Ribbon Tasarımı (PSD)

Sucker Punch Yazı Tipi – Ücretsiz font

Mangosteen – Ücretsiz Font

Vektörel İkon Seti

NounProject – İkon Seti

jQuery.Suggest eklentisi klavyede ilk harfe basmanızla birlikte çalışmaya başlıyor. Sonrasında bastığınız her harfle birlikte otomatik olarak güncellenip ekrana yeni öneriler getiriyor. Tab veya Enter tuşu ise o an satırda bulunan öneriyi kullanmaya yarıyor. Eğer birden fazla öneri bulunduysa arama satırının altında alt alta listeleniyor. Bu listeyi CSS ile görsel olarak istediğiniz gibi düzenleyebilirsiniz.

Javascript

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];

$(function(){
  $('#container').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more'
  });
});

suggestionColor değeri, otomatik önerilerin rengini değiştirebileceğiniz opsiyonel bir özellik. moreIndicatorClass ise birden fazla öneri bulunduğunda görünen öneri listesinin CSS class’ını tanımlıyor.

Aşağıdaki linkten jQuery.suggest eklentisinin demosunu görebilir ve sayfanın en altında bulunan Download the source bölümünden ücretsiz olarak indirebilirsiniz.

jQuery.suggest eklentisine git >>

Eklentiyi web sitelerinizde kullanmadan önce, indireceğiniz klasörde yer alan lisans dosyalarına da göz atmanızda fayda var.

WordPress’in iPhone versiyonları için araştırma yaparken karşılaştığım bu ipucu, bir çoğumuzun çok işine yarayacak. Aşağıdaki kodlar, iOS işletim sistemi kullanan mobil cihazlar (iPhone ve iPad) ile siteye girildiğinde Safari tarayıcısını algılıyor ve sitenin mobil versiyonu için hazırladığınız CSS dosyasını otomatik olarak çağırıyor. Böylece siteye iPhone ile girdiğimizde otomatik olarak mobil versiyonu karşımıza çıkıyor.

Function.php dosyasına yerleştirmeniz gereken bu kodu ve nasıl çalıştığı ile ilgili teknik detayları aşağıda görebilirsiniz.

iOS’ta Safari’yi otomatik algılamak

Aşağıdaki satırlar iOS işletim sistemi kullanan iPhone ve iPad’de web sitesinin mobil Safari ile açıldığını algılayarak,  mobil versiyon için hazırlanan CSS dosyasını çağırmaya yarıyor. Bunu sağlayan ise $is_iphone değişkeni. Bu değişken ile common.css dosyası yerine mobil versiyonu için kullanılacak alternatif CSS olan iphone.css dosyasının, sitenin <head> bölümüne eklenmesi sağlanıyor. Bunu yaparken WordPress’in standard fonksiyonlarından biri olan wp_enqueue_style kullanılıyor.

add_action('wp_print_styles', 'ilc_enqueue_styles');
function ilc_enqueue_styles(){
	global $is_iphone;
	if( $is_iphone ){
		wp_enqueue_style('iphone-css', get_stylesheet_directory_uri() . '/iphone.css' );
	}
	else{
		wp_enqueue_style('common-css', get_stylesheet_directory_uri() . '/common.css' );
	}
}

Siz de WordPress sitenizin iPhone versiyonuna sahipseniz, yukarıdaki kodları temanızın Function.php dosyasına ekleyerek kullanabilirsiniz. Böylece, sitenizin bir köşesine “mobil versiyonu için tıklayınız” gibi bir link yerleştirmenize artık gerek duymayacaksınız.