Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz.

pointer-event özelliği belirlenen elemanın farenin işlevine vereceği tepkiyi belirler. Bu tepki aşağıdaki çerçevededir.

• Kullanıcı arayüzü olayları (örneğin fare tıklaması)
• Dinamik Sahte Sınıflar (örneğin :hover, :focus)
• Hiperlinkler

pointer event özelliği aslında SVG içerikleri için uygulanan bir özelliktir.

Aldığı değerler bakalım;

auto: pointer-events özelliğine herhangi bir tanım yapılmadı ise fare tıklamasına müdahale etmez. SVG içeriklerde, bu değer visiblePainted ile aynı etkiyi yapar.

none: Element fare olaylarını uygulamayacaktır.

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke ve all: Sadece SVG içindir.

Bir örnek ile durumu daha iyi görelim.

• <ul class="menu">
• <li><a href="index.html">Ana Sayfa</a></li>
• <li><a href="hakkimizda.html" class=”on”>Hakkımızda</a></li>
• <li><a href="urunler.html">Ürünler</a></li>
• </ul>

Hakkımızda sayfasında olduğumuzda kullanıcının hakkımızda linkine tıklaması mantıklı değildir, hakkımızda bağlantısının fare tıklama olayını kaldırmak için

• .menu a.on {
•       pointer-events: none;
•       cursor: default;
• }

Tanımı istediğimiz sonucu verecektir.

CSS3 ile dinamik bileşenlerin CSS ile halledilmesi işine alıştık. Bu tip CSS ile halledebilmemiz güzel.

Kaynaklar

• https://developer.mozilla.org/en/CSS/pointer-events
• http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
• http://robertnyman.com/css3/pointer-events/pointer-events.html
• http://css-tricks.com/6379-pointer-events-current-nav/
• http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
• http://www.webkit.org/specs/PointerEventsProperty.html

Sayfa yerleşimini yaparken genelde float/clear veya position özelliklerini kullanarak yapıyorduz. Tabloya göre büyük avantajlar sağlayan bu yöntemlerden sonra web sayfası kodlamak daha kolay ve zevkli bir hal aldı. Detay için Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu yazısını inceleyin.

Tabi CSS ile sayfa yerleşimi kodlamanın birçok avantajı var. Bunun yanında bazı karışık sayfa yerleşimlerinde ise bizi zorladığı bir gerçek. Özellikle esnek yapılı sayfa düzenleri ve dikey eksendeki yerleşimlerdeki sorunlarını gören W3C bize bu konuda yardımcı olacak yöntemleri üretmeye başladı. Bunlardan bir tanesi Esnek Kutu Yerleşimi Modülüdür(EKYM).

Esnek Kutu Yerleşimi Modülü kapsayıcı bir eleman içindeki alt elemanların yerleşimini sağlamaktadır. Daha önce dikeyde yaşadığımız birçok sorunu(dikeyde ortalama ve aksak kolon sorunları gibi) gidermemizi sağlıyor. Esnek Kutu Yerleşimi Modülünü bu makalemizde inceleyeceğiz.

Kapsayıcı elemana tanımlanan display:box özelliği yardımı ile alt elemanlara tanımlanan box(box-orient, box-direction, box-pack, box-align, box-lines, box-ordinal-group, box-flex ve box-flex-group) özellikleri ile sayfa yerleşimimizi çok kolay şekilde yapmamıza olanak sağlamaktadır.

CSS3 EKYM olarak kısaltacağımız bu özellik bize olanaklarını display:box tanımı içerisinde gelen yeni tanımlar ile getirmektedir. Bu yeni 8 tanım aşağıdaki gibidir;

• box-orient
• box-direction
• box-pack
• box-align
• box-lines
• box-ordinal-group
• box-flex
• box-flex-group

EKYM ilk olarak 2009 yılında standardı oluşturuldu, ancak daha sonra yeniden ele alındı ve şu an sonlandırılmak üzeredir. Biz 2009 yılındaki standartlaşan özellikleri tanımlayacağız, çünkü tarayıcılar 2009 yılındaki standartları desteklemektedir ve yeni standartlaşan özelliğinde mantık olarak çok büyük farklılığı yok.

display:box

İlk olarak kapsayıcı esnek kutuları çevreleyen eleman display:box tanımı yaparak başlıyoruz. Farklı tarayıcılar önek ile birlikte desteklemektedir;

#esnekKutu{
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

Tanımı ile kapsayıcı elemanı tanımlıyoruz. Bu tanım ile kapsayıcı eleman içersindeki alt elemanların artık esnek yapılı olacağını ve EKYM özellikleri alabileceğini belirliyoruz.

Çok basit bir şekilde kutularımızı yanyana dizebiliriz mesela

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 display:-ms-box;
 width:600px;
 border:1px solid #03C;
}

Kapsayıcı tanımlanan display:box tanımı ile içindeki elemanlar birer inline-block eleman gibi davranır ve yanyana sıralanır.

box-orient

box-orient özelliği ile esnek kapsayıcı eleman içindeki kutuların hangi eksende sıralanacağını belirleriz. Yukarıdaki örnekte gördüğümüz gibi eğer bir tanım yapılmadı ise ve kapsayıcı eleman genişliği müsait ise kutular yatayda yanyana sıralanır.

Biz bu durumu değiştirmek için box-orient özelliğini kullanırız. 3 adet değer alır.

• horizontal: Kutular yatay eksende soldan sağa doğru sıralanır.
• vertical: Kutular dikey eksende yukarıdan aşağıya doğru sıralanır.
• inherit: Üst elemanın değerini alır.

Bunlardan başka iki değer daha mevcuttur. inline-axis yatayda ve block-axis dikeyde sıralamayı sağlar. Bu tanımlar horizontal ve vertical gibi davranırlar.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

box-orient:vertical ile esnek kutularımızı dikeyde sıraladık.

box-direction

