Arabirim geliştiricisi kimdir? Css yazarken dikkat edilmesi gereken kurallar

Genellikle arkadaşların css'de yaptıkları hatalar var o yüzden bu yazıyı sizlere sunmak istedim css öğrenmek isteyenler burda yazanları dikkate almalıdır yoksa biraz geç ve zor öğrenirler...
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Arabirim geliştiricisi kimdir? Css yazarken dikkat edilmesi gereken kurallar
11. ŞUB, 2011 12 COMMENTS

Merhaba arakdaşlar bu aralar çok gerginim iş yapasım gelmiyor bu boş zamanımda da bir makale yazayım dedim. Bu makalede elimden geldiğince css ile ilgili bilgiler vereceğim.

Arabirim geliştiricisi kimdir ?

Arabirim geliştiricisi kısaca var olan bir tasarımı tarayıcıların anlayacağı dile dönüştürmek demektir. Bu diller : Html , Css ve javascript’tir. Piyasada şuanda şeyini (elini) sallasan arabirimciye değiyor forumlarda görürseniz sayfasını 15 liraya yapan bile bulursunuz. Ama arabirim bu kadar basit bir alan değildir bir web sitesini gösteren kısım görselliktir görselliği web’e aktaran kısım arabirimdir. Bir tasarım yaptırdınız ve iyi kötü css e döktürdünüz Oh proje güzel oldu demeniz yanlış olur. Dün psd to css yapılmış bir işi php scripte giydirme işi aldım ve neredeyse bilgisayarı sinirden kıracaktım! Adam tasarımcı ve para dışarı gitmesin diye css ‘ide kendi yazmış “ee bu normal ?”, nah normal! Adam görüntüyü elde etmek için saçma salak şeyler yapmış anlamsız , gereksiz , boş divler vs vs. Ve bu işi gördükten sonra ben sayfa başı ücreti 100 lira alıyordum ve dedimki yuh ya css’leri karşılaştırsak ben sayfa başı 200 lira alsam azdır.

Herneyse biraz gerginim konu çabuk dağılıyor, şimdi tasarımınızı css’e döktürürken dikkat etmeniz gerekenleri yazacağım;

1 – Ucuza kaçmayın.

Eğer css konusunda ucuza kaçarsanız bu size ilerde maddi zarar olarak dönecektir. Sebebi ise derme çatma yapılan, ite kaka bir şekile sokulmuş tasarımların gelişme diye bir durumu söz konusu bile değildir.

2 – Css’i sadece html olarak düşünmeyin html dediğiniz direk site içi optimizasyondur.

Gooogle beklentiniz varsa html tagları çok önemlidir ve bir adam metini direk div içinde yazıyorsa, Başlıkları h1 yerine direk a tagı içine alıyorsa veya bunun ikinici aşaması (h1 tagının seo açısından uyumlu olduğunu öğrenmiş varsayalım.) Gider her başlığa index.html h1 verir alt sayfalara gider h1 verir gördüğü her yere h1 verir ve bunda mantıksızlıkdır.

3 – Resimler sitenizin hızını belirleyen bir faktördür.

Tasarımcınız tembellik yapıp size img dayadığını düşünelim. Bunu alan bir arabirimci (benSenOBizSizOnlar mübarek herkez arabirimci) baktı img ula bunu ben img’lerin optimum seviyeye nasıl getiririm diye düşünmezse al sana ucuza iş! Eğer kaliteli bir arabirimciye verirseniz bu işi minimum seviyeye resimleri düşürmeye çalışacaktır. Bir resmi Ps’de açıp 4-up’da jpg , png 24 , png8 , gif olarak minumum seviyeli bir şekilde kaydetme yolları arayacaktır. (bu resimin boyutu ne olursa olsun örn : https://ff.im/vLiPH)

4 – Css optimizesi (geldik babalara)

Bu konuda yanlışım olursa kendimi , yanlışın olursa seni hırpalarım!

Css’in kodlanması çok önemlidir css de esneklik çok önemlidir , css de tekrarlanan ifadeler olmaması gerekir , cssde maximum optimize için değerleri ezmek kelimesi nedir , kalıtsallık nedir bilmek gerekir.

Bence css kalıtsallıktan ibarettir.

1
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;}
2
ul.aycanIcUl li a {color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:12px;}
01
<ul class="aycan">
02
<li>
03
<a href="#">Ucuza css yapılır</a>
04
<ul class="aycanIcUl">
05
<li>
06
<a href="#">Sen ucuza yaptır eninde sonuda seve seve geleceksin bana ve pahalıya yaptıracaksın!</a>
07
</li>
08
</ul>
09
</li>
10
</ul>
Gördüğünüz gibi iç içe bir ul yapısı yaptım ve burada kalıtsallıktan yaralanmayı göstereceğim (örnek biraz basit oldu ama idare edelim). Şimdi burada 1. derecedeki a tagına vermişiz değerlerini sonra 2. derecedeki a tagınada aynı değerleri vermiş ve üstünede birde değişecek kısımları yapmış değilimi ? ahh eşşek ahh (buna css’e ilk başlayan herkez yapar bende yaptım ) sana css kodunun anlamını yazıyorum.

