Web Standartları

Web standartları nedir?

Web standartları, W3C ve diğer standart oluşumları tarafından bir araya getirilmiş olan, web tabanlı içeriğin yaratılmasında ve çözümlenmesinde kullanılan teknolojilerdir. Bu teknolojiler, gelecekte de doğru biçimde görüntülenebilecek dökümanların Web’de yayımlanmasını ve bu dökümanların olabildiğince çok insan tarafından erişilebilir olmasını sağlamak üzere tasarlanmışlardır.

Neden web standartlarını kullanmalı?

Bazı web geliştiricileri ve tasarımcıları web standartlarını kullanmaya karşı direnç gösterirler. Sık görülen nedenler şunlardır: Çok zor, Nasıl olsa her şekilde çalışıyor ve Kullandığım araçlar geçersiz kod üretiyor, ne yapayım.

Duygusal olarak tepki göstermek ve bildiğiniz, kullanırken kendinizi rahat hissettiğiniz teknikleri bırakıp yeni birşey öğrenmeye direnç geliştirmek çok kolaydır. Ancak, duruma mantıklı olarak bakarsanız web standartlarını öğrenmenin ve kullanmanın bir çok getirisi vardır. 


Bunlara bir kaç örnek:

• Daha kolay geliştirme ve bakım: Daha semantik ve yapılandırılmış HTML kullanmak başka birisi tarafından yazılmış kodu anlamayı kolaylaştırır ve hızlandırır.
• Gelecekte ortaya çıkacak tarayıcılarla uyumluluk: Tanımlanmış standartları kullanır, geçerli kod yazarsanız, yeni çıkacak tarayıcıların dökümanlarınızı anlamaması riskini azaltır yani dökümanlarınızı gelecek uyumlu yapmış olursunuz.
• Web sayfalarının daha hızlı indirilmesi ve çözümlenmesi: Daha az HTML kodu daha küçük dosya boyutu ve daha hızlı indirilme demektir. Modern tarayıcılar, sayfaları, standart moddayken, geçmiş uyumlu moddayken olduğundan daha hızlı çözümlerler.
• Daha fazla erişilebilirlik: Semantik HTML, yani yapının sunumdan ayrıldığı HTML, ekran okuyucuların ve alternatif tarayıcı araçlarının içeriği daha kolay algılamasını sağlar.
• Daha yüksek arama motoru sıraları: İçeriğin ve görünüşün ayrılması içeriğin sayfa boyutunun çok daha fazlasını temsil etmesi anlamına gelir. Semantik kodlarla birlikte bu, sayfanın arama motoru sırasını yükseltir.
• Daha kolay uyum: Semantik biçimde oluşturulmuş bir döküman, yalnızca farklı bir CSS dosyası ile ilişkilendirilerek yazdırma işlemi ya da el bilgisayarları veya cep telefonları gibi alternatif tarayıcı araçlara çok daha kolay uyumlu hale getirilebilir.

Geçerleme

Geçerleme, bir dökümanın, yazıldığı dilin kurallarına uyup uymadığını kontrol etme işlemidir. Bu işlemi, bir metnin yazım ve sözdizim kurallarına uyumunu kontrol etmeye benzetebilirsiniz.

Ne yazık ki bir çok insan sayfalarını geçerlemez. Bazı insanların bundan haberleri bile yoktur, diğerleri ise bu işlemi unuturlar ve hatta bazıları bilerek ve isteyerek geçerlemeden sakınırlar. Bu durum için ağırlıkla tarayıcı üreticileri suçlanabilir. Birçok tarayıcı hata vermek yerine, geçersiz HTML kodlarını ellerinden geldiğince düzgün biçimde çözümlemeye ve yazan kişinin ne kastettiğini becerebildiği kadar kestirmeye çalışır. İşte tarayıcıların bu davranışları bugün yazılmakta olan özensiz kodlara neden olmuştur. Bu tür kodlar kestirilemeyen sonuçlar ürettikleri ve web tarayıcıların hata işleme yöntemlerine güvendiklerinden dolayı sorunludurlar.

