bildirgec.org - beyaz_sayfa - beğendikleri

put.io

beyaz_sayfa — Mon, 26 Oct 2009 14:48:00 GMT

Bundan yaklaşık 1,5 sene önce (28 Şubat 2008) yine bu ortamda, Türkiye'den dünya çapında uygulama çıkar mı? isimli bildiriyi yazıp cevap aramıştık. işte bugün, bu sorunun -belki de- cevabını verebiliriz. pilli'nin yeni ürününü, net ortamıyla -özellikle sosyal medya ( friendfeed, twitter, facebook) ile- haşır neşir iseniz çoğu yerde duymuşssunuzdur, yeni girişimlerinin adı: put.io.

Dünya üzerindeki bir takım insanların alışkanlıklarını değiştirmeye aday olabilecek, yepyeni bir proje bu. peki nedir bu put.io ?
yazmaya başlayalım:

öncelikle fikir çok başarılı ve çok süper bir uygulama.
torrent, audio, video, rapidshare adreslerini kendi üzerine indirerek, online olarak kullanabilmenizi sağlıyor.
Her kullanıcıya -şimdilik- 50 gb alan veriliyor.
Put.io ile indirdiğiniz bir DivX videoyu bilgisayarınıza hiç indirmeden ve kalite kaybı olmadan online olarak izleyebilir, aynı şekilde indirdiğiniz müzik dosyalarını tarayıcınız üzerinden dinleyebilirsiniz.
en dikkat çekici özelliklerinden birisi de, verilen rss adreslerinin içerisinde geçen torrent, video ve ses dosyalarını otomatik olarak indirebilmesi.

Tamamen sunucu taraflı çalıştığı için indirme performansı da evdeki bağlantılarımızdan yüksek. yani 700 mb'lık bir dosyayı çok daha kısa bir sürede indirme imkanı sağlıyor.
Put.io üzerindeki dosyalarınızı arkadaşlarınızla da paylaşabiliyorsunuz.
En süper özelliklerden biri, arkadaşlarının indirip paylaştıklarını senin kotandan yemeden sana seyrettirmesi.
Servis şu anda kapalı beta aşamasında fakat zaman zaman çeşitli mecralarda davetiye dağıtılıyor.
put.io tam olarak açıldığı zaman ücretli bir servis olacak. bunu da hatırlatmakta fayda var.

Bu girişimin de bazı avantaj ve dezavantajları bulunmakta...

Avantajları:

Fikir ve uygulama oldukça etkili.
350 MB’lık bir dosyayı 1 dakika içinde indirebiliyor. (Duruma göre değişmekle birlikte)
yakın bir gelecekte download kavramını ortadan kaldırabilir.
sosyal olması nedeniyle arkadaşlarınızın disklerine de tıpkı kendi diskinizmiş gibi erişebilir, yeni yeni şeyler bulma imkanınız var.
Verilen 50 gb az gibi gözükse de diğer arkadaşlarının da diskine (arşivine) erişebilme imkanı insanı cidden heyecanlandırıyor. (en azından beni)
Put.io belki de leb demeden leblebinin tadına bakmanızı sağlıyor. (teşekkürler oky)
Verilen rss adreslerinin içerisinde geçen torrent, video ve ses dosyalarını otomatik olarak indirebilmesi.
Bulunduğunuz ortamda rapidshare veya torrent kullanmaya izin verilmiyorsa put.io ilaç gibi gelecektir.
halen beta aşamasında olduğunu unutmamak lazım. Feedbackler sayesinde eksiklerini gidermeleri çok sorun olmayacaktır.
Arkadaşlarınızın diskine erişebilmeniz sayesinde sizden önce birileri sizin arzu ettiğiniz şeyi (dizi, film vs.) indirmişse eğer iki tıkla onu izleyebilir/dinleyebilirsiniz. Tekrardan indirmenize gerek yok yani.

(muhtemel eksikler) Dezavantajları:

sizin de tahmin edebileceğiniz gibi yasal sorunlar. ama Hasan Yalçınkaya bu durum için şöyle demiş: Olası yasal problemler konusunda ilk günden beri avukatımız Başak Purut ile birlikte çalıştık. Onun uyarıları ile bazı özellikleri kaldırdık. Şu haliyle kullanıcılara bir disk alanı veren ve bu alanı kolayca doldurabilmek için araçlar sunan bir servisiz. Yani bu disk alanı ile ne yapacağınız sizin bileceğiniz iş. Bizim görevimiz servisin kesintiye uğramamasını garanti etmek. bence yasal problemler ileride çok baş ağrıtacaktır. Meyve veren ağaç taşlanır hesabı.
Kimileri için 50 gb alan yetmeyecektir onun için seedbox ile karşılaştırmaların yapılması olağan.
Site tamamen açıldığı zaman paralı olacak. işte burada başlayacak herşey. eğer istenilen fiyat aylık/yıllık bazda (çok) yüksek olursa -özellikle Türk- kullanıcıların çoğunluğu bunun için para vermek istemeyecektir.
Canı sıkılan biri, site tam olarak açıldığı zaman erişime kapattırabilir.
video dosyaları için altyazı desteği. - daha fazla video format desteği. - bağımsız bir mp3 player, playlist lazım, sayfa geçişlerinde de muziğin devam edebilmesi için.

put.io kullanmaya başladım ve çok memnunum. eğer fiyat uygun/makul olursa ücretli üyeliğe de karşı değilim, üye olurum. İlerleyen günlerde neler olacak hep beraber bekleyelim görelim. Hemen her Türk insanında olduğu gibi girişimi tam irdelemeden laf atmalar, beğenmezük tavrı yaklaşımlar hoş değil elbette. Şimdilik benim aklıma gelenler bunlar. Eksikler, gözden kaçırdığım noktalar elbette olacaktır. yorumlarda düzeltilirse sevinirim. Bazı arkadaşlarımın dediği gibi

"Put.io, gezegenimiz ergenleri için YouPorn'dan sonraki en büyük devrim olacaktır."

böyle mi olacak bilinmez ama son yıllarda gördüğüm en heyecan verici projelerden birisi olduğu kesin. şerefsizim benim aklıma gelmişti...

Ek olarak:

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

2 - 8 Haziran'da neler oldu? (haftalık bülten)

beyaz_sayfa — Tue, 10 Jun 2008 20:50:00 GMT

Verimli bir hafta geçiren Bildirgeç'te 2 - 8 Haziran tarihleri arasında neler olmuş, neler bitmiş, görelim.

İlk olarak nehuse bize veohun Türkiye'ye ve daha bir çok ülkeye kapılarını kapattığını bildirmişti.

Ardından Pardus 2008'in ne zaman hazır olacağını birool'dan öğrendik.

Bundan sonra filezza bize bu ajax slideshow resim galerisi scriptini aktardı. Bunun ardından gigabyte bizlere justaddme servisini tanıttı.

Sonra hozer33ün bize gösterdiği bu ilginç tasarıma sahip kullanışlı bıçağa şaşırdık.

Yine gigabyte, blogumuz için ücretsiz antispam eklentisi (yalnızca wordpress ve movable type desteği bulunuyor), antispami bizlere tanıttı.

Web tabanlı en başarılı 10 rss okuyucu incelemesi, toz66'dan geldi.

gigabyte'dan bu kez, web tasarımcıları için firefox eklentilerini öğrendik.

Ardından bozooo , Yabancı Bilgisayar Oyunlarında Türkiye & Türkler yazısıyla bize biraz nostalji yaptırdı. Yeni oyunlar da yok değildi listede elbet.

goopple, bize Google ile ücretsiz private domain edinmenin yolunu gösterdi. gigabyte, bu kez, Klaus E. adında bir Finlandıyalı şanslı bir adamın, 50 centini bir kaç saniye içinde 5.5 milyon dolar yaptığını aktardı. redingot, çalışan programları ve pencereleri gizlememize yarayacak bir kaç program önerdi.

bugra ayan bize 1 terabytelık sabit diski tanıttı.

antihumanist, bizi 30 çılgın graffiti eseri ile tanıştırdı. Tabi, önce 7 tanesini görebildik ama, aponeo sağ olsun, diğerlerini de görmemize olanak sağladı.

adeep, bizi foxytunes'un 3. versiyonuyla tanıştırdı.

Aynı anda 2 arkadaşınız ile sesli ve görüntülü görüşebileceğiniz, sadece sizin davet edeceğiniz kişilerin size ulaşabileceği, program yükleme derdi olmadığı için alternatif olabilecek bir chat aracı olan ekkotv ile tanışmamızı filezza'ya borçluyuz.

icetea, bize picasa 2.7'nin .raw formatını desteklediğini bildirdi.

Ebay'dan 20 $'a hayalet alabileceğimizi, webdedektifi, gösterdi.

bakiyyebemolu
, bize, birbirinden ilginç paket tasarımları göstermişti.

Şu an için 68 Türk kanalının da bulunduğu, 48 ülke televizyon kanalının, 15 kategori altında toplanmış olduğu, ülkelere ve kategoriye göre arama yaparak kanal seçimi yapılabilen, her geçen gün artan tv sayısı ile şu an için 3040 tv kanalı yayınının internet üzerinden izlenebileceği online tv sitesini bize filezza bildirmişti. bakiyyebemolu,

firefox malesef zaman zaman öyle hatalar yapıyor ki bütün yer imlerini, kullanıcı profillerinizi, tarayıcı önbelleğini silebiliyor. bunun önüne geçmek mümkün mü bilmiyorum ancak bilgilerinizi yedeklemek elbette mümkün. bunun için febe eklentisinden yararlanabilirsiniz. ancak biraz daha fazlasını istiyorsanız mozbackup var.

demiş. Bakalım bir mozbackup neymiş?

patateskroket'in,

299$ fiyatı, 1 kg dan daha hafif olan ağırlığı, 7inç ekranıyla ilgi çekici bir ürün.

şeklinde tanımladığı ürün de bu hafta bildirgeç'te yayınlananlar arasında. theplanet'te çıkan yangın sonucu 9000 sitenin erişiminin kesildiğini, racklessten öğrendik.

Donanımından yazılımına kadar açık kaynak kodlu üretilen tek mobil cihaz olmasıyla adını duyuran openmokoyu bize de antihumanist duyurdu. Cihazın iPhone'a rakip olduğunu da bu bildiriden öğrendik.

gigabyte'ın yolladığı bu bildiride evrende yalnız mıyız, uzaylılar var mı konuları çokça tartışıldı. Aynı zamanda konu ile ilgili ve kurgu olmadığı iddia edilen bir görüntü de zihinlerimizi bir süre meşgul etti.

shew
bize Adobe Acrobat 9'un hazır olduğunu bildirmiş ve yeniliklerindenbahsetmiş.

cavo
nun yolladığı bu bildiride dünyanın sonu ile ilgili bazı teoriler zihnimizi kurcaladı.

İki adlı bir müzik grubunun bir albüm hazırladığını ve bunu internet üzerinden ücretsiz olarak dağıttığını ecolips ile öğrendik.

Masaüstünde sitelerin rss'lerini okumak ve kolayca görüntülemek isteyen herkes için snackr haricinde bir de NewsBliss yazılımımız olduğunu beder gösterdi.

Bir türk gencinin yarattığı, program ve oyun arama motoru ceosharei cavo bize tanıttı. Japonya'da 1 yıl boyunca başka birinin evindeki dolapta gizlice yaşayan kadını, gigabyte bize aktardı. israel.com'un america.com'un 3.5 katı fiyata satıldığını pasacocugu gösterdi.

hyd, bize Sothink Flash decompiler ile, .swfleri .flaya çevirebileceğimizi gösterdi.

hozer33
ile bükülebilen ışığı tanıdık.

sharemix
bize birbirinden ilginç paketleme tasarımları göstermişti. Muzlu içeceğin kutusuna hayran olmamak elde değil. hkmt
, Rapidshare Happy Hours aktif olduğunda bize haber veren programı tanıttı.

shew, Samsung 3m ile projektörün cep telefonuna taşındığını haber verdi.

Phoenix'in Mars toprağına ayak bastığını webci'den öğrendik.

Phoenix'in Mars'a gittiğini öğrendik de bıraktık mı meseleyi? Hayır. Bir de su var mı Mars'ta dedik. gigabyte dedi daha doğrusu.

Office 2007 dosyalarını Office 2003'te açmanın yolunu zzombieden öğrendik.

filezza sayesinde resimlerimizi css ile şekillendirdik.

Sitemizden radyo yayını da yaptık, bakiyyebemolu sağ olsun.

96 üst düzey bilgisayar kullanımı örneği gördük, filezza sayesinde.

gigabyte bize unix tarzı google arayüzünü göstermişti.

Rapidshare'in yeni imajıyla tanıştık. pisho bunu bildiri haline getirmişti.

Facebook uygulamalarının bundan böyle açık kaynak olacağını mecjos bildirdi.

Bir gün önce mars'a gittiğini öğrendiğimiz aracın, o gün de sitesinin türkler tarafından hacklendiğini nehuse bildirdi.

"Open Screen Project - swf spesifikasyonu artık açık" isimli yazıyı alpharabius bildirdi.

pisho, bize mayıs ayının gözden kaçırılmaması gereken sitelerini bildirdi.

alpharabius bize ironrubyden bahsetti.

