bildirgec.org - Seven-7 - beğendikleri

Web Tasarıcılarının Kodlama Yapmalarının 6 Gereği

Seven-7 — Mon, 19 Jan 2009 07:38:00 GMT

Biliyorum, biliyorum... Tasarımcıların hiçbiri kodlarla boğuşmak istemez ve tasarımlarını doğrudan geliştiricilere devretmek ister.

Geliştirme işi programlama kurtları, kodlama hastaları ve bilgisayar manyaklarının işidir.

Peki o zaman neden biz tasarımcılar Photoshop fırçalarımız, akşamüstü çaylarımız ve Mac Prolarımız ile mutlu mesut yaşarken kendimizi kodlama dünyasının içine atmalıyımız? Çünkü eğer bunu yaparsanız daha iyi bir tasarımcı olursunuz.

Kuşkullandınız mı? O zaman yazının devamını okuyarak tasarımcıların neden kodlaması gerektiğine yönelik 6 maddeyi okuyun...

1. Daha iyi XHTML
Bugüne kadar, Photoshop tasarımlarının web biçimine dönüştürülmesi için gereken kodlama elementlerine dair çok az bilgisi olan tasarımcılarla çalışma fırsatı buldum hem de onlara kendimi tanıttım. Genellikle bu tasarımcılar, SiteGrinder gibi programları kullanıyorlar. Bu programlar her ne kadar günden güne daha iyi hale gelseler de, insanların yazdığı kodların çeşitliliğine ve öznelliğine ulaşamıyorlar.

Kendi standartlarla uyumlu XHTML kodunuzu yazabilmeyi bilmek, herhangi bir web takımında bir adım öne çıkmanızı sağlayacaktır (standartlarla uyumlu bölüme dikkat). PHP, ASP.NET, Ruby ve diğer pek çok dilin karmaşıklığı ile insanlar bir süre sonra öyle ya da böyle tüm web progrlama dillerinin HTML ile sonlandığını unutmuş görünüyorlar, çünkü bu dil, tarayıcınızın işin en sonunda sayfayı işlemesi için gereken dil. Çalıştığınız işin merkezi hakkında daha fazla şey bilirseniz, o işin merkezinde daha iyi olursunuz.

2. Daha iyi SEO
Ve biz standartlarla uyumlu kodlamadan bahsederken, SEO (arama motoru optimizasyonu) teriminden de bahsetmemiz gerekiyor. Buna rağmen SEO, büyük web sitelerine eklenen özel bir eklentiden ziyade gün geçtikçe bir web sitesinin var olma sebeplerinin başında gelmeye başlıyor.

Eğer kendi kodunuzu yazmayı öğrenirseniz, yeteneklerinizin yer aldığı listeye "SEO Uyumlu Tasarımlar" yapabildiğinizi eklemeye daha da yaklaşırsınız. Bunun anlamı, müşterilerinizden daha fazla para talep edebilirsiniz ki bu da daha fazla gelir anlamına gelir.

3. Daha İyi Erişilebilirlik
Daha iyi kod ve daha iyi SEO = daha iyi erişilebilirlik. Tüm tasarımcıları işinin bir bölümü, bilgiyi açık ve kolay anlaşılır bir şekilde aktarabilmektir ve web üzerinde bu sadece görsel anlamda değildir. Kötü kodlanmış bir web sitesi eğer körseniz ya da mobil aygıtlar kullanıyorsanız kullanılamaz.

Erişilebilirlik için kodlamanın artılarını ve eksilerini öğrenmek üretim kabiliyetlerinizin artmasını sağlamakla kalmaz, ayrıca erişilebilirlik için tasarım yaptığınızda dikkat etmeniz gereken ayrıntıları fark etmenizi sağlar.

4. Daha İyi Sol Taraf
Beynin sağ bölümünü kullanan yaratıcılardan olmak mükemmeldir, ancak sol tarafınızı da kullanabilmek yaratıcılığınızı teşvik edecektir. WordPress websitesinin sloganı "kod şiir gibidir", zira yazılan bir dili görsel olarak görülebilen bir şekilde yazmak gerçekten bir sanat biçimidir.

