Web Projelerinde Dosya ve Klasör Yapısı

14 Yorum

Bütün işlerimizde olduğu gibi web projelerini geliştirirken de belli bir düzen dahilinde çalışmak verimliliği arttıran önemli unsurlardan biridir. Herkesin kendine özgü bir düzeni bulunmakta ve kimi zaman kendimize göre en iyi düzeni yakalamak çok uzun zaman alabiliyor. Hatta bana göre bu süreç durağan bir süreç değil. Çünkü devamlı daha iyi bir düzen seviyesi yakalamak istiyoruz.

Şahsen ben öyleyim. Devamlı olarak yeni yöntemler keşfederek mevcut düzenimi daha iyiye yönelik geliştiriyorum. Yani şimdiki yöntemimi belkide bir dahaki yıl daha farklı bir biçimde kullanmış olacağım. :) Yine de bu yazımda hali hazırda kullanıyor olduğum mevcut geliştirme düzenimi sizinle paylaşmam yerinde olacağını düşünüyorum.

Projenin Klasör Yapısı

Klasör yapısı web projelerindeki düzeni oluşturmamızı sağlayan önemli etkenlerden biridir. Klasör yapısı ne kadar karmaşık olursa projelerimizi geliştirmek bir o kadar zor olacaktır. Hele bir de ofis çatısında takım olarak çalışıyorsanız işler iyice karmaşık bir hal alabilir. Bu sebepten dolayı takımınızın benimseyeceği, ortak olarak kullanabileceğiniz, akıllı bir şekilde standart klasör yapısını oluşturmanız iyi olacaktır.

Web projelerinde benim oluşturduğum ve kullanıyor olduğum klasör yapım ve açıklamaları aşağıda yer almakta:

Klasör isimlerini İngilizce olarak oluşturdum çünkü XHTML KITCHEN‘da artık yabancılara da hizmet vermeyi planlıyoruz. Siz kendi ihtiyaçlarınıza göre klasör isimlerini Türkçe’de yazabilirsiniz.

İsterseniz yukarıdaki klasör yapısını şablon olarak indirip siz de kendi çalışmalarınızda kullanabilirsiniz.

Projenin Dosya Yapıları

Projelerimizdeki klasör yapısının düzenli olmasının yanısıra dosyalarınızın da düzenli olması tutarlılık ve verimlilik açısından gayet önemli. Bunun için xHTML ve CSS dosyalarınız için size ayrı başlıklar altında tavsiyelerde bulunacağım.

xHTML Dosyaları İçin Tavsiyelerim

  • Kodlarınızı TAB tuşunu kullanarak girintili biçimde yazmaya özen gösterin. Girintili kodları okumak daha kolaydır.
  • Sayfanızdaki önemli bölümleri xHTML‘de kullanılan yorum etiketi yani <!--YORUM--> ile gruplandırın.
  • Beyaz boşluğu en iyi şekilde ayarlayın. Ben genelde xHTML dosyalarımdaki önemli bölümleri yorumlarla ayırmamın yanısıra bir de birer satır boşluk bırakarak ayırmaya çalışırım. Yine okunabilirlik açısından bunu yapıyorum.
  • Etiketlere id ve class verirken mantıklı bir isimlendirme yöntemi ile verin. Ben ecnebilerin CamelCase diye tabir ettikleri türde kelimeleri birleşik yazıyorum. Örneğin: <div id="mainContent"></div>. Bunun yanısıra alt çizgi ve tire ile de isimlendirme yapabilirsiniz (yani _ ve - karakteri ile). Örneğin: <div id="main_content"></div> veya <div id="main-content"></div>.

Unutmadan örnek olarak hazırladığım xHTML dosyasının kodunu inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

