CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.

Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.

Metot 1 - Yüzde Yöntemi ile Ortalama

Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.

<div class="menuKapsulu">
  <ul>
     <li>Elma</li>
     <li>Armut</li>
     <li>Malta Eriği</li>
  </ul>
</div>

Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.

.menuKapsulu{
  float:left;
  width:100%;
  background:#369;
  overflow:hidden;
  position:relative;
}

Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.

.menuKapsulu ul{
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:50%;
  text-align:center;
  background-color:#990000
}

float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğiniiçermez.

.menuKapsulu ul li{
  display:block;
  float:left;
  list-style:none;
  margin:0 10px 0 0;
  padding:10px 0;
  position:relative;
  right:50%;
}

Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.

İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Kolay kullanımı
  • Farklı tarayıcılar için farklı kod yazımı gerektirmemesi

Dezavantajları

  • Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
  • Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.

Metot 2: display:table Metodu

Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.

HTML kodumuz aynı;

<div class="menuKapsulu">
  <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Malta Eriği</li>
  </ul>
</div>

Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.

.menuKapsulu ul{ 
  list-style:none; 
  margin-left: auto;
  margin-right: auto; 
  display: table; 
} 

.menuKapsulu ul li{ 
  float:left;
  margin:0 10px 0 0; 
  padding:10px 0; 
}

Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.

#menuKapsulu ul{
 list-style:none;
 margin-left: auto;
 margin-right: auto;
 display: table;
}

#menuKapsulu ul li{
 float:left;
 margin:0 10px 0 0;
 padding:10px 0;
}

Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
  • Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.

Dezavantajları

  • Farklı tarayıcılar için farklı kod yazımı gerektirmesi

Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.

Kalın sağlıcakla.

Kaynaklar

Daha önceleri pek kullanmadığım sürüm kontrol sistemleri zamanla ihtiyaç haline geliyor. Sahibinden.com’da çalışmaya başladığımda bazı yenilikler ile tanıştım, bunlardan biri de Git ile tanışmam oldu, sağ olsun arkadaşların yardımı ile yavaş yavaş öğrenmeye başladım.

Ben burada kendi öğrenme sürecimde öğrenebildiklerimi sizlerle paylaşmak istedim. Bu konuda daha başlangıç seviyesindeyim. Anlatacaklarım daha çok başlangıç seviyesinde olacak.

Bir projede tek başına çalışıyor iken çalışma süreci boyunca belli aralıklarla çalıştığım dosyaların bir yedeğini alıp arşiv klasörümde saklıyorum. Farklı sürümlerin yedeklerini alıp çalışmak bilgisayarda iş yapan herkesin kazanması gereken bir özelliktir, yoksa çok acı örneklerle öğrenmek zorunda kalırız.

Tek başımıza çalışırken yedekleme ile aşabildiğimiz sürüm kontrolünü birden fazla kişinin çalıştığı projelerde ise bir programcık vasıtası ile yapmak şart halini aldı. Aslında tek kişi çalışılan durumlar içinde sürüm kontrol araçları kullanılabilir.

Birden fazla kişinin çalıştığı durumlarda aynı dosya üzerinde çalışma imkanı sağlar sürüm kontrol araçları. Projenin bir takım çalışması ile ve veri kaybına neden olmadan çalışmasını sağlayan araçlardır sürüm kontrol sistemleri.

Sürüm kontrol sistemi olarak sadece Git yoktur, aşağıda diğer sistemleri sıralanmıştır.

  • Subversion
  • Mercurial
  • Perforce
  • Bazaar

Sadece isimleri verip geçeceğim. Farklı sistemleri karşılaştıran birçok site var. internette küçük bir arama ile Git’in diğerlerine göre avantajlarını görebilirsiniz.

Git’in en büyük farkı merkezi değil, dağıtık olması. Bu şu anlama geliyor tek merkezli bir yapı yerine dağıtık bir yapıya sahip bir sistem kullanılır. Dağıtık sistemlerdeki avantaj sistemi kullanmak için merkezi bir depoya sahip değildir, kullanıcı internetin olmadığı yerlerde sistemi kullanma imkanı sağlıyor. İnternete veya sisteme bağlandığımızda değişiklikler sisteme aktarılır. Bu bize çok büyük esneklik sağlar.

Yukarıdaki grafikte çok iyi bir şekilde göstermektedir.

