xocotl

  • prezentabl (582)
  • 867
  • 0
  • 0
  • 0
  • geçen yıl

html5

sık sık css3 teknolojisiyle karıştırılan teknoloji. ama çok iç içe olup paralel olarak gelişmeleri nedeniyle bu oldukça doğal. zaten bunları daha yakından takip eden kişiler (ve hatta işi üstlenen adamlar) de, daha uzak olanlara olayı daha basit bir şekilde anlatabilmek için bütün bu teknolojilere kısaca html5 diyip geçiştiriyorlar, o nedenle ortada sıkıntı yok.

yine de ben daha doğru bilgi vermek adına bu konseptleri ayırıp anlatayım;

en basit anlamıyla html, içeriği stillendirilebilir parçalar halinde sunmaya yarayan bir markup dili, günümüzdeki standart versiyonu da 4.01. olayı şu, yazdığınız kodda, sayfada görünmesini istediğiniz öğeleri belirtiyorsunuz, browser da yazdığınız koda göre desteklediği öğeleri ekrana basıyor. mesela kullanıcıya yazı girebileceği bir alan sunmak istiyorsunuz, kodunuza bir <input> ekliyorsunuz, browser da prototipini işletim sisteminin default'undan aldığı bir yazı kutusunu açlıp bir güzel koyuveriyor sayfaya. html'in 4.01 versiyonunda bu tarz form elemanlarının yanında paragraflar, tuşlar, yazı kutuları, tablolar, resimler, yazılar gibi şeyler var. tam listesi için bkz: http://www.w3.org/tr/html4/index/elements.html

html böyle de, css ne peki? css de aslında kendine has bir syntax'ı olan bir dil, hatta kural seti desek daha doğru. amacı, yazdığınız html koduna göre sayfaya eklenen nesneleri stillendirmek (arkaplan rengi, yazı rengi eklemek, yazı kalınlığını, pozisyonu, satır aralığını değiştirmek, kenarlar eklemek v.b.). mesela diyoruz ki, "git şu yazı kutusunun içindeki yazıları kırmızı yap", browser da defaultta siyah olmasına rağmen gidip kırmızı yapıyor yazının rengini sağolsun. günümüzdeki standart css sürümü 2.1 sürümü, css3 halen draft halinde. css 2.1'in tam spesifikasyonu için http://www.w3.org/tr/css2/ adresine bakabilirsiniz ama eşek gibi yazı olduğu için tavsiye etmiyorum.

e bu kadar özellik neyinize yetmiyor derseniz, yetmiyor malesef. internet dünyası her önüne gelenin bir şeyler yaptığı bir alan olduğu için, son yıllarda internet hızlarının ve kullanıcı sayısının da artmasıyla birlikte, inanılmaz derecede hızlı bir biçimde gelişmeye başladı. bu gelişmeyle birlikte içeriği en doğru, en basit ve en afilli şekilde sunmak esas oldu. öyle olunca teknolojinin sınırları zorlanmaya başlandı. örneğin sitenizde video göstermek istiyorsanız bunu için flash gibi bir aracı kullanmanız gerekiyor çünkü html 4.01'da böyle bir olay yok. ya da sayfaya koyduğunuz bir tuşun kenarlarını yuvarlamak istiyorsunuz* diyelim, css 2.1'de bunun bir karşılığı yok, bunun için gidip her köşe için ayrı resimler oluşturup, iç içe bir sürü html element'i kullanıp, bu resimleri arkaplan olarak veriyorsunuz. noluyor, hem anlamsız bir sürü element oluşturup sayfayı kirletiyorsunuz, hem de boş yere resim yükleyip* kullanıcının kotasını ve zamanını yiyorsunuz. ya da ne bileyim, şu yazı arkasında mavi bir gölge bıraksın diyorsanız hiç kasmayın, unutun gitsin.

yahu en basitinden, adam koskoca youtube yaptı, gangnam style denen video 1.6 milyar defa izlendi falan, ama bütün site hala flash üzerinden yürümek zorunda. böyle kepazelik olur mu?