Kendi kodunuzu yazmayı öğrenmek, pek çok aktarım yöntemlerini öğrenmenizi sağlar. Teknik ve analitik yeteneklerinizi geliştirmek tasarım, telkafes geliştirme ve etkileşim tasarımları üzerinde çalışırken izlemeniz gereken yollar hakkındaki bilginizi ilerletebilmenizi sağlar. Ve kim bilir, matematik bilginizi bile geliştirebilir.

5. Daha İyi İletişim
Geliştiriciler tarafından kullanılan bu dil arasında kaybolmak çok kolaydır, çünkü en basitinden onların tartıştığı konular hakkında daha önce hiç bilgi sahibi olmamışsınızdır. Kendi kodunuza dalmak ve onunla birlikte çalışmak, bir sitenin alt yapısı üzerinde tartışırken kullanılan bu terminolojiye yabancılık çekmenizin önüne geçecektir.

Bu dili konuşabilmek, tasarımın nasıl siteye aktarılmasını geliştirici ve proje yöneticisi ile konuşmanız gerektiğinde önemli bir yardımcınız olacaktır.

6. Daha İyi Tasarım
Bunu sadece bir tasarımın esaslarını bilerek yapabilirsiniz. Tipografi, renk teorileri, kompozisyon vb elementler, iyi bilmeniz gereken muhteşem ve çok önemli yeteneklerdir... ancak bir süre sonra yaratıcılığınızı ilerletmek ve bu konuda üstün olmak istiyorsanız, o zaman bu alanın araçlarını öğrenmeniz gerekecektir. Ressamlar tuval tipleri, boyama kompozisyonları ve fırça kılı kalitesi hakkında bilgi sahibi olurlar... Web tasarımının da bundan farkı yoktur... Kod yazmayı öğrenin: Daha iyi olacaksınızdır.

Kaynak: Web Designer Depot

Kodlama yapan bir tasarımcı mısınız? Tüm tasarımcılar kodlama yapmayı öğrenmeli midirler? Yorumlarınızla düşüncelerinizi paylaşın

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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

Seven-7 — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

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

Bu yazı Seven-7 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ımında Boşlukları Verimli Olarak Kullanmak

Seven-7 — Thu, 22 Jan 2009 08:07:00 GMT

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur - metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz boşlukların bu şekilde kullanımı sayesinde site daha organize ve bölümlenmiş bir yapıya kavuşurken, site ziyaretçilerinin de içeriği okuyabilmesi ve site içeriğini hızlı ve verimli bir şekilde taraması (tabir-i caizse şöyle bir göz atması) kolaylaştırılmış.

2. Information Architects

Information Architects web sitesi de beyaz alanları kullanarak logo, metin, paragraflar ve başlıklar gibi bazı site elementlerini birbirlerinden ayırmış ve site tasarımının temiz ve sade olmasının önünü açmış. Aşağıdaki imaj, ilgili sitenin tasarımının yakından bir görünümü.

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz Boşlukları Nasıl Verimli Bir Şekilde Kullanabilirsiniz?

Beyaz alanları verimli bir şekilde kullanabilmek bazen zorlu bir iş olabilir. Yazının devamında size bu alanda yardımcı olabilecek bazı ipuçlarını listelemeye çalıştım:

1. Satır Aralığı (Line Spacing)
Bir paragraf içerisindeki satırların aralığı, konu sitenin okunabilirliği ve taranabilirliğine geldiğinde en büyük farkı oluşturan en önemli unsurlardan birisidir. Eğer satırlar birbirlerine çok yaklaştırılırsa, o sayfanın içeriğini taramak neredeyse imkansız hale gelir. Eğer satırlar birbirinden çok uzaklaştırılırsa, o zaman ziyaretçileriniz satırların birbirlerinden bağımsız olduğu hissine kapılacaklar ve konuyu bütünleştiremeyeceklerdir.

Siz de satır aralıklarınızın yukarıda iki örneğin arasında bir yerlerde (ne çok az ne de çok fazla) olmasını isteyeceksinizdir. CSS'de satır aralıkları hakkında teknik bir makale arıyorsanız, o zaman CSS line-height değeri makalesi size yardımcı olacaktır.