box-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. İki değer alır; normal ve reverse. reverse tanımlandığında sıralama yönü normalin tam tersine döner.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 box-direction: reverse;
 -moz-box-direction: reverse;
 -webkit-box-direction: reverse;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

Yukarıdaki örnekte sıralama yukarıdan aşağı Esnek Kutu1, Esnek Kutu2 ve Esnek Kutu3 iken box-direction: reverse; tanımı ile sıralama Esnek Kutu3, Esnek Kutu2 ve Esnek Kutu1 şeklini almıştır.

Not: box-orient ve box-direction yerine ikisini kapsayan flex-direction üzerinde çalışılmaktadır.

flex-direction lr, rl, tb, bt, inline, inline-reverse, block ve block-reverse değerlerini alabilecek. sol(left – l), sağ(right – r), üst(top – t) ve alt(bottom – b) kısaltmaları kullanılmıştır. CSS3’ün birçok özelliği üzerinde halen çalışılan canlı bir yapıdır. Değişikliklerin olabileceği dikkate alınmalıdır.

box-pack

Yapısı : box-pack: <deger>
Aldığı Değerler : start | end | center | justify
Başlangıç değeri: start
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

box-pack özelliği kapsayıcı kutunun içindeki esnek kutuların kapsayıcıya göre konumunu belirlemek için kullanılır. Dört adet değer alır başlangıç(start), son(end), ortalı(center) ve iki yana yasla(justify)

Alt elemanların genişliğinin kapsayıcı elemandan küçük olduğu durumlarda kalan boşluk alanına göre değerlendirme yapılır.

Bu özellik tanımı 2009’da tanımlandı şu an yenileniyor flex-pack olarak değişecek. Tarayıcılar destekleyen kadar bu şekilde devam edecek.

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-pack:center;
     -webkit-box-pack:center;
     -moz-box-pack:center;
    }

box-align

Kapsayıcı elemana atanan box-orient değerine göre kalan boşluğa göre hizalama yapmak için kullanılır.

Beş adet değer alır. stretch | start | end | center | baseline Başlangıç değeri stretch’dir; bunun anlamı box-orient değeri horizontal ise stretch uygulanan elemanın alt elemanlarının yükseklikleri yayılacaktır, eğer box-orient değeri veritcal ise genişlikleri yayılacaktır. start ve end değerleri eğer horizantal tanımlı ise sol ve sağa yaslayacaktır, vertical tanımlı ise üste ve alta yaslayacaktır. center değeri ise ortalayacaktır.

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-orient:horizantal;
     -moz-box-orient:horizantal;
     -webkit-box-orient:horizantal;
     box-align: center;
     -webkit-box-align: center;
     -moz-box-align: center;
    }
    .esnekKutu{
     background-color:#999999;
     width:150px;
     height:150px;
     margin-right:15px;
    }

box-lines

Esnek Kutu Yerleşimi ile yerleştirilen kutular genelde bir eksen üzerinde blok halinde hareket eder, blox-line özellik bu elemanların alt satıra geçip geçmemesini ayarlar. İki değer alır.

• single: Başlangıç değerdir. Bu değeri alan kutular kapsayıcı eleman üzerine taşma yapacaktır. Taşma durumunu kontrol etmek için overflow özelliği kullanılabilir.
• multiple: Bu değer alan kutular tek satırda kendini sınırlamayacaklardır ve ikinci satıra inecektir.

Şu anki tarayıcılar bu özelliği henüz desteklemiyor. İE10 desteklediğine dair duyumlar var.

Yenilenen EKYM standartlarında box-line özelliği görünmüyor. Onun yerine benzer etki yapacak flex-flow tanımı gelecek gibi.

box-ordinal-group

box-ordinal-group özelliği kapsayıcı kutunun içindeki esnek kutuların sıralamasını belirlememizi sağlar.

#esnekKutu1 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#0CF;
}
#esnekKutu3 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#9C3;
}
#esnekKutu4 {
    box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    background-color:#FC9;
}

Dört adet kutumuz var. Bunların üç tanesine box-ordinal-group değeri tanımladık.

EsnekKutu1 ve EsnekKutu3 için 2 değeri tanımladık bunlar ikinci sırada gelecek. EsnekKutu4’e 1 değer tanımladık, buda ilk sırada gelecek. EsnekKutu2 için bir tanım yapmadık buda başlangıç değeri olan 1 değerini almasına neden olacaktır. Buna göre sıralama 2,4,1,3 şeklinde olacaktır.

Bu özellik bize sıralama konusunda tam bir kontrol sağlamaktadır.

Yeni EKYM standardında box-ordinal-group yerine flex-order özellik ismi kullanılması düşünülmektedir.

box-flex

blox-flex özelliği tanımlanması durumunda alt elemanların esnek davranmasını sağlar. Tanım yapılmadığında ise alt elemanlar esnek olmaz.

Hesaplamanın mantığı şöyledir;

Gruptaki tüm esnek kutuların box-flex değeri toplanır ve her kutu için toplam boşluk genişliği(Kapasayıcı eleman ile kutuların genişliği toplamı arasındaki fark) bu sayıya bölünerek elde edilen değer kutu genişliğini belirler.

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:100%;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
}
#esnekKutu1 {
    background-color:#0CF;
    border: orange solid 1px;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    border: red solid 1px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    border: red solid 1px;
    box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-box-flex: 0;
}
#esnekKutu4 {
    background-color:#FC9;
    border: red solid 1px;
}

Daha sabit bir örnek verelim; genişliği 600px olan kapsayıcı eleman ve  üç adet 100px’lik kutumuz olsun(Bu durumdan boşluk değeri 300px olacaktır), bunların box-flex değerleri 1 olsun, her bir kutunun genişliği 200px(100 + 300/3 * 1 = 200) olacaktır. Eğer bu kutulardan bir tanesinin box-flex değeri 2 olarak değiştirilirse, değiştirilen kutunun genişliği 250px(100 + 300/4 * 2 = 250) olurken diğer iki kutunun genişliği 175px(100 + 300/4 * 1 = 175) olacaktır.

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:600px;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
     width:100px;
}
#esnekKutu1 {
    background-color:#0CF;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}

