WebZap Eklentisi ve Bootstrap Yapısı

Eski yıllara göre gerçekten teknoloji çok büyük bir hızla ilerliyor. Özellikle eskiye nazaran çok kısa süreler içerisinde bir teknolojinin yeni bir versiyonun çıkması artık sıradan bir olay oldu. Tabii bu teknolojiye Web Teknolojileri de dahil. Artık her şeyin pratikleştiği bu dönemde arayüz çizimi ve bunun sonrasında CSS/HTML aktarımını daha hızlı, çabuk ve kolay nasıl yapabiliriz onlardan bahsetmek istiyorum.

Öncelikle şunu söylemeliyim ki; WebZap ve Bootstrap tamamen birbirinden bağımsız/alakasız iki ayrı araçtır. Bu başlık altında WebZap ve Bootstrap’ı ayrı ayrı inceledikten sonra iki aracın arasında nasıl bir ilişki/bağ kurabiliriz veya işlerimizi bu iki araç ile daha da pratik nasıl yapabiliriz onlardan bahsedeceğim.

WebZap Eklentisi (Photoshop Plug-in)

İlk olarak WebZap ile başlıyorum: WebZap bir Adobe Photoshop eklentisidir. WebZap ile çok hızlı, kolay ve düzenli bir şekilde arayüz çizimi gerçekleştirebilirsiniz. Aslında ona çizmek bile denilemez, sadece bir kaç tık ile sayfanız anında oluşturulmuş oluyor. WebZap’la yeni bir dosyanın boyutlarından(en/boy) tutun, sayfa içerisinde kullanılacak materyallerin(logo, text, image.. etc.) varsayılan olarak koordinatları ve yine aynı şekilde boyutları belli bir şekilde karşımıza çıkıyor. Bu ufacık ama gerçekten çok işe yarar eklentimiz sayfamızda ki tüm renkleri tam bir uyum içinde bize sunuyor.
 

WebZap ile şablonumuzu oluşturduktan sonra yazılar, resimler, butonlar veya şöyle diyeyim sayfada bulunan bütün katmanlar üzerinde değişiklikler yapabiliriz. Ayrıca WebZap bize sayfa şablonunu oluştururken kullanacağımız iki çeşit yatay ve dikey menü çeşitleriyle geliyor. Yine şablonumuzda 960 grid sisteminide kullanabiliriz. Konu gereği 960 grid sistemine fazla girmiyorum, yoksa konu başka yönlere sapacak gibi.

WebZap, şuan için Photoshop CS5 ve CS6 sürümlerinde çalışmakla beraber, Macintosh ve Windows işletim sistemlerini desteklemektedir. Kurulumu gayet basit; Adobe Extension Manager ile kısa sürede kuruluyor. Kurulum bittikten sonra şu adımları takip ediyoruz Window>Extensions>WebZap.

Ardında karşımıza şöyle bir WebZap paneli gelecektir. Gayet sade ve kullanımı kolay!

Dilerseniz üst kısımdan itibaren başlayalım. Görüldüğü üzere solda iki, sağda ise dört adet menü yer almaktadır. Solda bulunan iki menünün görevi; sayfada yer alacak olan menünün yatay hizalanması, diğeri ise dikey hizalanması içindir. (soldan sağa doğru)

Sağ tarafta yer alan menüler ise sırasıyla şöyledir; yeni sayfa oluştur, 960 grid sistemi kılavuzlarını oluşturur, WebZap ile oluşturucağınız katmanları ayrı sekmede düzenlemek, kesmek için ve son olarak sayfaya yazı eklemek isterseniz bu butonu kullanabilirsiniz. (soldan sağa doğru)

Ana şablonu belirledikten sonra, küçük butonların altında yer alan büyük butonlar üzerinden şablonumuzu şekillendirmeye kaldığımız yerden devam edebiliriz. Özellikle sol üst bölümde yer alan küçük butonlar sayesinde alt sekmede bulunan menülerin ne türden olacaklarını belirlediğimizi unutmayalım. O yüzden bu kısım genel anlamda sayfalarınız nasıl olacağını belirler. Aslına bakılırsa diğer menülere ihtiyaç duymadan tasarımımızı bitirebiliriz. Fakat sıradan ve alışagelmişin dışına çıkmak için iki ve üçüncü menüleri de kullanarak daha fazla eklemeler veya düzenlemeler yapabiliriz. Özellikle form araçları bir iletişim sayfasının olmazsa olmazlarıdır. Bu yüzden iletişim sayfası tasarımı oluştururken en çok kullanacağımız bölüm form sekmesi olacağından hiç şüpheniz olmasın.

Bana göre bir formda olması gereken tüm araçlar WebZap panelinde yer alıyor, eksikleri vardır mutlaka fakat genel olarak bakıldığı zaman çoğunlukla kullanılan materyaller panele eklenmiş. Gayet şık ve düzenliler. Özellikle tüm sayfalara rahatça ekleyebileceğimiz gibi sayfamızın görüntüsünde hiç bir bozulma olmuyor(Katmanlar arası uyum). Renkler diğer katmanlarla uygun halde hazırlanmış.