“…… Merkezi sistemlerde tüm bilgi bir noktada saklanır. İstemciler ağ üzerinden depo üzerinde yaptıkları değişiklikler gönderirler. Bu değişiklikler merkezdeki depoya uygulanır ve depo yeni bir hal alır. Değişikliklerden haberdar olmak için işlemcilerin merkeze uğraması gerekir. Sürümler arasındaki farkları sorgulamak gibi temel bir takım işlemler için hep merkezdeki bilgilere danışılması gerekir.

Dağınık sistemlerde ise bütün üstbilgiler (önceki sürümler v.b.) yerel bilgisayarda saklanır. Bu nedenle bir merkeze ihtiyaç duymadan tüm işlemleri yapabilmeniz mümkündür.

Çalışmalarınızla ilgili tüm üstbilgilerin bir merkezde saklanması, veri yedeklemenin önemini arttırır. Halbuki bunun aksine, dağıtık sistemlerde bir depoyu alan her geliştirici çalışmanın bütün kopyasına sahiptir, dolayısı ile ne kadar geliştirici varsa, o kadar yedekleme yaparsınız. Bu nedenle geliştiriciler birbirlerine de bağımlı değillerdir. …………” (1)

Şirkette Mac kullanılıyor ve git işlemlerini komut sistemi üzerinden yapıyoruz. Terminal üzerinde komutları yazıyoruz. Git kullanımı kolaylaştırmak için bazı programlar var, ancak biz genelde komut satırlarını kullanıyoruz.

Git Komutları

İlk başta sadece master dallanması vardır.

git status: Bulunduğumuz durumu gösteren koddur. Yapılan değişiklikleri, eklemeler ve silinen dosyaları gösterir.

$git status

git branch:Oluşturulan dallanmaları(brach) görmek için

$git branch

git-create-branch: Bu kod sadece bizim şirkete özel bir kod, (kendime notlar) :D Yeni bir dallanma(branch) oluşturmak için. -x kısayolu oluşturulan dalanmanın kategorisini belirler. Bizde en çok kullanılan iki kategori var düzeltme(fix) ve özellik(feature). Düzeltme(fix) için -x ; Özellik(feature) için -e kısa yollarını kullanıyoruz.

$git-create-branch -x dallanma_ismi

git pull:master’dan güncel hali almak için

$git pull

git add:Depoya bir dosya eklemek için

$git add dosya_yolu/dosya_adi

Birden fazla dosya eklemek için arada boşluk bırakarak ekleme yapılabiliyor.

$git add dosya_yolu/dosya_adi dosya_yolu/dosya_adi dosya_yolu/dosya_adi

git commit: Değişiklikleri yaptıktan sonra yorum ekliyoruz. -am kısaltması all ve message baş harflerini ifade eder.

$git commit -am "yorum_yaz"

git push: Yorumu yazdıktan sonra dosyaları gönderiyoruz

$git push

git checkout: Dallanma(Branch) değiştirmek için

$git checkout branch_ismi

ilk defa geçilen bir branch ise

$git checkout origin/feature/branch_ismi --track

git grep: Mevcut branch içinde bir kelime veya ifadeleri bulamak için

$git grep "aranacak_kelime"

komutunu kullanıyoruz.

git merge: Eğer yaptığımız değişiklik ile aynı anda başkasıda bir şeyler yaptı ise çakışma(conflict) oluyor, düzeltmek için birleştirme(merge) işlemini yapıyoruz.

$git merge master

veya

$git merge origin

yapıp değişiklikleri görebiliyoruz. Bu komutu yazdıktan sonra çakışmanın olduğu dosyayı açıyoruz.

# MASTER / ORIGIN

git merge master
git merge origin

# <<<<< HEAD
@MASTER
======================
@REVISION-2
>>>>>>>>>>>>

Şeklinde bir işaretlerle karşılaşırız. Burada hangi alan doğru ise onu bırakıp diğer alanı silerek dosyayı kaydediyoruz ve dosyanın son hali o oluyor.

git push: Lokalde yaptığımız değişiklikleri uzak suncuya göndermek için kullandığımız komuttur. Bu komutu yazdığımızda değişikliklere artık tüm kullanıcılar erişebilir hale gelir.

$git push

git help: son olarak bir komut hakkında yardım almak için

$git help komut_adi

ile komut hakkında bilgi alabiliyoruz.

Sonuç

Başta söylediğim gibi Git konusunda daha yeniyim, öğrenme sürecim devam ediyor. Bana öğrenme sürecimde yardımcı olan arkadaşlarımada teşekkür ediyorum, özellikle Doruk, bu konuda bildiğim bir çok şeyi ondan öğrendim.

Kaynaklar

Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir.

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

Örneği görmek için tıklayınız.

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar