Tasarladığınız sitelerde kullanmak üzere ikonlar bulmak genelde zor bir iştir. Renk uyumu, şekillerin uyumu, boyutlar gibi birçok etken devreye girer ve uygun bir ikon bulmanızı zorlaştırır. Bu dertten kurtulmamız için açılan IconPot sitesi yaklaşık 3 bin tane ikonu tasarımcıların beğenisine sunuyor. Tamamen ücretsiz olan bu ikonları ayrıca ticari amaçlarla da kullanmanız mümkün. Telif hakkı talep edilmemekte.

Javascript ile yapılan birçok örneği zaman zaman bloglarda görmekteyiz. genelde yeni keşfedilen ve yapılan javascript uygulamaları büyük boyutlu ve bandwidth canavarı oluyor. Daha sonra kodlar çeşitli kullanıcılar tarafından yeniden düzeltilerek minimum boyuta indiriliyor. Daha önce yazılarımda örnek verdiğim Michael Leigeber de bu minimalize etme işinden hoşlanıyor olacak ki “1KB’lık akordiyon menü“,”1KB’lik kayan menü” ve “2KB’lik tooltip” gibi popüler uygulamaları minimalize etmiş.

Leigeber‘in son projesi ise birçok sitede rastladığımız slideshow uygulaması olmuş. 5KB’lık çok hoş bir slideshow kodu hazırlayan leigeber’in örneğine buradan ulaşabilirsiniz.

sIFR, sayfalarımızda göze hitap etme fonksiyonunun yanında Arama motorları tarafından indekslenebilme özelliği ile bir anda tasarım dünyasının göz bebeği konumuna geldi. 1-2 dezavantajı bulunmasına rağmen hala çok etkili bir rakip üretilemedi ve flir, typeface.js gibi rakipleri karşısında üstünlüğü elinde tutuyor. Bu kadar yararlı bir araçtan maksimum performans olmak isteyenler için Jonathan Neal tarafından bir jQuery eklentisi geliştirilmiş. bu eklenti sayesinde jQuery fonksiyonlarını sIFR tekniği ile birlikte kullanarak maksimum verim elde edilebilmesi sağlanmış.

İstenilen yere sIFR uygulatma ve sIFR’li yazıyı silme, zoom yapma, yazı renginde kod değiştirmeksizin oynamalar yapma ve sayamayacağım birçok özellik bu eklenti ile birlikte jQuery kullanıcılarının hizmetine sunulmuş.

Demosunu incelemek ve denemek istiyorsanız jQuery Sifr Plugin sayfasına alalım sizi.

Zaman zaman bildirgeç‘te paylaşımlarda bulunuyorum. Geçtiğimiz gün sIFR ile bir sitenin yazıtiplerini düzenlerken yeni bir program ile karşılaştım. Bu program Adobe Flash’a ihtiyaç duymadan 3 tık ile sIFR’in swf dosyasını oluşturabilmeyi sağlıyordu. İşte bu yüzden CoffeeCup’ın geliştirdiği sIFR Font Maker programını bildirgeçe yazarak web tasarımcıların işini kolaylaştıracak bir yazılım ile tanıştırdım. Bu programa alternatif olarak online bir uygulama olan sifrgenerator.com‘u da tasarımcılara öneririm.

Bildirgeç’teki sIFR Font Maker yazım
Bildirgeç’teki köşem

Not: Birkaç gün içinde sIFR ve alternatifi olan FLIR ve typeface teknikleri hakkında bir makale yayınlayacağım. Bu konuya ilgili olanlar benim örneklerime de bakabilirler.

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama makalem ile OOS’ye başlamıştım. İlk olmazsa olmazımız otomatik tamamalama özelliğine sahip bir arama kutucuğu geliyordu. Serimizin ikinci gerekli malzemesi ise bir çok yerde belki de duyup ne olduğunu çözemediğiniz “Reset CSS”!

Reset CSS Nedir?
Bir CSS tekniği diyebileceğimiz CSS Reset ile IE, Mozilla, Safari vb. tarayıcılarda öntanımlı olarak gelen bazı padding, margin, h1, h2, h3 tarzı verileri sıfırlayarak yazacağımız css kodunun her tarayıcıda aynı şekilde görünmesini sağlar. Bu kod bütününü CSS dosyanızın başına koyarak sitenize eklerse

