11 Adet Soru // CSS-PSD-Bootstrap-Grid

Selamlar,
Öncelikle soruların çok afakî sorular. Temelde eksiklerin olduğunu anlıyorum bu sorulardan.
Lütfen önce salt HTML ve salt CSS çalışın. Bootstrap ile işe başlamak, kumun üzerine 5 katlı apartman dikmeye benzer. Ve front-end dünyası bootstrap'a mahkum edilecek kadar dar kalıplı bir dünya değildir.

1-) Web tasarımların PSD dosyalarında içeriklerin soldan sağa genişliği neyi ifade eder? Yüksek olması veya düşük olması neyi ifade eder? CSS'de PSD tasarımındaki genişlik neyi ifade eder? CSS'de ne yaparız container genişliği için?

PSD dosyalarının soldan sağa genişliği bir şey ifade etmez, ancak PSD dosyası içerisindeki en geniş ögenin genişliği PSD dosyasının boyutu ile eşit ise ancak o zaman kaydadeğerdir.

PSD'de 960px genişliğindeki bir yapıyı .classAdi {width:960px;} şeklinde tanımlayabiliriz.
Ancak bu noktada
1) classAdi isminin başında niye nokta var?
2) width değerinden sonra niye eşittir değil de iki nokta( : ) kullandık?
3) wiidth değerini yazarken px yazmak zorunda mıyız?

sorularına net bir cevabınız yoksa, diğer cevapları hiç okumadan CSS çalışmanızı öneririrm.


2-) CSS'de container yani içeriklerin yer aldığı kısım nasıl ifade edilir? Niye ifade edilir? Neden ortalanır?


<div class="container">içerik burada...</div> şeklinde kendinize bir container tanımlayabilirsiniz. Niye'si ve neden ortalandığı tasarımcının ve arayüzcünün insiyatifindedir. Yapılması zorunlu değildir.

1) Container (contain : içermek,kapsamak - container: kapsayıcı) demek olduğunu biliyor muydunuz?
2) DIV'lerin neden kullanıldığı hakkında bilginiz var mı?
3) Örneğin bir DIv'in ve bir SPAN'ın default display özelliklerini biliyor musunuz? Neden containerr yazarken <span class="container"></span> yazmıyoruz da <div class="container"></div> yazıyoruz?

sorularına net bir cevabınız yoksa, diğer cevapları hiç okumadan HTML çalışmanızı öneririrm.


3-) Eğer PSD web tasarım çalışmasındaki genişlik kullandığımız bilgisayarın monitöründe büyükse nasıl kodlarız? Kodlayabilir miyiz?

Elbette kodlayabilirsiniiz. Burada tasarımcıdan almanız gereken bilgi, tasarım yapılırken %100'lük bir kurgu mu yoksa sabit genişlik üzerine bir kurgu mu düşünüldüğünü öğrenmektir. Kurgu %100 değil de sabit genişilikli ise sizin ekran boyutunuzu aşan bir durum (overflow) ortaya çıkacaktır.

1) Overflow nedir? CSS üzerinde nasıl tanımlanır? Yatay ve dikey overflow nasıl kullanılır? Neden ve ne zaman ihtiyaç duyabilirim?

sorusuna net bir cevabınız yoksa, diğer cevapları hiç okumadan CSS çalışmanızı öneririrm.


4-) Neden bazı PSD web tasarım çalışmalarında kolonlar var? Kolonlar neyi ifade eder? Nasıl Kodlarız? Kolonlar için gereken işlem olmadan kodlayamazmıyız?

Kolonlar grid sistemi ifade eder. Kolonlar tasarımcının tasarımını belirli bir matematik ölçüsünde yaptığını gösterir. 12 kolonlu bir tasarım şunu ifade eder: Benim tasarımım genişliği eşit ölçüdeki 12 kolondan oluşur. Sevgili arayüzcü arkadaşım; sen kendine benim verdiğim kolon ölçülerinde 12 eşit kolon tanımlarsan, bu işi zorlanmadan halledebilirsin.

1) CSS kullanarak 4 adet DIV'i nasıl yan yana getirirsiniz?
2) Bu işi kaç adet metodla yapabilirsiniz?

sorularına net bir cevabınız yoksa, diğer cevapları hiç okumadan CSS çalışmanızı öneririrm.


5-) Bazen tüm div dosyaları tek bir ebeveyn altında toplanır ve en üstteki ebeveyn ortalanıp genişlik tanımlanır. Bazen ise her kısmın(header, content, footer vs) divi altında container adı verilen genişlik tanımlanmış ve ortalanma kodu verilmiş class olur. Bu ikisi arasındaki fark nedir?