CSS Dosyaları İçin Tavsiyelerim

  • CSS dosyanızın başında hazırladığım örnekteki gibi müşteri ile ilgili isim, editör adı ve tarih/saat gibi bilgiler yerleştirin. Böylece kimin hangi dosyayı ne zaman kim için düzenlediğini belirlemiş olursunuz.
  • Yine örnekte görebileceğiniz üzere önemli bölümler için yorumları kullanarak gruplandırma yapabilirsiniz. İşin bu kısmında dikkat ederseniz grup başlıklarında eşittir işareti bulunmakta. Bununla kullandığınız editör ile arama yaparken gruplar arasında kolayca geçebiliyoruz. Kısacası bu eşittir işaretini kullanarak grup adları ile kodlar karışmamış oluyor.
  • Web projesindeki sayfaların herhangi bir yerinde kullanılabilecek önemli CSS komutlarını class haline getirip kullanıma hazırlayın. Hazırladığım örnekte Global Classes grubu altında kullanıma hazır 11 tane class vardı.
  • Seçici adından önce (yani selector’dan önce) xHTML etiketini yazın. Örneğin: div#header { ... }. Böylece bu kodun xHTML dosyasında hangi etiket için yazılmış olduğunu kolayca görüp anlayabileceğiz.
  • Her CSS kodunu tek satırda yazın. Bu CSS dosyanızın boyutunu azaltmakla kalmaz, kodları gözünüzle çok daha rahat tararsınız.
  • Daha önce xHTML dosyaları için bahsettiğim TAB tuşu ile girinti oluşturma yöntemini CSS dosyalarınızda da kullanmalısınız.
  • Yine daha önce xHTML dosyaları için bahsettiğim beyaz boşluğu iyi ayarlama yöntemini CSS dosyalarınız için de kullanabilirsiniz. Ben CSS dosyalarımda her gruptan sonra üç satırlık boşluk bırakıyorum. Bu da kodları daha okunabilir yapıyor.

Yine örnek olarak hazırladığım CSS dosyasını inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

Benim bilmediğim ve burada yazmadığım, sizin bildiğiniz bu tip güzel tavsiyeleriniz varsa onu yorum yazıp bu yazıya katkıda bulunabilirsiniz.

Yorumlar