2. Marjlar (Margin)
Marj, bir tasarımdaki elementleri çevreleyen boşluklara verilen addır. CSS Marjları bu boşluğu kendi avantajınıza kullanabilmeniz için mükemmel bir yoldur. Marjlarla çalışırken hatırlamanız gereken birkaç unsur bulunmaktadır.

Tutarlılık
Anahattınız üzerindeki marjlarınızın geneli birbirleri ile tutarlı olsun. Boşuklarınızda ne kadar tutarlı olabilirsiniz, siteniz o kadar profesyonel ve organize görünecektir. Marjları düşünürken hem dikey hem de yatay marjları göz önünde bulundurun, zira bunların her ikisinin de tasarımın geneline önemli etkileri bulunmaktadır.
Çok fazla olmasın
Marjlarınızı çok yüksek tutmayın. Birbirlerinden olması gerektiğinden fazla ayrılmış site elementleri, yukarıdaki satır aralığı örneğimizde de görebileceğiniz üzere içeriğin birbirleri ile olan ilişkisini kaybetmesine yol açabilir. Ayrıca bir sayfaya sadece sınırlı sayıda pikselin sığabileceğini de unutmayın, bu sebeple ekranın büyük kısmını boşluklarla da doldurmayın (tabi eğer sitenizin içeriği bu tip marjların kullanılmasını gerektirmiyorsa).
Çok az da olmasın
Unutmayın, burada beyaz alanları öğrenmeye çalışıyoruz, bu sebeple tasarımlarınızda en azından biraz beyaz boşluğun olmasına özen gösterin. Bir metnin resme, yan çubuğua, başlığa, navigasyon çubuğuna ya da sitenin diğer herhangi bir elementine çok yakın olması durumunda tasarımınız biraz sıkışık görünecektir ki bu da ziyaretçilerinizi rahatsız eder. Ziyaretçilerinizin biraz nefes alabilmesi için bu boşluklara özen gösterin.

3. Minimalist Tasarım Beyaz Boşluğa Eşit Değildir

Modern tasarım dünyasının problemlerinden biri de pek çok insanın beyaz boşlukları minimalist tasarımlarla bütünleştiriyor oluşu. Bu kesinlikle yanlıştır. Bir sitede çok miktarda metin bulunuyor olabilir ancak bu o sitenin kolayca okunabilir ve taranabilir bir web sitesi ol(a)mayacağı anlamına gelmez. Beyaz boşlukların doğru kullanımı ile bu pek tabi mümkündür.

Örnek olarak Smashing Magazine'yi ele alalım. Bu sitenin tabir-i caizse kulaklarından içerik fışkırıyor, bununla birlikte site yöneticileri sitenin taranılabilirliğini ve okunabilirliğini en yüksek seviyede tutmayı başarabilmişler. Site yönetimi bunu renklerin ve metin boyutlarının doğru seçimi ile beyaz boşlukların doğru kullanımı ile başarmışlar.

Yine aşağıda site tasarımına yakından bir bakış atalım:

Site tasarımında metinlerle resimlerin, navigasyon elementleri ile içerik ve yan barın arasındaki görsel ayrımı fark edebildiniz mi? İşte bu tümüyle beyaz boşlukların doğru kullanımı ile sağlanmış durumda.

4. Başlıklar (Headings)
Bşlıklar site içeriğinizi yönetilebilir parçalara ayırabilmek için mükemmel bir yoldur. Bu makaleyi okurken 4 farklı başlığın kullanıldığını görmüşsünüzdür: H1, H2, H3, H4. Bu başlıklar büyük, koyu, altı çizili "bölüm başlıkları"ndan oluşuyor ve siz bu makale süresince bunu görebiliyorsunuz.

Çevirmenin notu: Makalenin orjinal yazarı kendi site tasarımında başlıkları kullanım şekline göre makalenin bu kısmını yazmış. Bildirgec üzerinde, üzülerek söylüyorum, başlık yönetimi beni pek tatmin etmiyor. Makalenin bu kısmında adı geçen kullanım örneğini görmek için yazının sonunda göreceğiniz kaynak bağlantısına tıklayınız.