Del.icio.us üyeleri için 15 adet faydalı Greasemonkey Script'i bizimle pisho paylaştı.

ruby ile geliştirme yapanların vazgeçilmez framework'ü Rails'in nihayet 2.1 sürümü duyurulduğunu alpharabius bildirdi.

1 Terabyte'lık diski görmüştük, 5 terabytelık disklerin de yolda olduğunu toz66dan öğrendik.

Adını unuttuğumuz, aklımıza takılan şarkıları nasıl bulacağımızı, empi4'ten öğrendik.

gigabyte'ın iPhone GPhone karşılaştırmasına tanık olduk.

delizade bize, tamamen düşünce ile kontrol edilen biyonik kolu tanıttı.

pisho, bize 25 adet kusursuz ajax tekniği göstermişti.

antihumanist, bizi harika tasarım bloglarıyla tanıştırdı. jquery öğrenmek için ideal kaynakları basarozcan bize aktardı.

xerre, pek çok insana mide bulandırıcı gelebilecek bu sanatla bizleri tanıştırdı.

gigabyte 12000 yıllık bakteriden haberdar olmamızı sağladı.

mecjos, arama yaparak para kazanmamız için bir yol gösterdi.

gigabyte sayesinde kayıp zombiler topluluğunu bile gördük.

gurugafa internette kullandığımız programlara öncelik atamamızı, böylece performans kaybını minimum tutarak internette dolaşmamızı sağladı.

lovesredcloud, bizi, 2 dolar ile insanlara temiz su ulaştırmayı amaçlayan "give a drop" projesiyle tanıştırdı.

shakaci, bir araştırma yapmış ve pilli siteleri arasında en çok tercih edilen siteleri alexayı baz alarak sıralamış.

dcelasun, Pardus 2008 beta 1 ve gelişmeler hakkında bizi bilgilendirdi.

antihumanist bize ücretsiz mükemmel bir fotoğraf arşivi sundu.

errorlog sayesinde, wordpresslerimiz gelişmiş yorum yöneticisi eklentisiyle tanıştı.

mecjos bizlere, amd'nin laptop platformunu sunduğunu bildirdi.

Youtube açılırsa, pek güzel açıklamalar ekleyerek düşünmeyi kullandığım, youtube videolarına açıklama eklemeyi, hikomenden öğrendik.

mecjos bize, 32 gb'lık hafıza kartından bahsetti.

yine mecjos ilginç sırt ve el çantası tasarımları yazısıyla ilgi topladı. gigabyte, bu yazısında insanoğlunun bir nevi geleceği gördüğünü bildirdi.

fedorac0re, bize eggdroptan bahsetti.

İlham alınacak kartvizit tasarımlarından ilham aldık, antihumanist sayesinde. jQuery 1.2.6 sürümünün yayınlandığını basarozcan
haber etti.

antihumanist bu kez 12 sony tasarımını inceledi. yyilmaz, bizi patent konusunda aydınlattı.

xerre bize aids için çekilen en iyi reklam filmini gösterdi.

gigabyte'dan, Google'ın gözünün çok yükseklerde olduğunu öğrendik.
chudo, naked and funny yazısını bizlerle paylaşmış.

bakiyyebemolu, unutulmaz filmlerin unutulmaz 100 afişini bizlerle paylaşmış.

darkhorn, bize firefox 3 rc2'nin yayınlandığını bildirmiş. birool bize pilliilan sitesini duyurdu ve heyecanla beklemekteyiz :).

pisho, bu kez, iş yerinde sinsice kitap okumak için bir yol gösterdi bize.

gigabyte, kubuntu'ya pardus pençesi isimli yazısını bizlerle paylaştı.

pisho, 105'ten fazla logo tasarım kaynakları ve anlatımını bizlerle paylaşmıştı.

yine pisho, 28 adet yaratıcı reklamı bizlerle paylaşmıştı. errorlog, script tutkunlarına ücretsiz scriptler sundu.

toz66, korsana çare bulunmuş dedi, onu okuduk bu sefer de.
shew, "Flash Yongalarda Bir ReKor 34Nanometre de 32Gigabit Veri" isimli yazısını bizimle paylaştı.

lovesredcloud, bizi Uni-Rock Open Air Festival'den haberdar etti.

laci, Rapidshare'de arama yapmamızı kolaylaştıracak siteleri bizler için derledi.

rblick, Crysis Warhead'ın duyurulduğunu bizlerle paylaştı.

karbeyaz, bizi yeni bir video sitesi olan yidio ile tanıştırdı.
pisho, bize, bittorrent üzerinden korsan olarak en çok indirilen 10 tv show'u gösterdi.

yine pisho, Çin kültürü ile Alman kültürünün resimli karşılaştırmasını bizlerle paylaştı.

hayalkurdu, son derece ilginç olan, optik illüzyonla üç boyutlu animasyonları bize bildirdi. gigabyte, paypal ödemelerimiz için tarayıcı eklentisini bizlere sundu.

Yine gigabyte, bu kez, "paranoyak linux" yazısını bizimle paylaştı.

İlk blu-ray müzik albümünün çıktığını, toz66'dan öğrendik.

hayalkurdu, bize dimp programından bahsetti.

Herkesin, sonuçlarını değiştirebileceği, ajax ile çalışan, wikia arama motoruyla tanışmamıza feline ön ayak oldu.

kara, bize yeni gmail labs uygulamalarından bahsetti.

Nasa meydana gelecek depremleri önceden haber verecek bir buluşun eşiğinde olabileceklerini açıkladı. gigabyte da bunu bize açıkladı. empi4 sayesinde crazy browser ile tanıştık.

iPhone 2'nin gizlice(!) geldiğini, ahmetbulent bizlere aktardı.
Opera'nın yeni arayüzü ve sürümüyle tanıştık bu hafta, guitarcraft'ın katkılarıyla.

birkaç basit css uygulama örneği gördük, mecjos'tan.

bendeniz, sizlere online günlük yazma sitelerinden bahsetmiş, penzu'yu tanıtmıştım. google'ın favicon tasarımlarımızı beklediğini sekanet'ten öğrendik.

En iyi photoshop dersleri ve kaynak siteleri bizlere pisho gösterdi.

google'ın arama bölümüne euro 08 yazdığımızda, canlı yayınlanan maçın skorunu ve dakikasını görebileceğimizi djwhisper göstermişti.

25 adobe air uygulamasını, bendeniz, sizlerle paylaşmıştım. google website optimizer ile tanışmamızı gigabyte sağladı.

yunuss'tan format sonrası yükleme ve ayarlamalar için tüyolar aldık. 25 bedava Photoshop eklenti ve filtre sitesini agurbuz bizlere gösterdi.

gigabyte'ın eklediği "Firefox online çeviri eklentisi" de haftanın son bildirisi oldu ve dolu dolu bir bildirgeç haftası burada sona erdi. Nice dolu haftalara.

Kusura bakmayın, biraz geciktim ancak malumunuz uzun bir yazı oldu.

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

25+ Web 2.0 Oluşturucusu

beyaz_sayfa — Thu, 09 Apr 2009 06:46:00 GMT

Bazen müşterilerinizin bir gün içerisinde sonucunu görmek istediği projeler ile karşılaşabilirsiniz. Eğer siz de çabucak çizgili arkaplan, bir CSS menüsü ya da web 2.0 damgasına ihtiyaç duyuyorsanız, o zaman bu tip elementleri otomatik olarak oluşturabilen web tabanlı araçlar bazen zamanınızın dar olduğu anlarda hayat kurtarıcı olabilirler. Özellikle son dönemlerde bu tip otomatik oluşturucular, üzerinde çalıştığım bir fotoğraf galerisinde çok yardımcı oldular. Belki de siz her şeyi sıfırdan oluşturmayı seven bir tasarımcı olabilirsiniz. Ancak bu araçlar, ihtiyacınız olduğu zamanlarda kullanabileceğiniz, her zaman el altında bulunması gereken araçlar olarak yer imleriniz arasındaki yerini almalı.

1. Web 2.0 Oluşturucusu

Artık web 2.0 çağındayız. Bu web 2.0 geliştiricisi sayesinde yuvarlatılmış köşelere sahip XHTML/CSS anahatları oluşturabillirsiniz. Daha ne istersiniz ki? Sitenin oluşturduğu XHTML kodu ayrıca doğrulanabilir. Dilediğiniz renkleri seçebileceğiniz bu uygulama aracılığı ile sadece birkaç dakika içerisinde anahattınızı oluşturabilirsiniz.

2. Şerit Oluşturucusu

CSS/XHTML anahattınız var ve şimdi tek istediğiniz şeritli bir arkaplan. Sorun değil. Tek ihtiyacınız olan şey bu şerit oluşturucusunu kullanmak. Çok sayıda seçeneğe sahip olan bu uygulama ile dilediğiniz modelde şeritleri oluşturabilmeniz mümkün. Bunun yanısıra diğer kullanıcılar tarafından kullanılan şeritleri de kullanabilirsiniz.

3. Sekme Oluşturucusu

Sekmelerden hoşlanıyor musunuz? O zaman bu sekme oluşturucusu sizin hoşunuza gidecektir. Bu oluşturucu sayesinde sayfanın nasıl görüneceğine önceden bakabilir ve son değişiklikleri yaptıktan sonra "Download" bağlantısına tıklayarak PNG dosyasını alabilirsiniz. Bu kadar kolay.

4. Web 2.0 Damgaları

Diğer web 2.0 oluşturucularından elde ettiğiniz damgayı beğenmediğinizi ya da kullandığınız damganın rengini değiştirmek istediğinizi varsayalım. Bu oluşturucuyu kullanarak dilediğiniz tür damgayı kullanırsınız.

5. Düğme Oluşturucusu

Anahattınız, damganız ve sekmeleriniz hazır. Başka neye ihtiyacınız var? Belki de ücretsiz içeriklerin indirilebilmesi için ziyaretçilerin tıklayabileceği bir düğme. Buttonator adındaki bu uygulama ile web 2.0 düğmelerini oluşturabilirsiniz. Yazının devamında diğer düğme oluşturucularını da bulacaksınız.

6. Favicon

"Web sitesi simgeleri, kısayol simgeleri, URL simgeleri ya da yer imi simgeleri olarak da bilinen faviconlar, 16x16 piksel boyutlarında bir görsel olup bir web sitesinin genelinde ya da bir web sayfası üzerinde kullanılırlar". Eğer profesyonel bir web sitesi oluşturmak istiyorsanız, o zaman favicon gerekli bir elementtir. Bugüne kadar iyi bir tasarıma sahip, ancak favicon içermeyen pek çok profesyonel web sitesi gördüm. Bu oluşturucu sayesinde favicon'un nasıl göründüğünü doğrudan tarayıcınız üzerinde görebilirsiniz. Eğer bir görseliniz var ise, onu favicon'a da dönüştürebilirsiniz.

7. Ajaxload Web 2.0

Ön yükleyiciler oluşturmak için zaman harcamaktansa bu oluşturucuyu kullanabilirsiniz. Bu siteyi gerçekten seviyorum. Pek çok farklı tip ön yükleyici görselleri içeren bu web sitesi sayesinde ön yükleyicilerin renklerini ve arkaplanını değiştirebilirsiniz. Site ayrıca güzel bir tasarıma da sahip.

8. 3B Kutu Oluşturucusu

Bazı web siteleri bazen ücretsiz vektörler, photoshop fırçaları ve daha fazlasını ziyaretçilerine sunuyor. Sitede sunulan görselleri ise gerçekçi 3B kutular üzerinde yayımlayabiliyorlar. Bittbox Örneğine bir göz atın. Bu tip kutular Photoshop ya da diğer görsel düzenleyicileri ile oluşturulabilir. Ancak bu tip uygulamaları kullanmayı öğrenmektense neden web tabanlı ve kullanımı kolay olan bir uygulama kullanmayasınız? Kutu için 3 adet görseli (ön, arka ve yanlar) siteye gönderin ve bir dakika içerisinde bilgisayarınıza indirebilirsiniz. Rasgele bir resim seçerek oluşturduğum kutunun bir örneğini yukarıda görebilirsiniz.

9. Picmarkr

Eğer bir fotoğrafçı iseniz ya da sitesinde çok sayıda görsel bulunduran birisi iseniz ve insanların görsellerini çalmasını istemiyorsanız, o zaman görselleriniz üzerinde adınızın ya da sitenizin adresinizin yer almasını isteyebilirsiniz. Picmarkr'ın güzel yönlendiren birisi ise bilgisayarınızdaki görselin yanısıra facebook, flickr ve Facebook albümünüz üzerinden de görsellerinizi düzenleyebilirsiniz. Tıpkı yukarıdaki örnekte de olduğu gibi bu tip eklentiler de bilgisayarınıza kurulabilecek Photoshop türevi bir uygulama aracılığı ile yapılabilir ancak web tabanlı bu tip uygulamaları kullanmak daima çok daha kolaydır.

10. CSS Yuvarlatılmış Köşeler

HTML ve CSS ile kolayca yuvarlatılmış CSS köşeler oluşturun.

Ayrıca aşağıdaki oluşturucuları da deneyebilirsiniz

