kod

Web Tasarımında Neden Önemli İşaretler Önemli?

Web sürekli değişen ve sürekli gelişen bir organizma olduğu için, yeni bir dalga yaklaştığında boğulmak yerine akıntıya yetişen ve kolayca akıp gidebilen siteler kurmak önemlidir.

İşaretlemeyi temizle ve web standartlarıyla oluşturmanın sadece bunu yapmanıza yardımcı olmaz, aynı zamanda uzun vadede hem zamandan hem de paradan tasarruf etmenizi sağlar.

Web genişledikçe, kullandığı teknolojiler onunla birlikte büyür. HTML uzun zamandır etrafta dolaşırken, yol boyunca birkaç yardım aldı.

İlk Javascript, daha sonra CSS, XML ve daha sonra AJAX. Firefox, Safari, Opera ve Chrome'un neredeyse tam HTML 5 desteğinin keyfini çıkarması (HTML bloğu üzerindeki yavaş çocuk, Internet Explorer, her zamanki gibi geride kalıyor) ile HTML 5'in geniş bir kullanım alanı hemen köşede.

Bu makalede, web standartlarının temellerini, ne olduklarını, sizin için ne ifade ettiklerini ve bu önemli ve sıklıkla ihmal edilen sorunla başa çıkmanıza yardımcı olacak bazı önemli ipuçlarını inceleyeceğiz.

“Temiz” İşaretlemeyi Ne Demek İster?

Basitçe söylemek gerekirse, karmaşıklık, standartlara uygun ve her dilin etiketlerini ve yapılarını amaçlanan amaçlarla kullanmak anlamına gelir.

Dağınık olmayan HTML etiketlerin seyrek kullanımını sağlar, yabancıyı ortadan kaldırır ve görevini gerektiği kadar küçük bir işaretleme ile gerçekleştirir. Satır içi CSS gibi gereksiz özniteliklerden kaçınır ve her belgeyi yapılandırılmış ve düzenlenmiş bırakır.

Aynı şekilde, dağınık olmayan CSS kendini tekrar etmekten kaçınmalı, miras (Unutmayın, CSS Basamaklı Stil Sayfası anlamına gelir) ve mümkün olduğunda sınıfları yeniden kullanın.

Standartlara uygunluk, sayfalarınızın, yayınladığı standartlarla doğrulandığını gösterir. W3C HTML, CSS ve XML için. Bu, hataları kontrol etmek, düzeltmek ve olabildiğince% 100'e yakın olana kadar tekrar test etmek için ücretsiz W3C doğrulayıcılarını kullanmak anlamına gelir.

Neden umursayayım? Çalışıyor, Yeterli değil mi?

Her projenin agresif bir teslim tarihi vardır ve her müşteri sitelerinin dün yayınlanmasını istemektedir. Web geliştiricileri ve tasarımcıları olarak, daha hızlı ve daha verimli çalışmak için sürekli baskı altındayız.

Hızlı düşünmenin tuzağına düşmek kolay değil, özensiz ve temiz, standartlara uygun işaretleme daha fazla zaman alır. Sadece “işe yarıyor ve önemli olan her şey” demek kolay .

Elbette, işe yarıyor… şimdilik, senin için. Gelecek yıl ya da bundan üç yıl sonra ne olacak? Yeni tarayıcılardan ne haber? Erişilebilirliğe ne dersiniz?

Büyük arama motorlarının özel, özensiz kodlama yöntemlerine bağlı kalacağını düşünüyor musunuz? Çok titizler ve standartlara uymuyorsanız, arama sıralamanızı yüzünüze tekmeliyorsunuz .

Oluşturduğunuz bu sayfaları düzenlemek zorunda olan bir sonraki zayıf sap hakkında ne olacak? Bir otobüse çarptığında, Alaska'da sırt çantasına gitmekten mi yoksa uzaylılar tarafından kaçırılınca ne olur? Başka birileri kaldığınız yerden devam etmeli ve kodunuza bakacak, anlam vermeye çalışacaktır. Kolay mı olacak yoksa ona bir baş ağrısı mı verecek ve ismini lanetleyecek mi?

