bildirgec.org - sacrosancttayyar - beğendikleri

Daha önce Web Designer Wall sitesindeki web site derlemelerini sizlerle paylaşmıştım. Bu paylaşımlarda ziyaretçinin ilgisini çekebilmek için renklerin ve grafiklerin etkileyici bir biçimde kullanıldığını web site örnekleriyle gördük. şimdiki derlemede dikkat çekmek için kullanılan teknik bir obje veya renk degil, boşluk.

İşte boşlugu en iyi kullanan web siteleri;

Hot Meteor

Vitor Lourenco

tamamı burada.

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

Yerli web geliştirme platformu

sacrosancttayyar — Tue, 24 Feb 2009 17:47:00 GMT

Türkiye'de üretilmiş ama adı yeterince duyulmamış bir yazılımdan bahsedeceğim. Yazılımın adı Moremotion Aplication Studio. Daha önce bildirgec'de 2002 yılında burada, 2003 yılında da burada konu olmuş. Ama o zaman daha çok gelişme aşamasında olduğu için fazla ilgilenen olmamış. O günden bu yana Mor Yazılım firması boş durmamış ve sistemi sürekli olarak geliştirmeye devam etmiş.
Moremotion A.ş, Java tabanlı olarak geliştirilen Moremotion framework'ü üzerinde açık kaynak kodlu web uygulamaları geliştirme ortamı sunuyor.

Moremotion

Diğer geliştirme ortamlarından farklı olarak XML/XSL teknolojileri kullanılarak Java tabanlı web uygulamalarını çok kısa sürelerde çoğu zaman tek satır kod yazmadan geliştirebilirsiniz. Özellikle Ajax uygulamalar için de hazır araçlar entegre olarak bulunuyor. Tam olarak tasarım ekranında ne görürseniz onu alıyorsunuz.

Programın yardım dökümanları oldukça detaylı ve Türkçe. Sadece yardım dökümanlarını okuyarak gelişmiş uygulamalar yapılabilir.
Kod yazarak yazılım üretenlere pek cazip gelmeyebilir ama kodlarla pek uğraşmak istemeyenler için biçilmiş kaftan. Lafı daha fazla uzatmadan sizi aşağıdaki linklere davet ediyorum :
Mor Yazılım Ana Sayfa
Mormotion Özellikleri
Forum
Tanıtım Videoları
Download

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

Yeşil Renkli 12 Mükemmel Web Sitesi

sacrosancttayyar — Wed, 18 Feb 2009 15:30:00 GMT

Yeşil mükemmel bir renktir. Bu yazımda tasarımda daha doğal tonları tercih etmiş web sitelerinin bir listesine yer vereceğim. Bu 12 web sitesine bakarak yeşilin tonlarının nasıl mükemmel bir şekilde kullanıldığına dair kendinize ilham alabilirsiniz.

Bu sayfaların pek çoğu doğal bir temayı yansıtmak için yeşili kullanmayı tercih etmişler. Ancak Emotions by Mike gibi bazıları yeşil rengini sırf tasarımları ile uyumlu olduğu için tercih etmişler ve ortaya mükemmel sonuçlar çıkmış. Örnekleri inceleyin ve kararınızı kendiniz verin:

1. Freshbox

Freshbox

2. Mint Stats

Mint Stats

3. Envato

Envato

4. Modstudio

Modstudio

5. Terralien

Terralien

6. Emotions by Mike

Emotions by Mike

7. Organic Supermarket

Organic Supermarket

8. Discover Borneo

Discover Borneo

9. Really Wild Travel

Really Wild Travel

10. Weberica

Weberica

11. Isle of Man Sports Council

Isle of Man Sports Council

12. Mint

Mint

Kaynak: Build !nternet

Web Tasarım Örnekleri Hakkında Yazdığım Diğer Yazılar

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

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

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

Başka Söze Gerek Bırakmayan Internet Portfolyoları

sacrosancttayyar — Tue, 10 Feb 2009 14:35:00 GMT

Ekonomi kontrolden çıkmaya başladıktan sonra gün geçtikçe daha fazla tasarımcı endüstride ön plana çıkmaya başlıyor. Zaman ilerledikçe daha fazla kendi başına çalışan (freelance) tasarımcının belireceğini düşünüyoruz. Bunun sebebi de işe en başından başlamanın kolay oluşu, evden çalışabilme imkanı, normal işlerinin yanısıra fazladan para kazanabilme imkanı ve tatmin eden kariyer seçimi.