BGPatterns: Kullanışlı bir diğer motif oluşturucusu.
Fresh Generator: Web 2.0 düğmeleri, yuvarlatılmış köşeler, kutular ve çok daha fazlasını oluşturun.
Website Bandı Oluşturucusu
Ücretsiz Post-it Oluşturucusu: El yazısı ile yazılmış post-it notları oluşturun.
XHTML/CSS Sözdizimi Oluşturucusu: Eğer XHTML'de yeniyseniz ve XHTML'ye özgü sözdizimlerini sürekli unutuyorsanız, o zaman bu araç size yardımcı olacaktır.
Yansıma Oluşturucusu: Eğer bir görselinize modern web sitelerinde gördüğünüz o hoş yansıma efektlerini uygulamak istiyorsanız, o zaman bu oluşturucuyu kullanabilirsiniz.
Genfavicon: Diğer bir favicon oluşturucusu.
Web 2.0 Logo Oluşturucusu: Web 2.0 tarzında logoları kolayca oluşturun.
Şerit Tasarımcısı
Ekose Oluşturucusu: Şeritleri boşverin, sitelerinizde ekose kullanın. Bu oluşturucu sayesinde kolayca ekose desenleri oluşturabilirsiniz.
Ücretsiz Altlık Oluşturucusu: FreeFooter, web sitenizin ya da blog sayfanızın altlık (footer) kısmını özelleştirebilmenizi sağlıyor.
Fresh Badge: Diğer bir fırça oluşturucusu.
Cool Text: Ücretsiz grafik ve düğme oluşturucusu.
Renk Şeması Oluşturucusu: Bu renk sihirbazı sayesinde mükemmel renk uyumuna sahip web siteleri oluşturabilmek için kullanabileceğiniz renk şemaları oluşturabilirsiniz.
WebFX: Web tabanlı grafik efekti oluşturucusu sayesinde dilediğiniz herhangi bir görseli siteye yükleyebilir ve pek çok efektten dilediğiniz birisini seçebilirsiniz.
Dotetemplate: Bir web sitesinin tamamını bu oluşturucu ile oluşturabilirsiniz.
Avatar Generator: Avatar oluşturucusu.

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

Gezinti Menüleri İçin 25 jQuery Kılavuzu

beyaz_sayfa — Wed, 08 Apr 2009 11:10:00 GMT

Gezinti (navigasyon), kullanılırlık açısından web tasarımında oldukça önemlidir. Buna rağmen bağlantılar ve gezinti menüleri bir sitenin görsel görünümünü daha da iyileştirebilir. Eğer herkesin yaptığından daha farklı bir gezinti menüsü oluşturmak istiyorsanız, jQuery bunun için size sayısız seçenek sunmaktadır. Bu yazıda jQuery ve CSS kullanarak gezinti menülerinde nasıl ilgi çekici efektler oluşturabileceğinizi göreceksiniz.

1. jQuery Kullanarak Nasıl Animasyonlu Menü Yapılır?

2. Digg Başlığını Tasarlamak: Nasıl Yapılır ve İndirme Bağlantısı

3. CSS Sprites 2: Şimdi JavaScript Zamanı

4. jQuery Kullanarak Apple Tarzında Menü Oluşturmak

5. jQuery Sekmeli Gezinti

6. jQuery İle Renk Geçişli Menü

7. CSS ve jQuery İle Sekmeli İçerik Bölgesi Oluşturmak

8. Arkaplam Görsel Animasyonları İçin jQuery Kullanmak

9. jQuery Kullanarak Klavye İle Yönetilen Menü Oluşturmak

10. jQuery İle Animasyonlu Açılır Menü

11. jQuery ve CSS Örneği: Açılır Menü

12. jQuery Rasgele Bağlantı Rengi Animasyonu

13. jQuery Öğrenmek: Menüden İçeriğe Geçiş

14. jQuery İle Bağlantıları Geçiştirmek: dwFadingLinks

15. jQuery İle Kaydırılabilir İçerik

16. jQuery Severler İçin LavaLamp

17. jQuery ve CSS İle Animasyonlu Gezinti Menüsü Oluşturmak

18. mooTools Anasayfası Üzerindeki Menüden Esinlenilerek jQuery Oluşturulmuş Menü

19. CSS İle Çoklu Seviye Menü Oluşturmak ve Onu jQuery İle İyileştirmek

20. Coda Kaydırıcı Efekti

21. jQquery İle Çoklu Seviye Açılır Menü

22. jQuery İle Animasyonlu Menü

23. CSS ve jQuery İle Sekmeli Kutu Oluşturumu

24. jQuery ve CSS İle Yüzen HTML Menüsü Oluşturmak

25. jQuery Bağlantı Pozisyonlama

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

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

İyi Bir Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik

beyaz_sayfa — Fri, 27 Mar 2009 07:40:00 GMT

Bir süre önce, modern web uygulamalarındaki trendlere yönelik yazı dizisinin ilk bölümü olan 10 Kullanışlı Web Uygulama Arayüzü Tekniği yazısını yayımlamıştım. Diğer şeylerin yanısıra bu yazıda gömülü video blogları, özelleştirilmiş kontrol ve içeriğe göre değişen gezinti elementlerine dair bazı ipuçlarına yer vermiştim. Yazıda ayrıcı basılı düğmelerin durumu, modal pencerelerin çevresinde gölge kullanmak ve giriş sayfası üzerinden kayıt sayfasına bağlantı verilmesi gerekliliğinden de bahsetmiştik.

Bu yazı ise incelemenin ikinci bölümünü oluşturmaktadır: Web Uygulamalarında İyi Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik. Yazımızda ayrıca bu tekniklerin doğru bir şekilde kullanılması için uygulamalara nasıl entegre edilmesi gerektiğini de bulacaksınız. Eğer sizin de bu konuda paylaşmak istediğiniz görüşleriniz ve önerileriniz varsa yorumlarınızda belirtmekten çekinmeyin.

1. Önemli Değişiklikleri Belirtin

İyi kullanıcı arayüzü tasarımı için en önemli elementlerden birisi de sistem durumunun görünürlüğüdür. Kullanıcılar sitenin görünmeyen kısmında olan şeylerden ve eylemlerinin oluşturacağı sonuçlardan derhal haberdar olabilmelidirler. Daha sofistike bir sistem görünürlüğünü uygulamalarda kullanabilmek için web siteleri günümüzde, elbette, AJAX kullanmaktadırlar. Bildiğiniz üzere AJAX sayesinde kullanıcılar, web sayfalarının tamamını yeniden yüklemek zorunda kalmadan sadece belirli bölümlerinde değişiklikler yapabilmektedirler. AJAX, web uygulamalarının etkileşimliliğini ve yanıt verme yeteneklerini masaüstü uygulamaları ile neredeyse aynı seviyeye getirebilmektedir.

Yammer, besleme üzerindeki yüm mesajlara bir değil üç adet efekt uygulamaktadır: Yavaşça belirme, aşağı kayma ve öne çıkarma.

Bu dinamik oluşumun anlamı, bir düğmeye tıkladığınızda sayfa yeniden yüklenmemesi ancak sayfada bir şeyin olmasıdır. Pek çok web sitesi halen AJAX'ı etkin bir şekilde kullanmamaktadır, bu sayede bazı kullanıcılar halen bir düğmeye tıkladıktan sonra bir şeyin olup olmayacağını ya da düğmelerin doğru şekilde tıklanıp tıklanmadığını bilememektedirler. Bu sorunun önüne geçebilmek için kullanıcı etkileşimlerinin her birine görsel geribildirim uygulamalısınız.

Backpack görev listesindeki her bir öğe için, ekrandan kaybolmadan önce birkaç saniyeliğine ekranda kalan öne çıkarma efektini kullanmaktadır.

Bunu yapabilmenin mükemmel bir yolu olarak animasyon kullanmak gösterilebilir. İnsan gözü, hareketi iyi bir şekilde algılayabilir, özellikle sayfanın geri kalanının hareketsiz olduğu durumlarda. Öne çıkarma animasyonunu örneğin kullanıcılar alışveriş sepetine bir şey eklediklerinde, onların dikkati o öğelere çekilir. Ziyaretçiler, sunulan animasyonlar sayesinde eylemlerinin çalıştığını anlayacaklardır. Animasyonlar JavaScript kullanılarak siteye dahil edilebilir ve bu animasyonlar, görsel geribildirim sunabilmenin güzel bir yoludur. Sadece bu animasyonlarda aşırıya kaçmamaya dikkat edin zira çok fazla animasyon kullanımı arayüzü ağırlaştırabilir ve bu da kullanıcı memnuniyetsizliği ile sonuçlanır.

2. Web Uygulamalarınızda Klavye Kısayollarını Etkinleştirin

Modern web uygulamalarının özellikleri masaüstü uygulamaları ile eş seviyeye gelmeye başladıkça, bu uygulamaların geliştiricileri kullanıcılara daha fazla yanıt verebilen ve etkileşimli kullanıcı arayüzleri hazırlamayı hedefliyorlar. Bu hedefe ulaşabilmek için kullanılabilecek tekniklerden birisi de, klavye kısayollarının ya da navigasyonun dahil edilmesidir. Tıpkı klasik uygulamalarda olduğu gibi bu tip küçük özellikler kullanıcıların çalışma alanını önemli ölçüde iyileştirebilirler ve ayrıca kullanıcılarının görevlerini daha çabuk bir şekilde yerine getirebilmelerini sağlar.

Aslında günümüzde çeşitli web uygulamaları halihazırda klavye kısayollarını kullanmaktadırlar (örneğin, Googla Spreadsheets, MobileMe vs.) ve hatta Ffffound ya da Boston.com gibi web siteleri de temel gezinti için klavye kısayollarını desteklemektedir. Ffffound web sitesi, "v" tuşuna basıldığında resim önizleme görünümünden liste görünümüne; "h" tuşuna basıldığında sayfanın üst kısmına gidilmesine; "k" ve "j" tuşları ise sırasıyla önceki ve sonraki görsele geçilmesine izin vermektedir. Boston.com web sitesi de "k" ve "j" tuşlarını aynı eylemin gerçekleştirilebilmesi için kullanmaktadır.

Klavye kısayollarının yaratıcı ve kendi kendini açıklayabilir nitelikte olmasının öneminden bahsetmeye değer. Örneğin, "Önceki" ve "Sonraki" eylemleri için bir birlerinden çok uzakta olan iki adet klavye kısayolu kullanmak mantıklı olmaz. Bunun sebebi, eğer kullanıcı bir hata yapıp gitmek istemediği bir sayfaya giderse, kullanıcı bu durumda anında bir önceki sayfaya dönebilir ve bunun için klavyeye bakmasına gerek kalmaz. "j/k" ayarı kullanılabilecek yöntemlerden birisidir. Ayrıca farklı web siteleri için benzer klavye kısayollarını kullanmak da kesinlikle mantıklı olacaktır ancak henüz bu alanda henüz bir orta yol bulunabilmiş değil.

Peki bunu sitenize nasıl ekleyebilirsiniz? Aslında tek yapmanız gereken onKeyPress DOM elementini kullanmak ve ardından window.scrollTo JavaScript fonksiyonunu sitenize yerleştirmek.

Ffffound.com sitesi onMouseDown efektini kodunda kullanmış ancak bu yaklaşım pek doğru değildir. Bunun yanısıra JavaScript özelliğini CSS stil şablonundan ve (X)HTML kodundan ayırmak yerinde olurdu.

<a id="float-navi-prev" href="javascript:void(0);"
onmousedown="try { move_asset_auto(-1) ;} catch (e) { }"
onclick="return false;">prev(<span class="shortcut">k</span>)
</a>

Burada jQuery gibi bir JavaScript kütüphanesi kullanmak ve ardından elementi tanımlayıcısı ile ya da sınıfı ile çağırmak yerinde olurdu. Bu aslında neredeyse Boston.com'un yaptığı şey. Galerisindeki tüm görseller bpImage sınıfı ile etiketlenmiş ve ardından JavaScript işaretçileri de diziye eklenmiş. onKeyPress eylemi ise arkaplanda kayan pencereyi tetikliyor ve tarayıcının penceresi ise window.scrollTo() fonksiyonunu kullanıyor.

(X)HTML kodu şu şekilde:

<img src='http://www.bildirgec.org/[url]' class="bpImage" />
<div class="bpCaption">...</div>

<img src='http://www.bildirgec.org/[url]' class="bpImage" />
<div class="bpCaption">...</div>

<img src='http://www.bildirgec.org/[url]' class="bpImage" />
<div class="bpCaption">...</div>

...

Ve JavaScript koduna da buradan ulaşabilirsiniz.

Tüm bunları sitenize dahil ettikten sonra sitenizin klavye kısayollarını desteklediğini ve siteniz üzerinde bazı görevlerin daha verimli bir şekilde yerine getirilebilmesini sağladığından bahsetmeyi unutmayın. Eğer bir kullanıcı görevleri sizin uygulamanız üzerinden verimli bir şekilde yerine getirilebildiğine inanırsa, o zaman bir başka uygulamayı daha sonra kullanmaya başlama ihtimali, diğer uygulamanın da sizin uygulamanızla aynı ya da daha az özelliğe sahip olması durumunda, çok daha azdır.

3. Hesap Sayfası Üzerinden Seçeneklerin Güncellenebilmesi

