bildirgec.org - sduman - beğendikleri

En Yaratıcı Alışveriş Siteleri

sduman — Sat, 29 Jan 2011 13:39:00 GMT

Tasarımcılar göz alıcı tasarımlar yaparken aynı zamanda sitenin işlevsel olması için çok çaba harcıyorlar. Bu yazımda mükemmel tasarımlar ve yenilikçi tasarım tekniklerinin akıllıca kullanıldığı bir kaç tasarımdan bahsedeceğim. Eminim bu tasarımlarda ilham alabileceğiniz birkaç özellik bulacaksınız.

Heartbreaker Fashion

50'ler ve 60'ların kıyafetlerinden esinlenilerek yapılmış, pastel renkler ve retro çizimler kullanılan tasarımı ile Heartbreaker'ın tasarımı şirket vizyonunu çok iyi yansıtıyor. Noktalı ve çizgili kenarlıklar farklı nesneleri birbirinden nazik bir biçimde ayırıyor.

Hunter’s Wines

Hunter’s Wines bir şarap mağazası. Anasayfada yanyana bloklar içerisinde bazı bilgiler veriliyor. Şişelerin altındaki işaret aslında pek bir anlam içermiyor ve ürün seçiminde sağ üst köşedeki bir buton tam olarak doğru çalışmasa da sitenin kendini diğer alışveriş sitelerinden ayıran bir tasarımı var.

Sassy Duck

Sassy Duck modern kadınlar için farklı tasarımlar sunan, pek eski olmayan bir el çantası markası. Site tam anlamıyla kadınların aksesuar eksikliği hissetmesine neden oluyor. Geniş ürün yelpazesi ve fotoğraf arşivi ile site ziyaretçilerinde büyük bir etki bırakmaya çalışıyor. Site butonları daha çekici hale getirmek için :hover, :focus ve :active durumlarından yararlanabilirdi. Ürünlerin listelendiği yatay şekildeki navigasyon fare hareketleri ile kontrol edilebiliyor. Çok az yazı ile alışveriş sitelerinin nasıl çekici hale getirilebileceği konusunda güzel bir örnek.

Daha fazlası

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

Blog tasarımı nasıl yapılır?

sduman — Tue, 01 Feb 2011 09:08:00 GMT

Blogdesingblog.com blog tasarlerken dikkat edilmesi gereken noktaları 9 parçaya ayırarak anlatıyor. Bu başlıkların Türkçe karşılıklarından çok genellikle İngilizce adlarına yatkın olunduğu için İngilizce adlarını da beraber vermek bu anlatım için daha yararlı olacaktır.
Bu dokuz alt başlık şöyle.

Başlık (Header)
İçerik Alanı (Content Area)
Birincil yönlendirici (primary navigation)
İkincil yönlendirici(secondary navigation)
Manşetler (Headlines)
Yorumlar (Comments)
Makale Sonu (Post’s Footer)
Sayfa Altı (Footer)
Reklamlar (Advertisements)

HEADER - başlık

Başlık ziyaretçilerin siteye girişlerinde karşılaştıkları ilk bölge olduğu için sitenin en önemli kısımlarından biridir. blogu diğer bloglardan ayırabilecek ve öne çıkarabilecek bir yapıda olduğu için üzerinde önemle durulması gerekir. Başlık benzersiz ve hatırlaması kolay olmalıdır. Bu yüzden blog tasarımcıları başlık üzerinde son derece titiz çalışırlar, öyle ki sadece hazır bir tasarımı kullanan bloggerlar dahi başlık kısmını kendilerine uyarlamaya çalışırlar. Blog başlığı tasarımını populer kılmak için Vinh Le'nin kaleme aldığı şu makaleye göz gezdirmekte fayda var.

not: 2008 yılında yayınlamış bir makale olmasından dolayı verilen örneklerden bazılarında tasarımlar değişmiş. Ancak bu makalenin orjinalinin yayınlandığı siteye giderek orada kaydedilmiş olan örnekleri inceleyebilirsiniz.

Birkaç mükemmel header örneği

1.Octwelve

octwelve

octwelve header da bir çizgi karakterin kullanıldığı iyi bir örnek.

2.Cult-foo

cult fo

cult foo header köşelerindeki başarılı tasarımıyla dikkat çekiyor.

3.darkmotion

darkmotion

darkmotion'un header tasarımı kullanıca eğlenceli görünüyor ve kullanıcıyı siteye çekiyor.

Header nasıl tasarlanmalı?

Blog tasarımına öncelikle header'dan başlayın. Photoshop'da tasarımı yapmadan önce header içerisinde vermek istediğiniz mesaj, site ismi ve slogan gibi metinlere önceden karar verin.
Header tasarlamanın pek çok yolu olmakla birlikte tasarım yapılırken dikkat edilmesi gereken en önemli noktalardan biri sitenin geri kalanıyla ve konusuyla ilgili olmasıdır. Header siteye ilk kez giren ziyaretçiye bile olabildiğince çabuk bir şekilde sitenin amacını aktarabilmelidir.
Yaratıcı olun ve farklı tasarımlar denemekten korkmayın. ilk kez denenmiş benzersiz bir tasarım her zaman ziyaretçiler tarafından hatırlanabilir.

Content Area - içerik alanı