Eğer kutu genişlikleri toplamı kapsayıcı kutunun genişliğinden büyük ise genişlik hesaplamasında benzer birim hesabına göre küçülme olacaktır. 0 değeri kutunun esnek olmayacağı anlamına gelir.

Raphael Goetter’ın yaptığı örnek bu işin geleceği hakkında bize güzel bir ipucu veriyor. Fantastik örnekler.(Chrome da daha iyi gözüküyor)

box-flex özelliği 2009 yılındaki standartlardaki hali idi, yenilenen standartlarda box-flex vede box-flex-group özelliklerini kapsayan flex() fonksiyonu ile yenilenmektedir.

Sonuç

Gerek CSS3 ve gerekse EKYM yeni özellikler ve hala gelişmektede olan mecralar. Benim burada anlatmak istediğim CSS3’ün en büyük yeniliklerinden biri olan sayfa planlamaya yönelim yeniliklerine bir göz atmak, mantığını kavramak, geleceğe dair fikir edinmeyi sağlamaktır. Ben burada sadece EKYM anlattım, ancak CSS3 ile sayfa planlamaya yönelik başka modüllerde geliştirilmekte; Çoklu Kolonlar(Multiple Column), Izgara Yerleşim Modeli(Grid Layout), Şablon Yerleşim Modeli(Template Layout Model), CSS Exclusions Module, CSS regions Module

CSS3 ile sayfa yerleşimi daha kolay olacağı kesin, bu konuda bir çok modül üzerinde çalışma bitmek üzere veya bitmiş bulunmakta. Gelecekte daha güzel şeyler olacağı kesin.

Yukarıda özelliklerin nasıl kullanıldığını göstermek için daha basit örneklerler verdik, daha karmaşık örneklerde yapılabilir http://oli.jp/2011/css3-flexbox/ sitesindeki örnekler incelenebilir.  

Kalın sağlıcakla

Kaynaklar

• http://www.html5rocks.com/en/tutorials/flexbox/quick/ (güzel)
• http://www.css3.info/introducing-the-flexible-box-layout-module/
• http://www.w3.org/TR/css3-flexbox/
• http://dev.w3.org/csswg/css3-flexbox/
• http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/
• http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/
• http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
• http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/
• http://ie.microsoft.com/testdrive/html5/flexin/default.html
• http://htmlrockstars.com/blog/the-flexible-box-layout-module-css3/
• http://blog.w3conversions.com/2011/02/css3-flexible-box-model-layout-coolness-also-oddities-confusion/
• http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
• http://adactio.com/journal/4778/
• http://www.vanseodesign.com/css/flexbox/ (güzel)
• http://oli.jp/2011/css3-flexbox/ (karmaşık yerleşim uygulamalı)
• http://blog.isotoma.com/2010/08/css3-flexbox/
• http://www.w3schools.com/css3/css3_reference.asp#box
• http://portfo.li/madebyted/477862-css3-flexible-box-layout-module-aka-flex-box-introduction-and-demos-test-cases
• http://ontwik.com/css/css-3-the-flexible-box-model/ (video)
• http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSFlexBox (güzel)
• http://caniuse.com/flexbox (tarayıcı desteği)
• http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

Terminal giriş görünümü yukarıdaki gibidir. (Renklere takılmayın bu benim seçimim)

ls (list files)

Çalıştığımız klasörün içeriğini göstermek için kullanılır. Windows’taki dir ile aynı anlamdadır.

Sonuç aşağıdaki gibi olacaktır

  ls
  aFolder    another.txt    bilgilendirme.txt   deneme.html

cd (Change Directory)

Bu komut ile dosyalar arası geçiş için kullanırız. Mesela image klasörüne geçmek için

  cd images

Tek seviyede değil birden fazla seviyede geçişte yapabiliriz.

  cd images/icons/ust

Bir alt klasöre inmek için

  cd ..

Kök dizinine(root) inmek için ise

  cd

yazmak yeterlidir. Ufak bir ipucu klasör isimlerinin uzun olması durumunda akılda tutmak zor oluyor. Klasör veya dosya isminin başında bir kaç karakter yazdıktan sonra tab tuşuna basarak gerisini tamamlayabilirsiniz.

mkdir (Make Directory)

Yeni klasör oluşturmak için kullanıyoruz. Mac ve Windows’ta kullanımı aynıdır.

  mkdir yeniKlasor

rm (remove)

Dosya ve klasörleri silmek için kullanılır. Silme işlemlerinde her zaman dikkatli olmak lazım.

  rm deneme.html
  rm images_klasoru

cp (copy) ve mv (move)

Çok basit bir kullanımı vardır. İlk parametre kopyalanacak dosyayı ikinci parametre ise hedefi gösterir.

  cp deneme.html ~/dosya/deneme.html

Eğer taşımak istiyorsanız, aynı şekilde kullanabiliriz.

  mv deneme.html /dosya/deneme.html

mv komutu dosya ismini değiştirmek içinde kullanılabilir.

  mv deneme.html /dosya/test.html

deneme.html dosyası ismi test.html olarak değiştirilip taşınmıştır.

clear

Terminal ekranını temizlemek için kullanılır.

Dosya Açmak

Komut satırlarından harici programlarda da açabiliyoruz veya kendi içinde açabiliyoruz.

Mesela MacOs için ilgili klasörde iken

  nano deneme.html

komutu deneme.html dosyamızı nano editöründe açmamızı sağlayacaktır.

exit

Eğer uzak dosya yönetimi ile çalışıyorsanız. Kurduğunuz bağlantıyı sonlandırır.  exit komutu ile Terminalide kapatmak mümkün. Terminal – Preferences.. – Settings – Shell oradanda “Close the Window” işaretleyerek exit komutu ile hem bağlantıyı hemde pencereyi kapatabiliriz.

Benim ihtiyaç duyduğum komutlar bunlar tüm liste için http://ss64.com/osx/ sitesineden yardım alabilirsiniz.

