Tam o sırada, başka bir pillinetwork sitesi olan ucandaire.org'da: "pillinetwork'te değişim"

\
Bir web geliştiricisi olarak doğru kod yazmanız gerekir, ancak bu gerçekten önemli mi?

Doğrulamanın ardındaki gerekçelere bir baktım ve web'in en popüler 25 websitesini inceleyerek kodlarının doğru olup olmadığını sorguladım. İşte başlıyoruz...

DoÄŸrulama nedir?
Doğrulama belgelerinizin WWW Konsorsiyumu (W3C) gibi kurumlar tarafından HTML ve XML ile oluşturulan web belge tiplerinin resmi standartları ile uyumlu olup olmadığını test eden bir işlemdir. Aynı işlem WML siteler için WapForum'un yayımladığı standartlara göre yapılır. Normal belgelerimizdeki yazım denetimi ile benzer amacı güderler. (W3C)

Peki neden doğrulamalıyız, getirileri nelerdir?

1. Birbiçimli Olmayan Tarayıcı Doğrulaması
Doğrulanmamış sayfalar tarayıcınızın kodunuzu otomatik olarak doğrulamasına sırtını dayar ve her tarayıcı bunu farklı şekilde yapar. Bu yüzden bir etiketi kapatmayı unutursanız, Firefox bunu gözardı edebilir ancak Safari etmeyebilir bu sebeple farklı tarayıcılarda farklı ve genellikle doğru görünmeyen bir sayfa ortaya çıkar.

2. İşleme Süresi
Eğer kodunuz doğru ise tarayıcınız kodunuzu düzeltmekle uğraşmaz, bu da sayfanızın daha hızlı açılması ile sonuçlanır.

3. Geleceğe Yönelik
Teknolojinin yarın neler getireceğini kestirmek mümkün değildir ancak eğer doğrulanmış bir (X)HTML dosyanız var ise kodunuz gelecekteki web teknolojileri ile sorunsuz çalışacaktır.

4. Google doğrulanmış kodu tercih eder
Shaun Anderson ilginç bir doğrulama testi gerçekleştirmiş; Google doğrulanmış kodu sever mi?

Deneyde aynı içeriğe sahip 4 farklı sayfa doğrulanmış ve doğrulanmamış HTML ve CSS kodları ile kodlanmış. Sonuç ise Google doğrulanmış HTML'ye ve CSS'ye sahip kodu seçmiş ve ilgili sayfayı diğerlerinin üzerinde arşivlemiş.

5. EriÅŸilebilirlik
Doğrulanmış bir koda sahip web sitesinin tüm tarayıcılar tarafından erişilebillir olma ihtimali yüksektir. Buna farklı platformlar ve ekran okuyucuları da dahildir.

6. Bireysel tatmin
Kodunuza doğrulama kontrolü uyguladığınızda ve ekranın üst kısmında yeşil renkli çubuğu gördüğünüzde kendinizi iyi hissedersiniz :)

En sık görülen doğrulama hataları ve düzeltme yöntemleri

a. & iÅŸareti (Ampersan)
En sık görülen sorunlardan birisi budur. Ampersanlar '&' şeklinde yazılmalıdır, '&' şeklinde değil. Bu işlem URL yazarken de geçerlidir.
<a href="http://images.google.com/imghp?hl=en&amp;tab=wi">

b. İki yana bloklar (Quotation)
Element özellikleri daima tırnak işaretleri arasında belirtilmelidir.
<body bgcolor="#ffffff">

c. Kapanış etiketleri
Tüm elementler mutlaka kapanmalıdır ve eğer XHTML DTD kullanmışsanız bu durum görsel etiketleri için bile geçerlidir.
<img src="image.jpg" alt="Image" />