Bu durum %80 olarak tasarımla alakalıdır. %20'lik kısmı arayüzcünün tercihini veya bilgi birikimini ifade eder. Tüm içeriği kapsayan, standart ekran boyutlarından küçük, sabit bir genişlik varsa tüm her şeyi bir DIV içerisinde toplamak mantıklıdır. Ancak hiyerarşik olarak sabit genişlikten taşan bir yapı varsa, tek div altında toplanmaz. (ör: ekrana göre %100 genişlikli bir slider)

1) Bir tasarıma baktığınızda bu ayrımı yapmakta zorlanıyor musunuz?
Eğer öyleyse mümkün olduğu kadar Free PSD indirip, bir kağıda genel yapısını çizmenizi öneririm. Çünkü bu durum kodlamadan ziyade mimari oluşturma işine benzer


6-) Neden bir class çerçevesinde ortalamak ve genişlik tanımlaması vermek gerekir? Vermezsek ne olur?

Gerekmez. Vermezseniz de ortalanmamış ve genişlik tanımlanmamış olur. Burada konu yine elementlerin default davranışları hakkındaki bilgi birikiminizle alakalı. 2. sorunuza cevaben ilettiğim sorulara geri dönebilirsiniz : )


7-) Farklı grid sistemleri var, örneğin 960grid sistem veya bootstrap. Bu ikisinin gridleri arasında ne fark var? Nasıl ve ne mantıkla kullanılırlar?


- CSS'lerini ve (varsa) Javascript'lerini entegre etmek
- Kullandığınız grid sistem'in (varsa) dependency'lerini entegre etmek
- Dokümantasyonunu okumak ve dokümantasyonuna göre kod yazmak
suretiyle kullanabilirsiniz.

Çıkış sebepleri tamamen iş yükünü azaltmak amaçlı. Bootstrap üzerinden gidelim. Malumun, bootstrap Twitter'in programatik arayüzüdür. Yani twitter'ın tasarımı yapanlar, belirli bir mantık çerçevesinde tasarımlarını yapmışlar ve bu mantığı arayüz'e dökmüşler.


8-) Responsive için CSS yazarken kullanılan ekran ölçülerini kim belirledi? Hangi ölçüler var? Çalışmamızı farklı ekranlarda denemek için hangi siteler var?


- Ekran ölçülerini cihazlar belirledi. Arayüzcüler ise tüm cihazların genişlikleri dahilinde ara bir değer belirleyerek ona göre esnek olarak kod yazar. Örneğin: genişliği 480px, 560px, 640px, 768px dört cihazı "768px'den küçük" şeklinde tanımlayarak kodlarlar.

http://mobiletest.me/



9-) Bootstrap dendiği kadar zamandan tasarruf ettiriyorsa neden tüm geliştiricler kullanmaz? Ne gibi dezavantajları var?

Bootstrap bir kalıptır. Eğer iş o kalıba uymuyorsa neden kullanılsın? Bootstrap'i default olarak (12 gridli ve .min.css'li) kullandığın zaman seni kısıtlar. Yani sadece 12 tane grid için koca bootstrap'i entegre edeceksin. Butonu ek olarak yazacaksın, fontu ek olarak tanımlayacaksın, renkleri ek olarak belirteceksin, mobil menüyü sadece onun belirttiği gibi kullanacaksın... O zaman bir anlamı olmaz.

Ancak grid sayısını, butonlarını vs. özellikleri kendi tasarımına göre adapte edebilirsen kolay. (Generator aracılığıyla font tipi-genişliği-grid aralıkları-renkler vs tanımlamak ve CSS yerine LESS kullanarak sadece lazım olan component'leri entegre etmek bootstrap'i daha anlamlı kılacaktır.)

10-) Grid sisteminin faydası nedir?

Grid sistemi kullanmak işi "pixel perfect"'e yaklaştırır. Ancak bootstrap "pixel perfect" bir framework değildir. "Mobile-first" olduğu için "percent-perfect" diye tanımlamak yanlış olmaz. Dolayısıyla işin bir matematiği olması, düzeni arttırır ancak bu matematiği bootstrap ile (pixel cinsinden) yakalamak pek mümkün görünmüyor.

11-) CSS3 ile gelen flex ile grid, bootstrap vs farkı nedir?

Flexbox henüz tam oturmuş bir yenilik değil. Öğrenmeni tavsiye ederim ancak kullanmanı tavsiye etmem. Senin de belirttiğin gibi grid oluşturup bu gridin içindeki öğelerin, farkı ekran boyutlarında nasıl davranacağını tanımlayabileceğin bir yapı.

http://www.w3schools.com/css/css3_flexbox.asp
http://caniuse.com/#feat=flexbox


Umarım cevaplar faydalı olur.