W3C Validator yani Türkçesiyle geçerlilik testi web standartlarıyla alakadar olan web tasarımcı ve web geliştiricilerinin sık sık kullandığı bir araçtır. Hani sağda solda da çok görüyoruz işte “XHTML/CSS Valid” diye ikonlar, bannerlar yerleştiriliyor site ve blogun altında geçerlilik testinden geçildiğini belirten. Kimimizin hiç umrunda olmayan kimimizin de aşırı derecede fanatikliği yapılan ve adeta bir minik bir pazarlama aracı olarak kullanılan (bu kötü birşey mi ayrıca tartışılır aslında xD) bu test.
Peki geçerlilik testi gerçekten gerekli mi? Bu soruya cevap vermeden önce gelin geçerlilik testinin ne olduğunu, yararlarını ve bu konu hakkında nasıl bir yöntem izleyebiliriz bunları inceleyelim. En sonunda da bu soruya cevap verelim. :)
Geçerlilik Testi Nedir?
Geçerlilik testi yazdığımız HTML, XHTML veya CSS dosyalarının W3C Birliği tarafından oluşturulan kurallara göre yazılıp yazılmadığını ve eğer hata yaptıysak nasıl düzeltileceğine ilişkin önerileri getiren yine W3C Birliği tarafından yaratılan interaktif bir test uygulamasıdır.
XHTML dosyalarını geçerlilik testine tabi tutmak için buradaki aracı, CSS dosyalarını geçerlilik testine tabi tutmak için ise buradaki araç kullanılır.
Yararları Nelerdir?
Geçerlilik testinin yararlarını ve dolayısıyla W3C Birliği’nin oluşturduğu kurallara uyarak elde edeceğiniz yararları listelemek gerekirse:
- Geçerlilik testi sonucunda çıkan sorunları çözmeniz karşılığında tarayıcılar arasındaki oluşabilecek görünüm farkı olasılığını aşağıya çekmiş olursunuz.
- Hataları düzeltilmiş ve kurallara uyan HTML veya XHTML sayfası ile daha temiz ve düzenli kodlara sahip olursunuz.
- Daha temiz ve düzenli kodlardan oluşan sayfalar da SEO açısından önemlidir. Yani Google sayfanızı daha iyi indeksler.
- Geliştirme süreciniz hızlanır. Eğer bir web uygulaması geliştirmeyi düşünüyorsanız muhakkak işin içinde JS, DOM gibi teknolojileri de kullanacaksınız demektir. Yazım yanlışları ve kuraldışı kodlar içeren HTML veya XHTML sayfalarınızın olduğunu bir düşünün. Bu sayfalara bağlı JS kodları yazdığınızda muhtemelen birtakım sorunlarla karşılaşacaksınız. Bu sorunlar da sizin zamanınızı ve paranızı alıp götürecektir.
- Olası gözden kaçan yazım hatalarını geçerlilik testi sayesinde elimine edebilirsiniz.
Şu anda aklıma gelen yararlar bunlar. Eğer bunlardan başka bildiğiniz bir madde varsa makaleyi ona göre güncelleyebiliriz. ;)
Nasıl Bir Yöntem İzlemeliyiz?
Ben kendi tecrübelerime dayanarak sizlere birtakım önerilerde bulunmak istiyorum:
- Otomatik tamamlama özelliğine sahip bir editör kullanın. Böylece yazım hatalarını bir nebze azaltmış olacaksınız. Ayrıca biraz daha hızlı kod yazma olanağına sahip olacaksınız. Size önerim E Text Editor, Aptana veya ActiveState Komodo Edit adlı editörlerden herhangi birini kullanmanız. E Text Editor kişisel tercihimdir.
- Web tasarımınızı XHTML/CSS‘ye çevirirken belli aşamalarda geçerlilik testini muhakkak uygulayın. Örneğin #top, #center, #bottom adlı üç tane
div‘imiz varsa her birdivve iç kısmını kodladıktan hemen sonra geçerlilik testinden geçirin. - Normalde XHTML dosyalarınız için buradaki geçerlilik testi uygulamasını, CSS için de buradaki geçerlilik testi uygulamasını kullanırız. Her iki geçerlilik testine Web Developer Toolbar adlı Firefox eklentisini kullanarak daha hızlı erişebilirsiniz. Hem FTP‘deki hem de yerel sunucunuzdaki dosyaları Web Developer Toolbar‘ın Tools menüsündeki komutlarla kolayca geçerlilik testine tabi tutabilirsiniz.
- Geliştirme işinizde yine işinize yarayacağını umduğum HTML Validator adlı Firefox eklentisini tavsiye edeceğim. Bu eklenti bir nevi Firefox içinde dahili geçerlilik testi yapıyor. Ama dikkat etmek gerekirki kimi zaman bu eklenti sayfanızda herhangi bir hata olmadığını söylemesine rağmen W3C‘nin geçerlilik testinde sorunlar çıkabiliyor. Kısacası bu eklentiyi muhakkak kullanın ama siz siz olun W3C‘nin geçerlilik testini yabana atmayın. Her ne olursa olsun yukarıda yazdığım önerideki gibi adım adım W3C‘nin geçerlilik testini çalıştırın.
- Yazım hatalarını en aza indirgemek için oluşturduğunuz hazır XHTML ve CSS şablonlarızı kullanın. Böylece tekrar tekrar kod yazmak zorunda kalmaz ve yanlış kod yazma olasılığınızı azaltmış olursunuz.
- XHTML ve CSS için referansları elinizin altında bulundurun. Benim en çok kullandığım Sitepoint‘in yaptığı XHTML referansı ve CSS referansı. Kimi zaman bazı özellikleri unutabiliyoruz değil mi? :)
- Geçerlilik testi sonunda çıkan hataların çözümlerini öğrenin. Bunun için benim daha önce yazdığım Sıkça Karşılaşılan XHTML Hataları adlı yazıma ve Eren Emre Kanal’ın Siberkültür‘de yazmış olduğu yine W3C Kontrolüne Takılan Hataları Ayıklama adlı yazıyı okuyun.
Yine benim bilmediğim sizin bildiğiniz farklı bir öneriniz varsa burada belirtmeniz beni memnun edecektir. Sonuçta bildiklerimizi burada paylaşıyoruz öyle değil mi? :)
Geçerlilik Testinin Önemi
Görebileceğiniz üzere geçerlilik testinin biz web tasarımcı ve web geliştiricileri açısından çok faydası var. Bunları görmezden gelmek tam anlamıyla saçmalık olur.
Ama şöyle de birşey var ki şu anki CSS 2.1 sürümü bazı ihtiyaçlarımızı karşılamıyor. Mesela CSS‘de şeffaflık için kullanılan opacity etiketinin tarayıcıdan tarayıcıya göre değişen kullanımı mevcut. Örneğin Internet Explorer’da sadece filter: alpha(opacity=50); gibi saçma bir kodla şeffaflık verebilirken diğer tarayıcılarda opacity:.5; vermemiz yeterli oluyor. Üstteki filter etiketini kullanınca da W3C geçerlilik uygulaması hata olduğunu belirtiyor.
Başka bir örnek vermek gerekirse mesela yine CSS 2.1′de olmayan ama CSS 3′de olan border-radius özelliği. Bu özellik sayesinde div‘lerin kenarlarına herhangi bir görsel kullanmadan ovallik verebiliyoruz. Ama bu bir CSS 3 özelliği olduğu için yine W3C geçerlilik testinde hata verecektir.
Arkadaşlar ben bu gibi durumları önemsemiyorum. Çünkü gerçekten bu tür özelliklere ihtiyacımız var ve kullanıyorum. Bu tip hataları kafanıza takıp fanatiklik yapmanın bir gereği yok. :)
Bir de web standartlarını sayfalarının XHTML ve CSS kodlarının geçerlilik testinden sıfır hata ile geçmesi sanan arkadaşlar var. Bence bu da yanlış bir düşünce.
Web standartları denen kavram çok geniş. İçinde erişilebilirliği, kullanılabilirliği, yapı ve sunumun ayrılmasını, anlamlı kod oluşturmayı vs. gibi alt kavramları barındırır. Geçerlilik testi ise bu alt kavramların altındaki yapı ve sunumun ayrılması ilkesini doğru ve düzenli bir şekilde yapabilmek için sadece ve sadece bir araç. Başka da birşey değil! :)
Kısacası sitenizin kodlarının geçerli olması demek web standartlarına tamamen uyduğunuz anlamına gelmiyor. Ama unutmamak gerekirki geçerlilik testi çok önemli bir araç ve bunu mutlaka kullanmamız gerekiyor.
- Tarih: 22 Eylül 2008 01:29
- Geri İzleme Yap
- Kategori: Css, Html/Xhtml, Web Tasarım
Yorum Yaz
Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.
Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.
Benim adım Fatih Turan. 24 yaşındayım ve Rize’de yaşıyorum. Serbest web tasarımcılığı ve
Yorumlar
Bu yazı hakkında 18 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?
Çok açıklayıcı bir yazı olmuş,teşekkürler.
W3C validator, sayfamdaki form elementi için name=”..” şeklinde tanımlı olduğunu iddia ederek “1 error” gösteriyor.!
“XHTML 1.0 Transitional” seçince hiçbir hatam yok ama sayfam “XHTML 1.0 Strict” olsun istediğimden ayarları ona göre değiştim fakat sağolsun W3C yukarıda belirttiğim hatayı veriyor. İşin ilginç yanı IE,FF,Chrome, bu 3 browserda sayfanın kaynak koduna baktığımda form elementi için name=”..” gibi bir tanımlama bulunmuyor bile. W3C validator ile sayfanın kaynak kodunu kopyalayıp validate ettim, bu sefer “passed” yani hiç hata yok.!
Sanırım W3C validator herzaman tam olarak düzgün kontrol etmeyebiliyor (Renderında bir sorun olduğuna kanaat getirdim.! )
Bu durumda transitional olarak kalıp “0 hata” yani “PASSED” yazması mı daha iyi, yoksa strict olarak değiştirip “1 error” ile kalması mı iyidir? Senin bir fikrin varmı bu ilginç durum hakkında? :)
Uğur ÇELENK → http://www.ugurcelenk.com/ 22 Eylül 2008 02:31
Çok güzel ve faydalı bir yazı olmuş. Eline sağlık. Bu yazıyı okuyunca, aklıma arkadaşımla birlikte yaptığımız bir proje geldi. Hemen tanıtımını yapayım :)
http://www.validchecker.com
ODTÜ’nün sitesinin valid ayarlarını kontrol ediyoruz. Çok kullanışlı bir site oldu web masterlar için. Ayrıca haberimiz bile olmadan Killerstartups’ta çıkması da bizi oldukça şaşırttı. Halbuki hiçbir şey beklemiyorduk bunu yaparken :)
Taci Yalçın → http://www.vebiki.com 22 Eylül 2008 04:32
Güzel bir yazı olmuş Eline sağlık.
Geçerlilik testinde en büyük sorun bazı sorunlar(opacity) için düzeltme yazmak zorunda kalıyoruz. Müşteri istemese bende takmayacağım ama müşteri her zaman haklı işte
fatih → http://www.fatihhayrioglu.com 22 Eylül 2008 10:02
@Uğur: XHTML 1.0 Strict Doctype’ını kullanan bir sayfada
formelementinenameözelliğini kullanamıyorsun. Bu kuraldışı oluyor. Hatta XHTML 1.1′denameözelliği tamamen kaldırılmış. Bakınız bu blogdaki yazıda bu mevzudan bahsedilmiş. :)@Taci: Validchecker’i biraz inceledim de güzel bir uygulama olmuş. ;)
@Fatih: Müşteriye bu durumu açıklayınca eminim ki sana hak verecektir. Eğer çok katı bir müşteriyse bahsettiğin gibi alternatif yollarla sorunu çözmekten başka şansımız kalmıyor. :)
fatihturan → http://www.fatihturan.com 22 Eylül 2008 11:49
Yazı enfes olmuş. Bir solukta okudum hepsini. Geçerlilik testi yapılmalı ama çevremizde görüyoruz adamlar biraz abartıyor. Herşeyi geçerliliğe bağlıyor. Bu da doğal olarak zaman kaybı getiriyor. Temel noktalarda geçerlilik şart ama detaylar için olmasa da olur diye düşünüyorum. Sonuçta sitemize geçerliliğe göre girilmiyor ya :)
ilyas TEKER → http://ilyasteker.com 22 Eylül 2008 12:26
@fatih turan, yazdıklarım gözünden kaçıyor sanırım :) Ben yukarıda ki yorumumda zaten name özelliği desteklemediği için hata verdiğini söyledim, fakat benim sayfanın çıktısının bile html kodunda form elementinin name gibi bir özelliği zaten gözükmüyor ama W3C bu sayfayı render ederken bir şekilde bu name özelliğini de form elementine ekliyor.!
Benim bilmek istediğim –> transitional olarak kalıp “0 hata” yani “PASSED” yazması mı daha iyi, yoksa strict olarak değiştirip “1 error” ile kalması mı iyidir?
Uğur ÇELENK → http://www.ugurcelenk.com/ 22 Eylül 2008 12:53
@Uğur: “Sayfam” diye tabir ettiğin şey şayet blogun ise onu az önce XHTML 1.0 Strict’e göre bir geçerlilik testine tabi tuttum. Satır 28 veya 29′da bir
formelementi bulunmakta. Hatta buform‘unnameözelliği de bulunmakta. Bu yüzden hata veriyordur.Fakat farklı bir sayfa, site veya blogdan bahsediyorsan ve orada bu bahsettiğin mevzu var ise yani sayfada herhangi bir
formelementi olmamasına rağmen W3C Validator’un varmış gibi davranıyorsa burada bir gariplik olduğu kesin.Ama şöyle birşey de var ki ben daha önce böyle bir durumla karşılaşmadım. W3C’nin de böyle bir hata yapacağını düşünmüyorum.
Bence Transitional’da kullansanız Strict’de kullansanız her iki döküman tipinde de hataların giderilmesi gerekir. Ama öyle bir durum olur ki kullandığınız CMS (veya herneyse) W3C standartlarına göre kod üretemez. Bu durumda Transitional döküman tipini kullanabilirsiniz.
fatihturan → http://www.fatihturan.com 22 Eylül 2008 13:31
@Fatih Turan,
Yok, kendi blogum için denemedim, uzun süredir üzerinde uğraştığım bir site için deniyordum. Belki sende validate etmeyi denemek istersin diye site adresini iletişim bölümünden gönderiyorum, bence sorun W3C de :)
Uğur ÇELENK → http://www.ugurcelenk.com/ 22 Eylül 2008 13:43
Mükemmel bir yazı olmuş. Başka hiç bir açıklaması yok. Son zamanlarda bahsettiğiniz gibi benide bu standartların fanatikliği sardı. Yazınız için tekrar teşekkür ederim. Bu şekilde yazılarınızı 4 gözle bekliyorum.
Hakan COŞAR → http://www.hakancosar.com 22 Eylül 2008 13:47
Çok önemli bir konuya değinmişsin. Teşekkürler.
Her ikisinde de geçtim :) Ancak CSS üzerinde 109 tane uyarı var. Zamanla bunları düzeltmeye de çalışırım ancak kullandığım browserlarda bir sorun ile karşılaşmıyorum bu yüzden yapmasam da olur. Zaten o kadar zamanım da yok :)
müJdaT → http://www.mujdatkorkmaz.com 22 Eylül 2008 14:06
@Uğur: Verdiğin bağlantıdaki sayfanı inceledim. Bahsettiğin gibi bir durum sözkonusuymuş. Gerçekten ilginç. :)
nameözelliği olmamasına rağmen W3C validator varmış gibi davranıyor. Bu problem kullandığın ASP.NET teknolojisi yüzünden olabilir mi acaba?Az önce Google’da bu konuyla ilgili bir arama yaptım ve bu sonuç ile karşılaştım. Bilemiyorum belki işini görebilir.
Bu arada yazdığın kodlarda da bir çok anlamsal bozukluklar bulunmakta. Bunlara da odaklanmanı öneririm. Mümkün olduğunca JS ve CSS kodlarını HTML sayfandan ayrıştırmalısın. Yani yukarıda yazdığım gibi yapı ve sunumu ayırman gerekiyor.
Bir de bazı yerlerde gereksiz
hr,br,spangibi etiketler kullanılmış. Kodlar düzensiz.Bence sen bu geçerlilik testinden önce o hataları düzeltmelisin. :)
fatihturan → http://www.fatihturan.com 22 Eylül 2008 14:27
Konuyu saptırmak adına son yazım olacak bu :)
Maalesef Asp.NET kendi kurallarını uyguladığından, html çıktısına kafasına göre kodlar atabilmekte, özellikle Asp.NET Ajax framework kullanıldığında html çıktısına js kodları atıyor ve senin html çıktısındaki js leri ayır diyerek bahsettiğin yerdeki gibi kötü gözüken kodlar oluşuyor, maalesef buna müdahale etmek nerdeyse mümkün değil :)
Siteye baktığındaki hali, google arama sonucunda bulduğun olayın denenmiş haliydi aslında.
Gereksiz yere kullanılan taglarının farkındayım, yapılacaklar listemde mevcut bunlar da :)
Teşekkürler zaman ayırdığın için.
Uğur ÇELENK → http://www.ugurcelenk.com/ 22 Eylül 2008 14:46
Eğer kodlamaya yeni başlıyor, kendinizi geliştirmek istiyorsanız kesinlikle müdavimi olup sık kullanılanlarınızda bulundurmalısınız. Ama yok Fatih gibi iyi kodlayan, yani ne yaptığını bilen gruba dahilseniz geçerlilik testi kestiremediğiniz hataları keşfetmenizden öte bir fayda sağlamıyor bence.
Eren Emre Kanal → http://www.siberkultur.com 23 Eylül 2008 08:30
gerçekten çok güzel bayada bi yorum yapılmış yorumlarda öğretici yazıda ellerine sağlık…
ergin Akdoğan → http://www.aktifcozum.com.tr 23 Eylül 2008 11:39
@Eren Emre Kanal +1
Volkan Görgülü → http://webdeneyimleri.donanimhaber.com 23 Eylül 2008 22:33
Yazı güzel olmuş eline sağlık.
Benim site içinde kullandığım kodlarda ilk başta yaptığımda 600 e yakın hata çıkmıştı. bende üşenmeyip hepsini düzenlemiştim yazın. Şu an sıfır hata veriyor. ama ne yazık ki youtube videoların kodunda sürekli hata veriyor. Videonun olduğu sayfada 6 hata çıkıyor. Gerçi ilglenmedimde çok belki oda düzeltilebilir…
Ayberk Atasay → http://www.ayberk.com 09 Ekim 2008 17:10
@Ayberk: Youtube’ın video kodu yerine Erhan‘ın yapmış olduğu Youtube Valid Code Generator adını verdiği araçla video için geçerli kodu üretebilirsin.
fatihturan → http://www.fatihturan.com 09 Ekim 2008 17:21
evet bu çok iyi oldu, düzeldi. tekrar w3c testinden geçiyor (:
teşekkürler tekrar..
Ayberk Atasay → http://www.ayberk.com 09 Ekim 2008 18:13