Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Aşamalı geliştirme, yazılımınızın sağlam ve erişilebilir olmasını sağlamaya yardımcı olan bir tekniktir. Bunu takip ederek, mümkün olduğunca çok kişinin web sitenizi veya uygulamanızı kullanabilmesini sağlayabilirsiniz.

Web tasarımınızın minimum düzeyde uygulanabilir bir sürümüyle başlayın ve gerektiği gibi çalıştığından emin olun. Ardından, daha yetenekli tarayıcıların yararlanabilmesi için ekstra işlevsellik ve stil katmanları oluşturun.

Aşamalı İyileştirme Nasıl Çalışır?

Son derece dağıtılmış yapısı nedeniyle, web her zaman çok çeşitli cihazları desteklemeye ihtiyaç duymuştur. 1970'lerin temel bilgisayarlarından yetenekli modern masaüstü bilgisayarlara, tabletlere ve televizyonlara kadar web siteleri çok yol kat etti.

Her şeyin merkezinde HTML vardır. "Bağışlayıcı" bir dil olduğu için, tarayıcılar HTML'yi anladıkları kadar iyi görüntüler. Tipik olarak, desteklemedikleri her şeyi görmezden gelirler.

instagram viewer

Bu, bir geliştiricinin bakış açısından yararlı olabilir, ancak okuyucular için sorunlara neden olabilir. JavaScript çalışamadığında siteniz boş bir sayfa gösteriyorsa, kullanıcıların siteyi terk etmekten başka çaresi yoktur. Kademeli geliştirme, temel içeriği ona erişebilen herkese ulaştırmanızı ve ardından CSS ve JavaScript gibi uygun teknolojileri kullanarak bu içeriği geliştirmenizi teşvik eder.

Şekillendirmeye Aşamalı Bir Yaklaşım

CSS, web'in stil sayfası dilidir renkleri, yazı tiplerini özelleştirmek için kullanabileceğiniz, düzenlerve sayfalarınızın diğer birçok görsel yönü. İçeriğinizin varsayılan görünümünü iyileştirmek için kullanabilirsiniz, ancak bu, içeriğinizi en başta düzgün bir şekilde yapılandırmamanız gerektiği anlamına gelmez.

Örneğin bir menü çubuğu alın; şu şekilde yapılandırabilirsiniz:

<gezinme>
<bir href="/register">kayıt olmak</A>
<bir href="/login">giriş yapmak</A>
<bir href="/about">Hakkımızda</A>
<bir href="/contact">temas etmek</A>
</nav>

Her bağlantı biraz düğme gibi görünen yatay bir menü görüntülemek için, bu CSS'yi kullanarak stil verebilirsiniz:

{
metin süslemesi: yok;
ekran: satır içi blok;
dolgu malzemesi: 0.5em 1em;
kenarlık: 1 piksel katı;
sınır yarıçapı: 8px;
sağ kenar boşluğu: 1m;
}

Tarayıcı bunu tam olarak oluşturduğunda, aşağıdaki gibi görünmelidir:

Ancak, CSS kullanılamıyorsa menü şu şekilde görüntülenir:

Bunun bir menü gibi görünmediğine dikkat edin ve bağlantılar tek bir menüde birleştiği için kullanımı çok kolay değil.

Tasarımı daha sağlam hale getirmek için alternatif bir yapı kullanabilirsiniz:

<gezinme>
<Ul>
<li><bir href="/register">kayıt olmak</A></li>
<li><bir href="/login">giriş yapmak</A></li>
<li><bir href="/about">Hakkımızda</A></li>
<li><bir href="/contact">temas etmek</A></li>
</ul>
</nav>

Bu biçimlendirme sırasız bir liste öğesi kullandığından, CSS olmadığında çok daha kullanışlıdır:

Tarayıcının varsayılan stiliyle bile bu bağlantıları hızlı bir şekilde taramanın ve anlamanın ne kadar kolay olduğuna dikkat edin. Bu yaklaşım, varsayılan liste stillerini geçersiz kılmak için biraz daha CSS eklemenizi gerektirecektir:

gezinmeli { görüntülemek: Çizgide; }

Nihai yapı ve stil daha karmaşık olsa da ve çoğu kullanıcı CSS'yi etkinleştirmiş olsa da, bu yaklaşım daha sağlamdır. Ekran okuyucu kullanıcıları için daha dostça olacak ve terminal tabanlı tarayıcılar.

İşlevselliği Kademeli Olarak Tanıtma