Content area içeriği taşıyan bölgedir. Bu sebeple bloğu ziyaret eden kullanıcıların en çok zaman harcayacakları yer de burasıdır. bu bölge ziyaretçilerin dikkatini dağıtacak tüm unsurlardan arındırılmış olmalı, içerisinde barındırdığı metinler son derece okunaklı ve gözü yormayacak olacak şekilde yerleştirilmelidir. Bu yüzden içerik alanında sadelik önemlidir.

Harika içerik alanlarından örnekler

1.Simplebits

simplebits

simplebits okuması son derece kolay ve linklerin olduğu bölgeler yeteri kadar belirginleştirilmiş.

2.We love wp

we love wp

Karanlık temalardaki en büyük sorunlardan biri yazıların okunabilir kılınmasındaki zorluktur. Ancak we love wp bu sorunun üstesinden gelmiş.

3.we break stuff

we break stuff

Renk kombinasyonu başarılı. Linklerin altlarını noktalarla çizme fikri güzel.

Başarılı içerik alanı nasıl tasarlanır?

Hiyerarşiye dikkat edilmeli. Vurgular başlık, metin ve geri kalan ögelere doğru azalarak inmeli. Örneğin her zaman başlıklar metinden daha vurgulu ifade edilmeli.

İçerikler aktarılan konular açısından birbirine yakın olmalı. Okuyucu bir içerikle ilgileniyorsa yakınlarda o konuyla ilgili başka içerikleri de görebilmeli.

Linkler yeteri kadar belirgin olmalı ancak okuyucunun dikkatini dağıtmayacak kadar da tasarımla bütünleşmeli.

Primary Navigation - Birincil Yönlendirici

Bu yönlendirici ziyaretçileri blogun farklı bölümlerine yönlendirmek için kullanılır. Genellikle header'ın üstünde bulunur. Orada olması gerekmez ancak çoğu ziyaretçi bu yönlendiricinin orada olmasını bekler ve buna ihtiyaç duyar.

Mükemmel Primary Navigation örnekleri

1.A list a part

a list a part

a list a part doğru tasarlanmış navigasyon menüsü için oldukça iyi bir aday.

2.Mindtwitch

mindtwitch

mindtwitch doku kullanarak navigasyonu öne çıkarma üzerine oldukça iyi bir örnek.

3.Jogger

jogger

jogger'in navigasyon menüsü oldukça basit ve sade fakat tasarım içerisine oldukça iyi adapte edilmiş.

Mükemmel bir primary navigation nasıl tasarlanır?

Navigasyon linklerini olabildiğince az tutun. 6-7 linki aşmamasını öneririm.
primary navigation linkleri için blog tasarımında biraz geniş bir alan sağlayın. Bu linklerin her sayfada görünmesi gerekmiyorsa görünmemesi gereken sayfalarda linkleri secondary navigation bölgesinde vermeyi göz önünde bulundurun.
Hakkında ve İletişim linkleri genellikle primary navigation bölgesinde bulunur. Diğer linkler tasarımın nasıl yapıldığına ve kullanıcıya ne verilmek istendiğine göre değişir.

Secondary Navigation - ikincil yönlendirici

İkincil yönlendiriciler ziyaretçilerin bloğun diğer kısımlarına kolayca erişebilmesi için kullanılır. Genellikle bu linkler sidebar (yan sütun)'da verilir.
Birincil yönlendiricinin içermediği linkler bu bölümde sergilenir. Örneğin popüler makaleler, sayfalar, son yorumlar gibi. Siteyi ziyaret eden kullanıcıların kolayca erişmesi istenen kısımlara bağlantı sağlar.

Mükemmel secondary navigation örnekleri

1.elitistsnob

elitistsnob

temiz tasarımı sayesinde elitistsnob'un navigasyon menülerini okumak çok kolay.

2.Manclub

manclub

navigasyon menüsü içerik alanının arkasından kayarak çıkıyor ve tüm bölümler rahatlıkla ayırt edilebiliyor.

3.desingdisease

desingdisease

desingdisease turuncu rengin farkı tonlarını navigasyon menüsünde farklı bölgeleri ayırmak için kullanıyor.

Mükemmel second navigation bölümü nasıl tasarlanır?

Primary navigation da olduğu gibi burada da olabildiğince az link verilmesi yararlı olacaktır.
farklı linkler için secondary navigation alanını bölün. Bu algılamayı ve kullanımı kolaylaştıracaktır.
Secondary navigation alanını karmakarışık yapmayın. Okuyucu için gerçekten gereken nesneler hariç ne varsa çıkarın. Takvim güzel görünebilir ancak gerçekten işlevsel bir amacı yoksa (örneğin rezervasyon tarihi belirleme gibi) hiçbir okuyucunun buna ihtiyacı yoktur.

Headlines - manşetler
Manşetler kullanıcının dikkatini ilgili blog yazılarına çekmek için kullanılır. Yazarın ziyaretçiyi diğer blog yazılarından alıp ilgili yazıya yönlendirmek için kullandığı yöntemlerden biridir. Bu yüzden manşetler belirgin yapıda olmalıdır. Bunu yapmanın pek çok farklı yaratıcı yolu var.

Mükemmel manşet örnekleri

1.Henry Jones

henry jones

Henry sade tasarımı ve manşetleriyle kullanıcın ilgisini manşete çekebiliyor. ayrıca sevimli ikonlar kullanarak tarih ve yorum bölümüne de dikkat edilmesini sağlamış.

