bildirgec.org - engin1984 - beğendikleri

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

engin1984 — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

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

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

En İyi 50 CSS Makalesi

engin1984 — Wed, 14 Jan 2009 17:27:00 GMT

Modern web tasarımı CSS olmadan olmaz. CSS'in esnekliği web geliştiricilerine güncellemesi daha kolay ve daha hızlı web siteleri yaratmasına olanak sağlar. Toxel, bu konuda müthiş bir arşiv oluşturmuş. İpuçları, teknikler, şablonlar, dersler, galeriler, kaynaklar ve araçlar hakkında bir 50 adet makaleyi bir araya toplamış. Mutlaka inceleyin.

css ipuçları ve teknikleri

CSS ŞABLONLARI (Template) VE PLANLARI (Layout)

CSS DERSLERİ

CSS GALERİLERİ

CSS KAYNAKLARI

CSS ARAÇLARI

(kaynak)

Bu yazı engin1984 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

tasarımınızı müşteriye sevdirmeniz için 13 hile

engin1984 — Tue, 29 Jul 2008 09:10:00 GMT

İdeal bir dünyada, müşterilerimiz tasarımcılar gibi düşünürdü. İdeal bir dünyada, müşterilerimiz pazarlama hakkında iyi bir birikime sahip olurdu. İdeal bir dünyada mantıklı düşünürler ve net olarak iletişim kurarlardı. Evet millet, ideal bir dünyada yaşamıyoruz. Ve, maalesef, müşterilerimiz tasarımcı gibi düşünmüyorlar. Genellikle markalaşmanın veya pazarlamanın basit yanlarını bilmiyorlar. Onlar tasarımcı değiller. Bize bu yüzden iş veriyorlar.

Şimdi, eğer bize güvenmelerini sağlayabilirsek. Evet, bu gerçekleşmeyecek. Peki, geriye ne kalıyor? Ben biliyorum! Onları kandırabiliriz. Evet, çıkış yolu bu işte.
Birkaç yılda, müşterilerimi “kandırmama” yardımcı olacak birkaç teknik geliştirdim. Bu numaralar, hepimizin yararına. Onları mutlu olmaları ve en iyi tasarımı seçmeleri için kandırıyorum. İkimiz de kazanmış oluyoruz.

1. Müşterinizin beklentilerini aşağı çekin. Tamam, müşteriye şunu demenizi önermiyorum: “Tasarımınız boktan olacak.” Ama ŞUNU öneriyorum ki, müşterilerinizi gerçekçi beklentiler çerçevesinde tutun. Dünyaları söz vermeyin. Ve eğer dünyaları istiyorlarsa... onlara ne yapabileceğiniz hakkında dürüst olmanız gerekiyor. Bir projeyi kaybetme pahasına da olsa. Müşterinin ne bekleyeceğini bilmesi için neler yapabileceğimi tekrarlarım.

2. Taslaklarınızı/fikirlerinizi sınırlayın. Müşterinize 4 logo taslağı vermek yerine 8 logo taslağı vermenin daha iyi olduğunu düşünmeniz doğaldır, ama gerçekten öyle mi? İlk başta, müşteriniz ona en iyi birkaç tasarımı vereceğinize güvenmektedir. Seçenekleri en iyi birkaça indirme görevini siz üstlenmelisiniz. Müşterinize her ne göstermeye karar verdiyseniz, onun en son tercih edeceğiniz tasarımı seçeceği beklentisi içinde olun, hep öyle yaparlar. İkinci olarak, çok fazla seçenek kafa karıştırıcıdır. Çok fazla olasılık, çok fazla stil, verilecek çok fazla karar vardır. Benim deneyimlerime göre 3 ila 5 arası seçenek en iyisidir. 3 ila 5 taslak, müşteriye durumu hala kontrol ederken iyi bir tercih yapacakları hissini vermek için yeterlidir.

3. Müşteriler, parlayan renkli şeyleri siyah beyaz şeylere tercih ederler. Müşterilerin "göz alıcılıktan" (renk, jel, gloss, gölgeler ve lens parlaması benzeri efektler) etkilenmeleri büyük talihsizlik, ama ne yazık ki etkileniyorlar. Eğer müşterinize sunacağınız iki taslağınız varsa ve biri MÜKEMMEL bir taslaksa -ilki elinizde kurşun kalemle skeçlediğiniz ve ikincisi vasatsa, ama cilalı, bol bol jel ve gölge efektleriyle dolu renkli bir tasarımsa, müşterinizin hangisini seçeceğini tahmin edebilir misiniz? Her seferinde renkli olanı seçeceklerdir. Kurşun kalemle skeçlenmiş tasarımın ne kadar şık duracağı hakkında en ufak bir fikirleri yoktur. Onlar sadece bir skeç görürler. Yani, eğer müşterinizi dikkate değer olan tasarıma yönlendirmek istiyorsanız, onu satın; renk ekleyin, jel efekti ekleyin, ne olursa. Seçmelerini istediğiniz tasarımın diğerlerinden daha öne çıktığına, daha iyi göründüğüne emin olun.