Geçen hafta yayımladığım sosyal medya özgeçmişi nasıl yazılır yazısından sonra biraz daha araştırma yapıp bazı tasarımcıların portfolyolarını inceledim. Bu portfolyolar iyi olmaktan öte mükemmeller ve iyi bir portfolyo sadece üzerinde çalışılmış birkaç iyi proje olmakla kalmıyor, onların portfolyanın kendisi ve yapılan işlerin kalitesi ile bütünleşmesinin bir sonucu olması gerekiyor... Pek çok durumda bu yapılan işin çokluğundan ziyade yapılan işin kalitesine bağlı oluyor.

Eğer siz de kendi portfolyonuzu yeniden tasarlamak istiyorsanız o zaman bu mükemmel portfolyolara bir göz atmanızı öneririm.

Kaynak: Inspiredology

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

Fontlar Nasıl Türkçeleştirilir ?

sacrosancttayyar — Thu, 05 Feb 2009 10:12:00 GMT

Yabancı fontlarda türkçe karakterler bulunmuyor. Ancak bu fontlara türkçe karakterler ekleyebiliriz.
Öncelikle bir font editörüne ihtiyacımız var. Ücretsiz windows ve linux alternatifleri var ancak ben bu konuyu yeteneklerini yeterli bulduğum FontCreator v5.6 programı üzerinden anlatacağım.

1.Adım

high-logic.com adresinden FontCreator programını yüklüyoruz.
Programda düzenlemek istediğimiz fontu açıyoruz.

düzenlenmesi istenen fontu açıyoruz

2.adım

Şimdi türkçe karakterler daha önceden tanımlanmamışsa yeni karakterler oluşturmamız gerekiyor. Her hangi bir karaktere sağ tıklıyoruz buradan "Add" seçeneğine tıklıyoruz. Eklemek istediğimiz yeni karakter için boş bir kutucuk açılıyor. Bu kutucuğa karakterimizi eklemeden önce kutucuğu tanımlamalıyız. Yani klavyedeki hangi tuşa basında bu kutucuğun bir harf olarak ekranda belireceğini ayarlamalıyız. Bunun için oluşturduğumuz bu boş kutucuğa sağ tıklayarak Properties seçeneğine giriyoruz.

yeni harfimizi tanımlıyoruz

Açılan bu pencerede General sekmesi altında Postscript başlığı içerisindeki Name'e eklemek istediğimiz harfin ismini veriyoruz. Sonra Mappings sekmesine geçerek, mappings alanına yeni bir özellik eklemeliyiz. bunun için mappings penceresinin sağ tarafında bulunan Select butonuna tıklıyoruz.

Örneğin eklemek istediğimiz harf yumuşak g (ğ) olsun. Bu harf Latin Extended-A kategorisinde latin small letter g with breve olarak geçiyor. (Eğer harflerin isimlerini bilmiyorsak windowstaki sistem araçları arasında yer alan karakter eşlem aracından isimlerini öğrenebiliriz.)

ğ harfinin mappings sekmesinde tanımlanması

Harf tanımlama işlemleri bu kadar. Sonra Ok butonlarıyla işlemi tamamlıyoruz . Oluşturduğumuz boş kutucuğun üzerinde harfimize ait genel bir görüntü oluşmuş olacaktır. Ancak harfimiz henüz tasarlanmadı.

Adım 3

Fontu türkçeleştirme işleminin püf noktası burada yatıyor. Anlatım için Amaze isimli fontu kullandım. Bu font standart fontlara benzemiyor. Peki ben ğ harfini nasıl tasarlayabilirim? En küçük bir bozukluk diğer karakterler arasında uyumsuzluk yaratacaktır ve göze hoş gelmeyecektir.

Türkçe karakterlerin tasarımı

Ekleyeceğimiz karakterleri diğer karakterlerden kopyalayabiliriz. Örneğin yine (ğ) harfini fonta ekliyor olalım. Bunun için fontta hali hazırda var olan g harfini kopyalayıp eklemek istediğimiz (ğ) harfine yapıştırıyoruz. şimdi üzerinde bir çizgi eksik bunu da varsa diğer karakterlerden yine kopyala yapıştır yöntemiyle elde edip üzerine ekleyebiliriz. ya da kendimiz bir çizgi çizerek kopya g harfini ğ harfine dönüştürebiliriz. Temel mantık bu. Ben diğer karakterlerden aldığım bir çizgiyi biraz değiştirerek g harfine uygun hale getirdim ve fontta hiç bir bozukluk olmadı.

ğ nin üzerindeki çizgiyi oluşturmak için fonttaki bu karakterden yararlanılabilir.

Aldığım çizgideki bir takım oynamalardan sonra ğ harfini elde etmiş oluyoruz.

