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.

Katılım için TÜTEV’in sitesine başvurabilirsiniz.

[View Larger Map][]

Görüşmek dileğiyle.

Sağlıcakla Kalın.

TÜTEV’in sitesine: tutevegitim.com/Seminer/arayuz-gelistiricileri-semineri.html [View Larger Map]: http://maps.google.com/maps?ie=UTF8&q=t%C3%BCtev+ankara&fb=1&hq=t%C3%BCtev&hnear=Ankara%2FAnkara+Province,+Turkey&cid=0,0,10003925155912076127&ll=39.931876,32.837139&spn=0.006295,0.006295&t=h&source=embed

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.

HTML kodu;

 <h1>
	<span>Ged tortor odio</span>
</h1>

CSS kodu;

h1{
	border-bottom:3px solid #9faf41;
}

h1 span{
	float:left;
	padding:0 10px;
	background-color:#111;
	margin-left:10px;
	margin-top:-15px;
	display:block;
	font-size:24px
}

Örneği görmek için tıklayınız.

Ö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.

Kalın sağlıcakla

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.

Yuvarlak kenarlı kutular,  CSS ile sekmeli tab menu yapımı, CSS ile gölge vermek, CSS ile buton yapmak vb. yazılarımızda bu durumu görebiliriz.

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.

background: url(image_1.jpg) top right no-repeat,
url(image_2.gif) bottom right no-repeat,
url(image_2.png) bottom right no-repeat;

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 9+ 3.6+

Mobil Tarayıcılar

Android Mobil Safari Chrome
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.

<a href="">Örnek Buton Metni</a>

CSS kodumuz

body {
    background-color:#363636
}
a {
    display:block;
    font:bold 14px Arial, Helvetica, sans-serif;
    color:#363636;
    float:left;
    padding:5px 14px 0 14px;
    height:23px;
    text-decoration:none;
    background:url(cancanli_butonlar_ard_.gif) left top no-repeat, url(cancanli_butonlar_ard_.gif) right -58px no-repeat, url(cancanli_butonlar_ard_.gif) center -29px repeat-x
}

Örneği görmek için tıklayınız.

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.

Örnek 2:

Alıntı: blockquote ve q etiketleri makalemize tekrar bakalım ve bu örneği çoklu ardalan ile ne kadar kolaylaştırdığımızı görelim.

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

<blockquote>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi
ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</blockquote>
<cite>Mevla'na Celaleddin-i Rumi</cite>

CSS kodu

blockquote {
    width: 224px;
    margin:0;
    padding:30px 12px 0 12px;
    color: #fff;
    text-align:center;
    font:bold 14px/1.7em Georgia, "Times New Roman", Times, serif;
    background: url(images/alinti_ard.gif) -490px 0 no-repeat, url(images/alinti_ard.gif) -242px bottom repeat-y;
}
cite{
    font-size: 1.2em;
    padding-bottom:29px;
    display:block;
    text-align:center;
    color:#C6D9F1;
    text-decoration:underline;
    width:240px;
    background: url(images/alinti_ard.gif) no-repeat 1px bottom, url(images/alinti_ard.gif) -242px bottom repeat-y;
}

Aslında css kodumuz önceki koddan pek farkı yok. Farklı olan iki kısım var. background tanımları.

Örneği görmek için tıklayınız.

Örnek 3:

​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.

HTML kodu

<div id="paralaks">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
</div>

CSS kodu

#paralaks{
	width:400px;
	height:180px;
	padding:5px;
	background-image: url(images/cimen.png), url(images/agac.png), url(images/bulut.png), url(images/gokyuzu.png);
	background-repeat: repeat-x, no-repeat, repeat-x, repeat-x;
	background-position:0 0, 120px 0, 0 0, 0 0;
}

Örneği görmek için tıklayınız.

Ö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ı.

Kalın sağlıcakla.

Kaynaklar