Eğer uygulamanız çeşitli abonelik planları sunuyorsa, uygulamanız üzerindeki tüm arayüz hatalarını ve tutarsızlıklarını gidermeyi unutmayın. Pek çok kullanıcı uygulamalar için ücret ödemeden önce uygulamanın sunduğu en düşük özellikli ve muhtemelen ücretsiz bir paketi kullanarak uygulamanın geneli hakkında bir fikir sahibi olmak isterler. Eğer uygulamanın kendi beklentilerini karşıladıklarına ikna olurlarsa, o zaman daha gelişmiş bir pakete abone olmayı düşünebilirler. Bu geçişi en sade ve yaratıcı bir şekilde sağlayabilmek ise tasarımcının görevidir.

CrazyEgg, sitenin ana gezinti elementine "Planı Değiştir" seçeneği eklemiştir.

Aslında günümüzde pek çok web uygulaması doğrudan yükseltme seçeneklerini doğrudan kullanıcı hesabı sayfasına koymuştur ki bu sayede ilgili seçenekler kolay bir şekilde erişilebilir kılınmıştır. Bu tasarım tercihi kullanıcılara sunulan seçeneklerin ve halihazırda desteklenen özelliklerin sade bir şekilde aktarılabilmesi avantajını da sağlamaktadır.

Bigcartel'in yükseltme planları uygulamanın kendisi üzerinden sunulmaktadır.

Kullanıcıların bir üst pakete geçmeleri durumunda elde edecekleri avantajları aktarabilmenin yanısıra onların halihazırda sahibi oldukları özellikleri de belirtmenin önemli olduğunu unutmayın. Kullanıcılar açısından güncelleme yapılması durumunda elde edilecek yeni özelliklerin ve diğer yeniliklerin, o an kullandıkları ile karşılaştırma yapabilmelerini sağlamak önemlidir.

4. Uygulamanın Özelliklerini Tanıtın

Her ne kadar ayrıntılı bir pazarlama ve tanıtım sayfası çıkarmış olsanız bile, uygulamanızın diğer tüm özelliklerini ayrıntılamak ve web sitenizde bir yardım sayfası belirtmek, kullanıcıların pek çoğu onu okumayacak olsa bile önemlidir. Onlar muhtemelen ürününüzün sunduğu tüm özelliklerin farkında değillerdir ve uygulama üzerinden sunacağınız küçük ipuçlarından kesinlikle faydalanacaklardır.

Uygulamanızın yeni özelliklerini tanıtın. Bu tip duyurular muhtemelen yan çubuk üzerinde, uygulamanın ana özelliklerin sunulduğu alandan uzakta belirtilmelidir. Eğer bir kullanıcı bir özelliği tam kapasite ile kullanmaya yaklaşmışsa, o zaman bunu kullanıcıya belirtmeli ve onu hızlıca yükseltme yapabilecek seçeneği sunabilmelisiniz.

Freckle zaman kayıt uygulaması uygulama üzerinde kullanabileceğiniz en yüksek kullanıcı sayısına ulaşıldığında bunu kullanıcıya bildirir. Bu mesaj ayrıca kullanıcının yükseltme yapabilmek için yapması gerekenlerin yer aldığı bir sayfaya da bağlantı içermektedir.

Wufoo yeni form galeri özelliğini form oluşturma sayfasının altında tanıtıyor ve bu sayede kullanıcıların uygulamadan verimli bir şekilde faydalanabilmelerini hedefliyor.

5. Renk Kodlu Listeleri Kullanın

Bazı uygulamalar, farklı tiplerdeki içeriği içeren alanlar kullanmaktadır. Örneğin, en son mesajlarınızı, görevlerinizi ve dosyaları ana sayfası üzerinde listeleyen bir proje yönetim uygulamasının sahibi olabilirsiniz. Eğer tüm bu öğeler bir liste üzerinde yer alırsa, neyin ne olduğunu ayırtetmek kolay olmaz. Pek çok uygulama, farklı türlerdeki girdileri görsel olarak birbirinden ayırma yoluna giderler. Bunu kolayca yapabilmenin yollarından birisi de renkli bir kutu içine metin başlığını yerleştirmektir. Bu sayede liste kolay bir şekilde taranabilir hale gelir.

Aynı görev için farklı renkleri ya da farklı görevler için benzer renkleri kullanmamaya dikkat edin. Renk şeması rasgele seçilmemelidir ancak her bir öğenin sunduğu özelliği yansıtabilmelidir.

Lighthouse sorun kayıt yazılımı genel görünüm sayfasının sağ kısmında farklı renklerde başlıkları kullanarak listenin hızlı bir şekilde taranabilmesini sağlıyor.

Goplan sitesi de farklı renklerde etiketleri liste üzerindeki görevler, notlar ve dosyaları birbirinden ayırabilmek için kullanıyor.

6. Kişiselleştirme Seçenekleri Sunun

Günümüzde pek çok uygulama kurumsal ve bireysel kullanıcılar için çalışma alanları sunmanız gerekiyor. Sunabileceğiniz kişiselleştirme seçenekleri sayesinde kullanıcılarınız kendilerini evinde hissederler. Bu, kullanıcılarınıza, uygulamanın görünümünü değiştirebilecek seçenekler sunarak sağlanabilir. Kullanıcılarınıza uygulamanın renk temasını, bağlantı renklerini, arkaplanını ve benzer özelliklerini değiştirebilmelerini sağlayın Az bir miktar özelleştirme bile kullanıcılarınıza kendi sayfalarını oluşturabilmelerini sağlamaya yetecektir.

Campaign Monitor uygulaması, kendi renk şemanızı seçebilmenizi ve şirket logonuzu kullanabilmenizi sağlar. Bu sayede kurumlar, kendi renklerini kullandıkları web uygulamalarına entegre edebilmelerini sağlar.

Özelleştirme seçenekleri, kullanıcılarınızı kendi hizmetlerinize bağlamak için kullanılabilecek en basit ve bir o kadar da verimli yöntemlerden birisidir, ancak bu özelleştirmelerin kullanıcının ana özelliklerinin üzerine geçmemesi gerektiğini unutmamalısınız. Sistem daima özelliklerini işler kılabilmeli ve aynı zamanda kullanıcı beklentilerini karşılayabilmelidir. Kullanıcıların uyguladıkları kişiselleştirmeler, hiçbir zaman uygulamanın üzerine geçmemelidir.

Web sitesinin ana özellikleri ile kullanıcı arayüzü arasındaki farkı tutarlı bir şekilde bir arada tutabilmek için kullanılabilecek bir diğer kullanışlı yaklaşım ise farklı seviyelerde özelleştirme seçenekleri sunmaktır. Bu seçenekler, kullanıcının uygulamanızı ne kadar verimli bir şekilde kullandığına göre değişmekle birlikte ayrılarak gösterilebilir. Deneyimsiz kullanıcılar için kısıtlı özelleştirme seçenekleri, gelişmiş kullanıcılar ise tüm özelleştirme seçeneklerini sunabilmek doğru bir yaklaşım olacaktır. Son olarak kullanıcının tercih ettiği zaman uygulamanın öntanımlı tercihlerine dönebilmesi ya da bir önceki oturum sırasında kaydettiği kişiselleştirmelere geri dönebilmesi de önemlidir.

Twitter, kullanıcılarının profil sayfalarının arkaplanını ve renklerini değiştirebilmelerine izin verir, bu sayede kullanıcıların özgün sayfalar oluşturabilmelerini sağlar.

7. Göze Çekici Gelen Yardım Mesajları Görüntüleyin

Her bir web uygulamasının görevleri yerine getirebilmek için kullandığı yöntem farklıdır. Eğer bir elementin özelliği istendiği an görüntülenemiyorsa, kullanıcılara yardımcı olmak için yardım mesajları gösterebilirsiniz. Burada dikkat edilmesi gereken bir önemli nokta, eğer o an ne yapmak istediğinden emin olmayan kullanıcılara yardım etmek istiyorsanız, onların dikkatını ilgili mesaja çekmek gerektiğini hatırlamalısınız. Dikkat çekebilmek için kullanabileceğiniz bir yöntem renkledir. Yan çubuk üzerinde farklı bir arkaplan renge sahip "yapışkan" mesaj kullanarak mesajın sitenin ya da uygulamanın geri kalanından daha ön planda belirmesini sağlayabilirsiniz.

Goplan uygulaması, tıpkı post-it notlarına benzer sarı renkli kutular üzerinde yardım mesajlarını görüntüler. Kullanılan parlak renk sayesinde kullanıcının vurgulanan mesajı kaçırmaması sağlanır.

Alternatif olarak eğer fazla yer kaplamayan daha az belirgin ve uygulamanızı düzenli olarak kullanan kullanıcıları rahatsız etmeyecek bir çözüm arıyorsanız, daha az görsel grafik (örneğin küçük boyutlu simgeler) kullanmayı tercih edebilirsiniz. Wishlistr.com uygulaması, güncellenen ve yeni özellikler içeren arama motoru için bu yöntemi başarılı bir şekilde kullanmı.

Klasik: Wishlistr kullanıcının dikkatini duyuruya çekebilmek için bir ampul simgesini kullanmayı tercih etmiş.

8. Geribildirim Mesajlarını Dikkatle Tasarlayın

Aşağı yukarı her uygulama bir tür geribildirim içerir. Uygulamaların farklı yerlerinde ve durumlarda bir uyarı ya da hata olarak beliren bu mesajlar, br görev tamamlandığında ya da tamamlanamadığında belirir. Bu mesajları doğru şekilde tasarlayabilmek önemlidir zira ortada panik yapılacak bir şey olmamasına rağmen kullanıcılarınızın şüphelenmeye başlamasını istemezsiniz.

Buna yönelik yapılabilecek birkaç şey bulunmaktadır. İlk olarak farklı mesaj tiplerini farklı renklerle belirtmektir. Başarılı eylemleri belirten mesajlar genellikle yeşil olarak renklendirilmiştir. Bu, trafik ışığı analojisindeki yeşil rengin "Git" anlamına gelmesi fikrini web uygulamalarına entegre etmektedir. Uyarı mesajlarını sarı, hata mesajlarını ise kırmızı renk tonlarında göstererek kullanıcıların mesajın içeriğini okumadan genel bir fikir sahibi olmalarını sağlayabilirsiniz.

Mailchimp web sitesi hata mesajları için renk kodlarını verimli bir şekilde kullanmaktadır.

Yapılabilecek bir diğer şey ise her bir mesaj tipine özgü simge kullanmaktır. Simgelerin taşıdığı anlam sayesinde kullanıcılar mesaj hakkında genel bir fikir sahibi olurlar. Örneğin bir "onay işareti", başarılı bir eylemin gerçekleştiğini sembolize eder. Bir üçgen içerisindeki ünlem işareti ise uyarı anlamına gelir. Bu tip geribildirimleri kullanan uygulamalarda çalışan kullanıcılar, kendilerini uyaran bir mesaj olduğunu derhal farkedecekler ve ona gerekli özeni göstereceklerdir.

GetSignOff web sitesi, mesaj kutusunun sağ üst köşesinde bulunan çarpı işaretine tıklandığında mesajın kapatılabilmesine izin vermektedir.

Son olarak kullanıcılarınıza uyarı mesajlarını kapatabilmelerine izin vermelisiniz. Bu durum özellikle kullanıcıların sayfanızda uyarı mesajından sonraki süre zarfında mesajın belirdiği sayfa üzerinde bir süre daha kalmaları durumunda kullanışlı hale gelecektir.

9. Sekmeli İçerik Kullanın

Günümüzde pek çok web uygulaması, sekmeli gezintileri uygulamalarının ana gezinti öğesi olarak kullanmaktadırlar. Sekmeli gezintiler, tıpkı dosyaların ya da klasörlerin her birinin kendine ait bir sekme içerisinde durmasına benzer ve etkin sekme sayfanın gövdesine bağladır. Sekmeli içerik sadece göze çekici gelmekle kalmas, ayrıca kullanılırlık açısından da önemli bir unsur teşkil eder.

Freckle sekmeli gezinti öğesini sitesinin alt menülerinde kullanmaktadır.

Basecamp ise uygulamasının ana gezinti öğesi olarak sekmeli menü kullanmayı tercih etmiştir.

Eğer menünüzü klasörlerde birer sekme gibi yaparsanız, neredeyse herkes onun nasıl çalıştığını ve ne yaptığını ilk bakışta anlar. Bunun sebebi ilgili öğenin görsel metaforunun açık ve net olmasıdır. Ayrıca geçerli sayfa ya da bölüm kolay bir şekilde görünür. Onların nerede olduğunu bilmeleri kullanıcıların işini kolaylaştırır, zira kullanıcılar bu sayede uygulamayı daha kolay bir şekilde kontrol altına almış olurlar.

10. Modal Pencerelerin Altında Koyu Arkaplanlar

Bazı uygulamalarda az miktarda olduğu için kendine ait sayfa oluşturmayı gerektirmeyen bilgi parçacıklarını görüntülemeyi deneyebilirsiniz. Bazı geliştiriciler bu tip bilgileri modal pencere adını verdikleri pencereler içerisinde görüntülemeyi tercih ederler. Modal pencereler küçük pencereler olup geçerli sayfa üzerinde belirir ve kullanıcıların devam edebilmesi için onunla etkileşim kurması gerekmektedir.