2. I love typography

i love typograpy

Bu font ve renkleri kullanarak nasıl ilgi çekici bir manşet yaratabileceğinizi gösteren mükemmel bir örnek.

3.blogsolid

blog solid

Blog solid başlık kenarında garip bir tasarım kullanarak kullanıcın ilgisini başlığa çekiyor.

Manşetler nasıl dikkat çekici yapılır?

Bunu yapmanın en kolay yolu manşet renklerini ana metin renginden farklı seçmektir. İçerik ve manşet için farklı fontlar kullanılabilir. Genellikle manşetler için serif fontlar ve içerik için non-serif fontlar kullanılır.

Daha büyük puntolar kullanmak manşetleri belirginleştirir. içerikle aynı büyüklükte fontlar içerikle manşetin ayırt edilmesini zorlaştırır. Manşet puntoları içerik puntosundan büyük olmalıdır.

Manşetleri belirginleştirmek için kullanılabilecek bir başka yol makale gönderim tarihi gibi bilgileri manşetin dışında bırakmaktır. (Bu makalenin orjinalinin bulunduğu blog bunu kullanmaktadır)

Comments - yorumlar

Yorum sekmesi blog içerisindeki iletişimi güçlendirmek için oldukça önemli yer tutar. Yorum kenarlarına numara vermek. Yorumcuların birbirlerini kolayca tanımlamalarını sağlar.
Yazarın yorumlarını daha belirgin yapmak bir ziyaretçiye yazarın yorumlarını sayfa içinde hızla ararken kolaylık tanıyacaktır.

Mükemmel yorum sekmesi tasarım örnekleri

1.Chris Shifflet

chris shifflet

Chris'in yorum alanını okumak oldukça kolay. Sade tasarımı ve yazarla yorumunu farklı bölümlere ayırması ilgi çekici.

2.Darkmotion

darkmotion

Yazar bilgilerinin ayrı tutulması oldukça hoş. Ayrıca yorum alanları da birbirinden ayrı görünüyor. Genel olarak sanki birisiyle sohbet halindeymiş gibi bir izlenim uyandırıyor.

3.Blog Desing Blog

blog desing blog

(Bu makalenin orjinalinin yer aldığı bloga ait olan yorum paneli. Makale yazarı ziyaretçilerinden oldukça olumlu eleştiriler aldığı için kendi bloğunun yorum bölümünü de makalesine eklemiş)

Mükemmel yorum bölümü tasarımı nasıl yapılır?

Yorumları birbirinden ve ana alandan ayırmanın en kolay yolu tasarımı alt alta gelen yorumları farklı renklerde olacak şekilde yapmaktır.
Yazarın yorumlarının diğer ziyaretçilerin yorumlarından daha belirgin kılınması faydalı olacaktır. Ancak bu yapılırken bütünlüğü bozacak kadar belirginleştirme yapmak da negatif yönde etki edecektir. Renklerde küçük değişiklikler bu belirginleştirme işi için ideal olacaktır.
İsim, tarih gibi bilgileri esas yorum metninden ayırmak ziyaretçilerin yorumları gözleriyle hızla tararken rahat etmesini sağlayacaktır. Böylece istediklerini daha hızlı bir şekilde bulabilirler.

Post's footer - içerik sonu

post's footer bölgesi içerikten sonra yorum bölümü başlamadan önce ziyaretçilere bir takım refereans linkler verebileceğeniz bir bölgedir. Bu bölüm gülünç bir şekilde sıklıkla tasarımcılar tarafından atlanır. Aslında oldukça kıymetlidir. Ziyaretçilerin içeriği okuduktan sonra dikkatini diğer önemli makalelere çekmesi için bir şans verir.
İnsanlar bloglarında diğer elementlerin dizaynı için oldukça zaman harcarlar ancak sıra page's footer a geldiğinde şablon temanınkine benzer sıradan bir dizayn hazırlayıp geçerler. Bu yeterli olmaz.

Mükemmel post's footer örnekleri

1.Freelanceswitch

freelanceswitch

Oldukça keskin, temiz ve okuyucunun dikkatini okuyucu içeriği okuduktan sonra nazikçe burada sergilenen linklere çekiyor.

2.PSDTuts

psdtuts

okuyucaların oylayabilecekleri ve eğer makaleyi beğendilerse paylaşım ağlarına gönderebilecekleri linklerin mevcut olduğu bir post's footer tasarlanmış. Farklı renk kombinasyonu kullanılarak kullanıcının dikkati içeriği okuduktan sonra buraya kaydırılıyor.

3.Standarts of Life

standarts of life

Oldukça temiz bir post's footer bölgesine sahipler. Benzeri makalelere verilen linklerin bulunduğu bölgede linkleri birbirinden ayırmak için alt alta gelen linklerin arkası farklı renklerde tasarlanmış.

Mükemmel post's footer nasıl tasarlanır?

