Yeni bir proje için bir site hazırlayacaksınız diyelim. İşin kaliteli olmasını istediğiniz için tasarımını bir grafikere çizdirdiniz ve PSD veya PNG olarak grafikerden çalışmayı aldınız. Sırada resim halindeki bu tasarımı kodlamak var. Kodlamak derken öyle veritabanı, PHP / ASP programlamasından bahsetmiyorum. Sadece grafikerden almış olduğunuz resim halindeki tasarımı, web standartlarına (W3C) uygun, tüm tarayıcılarda aynı görünen bir HTML dosyası yapacaksınız. Nelere ihtiyaç duyarsınız, sorunlarla nasıl başedersiniz? Sizin için bu konuda bir harita çıkartayım istedim. Böylece daha projenin başında ihtiyacınız olanları derler ve çalışmanız sırasında arayışa düşmeden, dikkatiniz dağılmadan siteyi tamamlayabilirsiniz.
Klasör Yapısı
Öncelikle şöyle bir klasör yapısına (dizine) ihtiyacınız olacak. Klasörlerin isimlerinden o klasörde hangi dosyalar olacağı konusunda tahmin yürütebilirsiniz.
Gördüğünüz gibi tek bir index.html dosyamız var. Sitenin anasayfasının tüm unsurlarını (başlık, gövde ve alt) aynı dosyada oluşturacağız. Bu tasarımı biçimlendirmemizi sağlayacak yardımcı elemanlar yani resimler, stil dosyaları (CSS), javascript kütüphaneleri ve flash nesneleri resimde görmüş olduğunuz klasörlerde bulunacaklar. Peki neler bulunabilir bu klasörlerde?
CSS
Sitenizin yeni teknolojilere göre kodlanması artık bu zamanda şart oldu. Bu konuda da ilk adım CSS ile kodlamadır. Fakat CSS’in şöyle bir sorunu vardır. Her tarayıcıda aynı göstermek için biraz çaba sarfetmek zorundasınız. Kimisi bunun çok zor olduğunu düşünür fakat aksine temel bazı şeyleri bildikten sonra hiç de öyle korkulacak bir durum değildir.
Öncelikle CSS sıfırlama (reset) ne demek bilmelisiniz ki zaten şurada anlatmıştım. Kısaca söylemek gerekirse tüm CSS seçicilerinin varsayılan değerlerini sıfırlıyoruz ki tarayıcılar başlangıçta kendi kafalarına göre yorumlamasınlar.
CSS konusunda bilmeniz gereken diğer bir husus clearfix gibi en çok bilinen CSS hileleri hakkında bilgi sahibi olmak. Bu konuyu da işin duayeninden öğrenebilirsiniz: En çok kullandığım CSS Hileleri(Hack).
Son olarak transparan özellikli resimlerin tarayıcılarda çıkardığı sorunları gidermeniz lazım. Bunun da oldukça basit ve etkili bir çözümünü PNG ve IE Transparanlık Sorunu adlı makalede bulabilirsiniz.
JS
Javascript klasöründe ilk bulundurmamız gereken şey AJAX uygulamalarımız için de kullanabileceğimiz efekt desteği olan sağlam bir javascript kütüphanesi. Benim tercihim eklenti yelpazesinin geniş olması ve eburhan’ın makaleleri sayesinde kolay kullanımı nedeniyle jQuery.
Diğer bir bulundurmamız gereken olay ise Flash nesnelerimizi tasarımımıza sorunsuz bir şekilde gömmek için kullanacağımız swfobject‘in javascript dosyası. Flash için neden normal kod yerine swfobject kullanıyoruz derseniz hemen söyleyeyim. swfobject sayesinde:
- Flash nesneleriniz tüm tarayıcılarda sorunsuz bir şekilde görüntülenir,
- Web standartlarına tamamen uyumludur,
- Tasarımdaki diğer unsurlara uyum sağlar, altta/üstte kalma gibi bir sorunla karşılaşmazsınız,
- Internet Explorer’daki flash nesneyi çalıştırmak için gereken fazladan bir tıklama sorunu ortadan kalkar.
Bu klasörde bir de kaliteli tasarımlarda büyük boyutlardaki yazı karakterlerini güzel göstermek için kullandığımız sFIR teknolojisinin dosyalarını barındırırız. Gerçekten de çok faydalı olan bu uygulamanın javascript dosyasını için bu klasör uygun bir yuvadır.
Flash
Bu klasörde öncelikle tasarımda kullanacağımız Flash nesneleri barındırırız.
Tasarımda kullanacağımız Flash nesneler için swfobject kütüphanesini kullanacağımızı söylemiştim. Bu kütüphane ile birlikte Adobe‘un expressInstall.swf isimli bir dosyası gelir. Bu dosyayı da flash klasörüne yükleyebiliriz.
Bir önceki başlıkta (JS) bahsettiğim sFIR kullanıldığında elimizde javascript dosyasının yanında bir de SWF dosyası kalır. İşte bu dosyayı da flash klasörüne yükleriz.
Resimler
Resim halindeki tasarımı koda dökerken bütün resmi parçalara ayırır ve bu parçaları resimler klasöründe saklarız. Bu klasördeki resimleri stil dosyamız (CSS) vasıtasıyla anasayfamızda bütünler ve (index.html) görüntüleriz.
Sonuç
Bu makalede resim halindeki bir tasarımın web standartlarına (W3C) uyumlu, tüm tarayıcılarda sorunsuz görüntülenen ve son teknolojiler (CSS, AJAX, sFIR) kullanılarak nasıl kodlanacağına ve neler gerekeceğine dâir bir yol haritası çıkarmaya çalıştım. Bundan sonraki yazılarımda bu teknolojilerin daha önce anlatılmamış olanlarını veya anlatımı zayıf olduğu için anlaşılmamış olanlarını tek tek ele almayı düşünüyorum.
Saygılar, sevgiler…
Gerçekten gerekli ve güzel bir makale olmuş eline sağlık.
Erhan yine güzel bir makale hazırlamışsın, Web tasarım süreçlerinde XHTML CSS, JS vb. bizim alet çantamızdaki aletlerimiz. Peki bunları nasıl birleştireceğiz? Nasıl organize edeceğiz? Genelde sorun bu oluyor.
Bu makalenle, işin bu tarafına dair kafasında soru işaretleri olan, parçaları birleştiremeyen arkadaşlar için konuya dair genel bir bakış kazanmalarını sağlamaya çalışmışsın.
Yazına bir ek olarak XHTML’i en başa koymalıyız. O olmadan bu gemi yürümez :) Ve de en önemlisi web geliştiricilerin dillerinde tüy bitti (bknz Volkan Görgülü) :) Anlamlı XHTML kodlamaya elimizden geldiğince gayret göstermeliyiz…
Tekrar güzel paylaşımın için seni kutlarım…
@Özgür, teşekkür ederim olumlu düşüncelerin için. Bu işi anlayan birisinden bu tür yorum almak elbette sevindirici. En azından aynı düşündüğünü görüyor insan.
Burada genel olarak araçlara yer verdim. Kodlara girdiğim zaman XHTML’e zaten ilk sırada değinirim ;) Tekrar teşekkür ederim. Görüşmek üzere…
çok hoş ve faydalı bir makale olmuş erhan abi teşekkürler
@Turgay, teşekkür ederim. Faydalı olduysa ne mutlu…
Çok teşekkürler Erhan, çok faydalı bir makale olmuş gerçekten. Bazı noktalar kafamda daha iyi netleşti okuduktan sonra Özellikle de farklı browser'larda sitenin tasarımının bozulmaması için söylediklerin çok iyi oldu.
@Serbay, asıl ben teşekkür ederim bu yazıyı yazmama vesile olduğun için. Amacım da zaten bu konuya yeni başlayan insanlara ufak da olsa bir fikir vermekti. Ayrıca değerli yorumun için de teşekkür ederim ;)
Güzel makale kardeşim eline sağlık.
Teşekkürler.
Güzel bir yazı Erhan Abi. Faydalı oldu benim için. Özellikle şu “SwfObject” i duymuştum ama ne olduğu konusunda bir fikrim yoktu. Öğrenmiş oldum sayende. Teşekkürler.
eyvallah hocam
Makale güzel olmuş ellerine sağlık.
Arkadaşlar makaleyi beğenmenize sevindim. Ondan da öte yorum sayısındaki artışa daha çok sevindim. İnsan okunduğunu anlıyor, görüyor ;)
Zaten bloglamanın en zevkli yanı okunduğunu bilmek olsa gerek :), ellerine sağlık hocam
bu şekilde düzenli çalışmak yaptığınız işi zevkle yapmanıza büyük ölçüde katkı sağlayacaktır. teşekkürler yakuter
Ellerine sağlık yakuter çok faydalı bir yazı olmuş..
Teşekkürler üstad eline sağlık vitamin oranı yüksek bi makale olmuş .)
Sağolasın usta ya benim için yararlı bir makale oldu
Güzel makale hocam teşekkürler :)
Valla bravo , video falan çok güzel , teşekkürler
ellerine sağlık valla ne dense az
Evet işte yine bir yakuter klasiği.
Şunu söyleyebilirim ki mesleğimde ki bitirici tiyoları çoğunu yakuter ve benim için uçsuz bucaksız bir bilgi kaynağı olan bu muhteşem bloğundan alıyorum.
Teşekkürler üstadım…
Rica ederim ;)
swfobject kütüphanesi firefox ta yaşadığım üste kalma sorununa çözüm oldu. Çok teşekkürler.
Rica ederim Şenol ;)
Tasarıma giriş için mükemmel bir makale olmuş gerçekten pek değinilmeyen yönleri ele aldığın için teşekkürler devamını bekliyoruz …
Güzel bir konuya değinmişsin. Fakat webde ve hazır sistemlerde daha çok images/ scripts/ gibi yapılar kullanılıyor. Daha geniş çaplı bi standartlaştırma olması bakımından “resimler” gibi türkçe isimler kullanmamak gerekiyor.
çok güzel olmuş gerçekten
Hocam çok sade ve hoş bir anlatım siteni takip ediyorum eline bilgini sağlık :)
saol kardeşim verdigin bu yararlı bilgiler için bu işleride yavaş yavaş öğreniyoruz artık.
W3C ye uygun olsun diye bazı şeylerden feragat etmiştim.Bu kadar önemli olduğunu bilmek içimi rahatlattı doğrusu :) Teşekkürler verdiğin bilgiler için.Yorumlar hep çok eskilerden kalmış ama web'e geç başlamak yüzünden hep böyle gerilerden takip ediyoruz maalesef ama sizin gibi insanlar sayesinde her gün yeni bir şey öğrenmek daha hızlı yol almamızı sağlıyor.
Makale ve tüm bilgiler için teşekkürler
teşekkürler w3c standartlarını arıyordum uzun zamandır
makalenizi yanlış anlamadıysam klasörlerin aynı şekilde olması ve ilgili dosyaların belirtiğiniz şekilde yerleştirilmesi
ve css i resetlemek, png sorununu halletmek ile çeşitli css hack yöntemleri
doğru mu anlamışım acaba cevap yazarsanız sevinirim
eburhan.com kapanmış mı?
Bloğunuzu yeni keşfettim, web tasarımı ile hobi olarak ilgileniyorum sizin yazılarınızla kendimi iyi geliştirebilirim sanırım. Yani daha çok geleceğim buraya. Saygılar :)
Gerçekten giriş için güzel bir makale yazmışsınız.