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 : http://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 2 |
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;} ul.aycanIcUl li a {color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:12px;} |
1 2 3 4 5 6 7 8 9 10 |
<ul class="aycan"> <li> <a href="#">Ucuza css yapılır</a> <ul class="aycanIcUl"> <li> <a href="#">Sen ucuza yaptır eninde sonuda seve seve geleceksin bana ve pahalıya yaptıracaksın!</a> </li> </ul> </li> </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 2 |
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;} 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 2 |
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;} 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 2 |
ul.aycan li a{color: #333; display:inline-block; background-color : #fff; border:1px solid #4c4c4c; font-size:14px;} 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 2 |
p {...} p span{} |
1 2 3 |
<p> <span>Çok sinirliyimdir</span> </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 internet sitesi oluştururken gereken unsurlara göre uzman eleman aramaya başladı.
Şimdilik diyeceklerim bu kadar arkadaşlar eğer bu konuya ilgi çok olursa “psd to css nasıl yapılır” diye bir makale yazacağım
Not : Mantarlı yemeklerden nefret ediyorum
Videolu psd to css yapta daha da sana iş yaptırmayalım 😀
Ellerine saglik Yazi cok aciklayici olmus helede benim gibi arayuz tasarimdan arabirim gelistirmeye yeni gecen biri icin diger yazini heycanla bekliyorum
peki arayüz tasarımcısı ile arabirim tasarımcısı arasındaki fark nedir?
@Volkan en kısa zamanda yazacağım.
@Arif arayüz tasarım demek arabirim css demek.
html bilmek şart:
Ucuza css yapılır
Sen ucuza yaptır eninde sonuda seve seve geleceksin bana ve pahalıya yaptıracaksın!
Evet evet bencede psd to css videosu çek en kısa sürede de sana iş miş vermeyelim yoksa batacaz… 😀
5. alt başlıktaki İplemeyen Şahıs’a vereceğin cevabı şöyle değiştirerek EnKralÖzCSSCoder olabilirsin; “Geliştirme aşamasında düzenli okunabilir bir CSS dosyası yaz. Kullanım aşamasına geçtiğin zaman online compressorlerin birinden geçirip elde ettiğin kodu kullan.”.
Güzel anlatımınız için teşekürler. 6. maddeye sonuna kadar katılıyorum 🙂
Üstad sinirlenme çabuk yorulursun
çok çok faydalı bir anlatım olmuş. ellerinize sağlık. css de düzen çok önemli bence. seo nun en önemli etkenlerinden biri.
güzel bir anlatım olmuş eline sağlık.
ellerine sağlık çok güzel bir makale olmuş. Bence en önemli bölüm 5. madde; hiç tab kullanılmadan yazılan html kodlar oluyor bazen, hiç mi düşünmüyorsun bunu phpye yada başka bir dile bir daha optimize edileceğini …
psd to css makaleniz yayınlanırsa mükemmel üstü olur.. 🙂
Yazılı olarak yapmayı düşünüyorum ama bakalım, çok uzun bir makale olacak.
Hocam yazı çok iyi. Css bilgime bişi katmasa da okurken “nerde lan bu sitenin reklamları tıklıcam lan!” Dedirten keyif aldım devamını bekliyoruz
Yorumunda bana keyif verdi, sağolasın :)))
Harika bir paylaşım, özellikle konunun önemli detayları oldukça net bir şekilde açıklanmış. İnsanları çeşitli karmaşık anahtar kelimelerle yormak yerine, okumaktan keyif alacağı içerikler her zaman daha iyidir. Kaliteli paylaşım adına teşekkür eder, paylaşımlarınızın devamını sabırsızlıkla beklerim.