Footer's post içeriğin sergilendiği bölümden kesin bir farklılıkla ayrılmalı. Okuyucu bunun içeğe ait olmadığını, ona yardımcı olmak için sayfaya eklenmiş olduğunu ilk görüşte anlayabilmeli. Bunun için farklı bir arkaplan rengi kullanmak farklılığı yaratabilmek için ideal yollardan birisidir.
Tasarıma başlamadan önce post's footer bölümünde ne istediğinize karar verin. Böylece bu bölgenin çöplük haline gelmesini önlemiş olursunuz ayrıca tasarımınız da daha hoş görünür.
Post's footer a koyabileceğiniz en iyi içeriklerden biri "benzer sayfalar" linkleridir. bu okuyucuya ilgilendiği konuyla ilgili daha çok makaleye kolayca ulaşma imkanı sağlar. Kullacının blogda sıkılmadan daha fazla vakit geçirmesi için önemlidir.

Footer - taban

Pek çok insan footer'ı sadece klasik telif hakkı yazısı için kullanır. Ancak footer sidebar'ı dolup taşırmadan fazladan link verebileceğiniz önemli bir alandır. daha çok secondary navigation linki burada tutulabilir. Ziyaretçiler makaleyi bitirip sayfanın altına indiklerinde sayfa sonuyla karşılaşacaklar. Burası aslında onları blogdaki diğer makalelere yönlendirmek için verimli bir alan olabilir. Buradaki secondary navigation linklerinde popüler makaleler, son makaleler, öne çıkan makaleler gibi farklı dallarda linkler vererek ziyaretçileri sitede yayınlanan diğer ilginç içeriklere gönderebilirsiniz.

Mükemmel footer tasarımlarına örnekler

1.Desingshack

desingshack

Sidebar kullanmadan secondary navigation linklerini footera aktarmayı denemişler. İncelenebilir.

2.Web Desingner Wall

webdesingnerwall

Nick sanırım header tasarımına harcıdığı zaman kadar footer da zaman ayırmış. Footer tasarımındaki detaylar dikkat çekici.

3.Chriss Shiflett

Chriss Shiflet

Gerçekten temiz ve işlevsel bir footer için iyi bir örnek. Tam olarak yapması gerekeni yapıyor.

Mükemmel footer tasarımı nasıl yapılır?

Footer'ı tasarımın geri kalanına biraz daha karşıt şekilde tasarlayın. Bu kullanıcının footer bölümüne geldiğini ve sayfanın sonuna yaklaştığını hissettirir.

Okuyucuların gerçekten nelerden hoşlanacağını tahmin ederek okuyucaları o konulara yönlendirmeye çalışın. Burayı gereksiz bilgilerle doldurmak okuyuculara yardımcı olmaz.
Basit ve kullanışlı olmayı burada da sürdürün. Kullanıcıların kolayca algılayabileceği şekilde tasarlayın.

Advertisement - reklam

reklamlar pek çok blogger için oldukça önemlidir. Ancak reklamlar çoğu zaman sayfanın korkuç gözükmesine yol açar ve bu kullanıcıların içeriği okuyamamasıyla sonuçlanabilir. Bir süre sonra kullanıcılar sitenizi ziyeret etmeyi bırakacaklardır.
Eğer reklamları doğru şekilde yerleştirmeyi başarır ve makaleyi reklamdan daha önde tutmanın yolunu bulursanız bu sorunu ortadan kaldırabilirsiniz. Sitenizi ziyaret etmeye devam eden kullanıcılar da böylece daha çok para kazanmanızı sağlar.

Mükemmel reklam bölümü tasarım örnekleri

1.Copyblogger

copyblogger

copyblogger 125*125 boyutlarında oldukça büyük bir banner ı sayfasının üstüne yerleştirmiş fakat sponsorlarımız bölümü altında ve içeriğe dahil olmadığı kolayca ayırt edilecek şekilde konumlandırmış. İçeriği okumada her hangi bir sıkıntı yaratmıyor.

2.webdesingerwall

webdesingerwall

webdesingerwall standart bir reklam görüntülemiyor. Ayrıca bunu içeriğin yanına eklemiş. ancak içerikle arasında bir ayıraç kullanarak bu reklamın içeriğe dahil olmadığını fark ettiriyor. böylece kullanıcıyı rahatsız etmemeyi amaçlamış.

3.problogger

problogger

problogger kendi logosu yanında standar bir reklam banner'ı kullanıyor. Ancak bu hem logosunun hem de içeriğinin gerisinde kalıyor ve ziyaretçinin dikkatini dağıtmıyor.

Reklam bölümü nasıl tasarlanır?

Eğer blogunuza reklam koymayı düşünüyorsanız, blogunuzun tasarımı daha taslak halindeyken reklamları nereye yerleştireceğinizi tasarlayın. Bu blogunuza daha fazla esneklik kazandıracaktır.
reklam vermekte en popüler yöntemlerden biri 125*125 boyutlarında google adsense bannerlerını kullanmaktır. google adsense pek çok farklı boyutta ve şekilde reklam veriyor olsa da 125*125 pixel boyutlarındaki reklamlar sidebar için uygundur.

Reklam almadan önce reklamların sitede nasıl görüneceğini anlamak için bir kaç reklam örneği bulup bunları siteye ekleyerek deneyebilirsiniz.
Reklamlar görülecek kadar dikkat çekmeli ancak içeriğin önüne geçecek kadar da dikkat toplamamalı. Sidebar reklamları konumlandırmak için en iyi yerlerden birisidir. fakat sidebar'daki navigasyon menülere ulaşımı engellememelidir.

Bol tasarımlı günler...

