Yazar Arşivi: Sevil Yılmaz

Sayfanın Altına Yapışık Alan – (Sticky Footer)

Alta Yapışık AlanBir alanın sayfanın dibine yapışık olarak durması için kullanılan en yaygın yöntem “position:fixed” ya da “position:static” kullanmaktır. Yapıştırdığınız alanın yüksekliği az ise bu da bir yöntemdir tabi. Göze de batmaz.

Ama burada şöyle bir durum var. Bunları kullanarak yapıştırdığınız alan sayfa ne kadar uzun olursa olsun her zaman sayfanın dibine yapışık duracaktır. Peki ya bizim daha büyük bir alana ihtiyacımız olursa ne yapacağız? Ya grafik tasarımını ona göre yapıp sanki sayfanın geri kalanının bir parçasıymış gibi göstereceğiz ya da birazdan anlatacağım yöntemi kullanacağız. Bunun gibi daha birçok yöntem var ama benim kullandığım en iyi yöntem aşağıdaki.

Aslında bu yöntemin genel kullanım amacı; sayfa içeriği az olduğu zaman alt alanın (footer) gelip içeriğe yapışmasını yani alt alanlıktan çıkmasını engellemek.

Devamını oku »

Sitenizi Hızlandırın!

Sitemizin tasarımını yaparken ve kodlarını yazarken yaptığımız ya da yapmadığımız bazı şeyler sitemizin açılış hızını büyük ya da küçük oranda etkiler. Sitemizin daha hızlı açılabilmesi için aşağıya birkaç ipucu ekledim. Bazıları sadece birkaç dakikanızı alabilecek bu işlemler sitenizin açılış hızını oldukça fazla etkileyecek. Bana güvenin.

İşte hala yapmadıysanız, yapmanız gerekenler:

Devamını oku »

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 »

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 »