Burada yapmanız gereken başlıkların alt ve üst kısımlarındaki boşluğa ve bu boşlukların makalenin taranabilirliğini nasıl etkilediklerine dikkat etmektir. Örneğin, sitenin H2 etiketlerinde (ikinci en büyük başlık) metin ile alt çizgi arasında 5 piksel boşluk bulunuyor. Ayrıca yine aynı etiketin üst ve alt kısmında 15'er piksellik marj yer alıyor. Bu beyaz boşluklar makalenin bölümlerini sizin görsel olarak ayırabilmenizi ve içeriği tararken onları kolayca seçebilmenizi sağlıyor.

Bu boşlukları oluşturarak içeriğin taranması büyük ölçüde kolaylaştırılırken, ziyaretçinin hangi imi ya da hangi başlığı okumak istediğine karar vermesi kolaylaşıyor. Eğer başlıklar doğru kullanılmamış olsaydı, okur tüm makaleyi okumak zorunda bırakılırdı ki bu da bu tip uzun makaleler için okuyucu açısından tam bir işkencedir.

Eğer siz de benim H2 etiketini nasıl stillendirdiğimi merak ediyorsanız, o zaman aşağıdaki kodu style.css dosyanıza kopyalamanız yeterli.


h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}

5. İmajlar

İmajlarla metnin arasında kullanacağınız boşluk, bir tasarımın güzel ya da çirkin olup olmayacağını belirleyebilecek kadar önemlidir. Eğer kelimeler imaja çok yakın olursa, o zaman içerik çok karmaşık görünecek ve okunması da bir o kadar zorlaşacaktır. Eğer kelimeler imajdan çok uzak olurlarsa, o zaman birbirleri ile olan bağlantısı kopacaktır.

Web Design Tuts websitesinde imajlarımı organize etmek ve onların görsel olarak mümkün olduğu kadar çekici olabilmesini sağlayabilmek için bazı özel imaj sınıfları kullanırım. Ne zaman bunun gibi bir makale yazsam, bir imaj için aşağıdaki kodu kullanırım.

<img class="imagelist" src=# />

Bu imajı da CSS ile stillemek için aşağıdaki yöntemi kullanırım:


.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}

Kullandığım imajlar ile başlıkların üst ve alt kısımlarında 15'er piksellik boşluklar bırakarak tutarlılığı nasıl koruduğumu fark edebildiniz mi?

Modern Web Tasarımında Beyaz Alanlar
Eğer makaleyi buraya kadar okuduysanız, o zaman beyaz boşluğun neden önemli olduğunu artık anlamışsınızdır: Siteyi temiz göstermek, okuyucular için okunmasını kolaylaştırmak ve sitenin daha profesyonel görünmesini sağlamak bunlardan sadece birkaçı. Yine makale süresince beyaz alanların birbirleri ile tutarlı marj, metin ayrımı ve imajlarla başlıkların görsel ayrımı için kullanıldığından da bahsetmiştim. Ancak halen beyaz alanların "iyi" kullanımının ne olduğunu merak ediyor olabilirsiniz.

Aşağıda listelediğim web siteleri, beyaz alanların doğru kullanılarak ziyaretçileri ile iletişimi güçlendiren web sitelerine iyi birer örnektir.

1. Surfstation

Kullanılan beyaz alanın nasıl site içeriği ile yan çubuğu birbirinden ayırdığına dikkat edin. Site ziyaretçilerinin siteyi taramasını kolaylaştıran ve ihtiyaçları olan içeriği kolayca bulabilmelerini sağlayan yegane unsur işte budur.

2. Jason Santa Maria

Jason'un web sitesi çizgilerin ve beyaz boşlukların zekice kullanılmış kombinasyonu ile içeriğini temiz ve verimli bir şekilde ziyaretçilerine aktarabiliyor.

3. Digital Mash

Avustralyalı Tasarımcı Rob Morris'ın web sitesi Digital Mash, navigasyon, ana resim ve sayfanın alt kısmında bulunan dört adet içerik alanını içeren çok sade bir tasarımı kullanıyor. Marjların nasıl birbirleri ile uyumlu ve içeriğin nasıl kolayca okunabilir olduğuna ve metinler arasındaki boşluklar ile başlıkların ve simgelerin nasıl güzel kullanılmış olduğuna bir bakın.

4. Odd Web Things