not: ingilizceden türkçeye çevirileri birebir yapmak yerine yeni cümleler kurdum. Bazı noktalarda ek bilgiler verdim. Bu yüzden bire bir çeviri değildir. Makalenin orijinalini ziyaret ederek orijinali de incelenebilir.

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

8 css3 sitesi keşfedelim

sduman — Thu, 17 Feb 2011 10:04:00 GMT

1 - css3.com

css3 'ün resmi sitesi. css3'ün referans rehberini bulabileceğiniz ve blog tarzında css3 örneklerinin yayınlandığı sade bir site.

css3.com

2 - css3please

css3 kodları tarayıcıdan tarayıcıya farklılık göstermektedir. bu site de css3 ile yapılabilecek bir görsellik için hangi tarayıcıda hangi kodun çalıştığını gösteren çok pratik bir site.

css3please

3 - css3generator

çok hızlı bir şekilde css3 kodu oluşturabileceğiniz son derece kullanışlı bir site. listeden eklemek istediğiniz css3 özelliğini seçdikden sonra piksel ve renkdeğerlerini girmeniz yeterli. her tarayıcı için gerekli kodları site bizim için oluşturuyor.

css3generator

4 - w3schools

web programcılığı konusunda en çok bilinen sitedir. tam bir referans kaynağıdır. adım adım css3 öğrettiği için tercih edilebilr.

w3schools

5 - css3.info

tasarımıyla dikkat çeken bu sitemizde blog tarzında yapılmış. css3 açısından çok zengin bir kaynak. css3 hakkında herşeyin kendilerinde bulunduğunu slogan olarak geçiyorlar.

css3.info

6 - css3watch

biraz karışık olmasına karşın incelenebilir.

css3watch

7 - w3.org

web konusunda standartları belirleyen kurumun resmi sitesi. css3 konusunda standartla bakılabilir.

w3.org

8 - westciv

kaydırma çubukları sayesinde çok hızlı bir şekilde css3 kodları oluşturabileceğiniz kullanıcı dostu arayüzüyle ve iyi tasarımıyla başarılı ve benim gibi keşfedenlerinin vazgeçemediği bir harika.

westciv

popüler yazılarım:

en popüler 15 facebook uygulaması

en popüler 20 forum sitesi

seo - temel kurallar

wordpress için gravatar

Bu yazı sduman 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 faydalı 13 joomla! eklentisi

sduman — Sun, 20 Feb 2011 09:54:00 GMT

1 - virtuemart

sitenizi tam donanımlı online mağaza sistemine çevirmenizi sağlayacak bir eklenti. yani sitenizi tamamen alışveriş üzerine kurulu bir e-ticaret sitesine çevirebilirsiniz.

virtuemart

2 - xmap

site haritası oluşturabilirsiniz. bunu arama motorları tarafından desteklenen xml formatında yapıyor.

xmap

3 - idoblog

lişisel bir blog oalrak da kullanılabilir, site üyelerine blog açmak için de.

idoblog

4 - jce

popüler bir zengin metin editörü.

jce

5 - joomfish

sitenizi birden fazla dilde sunmanızı sağlayan bir eklenti.

joomfish

6 - akeebabackup

sitenizi yedeklemenizi ve sonra ihtiyaç halinde geri yüklemenizi sağlayan bir eklenti.

akeebabackup

7 - metamod

türkiye'den gelen ziyarteçilere ayrı, başka ülkelerden gelenlere ayrı modüller göstermek için.

metamod

8 - sh404sef

arama motoru dostu adresler oluşturmak için.

sh404sef

9 - expose flash gallery

slayt gösterileri hazırlamak için. video dosyalarını destekliyor.

expose flash gallery

10 - jevents

güçlü bir etkinlik takvimi eklentisi.

jevents

11 - community builder

kullanıcı yönetim panelini üstün özelliklere kavuşturur.

community builder

12 - docman

belge yönetim eklentisi.

docman

13 - jfusion

forum eklentisi.

jfusion

popüler yazılarım:

envato'nun market sitelerini keşfedelim

en popüler 15 facebook uygulaması

10 temel wordpress eklentisi

5 iddialı seo programı

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

sitelere font özgürlüğü

sduman — Mon, 03 Jan 2011 09:07:00 GMT

bildirgeç'de sık sık görürüz en iyi 25 font, arşivlik el yazısı fontları gibi yazıları. fontların hemen hepsi güzeldir fakat sadece bilgisayarınızda kullanabilirsiniz. eğer bu fontları web sitenizde veya günlüğünüzde kullanmak isterseniz bunun öyle pek de kolay olmayacağını bilirsiniz. ya flash tabanlı sifr (scalable inman flash replacement) kullanacaksınız, ya da javascript tabanlı typekit kullanacaksınız. sifr kullanırken flash kullanmak zorundasınız ve flash bilmeniz gereklidir, typekit kullanmak da ücretlidir ve üstelik türkçe karakter destekli font bulamazsınız. yeni yeni kullanılmaya başlayan css3'ün ise maalesef internet explorer tarafından deskteklenmemek gibi kronik problemleri vardır. bu kadar kötü haberden sonra işte iyi haber geliyor; birazdan tanıtacağım sistem hem bütün tarayıcılar ile uyumlu, hem de türkçe karakter destekli bir çok font içeriyor. Kullanımı ise sadece bir satır javascript kodundan ibaret ve elbetteki ücretsiz.

fonts.com

