Anasayfa » Web Tasarımı » Web Tasarımında Aşamalı Geliştirme İçin En İyi Uygulamalar

    Web Tasarımında Aşamalı Geliştirme İçin En İyi Uygulamalar

    Web siteleri inşa zanaat birçok hızlı değişen parçaları ile inanılmaz derecede karmaşık. Web tasarım topluluğunun amacı, karmaşıklığı azaltmak, ve hata olasılığını azaltmak oluşturma sürecinin her aşamasında.

    İlerici geliştirme amaçlayan web tasarımında böyle bir fikir hataları azaltmak ve tutarlı bir kullanıcı deneyimi sağlamak yönüyle. Kavram, bir yöntem olarak açıklayan kendi Wikipedia sayfasına sahiptir. tam erişilebilir içerik, yalnızca tarayıcı tarafından desteklendiğinde gelişmiş özellikler oluşturma.

    Aşamalı geliştirmeyi anlamak kolaydır, ancak bunu doğrudan tasarım çalışmanıza uygulamak kadar kolay değildir. Biraz gizlemek istiyorum Gerçek dünya projelerinde ilerici geliştirme için en iyi yöntemler için tasarımcıların iş akışları hakkında daha sürdürülebilir düşünmelerini sağlama.

    1. İlerici Geliştirmeyi Anlamak

    İlerici geliştirme teorisi tavsiye basit bir web sitesi ile başla Tüm tarayıcılarda çalışır, bunu yapar her ziyaretçi için erişilebilir. Ardından, mümkün olduğunda özellikler ekleyin.

    Bu, varsayılan olarak tüm özellikleri içeren zarif bir bozulmanın tam tersidir, daha sonra bir şey çalışmadığında azalır..

    Aşamalı geliştirme genel kullanıcı deneyimi için daha iyidir, çünkü özünde sadece gerekli elemanları yükler. Her web tarayıcısı metni (ve genellikle görüntüleri) destekleyebilir. Herhangi bir CSS olmadan bu bilgi yumuşak ve tatsız görünecek, ancak erişilebilir olacak.

    Bu Ayrı Listele makale ilerici geliştirmenin olduğunu savunuyor İçerik birinci ile stiller ve daha sonra eklenen dinamik bileşenler. Anlamsal HTML'deki içerik her şeyden önce yayınlanmalıdır.

    Bugün kullandığımız gelişmiş CSS ve JavaScript yaygın olarak desteklenmektedir, ancak ilerici geliştirme ilkelerini takip etmek istiyorsak, lüks olarak kabul edilmeleri gerekir..

    Aşağıda, dikkate almanız gereken, aşamalı iyileştirmenin temel özelliklerinin genel bir özetini bulacaksınız:

    • Anlamsal işaretleme tüm içerik için
    • Kullanıcılar' tarayıcı tercihleri saygı duyulması gerekiyor
    • İçerik ve temel işlevsellik olmalıdır tüm kullanıcılar tarafından kullanılabilir
    • Göze çarpmayan JavaScript yalnızca yüklenir bunu destekleyebilecek ortamlarda

    Ön uç geliştirmedeki teknolojik kısıtlamalar öncelikle tarayıcı uyumluluğu ile belirlenir. Aşamalı geliştirme, nasıl yapıldığını düşünerek temel konulara geri dönmenizi sağlar Çıplak kemik basit web sayfası benziyor olabilir. Oradan, yapabilirsin daha gelişmiş özellikler için plan yapın, CSS3 özellikleri gibi.

    Peki ya modern CSS3'ü desteklemeyen tarayıcılar? Burası, Kullanabilir miyim gibi sitelerin devreye girdiği yerdir. Hangi özelliklerin uygulanmaya değer olduğuna karar vermeli ve kararları esas almalısınız web sitenizin hedef kitlesi üzerinde.

    2. Stil Sayfalarında Geçim

    Günümüzde çoğu tarayıcı, ihtiyacınız olan tüm temel özellikleri desteklemektedir. Fakat gelişmiş CSS3 hala eski kullanıcılar için bir sorundur, ve aşamalı geliştirme bir çözüm sunar.

    Bu yeni özellikleri korumak için geri dönüş yöntemleri aramak yerine, öncelikle uygun yerleşim yapıları.

    Mümkün olduğunca çok sayıda aktif tarayıcıda çalışan semantik HTML ve CSS işaretlemesi yazın (IE5 desteği gibi eski tarayıcılar için destek gerekli değildir).

    Örneğin, iki kenar çubuklu kayan nokta kullanan bu JSFiddle'ı kullanın (.sabit) ve bir sıvı içerik alanı (.akışkan). Tüm CSS’leri silerseniz ve kodu yeniden çalıştırırsanız, her şeyin ilk sütunla, sonra ikinciyle ve en sonuncuyla iyi bir şekilde yığıldığını fark edeceksiniz..

    Bazı geliştiriciler içerik sütununa sahip olmayı tercih eder (.akışkan) ilk HTML'de görünür. Bu, aşamalı iyileştirmenin devreye girdiği ve alternatif CSS çözümlerinin uygulanabilir olduğu yerdir..

    HTML’nizin iki ana hedefi şunlardır:

    • Tamamen anlamsal ve geçerli kod
    • bir tutarlı deneyim herkes için

    Bu hedeflere ulaşmanın en kolay yolu hiçbir şeyden başlamak ve çalışmak, çoğu ilerici geliştirme savunucusunun önereceği gibi.

    Kodunuz hem devre dışı bırakılmış hem de etkin olan CSS’de iyi görünüyorsa, herkes için makul bir çözüm sunar.

    Aynı zamanda dikkate değer hangi noktada bir şeye destek bırakıyorsun. Microsoft zaten IE6 için büyük destek bıraktı, bu yüzden bu tarayıcıyı çalıştıran kullanıcılar zaman ayırmayabilir.

    Ancak yine de büyük bir soru var: bir tarayıcı modern CSS'mi desteklemiyorsa ne yapmalıyım??

    Sen sadece işe yarayan kod yaz olmadan o, ve modern CSS'yi ilerici bir donanım olarak düşünün. Bu ilerici geliştirme metodolojisinin güzelliğidir.

    Geri dönüşlere ihtiyacınız yok, çünkü temelde varsayılan olarak hiçbir şeyin desteklenmediğini varsaymak.

    Aşamalı geliştirme yöntemleri, bir şeyin desteklenmediği durumlarda bile siteyi kullanılabilir kılmakla ilgilidir; ancak destekleniyorsa, daha iyi.

    Düşünmen gerek içerik aslında CSS olmadan nasıl akıyor?. Örneğin, Transmit'in web sitesinde CSS'yi devre dışı bıraktığımda, içerik yine de sayfada normal olarak akıyor.

    GÖRÜNTÜ: İletim

    Evet, çirkin ve evet, yirmi yıllık ilerlememizi yitirmişiz gibi hissediyor… ama işe yarıyor.

    3. JavaScript'i Kullanma

    Geliştirme sürecinde karşılaşabileceğiniz her JavaScript sorununun zor ve benzersiz olduğunu belirtmekte fayda var. Aşamalı geliştirmeye sahip yeni bir proje oluştururken, tüm gerekli JS tabanlı özelliklerinizi listelemeli ve bunların nasıl yapılabileceğini düşünmelisiniz. JavaScript olmadan çalış.

    Bu, geçerli çözümler bulmak için pek çok çevrimiçi araştırma gerektirecektir. Aaron Gustafson, Ajax'ın iframe içindeki içerik için meta yenilemeyle değiştirilmesi gibi çeşitli sorunların çözümlerini içeren harika bir blog yazısı yazdı.

    Ayrıca, JavaScript sekmeleri oluşturduğunuzda, bu iyi bir fikirdir. gerçek kimlik değerlerine sahip bağlantı bağlantıları kullanın. Bu şekilde, JavaScript devre dışı bırakıldığında, sekmelerin bağlantı değerine göre görünür ve erişilebilir olmasını sağlayabilirsiniz. Aaron, bu sorunlar hakkında nasıl düşünmeniz gerektiğine dair daha genel bir genel bakış içeren A List Apart'a başka bir parça yazdı..

    İşte başka bir örnek. İçeriği dinamik olarak yükleyen bir bağlantınız olduğunu varsayalım. href değer boştur, çünkü her şey JavaScript ile yüklendi.

    Bunun yerine, ayarlamak için akıllıca olacaktır href özellik farklı bir sayfaya yönlendir içeriğin doğal olarak yüklenebileceği, ancak ziyaretçi yalnızca JavaScript devre dışı bırakıldığında bu sayfayı görür.

    Aşamalı geliştirme, JavaScript'ten daha fazlasıdır, ancak web geliştirme her yıl daha da ilerliyorsa, JavaScript'in önemli bir rol oynadığına dair hiçbir şüphe yoktur..

    Varsayım altında işletmek her şey devre dışı bırakıldı, ve oradan yukarı ölçeklendirmek. Bu, kontrolünüz dışında olan gömülü widget'larla ilgili sorunları içerebilir;

    Ayrıca, JavaScript özelliklerini düşünün. kapsamlı tarayıcı desteği yok. Bu, API API'yi, push API'yi, ok işlevi sözdizimini ve hatta jQuery gibi modern kütüphaneleri desteklemeyen tarayıcıları içerir..

    Her özellik gerektirir bireysel test bireysel bir çözümle.

    Aşamalı olarak geliştirilmiş JavaScript'in özü Herhangi bir komut dosyası kullanmadan çalışan içerik oluşturma. Bu ilkel bir kullanıcı deneyimine yol açabilir, ancak web sitesi kullanılabilir olduğu ve içeriğe erişilebilir olduğu sürece sorun değil..

    Canlı test yapmak istiyorsanız, tipik olarak her büyük tarayıcıda CSS ve JavaScript’i devre dışı bırak web sitenizin nasıl çalıştığını görmek için. WCAG uyumluluğu için A-Tester gibi uzantıları kullanmayı da düşünmeye değer.

    Aşamalı geliştirme ile JavaScript büyük bir konudur. Daha derinlere inmenize yardımcı olacak bazı yazılar:

    • İlerici Geliştirme! = “JavaScript yok”
    • Etkileşim Anahtardır: Aşamalı Geliştirme ve JavaScript
    • Aşamalı Geliştirme: İçerik Hakkında
    • JavaScript bir Gereksinim Gibi Göründüğünde Aşamalı Geliştirme Nasıl Uygulanır?

    Aşamalı Geliştirmenin Kısaldığı Yer

    Her aşamalı modern web sitesi için aşamalı geliştirme her ne kadar mükemmel bir fikir olsa da, web teknolojisinin sınırlarını zorlamayı amaçlayan projelere uygulanamaz.

    Örneğin, bu metodoloji yalnızca Ajax aramalarında çalışan web uygulamaları için iyi bir çözüm değildir. Bu erişilebilirlik için iyi bir seçim mi? Hayır tabii değil. Ancak durum böyle olsaydı, çoğu Codrop öğreticisi bile mevcut olmazdı. Yapman gerek hedef kitleyi hatırla.

    Bir iş web sitesi muhtemelen gösterişli yeni CSS3 perspektif özelliklerini önemseyen bir kitleye sahip değildir, ancak web geliştiricileri bu tür gelişmiş özellikler için mükemmel bir izleyici kitlesi olabilir..

    Aşamalı geliştirme yalnızca web uygulamaları için yetersiz kalıyor sadece zamanda geri gitmeyi umursamıyorum. Bu web uygulamalarının aralarında çok az olduğunu fark ettim, ancak geliştiriciler ilerlemeyi seviyorlar ve bazı durumlarda yeni teknolojiyi geride bırakarak ilerleyenleri geride bırakabilecekler.

    Ben genel web projeleri için ilerici bir gelişme (hatta zarif bir bozulma, sizin seçiminiz) savunucusuyum. Ancak bunun her şey için mükemmel bir çözüm olmadığını da biliyorum. Aslında, mükemmel bir çözüm yok. Her şey izleyici ihtiyaçlarına ve proje hedeflerine bağlı.

    Daha fazla okuma

    Sürekli web projeleri oluşturuyorsanız, iş akışınıza aşamalı iyileştirme uygulamalısınız. İlk bakışta göründüğünden çok daha kolay ve hepsi temelden başlıyor. Aşamalı geliştirmeyi çevreleyen çoğu konu sadece pratik ve test gerektirir. Bu makaledeki önerileri deneyin ve iş akışınız için en uygun olanı görün.

    Aşamalı geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, aşağıdaki ilgili yayınlara göz atın:

    • İlerici Geliştirmeyi Anlamak
    • Aşamalı Geliştirme: Nedir ve Nasıl Kullanılır??
    • JavaScript Bağımlılığı Boşluğu: Efsaneye Yaklaşan Aşamalı Gelişme