Metin tabanlı bir web sitesi olan Odd Web Things, beyaz boşlukları kendi logolarını yan çubuktan, yan çubuğu kendi portfolyalarından ve portfolyalarından da kendi bloglarını ayırmak için kullanmış.

5. Vitor Lourenco

Vitor'un sitesi tümüyle beyaz bir arkaplan üzerinde oraya buraya yerleştirilmiş tipografi kullanmış. Koyu navigasyon, güçlü bağlantılar ve kullandığı sade renk şeması bu websitesini işler kılmış.

Beyaz Alanlar'a Dair @Twitter Görüşü

Bu makaleyi yazarken beni Twitter üzerinden takip eden bazı kişilerin görüşlerini aldım. Onlara şu soruyu sordum: "Bir web tasarımında beyaz alanlar sizce neden önemlidir?" İşte onların cevapları:

@Brendan: - Beyaz alanlar! Bence beyaz alanların doğru kullanılması, odağın içeriğin kendisine çekilebilmesi ve profesyonel görünüm için önemlidir.

@Brandon: - Önemlidir çünkü bilgi ve tasarım elementleri, büyük bir karmaşa yaratmaktansa birbirleri ile ilişkilendirilebilir.

@sthursby: - Bir ziyaretçiyi web sitenize bağlayabilmek için sadece birkaç saniyeniz varken, o süreyi ziyaretçinin aradığı içeriğe kolayca ulaşabilmesi için doğru kullanmak gerek.

@Hyermish - Beyaz alanlar, sadeliğin bir illüsyonu olmakla birlikte bazen karmaşıklığı da giderebilir.

@Drew_Douglass - Benim beyaz alanları kullanmaktaki ana sebebim, odağı sayfanın bir elementine çekmek ve bakışları o içeriğe yönlendirmektir.

Kaynak: Web Design Tuts

CSS ve Kullanılabilirlik Üzerine Yazdığım Diğer Yazılar

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

SEO Uzmanları İçin Popüler Firefox Eklentileri

Seven-7 — Wed, 21 Jan 2009 17:16:00 GMT

Firefox, eğer ihtiyacınız olan çalışma ortamı için gerekli eklentileri kurduğunuzda gerçekten çok güçlü bir araca dönüşmektedir.

Numaralarla, istatistiklerle, sayfa puanlarıyle ve, elbette, SEO ile oldukça haşır neşir olduğumu kendimden biliyorum.

Günümüzde bilinen 4 önemli puanlama aracı vardır - Google Pagerank, Compete Site Analizi, Alexa Puanı ve Quancast.

Bu yazımda sizinle, web üzerinde gezinirken çalışma verimliliğinizi arttıracak en önemli FireFox araçlarını paylaşmak istiyorum.

1. Compete Tarayıcı Uzantısı
Benim kişisel tercihim olan bu uzantı web sitelerinin ne kadar hızlı büyüdüğü, sitenin ne kadar popüler olduğu (insan bazında) ve sitenin Compete puanını gösteriyor. Uzantı, özellikle istatistiklerin kontrolü için çok kullanışlı.

2. Search Status

Ziyaret ettiğiniz her bir sitede SearchStatus eklentisi, Google Pagerank, Alexa popülerlik puanı, Compete puanı, Alexa'nın alakalı bağlantıları, Google, MSN ve Yahoo!'dan alınan geribağlantılar gibi bilgileri alabilirsiniz.

Bir eklenti üzerinde pek çok özellik bir araya toplanmış ve ortaya güzel bir araç çıkmış. Siz ne dersiniz?

3. Firefox İçin SEO

SEO ile ilgilenen herkesin kullanması gereken muhteşem bir eklenti. Eğer Google, Yahoo!, Alexa, Technorati ve daha pek çok kaynaktan alınan istatistiki verilerle ilgileniyorsanız, bu eklentiye bayılacaksınız.

4. Wizz RSS Haber Okuyucusu

Wizz RSS Haber Okuyucusu oldukça güçlü ve kolay kullanımlı bir RSS ve Atom okuyucusu / alıcısı olup Mozilla Firefox üzerinde çalışmaktadır.

5. Kgen