typekit benzeri javascript tabanlı bir font servisi fonts.com. javascript tabanlı bir servis olarak typkit'ten farklı olarak biraz daha yetenekli, bol font alternatifli, 40 dil desteğine sahip ve de bireysel kullanıcılar için ücretsiz bir servis. üstelik türkçe font desteğine de sahip.

sistemi kısaca anlatmak gerekirse siteye üye oluyorsunuz, projenizi oluşturup kullanacağınız fontu veya fontları seçiyorsunuz, javascript kodunu sitenize eklediyorsunuz, hepsi bu kadar. harika değil mi?

fonts.com üyelik

siteye üye olmak oldukça basit. ilk olarak bu adrese tıklayarak üyelik sayfasını açmalısınız ve kişisel bilgilerinizi girmeden önce kullanmak istediğimiz paketi seçmeniz gerekiyor. kişisel kullanıcılar için ücretsiz paket oldukça güzel özelliklere sahip (3000'den fazla font, sınırsız site ekleme ve bir sitede sınırsız sayıda font kullanabilme gibi). daha sonraki sayfada sırasıyla adınızı, soyadınızı, şifrenizi, sifrenizin doğrulamasını ve son olarak da e-posta adresinizi girdiğinizde üyelik işlemlerinizi tamamlamış oluyorsunuz.

kurulum ve kullanım

resmin büyük halini görmek için tıklayın.

fonts.com'u sitenizde kullanmak için, fonts.com'a giriş yaptıktan sonra bir proje oluşturmalısınız. bu adresten ya da sitede bulunan create a project linkinden bir proje oluşturabilirsiniz. project name kısmına projenizin ismini, publish domain kısmına da sitenizin ya da günlüğünüzün adresini girmelisiniz. save project dediğinizde projeniz hazır. daha sonra ise choose fonts linkine tıklayarak fontlara göz atabilirsiniz. beğendiğiniz fontu projenize eklemek için add to project butonuna basabilirsiniz.

ipucu: sitedeki bütün fontlar maalesef türkçe destekli değil. beğendiğiniz bir fontun türkçe destekli olup olmadığını anlamak ise çok kolay; yapmanız gereken fontun isminin yanında příliš žluťoučký karakterlerinin olmasına veya font grubunun latin ext 1 olmasına bakabilirsiniz.

fontları seçtiniz ve artık sitenizde kullanmak istiyorsunuz. iki adet alternatifiniz var; biri sitenizde fontları kullanmak istediğiniz kısmı (örneğin sitenizde menu id'sine sahip bir katman, diğer bir deyişle div olsun. fonts.com yönetim panelinizde work on stylesheet menüsünden selectors kısmına #menu seçicisini ekleyerek bunu kolaylıkla yapabilirsiniz. ekledikten sonra kullanmak istediğiniz fontu seçtiğinizde işleminiz tamamlanmış oluyor.) css seçicileri yardımıyla seçerek o kısımda bu fontu kullan demek, diğeri sitenize javascript kodunu ekleyerek sitenizde fontu kullanmak istediğiniz kısmı css yardımıyla (css dosyanızda o kısmı biçimlendirmek için kullandığınız kısıma font-family özelliğini kullanarak fontlarımızı tanımlamak. fontların isimleri ise publish sekmesinde option 2: advanced (javascript) kısmında bulabilirsiniz. örneğin: font-family:"albertus w01";) şeklinde) biçimlendirmek. iki yöntemin de kendine göre bazı avantajları var; ilk yöntem ile hiç css dosyasına dokunmadan sitenizi biçimlendirebilirsiniz ve daha sonra istediğiniz zaman fontları değiştirebilirsiniz. bu yöntemin dezavantajı yüklenmesinin biraz uzun sürmesi. ikinci yöntem ile eğer css'e aşina iseniz daha rahat işlem yaparsınız benim gibi ve ilk yönteme göre daha hızlı yüklendiğini göreceksiniz.

projeyi siteye eklemek

projenizi sitenize eklemek için üst taraftaki menüden publish linkine tıklamalısınız. bu sayfada 4 tane ekleme seçeneği olmasına rağmen ücretsiz kullanıcılar sadece 1. ve 2. seçeneği yani javascript kodu ile eklemeyi kullanabiliyorlar. css ile eklemek için ise ücretli kullanıcı olmak gerekiyor. orada ki şeklindeki javascript kodunu sitenizin kaynak kodlarında html'in head etiketleri arasına eklemelisiniz. eğer birinci yöntemi kullanarak fontlarınızı tanımladıysanız ve css seçicilerinizde bir sorun yoksa kodu ekledikten sonra sayfayı yenilediğizde yeni fontlarınız yerlerini alacaklardır. css dosyasına ekleme yöntemini seçtiyseniz biçimlendirmek istediğiniz bölgenin css kodlarında font-family özelliği ile fontlarınızı tanıtmalısınız. sonucunuz aşağıdaki ekran görüntüsü gibi olmalıdır. sorunlarınızı yorumlarda yazarsanız elimden geldiğince yardımcı olmaya çalışırım. gelecek yazılarda görüşmek üzere, sağlıcakla kalın.

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

2010'un en iyi flash siteleri

sduman — Thu, 23 Dec 2010 07:46:00 GMT

2010 yılı bitti bitecek, yeni yıl hazırlıkları da başladı bile. "yeni yılda ne yapıyorsun?" klişesi de haliyle revaçta.. neyse konuyu fazla dağıtmayalım. bu yılın en iyi flash sitelerini incelemeye koyuldum ve ortaya bu yazı çıktı. bakalım bu yılın en yaratıcı, en kaliteli flash siteleri hangileriymiş?

1)Monoface

monoface her şeyden önce oldukça eğlenceli bir site. keyifli vakit geçirmek için birebir diyebilirim. tek olumsuz yanı ise loading (yükleniyor) kısmı biraz sıkıyor. kabaca, kendi yüzünüzü tekrar tasarlıyorsunuz diyebiliriz sitenin içeriği hakkında ip ucu vermek için. denemelisiniz anlatılmaz yaşanır.
2)waterlife