Squarespace website oluşturma uygulamasındaki bölümleri düzenlediğinizde, arkaplan karararak kullanıcının odağının düzenleme penceresine çekilmesi sağlanır.

Bu pencerenin daha da belirgin olmasını sağlamak için onun ardındaki arkaplan karartılır. Karartılmış arkaplan sayfanın tüm karmaşıklığını gidererek modal pencereyi odak noktası haline getirir. Bu yöntem, modal pencerelerin çevresine gölge eklemekle aşağı yukarı aynı işlevi görür ancak arkaplanı karartmak, gölgeye oranla, ilgili pencereyi odak noktası haline getirmek için daha etkilidir. Karartılmış arkaplan ayrıca üzerindeki içerikle etkileşimin kesildiğini belirtir ve kullanıcının sadece önplandaki modal pencere ile etkileşim kurması gerektiğini açık ve net bir hale getirir.

11. Lightboxlar ve Slayt Gösterileri

Bazı uygulamalar, kullanıcıların incelemesi için çok miktarda görsel sunabilirler. Her bir görseli kendi sayfası altında görüntülemek belki de bunu en verimli bir biçimde uygulamak için tercih edilmesi gereken yöntem değildir - hem ziyaretçileriniz, hem de sunucunuz için. Ziyaretçileriniz her bir görsel için ileri geri gezinmek zorunda kalacaklardır ve sunucunuza bu sebeple fazladan istek gönderilmiş olacaktır.

SmugMug fotoğrafları daha belirgin hale getirmek için lightbox kullanmaktadır. (Fotoğraf: Kurt Preston).

Lightboxlara ve slayt gösterileri yeni bir sayfa yüklemeye gerek kalmadan fotoğrafların görüntülenmesini sağlar. Örneğin lightbox yöntemi sayesinde üzerine tıklanılan görselin büyük boyutlu sürümü, sayfanın geri kalanının üzerinde bir modal pencere içerisinde görüntülenerek, kullanıcının odağının ilgili görsele çekilmesi sağlanacaktır. Bunun anlamı daha az karmaşa ve daha fazla izleme deneyimi demektir.

12. Kısa Kayıt Formları

Kayıt formları muhtemelen potansiyel müşterileriniz ile sizin arınızdaki en büyük engellerden birisidir. Form ne kadar uzunsa, ziyaretçinizin web sitenizin bir üyesi olması ya da ödeme yapan bir müşteriniz haline gelmesi için o ziyaretçinin o kadar fazla çaba sarfetmesi anlamına gelmektedir. Bu engeli azaltmak için bu süreci hızlandırmamız gerekmektedir. Bunun anlamı da tüm opsiyonel elementleri kaldırmak demektir. Bu elementleri kaldırıp form üzerinde sadece kesinlikle gerekli olan elementleri bırakarak, kullanıcının hem kısa sürede sitenize üye olması sağlanır, hem de formdan çıkardığınız diğer bilgiler daha sonra kullanıcının isteği üzerine doldurulabilir.

Bir Evernote hesabı açmak kolaydır, zira siteye üye olmak için yapmanız gereken tek şey, her biri gruplanmış ve küçük bir kutu içerisine yerleştirilmiş bir avuç bilgiyi girmektir.

Sonuç

Uygulamalarınızı güzel göstermek her ne kadar tatminkar bir kullanıcı deneyimi ile sonuçlanmış olsa da, o ürünün kullanılabilir bir ürün olacağını garantilemez. Örneğin Craigslist gibi çirkin bir web sitesi bile yapması gerekeni çok başarılı bir şekilde yerine getirebilir. Sitenin çirkin görünümü onun çok popüler olmasının önüne geçmedi. Benzer olarak Google arama motorunun minimalist görünümü, dünyanın en çok ziyaret edilen siteleri arasına girmesinin önüne geçebilmiş değil. Arayüz belirsizleşerek yapmanız gerekeni en kısa sürede gerçekleştirebilmenize yardımcı olur.

Bir keresinde Apple CEO'su Steve Jobs, "tasarım sadece onun nasıl göründüğü ve hissettirdiği demek değildir. Tasarım, onun nasıl çalıştığıdır." demiştir. Aslında, kullanılırlık ve bir web uygulamasının genel kullanışlılığı, onun ne kadar başarılı bir şekilde işleyebildiği ve özelliklerinin ne kadar kolay bir şekilde erişilebildiği ile doğrudan ilgilidir. Tasarım, kullanıcılarınıza yardımcı olabilecek bir arayüz ile değer kazanır. Her teknik, her durumda her uygulama için kullanılır diye genelgeçer bir kural yoktur. Uygulamalarınız üzerinde sadece gereken öğeleri kullanarak ve diğerlerini de sadece gerektiği zaman göstererek daha kullanılabilir bir uygulama sahibi olabilirsiniz.

Kullanılırlık İle İlgili Yazdığım Diğer Yazılar

Bu yazı beyaz_sayfa 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 30 Açık Kaynaklı Uygulama

beyaz_sayfa — Tue, 31 Mar 2009 15:55:00 GMT

Bir web tasarımcısı olarak size yardımcı olabilecek pek çok açık kaynaklı yazılım bulunmaktadır. açık kaynaklı projeler sırf ücretsiz oldukları için mükemmel olmakla kalmaz, ayrıca onlara katkıda bulunan azimli geliştiriciler de ilgili yazılımları mükemmel kılarlar. Günümüzün zor ekonomik koşullarında harcamalarınızı mümkün olduğu kadar kısabilmek her zaman kullanışlıdır ve bu sebeple açık kaynaklı alternatifler de her zaman göz atılmaya değerdir.

Bu yazıda web tasarımcıları için 30 adet son derece kullanışlı uygulamayı bulacaksınız. Listede kaynak kodu düzenleyicilerinden WYSIWYG düzenleyicilerine, grafik tasarım yazılımlarından görev yönetim yazılımlarına kadar pek çok faydalı yazılımı bulacaksınız.

Kaynak Kodu ve WYSIWYG Düzenleyicileri

1. KompoZer

KompoZer

KompoZer tam özellikli bir web yayımlama uygulaması olup bütünleşik FTP istemcisi, sekmeli kullanıcı tasarımı ve tüm önemli işletim sistemleri için destek barındırmaktadır.

2. Bluefish Editor

Bluefish

Bluefish Editor, web tasarımcıları ve programcıları için geliştirilen hafif ve hızlı bir düzenleyicidir. Uygulamanın HTML belgeleri için sunduğu sihirbazlar, mükemmel proje yönetim özellikleri ve kaynak kodlarını yenileri ile değiştirmek için güçlü ara ve değiştir seçeneği gerçekten kullanışlı.

3. Quanta Plus

Quanta Plus

Quanta Plus güçlü bir web geliştirme IDE'si olup yüksek miktarda genişletilebilir ve özel betikleri de çalıştırabilir. Uygulamanın sunduğu muhteşem görsel CSS düzenleyicisi kodlar için otomatik tamamlama ve kod ipuçları görüntüleme yeteneklerine sahip.

4. Amaya

Amaya

Amaya, World Wide Web Konsorsiyumu (W3C) tarafından geliştirilen bir web düzenleyicisi ve web tarayıcısıdır. Amaya ilk olarak bir HTML / CSS düzenleyicisi olarak geliştirilmişti ancak zaman geçtikçe desteklediği diller arasına SVG ve MathML gibi pek çok XML tabanlı sistemleri de dahil etti.

5. CSSED

CSSED

CSSED tam özellikli GTK-2 tabanlı CSS düzenleyicisi olup yüksek miktarda genişletilebilirlik için eklenti sistemi bulunmaktadır. İlgilenen okurlarımız CSSED Eklentilerine bir göz atabilir.

6. OPEN BEXI HTML Builder

OPEN BEXI HTML Builder

Open BEXI HTML Builder tarayıcı tabanlı ve açık kaynaklı bir uygulama olup HTML web sayfaları oluşturmak için kullanılabilir. Uygulamanın arayüzüne entegre edilmiş CSS renk seçicisi ve basit bir proje yönetim seçeneği de mevcut.

7. NOTEPAD++

NOTEPAD++

NOTEPAD++ Windows için geliştirilen oldukça popüler bir metin düzenleyici yazılımıdır. Sırf web geliştiricileri için geliştiriliyor olmasa da HTML, XML, CSS ve JavaScript için sunduğu derinlemesine destek sebebiyle pek çok web geliştiricisi tarafından kullanılmaktadır.

8. jEdit

jEdit

jEdit özellikle programcılar için geliştirilen bir metin düzenleyicisidir. Mac, Windows ve Linux üzerinde çalışabilen uygulamanın HTML, XML, CSS, JavaScript ve diğer pek çok dile özgü kod renklendirme desteği bulunmaktadır.

9. SeaMonkey

Mozilla Vakfı tarafından geliştirilen SeaMonkey, SeaMonkey Composer adında tarayıcıya bütünleşik sade ancak bir o kadar da güçlü bir HTML düzenleyicisini de bünyesinde barındıran hepsi bir arada web tarayıcısıdır.

Grafik / Görsel Düzenleyicileri

1. GIMP

GIMP

GIMP, günümüzün en tanınan açık kaynak projelerinden birisidir. Uygulamanın sunduğu özellikler ile ücretli rakiplerine bile taş çıkartabilecek kalitede bir yazılım olan GIMP'in arabirimine alışmak için zaman kaybetmek istemiyorsanız ve Photoshop'un arabirimine aşina iseniz, o zaman Gimpshop adındaki ve Photoshop'un arayüzünü GIMP'e uyarlayan GIMP eklentisini deneyebilirsiniz.

2. Inkscape

Inkscape

Inkscape, rakipleri Adobe Illustrator ve CorelDRAW gibi vektör grafiklerini düzenlemeye yönelik geliştirilen açık kaynaklı bir yazılım.

3. Krita

Krita

Krita, KOffice için geliştirilen bir boyama ve görsel düzenleme yazılım uygulamasıdır.

4. Karbon14

KOffice

Karbon14 genişletilebilir vektör tabanlı çizim uygulaması olup KOffice projesinin bir parçasıdır.

5. Kivio

Kivio

Bir web tasarımcısı olarak genellikle iş planınızı ve tasarımınızın prototipini oluşturmanız ve gezinti şemaları için çizelgeler hazırlamanız gerekebilir. Kivio işte tam da bu alanda imdadınıza yetişiyor ve prototiplerinizi, çizelgelerinizi ve diyagramlarınızı oluşturmak için size yardımcı olacak bir dizi faydalı aracı sunuyor. Bu yazılım da KOffice yazılım paketinin bir parçası.

6. Dia

Dia

Dia diyagram oluşturmak için kullanabileceğiniz bir diğer kullanışlı uygulama.

7. Skencil

Skencil

Skencil özellikle illüstrasyonlar ve diyagramlar için kullanılabilecek bir vektörel çizim uygulaması. Uygulama üzerinde hazırladığınız kompozisyonlarınızı pek çok vektör düzenleme uygulamasının tanıdığı EPS biçiminde kaydederek farklı uygulamalar üzerinde de çalışabilirsiniz.

8. OpenOffice Draw

OpenOffice Draw

OpenOffice Draw OpenOffice yazılım paketinin bir parçası olup basit ancak bir o kadar da güçlü çizim ve diyagram yazılımıdır.

9. mtPaint

mtPaint

mtPaint, Mark Tyler (mt) tarafından geliştirilen sade ve basit bir boyama ve düzenleme uygulaması.

10. FontForge

FontForge

Eğer daha önce tasarımlarınız için kullandığınız fontları düzenleme ihtiyacı hissettiyseniz, o zaman FontForge uygulaması, sunduğu farklı araçlarla bu ihtiyacınıza yanıt verecektir.

11. ImageMagick

ImageMagick güçlü bir görsel düzenleme yazılımı olup, çalışmalarınızı bitmap tabanlı biçimlerde kaydedebilmenizi sağlıyor. Uygulama, GIF, JPG, SVG ve PDF gibi popüler web biçimlerinin de yer aldığı yüzün üzerinde dosya biçimini destekliyor.

12. GraphicsMagick

GraphicsMagick, uygulamanın ana geliştiricileri tarafından görsel işleme için İsviçre çakısı olarak isimlendiriliyor. Uygulamanın desteklediği görsel biçimlerinin listesine bir göz atabilirsiniz.

Yardımcı Araçlar

1. HTML TIDY

HTML TIDY ücretssiz ve açık kaynaklı bir uygulama olup HTML kodlarını iyileştirmeye ve düzeltmeye yarıyor.

2. Cyberduck

Cyberduck

Cyberduck, Mac OS X kullanıcılarının gönlünde taht kurmuş açık kaynaklı ve ücretsiz bir FTP istemcisi. Yazılımın sunduğu bütünleşik Mosso Cloud dosyaları için destek ve yine bütünleşik Amazon S3 desteği, uygulamayı, web tasarımcıları ve web uygulama geliştiricileri için bir numara yapıyor. Eğer Mac OS X için FTP Yazılımı arıyorsanız, Cyberduck yazılımını mutlaka denemelisiniz.

3. FileZilla

FileZilla