Bu eklenti bir web sitesi üzerinde kullanılan anahtar kelimelerin ne sıklıkta kullanıldığını ve sayfanın geneline oranla ne kadar güçlü olduğunu belirtiyor. SEO için bir sayfada hedeflediğiniz anahtar kelimelerin tekrar edilme oranı ve bunun etkin bir biçimde sayfa geneline yayılması çok önemlidir. Bu eklenti sayesinde sitenizin sayfalarında o sayfa için hedeflediğiniz anahtar kelimelerin etkin bir şekilde kullanılıp kullanılmadığını anlayabilirsiniz.

6. SEOMoz Rank Checker | Tarayıcı Düğmesi

Mükemmel bir araç - web sitenizin farklı kaynaklardan aldığı puanları depolamanıza yardımcı oluyor. Bu puanları doğrudan tarayıcı üzerinden görüntüleyebiliyorsunuz. İlgili servis Google, Yahoo!, MSN ve Ask arama motorlarını destekliyor.

Bu eklentiyi kullanabilmeniz için site üzerinden kayıt olmanız gerekmektedir.

7. SeoQuake

Seoquake, web sitenizin SEO sonuçlarını analiz edebileceğiniz en güçlü araçlardan birisidir. Eklenti üzerinden PageRank puanınızı ve Yahoo! ile Alexa'nın sunduğu benzer puanları alabiliyorsunuz.

Mozilla ana sayfasında eklentinin yetenekleri hakkında detaylı bilgi bulunuyor.

8. Google Araççubuğu

Eğer bazı Google araçlarını kullanıyorsanız kesinlikle sahibi olmanız gereken bir tarayıcı uzantısı.

Firefox halihazırda Google Aramasını bütünleşik olarak içeriyor, o zaman neden bu araççubuğunu kurmanız gerekli?

Çünkü bu eklenti tüm Google araçlarına tek bir fare tıklaması ile ulaşabilmenizi sağlıyor. Araççubuğu ayrıca geribağlantılarınızı, Pagerank değerini de kontrol etmenizi sağlıyor.

9. Time Tracker

Internet üzerinde çok uzun zaman harcayıp bir türlü işlerini tamamlayamayanlardan mısınız?

Bu eklentiyi kullanarak zamanınızı organize edebilir, Firefox üzerinde ne kadar zaman harcadığınızı kontrol ederek, Internet bağımlılığınızı analiz edebilirsiniz.

10. Read It Later

Bu eklenti de benim en sevdiğim eklentiler arasında yer alıyor. Read It Later'ı kullanarak ilgilendiğiniz sayfaları tarayıcınıza kaydedip daha sonra onları dilediğiniz zaman okuyabilmenizi sağlıyor... Özellikle yer imlerine eklemek istemediğiniz ancak siteyi gördüğünüz an okumaya vaktinizin olmadığı anlarda bu eklenti oldukça kullanışlı hale geliyor.

Kaynak: 1st Web Designer

SEO ile ilgili yazdığım diğer yazılar

SEO Araçları Listesi

Bu yazı Seven-7 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 için en kullanışlı 50+ font

Seven-7 — Thu, 06 Nov 2008 10:07:00 GMT

Fontlar

"Arşivinizde bulunması gereken 37 adet font" yazısından sonra bu kez de acomment.net sitesinin derlediği webmaster ve web tasarımcılar için 50'den fazla kullanışlı yazı fontunu sizlere sunacağım.

Evolution True Type Font

Everson

Grunge Serifia Font OTF

Marcelle

Virmeen t’Kirrrl

Jellyka - Estrya’s Handwriting

Mia’s Scribblings

liste gerçekten çok uzun.. ben birçoğunu ekledim, ğer daha fazlasını görmek istiyorsanız devamı için şuraya gözatabilirsiniz.

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

45 Photoshop Ders Sitesi

Seven-7 — Thu, 25 Sep 2008 17:23:00 GMT

Photoshop her geçen gün büyüyen bir sektör. Nerdeyse Photoshop'u bilmeyen duymayan yok gibi. Her geçen gün öğrenmek isteyenlerin sayısı da artıyor. Bu popülerite ile birlikte internette Photoshop ile ilgili kaynaklar her geçen gün çoğalmakta. İşte size Photoshop öğrenebileceğiniz 45 ders sitesi...

devamına şu adresten bakabilirsiniz.

