Etiket: jquery

“Freelance” arayüz geliştirmede ücretlendirme

Başlıkta deyimi İngilizce (freelance) kullandım zira çok da iyi bir Türkçe karşılığı olduğuna inanmıyorum bu sözcüğün. Kabaca bağımsız ve geçici anlamlarında olduğunu söyleyebiliriz. Eski Türkçe’deki muvakkat sözcüğünün ise en güzel Türkçe karşılık olduğunu düşünüyorum. Buna rağmen yazının devamında kullanmam gerektikçe İngilizcesini kullanacağım.

10 yılı aşan iş geçmişimde, uzun dönemler yalnızca freelance çalışarak para kazandım. Bir şirkete bağlı olarak çalıştığım dönemlerde de zaman ve şirketin sınırları uygun oldukça freelance işler yaptım, yapıyorum ve yapacağım. İnternette farklı alanlarda para kazanmaya çalışsam da asıl olarak yaptığım iş arayüz geliştirmedir. Yani web tasarımlarının tarayıcılarda (browser) görüntülenebilir ve kullanılabilir olmasını sağlıyorum.

Benden, kendileri için çalışmamı isteyenlerin bazıları “şunun gibi bir siteyi kaça yaparsın”, “bizim bir proje var, kaç paraya yapıyorsun sen” gibi sorular soruyor. Bazen de “sayfası x lira”dan bu işi üstlenen insanların ilanlarını görüyorum. Ancak her işte olduğu gibi, arayüz geliştirmede de bir takım bütçelendirme kriterleri vardır ve olmalıdır da. Aşağıda, benim için önemli olan kriterleri yorumlarımla listeleyeceğim. Hepsinden önce söylemem gereken, tasarımı görmeden hiçbir şekilde bütçe belirliyemiyor olmam. Devamını oku →

Ağustos 08 / 2011
Yazar Simto ALEV
Yorumlar 3 Yorum
Etiketler , , , ,

jQuery veya CSS ile dikey ortalama

Farkettim ki uzun zamandır hiç işe yarar bir şeyler paylaşmıyor, hem kendi dünyamda olup bitenleri yazıyorum. Bunun üzerine yakın zamanda yaşadığım bir sorunun çözümünü paylaşmak istedim. Sorun XHTML/CSS ile bir nesnenin dikey ortalanması.

Biliyorsunuz, css ile bir div’i doğrudan dikey ortalamak mümkün değil. Ancak, çeşitli tekniklerle tabii ki mümkün. Bu konuda daha detaylı bilgi ve yöntemlerden biri Fatih Hayrioğlu’nun CSS ile Dikey Ortalama başlıklı makalesinde mevcut.

CSS ile dikey ortalamak için Tolga Arıcan‘dan öğrendiğim başka bir yöntem ise şöyle;
Dikey ortalanacak divimizi kapsayan, position:relative bir div oluşturmak. Ortalanacak div’imizi ise  position:absolute; yapıyor ve içerik yüksekliği kadar yukarıdan eksi margin veriyoruz. Örnek kodlar şu şekilde:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dikey ortalama</title>
<style>
.tasiyici {width:300px; height:600px; position:relative; background:#e1deee;}
.icerik{ position:absolute; top:50%; left:0; margin-top:-30px; width:200px; text-align:center; background:#fea200;}
</style>
</head>
<body>
  <div class="tasiyici">
    <div class="icerik">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  </div>
</body>
</html>

Bu kod ile gözlemlediğim kadarıyla browser’lar arası bir uyum problemi yaşanmıyor. Fakat bu yöntem de yüksekliği belirsiz alanlarda hiçbir işe yaramayacaktır. Bu noktada imdadımıza bir jQuery fonksyonu koşuyor.

Fonksyonu bir kaç gün önce, ufak bir Google araması ile buldum. Bugün makalesinin linkini almak için Fatih Hayrioğlu’nun bloguna girince bu fonksyona açılan bir linki görmem de sürpriz oldu. Her neyse…

Aşağıdaki jQuery fonksyonu üzerinde bir değişiklik yapmadan JavaScript dosyanıza, çalışma belgenize ya da uygun bulduğunuz bir yere kopyalayın:

(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

Daha sonra dikey ortalanmasını istediğiniz nesne(ler) ile birlikte şu şekilde fonksyonu çağırabilirsiniz.

$('.ortalanacakDiv').vAlign();

Veya çoklu kullanım için

$('.ortalanacakDiv1, .ortalanacakDiv2, .ortalanacakDiv3').vAlign();

Bu fonksyonun yapmaya çalıştığı şey aslında CSS ile yaptıklarımızın bir tekrarı niteliğinde. Ancak fonksyon burada kapsayıcı div ve içerik div’inin yüksekliklerini (biz height değeri vermesek dahi) bularak, margin ve top değerlerini kendi hesaplıyor, bize zahmet vermeden nesnelerin CSS’lerini kendi düzenliyor.

Eğer yapmak istediğiniz şey nesneyi ekrana göre ortalamak ise Volkan Görgülü’nün jQuery ile Dikey Ortalama başlıklı video paylaşımı da oldukça işinize yarayacaktır.

Ocak 05 / 2010
Yazar Simto ALEV
Kategori CSS, JavaScript
Yorumlar 10 Yorum