Yapı ve sunum:

Web standartlarından sözedilirken sıkça değinilen konulardan biri yapıyı ve sunumu belirleyen kodun birbirinden ayrılmasıdır. Özellikle dökümanın semantik yapısını düşünmeye alışkın değilseniz başlangıçta yapı ve sunumu belirleyen kodun farkını anlamak zor olabilir. Ama, bunu anlamak çok önemlidir. Çünkü bu ikisi birbirinden ayrıldığında bir dökümanın sunumunu CSS ile konrtrol etmek daha kolaydır.

Yapı bir dökümanın olmazsa olmaz parçaları ve içeriğinin semantik ve yapısal kodudur.

Sunum ise içeriğe verdiğiniz stildir. Birçok durumda sunum dökümanın nasıl göründüğü ile ilgilidir ancak herkes grafik bir tarayıcı kullanmadığından bazen dökümanın nasıl duyulduğunu da belirler.

Yapıyı ve sunumu mümkün olduğunca birbirinden ayırın. İdeal olarak, sadece yapıyı ve içeriği kapsayan bir HTML dökümanınız ve sunumu kontrol etmenizi sağlayan bir de CSS dökümanınız olmalıdır.

Yapının ve sunumun birbirinden ayrılması günümüz web tasarımında yaygın değildir. Birçok web sitesinde HTML kodu hem yapısal hem de semantik olarak eksiktir.

Semantik HTML

Yapıyı sunumdan ayırmanın diğer bir önemli parçası dökümanın yapısını kodlamak için semantik HTML kullanmaktır. Dökümanın o bölümünde kullanmaya uygun yapısal anlamı olan bir xhtml etiketi varsa onun yerine başka bir şey kullanmak için hiçbir nedeniniz olamaz. Diğer bir deyişle bir HTML etiketini başka bir HTML etiketi gibi göstermek için CSS kullanmayın. 


Örneğin; bir başlığı kodlamak için yazıyı seçip onu bold ve büyük yapmak yerine h1 etiketini kullanın.

Semantik HTML kullanarak bir dökümanın değişik bölümlerinin tüm web tarayıcıları için anlamlı olmasını sağlarsınız. Bu tarayıcı, modern bir PC’deki en son grafik tabanlı web tarayıcı, CSS’i işleyemeyen eski bir tarayacı ya da Unix üzerinde metin tabanlı bir tarayıcı olsa da farketmez.

Örnekler:

Döküman başlığı h1 ile


Alt başlık h2 ile


Paragraflar p ile


ifade edilmelidir.


Paragraflar arasında boşluk yaratmak için br elemanını kullanmayın. Paragraflar arasındaki aralıklar (margin) CSS tarafından belirlenir; bu da paragrafların doğru biçimde kodlanmasını gerektirir.


(X)HTML
HTML 4.01 kullanarak modern, yapılandırılmış ve standartlara uyumlu web sayfaları oluşturmak mümkündür. Ancak, temiz, semantik kodlamaya geçiş ve XML gibi diğer gelecek kodlama dillerine daha hazırlıklı olmak için yeni oluşturulacak web sayfaları için XHTML 1.0 Strict kullanılmasını öneririm. Bu dökümandaki örnekler de XHTML 1.0 Strict kullanılarak hazırlanmıştır.

XHTML 1.0, HTML 4’ün XML 1.0 içinde yeniden formule edilmiş ve HTML’in yerine kullanılmak için geliştirilmiş halidir. Kullanılmasını önerdiğim XHTML 1.0 Strict sunuma yönelik kodlama yapılmasına izin vermez (HTML 4.01 de buna izin vermez ama burada XHTML’e odaklanmak istiyorum). Bu yüzden, XHTML 1.0 Strict yapıyı sunumdan ayırmaya zorlar. Strict ile yazılmış bir HTML dökümanındaki hatalar browserlar tarafından düzeltilmez bu da bizi düzgün şekilde kod yazmaya zorlar.




Doctype