abiler de olmaz dediler ve başladılar yeni standartlar belirlemeye. hem bu tarz cicili bicili şeylere destek vermek, hem de gerçekten anlamlı* dökümanlar* oluşturabilmek adına html5 ve css3 spesifikasyonlarını oluşturdular. browser geliştiricileri bunlara bakıp, destekleyebildikleri kadarını desteklemeye başladılar, hatta olay sidik yarışına döndü. x adlı browser, html5'in y özelliğini desteklediği sürümünü yaparken, araya css3'ün z özelliğini destekleme olayını da çıkardı, sonra x2 adlı browser gitti y2 ve z2'yi de destekledi falan derken; html5 ve css3 teknolojileri iç içe geçti. işin gazına kendini kaptırmış olan web developerlar "ya biz aradaki farkı açıklayana kadar ohoo, biz html5 diyip geçelim en iyisi, işimize bakalım" dedi ve kestirip attı işi. sonra da kaldı bize html5'i anlatmak.

html5 halen draft aşamasında ve sürekli olarak değişiyor. http://www.html5rocks.com/en/ adresine girerek hem hakkında detaylı bilgi alabilir*****, hem de sık sık takip ederek güncel kalabilirsiniz. yok ben ansiklopedi falan arıyorum derseniz de standartları belirleyen abilerin sitesindeki http://www.w3.org/html/wg/drafts/html/master/ sayfasına bakabilirsiniz.

*: anlamlı dökümandan kastım şu: şu an siteye baktığınızda en üstte gördüğünüz siyah kısım bir başlık değil mi? ya da sayfanın en altında "kullanım koşulları", "iletişim" diye giden kısmı içeren şey sayfa sonu gibi bir şey. geri kalan kısım ise sol menü* ve asıl içerik kısmı* diye ikiye ayrılıyor, asıl içerik kısmı da kendi içinde parçalı, her entry ayrı bir öğeyi ifade ediyor falan. mantıksal bir yapılanma var anlayacağınız. html 4.01'de bu tarz dörtgensel bir içerik alanını ifade etmek için <div> adında bir element kullanıyorsunuz. "div ne lan?" dediğinizi duyuyorum, çünkü hakikaten div ne lan? division olsa gerek. bir div'i diğerinden ayrı kılmak için napıyorduk, class** veriyorduk örneğin, diyorduk ki tepedeki başlık div'i "header" diye bir class'a sahip olsun, ben css'te "header class'ına sahip div'in arkaplanını koyu gri yap diyebileyim".

bunun yerine başlıklara div değil de header, içerik sonlarına div değil de footer, sayfa bölümlerine div değil de section diyeydik daha iyi olmaz mıydı? daha kolay stillendiremez miydim böylece? arama motorları siteme girdiğinde div'lere ve class'larına bakıp "hmm bunun class'ı dedeler ama başlık olabilir mi ki?" demek yerine direkt olarak <header> tag'ini gördüğünde "aha da başlık burada" diyeydi süper olmaz mıydı?

işte html5 anlamlı* döküman olayını getirerek bize bunu sağlıyor. halen div kullanıyoruz ama bunu sadece bir arada bulunmasını istediğimiz, ancak toplu halde bir anlam ifade etmeyecek öğeleri gruplamak için yapıyoruz. mesela ne bileyim, başlık* genişlik olarak bütün sayfaya yayılacak ama, içindeki logo, menü gibi şeyler ortalanmış olacaksa içteki öğeleri gruplayıp bir div'in altına sokuyoruz.

**: class denen olay aslında oop mantığındaki class'la birebir uyuşmasa da biraz andırıyor. bunlar öğelere anlam kazandırabilmek ve aynı işlevi görenleri kolay stillendirebilmek adına kullandığımız mantıksal gruplayıcılar. bir öğeye istediğiniz kadar class atayabiliyor, kombinasyonlarını özel olarak stillendirebiliyorsunuz. örneğin diyelim ki biri mavi, biri beyaz olmak üzere iki tip tuşunuz var ve bunların ikisinin de yazı boyutu 14 piksel olacak. bunun için button, blue ve white adında üç class tanımlayıp, button class'ına "yazı boyutu 14 piksel olsun", blue class'ına "yazı rengi beyaz, arkaplan mavi olsun", white class'ına da "yazı rengi siyah, arkaplan beyaz olsun" şeklinde kurallar tanımlıyor, mavi olmasını istediğiniz tuşlara button ve blue, beyaz olmasını istediğiniz tuşlara ise button ve white class'larını veriyorsunuz işiniz bitiyor. olayınız geyikse "hem mavi hem beyaz class'larına sahip olan tuşların arkaplanı siyah, yazısı yeşil olsun" diyip matrix matrix de takılabilirsiniz isterseniz.

devamını okuyayım »
17.05.2013 20:54