FileZilla en popüler açık kaynaklı FTP istemcisi olarak bilinir. Linux, Mac ve Windows işletim sistemleri için sürümleri bulunan FileZilla uygulamasının bir dizi protokol için desteği bulunuyor.

4. WinSCP

WinSCP

WinSCP, sadece Windows üzerinde çalışabilen bir (S)FTP istemcisidir. Uygulamanın sade arayüze sahip dosya yöneticisi, dosyalarınız üzerinde gezinebilmenizi ve onları düzenleyebilmenizi sağlıyor.

5. CamStudio

CamStudio

Bir gün müşteriniz ya da proje yöneticiniz sizden bir web sitesi turu ya da elektronik kurs gibi bir bilgisayar simülasyonu hazırlamanızı isteyebiir. Eğer herhangi bir ekran görüntüsü yakalama uygulamasına ihtiyacınız olursa, tam özellikli ve açık kaynaklı CamStudio başkasını aramanıza gerek yok.

6. Greenshot

Greenshot

Web tasarımcıları genellikle belgeleme ya da tarayıcı içerisinde tasarım sunumları için ekran görüntüsü yakalama yazılımlarına ihtiyaç duyarlar. Greenshot ücretsiz ve açık kaynaklı bir ekran görüntüsü yakalama yazılımı olup özellikleri ile göz dolduruyor.

7. ZScreen

ZScreen

ZScreen, tam ekran, görünen alan ya da monitörünüzün sadece belirli bir bölümünün ekran görüntüsünü alabilmenize yarayan son derece kullanışlı ve açık kaynaklı bir ekran görüntüsü yakalama yazılımıdır. Alınan ekran görüntülerinin otomatik olarak FTP sunucularına aktarılmasını ya da ImageShack servisine aktarılmasını sağlayabilirsiniz. Özellikle sık sık ekran görüntüleri paylaşan kullanıcılar için bu iki özellik çok faydalı olacaktır.

8. Xournal

Xournal

Xournal, Tablet bilgisayarınızı bir girdi aygıtı olarak kullanabilmenizi sağlayan sade ancak güçlü bir not alımı ve taslak uygulamasıdır. Uygulama, Windows Journal ile benzer şekilde çalışıyor.

9. Firebug

Firebug

Firebug son derece kullanışlı, değişken ve her web geliştiricisinin bilgisayarında kurulu olması gerektiğine inandığım bir hata ayıklama aracı. Özellikle HTML ve CSS koduna yeni iseniz ve geliştirdiğiniz web sitelerindeki hataları ayıklamak istiyorsanız doğrudan tarayıcı üzerinden bu değişiklikleri gerçekleştirebilirsiniz.

10. Gallery

Gallery

Gallery uygulaması sayesinde görsel kaynaklarınız üzerinde derinlemesine kontrol sahibi olabilirsiniz. Web tabanlı görsel (imaj) galerisi olan bu uygulama sayesinde görsellerinizi depolayabilir, organize edebilir ve ziyaretçileriniz ile paylaşabilirsiniz.

Beğendiğiniz Uygulamalar Üzerindeki Deneyiminizi Paylaşın

Eğer sizin en beğendiğiniz açık kaynaklı uygulama yukarıda listelenmemişse ya da yukarıda listelenen uygulamalar ile ilgili paylaşmak istediğinz bir şey varsa, yorumlarınızda belirtmeyi ihmal etmeyin.

Tasarım Araçları Hakkında Yazdığım Diğer Yazılar

Açık Kaynaklı Yazılımlar Hakkında Yazdığım Diğer Yazılar

Bu yazı beyaz_sayfa 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 kullanmak artık daha kolay!

beyaz_sayfa — Thu, 19 Mar 2009 11:48:00 GMT

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

örnek sprite

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Ana Katman

4. Adım: Ana Katmanı Bölümlere Ayırmak
Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra Confirm tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor.

Tuşların Seçimi

5. Adım: Kontrol ve Download
Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.

Notlar
Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.

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

Modern Web Tasarımında Dokular

beyaz_sayfa — Sat, 14 Mar 2009 07:26:00 GMT

Eğer CSS galerilerinde ya da tasarım için ilham alabileceğiniz diğer kaynaklardaki iyi tasarlanmış sitelere bakarsanız, modern Web tasarımında dokuların kullanımının oldukça yaygın olduğunu fark edeceksinizdir. Dokuların bu kadar popüler olmasının ardında yatan nedenlerden birisi de dokuların oldukça değişken olmalarıdır. Dokular tasarım stillerinde sayısız biçim ve yöntem kullanılarak kullanılabilir. Farklı web sitelerini inceledikçe, web tasarımcılarının dokuları ne şekilde kullandıklarını anlayacaksınızdır.

Web tasarımında dokular, ziyaretçilerin neredeyse fark edemeyecekleri kadar sade bir biçimde kullanılabildikleri gibi, bir tasarımın ana elementi olarak da kullanıldıkları görülmüştür. Dokuların değişkenliği sebebiyle tipografi, ışık ve renk gibi diğer tasarım elementleri ile mükemmel bir şekilde harmanlanabilirler.

Dokuları kullanan web sitelerini incelediğinizde, dokuların arkaplan görseli olarak, başlıklarda, altlıklarda, yan çubuklarda, içerik alanlarında ve hatta yazıtipleri üzerinde bile kullanıldığını göreceksiniz. Her ne kadar dokular bazen tasarımın "kirli" (grunge) tarzı ile bütünleştirilseler de, aslında kullanım alanları "pis" görünümlü olan web sitelerin çok ötesine gitmektedir. Dokular doğru kullanıldıklarında, neredeyse tasarımın her tarzına bir derinlik katarlar. Bu yazıda dokuları farklı şekillerde kullanan 50 örnek web sitesine bakacağız.

Dokuların tasarımcılar için çok kullanışlı olmasının bir diğer sebebi de Photoshop ya da benzeri bir program kullanarak onları tasarımlara eklemenin çok çabuk ve kolay olmasıdır. Makalenin ilerleyen bölümlerinde dokuları kendi çalışmalarınıza uygulayabileceğiniz farklı teknikleri de inceleyeceğiz.

Galeri: Modern Web Tasarımında Dokular

Yazının bu bölümünde dokunun eklenmesi ile tasarımın iyileştirildiği 50 adet web sitesini inceleyeceğiz. Bu web siteleri dokunun kullanılış biçimlerine göre kategorilendirilmiş durumdalar. Örneklerin çoğu muhtemelen birden fazla kategoriye dahil edilebilir ancak onların aşağıdaki şekilde kategorilendirilmelerinin sebebi, onların çeşitliliğini göstermek ve tasarımın özel bir elementini vurgulamak içindir.

Dokunmuş Arkaplanlar

Konu modern web tasarımında dokulara geldiğinde, arkaplan görselleri muhtemelen dokuların en sık kullanıldığı tasarım elementidir. Aşağıdaki örneklerde de görebileceğiniz üzere arkaplan görseli olarak dokuların kullanılmasının tasarıma inanılmaz derecede büyük etkileri olabilir. Dokuları bu şekilde kullanabilmenin sayısız yolu bulunmaktadır ve aşağıdaki örnekleri tasarlayan pek çok tasarımcı da büyüleyici çalışmalar ortaya çıkarabilmek için yeteneklerini kullanmışlardır.

Edit Studios

Pek çok tasarımcı ve tasarım stüdyosu, web sitelerinde karanlık arkaplanlar kullanmaktadırlar. Ancak Edit Studios, sitesindeki arkaplanda doku kullanmayı tercih ederek tasarımına değişkenlik dahil etmeyi başarmış. Ana içerik kısmının arkaplanında birkaç çatlak bulunuyor ve tasarımın geri kalanı ile arkaplanının "kirli" tarzı, karanlık arkaplan üzerinde aşırıya kaçmıyor.

Jobs on the Wall

Web Designer Wall, özellikle renkli ve sanatsal arkaplanları ile tanınır. Sitenin meslek forumu ise benzer şekilde yaratıcı ancak daha az renkli bir arkaplanı doku içeren bir yaklaşımla kullanmayı tercih etmiş. Arkaplanın dokusu bir mantar panoyu temsil ediyor. Sitenin geri kalanında kullanılan zımba gibi bazı görsel ayrıntıların da arkaplan dokusu ile nasıl bütünleştiğine dikkat edin.

GoodBytes

GoodBytes'ın arkaplan görseli birbirlerinin üzerini örten mor renkli farklı şekilleri içeriyor ve bu doku, logonun yer aldığı kısım için hafifçe aydınlatılmış. Bu efektin sonucunda da, doku kullanılan bir arkaplanın tasarıma ne derecede bir zenginlik kattığını görüyorsunuz. Bir de aynı tasarımı doku olmadan sabit renkli bir arkaplanla hayal edin. Ne kadar farklı değil mi?

Grace Church of Alexandria

Doku görünümü için ahşap arkaplanların kullanımı ne kadar yaygınsa, tuğla arkaplanlar daha az yaygın. Grace Church web sitesinin ana içerik alanı çok temiz ve tuğla desenli doku arkaplanı üzerinde yer alıyor.

Jason Bradbury

Jason Bradbury'nin web sitesi rasgele beliren birden fazla arkaplanı bir arada kullanıyor. Kullanılan arkaplanların bir çoğu doku desenini içeriyor. Aşağıdaki ekran görüntüsü o dokulardan birisini, kirli bir Britanya bayrağını gösteriyor. Dokunun uygulandığı bayrağın uyandırdığı his, uygulanmamış olanına kıyasla çok daha farklı.

Doejo

Doejo portfolyo web sitesi sade bir anahatta sahip. Sitenin altlık kısmı hariç tamamı hafif bir doku içeriyor ve bu doku siteye farklı bir his kazandırıyor.

Design Sponge

Design Sponge'nin görece dar olan ana içerik kısmı, dokulu arkaplanı ön plana çıkarıyor. Görselde, doğal renkleri içeren tuval benzeri bir öğe kullanılmış.

Here's Life Mission America

Here's Life Mission America'nın içerik alanı ilk bakıldığında farkedilebilemeyecek hafif dokuya sahip. Ancak onun altında kullanılan parçalanmış sınır, dokuyu daha belirgin hale getiriyor.

Bart-Jan Verhoef

Bart-Jan Verhoef, dokuyu, sitesine eski kağıt görünümü kazandırmak için kullanmış. Arkaplanın yanısıra sitedeki logo ve sitenin kendisinin de "pis", dokunmuş bir efekte sahip olmasına dikkat edin.

Church on the Rock

Church on the Rock web sitesinin neredeyse tamamında doku efekti kullanılmış. Bazı ahşap efektler başlık görselinde kullanıldığı gibi, aşağıdaki ekran görüntüsünde de doku içeren görselin bir örneğini göreceksiniz.

Design Comission

Design Comission sitesi de temiz içerik alanının ardında doku içeren bir arkaplan kullanan bir diğer site. Sitenin arkaplanının sol kısmınd kullanılan hafif kırmızı renk, siteye çeşitlilik katmış.

Creative Nights

Creative Nights web sitesinin mavi renkli içerik alanı ve doku uygulanmış koyu mavi bir arkaplanı bulunuyor. Uygulanan aydınlık efekti, içerik alanını belirginleştirmek ve arkaplanın geri kalanını daha karanlık yapmak için kullanılmış.

Fall for Tennessee

Tennessee tatil serisindeki web sitelerinin tamamının tasarımları iyi. Sonbahar web sitesi ise dokulu ve sonbahar renklerine sahip bir arkaplan içeriyor.

Carbonica

Carbonica doğaş renklere sahip dokuları sitenin genelinde kullanmış. Başlıklar, simgeler ve yan çubuk üzerindeki gezinti menüsü de ayrıca dokulu yazıtipleri içeriyor.

Sollievo

Sollievo'nun kahverengi arkaplanına uygulanmış hafif doku efekti tek başına belki pek belirgin olmasa da ana içerik alanındaki parçalanmış kağıt efekti ile birleştiğinde daha belirgin bir doku hissinin oluşmasına sebep oluyor.

Gareth Dickey

Gareth Dickey'in web sitesinin başlık ve arkaplanı bir illüstrasyon içeriyor. Dokuda kullanılan illüstrasyon her ne kadar pek belirgin olmasa da siteye farklı bir görünüm kazandırmış olduğu kesin.

Bright Creative

Dave Shea'nın stüdyosu Bright Creative sitenin genelinde doku kullanmış. Başlıkta doku uygulanmış koyu kırmızı ve gövde de doğal renkli doku kullanılmış.

NK'MIP Resort

NK'MIP Resort'un web sitesinin "pis" bir görünümü, karanlık doku uygulanmış arkaplanı ve daha aydınlık dokulu içerik alanı bulunuyor.

Design Reviver

Design Reviver'in koyu dokulu arkaplanı sayfanın altına doğru düz renkli bir arkaplana geçiş yapıyor. Beyaz renkli başlık alanının bazı bölümlerinde de doku mevcut.

Moustache Me

Moustache Me tıpkı Jobs on the Wall sitesinde olduğu gibi koyu renkli arkaplan üzerinde daha aydınlık mantar pano efektini kullanmış. Bant görselleri ve zımbalar da mantar pano görünümünü tamamlar nitelikte.

Dokulu Başlıklar