Başlıyoruz…İlk adım Margin ve Padding’leri sıfırlamak

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

Elemanlara Hükmedelim

body
{
line-height: 1;
font-size: 88%;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

Birkaç özel gerekli float bilgisi koyalım

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

İşte bu kadar basit. Floatları ayarlarken uygun float sınıflarını kullanırsanız sayfanızda bir standart olur.
Dİpnot: Makalede Nettuts’un Create Your own Simple Reset CSS yazısından derleme yaptım. Kodlar da buradan alınmıştır.

Kaynak Kod

İngilizcesi Autocompletion olan “Otomatik Tamamlama” sistemi, iki ya da 3 harfi input‘a grdikten sonra en yakın sonuçları bize anında gösteren ve en uygununu seçmemizi sağlayan bir sistemdir. Javascript sayesinde yeni bir sayfa yüklemeden yapabileceğimiz bu fonksiyon facebook‘un arkadaş profilini arama kutusunda kullanılır.

Otomatik Tamamlama sistemi, site içi arama fonksiyonunun sıkça kullanıldığı sitelerde bulunmalıdır. Örneğin bir alışveriş siteniz var ya da kelephir.net gibi günlük ürünleri indeksleyen bir siteye sahipseniz daha önceki ürünlerin bulunabilmesi için otomatik tamamlama sistemini kullanabilirsiniz.

Devthought sitesinde hem otomatik tamamlama hem de facebook tarzı birçok ismin aynı anda eklenebildiği input , kullanılabildiği alanların fazlalığı ve işlevselliği bakımından Olmazsa Olmazlar Serimin 1 numarasında bulunuyor.

Kaynak Kod || Demo

Sayfalarımızı tasarlarken aslında birçok öğe tasarladığımızın farkında değiliz. Örneğin bir arama kutusu, twitter bloğu, 404 hata sayfaları… Her bir elementi tasarlarken zaman zaman ilham alır ve internetteki popüler öğeleri tasarımlarımızda kullanırız. İşte Pattern Tap ve Elements of Design siteleri, internetteki güzel ve ilham alınacak sitelerin menülerini, 404 hata sayfalarını, yorum sayfalarını kısacası her bir öğesini parçalayarak sitelerinde kategorilere ayırarak sunmuşlar. Elements of Design ve Pattern Tap sitelerinde tüm bu elementleri görerek tasarımlarınız için esinlenebilirsiniz.

Daha önce ben de CSS Sprite’ların kullanılışı hakkında “Sprite’lar nedir? Nasıl kullanılır?“adında bir makale yazmıştım. Bugün çeşitli RSS yayınlarını okurken CSSgirl sitesinde yazılmış olan CSS Sprite makalesi gözüme çarptı ve ne kadar ayrıntılı işlediklerini görünce sizle paylaşmak istedim. Sprite tekniği ile rollover bir menünün nasıl yapıldığını en ince detayına kadar anlatmışlar.

Buradan okuyabilirsiniz.

Birçok kez sıklıkla takip ettiğimi söylediğim woork‘de yayınlanan yeni yazı tüm tasarımcıların elinde bulunması gereken bir kaynak yazı olmuş. 25 farklı mükemmel rehberi bir araya toplayan Antonio Lupetti’nin yazısına buradan ulaşabilmek mümkün.

Son zamanlarda çoğu sitede devamlı tekrar eden arkaplan resimleri görüyorum. Bazıları sadece 45 derece açıyla inen çizgilerden ibaretken, bir kısım arkaplan var ki bence çok hoş görünüyor. Stripe kullanmak yerine background pattern’leri kullanmak tasarıma dolgunluk hissi katıyor. Yapımı daha zor olan background pattern’lerin kolayca yapılması için de bir web uygulaması devreye girmiş. Bgpattern sitesi sayesinde bu tarz grafikleri yapmak artık çocuk oyuncağı. Grafiğinizi seçip, renk verebiliyor, istediğiniz açıda döndürebiliyor ve ne sıklıkla tekrar edeceğini belirleyebiliyorsunuz.