waterlife doğa severlerin oldukça hoşuna gidebilecek bir site. özellikle deniz yaşamını sevenlerin beğeneceğini umuyorum. "yükleniyor" kısmını da dalgalara benzetmişler ama biraz uzun tutmuşlar. onun dışında harika bir site. fotoğrafların içinde yüzüyorsunuz diyebilirim.
3)marc ecko

marc ecko gezerken insanı heyecanlandıran bir site, tasarımda yaratıcılığın sınırlarını zorlamışlar. site, imlecinizi takip ediyor bu da sizin özgür hissetmenizi sağlıyor. bazı nefes kesici resimler olduğunu söylemeden de geçemeyeceğim.
4)hbo

hbo'yu temsil eden resim için kusura bakmayın biraz kızarsanız haklısınız fazla çekici bir resim olmuş. sitenin eksisini hemen belirteyim; geç yükleniyor. güzel bir flash sitesi hakkını verelim ama çok yaratıcı olmadığını da eklemeden geçemeyeceğim.
5)get the glass

"süt sağlığa yararlıdır, önerdiğimiz bir içecektir" gettheglass'ın savunduğu motto. girişte oldukça sade bir tasarıma sahip sitede, "got milk" kısmını tıkladığınız zaman açılıyor. ve yine söylemekte yarar var; bu site de geç yükleniyor. ama eğlenceli bir site olmuş bu yönünü tebrik ediyoruz.
6)agencynet interactive

agencynet oldukça yaratıcı ve başarılı bir tasarıma sahip. gökten yağan yazılar size sitenin amacını anlatıyor zaten. girişte size bloglarına mı sitelerine mi gitmek istediğinizi soruyorlar. ben siteyi seçtim geç yüklenen ama hoş bir tasarıma sahip olan flash animasyonla başbaşa kaldım. ve çok katlı bir binaya davet edildim, oldukça güzel bir binaydı öneririm.
devamı

daha fazla link;

teknoloji,internet,tasarım

blog tasarımında sık yapılan hatalar

yabancı dil öğreten siteler

çevreci arama motorları

filmlerin sonunu söyleyen siteler

**kaynak**

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

Kasım 2010'un En Popüler Photoshop Dersleri

sduman — Mon, 06 Dec 2010 07:19:00 GMT

Kasım ayını geride bıraktığımız şu günlerde kasım ayının en popüler Photoshop derslerini sizin için derledik. Kullanıcıların en çok tercih ettiği bu Photoshop dersleri sizin için umarız oldukça faydalı olur. Farklı efektler, teknikler öğrenebilir ve ayrıca Google Sketchup ile Photoshop'u beraber kullanabilirsiniz. Kasım ayının en popüler photoshop dersleri:

Design a Horizontal Accordion Slider
(Yatay akordeon tarzı slider tasarımı)

Use Google Sketchup and Photoshop to Create 3D Typography
(Google Sketchup ve Photoshop ile 3D Tipografi Kullanımı)

The Light Effect Tutorial in Photoshop
(Photoshop ile Işık Efekti Dersi)

Create Liquid Filled Glass Text in Photoshop
(Photoshop ile sıvı dolgulu cam metin oluşturun)

How to make a stunning typography poster
(Nasıl Çarpıcı Tipografik Poster Yapılır)

3D Simcards Illustration
(3D Sim kartı illüstrasyonu)

Create a Flower Basket using Patterns
(Kalıpları kullanarak çiçek sepeti oluşturma)

Create a night glowing text with neon frost in Photoshop
(Photoshop ile parlayan neon ışıklı metin oluşturma)

Creating a Futuristic Workspace for a Beautiful Girl
(Güzel kız için Fütüristik çalışma alanı oluşturma)

Create a Valentine card in Photoshop
(Photoshop ile Sevgililer Günü Kartı Oluşturma)

Creating a Dramatic Polar Panorama Effect
(Dramatik Kutup Manzarası Yapımı)

How to create elegant Christmas postcard with ornamented ball in Photoshop CS5
(Photoshop CS5 ile süslü toplu zarif Noel Kartpostalı nasıl yapılır)

Ayrıca Bakınız :

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : ajaxline

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

Kasım 2010'un En Popüler Illustrator Dersleri

sduman — Sat, 11 Dec 2010 09:18:00 GMT

ajaxline'ın derlemiş olduğu Kasım ayının en popüler illustrator derslerini inceleyerek yeni teknikler öğrenebilir, tasarımlarınızı zenginleştirebilirsiniz.