Bu yazı hakkında 14 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?

  1. Çok yararlı bir yazı olmuş. Elinize sağlık.

    Tuğca Eker 07 Kasım 2008 22:39

  2. Benimde buna benzer bir klasör yapım var fakat senin kullandığın şekil daha iyi :D bende kullanmaya başlıyorum. Teşekkürler eline sağlık.

    Eray USTA → http://www.ytplus.net 07 Kasım 2008 23:39

  3. Bugün okuduğum ikinci yazın oldu Fatih. İkisi de gerçekten iyiydi. Ellerine sağlık.

    Defocu → http://defocu.com 07 Kasım 2008 23:58

  4. Yaptığım iş gereği ve çalıştığımız projelerin platformları gereği benim yapım da şu şekilde arkadaşlar;
    #Proje İsmi
    Code (.net projelerinin WEB UI hallerinin olduğu dizin)
    Docs (Proje ile ilgili brieflerin metinlerin içeriklerin olduğu dizin)
    Source (Projelerin kreatif ekipten gelen psd, png, ai, fla v.b dosyaların bulunduğu dizin)
    User Interface (xhtml,css,js ve imajların olduğu dizin)
    Css (Master.css, Reset.css v.b stil dosyalarının dizinin)
    Images (imajları oluşturduğum dizin)
    Js (javascript dosyalarının olduğu dizin)
    Swf (swf dosyalarının olduğu dizin)

    Benim de bu şekilde :)

    Kadir GÜNAY → http://www.kadirgunay.com 08 Kasım 2008 02:20

  5. Özellikle yeni başlayanlar için aydınlatıcı bir makale olmuş tebrikler, teşekkürler. Ama bir sorum var:

    # Her CSS kodunu tek satırda yazın. Bu CSS dosyanızın boyutunu azaltmakla kalmaz, kodları gözünüzle çok daha rahat tararsınız.
    # Daha önce xHTML dosyaları için bahsettiğim TAB tuşu ile girinti oluşturma yöntemini CSS dosyalarınızda da kullanmalısınız.

    Bu 2 madde arasında tezatlık yok mu? Yoksa ben mi yanlış anladım?

    Eray Alakese → http://www.erayalakese.com 08 Kasım 2008 23:22

  6. @Eray: Hazırladığım örnekteki en üstte yer alan LAYOUT adlı gruba bakarsan ne demek istediğimi daha rahat anlayabilirsin. Yani orada dikkat et hem tek satır hem de girintili olarak kodlar yer almakta. Yani herhangi bir tezatlık yok. Aksine birbirini tamamlayan şeyler bunlar bana kalırsa. ;)

    fatihturan → http://www.fatihturan.com 09 Kasım 2008 11:21

  7. Tamam şimdi anladım :) ben seçicilerin (mesela BODY{}) içeriğini girintili yazmaktan bahsettiğinizi sanmıştım. Teşekkürler

    Eray Alakese → http://www.erayalakese.com 09 Kasım 2008 12:33

  8. Ellerine sağlık, Fatih. Yararlı bir paylaşım.

    Volkan Görgülü → http://www.webdeneyimleri.com 10 Kasım 2008 02:08

  9. Gerçekten yararlı bir çalışma
    Elinize, emeğinize sağlık

    Onur DEĞERLİ → http://www.rehberalem.com 15 Kasım 2008 14:12

  10. Bilgiler için tşkkrler :) emegine sağlık…

    Fatih YILMAZ → http://www.omerfatihyilmaz.com 20 Kasım 2008 16:47

  11. Ellerine sağlık fatih, kaliteli bir yazı olmuş.

    İbrahim ÇAKICI → http://www.ibrahimcakici.com 11 Aralık 2008 02:29

  12. Çok faydalı bir yazı olmuş, teşekkürler..

    Murat Sarıkoca → http://www.master.name.tr 13 Aralık 2008 19:58

  13. Öncelikle kolay gelsin, önerileriniz genel ve güzel…

    Konu içinde tab kullanımı ile ilgili notlar kısmına ben takıldım…

    Kendim, HTML çıktısı ve php kodlarını farklı değerlendiriyorum… bu sebeple php kodlarını %100 oranında semantik dizmeye çalışıyorum… lakin iş html kodlarına gelince html çıktısını verecek noktalarda (style dosyalarında ve temalarda) bütün çıktıyı sol köşeye, hiç boşluk bırakmadan diziyorum…

    zor soru, bu yaptığım ne kadar doğru, ne kadar yanlış ? özellikle html çıktısı açısından…

    ilaveten, sola yaslanmış bu yapı, kendim açısından gizli imza da oluyor ;)

    sabri ünal → http://www.kidap.com.tr 15 Aralık 2008 00:20

  14. Teşekkürler. Çok iyi bir makale olmuş. Zaten bir süre sonra bu tip şeyleri yapmak istemsiz bir şekilde oluyor.

    Mehmet Emre → http://dbarslan.info/akif 03 Ocak 2009 19:33

Yorum Yaz

Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.

Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.

Ben Kimim?

Fatih Turan Benim adım Fatih Turan. 25 yaşındayım ve Rize’de yaşıyorum. Serbest web tasarımcılığı ve XHTML KITCHEN adını verdiğimiz servisimizde tasarımları XHTML/CSS’ye dönüştürmekle görevli front-end developerlardan biri olarak çalışıyorum. Anadolu Üniversitesi Açıköğretim Fakültesi İşletme bölümü mezunuyum. Okumaya Devam Et...

Bu blog Wordpress altyapısında çalışıyor olup Fatih Turan tarafından yapılmış olan Emerald adlı temayı kullanıyor. Fatih Turan ©