İlk seferde doğru yap. Bu sadece sinir bozucu, babacık bir hayat dersi değil. Aslında hem zamandan hem de paradan tasarruf edecek ve takip edenlerin daha kolay bir şeyler yapmalarını sağlayacaktır.

Stil sayfanıza yeni bir sınıf eklemek yerine satır içi CSS'ye girmenin daha hızlı olduğunu düşünebilirsiniz. Ve genel belge yapısını göz ardı etmeden tükürdüğünüz herhangi bir HTML'ye atlamanın daha hızlı olduğunu düşünebilirsiniz.

Bu belgeyi daha sonra güncellemek ya da sitenin tamamını yeniden tasarlamaya geldiğinizde, özensiz kod oluşturmadan çok daha fazla zaman harcarsınız. Yeni bir stil sayfası oluşturduğunuzda, aceleyle eklediğiniz sinir bozucu satır içi stilleri sizi rahatsız etmeye geri dönecek ve onları avlamak için saatler harcayacaksınız.

Genişletilebilirlik, Erişilebilirlik, Çeviri ve Gelecek Hakkı

Mobil tarama, atomik steroidler üzerinde Godzilla gibi büyüyor. 5 yıl önce jet ayarlı Blackberry bağımlılarına düşmek yerine, bugün herkes telefonlarını internette gezinmek için kullanıyor.

Engelliler için kör ve alternatif arayüz cihazları için yardımcı teknoloji ekran okuyucuları yaygındır ve bunu hesaba katmadığınız için bir satış veya yabancı trafiği kaybetmek istemezsiniz.

Sitenizin, dünyanın dört bir yanındaki okuyucuların içeriğinizi bulması nedeniyle yarım düzine dile çevrilmesi olasıdır. Teşekkürler İnternet Arşivi , Google’ın önbelleği ve bugün yayınladığınız sayfalar, canlı sitenizden kaldırıldıktan sonra bile uzun bir süre için etrafta olacak.

Temiz işaretleme ve standartlara uyumu, sitelerinizin bu senaryoların her birinde çalışmasını sağlamak için uzun bir yol kat edecektir.

Yapılması ve yapılmaması gerekenler:

  • Etiketleri amaçlandığı gibi kullanmayın. Örneğin: h1, sayfadaki ilk üst düzey öğedir, sonra h2, h3 vb. Sayfa başına yalnızca bir tane h1 etiketi olmalıdır.
  • CSS sınıflarınızı ve kimliğinizi anlamlı terimler kullanarak adlandırın ve kendinize bir başkasının / sınıfının kendi adından ne yaptığını bilmesini isteyip istemediğinizi sorun. Hangi adlandırma kuralı daha mantıklı: # box12 veya # comment-footer?
  • CSS kalıtımını iyi kullanır. Örneğin: bir kapsayıcıda yazı tipi ayarlarsanız, alt öğe farklı bir yazı tipi kullanması gerekmedikçe, her alt öğede yeniden belirtmeniz gerekmez. Bu, stil sayfalarınızı sabit tutar ve hızlı yüklenir.
  • HTML, CSS ve XML’inizi doğrulayın ve olabildiğince fazla sayıda hatayı düzeltin. Üretilen uyarılara da dikkat edin.
  • Çifte kontrol yap WYSIWYG oluşturulan kodu ve gerektiği şekilde temizleyin. Gereksiz, geçersiz çöplerle dolu, şişkin işaretlemeyi tükürmekle meşhurlar.
  • Sadece aceleniz olduğu için satır içi stilleri veya gereksiz etiketleri ve öznitelikleri enjekte etmeyin.
  • “Çalışır” diye karar vermeyin. Bir sayfa ortaya çıktığında, kaputun altındaki işaretlemenin standartlara uygun, problemsiz veya arama motoru dostu olduğu anlamına gelmez.

İleri Okuma ve Kaynaklar


Jeff Couturier tarafından WDD için özel olarak yazılmıştır.

Web sitelerinizde web standartlarını takip ediyor musunuz? Neden ya da neden olmasın? Lütfen yorumlarınızı bizimle paylaşın.

dizayn web standartları markayı temizle