Üçüncü menüde ise ikondan da belli olacağı üzere, son rötuşları atıyoruz. Birinci bölümde tasarımımıza çerçeve ekleyebilir ve bu çerçeveyi ekledikten sonra keyfinize göre düzenleyebilirsiniz. Tabii bu düzenleme işlemi sadece çerçeve için geçerli değil diğerleri için de aynı olayın mümkün olduğunu unutmayın.
İkinci sekmede Türkçe karşılığı ‘pergel’ olan Dividers ekleyebiliriz. Yalın haliyle çizgiler ekleyebiliriz diyebilirim. Bu çizgiler ile tasarımda belli başlı yerleri bölümlere ayrılabilir. Burası tamamen sizin isteğinizle doğru orantılı, kullanmayabilirsiniz de.
Üçüncü sekmede ise yazı ekleyebilirsiniz. Ekleyeceğiniz yazı üzerinde her türlü düzenlemeyi bu bölümden halledebilirsiniz. Renk, link veya başlık atamalarında renk ayarlamasında hemen buradan yapabilirsiniz.

En son menü de ise aslında pek de ihtiyaç duyulmayacağını düşündüğüm bir vitrin olayı var. Tasarımlarınızı eğer tanıtmak veya satışa sunduğunuz vakit çok işe yarayacaktır. Size tüm yönleriyle hazırlanmış, arka planda gayet uyumlu bir resim ile beraber bir browser görüntüsü yer almaktadır ve bunun içinde de sizin tasarımınız yer alacak şekilde ayarlanmıştır. Tasarımınız bittiğinde isteğinize göre sekme altında yer alan görüntüye tıkladığınızda browser içerisinde sizin tasarımınız yerleşmiş vaziyette PSD dosyası otomatik oluşturuluyor.

WebZap ile anlatacaklarım şimdilik bu kadar. Daha detaylı anlatımı kendi sitesinde bulabilirsiniz. Videolu örneklerle açıklamalar mevcuttur. WebZap’ı 19$’a kendi sitesinden satın alabilirsiniz.

(Bu vidyo yazı yayımlandıktan sonra eklenmiştir. – 27 Nisan 2013)

Bootstrap Yapısı (Framework)

Bootstrap, WebZap gibi aynı amaç doğrultusunda oluşturulmuş bir başka araç diyebilirim. Bootstrap, Twitter tarafından geliştiricilere ücretsiz olarak sunulmuş bir CSS bütünüdür. Yani Framework’dür. Daha önce CSS dosyasında var olan sınıfları sayfamızda kolay ve hızlı bir şekilde sadece isim tanımlaması yaparak nesnelerin stillerini oluşturmuş oluruz. Bu sayede zamandan tasarruf sağlar kaldığımız yerden arayüz programlanmasına hemen devam edebiliriz.

Hangi tarayıcıları destekler ?

Modern tarayıcılar olan Chrome, Firefox, Opera, Safari gibi tarayıcılarda gayet düzgün çalışmakla beraber IExplorer tarayıcısının son sürümlerde stabil çalıştığı görülmüştür.

Kullanımı

Kullanımı gayet basittir. Sayfaya nasıl ki kendi özel stil dosyalarınızı ekliyorsunuz, Bootstrap’ı da aynı şekilde ekleyeceksiniz.

<link rel="stylesheet" href="css/bootstrap.css">

Klasör içerisinde gelen diğer .css ve .js dosyalarını da sayfanıza eklemeniz sizin yararınıza olacaktır.

Örneklerle Bootstrap

Açılır buton grubu

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

 Form nesnesi; mail text

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>

 Resimler

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

 Yatay form

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

 İsteğe bağlı sınıflar; tablo

<table class="table table-striped">
  …
</table>

 Tipografi; uyum sınıfları

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

 Tipografi; vurgu sınıfları

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Bootstrap işte bu kadar basit ve pratik! Yüzlerce sınıfı içerisinde barındıran, bir kaç isim atamasıyla hızlı bir şekilde nesneleri oluşturmamızı sağlıyor. Daha fazla örneğe ulaşmak için kendi sitesini inceleyebilirsiniz. En az CSS dosyasında daha önce oluşturulmuş sınıflar kadar .js dosyasında yer alan sınıflarda birbirinden şahane. Açılır kutular, sekmeler,  uyarı mesajları ve daha neler neler…

WebZap ve Bootstrap Birleşimi

Asıl can alıcı nokta bence burası. WebZap ile hızlı tasarım, Bootstrap ile hızlı CSS aktarımı. Başlık bu kadar basitti aslında. Normalde de her buton veya field için ayrı ayrı katmanlar oluştururken WebZap ile daha önce oluşturulmuş katmanları çok hızlı bir şekilde sayfamızda olması gereken yere kolayca yerleştirdik. Bu sayede bitmesi gereken zamandan çok daha çabuk sade ve göze hoş tasarım çıkarttık. Tasarım aşaması bittikten sonra CSS/XHTML aktarımına geçeceğiz doğal olarak.

CSS/XHTML aktarımında reset, js dosyaları derken epey bir vakit kaybı zaten oluşuyor. Bunun yerine Bootstrap kullanarak daha önce stil özellikleri belirlenmiş nesneleri tasarımda nasılsa .html dosyamıza da o şekilde yerleştirerek PSD to CSS aktarımını gerçekleştirmiş oluyoruz bir nevi. Burada ayarlamamız gereken olaylar; boyutlar, renkler olabilir. Bu da sıfırdan yazmaktan çok daha öte bir şey olacaktır sizin için.

Kaynaklar

1. http://twitter.github.io/bootstrap/index.html
   
2. http://webzap.uiparade.com/
3. http://designshack.net/articles/software/webzap-beautiful-photoshop-web-mockups-at-light-speed/
4. http://chocotech.blogspot.com/2012/05/twitter-bootstrap-nedir-ve-nasl.html
5. http://www.anarschi.com/twitter-bootstrap-framework-kullanim-ve-ipuclari