ğ harfi oluşturuluyor.

Bu işlemi diğer türkçe karakterler için de uyguluyoruz. ç nin altındaki çengeli s yi ş yapmak için kullanabiliyoruz. Bu ve benzeri eklemeler sonucunda türkçe karaktlerin tamamanını oluşturmak mümkün.
FontCreator programında F5 tuşuyla her an fontu test etmek harfler arasında uyumsuzluk olup olmadığını görmek mümkün. Testlerde de olumlu sonuçlar aldıktan sonra fontu ilgili klasöre yükleyebiliriz. Program bunu bizim için "install font" seçeneğiyle yapabiliyor. Ancak bir hatayla karşılaşma ihtimalimiz var. Bunun sebebi orjinal font dosyasının fonts klasöründe bulunmasından kaynaklanıyor. Önce orjinal fontu sistemden tamamen kaldırmalıyız. İşlem burada bitmiyor . Dilersek fontun ismini de değiştirebiliriz.

Fontun görünen ismini veriyoruz

Programda fonta isim vermek için Tools menüsünden Autonaming... seçeneğine tıklamamız gerekiyor. İsim verdikten sonra diğer detayları olduğu gibi bırakabiliriz.

Detaylar

Adım 4

Fontu ister program aracılığıyla ister elle sisteme yükledikten sonra herhangi bir metin editöründe test edebiliriz. Ben bu makaleyi hazırlarken kullandığım Amaze fontunu bilindik ve türkçe karakter içeren birkaç kelimeyle test ettim.

Sonuç

Fontun sisteme dahil olmasıyla tüm işlemler bitiyor. Tasarımlarınızda başarılar...

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

50 adet güzel ve kullanıcı dostu navigasyon menüsü

sacrosancttayyar — Thu, 05 Feb 2009 07:39:00 GMT

Bir web sitesinin kullanışlılığının en temel gereklerinden birisi şüphesiz navigasyon menüleridir. Kullanıcılar için kullanım kolaylığı açısından basit ve anlaşılır olmasının yanında şıklığı da oldukça önemlidir. Smashing Magazine bizim için şahane 50 adet css, css+javascript ve flash navigasyon menüsünü listelemiş. İlham almak adına hep birlikte göz atalım.

Loodo

nopokographics

smallstone

Water’s Edge Media
Listenin tamamını görmek için tıklayın.

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

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

Web Tasarımcılar İçin 15 Javascript Slider ve Scroller

sacrosancttayyar — Wed, 04 Feb 2009 07:51:00 GMT

Görsel ve işlevsel anlamda web sitelerimize hem hareket katacak hem de kullanım basitliği sayesinde kullanıcılarımızı sitemizde basitçe ilgi alanlarına yönlendirebilecek Javascript "slider"lar ve "scroller"lar..
Burada, görsellik anlamında çok şık ve ilgi çekici kodlamaları görebilirsiniz.
Emin olun bu javascriptler sitenize çok fazla değer katacak.
İşte kullanımların en güzel örnekleri;

1. YouLoveUs

2. Volll

3. Melissahie

4. SourceBits

5. ilFruttet

6. Danny Blackman

7. tatTAPtap

8. Coda ( Klasik )

9. Lucuma

10. Komodo Media

11. Viva Video

12. IJsfontein

13. Good Works Media

14. Viget Labs

15. Css Brigit

Kaynak:DzineBlog

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

Renk Şeması İçin Çöllerden İlham Almak

sacrosancttayyar — Mon, 02 Feb 2009 19:46:00 GMT

İyi bir renk şeması bulmakta zorlanıyor musunuz? Doğada bulunan binlerce farklı ton, duygu ve ortam, renk şemaları için mükemmel birer ilham aracı olarak gösterilebilir.

Kuru ve ıssız bir renk şeması mı arıyorsunuz? O zaman yaratıcı ve motive edici fotoğrafları deneyin. Resimlere bakmadan önce yanınıza bir şişe su almayı unutmayın, zira bu fotoğraflar dünyamızın en kuru noktalarında çekilmiş fotoğrafları içeriyor.

Flickr üzerinde bu alanda sayısız görsel bulunuyor (örneğin aşağıdaki bağlantılar üzerine tıklayarak ilgili fotoğrafı çeken fotoğrafçının diğer fotoğraflarına göz atabilirsiniz). Renk şemaları ise COLOURlovers üzerinden indirmeye açık.

Kaynak: Build !nternet

Renk Şemaları Hakkında Yazdığım Diğer Yazılar

Tasarımcılar İçin Renk Planlama (Color Scheming)

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