Pek çok web sitesi başlıkları hem tasarımın ana bir öğesi olarak hem de diğer web sitelerinden farklı olmak için belirgin bir şekilde kullanıyor. Genellikle görseller için ayrılan geniş bir alan özellikle belirgin dokular için mükemmel bir ortam oluşturuyor. İyi tasarlanmış web sitelerini inceledikçe, dokuların başlık kısmında kullanıldığı pek çok web sitesi ile karşılaşacağınız kesin. Aşağıdaki örnekler de bu yöntemin kullanım olanakları açısından faydalı olabilir.

Acceptance

Acceptance sitesinin başlığı siyah ve mavi renk üzerine doku uygulamış. Özellikle renklerin daha koyu olduğu köşelerde uygulanan doku daha belirgin. Gezinti menüsü üzerine fare imlecini getirdiğinizde de benzer bir doku ile karşılaşacaksınız.

Slabovia.tv

Slabovia.tv web sitesine doku kazandırmak için ahşap arkaplan kullanılmış ancak bununla birlikte balık alanı da doku içeriyor. Başlığın arkasında fincan izi olması güzel bir ayrıntı ve web sitesinin sloganı da bir bant üzerine el ile yazılmış hissi uyandırıyor.

Sienna Online

Sienna Online sitesinin karanlık siyah bir arkaplan kullanılmış ancak başlık kısmında bol miktarda doku yer alıyor. Başlık görselinin eski kağıt görünümü var.

Electric Pulp

Electric Pulp sitesinin açık renkli arkaplanı üzerinde hafif bir doku mevcut ancak bu sayede başlığın ön planda belirmesi sağlanmış. Logo alanı da ayrıca bazı dokular içeriyor.

Rocket Club

Rocket Club web sitesinin başlık kısmına uygulanan yüksek miktarda doku, sitenin genel görünümünü önemli miktarda değiştiriyor. Doku ayrıca grubun yarı saydam görselinin ardından da seçilebiliyor.

Wandering Goat Coffee Company

Wandering Goat Coffee Company web sitesinin başlığı üzerine uygulanan keten bezi görseli başlığa derin bir doku kazandırmış. Logonun kendisine de ayrıca doku uygulanmış.

The Man In The Sea

TheManInTheSea sitesinin arkaplan görseli başlığı ve içerik alanının dışında kalan bölümlere doku katıyor ancak içeriğin okunulabilirliğini arttırmak için gerekli alanlarda düz beyaz renge geçiş yapıyor.

The Resume Girl

The Resume Girl web sitesi, başlık üzerinde bir dizi doku kullanmış. Beyaz alanda sayfa dokusu gözlenirken, gezinti menüsünün de yırtık köşeler içeren kendine özgü bir dokusu mevcut. Yeşil renkli yıldız patlaması alanı da yine doku içeriyor.

Thuiven

Thuiven portfolyo web sitesinde kullanılan temiz tasarımın başlık kısmı üzerinde hafif bir doku yer alıyor. Başlık ayrıca doğal arkaplan üzerine çoklu çizgiler içeren desen barındırıyor.

Yan Çubuk Dokusu

Her ne kadar arkaplan görselleri yan çubuklar için sütun oluşturma amaçlı kullanılsa da, bu görsellerde doku kullanmak, genel arkaplan üzerinde doku kullanmak kadar yaygın değiller. Aşağıda listelenen web siteleri dokuları yan çubuklar üzerinde farklı şekillerde kullanmışlar. Bu alanda birkaç farklı yaklaşım aşağıda listelenmiş.

Napa Bar and Kitchen

Napa Bar and Kitchen web sitesi çok fazla doku içermiyor. Koyu renkli yan çubuk üzerindeki doku baskın değil ancak tasarımın geneline güzel bir katkı sağlıyor.

Rob Goodlatte

Rob Goodlatte'nin web sitesinin her yerinde doku bulunuyor ancak yan çubuk üzerinde kullanılan doku çok belirgin zira dokuların bu şekilde kullanılması sık rastlanılan bir durum değil. Yan çubuk tsarımı genellikle çok sadedir ve üzerinde fazla durulmaz, ancak Rob'un yan çubuğu görünümü sebebiyle dikkatleri üzerine çekiyor.

Branded07

Branded07 koyu mavi renkli yan çubuğu, açık renkli arkaplan içeren ana içerik alanı ile kontrast oluşturması için kullanmış. Bu koyu renk hafif bir doku içeriyor. Aynı koyu renkli doku ayrıca sitenin başlık alanında da kullanılmış.

Adventure Trekking

Branded07'nin tasarımında olduğu gibi Adventure Trekking'in tasarımı da dokuları her yerde kullanmıyor. Sadece birkaç yerde kullanıyor. Yan çubuk kısmı da katlanmış ve yırtık kağıt dokusunu üst kısmında kullanmış. Doku kullanılmayan ve daha aydınlık içerik alanı ile yan yana geldiğinde bu yan çubuk daha ön planda beliriyor.

Doku İçeren Gezinti Menüleri

Gezinti menüler bir web sitesinin görsel olarak en ilgi çekici alanı olabilirler. Dokular, elbette, farklı ve çekici bir görünüm için menülerin arkaplan görsellerinde de kullanılabililer. Burada da bu alanda farklı yaklaşımları bulacaksınız. Listedeki sitelerin hepsi, standart gezinti menüsünü şu ya da bu şekilde geliştirmek için doku kullanma yoluna gitmiş.

Matt Dempsey

Matt Depsey'in portfolyo web sitesinin arkaplanı, turuncu renkli fırça darbelerini içeriyor. Doku uygulanmış bu fırça darbeleri ayrıca sitenin gezinti menüsünde de kullanılmış ve gezinti menüsünün öğeleri üzerine fare imleci getirildiğinde, renk tonu açılarak eylemle etkileşim sağlanmış.

Von Dutch

Von Dutch sitesinin genelinde sanatsal doku elementlerini kullanmış. Sitenin ana gezinti menüsünün arkaplanında kullanılan doku uygulanmış görseller sebebiyle menü daha ilgi çekici hale getirilmiş. Her bağlantıda farklı bir görsel yer alıyor.

Alpine Meadows

Alpine Meadows web sitesinde bir dizi farklı doku yer alıyor ancak gezinti menüsünde kullanılan doku muhtemelen en ilgi çekici olanı. Yıpranmış efekt uygulanan doku tasarımın odak noktası haline gelmiş.

Blue Moon

Blue Moon sitesindek tuğla arkaplan hiç şüphesiz siteye yüksek miktarda doku kazandırmış ancak gezinti menüsünde kullanılan paslı dokunun bir benzerinin yazıtipi üzerinde de uygulanması, siteye derinlik katmış.

Astuteo

Astuteo portfolyo web sitesi, etki uyandırmak için dokuyu sitenin sadece belirli bölümlerinde kullanan temiz tasarımlı siteler arasında yer alıyor. Ana gezinti menüsünü de içeren başlık kısmında kullanılan doku, sitenin geri kalanında gözlenen beyaz arkaplan ile kontrast oluşturmuş.

Helmy Bern

Herny Bern sitesindeki başlık kısmı ve gezinti menüsünde yüksek miktarda doku kullanıldığı gözleniyor. Özellikle yırtık mukavva görünümü en çok ilgiyi çeken kesim. Bunun yanısıra yan çubuk üzerinde de benzer bir doku kullanılmış.

The Ernest Hemingway Collection

Ernest Hemingway Collection bir masaüstü ortamını sitesinin arkaplanı olarak kullanırken ana içerik alanı masanün üzerinde yer alıyor. Ana gezinti elementinde koyu kayverengi deri hissi uyandıran bir doku kullanılmış.

Hafif Doku Kullanımı

Dokunun en ilginç kullanım örneklerinden bazıları dokuyu çok hafif miktarda kullanmasına rağmen ilgi çekmeyi başarıyor. Bazı tasarımcılar, dokuları, sitenin baskın elementi haline gelmeden bile başarılı bir şekilde kullanmayı başarıyorlar. Aşağıdaki örneklerde, ayrıntıya verilen önem sonucunda muhteşem sonuçların alındığını göreceksiniz.

Henry Jones

Henry Jones'in portfolyo web sitesi dokuları bir nebze de olsa kullanmakta bir sakınca görmemiş. Başlık alanını çevreleyen sınır çizgileri ve gezinti menüsü üzerindeki birkaç küçük noktaya dikkatli bakarsanız doku uygulandığını göreceksiniz. Logo alanının gri renkli alt sınır alanı da aynı şeyi yapmış. Her ne kadar bu tasarım elementleri siteyi ziyaret ettiğiniz ilk birkaç saniyelik sürede kendini belli etmese de, tam bir görünüm oluşturmaya yardımcı oluyorlar.

Denver Seminary

Logonun ardında düz mavi arkaplan rengi kullanmaktansa Denver Seminary'nin web sitesi bir tür mavi tonu üzerinde hafif doku elementlerini içeriyor. Uygulanan bu doku sayesinde hem logoya hem de başlık alanına görsel bir ilgi çekilmiş oluyor.

College Park Church

College Park Kilisesi'nin web sitesinin genelinde farklı doku tipleri kullanılmış. Başlık kısmında yer alan yeşil renkli çubuğun ardında uygulanan dokunun yanısıra onun hemen altında da doku kullanıldığı gözleniyor. Her ne kadar uygulanan bu dokular ilk bakışta kendini belli etmese de, başlık kısmını tasarımın geri kalanı ile bütünleştiriyor.

Drew Dellinger

Düz bir arkaplan kullanmaktansa Drew Dellinger'in web sitesinin arkaplanında hafif bir doku kullanılmış. Tıpkı bu bölümdeki diğer örneklerde olduğu gibi site genelindeki herhangi bir element ziyaretçinin dikkatini diğerlerinden daha fazla çekmiyor ancak bu web sitesi, özellikle hafif miktarda doku kullanımının tasarımı nasıl etkileyebileceği güzel bir şekilde örneklendirilmiş.

Square Space

Squarespace'nin doku kullanımı, Drew Dellinger'inkine çok benziyor. Karanlık arkaplana hafif miktarda uygulanan doku, web sitesinin farklı bir his uyandırmasına neden oluyor. Squarespace sitesinin alt kısımlarına ilerledikçe, doku uygulanmış arkaplanın yavaşça düz renkli arkaplana geçiş yaptığını göreceksiniz.

Inca Un Calator

Inca Un Calator'un tasarımı dikey olarak farklı bölümlere ayrılmış. Her bir bölümde farklı bir renk ve doku harmanlaması uygulanmış. Dokular ve bir bölümden diğerine geçişte gözlenen değişiklik her ne kadar çok belirgin olmasa da, sitenin genel görünümünü olumlu yönde etkilemiş.

Aten Design Group

Aten Design Group web sitesi, tıpkı diğer pek çok portfolyo web sitesinde olduğu gibi karanlık bir arkaplan içeriyor. Ancak arkaplan, uygulanan hafif doku sebebiyle biraz değişiklik göstermiş.

Dokuları Tasarıma Eklemenin Farklı Yolları

Dokuları tasarıma dahil etmek birkaç farklı şekilde mümkündür. Eğer Photoshop üzerinde deneyimli iseniz, benzer örnekleri farklı şekillerde oluşturmak çok basittir. Yazının devamında doku içeren web siteleri oluşturabileceğiniz birkaç farklı tekniği bulacaksınız.

1. Kendi Dokunuzu Oluşturmak İçin Ücretsiz Resimleri Kullanın

Photoshop üzerinde oluşturduğunuz neredeyse her bir şeye doku eklemenin en kolay ve hızlı yolu, bazı katman efektleri ile birlikte basit ücretsiz görseller kullanmaktır. Günümüzde İnternet'in yaygınlaşması ile birlikte yüksek kaliteli ve ücretsiz dokuların sayısı da oldukça fazla. Eğer para harcamak istiyorsanız onun için de pek çok seçenek mevcut.

En iyi doku kaynaklarını bulabileceğiniz sitelerin bir listesini vermeden önce, Tutorial9 web sitesinden David Leggett'in resimlere doku eklemek isimli rehberine bir göz atmanızı öneririm.

Eğer kendi çalışmalarınıza doku eklemek istiyorsanız, faydalanabileceğiniz kaynaklar şunlar olabilir:

Smashing Magazine (13 ücretsiz kolleksiyon)
stock.xchng
Texture King
Grunge Textures
Dr. Web Textures
Urban Dirty
Free 3ds Textures
CG Textures
Lost and Taken

2. Photoshop'ta Kendi Dokunuzu Sıfırdan Oluşturmak

Bir doku oluşturmak için görsel kullanmak yerine, herhangi bir görsel kullanmadan aynı efekte Photoshop üzerinde de ulaşabilirsiniz. Eğer bazı önemli teknikleri biliyorsanız, Photoshop üzerinde doku oluşturmak aslında o kadar da zor değildir ve zamanınızı harcamaz. Bunun yanısıra görsel kullanırken karşılaşabileceğiniz sınırlamaların da önüne geçmiş olursunuz.

Doku oluşturmak için kullanılabilecek farklı teknikleri öğreten bazı Photoshop rehberleri bulunmaktadır. Aşağıda bunlardan birkaçını bulacaksınız.

