26 Şubat 2011 Cumartesi günü bir aksilik olmazsa TÜTEV’de “Arayüz Geliştiricileri İçin Web Sitesi Kodlamak” adlı bir seminer düzenleyeceğiz. TÜTEV’e ve özellikle beni bu iş için ikna eden Ömer Faruk Sarıkaya’ya teşekkür ediyorum. Ayrıca bana yol arkadaşı olmaya kabul eden S. Ferit Arslan ve İlyas Osmanoğlulları’na da teşekkürler.
Genel manasıyla Arayüz Geliştiricileri ve Görevleri üzerinde durmaya
çalışacağız bu seminerde.
Seminer Programı
Genel Web Sitesi Kodlaması Hakkında
Web sitesi yapım aşamaları hakkında genel bir bilgilendirme
Arayüz Geliştiricilerin Görevi ve Öğrenme Süreci
Arayüz Geliştiricileri neleri bilmeli nelere dikkat etmeli
HTML, CSS ve Javascript hakkında genel bir bilgi
Genel tanımları ve işlevleri
Bir uygulama kodlama (html ve css kodunun yazılması)
Daha önce yaptığım bir sitenin kodlanması
Soru -Cevap
Konular çok geniş olduğu için zamanımız yettiğince değinmeye
çalışacağız.
Resimde görüldüğü gibi başlık yapmak için bir bg resmi hazırlayıp
başlığın altına tanımlıyordum. Sonra acaba ben bunu resim kullanmadan
yapabilirmiyim diye düşündüm. Float uygulanmış elemanların kapsayamama sorunu diye ismini uzattığım clearfix sorunu aklıma geldi, aslında bu
bir sorun değil kabul idi. Tarayıcılar olayı böyle kabul ettiği için
içinde float uygulanmış bir eleman olan kapsayıcı eleman içeriğine göre
yükseklik almıyor ve sorun oluşturuyor.
Peki, burası ile ne alakası var diyorsanız. Gelelim bura ile olan
alakasına; şöyle bir şey geldi aklıma eğer bu başlık elemanına alt
çizgisi eklersem ve içine bir eleman koyup float uygularsam başlık
eleman içindeki kapsayamayacak ve istediğim çözüme kavuşacağım. Sadede
gelelim ve hemen bir örnek yapalım.
Örnekte dikkat edeceğimiz bir iki husus var. h1 içie koyduğumuz span’ın
ardalan rengini zemin ile aynı yaparak yazının altındaki çizgileri yok
ediyoruz, ayrıca bu span’a sağdan ve solda padding vererek yazıya tam
yapışmasını engelliyoruz.
Metot sadece bir başlığın olduğu ve tek bir stilin olduğu durumlardan
daha çok, site içinde birden fazla alt çizgi rengi ve şekli olan
sitelerde daha kullanışlı olacağı düşüncesindeyim. Tabi karar size
kalmış.
Metodu IE6+, Firefox, Chrome, Opera ve Safari destekliyor. Burada tek
dezavantaj ise fazladan span kullanımıdır.
CSS3 standart geliştiricileri önceki sürümlerde eksik olan birçok sorunu
gidermektir. Daha önce birçok uygulamamızda yaşadığımız sorunlardan
biriside bir elemana birden fazla ardalan resmi(background-image)
tanımlayamıyoruz. Bu sorun nedeni ile birden fazla ardalan resmi
tanımlamak istediğimiz durumlarda fazla eleman ekleyerek çözüm
üretiyorduk.
CSS3 geliştiricileri bu sorunu gördü ve çözüm üretildi. CSS3 background
tanımında birden fazla resim tanımlamamıza izin veriyor. Birden fazla
tanımı yapmak için aralarına virgül koyuyoruz.
Tarayıcı Desteği
2.0+
9+
3.6+
Mobil Tarayıcılar
2.1+
3.2+
36+
Yeni nesil tarayıcıların bir çoğu bu özelliği desteklerken ie8 ve altı
sürümler bu özelliği desteklemiyor ve bu web mecrasında bizi bu özelliği
kullanmamızı engelleyecek. Desteklemeyen tarayıcılar için eski yöntemi,
destekleyen tarayıcılar için ise yeni yöntemi kullanarak aşmaya çalışan
çözümler var ancak bu yöntemler koordinasyon sorununa neden olacaktır.
Ama bu yöntemi uzun süre kullanmayacağız anlamına gelmesin mobil mecrada
bu metodu kullanabiliriz.
Örnek 1:
Bu yöntemi kullanarak daha önce yaptığımız css ile buton yapmak konumuzda anlattığımız Görselliği Arttırılmış Esnek
Yapılı Butonlar yöntemi birde yeni bu tanım ile yapalım.
Burada şuna dikkat ediyoruz, background tanımı yapılırken sıralama
önemli. Sıralama şöyle oluyor background: sol, sağ ve orta şeklinde
sıralama yapmalıyız.
Başka bir örnek ile özelliğin kullanılabileceği yerleri düşünelim. CSS3
ve özellikleri daha yeni yeni kafamızda ve uygulamalarımızda yerini
almakta, bundan dolayıdır ki yapacağımız uygulamalar basit olabilir ama
özelliği öğrenme açısından önemlidir.
Çoklu ardalan kullanımı birçok siteyi kodlarken ihtiyaç duyduğum bir
özellikti. Her defasında hayıflanıyordum, keşke şöyle bir özellik olsada
kullansak diye, gerçi hala kullanamıyoruz. Mobil araçlar için kod
yazarken kullanabilmemiz çok güzel.
Makaleye tekrar baktığımızda bu tip bir alıntı görselliğini kazanmak
için üç adet ardalan resmi kullanıyoruz. İçeriğine göre yazının
uzamasını istediğimiz için 3 adet resim kullanıyoruz. Tabi bu 3 resmi
tanımlamak için 3 adette elemana ihtiyacımız oluyor. Bunlar eski örnekte
blockquote, p ve cite elemanları. Biz burada çoklu ardalan kullanarak
tek bir eleman ile bu işi yapabiliriz. Tabi burada cite etiketinin
anlamından dolayı bırakacağız ama yine o olmadanda bu işi
yapabileceğimizi bilelim.
CSS Sprite resmimiz aşağıdaki gibi tek resim olacaktır.
HTML kodu
CSS kodu
Aslında css kodumuz önceki koddan pek farkı yok. Farklı olan iki kısım
var. background tanımları.
3. bir örneğide paralaks bir zemin için yapalım.
www.storiesinflight.com buradaki örneği yapalım.
Her biri ayrı ayrı olan resimler(çimen, ağaç, bulut ve gökyüzü) üst üste
koyarak bir resmi elde edeceğiz. Örneği aldığımız sitede bu resme
hareketde kazandırılmıştır, ancak bizim konumuz olmadığı için işin bu
kısmına girmeyeceğiz.
Örnekte görüldüğü gibi bir elemana 4 adet resim tanımladık. background
tanımlarını ayrı ayrı yapabildiğimiz gibi bir önceki örnekte olduğu gibi
kısaltmada uygulayabiliriz.
Yukarıdaki resimde de görüldüğü gibi ilk tanımlamamız en önde daha
sonradaki resimlerde sıralamaya göre arkaya doğru sıralanmaktadır.
Sonuç
Yukarıda örnek olarak verdiğimiz sayfalarda görüldüğü gibi birçok yerde
kullanılabilecek bir özelliktir çoklu ardalan özelliği. Daha yeni bir
özellik olması açısından zamanla zihnimizde daha gelişmiş örnekler yer
alacaktır ve ileride daha güzel sonuçları bu özellik sayesinde
sayfalarımıza uygulayacağız. Ben CSS3 hakkındaki ilk çalışmalar
başladığında ilk olarak bu özellik dikkatimi çekmiş ancak daha sonra
border-image özelliğini gördükten sonra çoklu ardalan özelliği ile
yapabileceğim birçok uygulamayı border-image özelliği ile daha kolay
yapabileceğimiz gördüm. İleride zamanı gelince onuda anlatacağız, ama bu
özelikte bizi heyecenlandırıyor açıkçası.