diyorsun ki ul olupta class’ı aycan olanın altındaki li tagının altındaki a tagınının özellikleri şunlardır

1
color: #333; display:inline-block; background-color: #fff; border:1px solid #4c4c4c; font-size:14px;
Buraya kadar herşey normal ama sonra biz diyoruz ki ul olupta classı aycanIcUl olanın altındaki li tagının altındaki a’ tagınada bu değerleri tekrar yazarsak tam bir eşeklik yapmış oluruz. Çünki

1
ul.aycan > li > a = ul.aycanIcUl > li > a
burada göründüpğü gibi aycanIcUl’un içindeki a tagıda 1. derecedeki a tagından yararlanıyor değilmi ? o zaman biz css’i şöyle yazacağız.

1
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;}
2
ul.aycanIcUl li a {font-size:12px;}
Şimdi kalıtsallıktan yararlandık sırada ise css ezme yöntemi. Mesela biz 2. derecedeki a tagının border-left değerini kaldrımak istiyoruz ve backgorund’a img vermek istiyoruz ne yapcaz ?

Amatör yazım şekli ;

1
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;}
2
ul.aycanIcUl li a {color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:12px;}
Kalıtsallık ve ezme metodundan yararlanılan yazım şekli ;

1
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;}
2
ul.aycanIcUl li a {background-image:url(../resim/kutuphane/resim.png) ;border-left:0; font-size:12px;}
Css’de esnek ifade için sadece şunu diyorum. Birkaç ezme olayı ile kullandığımız kodları sitenin başka bölümünde kullanabiliyorsak ve en önemlisi verilen tasarımdaki yapının esneme payını düşünerek (bir text alanına ilk sefeder 100 karakter veri girin sonra 1000 karakter veri girileceğini göz önüne bulunduradak kod yazın) kod yazmalıyız.

5 – Css’de düzen , kolay erişebilirlilik

Bu kısım bana css yazarken haz veren kısımdır ve bir css yazarken haz almıyorsak o css’den hayır gelmez (gönülsüz s*v*şmeden doğan çocuğun adı p*çt*r).

Css de anlaşılabilirlilik ve kolay erişebilirlilik açısından açıklamalı satırlar yazın ve satırların derecelerini belerileyin örnek ;

1
p {...}
2
p span{}
1
<p>
2
<span>Çok sinirliyimdir</span>
3
</p>
Bu dereceler ile kolay erişilebilirlilik sağlayacaksınız. Ama kulağıma bir kaç ses geldi ?

İplenmeyen kişi : “Olum ben senin gibi amatörmüyüm ben hız önemli , css dosyasının boyutunun düşük olması önemli neden bahsediyorsun sen?”

Ben : Bilader bak css dosyasının boyutu çok önemlidir katılıyorum ama sen duplicate veriler yazacağına kalıtsallıktan yararlan, sonra bu boyut olayını düşün.

He kalıtsallık tamam mı o zamn css’i parçala.

Hmm parçalamaktan hoşlanmıyormusun ? o zaman bildiğin gibi yap.

6- Sizi css yazmaya teşvik edecek ücretlere çalışın ve sonradan bitme araya sıkışacak işler almayın

Para para para! Hep para para para diyorum ama neden ? aç gözlümüyüm ? hayır doyumsuzmuyum ? hayır

Bir işe yüksek ücret çekmek o şahsı kazıklayacağınız anlamına gelmez, işin temiz olacağı anlamınada gelmez. Ben kendimi örnek vererek anlatayım;

Ben bir işten tatmin edici bir rakam alırsam o işi yaparken mutlu olurum , haz alırım , sevdiğim için yaparım ve buda işimde 100% verimli olmamı sağlar. Sevinçle , mutlulukla , sevgiyle(ciddi anlamda işinizi sevgili ile yapın) yaptığınız işler çok temiz ve kale gibi sağlam olacaktır.

Türkiyede arabirimcilerin yeri

Bence Türkiyede arabirimcilere artık ciddi bir şekilde önem verilmeye başlandı. Firmalar artık arayüz , arabirim, yazılım bilen kişiler değil

Arayüz yapan

Arabirim yapan

Yazılım yapan

kişi(ler) olarak bir web sitesi oluştururken gereken unsurlara göre uzman eleman aramaya başladı.