Arkadaşlar merhaba, uzun bir aradan sonra tekrar yazılarıma devam etmek istiyorum. Bu ikinci başlangıç umarım yarım kalmaz. Bu yazımda arayüz geliştirme diye adlandırdığımız hazırlanmış layout tasarımların, kullanıcı interaktivitesine imkan tanıyan web sayfalarına çevrilmesi sürecinde gözlemlediğim eksik yaklaşımları irdelemek niyetindeyim.

Web uygulamaları, kullanıcı interaktivitesine cevap verecek sayfalara ihtiyaç duyar. Bu etkiye cevap verecek sayfaları kodlamak arayüz geliştiricilerinin işidir. Arayüz geliştiricisi hazırlanmış layout tasarımlarını  gerçeklerken “nasıl olursa olsun, bir şekilde olsun” yaklaşımını aşan bir vizyona sahip olmak durumundadır.

Bir süredir ilginizi çeken bir konu web tasarımı, web tabanlı uygulamalar… Ama kafanız karışık, tam olarak ne öğrenmek istediğinizi bilmiyorsunuz. Nereden başlayacağınızı bilmemeniz de üzerine tuz biber oluyor. Bir adım ileri, iki adım geri… Bir ilerleme kaydedemiyorsunuz. Eğer durumunuz bu, ya da buna yakın bir şeyse; işte bu yazı tam size göre.

Bir W3C tavsiyesi olan CSS standardının,  ara yüz geliştiricileri tarafından -istenilen seviyede olmasa da- tercih ediliyor olması bizi sevindiriyor. Web geliştiricileri arasında <table> etiketini kullanarak ara yüzleri oluşturmayı tercih eden arkadaşlarımız bulunuyor. CSS ve XHTML’in amacına uygun kullanılmaması durumu yaygınlığını koruyor. Bu teknolojilerin varoluş amaçlarının bilinmemesi, yani bu konudaki bilgi eksikliği,  bu durumu yaratan sebeplerin başında geliyor. Bir diğer önemli sebep ise; IE6 merkezli tarayıcı yorum farklılıkları… Bu yorum farklılıkları, XHTML ve CSS’i etkin kullanmak isteyen arkadaşlarımızın ellerini bağlayan bir durum. Bu sorunla ilgilenmek için akla gelen ilk çözüm ise, CSS-Reset (Sıfırlama) tekniği…

CSS ile web uygulamaları geliştirirken benzer tanımlamalar yapmak durumunda kalırız. Teknoloji ne olursa olsun, bir işlemin gerçekleştirilmesi için aynı kodun tekrar tekrar yazılması ciddi bir emek kaybı ve yönetilebilirlik zaafı oluşturmaktadır. CSS dosyaların optimize edilmesi ve gereksiz kural tekrarının önüne geçilmesi amacıyla mümkün olduğunca CSS seçicilerini gruplayarak, gereksiz kod yazımının önüne geçmiş oluruz.

Genel olarak çalışmalarımızda rollover image’leri uygulamayı zenginleştirmek adına kullanırız. Rollover Image, bir imajın üzerine fare ile gelindiğinde, ilgili imajın değişmesi durumudur. Eskiden bu işlemi Javascript kullanarak gerçekleştiriyorduk. Bugün ise CSS kullanarak oldukça hoş rollover image’ler hazırlayabiliyoruz.

XHTML elementlere sınıf atamasını class özelliği ile gerçekleştiririz. Sınıflar, XHTML elementlerin birer özelliği olduğundan, CSS Özellik Seçicileri kullanılarak XHTML elementleri, sınıflarına göre seçebiliriz.

İçerik ve sunumun birbirinden ayrıldığı modern web uygulamalarında, CSS ile içeriği şekillendirmenin ilk adımı, şekillendirilecek XHTML etiketlerin doğru bir şekilde seçilmesidir. Bu seçme işlemi CSS Seçicileri ile gerçekleştirilir. Bazı durumlarda CSS dokümanı içerisinde bir XHTML elemana ait, birden fazla seçme işlemi yapılabilir ve kural tanımlanabilir. Burada kritik olan, hangisinin tarayıcı tarafından öncelikle yorumlanacağı konusudur. Bu da CSS’de Belirlilik (Specificity) ilkesine göre belirlenir.