HTML5 uygulamanızda dosyaları organize etmek için önerilen bir yapının ana hatlarını vereceğim. Bu, herhangi bir standart yaratma girişimi değildir. Bunun yerine, dosyaları mantıklı ve uygun bir şekilde nasıl gruplayıp adlandıracağıma dair önerilerde bulunacağım.
Senin projen
Bir HTML5 uygulaması oluşturduğunuzu varsayalım. Bazı durumlarda sunucunuzun kökünü ana kapsayıcı olarak kullanabilirsiniz, ancak bu makalenin amacı doğrultusunda HTML5 uygulamasının bir klasörde yer aldığını varsayacağım. Bu klasörün içinde, uygulama dizin dosyanızı veya ana giriş noktanızı oluşturmanız gerekir.
Genellikle uygulamanız HTML, CSS, Görseller ve Javascript dosyalarından oluşacaktır. Bu dosyalardan bazıları uygulamanıza özel olacak ve bazıları da birden çok uygulamada kullanılabilir. Bu çok önemli bir ayrımdır. Dosyalarınızı etkili bir şekilde gruplandırmak için, genel amaçlı dosyaları uygulamaya özel kaynaklardan ayırarak başlamalısınız.
- appcropolis-proje
- kaynaklar
- satıcıları
- my-index.html
Bu basit ayırma, dosyalarınız arasında gezinmeyi çok daha kolay hale getirir. Kitaplıkları ve genel amaçlı dosyaları satıcılar klasörüne yerleştirdikten sonra, düzenleyeceğiniz dosyaların kaynaklar klasöründe yer alacağı açıktır .
HTML kodunuzun yanı sıra, uygulamanızdaki diğer dosyalar çoğunlukla CSS, Javascript ve resimlerdir. Muhtemelen, uygulama dosyalarınızı bu tür varlıklara karşılık gelen klasörler içinde zaten gruplamışsınızdır.
- appcropolis-proje
- kaynaklar
- satıcıları
- my-index.html
Js klasörü Javascript kodunu tutacaktır. Benzer şekilde, resimler klasörü, doğrudan index.html'den veya uygulamanızdaki başka bir sayfadan kullanılan resimleri eklemeniz gereken yerdir. Bu resimler klasörü, stil sayfasıyla ilgili dosyaları barındırmak için kullanılmamalıdır. CSS kodunuz ve ilgili resimler css klasörünün içinde yer almalıdır . Bunu yaparak farklı temaları rahatlıkla kullanabilen sayfalar oluşturabilir ve uygulamanızın daha taşınabilir olmasını sağlayabilirsiniz.
- appcropolis-proje
- kaynaklar
- css
- mavi-tema
- Görüntüler
- mavi-theme.css
- my-index.css
- js
- my-index.js
- benim-contact-info.js
- Görüntüler
- Ürün:% s
- computer.jpg
- cellphone.png
- printer.jpg
- my-şirket-logo-Small.png
- benim-şirket-logo-large.png
- veri
- Bazı-Data.JSON
- daha-data.xml
- Tablo-data.csv
- Ekstra data.txt
- satıcıları
- jQuery
- Görüntüler
- ajax-loader.gif
- simgeler-18-white.png
- jquery.min.js
- jquery.mobile-1.1.0.min.css
- jquery.mobile-1.1.0.min.js
- Bazı-css-kütüphane
- Bazı-plugin.jquery
- my-index.html
- my-contact-info.html
- my-products.html
Önceki örnek, css klasörünün içeriğini gösterir . Ana CSS dosyanız olarak kullanılması gereken default.css adında bir dosya olduğuna dikkat edin. Varsayılan stil sayfası tarafından kullanılan resimler , resimler klasörünün içine yerleştirilmelidir . Alternatif stil sayfaları oluşturmak istiyorsanız veya varsayılan stil sayfanızda tanımlanan kuralları geçersiz kılmak istiyorsanız, ek CSS dosyaları ve karşılık gelen klasörler oluşturabilirsiniz. Örneğin, bir mavi-tema.css stil sayfası oluşturabilir ve ilgili tüm resimleri bir mavi temanın içine yerleştirebilirsiniz.Klasör. Yalnızca bir sayfa tarafından kullanılan CSS veya Javascript kodunuz varsa (bu durumda my-index.html), sayfaya özel kodu .css ve .js dosyalarının içinde aynı sayfa adı ile gruplayabilirsiniz (ei my-index .css ve my-index.js). CSS ve Javascript kodunuz olabildiğince genel olmalıdır, ancak istisnaları ayrı dosyalara yerleştirerek takip edebilirsiniz.
Nihai Öneriler
Klasör ve dosya adlarıyla ilgili bazı son önerilerde bulunulmalıdır. Genel bir kural olarak, tüm klasör ve dosya adlarında küçük harfler kullandığınızdan emin olun. Bir dosyayı veya klasörü adlandırmak için birden çok kelime kullanırken, bunları kısa çizgi ile ayırın (örn. My-company-logo-small.png). Bu makaledeki tavsiyelere uyarsanız, ortak kaynakları bir arada ve özel kodu güzelce ayrı tutarken birden çok sayfayı birleştirebilmelisiniz.
Son olarak, bu makalede önerilen yapıyı kullanmayı seçmeseniz bile, bir kurala bağlı kalmak önemlidir. Üretkenliğinizi artıracak ve daha da önemlisi yaptığınız işi başkaları tarafından anlaşılmasını kolaylaştıracaktır.
Kaynak Kredisi:
HTML, CSS ve Javascript dosyalarınızı nasıl düzenleyebilirsiniz?