Git Kullanırken Öğrendiğim İpuçları

Yukarıda genel komutları anlattım, aşağıda ise kullandıkça gördüğüm komutları ve ipuçlarını paylaşacağım.

İki dosya arasındaki farkı görmek

Bir branchdeki veya bir dosya üzerindeki değişiklikleri görmek için branchde iken

  $git log

yazarız bu komut bize

commit f491239170cb1463c7c3cd970862d6de636ba787
Author: Matt McCutchen <matt@mattmccutchen.net>
Date:   Thu Aug 14 13:37:41 2008 -0400

git format-patch documentation: clarify what --cover-letter does

commit 7950659dc9ef7f2b50b18010622299c508bfdfc3
Author: Eric Raible <raible@gmail.com>
Date:   Thu Aug 14 10:12:54 2008 -0700

bash completion: 'git apply' should use 'fix' not 'strip'
Bring completion up to date with the man page.

gibi bir sonuç döndürür. O dosya veya o branch üzerinde yapılan tüm değişiklikler hakkında bilgileri içeren bir listedir bu. Bu listede commit … ile başlayan satırda verilen numara yapılan ve gönderilen her iş için farklıdır biz bu sözdizimini kullanarak iki farklı gönderi arasındaki farkı bulabiliriz.

  $git diff f491239170cb1463c7c3cd970862d6de636ba787 7950659dc9ef7f2b50b18010622299c508bfdfc3  Html/index.html

İki farklı branchdeki HTML/index.html dosyasındaki farklılıkları gösterir yukarıdaki kod. Farkları renkli görmek için –color parametresini kullanabiliriz.

  $git diff --color  d76192b2c7a61d2aea62c7aec21e14cda72f9e32 fe0dba7b841e86b095d2aefbd6bd755a0d9d1e90  Html/index.html

Eklenenleri yeşil, çıkarılanları kırmızı renkte gösterecektir. Ayrımı görmek için renkler güzel oluyor.

Dallanma (Brach) Silmek

git branch -d: Yanlışlıkla açtığımız branchlerı silmek için

  $git branch -d branch_ismi

Kısayol kullanmak

Git kullanırken aynı kodları tekrar tekrar çok kullanıyoruz. Bu komutları kısaltarak daha hızlı kod yazabilme imkanı sağlıyor bize komut sistemi.

git config dosyasına kısayolllarımızı ekleyebiliyoruz. git cofig ile ilgili ayrıntılı bilgiyi http://tybarts.wordpress.com/2011/05/07/git-global-config-dosyasini-ayarlamak/ bağlantısından edinebilirsiniz.

Global congif dosyasına eklemek için

  $git config --global alias.ci commit

ci kısaltma commit normali. Eğer projeye özgü kısayollar oluşturmak için

  $git config alias.ci commit

–global parametresini kaldırmamız yeterli olacaktır. git config dosyasını görmek için

  $git config --edit

yazmamız yeterli burada eklediğimiz kısayolları görebiliriz. Benim listem aşağıdaki gibi.

[alias]
st = status
br = branch
co = checkout
ci = commit

Siz bu listeyi kendinize göre düzenleyebilirsiniz.

Git için kaynaklar

http://sixrevisions.com/resources/git-tutorials-beginners/ bu bağlantıda Git kaynakları listelenmiş. Git’in güzel yanlarında birisi öğrenmek için kaynağın bol olması.

Başka Branch’den dosya almak

  $git checkout branch_adi dosya_adi

Benzer bir şekilde branchde yaptığımız değişikliği geri almak için master’dan dosyayı alabiliriz.

  git checkout master dosya_adi

Değişen dosya isimleri

Çalıştığımız branchde değişiklik yaptığımız dosyaları görmek için

  $git diff master --name-only

kodunu kullanıyoruz.

Bana üşenmeyip bunları ve aklımda kalmayan bir çok bilgiyi öğreten Onur Yerlikaya’ya şükranlarımı sunarım. Gitmeyeydin Git daha kolay olacaadı. :D

Kalın sağlıcakla

Kaynaklar

• http://tybarts.wordpress.com/2011/05/07/git-global-config-dosyasini-ayarlamak/
• https://git.wiki.kernel.org/index.php/Aliases
• http://sixrevisions.com/resources/git-tutorials-beginners/
• http://ss64.com/osx/

Firefox6 çıktı. Mozilla’da artık hızlı tarayıcı sürümleri çıkarmaya başladı. Her neyse ki otomatik güncelleme özelliği sayesinde kullanıcılar hızla yeni sürüme geçiyor. Otomatik güncelleme kullanıcının Firefox Hakkında penceresini açması ile çalışıyormuş. İlginç bir yöntem.

Firefox 5 çıkalı yaklaşık 2 ay olmuştu ve 16 Ağustos’ta Firefox 6 çıktı tabi bu kadar hızlı sürüm çıkınca yeni sürüm ile birlikte hata düzeltmeleri ve bir kaç özellik ile yetinmemiz gerekiyor. Yeni sürümün Firefox’daki en büyük sorunu eklentilerin uyumsuz olması, eklentiler daha yeni Firefox5’e uyum sağlamışken şimdi Firefox6 ile bu sorunu tekrar yaşacayacağız.

Hız konusunda Google Chrome’a yetişmeye çalışan Firefox bu yeni sürümde hızlanmanın bir önceki sürüme göre %20 olduğunu söylüyor. Linux kullanıcıları için daha kararlı ve hızlı bir sürüm olduğu söyleniyor.

Adres barda web sitesinin isim kısmını ön plana çıkaran bir değişiklik yapılmış. Bu özellik bir çok yeni nesil tarayıcıda vardı zaten. Hatta İnternet Explorer’da bile vardır :