4. Kötü haberleri hemen, telefonla eğer mümkünse yüz yüze verin. Eğer kötü bir şey olursa saklamaya çalışmayın. Sadece hemen dürüst olun. Sizin gösterdiğiniz bir hata, onların bulduğu hatadan yirmi kat daha iyidir. Diyelim ki bir broşür tasarladınız ve bir kelimeyi yanlış yazdınız. Sessizce bulamamaları için dua etmeyin, çünkü bulurlar! Yüz tane insan onlara gösterecektir. Genellikle bir hata yaptığımda tasarımın ücretsiz olmasını teklif ederim. Bu, paralarını bankamda tutmaya ve basitçe hatalarımı üzerimden atmamı sağlar. Ayrıca, müşteriler e-posta yoluyla gerçekten terbiyesizleşebiliyorlar. Eğer bir hata yaptıysanız, onlara telefonla söyleyin. Her zaman eğer telefonda konuşuyorlarsa veya yüz yüzeyseniz çok daha iyi olacaklardır.

5. Değişiklik manyaklarına karşı hazırlıklı olun. Bazı müşteriler, siz tasarım aşamasındayken değişiklik yapmayı severler. Buna göz yummayın, bir şeyler söyleyin! Müşteri bir değişiklik istediğinde,–bazı şeyleri işaret etmeniz gerekir, bu kararın tasarım sürecini nasıl etkileyeceğini ve yeni beklentiler yaratacağını açıklayın. Şimdi, şu tarz değişikliklerden bahsetmiyorum, “Lütfen ilk cümleye ‘Kimden’ gibi bir kelime ekleyin.” Benim bahsettiğim, müşteri şöyle bir cümle kurduğunda, “Hey, web siteme bir fotoğraf galerisi eklemek istiyorum.” şöyle bir cevap vermeniz gerekiyor, "Tamam, ama ek iş yapacaksak belirlediğimiz bitirme tarihini kaçırırız. Ayrıca bu size x dolara daha mâl olacaktır.

6. Seçenekleri azaltın. Eğer, bütün bu numaralara rağmen müşterimi memnun etmek hala zorsa, tasarım kararlarını azaltmaya çalışırım. Örneğin, bir renk planında uzlaşabilir miyiz? Sadece bir yazı tipi seçmeye odaklanabilir miyiz? Kullanmamı istedikleri esas resimlere yoğunlaşabilir miyiz? Onları tasarımın dışında, bu kararları vermeye yönlendirebilirim. Yani, bir daha bir konsept üzerinde çalıştığım zaman, kullanılacak renkleri, yazı tiplerini ve kullanılacak resimleri biliyor olurum. İşte o zaman sadece yerleştirme işiyle uğraşırım.

7. Sadece karar veren kişiyle çalışın. Çoğunlukla karar veren bir insanla çalışıyor olmazsınız. Siz ve kararı veren kişi arasındaki dalkavukla çalışırsınız. Kararları veren kişiyle çalışmak için gerçekten savaş veririm. Yoksa bir işi iki kere yaparsınız -bir kez dalkavuk için, sonra tekrar karar veren için.

8. Gruplarla çalışırken; lider görevlendirin. Gruplarla çalışmak yedinci kurala oldukça benzerdir. Bazen grup liderin kim olduğunu bilmez bile. Yani, gruptaki farklı insanlardan farklı mesajlar alırsınız. Ben her gruptan benimle iletişim işini üstlenmesi için bir kişi seçmesini isterim. Bu yolla, lider kişi gruptaki beş yada daha fazla kişiden mesajları toplarken, her birinin farklı olduğunu fark ederler. Bob rengi mavi yap der. Susan beyaz yap der. Matt ise sarı yap der. Bu hiçbir şey ifade etmeyecektir.

9. Proje uzun sürüyor veya geç başlıyorsa müşteriyle temasa geçin. Eğer bir projede gerçekten hızlı ilerleyemiyorsam ya da projenin başlangıcı ertelendiyse müşterime bir e-posta atarım. Genelde, şöyle bir şey derim: “Hey Bob, şunu bilmeni istedim ki projede bocaladım ve Perşembe günü başlayacağım. Gecikme için üzgünüm. Bitirme tarihine yetişeceğiz, sorun yok.” Bu önleyici tedbirler alan yaklaşım, her zaman için şu soruyu cevaplamaktan iyidir: “Projem nasıl gidiyor?"