Sıfırdan Photoshop Kağıt Dokusu Oluşturmak ve Ardından O Dokuyu Kullanarak Sıfırdan "Kirli" Web Tasarımı Oluşturmak

Ahşap Doku Oluşturma Rehberi

3. Doku Oluşturmak İçin Photoshop Fırçalarını Kullanmak

Photoshop fırçaları, kendi efektlerinizi sıfırdan oluşturabilmek için kullanışlı bir yöntem olduğu gibi, İnternet üzerinde Photoshop fırçaları bulabileceğiniz sayısız kaynak yer almaktadır. Fırçalar, tasarımlarınıza o "pis" görünümü eklemeniz için mükemmel bir yöntemdir. Aklınıza gelebilecek her tür doku tipi için ücretsiz fırçalar bulabilmek mümkündür, burada önemli olan şey, en doğru fırçayı bulmaktır. Bu ücretsiz fırçaların kullanımının kolay oluşu sayesinde, kendiniz deneyerek sizin için en uygun olan sonuca ulaşmanız yapılabilecek en doğru şeydir. Aşağıda size bu konuda yardımcı olacak bazı kaynakları bulacaksınız.

4. Hazır Dokuları Kullanın

Kendi çalışmalarınız üzerinde kullanabileceğiniz dokuları bulmak yerine, üzerlerine doku uygulanmış görselleri satın alıp çok az ya da hiçbir çaba sarfetmeden onları projeleriniz üzerinde kullanabilirsiniz. Pek çok tasarımcı kendi çalışmalarını iStockphoto, Stockxpert, ve Vector Stock gibi siteler üzerinden satmaktadırlar. Çalışmanız için doğru görseli bulmak her zaman kolay bir iş değildir ancak bulmanız durumunda onun size kazandıracağı zaman için ödediğiniz ücret çok cüzi kalacaktır.

5. Dokuları Taramak

Tarama tekniği, kendi görsellerinizi Photoshop üzerinde sıfırdan oluşturmaya ve ücretsiz doku görselleri ile çalışmaya benzer. Burada tek yapmanız gereken, doku uygulanmış bir kağıt parçası ya da ona benzer bir nesneyi alıp tarayıcınız üzerinden Photoshop'a aktarmak ve ardından üzerinde gerekli değişiklikleri yapmaktır. Eğer bu yaklaşımla ilgileniyorsanız, Bittbox üzerinde yer alan kağıt tarama ve Photoshop üzerinde dokularla çalışma dersi ilginizi çekebilir.

Photoshop ve Illustrator İle İlgili Yazdığım Diğer Yazılar

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

ThemeForest.net'ten 30 Kullanışlı Tema

beyaz_sayfa — Tue, 30 Dec 2008 16:13:00 GMT

Geçtiğimiz günlerde ekledikleri PSD kategorisinin ardından ThemeForest tema arayan kullanıcıların uğraması gereken en önemli siteler arasındaki yerini sağlamlaştırdı. Bugün, site üzerindeki en kullanışlı 30 adet temayı listeleyeceğim. Muhteşem görünümlü tasarımların değeri, eğer kullanışlı değilse, sıfırdır.

HTML Temalar

Fusion: Incredible Site Template

Natural Earthstone Corporate

Parchment

Business Professional Package

The Enterprised Blueprint

Eco Theme

Creative Portfolio

ThemeFolio

Yönetici Kabukları

eManager 1.0

Element - Backend Admin Template

CSS Admin Theme

Broom Cupboard Admin Skin

Smart Admin High End CMS Theme

WordPress Temaları

Yourfolio

Quiktab

Showcase Theme

Real Estate Theme

Our Community

Sharp

Briefcase Portfolio Theme

Sleekside Portfolio - 4 in 1

PSD Temalar

Manilla Design

The Alliance BluePrint

Orange Scroller

Clean Website

Flexible

Sleek Design Studio Template

Flashing Lightz

Joomla Temaları

Business 2.0

Hallmark

Kaynak: nettuts

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

15 Yüksek Kaliteli ve Ücretsiz WordPress 2.7 Teması

beyaz_sayfa — Mon, 16 Mar 2009 07:42:00 GMT

WordPress 2.7'nin geçtiğimiz aylarda duyurulması ile günümüzün en popüler blog yönetim sistemlerinden WordPress'e eklenen sayısız yeni özellikler ve yeni tasarımı ile ilgili platform üzerinde bloglamak daha önce hiç olmadığı kadar değerli hale geldi.

Pek çok kullanıcı daha önce kullandıkları WordPress temalarının yeni sürüm altında düzgün çalışmamasından şikayetçi olurken, diğerleri yeni sürümün sunduğu yenilikleri kullanmak için kullandıkları temayı değiştirmekten çekinmediler. İşte bu yüzden biz de bugünkü yazımızda 15 Adet Ücretsiz ve Yüksek Kaliteli WordPress 2.7 Temasından bahsedeceğiz. Temalar gerçekten ücretsiz olmaları ile görenleri şaşırtabilecek derecede yüksek kaliteli ve WordPress 2.7'nin sunduğu tüm yeni özellikleri kullanıyor.

1. Typebased

Typebased

Typebased, çok temiz ve sade tarzı ile ücretsiz bir kişisel blog tasarımı. Mükemmel tasarımının yanısıra temanın arkayüzünde Typebased'e özgü bazı özel widgetleri de bulacaksınız. Bu widgetler sayesinde yan çubuğunuz üzerinde ne olup bittiği üzerinde tam kontrolünüz bulunuyor. Son olarak temanın sunduğu özellikler arasında bütünleşik reklam yönetimi ve 5 farklı renk şeması yer alıyor.

Typebased Demosu

2. Absynthe

Absynthe

Absynthe güzel, karanlık ve gizemli bir görünüme sahip ücretsiz ve kişisel bir WordPress teması olup GNU lisansı altında yayımlanıyor. Temanın sunduğu özellikler arasında Last.fm desteği sayesinde o an dinlediğiniz müzikleri blogunuzun yan çubuğu üzerinde gösterebilme, yine yan çubuk üzerinde Twitter desteği ve tümüyle widget destekli yan çubuk yer alıyor.

Absynthe Demosu

3. Snapshot

Snapshot

Snapshot, WooThemes Vitrini'nin kullandığı sistemin bir benzerini sunuyor, bu sebeple de mükemmel kullanıcı deneyimini garanti ediyor. Snapshot ayrıca değişken yapısı sayesinde fotoğraf vitrini, portfolyo ya da tasarım galerisi projeleri için de kullanılabilir. Temanın desteklediği özelikler arasında fotoğraf blogu ya da portfolyo aktarımı için kullanılabillecek tümüyle özelleştirilebilir iki farklı tema anahattı, yönetici panelinden özelleştirilebilir üç farklı renk şablonu ve Google Analytics & Feedburner hesap bilgilerinizi girebileceğiniz bütünleşik tema seçenekleri ve özel yazma paneli yer alıyor.

Snapshot Demosu

4. Holiday WordPress

Holiday WordPress

Holiday WordPress teması; değişken, iki sütunlu ve profesyonel bir WordPress temasıdır. Tema özellikle tatil günlüklerini blog halinde paylaşmak isteyen kullanıcılar için oldukça kullanışlı. Tema üzerinden arkaplanı değiştirebilir, sayfanın üst kısmında blogun geri kalanından daha belirgin olarak görüntülenen şablon üzerinde seçtiğiniz yazıların görüntülenebilmesini sağlayan bölüm ve tümüyle widget destekli yan çubuk yer alıyor.

Holiday WordPress Demosu

5. CryBook

CryBook

CryBook, Facebook tasarımı temel alınarak hazırlanmış 3 sütunlu sade bir WordPress teması. Tema iki adet widget destekli yan çubuk, eş zamanlı tema değiştiricisi ve özel yönetici paneli içeriyor. Temanın özellikleri arasında 5 farklı renk şablonu, zincirleme yorumlar, sayfalanmış yorumlar, yan çubuk üzerinde yer alan ve özel yönetici paneli üzerinden özelleştirilebilen "Hakkında" bölümü, avatar destekli özel yorum alanları, 300px x 250px boyutlarında Google AdSense ya da diğer reklam görselleri için destek ve Google Analytics desteği yer alıyor.

CryBook Demosu

6. ClearPress

ClearPress

Parlak ve renkli bir WordPress teması olan ClearPress'in en özgün özelliği blog girdilerini üç sütun üzerine yerleştirmesi. Bu sayede eğer blogunuzu ana sayfada 9 yazı gösterilecek şekilde ayarlarsanız, yazılarınız, 3 sütunun her biri üzerinde 3 adet yazı görüntülenecek şekilde ayarlanacaktır. Temanın özellikleri arasında açılır menü ardında tümüyle widget destekli üç adet yan çubuk, Gravatar ve Görsel Galerisi desteği, güzel bir tasarıma sahip yorum ve arşiv sayfaları, iyi yorumlanmış ve bu sayede her bir WordPress kullanıcısının özelleştirme yapabileceği CSS kodu yer alıyor.

ClearPress Demosu

7. Portfolio - WPESP Teması

Portfolio

Minimalist bir WordPress teması olan Portfolio'nun ana amacı, WordPress'i bir içerik yönetim sistemi olarak kullanarak portfolyolar oluşturmak isteyen kullanıcılar için bir başlangıç noktası oluşturabilmek. Temanın desteklediği özellikleri arasında biri yazılar diğeri de sayfalar için olmak üzere iki adet özel yazma paneli, Coda Kaydırma Efekti ve WordPress Codex'e ya da rehberlere bağlantılar içeren iyi yorumlanmış kod yer alıyor.

Portfolyo Demosu

8. Maasahan

Maasahan

Yüksek kaliteli bir WordPress teması olan Maasahan, Twitter desteği, bütünleşik sayfalama desteği, öne çıkan yazılar galerisi, zincirli yorumlar ve daha iyi özelleştirme için seçenekler sayfası ile dikkat çekiyor.

Maasahan Demosu

9. Pixeled

Pixeled

Pixeled WordPress teması 2-3 sütunlu bir arabirim altında kategoriler için açılır menüler, sağ üst kısımda özelleştirilebilir Feedburner alanı, 6 farklı bölüme yerleştirilebilen widget desteği, AdSense desteği gibi özellikleri barındırıyor.

Pixeled Demosu

10. Viewport

Viewport

ViewPort ücretsiz bir WordPress teması olup özellikle sade, temiz ve içeriği ön plana çıkaran bir anahatta sahip. Temada kullanıcının dikkatinin doğrudan içeriğe çekilmesi sağlanmış. Yazı sayfaları üzerinde içerik tüm alana yayılmış durumda ve üzerinde yazı kontrolleri ve widget destekli yan çubuk yer alıyor. Tema ayrıca blog sahibinin arkaplan görselini, rengini ve "Where Next?" sayfasını değiştirebilmelerini sağlıyor.

ViewPort Demosu

11. Simple Balance 2.2

Simple Balance

Sade ve güzel bir WordPress teması olan Simple Balance, zincirleme yorumlar, 125x125 sağ yan çubuk banner ve bu bannerlerin her birine ayrı ayrı Google AdSense kodu ekleyebilmeniz için destek, temaya özgü gelişmiş kontrol paneli, çeşitli anahat tarzları için destek içeriyor.

Simple Balance Demosu

12. FREEmium

FREEmium

FREEmium temasını geliştiren Paul Kadsyz ve Darius Siedlecki ortaya çok iyi bir iş çıkarmışlar. Tema, jQuery menüsü, FlickrRSS eklenti desteği, zincirleme yorumlar için destek, 125x125, 120x600, 300x250 boyutlarında reklam desteği ve 2 adet widget destekli yan çubuk içeriyor.

FREEmium Demosu

13. Elegant Grunge

Elegant Grunge

Elegant Grunge teması, kirli doku kullanan ancak keskin bir görünüme sahip bir WordPress teması olup, temanın tasarımı wefunction sitesinden esinlenmiş. Temanın özellikleri arasında tüm görselleri çevreleyen çerçeve sayesinde görsellerin içeriğin geri kalanından daha belirgin bir şekilde görüntülenmesi, 'photoblog' etiket sayfası altında yazıların bir fotoğraf blogu şeklinde görüntülenebilmesi, son yazıların ya da rasgele seçilmiş yazıların önizleme resimlerinin görüntülendiği bir widget, özelleştirilebilir yan çubuk (yan çubuk yok, bir adet sağ yan çubuk, iki adet sağ yan çubuk) ve başlıkta kullanılabilecek görsel seçimi için seçenek yer alıyor.

Elegant Grunge

14. Equilibrium

Equilibrium

Magazin tarzında sade ve temiz bir WordPress teması olan Equilibrium, Wordpress 2.7 ile birlikte gelen zincirleme yorumlar için destek, iyi tasarlanmış öne çıkarılan yazılar bölümü, yazılarınızın ana sayfada farklı şekillerde görüntülenebilmesi için destek ve widget desteği yer alıyor.

Equilibrium Demosu

15. Versatility Lite

Versatility Lite

Versatility Lite iki sütunlu, reklam ve widget desteği olan bir WordPress teması. Temanın özellikleri arasında "öne çıkarılan yazılar", açılır CSS menüsü, alakalı yazılar, sosyal imleme düğmeleri ve çok daha fazlası yer alıyor.

Versatility Demosu

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

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