Neden tüm web siteleri yapı, stil ve davranışların bir kombinasyonu ile oluşturulur?
Ön uç web sitesi gelişimini tanımlamak için kullanılan genel bir benzetme, 3 ayaklı bir tabure gibi olmasıdır. 3 web geliştirme katmanı olarak da bilinen bu 3 ayak, Yapı, Stil ve Davranışlardır.
Web Geliştirmenin Üç Katmanı
- Yapı veya içerik katmanı
- Bir web sayfasının yapısı veya içerik katmanı, o sayfanın temel HTML kodudur. Bir evin çerçevesi, evin geri kalanının inşa edildiği güçlü bir temel oluşturduğundan, sağlam bir HTML temeli, bir web sitesinin oluşturulabileceği bir platform oluşturur. HTML yapısı, metin veya resimlerden oluşabilir ve ziyaretçilerin bu web sitesinde gezinmek için kullanacakları köprüler içerir.
- Stil veya sunum katmanı
- Stil veya sunum katmanı, yapılandırılmış bir HTML belgesinin bir sitenin ziyaretçilerine nasıl görüneceğini belirler. Bu katman CSS (Basamaklı Stil Sayfaları) ile tanımlanır. Bu dosyalar, belgenin bir web tarayıcısında nasıl görüntüleneceğini gösteren stilleri içerir. Bugünün Web'sinde, stil katmanı, bir sitenin ekranını farklı ekran boyutlarına ve cihazlara göre değiştirebilen Medya Sorgularını da içerebilir.
- davranış
- Davranış katmanı, farklı kullanıcı eylemlerine yanıt verebilecek veya bir koşul kümesine bağlı olarak bir sayfada değişiklik yapabilecek bir Web sayfasının katmanıdır. Çoğu Web sayfası için davranış düzeyi, sayfadaki JavaScript etkileşimleri olabilir.
Neden Katmanları Ayırmalısınız?
Bir web sayfası oluştururken, katmanları mümkün olduğunca ayrı tutmak istenebilir. Yapı, HTML'nize, görsel stillerine, CSS'ye ve sitenin kullandığı herhangi bir betiğe yönelik davranışlara uygun olmalıdır.
Katmanları ayırmanın faydalarından bazıları şunlardır:
- Paylaşılan kaynaklar
- Harici bir CSS dosyası veya JavaScript dosyası yazdığınızda, bu dosyayı web sitenizdeki herhangi bir sayfadan kullanabilirsiniz. Bu dosyada bir değişiklik yapmanız gerekirse, belki de web sitesinde bazı tipografik stilleri güncellemek için, bu stil sayfasını kullanan her sayfa değişikliği alacaktır. Web sitesinin her sayfasını tek tek düzenlememize gerek yoktur. Bu, daha büyük bir site için zorlu bir girişim olabilir.
- Daha hızlı indirme
- Komut dosyası veya stil sayfası müşteriniz tarafından ilk kez indirildikten sonra, web tarayıcısı tarafından önbelleğe alınır. Bu paylaşılan kaynaklar artık önbellekte bulunduğundan, tarayıcıda istenen diğer sayfalar daha hızlı yüklenerek genel sayfa hızını ve performansını artırmaktadır.
- Çok kişilik ekipler
- Bir web sitesinde bir kerede birden fazla kişi üzerinde çalışıyorsanız, ekipteki herkesin bu dosyaların en son sürümleriyle çalıştığından emin olmak için dosyaların "check in" ve "check out" yapılması için sistem kullanabilirsiniz. Stilleri ve davranışları yapı belgeleriyle iç içe geçmişse, bunu yapmak çok daha zordur.
- SEO
- Stil ve yapıyı net bir şekilde ayıran bir sitenin, arama motorları için daha iyi performans göstermesi muhtemeldir, çünkü bu siteler bu içeriği daha etkili bir şekilde tarar ve görsel stil veya davranış bilgileriyle uğraşmadan sayfayı anlayabilir.
- Ulaşılabilirlik
- Harici stil sayfaları ve komut dosyaları, insanlar ve tarayıcılar için daha erişilebilirdir. Stil ve yapı ayrımı olduğundan, ekran okuyucular gibi yazılımlar, herhangi bir şekilde kullanamayacakları stillere bağlı kalmaksızın, yapı katmanından içeriği daha kolay işleyebilirler.
- Geriye doğru uyumluluk
- Geliştirme katmanları ile tasarlanan bir siteniz olduğunda, belirli CSS stillerini kullanamayan veya HTML devre dışı bırakılmış tarayıcılar veya cihazlar devre dışı bırakabilen tarayıcılar veya cihazlar nedeniyle daha geriye dönük olarak uyumlu olacaktır. Web siteniz daha sonra bunları destekleyen tarayıcıların özellikleriyle aşamalı olarak geliştirilebilir.
HTML - Yapı Katmanı
Yapı katmanı, müşterilerinizin okumak veya bakmak istediği tüm içeriği depoladığınız yerdir. Bu standartlara uygun HTML5 kodlu olacak ve metin ve görüntülerin yanı sıra multimedya (video, ses, vb.) Içerebilir. Sitenizin içeriğinin her yönünün yapı katmanında temsil edildiğinden emin olmanız önemlidir. Bu, söz konusu sitenin tüm işlevselliği olmasa bile, JavaScript'i devre dışı bırakan veya CSS'yi görüntüleyemeyen tüm kullanıcıların, tüm web sitesine erişmesine izin vermesini sağlar.
CSS - Stilleri Katmanı
Web siteniz için tüm görsel stillerinizi harici bir stil sayfasında oluşturacaksınız. Birden çok stil sayfası kullanabilirsiniz, ancak her ayrı CSS dosyasının site performansını etkilemek için bir HTTP isteği gerektirdiğini unutmayın.
JavaScript - Davranış Katmanı
JavaScript, davranış katmanı için en yaygın kullanılan dildir, ancak daha önce de belirttiğim gibi, CGI ve PHP de Web sayfası davranışları oluşturabilir. Çoğu geliştirici davranış katmanına başvurduğunda, doğrudan web tarayıcısında etkinleştirilen katman anlamına gelir, bu yüzden JavaScript neredeyse her zaman tercih edilen dildir. Doğrudan DOM veya Belge Nesne Modeli ile etkileşimde bulunmak için bu katmanı kullanırsınız. İçerik katmanında geçerli HTML yazmak , davranış katmanındaki DOM etkileşimleri için de önemlidir.
Davranış katmanı oluşturduğunuzda, CSS ile olduğu gibi harici komut dosyalarını kullanmalısınız. Harici bir stil sayfası kullanmanın tüm avantajlarını elde edersiniz.