10. Müşterilerinizi eğitin. Biliyorum ki bu çok zor, ama yine de denemek zorundasınız. Bir müşteri benden tasarım için iyi olmayan bir şey istediğinde,–BENİM yolumun neden ONUN yolundan daha etkili olacağını anlatmaya çalışır. Gücendirmeden iletişim kurmak bazı taktikler gerektirir, kibar ve yavaş olun.

11. Müşterinizle kavga etmeyin. Bazen gurunuzu içinize atıp müşteriye ne istiyorsa vermeniz gerekebilir, acınacak halde bir tasarıma dönüşse de. Eğer kötü olacağını bildiğiniz bir yönde tasarım yapmanız istenmişse, onlara öğretmeye ve daha iyi tasarım seçenekleri sunmaya çalışın. Ama, günün sonunda, kafalarını bir şeye takmışlarsa (rezalet bir şey de olsa) bunu onlara verin.

12. Biraz ekstra verin. Eğer küçük bir ekstra iş yaparsanız (bunu onların bilmesini sağlayın), çok müteşekkir olacaklardır. Çok büyük bir iş olması gerekmez. Çok küçük bir şey olabilir. Ama anlaşılmış işin dışında bir şey olması gerekir. Müşteriye küçük bir not şu şekilde atılabilir: “Hey Bob, bana sağlamış olduğun logoda ufak bir sorun keşfettim. Bunu yok ettim ve temizledim. Bu projenin amacı değildi ama böyle pis bir logoyla etrafta gezmene izin veremem! Bu ek servis için bir ücret talep etmiyorum.”

13. Teşekkür ederim deyin. İnanılmaz. Tüm bilmem gereken, anaokulunda tek öğrendiğim şey. İnsanlar “teşekkür ederim” lafının gücü üzerine çalışmalar yaptılar. Huysuz müşteriler, şu sözlerle bir anda memnun müşteriye dönüştürülebilir: “Teşekkür ederim.” Yani, müşterilerine işleri için teşekkür edin. Bir ödeme yaptıklarında teşekkür edin. Size bir bira ısmarladıklarında teşekkür edin.

yazının orjinali

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

usta bir tasarımcı olmanın kuralları #4

engin1984 — Mon, 04 Aug 2008 10:21:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci, ikinci ve üçüncü kuralını okumak isteyebilirsiniz.

Bu ders, sayfa planı (layout) ve boşluk bırakma (spacing) ilgili. Genç tasarımcıların sık sık yaptığını gördüğüm hatalardan biri de her şeyi birbirine çok sıkışık yerleştirmeleri. Çok kıstılı bir alana çok fazla içerik yerleştirmek istiyorlar. Boşluk sizin dostunuzdur! Boşluk, sizin için bir sürü şey yapabilir. Metninizin daha kolay okunmasını sağlayabilir. Boşluk, izleyicinin bitmiş kompozisoynunuzu daha kolay anlamasını sağlayabilir. Ve boşluk aynı zamanda tasarımınızı zarif gösterir. İzleyiciye şunu söylersiniz: “o kadar zenginiz ki bu koca posteri, bu tek küçük mesaj için kullanabiliyoruz.”

Yani, tasarımınızın sayfa planı için basit bir strateji vardır. Ve bu strateji şudur: bir sayfa planınız olsun! Demek istediğim bir sisteminiz olsun. Bu ilk adımdır. Amacınız bütün tasarımım tamamen karışık görünmesi değilse, bir plana ihtiyacınız olacak. Bu genellikle ızgara (grid) ile yapılır. Bir ızgara, istediğiniz her stile dönüşebilir. Ama yapmak üzere olduğunuz şey için temel bir sisteminiz olması gerekir. Aşağıda farklı ızgaralara örnekler var, böylece ızgaranızın ne kadar farklı ve benzersiz olabileceğini görebilirsiniz.

Şimdi, aynı tasarımı farklı şekillerde görelim: ikisi ızgarayla biri ızgarasız hazırlandı. Görebileceğiniz gibi, her ızgara size bir sürü plan seçeneği veriyor. Izgarasız çalışmak kaosla sonuçlanabilir.

Bu ilk resimler geleneksel bir ızgarayı ifade ediyor. Çizgiler mükemmel bir şekilde yatay ve dikey. Belli aralıklarla sıralanmışlar.

Bu ikinci ızgara ilkiyle benzer olsa da bir basit değişiklik içeriyor. Yukarıdaki logonun eğikliği ile uyumlu olması için dikey çizgileri eğdim. Böyle ufak bir değişikliğin nasıl da harika sonuçlar verdiğini görebilirsiniz.

Bu son örnekte ızgara yok. Boşluk bırakma rastgele yapıldı. Şimdi görüldüğü gibi bunu ne demek istediğimi göstermek için bilerek dağıttım. Bu tasarımda fazla içerik yok, yani iyice bozmuş olsam da o kadar da kötü görünmüyor. Ama ne kadar daha çok içeriğiniz oldukça, sistemli bir şekilde çalışmak o kadar önem kazanıyor.