Bu yazı Seven-7 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 logo nasıl olmalı? Ne(ler) yapmalı? # 2

Seven-7 — Mon, 25 Aug 2008 20:56:00 GMT

bu bildiri serisiyle birlikte şirketler için kurumsal anlamlar ifade eden, küçük ama etkili bir yere sahip! logo yazı dizisine başlıyorum. Makale çevirileri ve kendi düşüncelerimle ortaya iyi bir malzeme çıkarmayı umuyorum. Herkese iyi okumalar :)

Bir logonun nasıl tasarlandığını öğrenmek mi istiyorsunuz? Gerekli olan kaynaklar tek bir başlık altında. 5 adımda profesyonel logo tasarımını öğrenebilirsiniz. Gelelim işe yarayacak ipuçlarına.

1. Logonun ne olduğunu öğrenin ve logo neyi temsil eder, simgeler.

Logo tasarlamadan, çizmeden önce logonun ne olduğunu iyice kavramaya çalışın. Logo neyi temsil eder? Ne amaçlar? Logo sadece işaretten ibaret bir sembol değildir. Şirketin kurumsal markasını font, şekil, renk ve (resimlerle) yansıtmaya çalışır.

2. Kuralları bilin

• Bir logo, mutlaka tanımlanabilir olmalı.
• Bir logo, mutlaka akılda kalmalı.
• Bir logo, mutlaka renkler olmadan da efektif olmalı.
• Bir logo, mutlaka uygun ölçütlerde olmalı.

Daha fazlasını logo tasarım püf noktaları ve logo tasarımı neden 5$ etmez makalelerinde bulabilirsiniz. Mutlaka inceleyin.

3. Diğerlerinin Başarı ve Hatalarını öğrenin.

iyi, kötü ve çirkin

Logo tasarım kuralları hakkında az biraz bir şey öğrendiniz. İyi ve kötü logoyu ayırt edebiliyorsunuz. Elinizden geldiğince diğer başarılı olan logoları inceleyin, neden bu kadar başarılı olduklarını araştırmaya çalışın neleri doğru yaptıklarını gözlemleyin ve bu size bir fikir, ilham versin ama fikri de olduğu gibi çalmayın. Bakış açınızı olabildiğince geniş tutmaya çalışın.

nike swoosh

Örnek olarak nike swoosh logosunu ele alalım. Logo 1971 yılında carolyn davidson tarafından sadece 35$ a çizildi. Hala çok güçlü, akılda kalan ve konumlandırılabilir bir logo. Son derece basit, sade ve ünlü yunan zafer tanrısının sembolünü tasvir ediyor.
Spor dünyası için son derece popüler bir logo. Nike swoosh logosu birkaç harika logodan birisi. Diğer ünlü markaları düşünün be onların logolarına göz atın onları bu derece başarılı kılan ne? Logo pond sitesine bakmanızı tavsiye ederim. Yada bölgenizde bulunan herhangi bir kütüphaneye giderek konuyla ilgili bir kitap okuyun.

Bu kadar iyi logolardan bahsettikten sonra tabii ki çok kötü olanları da var. Bunlardan bir kaçı burada.

4. Tasarım Süreci

tasarım süreci

işte insanların yaratıcılıklarını ortaya çıkan iyi ve kötüyü ayırt eden uzun tasarlama süreci. eğer bu işe gönül verdiyseniz bıkmadan, usanmadan sabırla çizin çizin çizin. olmadı bir daha, olmadı bir daha. yılmak yok. net üzerinde araştırın, arkadaşlarınızla beyin fırtınası yapın. onlardan yardım isteyin fikir, görüşlerini mutlaka önemseyin. zaten ilk seferde kim başarılı olmuş ki! karamsarlığa düşmeden diğer güzel logo tasarımlarına bakarak ilham almaya çalışın. İlham bu adı üstünde ne zaman geleceği belli olmuyor.

5. Yazılım öğrenin

işin püf noktası aslında bu fikriniz ve yaratıcı birşeyler buldunuz sıra program(lar) ile bunu olgunlaştırmaya geldi. Net dünyasını iyice araştırın. programler (photoshop, illustrator) hakkında detaylı bilgiler öğrenin özellikle kısayol tuşları işinizi yaparken zaman tasarrufu sağlayacaktır.