Detaylı yetkilendirme özelliği ile artık site bazlı yetkilendirme imkanı sunuyor bize Firefox6. İzin Yöneticisi penceresini adres bara about:permissions yazarak açabiliyoruz. Bu pencereden web sitelerinin tek tek çerezlerin, parolaların, popup pencerelerini, çevirim dışı depolamayı ve konum bilgilerini kullanmasına dair izinleri ayarlayabiliyoruz.

JavaScript Karalama Defteri(Scratchpad): FireBug’ın konsolune benzer bir işleve sahip bu uygulama herhangi bir eklenti kurmadan tarayıcının kendi özelliği olarak geliyor. Bu araç ile javascript kodlarımızı çalıştırabiliyoruz.

Daha fazla HTML5, CSS3 ve DOM özelliği desteği geldi.

• WebSocket son hali desteği geldi. Websocket özelliği sunucu ile tarayıcı arasında bir bağlantı kurulmasını sağlıyor, bu sayede biz mesajlaşma servisi, çok kullanıcılı oyunlar vb çok güzel uygulamalar yapma imkanı sağlıyor. Aslında ajax teknolojisinin standartlaştırılmış hali gibi geldi bana.
• HTML5 <progress> etiketi destekleniyor. ::-moz-progress-bar özelliği ile stilini ayarlayabiliyoruz.
• Yeni -moz-orient özelliği örneğin progress barın dikey mi yataymı olacağını ayarlayabiliyoruz.

• HTML5 ses ve video elementlerinde metinleri izleyebilmemizi sağlayan <track> elementini destekliyor.
• CSS3 border-radius özelliği artık iframelerde uygulanabiliyor.
• Özel veri özelliklerine(data-*) DOM’un element.dataset özelliği erişebilme imkanı sağlıyor.
• -moz-text-decoration-color Bu yeni özellik text decorations’a renk veriyor, örneğin underlines, overlines ve strikethroughs olarka tnaımlanan çizgilere.
• -moz-text-decoration-line Bu özellik bir elemena atanacak text decorations çeşidini belirliyor.
• -moz-text-decoration-style Bu özellik text decorations stilini belirlememizi sağlıyor, örnek underlines, overlines, and strikethroughs, single-strokes, double strokes, wavy lines, dotted lines vb.
• -moz-hyphens özelliği ile kelimelere tireleme yapabiliyoruz. (none, manual, auto).
• window.matchMedia() metodunu kullanarak medya sorgularını programatik olarak kontrol edebiliyoruz.
• Server-Sent Events desteği eklenmiş. Bu API sunucuya istemci tarafından uyarı mesajları göndermeye izin veriyor. Bir mesajlaşma örneği
• Touch eventları destekliyor. Dokunmatik ekranlar ve trackpadlerde bu özellikleri kullanabiliyoruz artık.
• Tüm destek listesini görmek için tıklayınız.

Kaynaklar

• http://www.favbrowser.com/download-firefox-6-beta-1-for-pc-android/
• http://venturebeat.com/2011/08/16/firefox-6/
• http://hacks.mozilla.org/2011/08/firefox6/
• http://www.sitepoint.com/firefox-6-whats-new/
• https://developer.mozilla.org/en/Firefox_6_for_developers
• http://www.pcworld.com/businesscenter/article/229447/ready_for_firefox_6_heres_whats_on_the_way.html

Firefox’un 5. sürümü çıktı. En güzel yanlarında birisi artık Chrome gibi otomatik güncellenmesi. Her sürümde tekrar tekrar indirme dönemi bitti Firefox içinde darası diğer tarayıcıların başına, özellikle İnternet Explorer’un. Otomatik güncelleme olmadı ise Yardım- Firefox hakkında penceresinde güncelle butonu ile de yapabilirsiniz.

Chrome’un hızlı sürüm numarasını kıskanan Firefox, 4.5 sürüm diyebileceğimiz bir sürümü yeni bir sürüm olarak bizlere sundu. Yeniliklerine göz atalım.

• CSS animasyon özelliğini destekliyor
• Canvas, javascript, hafıza ve ağ performansını arttırmış
• HTML5, XHR, MathML, SMIL ve canvas standartlarını geliştirmiş
• Aktif olmayan sekmelerdeki setTimeout ve setInterval değeri 1000ms ile sabitlenerek performans artışı sağlanmış.
• Firefox 5 daha az kullanıcı bilgisini göndererek kullanıcı mahremiyetine daha fazla duyarlı olacakmış. Do-Not-Track başlık özelliği ile daha iyi gizlilik sağlıyor.
• HTTP mantalitesi yenilenerek performans arttırılmış

Daha hızlı bir sürüm olmuş, bu hız meselesini gittikçe kavrıyor Firefox, yakında chrome’u yakalar gibi.

Ayrıca Firefox 5 ile gelen yeni bir site http://firefoxtweetmachine.com/ Twitter makinesi güzel olmuş.

Kaynaklar

• http://www.favbrowser.com/download-firefox-5-final/
• http://mashable.com/2011/06/21/firefox-5/
• http://venturebeat.com/2011/06/21/firefox-5-launches-only-months-after-last-version
• http://hacks.mozilla.org/2011/06/firefox5/
• http://www.sitepoint.com/firefox-5-released
• http://blog.mozilla.com/blog/2011/06/21/mozilla-delivers-new-version-of-firefox-first-web-browser-to-support-do-not-track-on-multiple-platforms/
• http://www.pcextra.com.tr/haber/2011/06/firefox-5-soft-acilisin-ardindan-resmi-olarak-da-cikti

Evet güzel bu özelliklerin her biri güzel ancak bir sorun olduğunda kodu göremiyoruz. Chrome yeni sürümünde güzel bir özellik getirmiş. “Sıkıştırmayı geri al” diye Türkçe’ye çevirebileceğim bir özellik ile tek tıkla kodu anlaşılabilir bir hale getirebiliyoruz.

Değişken isimlerini kısa göstermesi gibi küçük bir sorun dışında gayet başarılı bir özellik olmuş.

Yeni sürümlerde ikon olarak eklenmiş.

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. http://whygitisbetterthanx.com/ sitesinden 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 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