Kendinize şunu sorduğunuzu biliyorum: “Gerçekten her tasarımını düzenlemek için ızgara kullanıyor mu?”. Hayır kullanmıyorum. Ama ızgarayla çalışmayı anlamak sonuçta size ızgarasız çalışma imkanını sağlayacaktır. Izgara sadece aklınızda olacaktır. Sayfada olduğunu görebileceksiniz ancak hazırlamak için zaman harcamayacaksınız.

Peki, ızgara bize ne öğretti?

Öncelikle şunu öğretti: herşeyi bir düzene oturtun! Açık görünüyor değil mi? Peki, bir kez daha –bu amatör birinin sık sık unuttuğu o basit kurallardan biri. Tasarımdaki her bir öğe tek bir çizgide düzene girmek zorunda değil ama öğeler bir grup olarak, aynı ızgara çizgisinde bütünlenmiş olarak görünmelidir. Düzenlenmiş olmalıdır. Eğer daha önce gruplandırmanın Gestalt İlkeleri’ni incelemediyseniz, şimdi mükemmel bir zaman! Hızlıca bir Google araması yapın ve kendinizi bu konseptlere alıştırın. Tasarımınızın sayfa tasarımında kritik önem taşırlar.

Öğeleri düzenlemeye ek olarak öğeleri belirli aralıklarla yerleştirmeniz gerekir. Eğer bir ana başlığın altında üç maddeniz varsa, her maddenin arasındaki aralığın aynı olmasını istersiniz.

Metninizin etrafında yeterince boşluk bırakmanız, metni okunur kılar. Aşağıda iki tasarımın örneği var. İlkinde kenarlardan ve fotoğraflardan uzakta, güzelce boşluk bırakılmış. İkincisinde ise kenarlara ve fotoğraflara çok yakın.

Bu sıkışık ve okunaksız görünmüyor mu? Cevap evet . İkinci örnekte daha büyük bir yazı kullanılmasına rağmen sıkışık ve okunaksız görünüyor.

Ayrıca “öpücük” olarak bilinen şeyden de kaçınmak isteyebilirsiniz. Hayır, bu dudakları içermiyor. Bir “öpücük”, iki objenin neredeyse birbirine dokunması durumuna verilen isimdir. Eğer, örneğin, elinizde bir fotoğraf ve metin varsa ve neredeyse birbirine dokunacak gibiyseler. Bu kötüdür. Ya onlara yeterli alan verin ya da birbiriyle tam olarak üst üste sağlayın.

Az önceki broşüre yakından bir bakış atıyoruz. Web adresi, arkaplandaki turuncu çizgiye neredeyse dokunmak üzere.

Burada da aynı tasarım, web adresi o çizgiden uzağa çekilmiş. Bu çok daha iyi.

Ya da, eğer yere ihtiyacınız varsa –üst üste gelebilirler. Ama belirli bir miktarda üst üste geldiklerinden emin olacağım. Aynı zamanda –web adresi ve arkaplan arasında yeterince kontrast olduğundan emin olmak için bir de gölge ekledim. Bu şekilde web adresi, sayfadan dışarı fırlıyor.

Şimdi –biliyorum ki çoğu tasarımcının karşılaştığı sorun: 50 sayfalık içeriği tek bir 8.5x11 inçlik bir alana sığdırmanızı isteyen müşteridir. Elinizden gelenin en iyisini yapıp organize bir şekilde bütün bu bilgileri sığdırdıktan sonra müşteriniz şöyle der: “Oh! Daha fazla bilgi koyulacak yer var! İşte 10 sayfa daha, sıkıştır!” (bkz. Tasarımınızı müşteriye sevdirmeniz için 13 hile)

Ne yaparsınız? Çok küçük bir yer için müşteriniz size sürekli içerik veriyorsa? Evet, işte büyük bir problem. Ve bunun kolay bir cevabı olması da gerekmez. İlk tavsiyem, müşterinizi iyi tasarım ilkeleri hakkında eğitmek için elinizden geleni yapın. İzleyicilerinin bu kadar küçük bir alana sıkıştırılmış bir sürü içerikten oluşan bir reklama bakmak bile istemeyeceklerini açıklamaya çalışın. Eğer müşteri sizinle uzlaşmak istemiyorsa, berbat bir tasarım yapmaya mahkum kalabilirsiniz. Bütün bunları yapmak zorunda kaldım ben. Gerçekten can sıkıcıdır. Eğer vaktiniz varsa, temiz olan bir versiyonu hazırlayabilir ve müşterinizden arkadaşlarına sormasını ve başka görüşler almasını rica edebilirsiniz. Maalesef, genelde bu kadar çok zamanımız olmuyor. Yani, tasarımı matbaacıya götürürken kimseye görünmemek için elimizden geleni yapıyoruz.