d. Belge türleri (Doctype)
Sayfanız mutlaka doğru Belge Türü Tanımlamasına (DTD) sahip olmalıdır ve bu sayfanın en üst kısmına yerleştirilmelidir. Unutmayın ki belge türleri büyük/küçük harfe duyarlıdır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e. Elementleri yanlış şekilde iç içe yerleştirmek
Elementler aynı sırada açılıp tersi sırada kapanmalıdır.
<p><strong><em>Paragraf</em></strong></p>

Dünya'nın En Önemli Sitelerinin Kodu Doğru mu?
Peki tüm bu bilgilerden sonra popüler web sitelerinin kodları doğru mu? Aşağıda dünyanı en çok ziyaret edilen sitelerinin kodlarının doğru olup olmadığını inceledim ve onları iyiden kötüye doğru sıraladım.

BBC

\

Wikipedia

\

Apple

\

Facebook

\

Number 10

\

Digg

\

Yahoo!

\

Twitter

\

Times Online

\

Google

\

YouTube

\

Barack Obama

\

Microsoft

\

eBay

\

Peki Tasarım Komünitesinde İşler Nasıl
Tasarım ve teknoloji komünitesinin büyük isimlerine bir bakalım.

A List Apart

\

Smashing Magazine

\

Web Standardistas

\

Zeldman

\

Future of Design

\

Use It

\

37 Signals

\

Simple Bits

\

Freelance Switch

\

Slashdot

\

TechCrunch

\

Bildirgec

\

Sonuç
Web sitelerinizin kodunuzun doğru olmasının önemli olduğunu ve bunu alışkanlık haline getirmeniz gerektiğini düşünüyorum. Buna rağmen yukarıdaki sitelere baktığımda (ki bu sitelerin tamamı mükemmel içeriklere ve tasarımlara sahiplerdir) kodu doğru olmayan bir sitesi sahibi olmanın da dünyanı sonu olmadığı aşikar.

Eğer siz de benim gibi düşünüyorsanız, kodunuz doğru olduğunda geceleri daha rahat uyuyacaksınızdır

Sizin sitenizin kodu doÄŸrulanabiliyor mu?
Bu yazı için web sitelerinin kodlarının doğru olup olmadığını takip etmek zor bir işti, bu yüzden başka sitelerin de kodlarının doğru olup olmadığını görmek güzel olacaktır. W3C Doğrulama Kontrolünü siteniz üzerinde uygulayın ve ardından sonuçları yorumlarınızla paylaşın. Türkiye'nin bazı önemli sitelerin kodlarının doğru olup olmadığını da merak etmiyor değilim.

Kullanılabilirlik ve Web Standartları Üzerine Yazdığım Diğer Yazılar
Spacer
Spacer
 | 30 yorum var 
 | 10 Åžubat 2009 21:11 

Yorumlar

harika bir bildiri daha, teşekkürler.

Qmer  |  (1 puan) 10 Åžubat 2009 21:53

benim sitede de 300 küsür buldu. ebay ile aynı işi gören bir site olması ve ebay ile yaklaşık aynı miktarda hata barındırması enteresan geldi:)

son yaptığım siteleri css'ine kadar doğrulattım.

not:sitenizi doğrulattıktan sonra en altına ister görsel ile isterseniz metinsel bir ifade ile "bu site uygun tekniklerle kodlanmıştır" anlamı taşıyan bir ifade düşüp, ifadeyi doğrulama sitesine linkleyin. linkin get verisini taşıyan kısmına da web url'nizi eklemeyi unutmayın. bu şekilde google kod doğrulamasının yanında birde w3c'nin doğrulamasından da geçtiğinizi google efendiye izah etmiş olacaksınız.

lazaronnie  |  (0 puan) 10 Åžubat 2009 22:25

bildirgec yine her zamanki gibi önde :)) 262 Error

turk1024  |  (1 puan) 10 Åžubat 2009 22:55

@turk1024
sanırım bu bildirgeç'den değil yazarlardan kaynaklanmakta. Çünkü w3c resimlere "alt" kodunun eklenmemesini de hata olarak kabul ediyor. kaç resime alt kodu ekliyor bildirgeç yazarları? gördüğüm kadarıyla çoğuna eklenmiyor. mesela yukarıdakilere eklenmemiş :)

düşünmek, kendimizi eşyaya değil eşyayı kendimize uydurmaktır... http://www.varolmak.com
aslanbash2  |  (0 puan) 10 Åžubat 2009 23:09

@turk1024

:)

melek yüzünü kıskanır.
hx  |  (0 puan) 10 Åžubat 2009 23:49

bildirgec dahi oradaki hatalar göz önünde olsada bunlar hemen kapatılabilecek hatalardır doğru bir html yapısı çerçevesinde kodlanmıştır. mesela ben çalışma bitince en son valid'e bakarım derki 200 hata ancak bunları düzeltmek 10 dk almaz çünkü takla atılacak bir html bozukluğu yoktur atlanmış etiket alt="" yazamama /> kapanışları unutma & işaretlerini düz yazmak vs. gibi.

fakat vahim derece kurumsal siteler hazırlayıp henüz halen piyasada bir satır html kodu yazmasını bilmeyen firmalar iş yapmaktadır. mesela saraybahce belediyesi arkadaşlar sanırım doctype denen mevzudan haberi yok. tamam olmayabilir belkim, ama firma olarak onca yıldır bu işi yapıyorum dersen eğer bende seni kınarım. insan yaptığı işte biraz sorumluluk hisseder şu işin doğrusu neyin nesidir der öğrenir doğru kodlar.

ama iki template bir kaç alıntı kod parçası balandıra ballandırıa pazarlayıp iş diye bunu piyasaya sat. sonrada x adlı kurum gelip onlarca detaylı proje için talepde bulunur projeyi kaba taslak biçilen fiyatu o kişi dudak uçutturur efendi bunu 500 ytl yapan var der piyasada. bunların çoğunu üniversite tabelalarını tavsiye ediyorum freelance olarak istediğin işi 20 ytl yaptırcak onlarca öğrenci bulursun diye ancak o yer burası değil.... hadi kardeşim.

Birde kendimi sigaya çekeyim
farukbeser.com
Phago
ailetip.com

elhamdülillah

Taptuğun tapusunda Kul olduk kapusunda Yunus miskin çiğidik piştik elhamdulillah
thealico  |  (1 puan) 11 Åžubat 2009 00:20

Güzel bir bildiri olmuş teşekkürler

Linux007  |  (1 puan) 11 Åžubat 2009 00:36

@lazaronnie
bu doğrulama linki olayını nereden duydun ? eminmisin ?

kriptontr  |  (-1 puan) 11 Åžubat 2009 01:36

Kişiye özel online tasarım ve baskı hizmeti veren güzel bir yapılanma. Tavsiye ederim

www.vipmatbaa.com

hatta msn adresleri de grafik@vipmatbaa.com

asturias35  |  (-15 puan) 11 Åžubat 2009 01:43

tarayıcıya aşırı yük bindirmez. (x)html nimettir. her tasarımcının olmazsa olmaz yapısıdır. tabiki işin her boyutu düşünülenemeyebiliniyor :) büyük çaplı siteleri görüyoruz. www.facebook.com gibi... örneğin çoğunu bildiriyi yayınlayan arkadaş saolsun vermiş. her tasarımcının, yeni başlayan kişilerin mutlaka okuması gereken bildiri olmuş. ellerine sağlık...

www.gekron.com

in solis sis tibi turba locis www.mersin360.com
anixeon  |  (-1 puan) 11 Åžubat 2009 01:52

Güzel bir bildiri olmuş eline sağlık.
Günümüzde W3 konsorsiyumuna önem veren tasarımlar yapan şirketler bulmak da zor açıkçası. Son kullanıcı da pek dikkat etmediğinden bu es geçiliyor, mesela dikkatimi çeken ve W3 doğrulamasından geçen bir web tasarım firması konsept olarak da farklı. İncelenmesi gereken çalışmaları var diye düşünüyorum.

MaviKartaL  |  (-3 puan) 11 Åžubat 2009 02:10

zevkle okuduğum bir bildiriydi. çok iyi hazırlanmış.

BQRA  |  (0 puan) 11 Åžubat 2009 05:36

iyice reklam panosuna döndü burası @asturias35

Ayrıca bildiri için teşekkürler..

aL3rTTo  |  (0 puan) 11 Åžubat 2009 08:22

Pink çok güzel bir bildiri olmuş. Web tasarımcıları ve yazılımcıları için çok güzel kaynaklar sunuyorsun. Teşekkür ederim...

kadirgunay  |  (0 puan) 11 Åžubat 2009 09:57

dreamweaverın bence bu konuda daha yardımcı olması gerekir son zamanlarda benim de canımı sıkmaya başladı doğrulanmış kod yazmak istiyorum. daha yeni yaptığım siteyi tarattırdım 200 küsür hata buldu ben de uğraşmak istemedim. dw'nin niye düzeltme politikası yok bu konuda. en azından genel hataları kolay bir şekilde düzeltebilirdik.

Ayrıca xhtml açtığımız dökümanda da hiç bir şey desteklemiyor her şeyi css ile mi yapacağız :S. align yokmuş, bgcolor yokmuş, bilmem ne.html 4 açsak daha iyi. dediğim gibi bu hataların yüzde 80'nin nedeni dw'nin bir hata politikası olmayışı. çok sinir etti beni.

en basiti bir döküman açtım tablo attım uzattım hemen hata oluştu zaten.height yokmuş ee geri dreamweaver yoksa niye height verdiriyon style ile yap.en azından uyar bi.

vectro  |  (0 puan) 11 Åžubat 2009 09:59

Web sayfalarında standartlara uygun tasarımlar yapmak benim için önemli bir husus. Sayfaların doğru bir biçimde görüntülenmesini bir nebze olsun arttıtmasının yanında yapmış olduğum işi ne derece düzgün yaptığımında göstergesidir.

Ayrıca sadece XHTML doğrulamasının değil bunun yanında XHTML yapısının temel kaynağı olan CSS doğrulamasınında olması gerektiğini düşünüyorum.

XHTML ve CSS standartlarına uygunluk, tasarım ne kadar güzel olursa olsun dünya genelinde kabul edilmiş ve standart olarak uygun görülmüş bir sistemin parçası olmak demektir. Ziyaretçiler için pek bir anlam ifade etmeyebilir ama bir üstte bahsettiğim gibi bir web tasarımcısı için önemli bir husustur.

Sayfalarım tüm standartlara uygun ve tüm tarayıcılarda aynı şekilde yorumlanacak diye bir şart yok.

Tüm standartlara uygun olan bir sayfa bile Internet Explorer 6'da farklı, 7'de farklı, 8'de farklı yorumlanmasının yanında diğer tarayıcılar tarafından da farklı yorumlanıyor ki bu doğal bir durum.

Her ne kadar Opera ve Firefox birbirine çok yakın yorumlamalar ile çalışsada işin için Internet Explorer girince ek CSS önlemleri almak gerekiyor.

Peki standartların Google için bir önemi var mı? Yaptığım testlerde sayfaların kod yapısında bir hata yoksa sayfa indekslenmesi daha verimli oluyor.

Peki Google kendisi standartlara uyuyor mu? En basit google arama sayfasında bile standartlar göz ardı edilmiş durumda.

Guitarcraft  |  (1 puan) 11 Åžubat 2009 11:57

@kriptontr

evet eminim, bu linki kullanırsanız googel siteniz üzerinden w3c'ye atlıyor ve orada yeşil geçer not aldığınızı görmesi size + puan olarak yansıtılıyor.