• http://inchoo.net/tools/basic-git-usage-from-console/
• http://www.foch.com.tr/versiyon-kontrol-git-svn-cvs.html
• http://mhazer.blogspot.com/2010/12/versiyon-yonetim-sistemi-olarak-git.html
• http://www.kodcu.com/2011/04/git-mi-subversion-mi/
• http://net.tutsplus.com/tutorials/other/the-perfect-workflow-with-git-github-and-ssh/
• http://net.tutsplus.com/tutorials/other/easy-version-control-with-git/
• http://tr.wikipedia.org/wiki/S%C3%BCr%C3%BCm_Kontrol_Sistemi
• http://book.git-scm.com/4_finding_with_git_grep.html
• http://www.kitware.com/products/html/DistributedVersionControlTheFutureOfHistory.html
• http://www.ndpsoftware.com/git-cheatsheet.html
• http://www.kimbs.cn/2010/11/git-essence/
• http://people.core.gen.tr/~aycan.irican/web/publish/GitSKS.html (1)

Önümüzdeki sene daha çok HTML5, CSS3, Javascript, Jquery ve mobil platform üzerine paylaşım yapmayı planlıyorum. Zaman bu konuda ne kadar başarılı olduğumuzu gösterecek.

Geçen seneki istatistikler;

• 49 adet makale
• 306.423 ziyaretçi sayısı
• 761.738 sayfa görüntüleme

Toplam 6.253 yorum var sitede. 77.402 çöp yorum engellenmiş.

Yenilenen Arayüz

Yeni nesil bir çok tarayıcıda gördüğümüz içeriğe daha fazla alan bırakan yeni tasarım kabulünü Firefox 4’de de görüyoruz. İnternet Explore 9’da dediğimiz gibi hepsi ortalama olarak doğru yolu buluyor.

Daha derli toplu bir arayüze kavuşmuş Firefox4. Gerçi o kadarda problememiz yoktu arayüzü ile ilgili, ama yenilenmiş daha hoş olmuş. Sekmeler Chrome’daki gibi üste alınmış. Ana bir Menü Sağ üst köşeye Firefox başlığı ile eklenmiş. Ana Sayfa ve Yerimleri arama kutusu yanına yerleştirilmiş. Ayrıca Yeni Eklenti Düzenleme arayüzü eklenmiş.

Performans

Bencee en büyük artıyı hızdan, performanstan yana olmuş. Bellek kullanımda uzun süreli kullanımda şişmeler oluyor ve can sıkıcı sonuçlar doğruyordu. İlk kullanım deneyimlerime göre gayet başarılı bir gelişme olmuş bu konuda. Google Chrome’un öncülüğünde artık tüm tarayıcıların önceliğini hız konusuna veriyor. Bence bu güzel bir gelişme.

Yenilenen javascript motoru(Jägermonkey) ve HTML5 motoru sayesinde bir önceki sürüme göre 6 kat daha hızlı olduğunu söylüyor Mozilla. Bunu kullanırken hissediyorsunuz. Ayrıca “hardware acceleration” sayesinde hızlanma daha fazla hissediliyor. İnternet Explorer 9’dan hatırladığımız bu özellik grafik işlemciyide devreye sokuyor.

Eklentileri güncellemeleri arkaplanda yükleyerek eklentilerin eski sürümlerdne dolayı yavaşlamasını engelliyor. Eklenti güncellemeleri sonrası tarayıcı kapatıp açmaya gerek yok artık.

Yeni Sekme Özellikleri

Panorama özelliği sayesinde çok fazla sekme kullanan kullancılar için bir düzeni sağlamak artık daha kolay olacak.

Sekmeli yapıya geçtikten sonra bir çok insan sekmelere alıştı, bunun sonucu olarakta sekmeleri düzenleme ihtiyacı duydular. Bu ihtiyacı çok iyi gören Firefox mart ayındaki bu yeni tarayıcı sürümleri içinde belki en iyi özelliği kullanıcılarına sundu.

Ayrıca sekmeleri sabitleme özelliğide eklendi. Daha önce Chrome’dan alışık olduğumuz uygulama sekmeleri sabitleme özelliği artık Firefox’da da var. Çok kullandığımız özellikleri veya uygulamaları sabitleyerek devamlı göz önünde tutuyoruz. Sabitlenen sekmeler görüntü olarakta sadece ikonları görünür kalıyor, bölylelikle fazla yer kaplamıyor.

Senkronize Firefox (Firefox Sync)

Daha önce eklenti olarak sunduğu bu özelliği artık program içinde geliyor. Farklı araçlar ile internete girenler için ve farklı yerlerde tarayıcısının özelliklerini her kullandığı yere taşımak isteyenler için güzel bir özellik. Tüm tarayıcı bilgileriniz ve ayarlarınızı her kullandığınız yerden erişmenizi sağlıyor bu özellik.

Web Standartları Desteği Arttı

• HTML5 yorumlama motoru geliştirildi,
• HTML5 Form elemanları, form doğrulama ve form özellikleri desteğini arttırıldı,
• HTML 5 Yapısal elemanları desteği sunuyor. <article>, <section>, <nav>, <aside>, <hgroup>, <header> ve <footer>,
• HTML5 hidden özelliğini destekliyor,
• Yeni HTML5 özelliklerini destekliyor: <mark>, <figure> ve <figcaption>,
• WebSocket APı desteği sağlıyor,
• WebGL desteği sunuyor,
• Google’un çıkardığı WebM video formatı desteği sunuyor,
• SVG animasyonu SMIL desteği sunuyor,
• Medya elementlerinin(video, audio) buffered özelliğini destekliyor,
• Medya elementlerinin(video, audio) preload özelliğini destekliyor,
• CSS geçiş(transitions) özelliği desteği sunuyor,
• Matematiksel işlemler yapmayı sağlayan -moz-calc özelliği desteği sunuyor,
• CSS dokunma özellikleri desteği sunuyor,
• -moz-font-feature-settings, -moz-tab-size, resize özelliklerini destekliyor
• CSS3 :-moz-handler-crashed, :-moz-placeholder, :-moz-submit-invalid, :-moz-window-inactive, :invalid, :optional, :required ve :valid sözde sınıflarını ve :-moz-focusring sözde seçici desteği sunuyor
• -moz-background-size yerine background-size, -moz-border-radius yerine border-radius ve -moz-box-shadow yerine box-shadow isim değişikliklerini yapıyor
• Firebug’dan alışık olduğumuz Web Konsol özelliğini sunuyor