Aşamalı geliştirme, bir sitenin veya uygulamanın işleyişi söz konusu olduğunda çok önemlidir. İlke, ne olursa olsun, web sitenizin olabildiğince iyi çalışması gerektiğini belirtir.

Uygulamada, bu genellikle JavaScript için geçerlidir. İstemci tarafı davranışını başlatırsanız, zaten onsuz çalışan bir sitenin veya uygulamanın üzerine işlevsellik katmanları yerleştirilmelidir.

Çok yaygın bir durum olay işlemedir. İsteğe bağlı olarak ek içerik yükleyen bir sayfa düşünün. Bu, manuel sonsuz kaydırma, yorum yerleştirme veya benzeri olabilir.

<vücut>
<!--... -->
<tıklandığında düğme="daha fazla yükle();">
Yük Daha
</button>
<!--... -->
</body>

Tuşlar tıklamada niteliği, birisi düğmeyi tıkladığında çalışacak JavaScript kodunu içerir. Ancak JavaScript kullanılamıyorsa bu düğme hiçbir şey yapmaz. Bir kullanıcı, geri bildirim olmadan ve neyin yanlış gittiğine dair hiçbir fikri olmadan bu düğmeyi tıklatacaktır. Çok daha iyi bir yaklaşım, aşamalı geliştirmeyi kullanır:

<vücut>
<!--... -->
<kimlik="p2" href="/page/2">Sayfa 2</A>

<senaryo>
işlevdaha fazla yükle() { konsol.kayıt("!"); }

/* Bağlantıyı düğmeyle değiştir */
var bağlantı = belge.getElementById("p2");
var düğme = belge.createElement("düğme");
düğme.içMetin = "Daha fazla yükle";
button.addEventListener("tıklamak", daha fazla yükle);
belge.vücut.insertÖnce(düğme, bağlantı);
bağlantı.parentNode.removeChild(bağlantı);
</script>
</body>

Bu kod, temel bağlantıyı bir olay işleyicisi olan bir düğmeye dönüştürür. JavaScript'e bağımlılığı JavaScript'in kendisini kullanarak tanıtarak, çalışacağından emin olabilirsiniz. Ayrıca, standart bağlantı biçiminde çalışan işlevsel bir varsayılan davranış vardır. /page/2.

Kademeli İyileştirme Gerçekten Gerekli mi?

Herkes CSS ve JavaScript içeren tarayıcılar kullanır, öyleyse neden ortaya çıkmayan bir durum için yemek hazırlama zahmetine girelim? Pekala, aşamalı geliştirmenin iyi uygulamasını benimsemeniz için birkaç neden var.

  1. İlk olarak, web sitenizi ziyaret eden herkes tarayıcı kullanmıyor. Bazı ziyaretçiler, bir arama motoru dizini oluşturucu gibi botlar olacaktır ve bunlar, CSS veya JavaScript'i hiç anlamayabilir.
  2. İkincisi, sitenizi ziyaret eden herkes CSS ve JavaScript içeren bir tarayıcı kullanmayacaktır. Bazı ziyaretçiler, minimum biçimlendirme ile düz metin görüntüleyen terminal tabanlı bir tarayıcı kullanabilir. Diğerleri bir ekran okuyucu kullanabilir.
  3. Üçüncüsü, bir tarayıcı CSS ve JavaScript'i desteklese bile işler ters gider. Bozuk bir bağlantı veya hatalı bir ağ bağlantısı, eksik bir .css veya .js dosyasına neden olabilir. JavaScript'teki bir hata, diğer kodun hiç çalışmamasına neden olabilir.
  4. Son olarak, bazı ziyaretçiler aktif olarak CSS veya JavaScript'i devre dışı bırakmaya karar verebilir. Bunu gizlilik endişeleri nedeniyle veya yavaş ya da kullanım başına ödemeli bir bağlantıya sahip oldukları için yapabilirler.

İlerici Bir Zihniyet Harikalar Yaratır

Her şeyden önce, aşamalı geliştirme sizi önce içerik yaklaşımını benimsemeye teşvik eder. İçerik kraldır, bu nedenle metniniz ve resimleriniz, sitenize nasıl erişiyor olursa olsun herkes için her zaman erişilebilir olmalıdır.

Tüm okuyuculara mümkün olan en iyi deneyimi sunarak, ardından yararlanabilecek olanlar için daha da iyi hale getirerek, tüm dünyaların en iyisine sahip olabilirsiniz. Kademeli geliştirme, iyi erişilebilirlik ve kullanılabilirlik pratiğinin temel bileşenlerinden yalnızca biridir.