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…

Benzer Yazılar

• Tasarımlarda SEO’lu Logolar Kodlamak
• Tasarımda Evrensellik ve Sayılar
• Cufón, Bir sIFR Alternatifi Hakkında Her Şey
• AJAX’ta İki Terim “Prototype, Xajax”
• ytelefon | Yakuter Telefon Defteri Betiği