Şu an, çok az HTML dökümanının doğru ve tam bir döküman tipi (doctype) ya da DTD’si (Document Type Declaration) vardır. Birkaç yıl öncesine kadar işlevsellikten çok dekoratif olarak kullanılmaktaydı ama artık bir döküman tipinin oluşu tarayıcıda dökümanın nasıl çözümlendiğini büyük oranda etkilemektedir.

Geçerli olmak için tüm HTML ve XHTML dökümanlarının döküman tipi deklerasyonu olması gerekir. Doctype, HTML ya da XHTML’in hangi sürümününün kullanıldığını belirtir.

Karakter kodlaması (Character encoding)

HTML dökümanları karakter kodlamalarını belirtmek zorundadır.

Karakter kodlamasını belirtmenin en doğru yöntemi web sunucusunu karakter kodlaması ile birlikte content-type başlığını da gönderecek biçimde yapılandırmaktır. Bunu yapmanın detayları hakkında daha fazla bilgi için kullandığınız web sunucusu yazılımının belgelerine bakmalısınız.

CSS

Şimdiye kadar çoğunlukla font özelliklerini belirtmek için kullanılan CSS artık dökümanın tüm düzenini kontrol etmek için kulanılabilir. Ancak bunu etkili bir biçimde yapabilmek düzeni tablolar kullanarak belirlemekten çok daha farklı bir yaklaşım gerektirir.

CSS’in düzeni etkili bir biçimde kontrol edebilmesi için yapısal ve semantik XHTML kullamak gerekir.

Erişilebilirlik

Erişilebilirlik, bir web sayfasını erişilebilir kılmak için en önemli neden bu olsa da sadece engelli ziyaretçilerin kullanımını desteklemek değildir. Erişilebilir bir web sayfası engelli ya da değil herkes için en iyi şekilde çalışır ve farklı web tarayıcılar veya araçlar kullanan çok sayıda insan tarafından erişilebilir.

Bir web sayfasını erişilebilir yaptıkça o sayfanın daha az çekici olacağı ya da erişilebilir olmayan bir web sayfasından çok farklı görüneceği sık rastlanan bir yanlış algılamadır. Bu kesinlikle doğru değildir. Erişilebilirlik görünümü etkilemek zorunda değildir.

Çerçeveler

Birçok web tasarımcısı tarayıcı penceresini, herbiri kendi HTML dökümanını içeren bağımsız parçalara bölmek için çerçeveleri kullanmayı sever. Bu intranet uygulamaları için faydalı olabilir. Ama herkese açık bir web sitesinde çerçeveleri kullanmanın bir çok sakıncası vardır:

Ziyaretçilerin kafasını karıştırısınız. Web’in en temel presniplerinden biri her sayfanın tekil bir URL tarafından temsil edilmesidir. Bu prensibi kırarak ziyaretçilerin web sitenizin yapısını anlamalarını zorlaştırırsınız.

Çerçeveler arama motorları için sorun yaratır. Bir arama motorunun çerçeveli bir web sitesini indeksleyebilmesi için tüm içerik sayfalarına bağlantı vermeniz gerekir. Yönlendirme bağlantıları gibi sitenin önemli parçalarının eksik olduğu bir dökümanı görüntülemek istiyor olacaklarından arama motorları aracılığıyla gelen ziyaretçiler de sorunlarla karşılaşacaktır. Bazı çerçeve temelli web siteleri, alt sayfaların indekslenmesini engellemek için robots.txt dosyası kullanarak bunun üstesinden gelmeye çalışırlar. Diğer siteler ise arama motorları aracılığıyla siteye gelen herkesi bir JavaScript yardımıyla ana sayfaya yönlendirirler. Hedef daha az ziyaretçi sayısı ise her iki yöntem de iş görür.

Çerçeveler favorilere ekleme işlemini engelleyebilir. Birçok tarayıcı çerçeve temelli bir sitedeki sayfaları favorilere ekleyemez. Böyle bir favoriyi açtığınızda çerçeve grubunun varsayılan durumuna yönlendirilirsiniz, ki bu genellikle web sitesinin ana sayfasıdır.