Diğer Özellikler

Beni izleme(Do Not Track) özelliği eklenmiş,  Çoklu dokunma özelliği ve daha güvenli gezintiler için bazı özellikler sunuyor. Ayrıca Chrome’dan alışık olduğumuz otomatik güncelleme özelliği ile biz indirmeden yeni sürümler kurulacak artık. Bu özellik tüm tarayıcılara gelirse çok güzel olur.

Sonuç

Mart ayı tarayıcılar için kendilerini gösterme zamanı olarak geçiyor. Her yeni özellik bizi heyecanlandırıyor. Gelişen web teknolojilerine ayak uyduran tarayıcılar ayrıca yeni ve kullanışlı özelliklerde sunuyor. Firefox’un hız sorununu bu sürümde düzelttiği kanısına varsam da uzun süreli kullanımlardaki performansını görmeden kesin bir şey söylemek zor.

Firefox’a FireBug ile olan göbek bağım nedeni ile benim için Firefox birincil tarayıcımdır ve bu yeni sürüm ile birlikte bu daha çok pekişecektir.

Son olarak rekabet güzel şey.

Yeni nesil tarayıcıların Hız testi http://lifehacker.com/#!5784396/browser-speed-tests-firefox-4-internet-explorer-9-chrome-11-and-more

Kaynaklar

• http://www.mozilla-europe.org/tr/firefox/features/
• http://limi.net/articles/firefox-4
• http://www.youtube.com/watch?v=gFmuNApHFec&feature=autoshare
• http://hacks.mozilla.org/2010/07/firefox4-beta2/
• http://hacks.mozilla.org/category/firefox-4/
• http://hacks.mozilla.org/category/firefox-4/
• http://blog.mozilla.com/blog/2011/03/18/check-out-what%E2%80%99s-coming-soon-in-firefox-4-2/
• http://www.webrazzi.com/2011/03/22/firefox-4/
• http://lifehacker.com/#!5784255/whats-new-and-awesome-in-firefox-4
• http://hacks.mozilla.org/2011/03/firefox4-performance/
• http://www.favbrowser.com/download-firefox-4-final/
• https://developer.mozilla.org/en/Firefox_4_for_developers

Web mecrasında çalışanları tarayıcıları ve yetenekleri konusunda çok iyi bilgi sahibi olması gerekir. Helede Arayüz Geliştiricileri için çok önemlidir. Çünkü kodumuzu yazarken farklı tarayıcılara göre yazıyoruz. 

Bu yazımda İnternet Explorer 9′un önemli özelliklerinde bahsedeceğim. 

Yeni Görünüm

En büyük değişimlerden biri görünümde gerçekleşmiş. Yeni nesil tarayıcılardaki anlayış ile hareket edilmiş menü ve adres çubuklarının kapladığı alan en aza indirilerek gösterilen sayfa alanı genişletilmiştir. 

Yukarıda görüldüğü gibi gittikçe tarayıcılar orta noktada buluşuyorlar.

Bunun dışında;

• Sekmelerin yapısı ve görünümüde değiştirilmiş.
• Yeni sekme açıldığında karşımıza çıkan boş ve anlamsız bir sayfa yerine split görünmlü en sık açtığımız siteler listeleniyor.
• Yeni bir bildirim alanı eklenmiş. İndirilen dosyalara ait bilgililerin gösterilmesi, popup pencerelerini ait bilgiler, güvenliğe ait uyarılar, şifre kayıtları vd. bildirimleri artık tarayıcının alt kısmında gösteriliyor.
• Dosya yüklemek için kullanılan Yükleme Yöneticisi kısmı yenilenmiş ve kullanışlı bir yapıya kavuşturulmuş.

Standartlar ve Performans

İnternet Explorer 9′un alt yapısal olarak en büyük yeniliği GPU destekli yani "Hardware Acceleration" destekli yeni javascript tarama motoru(çakra) sayesinde web sitelerini daha hızlı yorumluyor. 

İnternet Explore 9′un geneline baktığımızda diğer tarayıcılara göre en büyük avantajı GPU destekli tarama motoru olarak görünüyor. Bu sayede web sayfalarını masaüstü programlar gibi hızlı ve beklemeksizin kullanım imkanı sunmayı düşünüyor. GPU destekli "Hardware Acceleration" kastımız şudur; grafik desteğini bilgisayar işlemcisinden(cpu) grafik işlemcisine(gpu) taşımayı sağlayan javascript motoru sayesinde ana işlemci üzerindeki yükü dağıtarak daha fazla verim almayı sağlıyor. Buda bize web’de görsel bakımdan zengin içerikli siteleri daha hızlı gezme imkanı sağlıyor.

Bu yenilenen ve hızlandırılan tarama motorları HTML5 desteğini sunuyor. Burada şöyle bir liste var. Destekleme konusunda İnternet Explorer’un eski sürümlerine göre çok büyük eklemeler var, ancak diğer tarayıcıların son sürümlerini dikkate aldığımızda neredeyse yarı yarıya bir eksiklik var.

http://www.findmebyip.com/litmus

Sitesini incelemenizi öneriyorum. 

Aşağıda İnternet Explorer 9′un desteklemediği özelliklerin belli başlıları listesi var.

