Başlangıç > Dökümanlar, Microsoft Windows > Zen Coding ile Hızlı Kodlama

Zen Coding ile Hızlı Kodlama

Tanıtım

İlk olarak Zen-Coding ‘ten biraz bahsedelim.Zen-Coding , aynı text-expander daki gibi kod kısayollarıyla belirli bir kod ‘ un kısa bir surede yazılmasını sağlar.Yani mesela Netbeans’te for yazıp taba bastıgımızda nasıl karşımıza tam bir for döngüsü çıkarıyorsa oluşturuyorsa aynı işlemi sağlıyor tabi Java veya C++ için değil.Şu an için HTML,CSS,HAML,XML/XSL destekliyor.

İndirme

Şimdi ilk Zen-Coding ‘ i nerde buluruz nerden indiririz.

Zen-Coding Anasayfası : http://code.google.com/p/zen-coding/ buraya girip kullandığınız editöre göre seçim yapabilirsiniz.Şu an Netbeans , Gedit,Vim vs.. için mevcut.

Bir kaç Editor için kurulum

Netbeans’te kurmak isterseniz indirdiğiniz zip’i Menüde Tools > Options bölümünden açılan ekranda sol en altta Export(Dışa Aktar) ve Import(İçe Aktar) diye iki ifade görüceksiniz.Importa tıklayın ve Browse diyip indirdiğiniz zip dosyasını seçin daha sonrada tümünü işaretleyip Tamam diyin.Kurulum tamamlanmıştır.Zen-Coding için otomatik tamamlama kısayolu Tab tuşu.

Notepad++’te kurmak istersekte indirdiğimiz dosyayı Notepad++’in kurulu olduğu dizine açmamız yeterli.Eğer bi sorun yoksa Notepad++’i açtığınızda üst menude Zen-Coding diye bölümü gormeniz lazım.Zen-Coding için otomatik tamamlama kısayolu CTRL+E kombinasyonu.

E-TextEditordeyse otomatik olarak kurulu geliyor başka bir işlem yapmanıza gerek yok.Zen-Coding için otomatik tamamlama kısayolu CTRL+E kombinasyonu.

Örnekler

Zen-Coding ‘ i kullanabilmek için tabikide belirli kurallar var.
classlar için ; nokta( . ) kullanılır
id’ler için ; ( # )
iç içe oluşturmak için ; ( > )
ard arda farklı oluşturmak için ; ( + )

Örneğin :

Zen Coding İle Yazılan Kod :

1 div#page>div.logo+ul#navigation>li*5>a

 

Sonuç :

 

01 <div id="page">
02         <div class="logo"></div>
03         <ul id="navigation">
04                 <li><a href=""></a></li>
05                 <li><a href=""></a></li>
06                 <li><a href=""></a></li>
07                 <li><a href=""></a></li>
08                 <li><a href=""></a></li>
09         </ul>
10 </div><br>

 

Aşağıdaki ekran görüntülerini inceleyebilirsiniz…

http://www.tahribat.com/img/dokuman/ZenCodingNedir/ornekler1.png

http://www.tahribat.com/img/dokuman/ZenCodingNedir/ornekler2.png

 

Kaynak: dyrnade

Reklamlar
  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: