ALTI ÜSTÜ TASARIM – Mehmet Doğan

Internet'in Anlami

30 Ocak 2005

Kanada’nin (bazen eksi 40-45’lere kadar iniyor) soguk havasi, benim arabanin aküsünü de üsüttü. Kanada’da, eski kovboy filmlerinde gordugunuz o kovboylarin, atlarini baglandigi gibi, soguk gecelerde bizde arabalarimizi, elektrik fislerine baglamamiz gerekiyor. Iste boyle soguk bir gecede, ben arabami elektrige baglamayi unuttum ve sanirim akunun de yasam omru gecmek uzereydi ki yeni bir aku almak zorunda kaldim. Bir akunun kac dolar ettigini bilmedigimden, birkac yere telefon actim, sorup sorusturdum ve garanti suresi uzun, fiyati kisa bir akuyu, arabama taktirdim. Bu aradigim sirketlerden biri ise Toyota idi. Arabam Toyota marka oldugundan, ilk once Toyota'nin servisini aradim fakat en yuksek fiyati da onlardan aldim. Kendi kendime, akulerin bir standardi olmasi ne guzel diye dusundum. Dusunsenize, ben Toyota marka araba kullaniyorum diye yanlizca Toyota marka aku almak zorunda kalsaydim piyasa icindeki en yuksek fiyati vermek zorunda kalacaktim. Bu yanlizca akuye has birsey degil, araba lambasindan, sileceklere; tekerleklerden, sigortaya kadar bircok parcayi, baska bir firmadan rahatlikla alabilirim cunku bunlarin hepsi "standart" malzemeler. Bu standartlasma yanlizca arabada degil gunluk hayatimizda kullandigimiz bircok urunde mevcut. Kapi kilitlerinden, kapi kulplarina; tesisat borularindan, tahta civilerine kadar bircok urunde bir standart mevcut.

Peki web icin bir standart var mi?

Tabi ki var fakat bunu uygulayan Turkiye’de cok az sirket var. Alexa’nin sundugu Turkiye Top 500 listesinde ki ilk 20 sirket arasinda, standartlari uygulayan tek bir sirket var. Gercekten dusundurucu.

Peki neden cok onemli standartlar?

Standarlar, gelecegin Internet’i ve teknolojileri icin vazgecilmez bir unsur. "Semantic Web" adi verilen ve Turkcesi "Anlamli Web" olan kavram, Web icinde standartlarin ve anlamli isaretleme dilinin uygulanmasi ile olusabilir. 10 yil oncesine kadar, Internet’de gordugunuz bircok teknoloji (hatta Internet’in kendisi) bile cilgin bir fikir gibi gelirken, bu teknolojiler gunumuzde yasamimizin vazgecilmez bir parcasi haline geldi. Google’suz, emailsiz bir Internet dusunebilir misiniz? Bunlar yanlizca bir baslangic. Semantic Web ornekleri kendisini yavas yavas gostermeye basladi bile. Bircok buyuk sirket, bunun calismalarina basladi ve buyuk yatirimlar yapiyor. Semantic Web'i kullanacak teknolojilere ornek vermek gerekirse:

Diyelim ki siz, uzun bir tatile gittiniz ve tatilden donerken, bombos bir eve varmak istemiyorsunuz. Cep telefonunuz ile evinizin VoIP uzerinden calisan ana santralina bir mesaj cekiyorsunuz. Bu mesaj, buzdolabiniz tarafindan algilaniyor. Buzdolabinizda, zaten sizin "Top 20 Alisveris Listeniz" kayitli. Buzdolabiniz, bu listeyi, ana bellegindeki envantor ile karsilastiriyor ve buzdolabinin icinde bulunmayan urunleri, yine sizin hesabinizin oldugu en yakin sanal alisveris merkezinden siparis ediyor. Eve variyorsunuz ve 10 dakika sonra, buzdolabinizin verdigi siparis getiren kurye kapinizin zilini caliyor. Cilgin bir ornek gibi geliyor degil mi? O zaman LG’nin su an urettigi su buzdolabina bir bakin.

Ya da siz seker hastasisiniz. Doktorunuzun, durumunuzu devamli konrol altinda tutmasi gerekiyor. Butun yapmaniz gereken, kucuk bir cihazi kolunuz takmaniz. Bu cihaz, araliklarla, kan tahlili yapip bu bilgileri belleginde tutuyor. Eger bir anormalik gorur ise, wireless olarak evinizin ana santraline gonderdigi bir sinyal, sizin bilgilerinizin kayitli oldugu "sanal tip merkezi" ne ulasiyor. Bu veriler degerlendirildikten ve sizin bilgileriniz ile karsilastirildiktan sonra, eger veriler ciddi bir durumu gosteriyorsa bu veriler bir baska mesaj ile doktorunuzun online randevu defterine ulasiyor. Randevu defteri, size, doktorunuzu gormeniz icin bir randevu ayarlayip, bir sinyali sizin telefona digerini ise doktorunuzu cagrisina gonderiyor. Telefonu ahizesini kaldirip, durumuz ve randevunuz konusunda bilgi aliyorsunuz. Tabi butun bu konusmalari kulak ucuyla dinleyen buzdolabi :), belleginde bulunan "aile takvimi"ne, randevunuzu isliyor.

Peki, buzdolabinizin ya da kolunuza taktiginiz bir cihazin, webdeki bilgiyi anlamasi neye bagli? Tabi ki "Anlamli Web"in en onemli parcasi olan "Semantic Markup" yani "Anlamli Kod"a bagli. Anlamli Kod’u yazmak ise "Web Standartlar"ina bagli.

Anlamli Kod

Bircogunuz eger bu işe benim gibi yillar once başladi ise bilecektir ki, web bircok zorluklari atlayarak bugunlere geldi. 7-8 sene once yaptigimiz sitelere o zamanlar yine sizin gibi web ile ugrasan "webmaster"lar ziyaret ederken; bugun her kesimden, her ulkeden ziyaretciler, sayfalarinizi geziyor, bilgiler aliyor. Daha 6-7 sene oncesine kadar bircok HTML elementini kullanamazken, bugun CSS ve XHTML ile tasarimin sinirlari zorlaniyor. Artik, eskiden kullandigimiz "spacer.gif" numaralarini bir kenara birakmanin zamani geldi. Artik, web sektorunun bir standardi var. Tablo, bir resmi, sayfanin en sag kosesine koymak icin kullanilmiyor artik. Bunun yerine float:right var; "spacer.gif" ile iki element arasina bosluk koymak yerine padding var margin var CSS’de.

Eger web sektorunde en azindan 7-8 senedir calisiyorsaniz, o yaptiginiz ilk sayfayi hatirlamaya calisin. Yanlizca birkac H1, H2 ve P elementinden olusan sayfalariniz, bugunku yaptiginiz sayfalardan daha anlamli idi. Cunku H1’ni bir sayfa icindeki en onemli baslik icin ve P leri ise paragraf icin kullandiniz. Peki ne oldu? Zaman gectikce daha guzel kodlar yazmamiz gerekirken, neden biz anlam ifade etmeyen kodlar yonune dogru ilerlemedik? Bircok nedeni var bunun. Browser tutarsizliklarindan tutunda, sirketlerin website rekabetlerine kadar bircok neden bizi tablolar ile tasarim yapmaya itti ama artik bizim sektorumuzde de "standartlar" var. Web Standartlari demek Anlamli Kod demek degildir. Web Standartlari, Anlamli Kod'un bir ogesidir. Artik, Web Standartlarini uygulamanin zamani geldi. "Anlamli Kod" yazmak, Internet’in ve bizim sektorun gelecegi icin kacinilmaz oldu artik.

Peki nedir bu "Anlamli Kod" denen şey? En basit anlami ile, yazdiginiz her HTML elementinin, anlami olmasi yani HTML elementlerini sozluk anlamlari ile kullanmak demektir. Bunu size gelecegin "Anlamli Web"ine ornek vererek aciklamak istiyorum:

Yukarida verdigim buzdolabi ornegini dusunun. Buzdolabi sizin icin sanal marketde alisveris yapiyor. Bu buzdolabinin sanal marketeki urunleri anlamasinin tek yolu, sanal marketin "web standartlari" ve "Anlamli Kod" ile olusturmasina bagli. Aku yapan sirketler, benim hangi tur araba kullandigimi dusunmuyorlar bile, cunku standartlari takip edilerek uretilen bir akunun, benim arabam tarafindan kolaylikla ve sorunsuz bir sekilde kullanilabilecegini biliyorlar. Iste, buzdolabinin da, sanal marketi anlamasinin tek yolu, "Web Standartlari" ve "Anlamli Kod".

Gelin birkac sanal marketin, sayfalarina bakip, ne gibi bir standart uyguladiklarini hep birlikte gorelim. Diyelim ki buzdolabi “Bahçıvan Dilimli Light Kaşar Peynir” almak istiyor. Sizce, Turkiye’de ki iki tane sanal marketde gordugum asagidaki kodlari, bu buzdolabinin anlama sansi nedir?

1. Ornek

2. Ornek

Halbuki yukaridaki iki sirket, kodlarini standart hale getirse, sanirim soyle birsey oldurdu:

3. Standart Kod

Buzdolabi, li HTML elementi nedeniyle bir liste oldugunu anlardi ve bu listenin “id” degerini, alinacak kasar peynirinin barcode ile karsilastirip, kolayca alisverisi tamamlayabilirdi. Sizce yukarida verilen hangi kod daha anlamli?

Anlamli Kod, H1’nin bir sayfa icindeki en onemli baslik icin kullanilmasi, table'in veri tablolari icin kullanilmasi, blockquote'un bir yerden yapilan alinti yapildiginda kullanilmasi demek. Gelin sayfa baslik orneklerine de bakalim. Bir sayfadaki en onemli basligin Hx elementi ile isaretlenmesi anlamli iken, iste size Turkiye’de ki degisik websitelerinden birkac BASLIK ornegi:

1. < tr>< td bgcolor= "#F3F3F3" height= "17">< font face= "Verdana, Arial, Helvetica, sans-serif" size= "1">< b>BASLIK</ b></ font></ td></ tr>
2. <td width="160" valign="top"><b class="ana">BASLIK</b></td>
3. <font style="font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: bold;">BASLIK</font>
4. <td colspan=2><font color="#b14141" size=3><b>BASLIK</b><img src="/img/general/blank.gif" width=1 height=6 border=0 alt=""><br></font>
5. <td><Font Class="PX17000000"><B>BASLIK</B></Font></td>

Yukarida gordugunuz orneklerin hic birinde, standart yok, anlam yok. Halbuki, hepsi: <hx>BASLIK</hx> gibi anlam ifade eden bir yolu tercih edebilirdi.

Siz, sitenizde ki basliklar icin hangi elementi kullaniyorsunuz?