• Application Cache (offline)
• Web Workers (threads in JavaScript)
• HTML5 Forms (validation mechanism, CSS3 selectors)
• JavaScript Strict Mode
• ForeignObject (embed external content in SVG)
• SMIL Animations (SVG animations)
• File API
• WebGL (3D)
• CSS3 Transitions (for animations)
• CSS3 Text Shadow
• CSS3 Gradients
• CSS3 Border Image
• CSS3 Flex box model
• ClassList APIs
• FormData
• HTML5 History API
• Drag’n Drop from Desktop

Pek iç açıcı bir tablo değil.

Performansla ilgili bir çok yayınlanan grafik var. Bunlara bakıldığında İnternet Explorer 9 kendi ailesinin en hızlı ve yeni nesil tarayıcılara yaklaşan performansı var. 

Windows 7 ile Sorunsuz ve Tümleşik Çalışma

Masaüstünüzü ikiye ayırarak geniş ekranlarda iki farklı siteyi tek ekran görme imkanı sağlayan bir yapıyı kullanabilirisiniz. 

Windows 7′nin programlar için sunduğu en sık kullanılan sitelere daha hızlı erişimi sağlayan yapı web sitelerinde sağlanmış. Sık kullandığımız web sitelerini programlar gibi alt barımıza sabitleyebiliyoruz.

Eklenti Desteği ve Eklenti Performans Göstergesi

Eklenti Performans göstergesi bize eklentilerin ne kadar zaman kaybına neden olduğunu gösteriyor. Biz bu verilere göre eklentiyi kaldırıyor veya bize lazım ise kalmasına karar veriyor. Bence diğer tarayıcılarında edinmesi gereken bir özellik bu.

Gelişmiş Adres Çubuğu

Adres çubuğu hem arama yapmamıza, hemde web sitelerinde gezmeye yarayan bir yapıya kavuşturulmuş. Buna "Tek Kutu" adı verilmiş. Bir çok yeni nesil tarayıcının yöneldiği bu sisteme İnternet Explorer 9′da getirilmesi güzel.

Diğer tarayıcılardan elimizin alıştığı ve bize çok hız kazandıran bu yapı tüm tarayıcılar için güzel bir gelişme.

Sonuç

Sonuç olarak şunu söyleyebilirim ki yukarıda açıkladığım ve araştırdığım kadarı ile bir çok yönü ile gayet başarılı bir tarayıcı olarak görünüyor İnternet Explorer 9, ancak gerek HTML5 ve gerekse CSS3 özelliklerini destekleme konusundaki eksiklikleri beni düşündürüyor. Anlayamadığım bir olay varki bir çok yönden gelişmiş bir tarayıcı sunmasına rağmen nasıl oluyorda bu özellikleri desteklemiyor, anlam verebilmiş değilim. Ayrıca Windows XP’ye yüklenemeyecek olmasıda ilginç.

Chrome’daki güncelleme mantığı ile gelen bir yapıya sahip olsa idi bu durumda bir türlü geçiştirilebilirdi, ancak böyle bir yapıda olmadığını görünce üzülüyorum açıkçası. Hala %60 seviyelerinde kullanıcısı olan bir tarayıcıdan daha sorunsuz bir tarayıcı çıkarmasını bekliyordum. 

Mevcut tarayıcıları düşündüğümde belki sadece GPU nedeni ile belki kullanılabilir ama bu sene içinde çıkacak diğer tarayıcılarında bu özelliği kazanacağını ve İnternet Explorer 9 ile belki geçici bir yükselme yaşansa bile daha sonra düşüşün devam edeceğini düşünüyorum.

Kaynaklar

• http://articles.sitepoint.com/article/whats-new-in-ie9
• http://lifehacker.com/#!5638885/internet-explorer-screenshot-tour-the-best-new-features-in-ie9
• http://windows.microsoft.com/tr-TR/internet-explorer/products/ie-9/features/fast
• http://blogs.msdn.com/ie/archive/2010/03/16/IE9-Platform-Preview-Feedback.aspx
• http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx
• http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-explorer-9.aspx (yeni javascript motoru ile ilgili)
• http://blogs.msdn.com/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx (ie9′un svg desteği)
• http://arstechnica.com/microsoft/news/2010/03/platform-preview-gives-web-developers-first-taste-of-ie9.ars
• http://robertnyman.com/2010/03/17/testing-the-internet-explorer-platform-preview-ie9-reviewing-the-good-the-bad-and-the-main-letdown/
• http://msdn.microsoft.com/en-us/ie/ff468705.aspx
• http://www.guardian.co.uk/technology/blog/2010/mar/16/internet-explorer-9-preview-microsoft
• http://daron.yondem.com/tr/PermaLink.aspx?guid=619ab009-08e7-4d56-9017-1b85cc2d806a
• http://mashable.com/2010/03/16/ie9-preview/
• http://www.techradar.com/news/internet/ie9-crazy-fast-but-rivals-still-have-the-speed-edge-677295
• http://blogs.msdn.com/ie/archive/2010/03/17/test-drive-104-new-professional-grade-tests-for-web-standards.aspx
• http://shiftdelete.net/internet-explorer-9dan-yeni-detaylar-19151.html
• http://shiftdelete.net/internet-explorer-9dan-kotu-haber-19178.html (windows xp desteğinin olmamaası)
• http://web.archive.org/web/20010602021058/microsoft.com/windows/ie/preview/default.asp
• http://www.computerworld.com/s/article/9185338/Internet_Explorer_9_beta_strips_down_for_speed
• http://www.bildirgec.org/yazi/internet-explorer-9-un-beta
• http://gizmodo.com/5638742/internet-explorer-9-uh-nice
• http://lifehacker.com/5638885/internet-explorer-screenshot-tour-the-best-new-features-in-ie9
• http://www.turk.internet.com/portal/yazigoster.php?yaziid=29437
• http://www.nuricankaya.com/default.asp?gunluk_id=455
• http://www.nuricankaya.com/resimler/2010_Eylul/ie9guide.pdf
  
• http://www.engadget.com/2011/03/14/internet-explorer-9-launches-tonight-weve-got-your-early-look/
  
• http://msdn.microsoft.com/en-us/ie/ff468705 (css3 ve html5 desteği)