(sonradan hatalar oluşacak olursa sitenizde, google bu kez sinirlenecektir, zira w3c kırmızı hataya düşmüştür, kullanırken dikkat etmek gerek!)

lazaronnie  |  (0 puan) 11 Åžubat 2009 15:47

lazaronnie gerçekten google buna dikkat ediyormuş bir çok yerli yabancı kaynakta okudum.

vectro  |  (0 puan) 11 Åžubat 2009 17:56

@Guitarcraft
yanılmıyorsam bu google zamanında sorulmuştu neden proje alt yapıları xhtml uygun değil diye verdikleri cevap bence makül ve doğruydu. elbette işi doğrusu xhtml sadık kalmaktır fakat dünyadaki en aptal browser'ın dahi anlıyacak basitlikte ve en hızlı en az degişken karakterler ile yazmamız gerkiyordu. düşünüldüğünde doğru ie6 ve daha ismi duyulmamış onlarca browserda dahi çıkabilmesi için en salakca yorumlama tekniğine sahip olan browser dahi anlayacak ve aynı zamanda en az kod ve tek karakterlerlik değişkenler kullanılacak.

yerinde bir karar ve google için göz ardı edilmesi gerek.

Taptuğun tapusunda Kul olduk kapusunda Yunus miskin çiğidik piştik elhamdulillah
thealico  |  (1 puan) 11 Åžubat 2009 18:31

@thealico; bilmiyorum, öğrenmiş oldum.

@lazaronnie; aşağıdaki bağlantıda bahsettiğin konu hakkında bir araştırma ve sonuç var. Etkili olduğunu söylüyorlar. google prefers valid html css

Guitarcraft  |  (0 puan) 11 Åžubat 2009 19:00

70küsür hatadan 13 e indirmiş durumdayım. ama artık tıkandım kaldım ne istediğini anlamış değilim :

"630" width="120" border="0">
630un önündeki tırnak işaretini kırmızı yapmış, aynı şekilde "50">
>
<tr height="119">

bunlara ne yapılması gerektiğini bilen varsa lütfen yazarsa sevinirim.

dellycan  |  (0 puan) 11 Åžubat 2009 20:15

çok güzel bildiri,güzeel güzeel okudum :)

sott  |  (0 puan) 11 Åžubat 2009 20:38

@dellycan
bildiğim kadarıyla w3c standartlarında table'larla değil div'lerle çalışmalısın. div tagları içinde style olarak ayarlarsan genişlik ve yükseklikleri sorun ortadan kalkacaktır.

düşünmek, kendimizi eşyaya değil eşyayı kendimize uydurmaktır... http://www.varolmak.com
aslanbash2  |  (-1 puan) 11 Åžubat 2009 21:03

w3c standartları div'le kodlama yapmana bakmaz. onun denetlediği kodun söz dizimi (syntax) diyebileceğimiz doğrulamasını yapar.

asıl önemli olan anlamlı (semantic) kod yazmaktır. table'lı -height, border, cellspacing hariç- bir kodlama yapıp w3c standartlarından geçebilirsiniz fakat aynı kod anlamlı bir kod olarak kabul edilmez. çünkü div'ler bölümlendirmeler için table'larda tablolar için yani herkesin ait olduğu yerde kullanılması gerekir.

ne de olsa

taş yerinde ağırdır
.

idelab  |  (1 puan) 11 Åžubat 2009 21:57