Uzak durmamız gereken bir diğer küçük şey ise optik illüzyonlardır. Ha? Optik illüzyonların boşluklarla ne gibi bir ilgisi olabilir? Ne kadar çılgınca gelse de, objelerin arasında boşluk bırakırken optik illüzyonlara karşı da dikkatli olmak zorundasınız. Bazen, optik illüzyonlar sayesinde, düzgün olarak verilmiş boşluklarınız düzgün görünmeyebilir. Örneğin arkaplandaki kavisli bir desen, objeyi yana yatıyor gibi veya merkezden sapmış gibi gösterebilir.

Peki, optik illüzyonlardan nasıl kaçınabiliriz? Basit –gözlerinizi kullanın; nerenin yanlış olduğunu görecek ve düzeltmek için kullanacaksınız.

Optik illüzyonlara düzeltme yapmak genelde, “en iyi görünüm” olarak bilinir. Doğru olması gerekmez, ama doğru görünmesi yeterlidir.

Yani, kompozisyonunuza her zaman için son bir bakış atın ve her şeyin yerli yerinde olduğundan emin olun.

bill
kaynak

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

usta bir tasarımcı olmanın kuralları #3

engin1984 — Thu, 31 Jul 2008 06:05:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci ve ikinci kuralını okumak isteyebilirsiniz.
Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz.

Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?

Yanlış.

Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.

Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.

Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:

Bu ikinci olan, açıkça gözlere daha az yükleniyor.
Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra “Edit>Edit Colors>Convert to Grayscale” yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, “Image>Adjustments>Desaturate” yönergesini izleyerek yapabilirsiniz.
Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.
İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.

solda: iyi kontrast / sağda: kötü kontrast

Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.
Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:

arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!

arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!

Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:

Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!

Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!

Bill

Kaynak

yazı tarafımdan çevrilmiştir, bana ait değildir.

Bu yazı engin1984 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Wordpress'in Kompetanı Olun!

engin1984 — Sun, 22 Jun 2008 13:47:00 GMT

Bu yazı, wordpress ile ilgili en iyi 60 kaynağı, dersi, eklentiyi, temayı bulmanıza yardımcı olması için hazırlanmış. Acemilerden profesyonellere kadar herkesin işine yarayabilecek liste burada:

Gerekli araçlar ve yüklemeler

Wordpress'in son versiyonunu yükleyin. (Şu an için 2.5.1)

Dilerseniz önceki sürümleri de yükleyebilirsiniz. (0.71 ve üstü)

Kendinize bir alan adı bulun, kullanılabilirliğine bakın.

5 Dakikada wordpress'i kurun.

Biraz daha zamanınız varsa, şu yönergeleri izleyin.

Adım adım Wordpress kurulumu

Beceremediyseniz şuna da bir göz atın.

Hala sorunlarınız varsa, şunu izlemeyi deneyin.

Wordpress'i Local'e kurma:

Xamplite ile Windows'a kurun.

Mamp ile MacOSX'e kurun.

Linux'ta local'e kurulum.

İhtiyaç duyarsanız bunu izleyin.

Türkçe kaynak olarak bunu buldum.

Kaliteli bedava Wordress Temaları

Wp Temaları

Zamanınız varsa, görmeniz gereken 980 tema

Desperate Curiosity'den top 100 wordpress teması

Smashing Magazine'den 100 wordpress teması

Specky Boy'dan top 30 Wordpress Teması

WP themez

Tema yüklemeyi anlatan bir ders

"Magazine Style" Wordpress Temaları

Wp Premium isimli bir tema, Css Ace'dan

"The Morning After Magazine" Tema (Benim de hoşuma gitti)

Minimalist Wordpress Magazine Tema

Upstart Blogger Futurosity Magazine Tema

Structure: WordPress Magazine Tema.