Yazdırmak çok zorlaşabilir. Ziyaretçiler dökümanları yazdırmak istediğinde zorluklar yaşayacaktır. Birçok tarayıcı bir çerçeveyi yazdırmadan önce o çerçeveyi aktive etmenizi bekler.

Bağlantıları e-posta aracılığıyla yollamak zorlaşır. Çerçeveler, sitedeki bir sayfaya bağlantıları e-posta ile gönderme olasılığını ortadan kaldırır. Bunu aşmanın yöntemleri vardır ama bu yöntemler siteyi karmaşıklaştırır.

Sitenin erişilebilirliğini artırmak zorlaşır. Çerçeveleri destekleyen grafiksel bir tarayıcı kullanmayan ziyaretçiler sorun yaşarlar. Bu yüzden erişilebilirlik kılavuzları çerçeve kullanılmamasını önerirler.

Tablolar

Genelde insanlar “sayfa düzeni için tablo kullanmayın” önerisini “tablo kullanmayın” olarak yorumlamaktadır. Ancak bu yanlış bir algılamadır. Kodlamaya çalıştığınız tablo verisiyse bir tablo kullanmalsınız. Ancak, veri tabloları oluştururken tabloları daha mantıklı ve erişilebilir yapmanın birçok yolu olduğunu unutmayın.

Formlar

Genellikle formları kullanmak gereksiz derecede zordur. Bunun nedeni biraz mantıksız yöntemlerle hazırlanmış olmaları biraz da arka plandaki HTML kodunun formları daha erişilebilir ve kullanımı kolay kılmak amacıyla varolan elemanları kullanmıyor olmasıdır.



JavaScript ve cookieler

JavaScript’e bağımlı olmaktan kaçının. Düşündüğünüzden çok daha fazla insan güvenlik nedeniyle ya da açılan pencereleri engellemek amacıyla tarayıcısında JavaScript kullanımı devre dışı bırakmıştır. Hatta JavaScript desteklemeyen tarayıcı bile kullanıyor olabilirler.

URLler

Bu bölüm aslında web standartları ya da erişilebilirlikle ilgili değil. Ama burada, çünkü, URLlerin oluşturulma şekli bir web sitesinin arama motorları tarafından ne kadar iyi indeksleneceğini ve ziyaretçileri tarafından ne kadar kullanılabilir olduğunu belirler.

Bazı arama motorları sonları sorgu ifadeleri ile (query string) biten URLleri takip etmez. İçeriğini dinamik olarak veritabanlarından oluşturulan web sitelerinde bu tür URLler çok yaygındır ve yaklaşık şöyle görünürler:

http://yourdomain.com/urunler.asp?item=34627393474632&id=4344

Hem arama motorları hem de insanlar için daha kullanışlı bir URL oluşturmanın en kolay yolu URL sanki bir klasöre bakıyormuş gibi görünecek biçimde değiştirmektir. Böyle yapıldığında yukarıdaki örnek şu şekilde görünür:

http://yourdomain.com/urunler/urun/34627393474632/id/4344/

Web sunucusu bu yeni URLyi yorumlar ve kendi içinde ilk örnekteki haline dönüştürür. Bunun nasıl yapılacağı ile ilgili detaylı dökümanlara erişebilmeniz için bağlantıları bu bölümün sonunda bulabilirisiniz.

Daha kolay ama daha karmaşık bir yöntem ise görünür URLleri yeniden yazmak (rewrite) ve insanlar tarafından okunur kılmaktır:

http://yourdomain.com/urunler/cicekler/laleler/

Bu tür URL kullanmanın avantajları, arama motorları tarafından sitenin daha etkili indekslenmesi, URLlerin insanlar tarafından kolay okunabilmesi ve sunucu tarafında hangi teknolojiyi kullandığınızı gizleyebilmenizdir. URL, .asp, .cf, .cgi or .jsp gibi, sunucuya özgü dosya uzantılarını içermediğinden, bunu yapmanız gerektiğinde sunucu tarafında kullandığınız teknolojiyi değiştirmek de kolay olacaktır.