|kaynak|

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

multimedya dönüştürücü

Seven-7 — Mon, 07 Jul 2008 09:21:00 GMT

bilgisayarımızda arşivlediğimiz multimedya dosyalarımızı dönüştürebilmek için aramaktan yorulduğumuz dönüştürme proglamlarında bulduklarımız ya deneme süreli ya da kısıtlı programlar oluyor. ama şimdi öyle bir program var ki ücretsiz (freeware) ve video, ses, resim, mobil araçlar(iphone/ipod), psp, formatlarını desteklediği gibi dvd ripleme işini yapabiliyor. desteklediği dosyalarla tam bir format fabrikası.

bilgisayarınızdaki vazgeçemeyeceğiniz programlardan biri olacağını tahmin ettiğim formatoz sitesindeki bu program sade bir arayüze sahip. video, audio, picture, mobil device, rom device kategorilerinden farklı dosya biçimlerini dönüştürme işlemlerini tamamen bedava olarak yapabilirsiniz.

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

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

Kaliteli Fotograf ve Resim Kaynakları

Seven-7 — Sat, 09 Dec 2006 16:18:00 GMT

Web tasarım, blog veya benzeri uygulamalarınız için yararlanabileceginiz, bünyesinde yüksek çözünürlülte fotograf ve resim bulunan siteler;

morgueFile

Yülsek çözünürlükte ücretsiz dijital fotograflara ulaşabileceginiz güzel bir site morguefile. temel olarak Animals ,Objects ,People ve Scenes kategorileri bulunan sitede 55,000 den fazla resime ulaşabiliyorsunuz.

PixelPerfect Digital

146 başarılı kategoride binlerce kaliteli fotografı bulabileceginiz güzel bir site daha. Ancak yayın haklarından dolayı egerki fotograflarda ibare var ise sahiplerine mail atarak kişisel kullanımı için izin almanız gerekmekte. Rss destegi ile siteye eklenenleri takip imkanınızın olması ise bir artı.

OpenPhoto

OpenPhoto "Creative Commons" lisansı altında kullanıcların resimlerini yayınladıgı Michael Jastremski tarafından açılmış olan başarılı başka bir resim sitesi.

Flickr

son dönemlerin belkide ne popüler resim paylaşım ve depolama sitesi diyebiliriz flickr için. Kullanıcılarana farklı kategorilerde lisanslama hakkı tanıyan site kullanıcılarına kolay bir kullanım sunmakta.

deviantART

Kullanıcılarına detaylı kategorileme mantıgı ile kaliteli fotograflar sunan başarılı başka bir uygulama deviantART, kişisel galeri oluşturma site üzerinde mesajlaşma gibi yetkilerinizde bulunmakta (üyelik sonrası)

Bunlar dışında bir çok resim depolama ve paylaşım sitesi bulunmakta;

Image After
PDPhoto
StockVault
49PM Photo Search
Buzznet
Ourmedia.org
FreeFoto
Gimp Savvy
DHD Multimedia Gallery
Free Photographs Network
FreeStockPhotos.com
FreeImages.co.uk
FreeImages.com
bigfoto.com
Geek Philosopher Stock Photos
Barry's Free Photos
Holy Land Photos
Aarin Free Photo and Digital Images
Photo Rogue
FreePhotos.com
Free Stock Photos
tOfz dot org
FreeMediaGOO
AMG Media Works, Inc. Free Photos
USDA ARS Image Gallery
Creating Online Gallery
yotophoto
pixelbag.de
Woophy
ImageBase
Free Stock Photos from Cepolina Photos
Pictures from Old Books
Majestic Imagery
Photocase
Visipix
BurningWell.org
ArtFavor
freedigitalphotos.net
Ixuz Travel.net
FreePhotosBank
NPS
Picturestation
Tripod Image Gallery
Piotr.Pix
unprofound.com
Stockcache Gallery
diwiesign studio stockphoto archive
Photo Repository
Design Packs
Google Image Search
Yahoo! Image Search
Ask.com Picture Search
picsearch
MSN Search
NationsIllustrated
Kingdom Graphix Gallery
Free Large Photos
Mayang's Free Textures
Fotogenika.net

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