Create a Personalized Toolkit for Making Maps
(Harita Yapmak İçin Kişiselleştirilmiş Araç Seti Oluşturma)

Creating a Vector Girl
(Vektör Kız Oluşturun)

Create interlocking motifs in Illustrator
(Illustrator ile kilitli motifler oluşturun)

Cool Typography with the Blend Tool in Illustrator
(Illustrator'da Blend Aracı ile Harika Tipografi)

Beautiful Vector Illustration in Illustrator and Photoshop
(Illustrator ve Photoshop ile Güzel Vektör Illustrasyonu)

Create summery poster artwork using Illustrator CS5
(Illustrator CS5 ile Yazlık Sanat Posteri Yapımı )

Create a Milk Bottle with a Funny Cow Label
(Süt şişesi üzerinde Komik inek Oluşturmak)

Killer Robot Tutorial
(Öldüren Robot Dersi)

Create A Grisly Zombie Illustration
(Tüyler Ürpertici Zombi Illustrasyonu onuşturmak)

How to Use 3D Revolve to Make Sports Balls in Adobe Illustrator
(Adobe Illustrator ile Nasıl 3D Spor Topu Yapılır)

Create a Dirty Water Drop Character
(Kirli Su Damlası Karakteri Oluşturma)

Ayrıca Bakınız :

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : ajaxline

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

Photoshop Yeteneğinizi Geliştirmek İçin 34 HD Video

sduman — Sun, 12 Dec 2010 13:35:00 GMT

Yazılı photoshop dersleri adım adım anlatımlarıyla kolay gelebilir. Ancak video dersleri ile yeteneklerinizi kat kat arttırabilirsiniz. Bu yazıda verilen video adreslerinde yüksek çözünürlükte ve akıcı anlatımlarıyla 34 photoshop dersini izleyebilirsiniz.

1. Papercraft (kağıt sanatı) 5:25

2. Fotoğraflara dramatik renkler ekleme 8:19

3. Çok renkli parlak çizgiler oluşturma 6:23

4. Neon yazılar 8:11

5. Alacakaranlık yazı efekti 24:46

6. Ateşli arkaplan oluşturma 22:26

7. Photoshop ile zayıflama 6:21

8. Basit kapak oluşturma 40:23

9. Avartar manipilasyonu 9:10 12:09

10. Paramparça hançer poster oluşturma 12:09

11. Dövme ekleme ve silme 9:27

12. İnanılmaz boru şeklinde neon yazı 21:26

13. 3D objelerle çalışma 12:48

14. Yaratıcı düğün albümü tasarımı 5:57

15. Uzman düzeyde fotoğraf düzenlemesi 21:20

16. Dağınık stil poster oluşturma 20:04

17. Dergi kapağı oluşturma 15:11

18. Krom rengi araba boyası 4:10

19. Resimleri animeye çevirme 5:30

Devamı ve Kaynak

40 Mükemmel Photoshop Rötuş Dersi
17 Adet Wordpress Tema Düzenleme Dersi
diğer bütün yazılarım

Bu yazı sduman 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ımlarınız için 60 bedava el yazısı fontu

sduman — Wed, 15 Dec 2010 08:00:00 GMT

bilgisayarlar ve yazıcılar icat edilmeden önce mektuplar, notlar, dökümanlar, reklamlar ve her şey el yazısıyla yazılıyordu. bugün bile yazarlar ve bazı tasarımcılar ilk taslaklarını el yazısı ile yapıyorlar.

bu yazıda el yazısını başarılı uygulamış birkaç site ve 60 adet el yazısı fontu paylaşacağım.

Maria Grossman
bağlantılarınızı canlandırmak için gerçek resimler koyabilir ve el yazısı fontları kullanarak ilgi çekici ve gerçekçi hale getirebilirsiz. tıpkı maria grossman'ın kişisel web sitesinde kullandığı gibi.

www.mariagrossmann.de

mariska
tasarım üzerine kişiliğinizi yansıtmak için el yazısı fontları ve kişisel seçiminiz renkleri kullanabilirsiniz. marisha.com gibi.

www.marisha.com

neighborhood homework house
çocuklar için organizasyonlar yapan bir kuruluşun websitesi. el yazısı sitenin amacına uygun olarak basit ve çocuksu olarak seçilmiş.

www.neighborhoodhomeworkhouse.org

Bootb
bu tasarımda el yazısı fontu ve güzel seçilmiş renkler bir arada kullanılmış. gayet zekice ve yaratıcı bir site yapılmış.

www.bootb.com

sırada tasarımlarınızda çalışabilmeniz için toplanmış 60 adet el yazısı font var. sağdaki linke tıklayarak fontun adresine, soldakine tıklayarak font yaratıcının diğer fontlarına ulaşabilirsiniz.

1. Jellyka – Estrya’s Handwriting - Jellyka Nerevan

2. Waiting for the Sunrise - Kimberly Geswein

3. Gloria Hallelujah - Kimberly Geswein

4. Throw My Hands Up in the Air - Kimberly Geswein

5. Just Me Again Down Here - Kimberly Geswein

6. One Miguel - Miguel Mojica

7. Kaileen - Kreative Korporation

8. Fineliner Script - Drawperfect

9. Dear Joe Five Casual - JOEBOB graphics

10. Rolina - Rodi de Asis

11. Sue Ellen Francisco - Kimberly Geswein

12. Mari & David - Rodrigo German