@aslanbash2
Yanlış biliyormuşun. table uzaydan gelmedi o da bir html elementidir ve kullanılır. table yapısı itibari ile %98 datagrid' lerde kullanılır.
bu hataya düşenlerin pek çoğu :
2005 yılları zamanı şablon iskeletlerini table ile oluşturup spacer gif'ler ile boşluk verdilerek ps'den çıkma çalışmalarının web sitesi ile bir alakası olmadığını ve bunların net'i çöplüğe çeviren bir kaos olup, bu alışılmışlığı yıkabilmek için devrim niteliğinde promosyonla W3C , firefox ve pek çok önde gelen kurumların desteği ile APTAL TABLOLAR çıkışında işin dozunu sonradan kendilerininde fazla kaçırdığını analayacakları girişimlerini yanlış anlayanlardır.
doğrusu nasıl söylemeli dersen kısaca şöyle:
table dahi tüm html elementleri var oluş amaclarına yönelik kullanılmalıdır. ve bunun adı yanlış bilmiyorsam semantik kodlama yani anlamlı kodlamadır.
yani html elementlerinin var oluş amaçlarını bize bildiren okulumuzun öğrettiği şekliyle, bizler böyle bir data grid' i kalkıp farklı elementler ile yapar veya şöyle bir iskelet temasını kalkıp table ile oluşturursak eğer W3C’nin semantik yani anlamlı kodlama olmadığını beyan etmektedir.

Dolayısıyla bu kaideye uymayan bir siteyi yanlışa doğru demeyi kimsenin sevmiyeceğinden ötürü google görevi gereği indekslesede , sevmeden indekslediğini belirttiği duruma düşeriz.

Taptuğun tapusunda Kul olduk kapusunda Yunus miskin çiğidik piştik elhamdulillah
thealico  |  (2 puan) 11 Åžubat 2009 23:00

Gerçekten çok önemli bir konu. Ciddi firmaların web siteleri bile bu tür hatalarla dolu. Artık Internet Explorer'ın tek web tarayıcısı olmaığını kabul etmek gerekiyor.
Özellikle kamu sitelerine bu konuya hiç dikkat edilmiyor. Bununla ilgili yaptığımız bir portal var. Bu tür siteleri acemi olarak ilan ediyoruz. Şimdiye kadar birçok firma web siesini acemi ilan ettik ayrıca gerekli çalışmaların yapılması için mektup gönderdik. Onlar da düzeltmeye başladılar. Siz de bu oknu ile ilgili bozuk web sitelerini rapor etmek isterseniz Acemilik web sayfasını ziyaret edebilirsiniz. acemilik.com sadece bu amaç için kurulmuş bir sitedir. Özellikle Linux kullanıcılarını tüm web tasarımcısı arkadaşların düşünmesi gerekiyor. herkes microsoft'un kölesi olamaz.

sefeer  |  (0 puan) 12 Åžubat 2009 00:08

Burdan bir ipucu daha vereyim: Google DOCTYPE'e de dikkat ediyor. Yani strict, transitional'a göre daha üst seviyede rank alıyor. Denemesi bedeva.

microsantim  |  (0 puan) 12 Åžubat 2009 03:00

Bir not daha... Web sitelerini kodlarken mutlaka DOCTYPE kullanmaya özen göstermek gerekiyor kodunuzun başında. STRICT kodlama yapabilirseniz en doğrusunu yapmış olursunuz. Biraz araştırma ile karmaşık web siteleri için bile strict doctype kullanmak mümkün.

Örneğin bu konuda son zamanlarda kodladığım bir web sitesi: claromentis'i örnek olarak gösterebilirim.

pinkfloyd  |  (-1 puan) 12 Åžubat 2009 09:30

Freelance grafik web tasarımcılar için harika bir bildiri, çok teşekkürler..

eofis  |  (-2 puan) 22 Ekim 2009 21:21

xhtml ve css uyumu gerçekten çok önemli bir husustur seo konusundave yararlı bir makale olmuş

Mikifar3  |  (0 puan) 02 Aralık 2011 19:13

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu Yazıyı Tutanlar

Beğendiğiniz bir yazıya "tuttum" demek için başlığın yanındaki yıldıza tıklayabilirsiniz.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)
bildirgec.org bölümleri
pillinetwork hesabınızla giriş yapın.

son yorumlar

bildirgecinfo

bildirgec.org içeriği kullanıcıları tarafından üretilen kolektif bir blogdur.

network siteleri

RSS Dosyası
pillikutu