Visionary: WordPress Magazine Tema(Structure'ın yaratıcılarından)

Jello Wala Mello WordPress Tema.

Mümkünse, temaları, sahiplerinin sitelerinden indirin.

Sitemiz mükemmel görünüyor, şimdi bazı eklentilere ihtiyacımız var.

Spam önleyici Akismet'i deneyin.

Database'inizin yedeğini alın, sonra pişman olmayın.

Sitenizin giriş bölümünü MD5 ile şifreleyerek daha güvenli hale getirin.

Dosya izinlerini ve database güvenliğini kontrol etmek, admin bölümünün güvenliğini arttırmak ve wordpress versiyonunu saklamak da lazım.

Şimdi de Ulaşım Sayfası için bir form bulalım

İletişim Formu Eklentisi

TDO Mini Forms başka bir harika İletişim Formu

Sidebar'a Widget atmaya ne dersiniz?

WP2.3'ten önceki bir sürüm kullanıyorsanız, widgets eklentisini yüklemelisiniz.

Geniş bir widget listesi

Eklenti bulabileceğiniz başka yerler

Resmi Wordpress Eklenti sitesi

Wordpress Plugin Deposu

Wordpress Eklenti Veritabanı

Blogginpros Eklenti Arşivi güncel eklentilerin yayınlandığı mükemmel bir yer.

Specky Boy'dan Top 30 eklenti

Fotoblogging ve Görsel Galeriler için 30 bedava kaynak

Peki Ya Sosyal İmleme?

Sitenize bir AddThis butonu ekleyerek, gönderilerinizi kolayca sosyal imleme sitelerine yollayabilirsiniz.

Gregarius'u da deneyebilirsiniz.

Rss için ne yapmak lazım?

Rss de ne ki?

Çok kullanışlı FeedBurner'ı deneyebilirsiniz.

CopyFeed de Rss ile birlikte çalışan mükemmel bir eklenti.

Podcasting ve WordPress

Podcasting nedir?

Podpress eklentisini yükleyin.

ScreenCasting ve Wordpress

ScreenCasting nedir?

Wordpress ilgili başka kaynaklar

Wp Designer

Wp Candy

Matt Mullenweg'in kişisel Blogu (Wordpress Yaratıcısı).

Lorelle

Blog Araçları Koleksiyonu

Solostream ( Mükemmel Temalar )

Basit Wordpress

Automattic'in blogu.

Alex King.

Wordpress'ten Ryan

Wordpress'ten Mark

Kaynak

Bu yazı engin1984 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Wordpress'in Kompetanı Olun! 2

engin1984 — Thu, 26 Jun 2008 06:01:00 GMT

Bildiğiniz gibi Wordpress'in kompetanı olma yolunda ilk adımı atmıştık. İşte kendimizi geliştirmemiz için bazı ipuçları. Bu seferki liste ilkinin devamı nitelikte ancak daha ileri düzeye hitap ediyor. İşte wordpress'in kompetanı olmanızı sağlayacak 2. liste:

Biri Ajax mı dedi?

Codex'ten Ajax ve Wordpress hakkında her şeyi okuyun.

Ajaxed Wordpress Eklentisi

Ajax Wordpress Temaları

Ajax kütüphaneleri

Ajax ile hazırlanmış 30+ Wordpress Tema

İleri düzey Wordpress tasarımcıları için AJAX (Javascript) Frameworkleri

Prototype

Script.Aculo.us

MooTools

jQuery

Yükleyebileceğiniz bazı Ajax Scriptleri

Onlarsız yapamayacağınız Top 20 script.aculo.us scripti

MooTools'dan Top 41

65 mükemmel jQuery kaynağı

Birazcık kopya çekmekten bir şey olmaz

Andy Wibbels'ten WordPress şeması (pdf)

Wp Candy'den mutlaka bakmanız gerekenler listesi (pdf)

Wordpress'in hakimi olun

Wp Tiger Admin

AFD WP2 Admin

Js Style Admin + Drop Menüler

Wp NiceAdmin

Ve ileri düzey Wordpress Dersleri

Kategori Resimleri

Trackbacks ile yorumları ayırmak

Wordpress Login sayfanızı düzenleyin

Wp Tarih Resmi

Sidebar'a login form koyun

Wordpress Klavye Kısayolları

Kendi 404 sayfa nızı oluşturun.

Kaybolan wordpress admin şifrenizi sıfırlayın.

Kendi açılan menünüzü oluşturun.

WP Contact Manager

"Widgetizing" Temalar

Overlapping tablar yaratın

Wordpressinizi hızlandırmanın 4 basit yolu

İletişim formuyla kendinizi erişilebilir kılın

Bir içerik yönetim sistemi olarak Wordpress

Linklerin yeni sayfada açılmasını sağlamak

Wordpress Eklenti boyutu limitini kırmak

Videolu Wordpress dersleri

En iyi Wordpress Eklentileri

Youtube - Wordpress Entegresi

Wordpress Sürümünü yükseltme

Wordpress Blogunuzu Seo dostu yapmak

WordPress.com - Adım adım blog işlemi

Wordpress Parolanızı unuttuğunuzda onu kurtarabilirsiniz

Sidebar'ı bir text editörü ile düzenleme

Wordpress blogunuza Adsense ekleyin

Wordpress Vitrinleri

We Love WP

Basit Wordpress Forumu

Kaynak

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

usta bir tasarımcı olmanın kuralları #2

engin1984 — Tue, 29 Jul 2008 16:08:00 GMT

Kural İki: Renklerini sınırla.
Usta bir tasarımcı olmanın yedi kuralının ikincisidir. Önce ilk kuralı okumak isteyebilirsiniz.

Yazı tiplerininizi sınırlamanın son kuralıymış gibi geliyor kulağa değil mi? Aynen! Renklerimizi, yazı tiplerimizle aynı nedenden sınırlamak istiyoruz. Tasarımda kullandığımız renkleri sınırlamak, tasarımımızın daha tutarlı olmasını sağlayacaktır. Yani, her şey uyumlu görünecektir. Aynı bir spor takımının üniforması veya bir şirketin markalaması gibi.

Yazı tipi seçiminde olduğu gibi, renkleri sınırlamak sadece bir rehberdir, kural değildir. Tasarımınızda bir hayli gökkuşağı gibi bir sürü renk kullanabilirsiniz, ve harika görünebilir. Ama bir renklendirme stratejisiyle başlamalı ve buna sonuna kadar uymalısınız. Renklerinizi tasarımınızla uyumlu bir şekilde kullanın.
Yeni başlayanlar için, önce renk değerlerinden bahsedelim. Bir rengin değeri, rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Bir sarı örneğin, epeyce aydınlıktır. Bir mor epeyce karanlıktır. Tabii ki, bir rengin değer yelpazesi vardır. Örneğin mor, çoğumuzun karanlıkla özdeşleştirerek düşündüğü, ama aynı zamanda oldukça açık değerde bir mor elde edebileceğiniz renktir. Aşağıda renklerin ve onların ilgili değerlerini gösteren bir örnek var. Onun yanında da tek bir renk için renk yelpazesini görebilirsiniz.

renk / değer / değer yelpazesi

Renk planımı seçerken uyguladığım bir kural: renk planınızda mutlaka renklerin değer yelpazesi olduğundan emin olun. Her tasarımda, kontrastı üretmek için biraz açık renge ve biraz karanlık renge ihtiyacınız olacak. Örneğin, tasarımınızın arkaplanı karanlık ise bir de açık renge ihtiyacınız olacak ki metin rahatça okunabilsin. Ya da tam tersi, açık renk bir arkaplanınız varsa metninizin okunabilmesi için açık bir renk gerekli olacak.

Ayrıca genellikle renk planımı seçerken 2 ila 5 renk seçerim. Seçenek sayısını arttırın ve tasarımda iyi sonuçlar elde edeceksiniz. Aşağıda bir araya getirdiğim bir renk planının örneği var.

Görebileceğiniz gibi bir karanlık renk, bir orta değerli renk ve bir de açık renk seçtim. Sağa doğru ise her seçtiğim renk için bir değer yelpazesi hazırladım. Projemde palet niyetine kullanacağım renkler, bu koleksiyondaki renkler olacak. Bir kere paletim hazır olduğunda, sadece bu paletteki renkleri kullanmak için elimden gelenin en iyisini yapmaya çalışacağım.

Tamam, şimdi kaç tane renk seçeceğimiz ve hangi değerlerde olmaları gerekiyor gibi teknik renk seçimi işlemlerini hallettiğimize göre, sırada ne var? Sırada ne olacağını söyleyeyim, en zor kısım; o 2 ila 5 rengin hangileri olması gerektiğine karar vermek! Şahsen bunu zaman zaman zor bir iş olarak görüyorum. Aşağıda renk planımı yaparken aldığım yardımlar ve teknikler var:

Sıcaklık yelpazesine uyun. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Ben şahsen, yeşilleri ise nötr olarak görmekteyim. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

İlham almak için www.colorlovers.com gibi bir siteyi kullanın. Bu mükemmel sitenin tüm olayı renk planlarıyla ilgili. Sayfa sayfa renk planları bulabilirsiniz.

Bir gözünüz etrafta olsun. Her tarafınızda renk planları vardır. Markette torbanıza bakın, Starbucks’taki tablodaki renklere bakın, Doğa Ana’ya bakın! Hoşunuza giden bir renk dizisi gördüğünüz zaman, not alın ve bilgisayarınızda bunu tekrarlayıp tekrarlayamayacağınıza bir bakın.

Var olan şirket renklerine dikkat edin. Sık sık, bazı markaların renklerinden yararlanıyorum. Logolarına ve renk yelpazesine bakıyorum daha sonra bunu başlangıç noktam olarak alıyorum. Daha sonra belki bir veya iki renk ekleyebiliyorum.

Aşağıda oldukça kısıtlı renk yelpazesi kullanarak hazırladığım bitmiş bir tasarım var.

Gördüğünüz gibi, kısıtlı renk yelpazesi ve yazı tiplerimi sınırlamak her şeyi bir arada, düzenli gösteriyor.

Bu derslerin basit olduğunu biliyorum… ama bunlar tasarımın esaslarıdır. Yani, bilgileri biraz tazelemek kimseyi öldürmez. Beş kural daha kaldı. Geri kalan beş kuralın daha enteresan olacağına söz veriyorum. Zaman ayırdığınız için teşekkür ederim!

Bill

kaynak

Tarafımdan çevirilmiştir, yazı bana ait değildir.

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

usta bir tasarımcı olmanın kuralları #1

engin1984 — Sun, 27 Jul 2008 18:48:00 GMT

1- Kullandığınız Yazı Tiplerini Sınırlayın
Tamam, “usta tasarımcı” lafı biraz zorlama olabilir. Ama en azından bu yedi kuralı takip ederek “uzman tasarımcı” olabilirsiniz. Bu, nasıl daha iyi bir tasarımcı olabileceğiniz hakkında okuduğunuz blog yazılarının en kısası ve en bilgilendiricisi olacaktır. Lütfen aklınızda bulundurun: bu kurallar KIRILABİLİR... çünkü yasa değiller, sadece benim bir tasarımı bir araya getirirken uyguladığım genel kurallardır.

Aşağıdaki kuralları izlediğinizde sanatsal mükemmelliğe giden yoldasınız demektir:
Kural Bir: Yazı tiplerini sınırlayın. İyi bir tasarımı bir araya getirmenin büyük bir kısmı, gördüğünüz gibi, görünüşün birbiriyle tutarlı olmasıdır. Tutarlı bir görünümü elde etmenin en iyi yolu tasarımını kullandığınız bir kaç motifle (temalar) sınırlamanızdır. Seçtiğiniz yazı tipleri sınırlamak isteyeceğiniz ilk değişkendir. Ben genellikle tasarım başına 2 yazı tipi seçerim.

İlk yazı tipi süslü veya sanatsal olabilir. Bu yazı tipi tasarımınıza biraz karakter, kişilik ve kabiliyet kazandırmak için kullanılır. Tasarımın ruh halini belirleyen bu yazı tipidir. Bir kızın partisi için fırıl fırıl dönen eğlencelik bir yazı tipi mi, yoksa bir rock grubu için kötülük dolu karanlık bir yazı tipi mi? Bu süslü yazı tipini üst kısım için kullanırdım –büyük olan herhangi bir yere, bu yazı tipini kullanırım. Süslü yazı tipi, tasarımın odak noktası olacaktır. Genellikle bu yazı tipini az yerde kullanırsınız ama daha büyük olacağından insanların odaklanacağı ve ilk göreceği şey bu olacaktır.

İkinci yazı tipi çok basit olmalıdır. Bu ikincil yazı tipini izleyici fark etmemelidir bile. Bu ikinci yazı tipi, çok kolayca okunabilir olmalıdır. Tasarımda yaygın olan metinlerde kullanılacak genel yazı tipi bu olacaktır. Açıkça, yaygın metinlerde artsitik yazı tiplerini okumak çok zor olacağından bu ikinci yazı tipinin amacı, sadece işlevsellikten ibaret olmalıdır.

İşte bir tasarımda kullanılan uygun yazı tiplerine örnek. Gördüğünüz gibi, burada sadece iki yazı tipi kullanıldı. Süslü yazı tipi, üst kısım için ve basit yazı tipi de genel metin için. Temiz ve tutarlı görünüyor.

solda: "basit yazı tipi" / sağda: "süslü yazı tipi"

Burada da yazı tiplerinin kötü kullanımı söz konusu. Bu durumda, bir çok süslü yazı tipip kullandım. Sadece tasarımı tutarsız gösteriyor. Alt kısım, ana başlıkla uyuşmuyor bile.

solda: "basit yazı tipi" / sağda: "çok fazla süslü yazı tipi"

Bir tasarımda çok fazla yazı tipi kullanmak en büyük hatadır. Broşüründe 8 farklı yazı tipi kullanan birinden daha kötü görünen bir şey yoktur. Daha da kötüsü genel metinleriniz için çok süslü bir yazı tipi kullanmanızdır. İşte yazı tiplerinin en kötü nasıl kullanılabileceğine dair bir örnek:

solda: "yazı tipleri genel metin için fazla süslü" / sağda: "çok fazla süslü yazı tipi"

Sizi göndermeden önce son bir düşünce. Eğer süslü yazı tipiniz modern veya çağdaş görünüyorsa, o halde basit yazı tipiniz bir sans-serif yazı tipi olmalıdır. Eğer süslü yazı tipiniz eski moda görünüyorsa, o zaman ikincil yazı tipi olarak serif kullanın.

Yazar: Bill
kaynak
Not: Yazar bu yazıyı okuyucunun ilgisini çekecek mi diye yazmış, ben de aynı amaçla çevirdim. eğer ilginizi çekerse bu henüz tamamlanmamış yazı dizisinin devamı olan ve bu yazıdan çok daha detaylı olan; "Tasarımınıza Derinlik Katın", "Renklerinizi Sınırlayın" ve "Kontrast, Kontrast, Kontrast" yazılarını çevirebilirim. Şu anda 7 bölümlük yazı dizisinin 5'i yazılmış durumda. Her hafta yenisi yazılıyor.

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