CSS Sprite

İnternet teknolojisini uzaktan yakından takip eden herkes CSS Sprite‘ı duymuştur. Kim düşünmüşse bunu iyi etmiş.

CSS Sprite bize birçok fayda sağlar. Bunlardan birkaçını şöyle sıralayayım.

  1. Öncelikle görsel boyutunu azaltır. Yukarıdaki örnekte olduğu gibi; en sağdaki görselin boyutu 3.66 kB. Eğer tüm görselleri teker teker alsaydık toplam dosya boyutumuz 14.64 kB. olacaktı. Ancak hepsini birleştirip kullandığımızda boyut yaklaşık 9.5 kB.a kadar düşüyor.
  2. Dört yerine sadece bir tane görsel kullandığımız için HTTP isteği de dörtten bire düşüyor. Daha az istek olduğu için sitemiz daha hızlı açılıyor. Ne güzel değil mi!
  3. Diyelim sadece görsellerin normal hallerini koydunuz, “hover“larını koymadınız. Böyle bir durumda sayfanın ilk açılışında sadece normal halleri yüklenir haliyle. Fareyi görselin üzerine getirdiğinizde bu sefer “hover” hali çağırılır. Ama bu hali siteye önceden yüklenmediği için bu sefer de bunu yükler. Bu da belli bir zaman kaybına neden olur.

Diyeceksiniz, “sadece 5 kB. nedir ki!” Demeyin! Şöyle düşünün: Sitenize bir kişi girdiğinde server’a 5 kB. daha fazla yüklenecek. Sitenizin günlük ziyaretçi sayısına ortalama 100 desek; günde 500 kB. eder. Bunu aya çarparsanız 4.5 mB. eder ve bu sadece 5kB.lık bir fazlalıktan oluşan aylık değer. Bunun birden fazla olduğunu düşünürseniz, bunun size fazladan server masrafı olarak döneceğini tahmin edebilirsiniz.

Devamını oku »

Birkaç Aşamada Türkçe Karakter Sorununa Çözüm

Bu damar meselenin ağlatmadığı, sızlatmadığı yoktur. Uyutmadığı da pek çoktur. Varsa da kendime ağlıyor ve de helal deyip konuya giriyorum.

Türkçe karakter meselesi PHP ve MySQL tabanlı işlerde başlı başına bir ya da iki yöntemle her zaman malesef aşılamıyor. Bir kaç yerde bazı bazı ufak dokunuşlar yapmak gerekebiliyor. Basit ve anlaşılır yöntem olan adım adım (sekerekten) yöntemiyle başlayalım.

1- Tarayıcı bazlı karakter set tanımı

Browser’lar web projemiz üstündeki <meta> tagındaki anahtarlardan biri olan charset‘te tanımlı olan charset encoding’i dikkate alır. Eğer buraya bir değer atanmaz ise tarayıcının varsayılan olan character set encoding ayarını baz alarak işlem görecektir.

Tam bu esnada “peki charset anahtarına hangi değeri vermeliyizdir? ” sorusu gelmektedir. Bunlardan sadece biri temsili olan iki örnek veriyorum;

  • ISO-8859-9 v.b
  • UTF-8

Burada ISO-8859-9 karakter seti lokal bir settir. Yani bu tanımı yaparak içeriğimizde sadece Türkçe karakterin olacağını keskin bir ifadeyle bildirmiş oluyoruz.

Devamını oku »

CSS İle Ok Çizmek

Her resim sunucuya bir HTTP isteği gönderir. Ve bu istekleri sitemizin açılış süresini etkiler. Yani ne kadar az HTTP isteği olursa sitemiz o kadar hızlı açılır. Bu konuda işimize yarayabilecek ufak bir uygulamayla başlamak istiyorum. CSS ile konuşma baloncuğu oku çizmek.

div.arrowBox {
  width:500px;
  height:200px;
  background-color:#eee;
  margin:50px auto;
  position:relative;
}

div.arrowBox span {
  position:absolute;
  bottom:-30px;
  left:10px;
  border-top:30px solid #eee;
  border-left:10px solid #fff;
  border-right:30px solid #fff;
  }

p {
  padding:20px;
  color:#09F;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:12px;
}

Ben kodlamayı yaparken İngilizce isimler kullanmaya özen gösteriyorum. Çünkü kendimi Türkçe isimlere alıştırırsam bu sefer el alışkanlığıyla Türkçe karakter kullanabilirim. Böyle iyi.
Devamını oku »